prompt-area 0.1.0

package/dist/chunk-UBBCAMJA.js

@@ -0,0 +1,116 @@
+'use client';
+import { segmentsToPlainText } from './chunk-E7HUXORB.js';
+import { useState, useRef, useMemo, useCallback } from 'react';
+
+function usePromptAreaState(options = {}) {
+  const { initialValue = [] } = options;
+  const [value, setValue] = useState(initialValue);
+  const ref = useRef(null);
+  const plainText = useMemo(() => segmentsToPlainText(value), [value]);
+  const isEmpty = useMemo(() => {
+    if (value.length === 0) return true;
+    return value.every((seg) => seg.type === "text" && seg.text.trim() === "");
+  }, [value]);
+  const hasChips2 = useMemo(() => value.some((seg) => seg.type === "chip"), [value]);
+  const chips = useMemo(
+    () => value.filter((seg) => seg.type === "chip"),
+    [value]
+  );
+  const bind = useMemo(() => ({ ref, value, onChange: setValue }), [value]);
+  const clear = useCallback(() => {
+    if (ref.current) {
+      ref.current.clear();
+    } else {
+      setValue([]);
+    }
+  }, []);
+  const focus = useCallback(() => ref.current?.focus(), []);
+  const blur = useCallback(() => ref.current?.blur(), []);
+  const insertChip = useCallback(
+    (chip2) => ref.current?.insertChip(chip2),
+    []
+  );
+  return {
+    bind,
+    plainText,
+    isEmpty,
+    hasChips: hasChips2,
+    chips,
+    clear,
+    focus,
+    blur,
+    insertChip
+  };
+}
+
+// src/prompt-area/segment-helpers.ts
+function text(value) {
+  return { type: "text", text: value };
+}
+function chip(opts) {
+  return { type: "chip", ...opts };
+}
+function isSegmentsEmpty(segments) {
+  if (segments.length === 0) return true;
+  return segments.every((seg) => seg.type === "text" && seg.text.trim() === "");
+}
+function hasChips(segments) {
+  return segments.some((seg) => seg.type === "chip");
+}
+function getChips(segments) {
+  return segments.filter((seg) => seg.type === "chip");
+}
+function getChipsByTrigger(segments, trigger) {
+  return segments.filter(
+    (seg) => seg.type === "chip" && seg.trigger === trigger
+  );
+}
+
+// src/prompt-area/trigger-presets.ts
+function mentionTrigger(opts = {}) {
+  const { char = "@", ...rest } = opts;
+  return {
+    char,
+    position: "any",
+    mode: "dropdown",
+    chipStyle: "pill",
+    accessibilityLabel: "mention",
+    ...rest
+  };
+}
+function commandTrigger(opts = {}) {
+  const { char = "/", ...rest } = opts;
+  return {
+    char,
+    position: "start",
+    mode: "dropdown",
+    chipStyle: "inline",
+    accessibilityLabel: "command",
+    ...rest
+  };
+}
+function hashtagTrigger(opts = {}) {
+  const { char = "#", ...rest } = opts;
+  return {
+    char,
+    position: "any",
+    mode: "dropdown",
+    chipStyle: "pill",
+    resolveOnSpace: true,
+    accessibilityLabel: "tag",
+    ...rest
+  };
+}
+function callbackTrigger(opts) {
+  const { char, ...rest } = opts;
+  return {
+    char,
+    position: "start",
+    mode: "callback",
+    ...rest
+  };
+}
+
+export { callbackTrigger, chip, commandTrigger, getChips, getChipsByTrigger, hasChips, hashtagTrigger, isSegmentsEmpty, mentionTrigger, text, usePromptAreaState };
+//# sourceMappingURL=chunk-UBBCAMJA.js.map
+//# sourceMappingURL=chunk-UBBCAMJA.js.map

package/dist/chunk-UBBCAMJA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/prompt-area/use-prompt-area-state.ts","../src/prompt-area/segment-helpers.ts","../src/prompt-area/trigger-presets.ts"],"names":["hasChips","chip"],"mappings":"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","file":"chunk-UBBCAMJA.js","sourcesContent":["/**\n * Convenience hook that wires up all the boilerplate state for a PromptArea.\n *\n * Instead of manually managing `useState<Segment[]>`, `useRef<PromptAreaHandle>`,\n * and computing derived values, call `usePromptAreaState()` once and spread\n * `bind` into your `<PromptArea>`.\n *\n * @example\n * ```tsx\n * function ChatInput() {\n *   const { bind, plainText, isEmpty, chips, clear, focus } = usePromptAreaState()\n *\n *   return (\n *     <PromptArea\n *       {...bind}\n *       onSubmit={() => {\n *         sendMessage(plainText)\n *         clear()\n *       }}\n *     />\n *   )\n * }\n * ```\n */\n\n'use client'\n\nimport { useCallback, useMemo, useRef, useState } from 'react'\nimport type { Segment, ChipSegment, PromptAreaHandle } from './types'\nimport { segmentsToPlainText } from './prompt-area-engine'\n\n// ---------------------------------------------------------------------------\n// Options\n// ---------------------------------------------------------------------------\n\nexport type UsePromptAreaStateOptions = {\n  /** Initial segment value. Defaults to `[]`. */\n  initialValue?: Segment[]\n}\n\n// ---------------------------------------------------------------------------\n// Return type\n// ---------------------------------------------------------------------------\n\nexport type PromptAreaBind = {\n  /** Ref to attach to PromptArea — gives access to imperative methods. */\n  ref: React.RefObject<PromptAreaHandle | null>\n  /** Current segment array — pass as `value` prop. */\n  value: Segment[]\n  /** Setter — pass as `onChange` prop. */\n  onChange: (segments: Segment[]) => void\n}\n\nexport type PromptAreaState = {\n  /** Props to spread directly onto `<PromptArea {...bind} />`. Contains ref, value, and onChange. */\n  bind: PromptAreaBind\n  /** Derived plain text representation of the current value. */\n  plainText: string\n  /** `true` when the value is empty or whitespace-only. */\n  isEmpty: boolean\n  /** `true` when the value contains at least one chip. */\n  hasChips: boolean\n  /** All chip segments in the current value. */\n  chips: ChipSegment[]\n  /** Clear all content (both state and the editor DOM). */\n  clear: () => void\n  /** Focus the editor. */\n  focus: () => void\n  /** Blur the editor. */\n  blur: () => void\n  /** Insert a chip at the current cursor position. */\n  insertChip: (chip: Omit<ChipSegment, 'type'>) => void\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\nexport function usePromptAreaState(options: UsePromptAreaStateOptions = {}): PromptAreaState {\n  const { initialValue = [] } = options\n\n  const [value, setValue] = useState<Segment[]>(initialValue)\n  const ref = useRef<PromptAreaHandle>(null)\n\n  // Derived\n  const plainText = useMemo(() => segmentsToPlainText(value), [value])\n\n  const isEmpty = useMemo(() => {\n    if (value.length === 0) return true\n    return value.every((seg) => seg.type === 'text' && seg.text.trim() === '')\n  }, [value])\n\n  const hasChips = useMemo(() => value.some((seg) => seg.type === 'chip'), [value])\n\n  const chips = useMemo(\n    () => value.filter((seg): seg is ChipSegment => seg.type === 'chip'),\n    [value],\n  )\n\n  // Bind object — safe to spread onto <PromptArea>\n  const bind = useMemo<PromptAreaBind>(() => ({ ref, value, onChange: setValue }), [value])\n\n  // Actions that proxy to the imperative handle\n  const clear = useCallback(() => {\n    if (ref.current) {\n      ref.current.clear()\n    } else {\n      setValue([])\n    }\n  }, [])\n\n  const focus = useCallback(() => ref.current?.focus(), [])\n  const blur = useCallback(() => ref.current?.blur(), [])\n\n  const insertChip = useCallback(\n    (chip: Omit<ChipSegment, 'type'>) => ref.current?.insertChip(chip),\n    [],\n  )\n\n  return {\n    bind,\n    plainText,\n    isEmpty,\n    hasChips,\n    chips,\n    clear,\n    focus,\n    blur,\n    insertChip,\n  }\n}\n","/**\n * Convenience helpers for creating and inspecting Segments.\n *\n * These reduce boilerplate when building AI chat UIs that work with the\n * PromptArea document model.\n *\n * @example\n * ```ts\n * import { text, chip, isSegmentsEmpty, segmentsToPlainText } from './segment-helpers'\n *\n * const greeting = [text('Hello '), chip({ trigger: '@', value: 'u1', displayText: 'Alice' })]\n * isSegmentsEmpty(greeting) // false\n * segmentsToPlainText(greeting) // \"Hello @Alice\"\n * ```\n */\n\nimport type { Segment, TextSegment, ChipSegment } from './types'\nimport { segmentsToPlainText, plainTextToSegments } from './prompt-area-engine'\n\n// Re-export serialization utilities so consumers have a single import.\nexport { segmentsToPlainText, plainTextToSegments }\n\n// ---------------------------------------------------------------------------\n// Factories\n// ---------------------------------------------------------------------------\n\n/** Create a text segment. */\nexport function text(value: string): TextSegment {\n  return { type: 'text', text: value }\n}\n\n/** Create a chip segment. */\nexport function chip(opts: Omit<ChipSegment, 'type'>): ChipSegment {\n  return { type: 'chip', ...opts }\n}\n\n// ---------------------------------------------------------------------------\n// Predicates\n// ---------------------------------------------------------------------------\n\n/** Returns `true` when the segment array is empty or contains only whitespace text. */\nexport function isSegmentsEmpty(segments: Segment[]): boolean {\n  if (segments.length === 0) return true\n  return segments.every((seg) => seg.type === 'text' && seg.text.trim() === '')\n}\n\n/** Returns `true` when the segment array contains at least one chip. */\nexport function hasChips(segments: Segment[]): boolean {\n  return segments.some((seg) => seg.type === 'chip')\n}\n\n/** Extracts all chip segments from a segment array. */\nexport function getChips(segments: Segment[]): ChipSegment[] {\n  return segments.filter((seg): seg is ChipSegment => seg.type === 'chip')\n}\n\n/** Extracts chips matching a specific trigger character. */\nexport function getChipsByTrigger(segments: Segment[], trigger: string): ChipSegment[] {\n  return segments.filter(\n    (seg): seg is ChipSegment => seg.type === 'chip' && seg.trigger === trigger,\n  )\n}\n","/**\n * Pre-built trigger configuration factories for common AI chat patterns.\n *\n * Each factory returns a full `TriggerConfig` with sensible defaults.\n * Pass only what you need to override.\n *\n * @example\n * ```tsx\n * <PromptArea\n *   triggers={[\n *     mentionTrigger({ onSearch: searchUsers }),\n *     commandTrigger({ onSearch: searchCommands }),\n *     hashtagTrigger(),\n *   ]}\n * />\n * ```\n */\n\nimport type { TriggerConfig } from './types'\n\n// ---------------------------------------------------------------------------\n// Shared option type — everything in TriggerConfig except the keys each\n// factory sets by default.\n// ---------------------------------------------------------------------------\n\ntype TriggerPresetOptions = Omit<Partial<TriggerConfig>, 'char' | 'position' | 'mode'>\n\n// ---------------------------------------------------------------------------\n// @mention — dropdown at any position\n// ---------------------------------------------------------------------------\n\nexport type MentionTriggerOptions = TriggerPresetOptions & {\n  /** Override the trigger character. Defaults to `'@'`. */\n  char?: string\n}\n\n/**\n * Creates a **mention** trigger (`@`).\n *\n * Defaults: `position: 'any'`, `mode: 'dropdown'`, `chipStyle: 'pill'`,\n * accessible label `\"mention\"`.\n */\nexport function mentionTrigger(opts: MentionTriggerOptions = {}): TriggerConfig {\n  const { char = '@', ...rest } = opts\n  return {\n    char,\n    position: 'any',\n    mode: 'dropdown',\n    chipStyle: 'pill',\n    accessibilityLabel: 'mention',\n    ...rest,\n  }\n}\n\n// ---------------------------------------------------------------------------\n// /command — dropdown only at line start\n// ---------------------------------------------------------------------------\n\nexport type CommandTriggerOptions = TriggerPresetOptions & {\n  /** Override the trigger character. Defaults to `'/'`. */\n  char?: string\n}\n\n/**\n * Creates a **command** trigger (`/`).\n *\n * Defaults: `position: 'start'`, `mode: 'dropdown'`, `chipStyle: 'inline'`,\n * accessible label `\"command\"`.\n */\nexport function commandTrigger(opts: CommandTriggerOptions = {}): TriggerConfig {\n  const { char = '/', ...rest } = opts\n  return {\n    char,\n    position: 'start',\n    mode: 'dropdown',\n    chipStyle: 'inline',\n    accessibilityLabel: 'command',\n    ...rest,\n  }\n}\n\n// ---------------------------------------------------------------------------\n// #hashtag — dropdown at any position, auto-resolve on space\n// ---------------------------------------------------------------------------\n\nexport type HashtagTriggerOptions = TriggerPresetOptions & {\n  /** Override the trigger character. Defaults to `'#'`. */\n  char?: string\n}\n\n/**\n * Creates a **hashtag / tag** trigger (`#`).\n *\n * Defaults: `position: 'any'`, `mode: 'dropdown'`, `chipStyle: 'pill'`,\n * `resolveOnSpace: true`, accessible label `\"tag\"`.\n */\nexport function hashtagTrigger(opts: HashtagTriggerOptions = {}): TriggerConfig {\n  const { char = '#', ...rest } = opts\n  return {\n    char,\n    position: 'any',\n    mode: 'dropdown',\n    chipStyle: 'pill',\n    resolveOnSpace: true,\n    accessibilityLabel: 'tag',\n    ...rest,\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Generic callback trigger (e.g., for file pickers, model selectors)\n// ---------------------------------------------------------------------------\n\nexport type CallbackTriggerOptions = Omit<Partial<TriggerConfig>, 'mode'> & {\n  /** The trigger character. Required. */\n  char: string\n}\n\n/**\n * Creates a **callback** trigger that fires `onActivate` instead of showing\n * a dropdown. Useful for opening file pickers, model selectors, etc.\n *\n * Defaults: `position: 'start'`, `mode: 'callback'`.\n */\nexport function callbackTrigger(opts: CallbackTriggerOptions): TriggerConfig {\n  const { char, ...rest } = opts\n  return {\n    char,\n    position: 'start',\n    mode: 'callback',\n    ...rest,\n  }\n}\n"]}

package/dist/chunk-XDKRP7UE.js

@@ -0,0 +1,125 @@
+'use client';
+import { cn } from './chunk-NF2LHZIE.js';
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SHOW_THRESHOLD = 300;
+var HIDE_THRESHOLD = 100;
+function useScrollObserver() {
+  const scrollRef = useRef(null);
+  const [showGoToTop, setShowGoToTop] = useState(false);
+  const [showGoToBottom, setShowGoToBottom] = useState(false);
+  const rafId = useRef(0);
+  const update = useCallback(() => {
+    cancelAnimationFrame(rafId.current);
+    rafId.current = requestAnimationFrame(() => {
+      const el = scrollRef.current;
+      if (!el) return;
+      const scrollTop = el.scrollTop;
+      const distanceFromBottom = el.scrollHeight - scrollTop - el.clientHeight;
+      setShowGoToTop((prev) => prev ? scrollTop > HIDE_THRESHOLD : scrollTop > SHOW_THRESHOLD);
+      setShowGoToBottom(
+        (prev) => prev ? distanceFromBottom > HIDE_THRESHOLD : distanceFromBottom > SHOW_THRESHOLD
+      );
+    });
+  }, []);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", update, { passive: true });
+    update();
+    return () => {
+      el.removeEventListener("scroll", update);
+      cancelAnimationFrame(rafId.current);
+    };
+  }, [update]);
+  const scrollToTop = useCallback(() => {
+    scrollRef.current?.scrollTo({ top: 0, behavior: "smooth" });
+  }, []);
+  const scrollToBottom = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+  }, []);
+  return { scrollRef, showGoToTop, showGoToBottom, scrollToTop, scrollToBottom };
+}
+var NAV_BUTTON_CLASS = "pointer-events-auto rounded-full border bg-background p-2 shadow-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors animate-in fade-in-0 zoom-in-95 duration-150";
+function Svg({ className, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className,
+      children
+    }
+  );
+}
+var ArrowUp = ({ className }) => /* @__PURE__ */ jsxs(Svg, { className, children: [
+  /* @__PURE__ */ jsx("path", { d: "m5 12 7-7 7 7" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 19V5" })
+] });
+var ArrowDown = ({ className }) => /* @__PURE__ */ jsxs(Svg, { className, children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
+  /* @__PURE__ */ jsx("path", { d: "m19 12-7 7-7-7" })
+] });
+function ChatPromptLayout({
+  children,
+  prompt,
+  className,
+  "aria-label": ariaLabel,
+  "data-test-id": dataTestId,
+  ref
+}) {
+  const { scrollRef, showGoToTop, showGoToBottom, scrollToTop, scrollToBottom } = useScrollObserver();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "region",
+      "aria-label": ariaLabel ?? "Chat layout",
+      "data-test-id": dataTestId,
+      className: cn("chat-prompt-layout", "flex h-full flex-col", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { ref: scrollRef, className: "relative flex-1 overflow-y-auto", children: [
+          children,
+          /* @__PURE__ */ jsxs("div", { className: "pointer-events-none sticky bottom-4 flex justify-end gap-2 px-4 pb-2", children: [
+            showGoToTop && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: scrollToTop,
+                className: NAV_BUTTON_CLASS,
+                "aria-label": "Scroll to top",
+                children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4" })
+              }
+            ),
+            showGoToBottom && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: scrollToBottom,
+                className: NAV_BUTTON_CLASS,
+                "aria-label": "Scroll to bottom",
+                children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0", children: prompt })
+      ]
+    }
+  );
+}
+
+export { ChatPromptLayout };
+//# sourceMappingURL=chunk-XDKRP7UE.js.map
+//# sourceMappingURL=chunk-XDKRP7UE.js.map

package/dist/chunk-XDKRP7UE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chat-prompt-layout/use-scroll-observer.ts","../src/chat-prompt-layout/chat-prompt-layout.tsx"],"names":[],"mappings":"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","file":"chunk-XDKRP7UE.js","sourcesContent":["'use client'\n\nimport { useCallback, useEffect, useRef, useState } from 'react'\n\n/** Distance from edge before showing a button */\nconst SHOW_THRESHOLD = 300\n/** Distance from edge before hiding a button (larger = less flicker) */\nconst HIDE_THRESHOLD = 100\n\nexport function useScrollObserver() {\n  const scrollRef = useRef<HTMLDivElement>(null)\n  const [showGoToTop, setShowGoToTop] = useState(false)\n  const [showGoToBottom, setShowGoToBottom] = useState(false)\n  const rafId = useRef(0)\n\n  const update = useCallback(() => {\n    // Coalesce rapid scroll events into a single rAF\n    cancelAnimationFrame(rafId.current)\n    rafId.current = requestAnimationFrame(() => {\n      const el = scrollRef.current\n      if (!el) return\n\n      const scrollTop = el.scrollTop\n      const distanceFromBottom = el.scrollHeight - scrollTop - el.clientHeight\n\n      // Hysteresis: use a higher threshold to show, lower to hide\n      setShowGoToTop((prev) => (prev ? scrollTop > HIDE_THRESHOLD : scrollTop > SHOW_THRESHOLD))\n      setShowGoToBottom((prev) =>\n        prev ? distanceFromBottom > HIDE_THRESHOLD : distanceFromBottom > SHOW_THRESHOLD,\n      )\n    })\n  }, [])\n\n  useEffect(() => {\n    const el = scrollRef.current\n    if (!el) return\n\n    el.addEventListener('scroll', update, { passive: true })\n    update()\n\n    return () => {\n      el.removeEventListener('scroll', update)\n      cancelAnimationFrame(rafId.current)\n    }\n  }, [update])\n\n  const scrollToTop = useCallback(() => {\n    scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' })\n  }, [])\n\n  const scrollToBottom = useCallback(() => {\n    const el = scrollRef.current\n    if (!el) return\n    el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' })\n  }, [])\n\n  return { scrollRef, showGoToTop, showGoToBottom, scrollToTop, scrollToBottom }\n}\n","'use client'\n\nimport { cn } from '@/lib/utils'\nimport type { ChatPromptLayoutProps } from './types'\nimport { useScrollObserver } from './use-scroll-observer'\n\nconst NAV_BUTTON_CLASS =\n  'pointer-events-auto rounded-full border bg-background p-2 shadow-sm text-muted-foreground hover:bg-accent hover:text-foreground transition-colors animate-in fade-in-0 zoom-in-95 duration-150'\n\ntype IconProps = { className?: string }\n\n/** Shared SVG wrapper matching the lucide icon defaults (no dependency). */\nfunction Svg({ className, children }: IconProps & { children: React.ReactNode }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className={className}>\n      {children}\n    </svg>\n  )\n}\n\nconst ArrowUp = ({ className }: IconProps) => (\n  <Svg className={className}>\n    <path d=\"m5 12 7-7 7 7\" />\n    <path d=\"M12 19V5\" />\n  </Svg>\n)\nconst ArrowDown = ({ className }: IconProps) => (\n  <Svg className={className}>\n    <path d=\"M12 5v14\" />\n    <path d=\"m19 12-7 7-7-7\" />\n  </Svg>\n)\n\n/**\n * ChatPromptLayout - A full-height chat layout with scrollable messages\n * and a bottom-anchored prompt slot.\n *\n * Pass chat messages as `children` and the prompt area via the `prompt`\n * prop. Contextual scroll buttons appear when the user scrolls away\n * from the top or bottom of the messages area.\n *\n * @example\n * ```tsx\n * <ChatPromptLayout\n *   className=\"h-[600px]\"\n *   prompt={\n *     <div className=\"border-t p-4\">\n *       <PromptArea ... />\n *       <ActionBar ... />\n *     </div>\n *   }\n * >\n *   {messages.map(msg => <ChatBubble key={msg.id} {...msg} />)}\n * </ChatPromptLayout>\n * ```\n */\nexport function ChatPromptLayout({\n  children,\n  prompt,\n  className,\n  'aria-label': ariaLabel,\n  'data-test-id': dataTestId,\n  ref,\n}: ChatPromptLayoutProps & { ref?: React.Ref<HTMLDivElement> }) {\n  const { scrollRef, showGoToTop, showGoToBottom, scrollToTop, scrollToBottom } =\n    useScrollObserver()\n\n  return (\n    <div\n      ref={ref}\n      role=\"region\"\n      aria-label={ariaLabel ?? 'Chat layout'}\n      data-test-id={dataTestId}\n      className={cn('chat-prompt-layout', 'flex h-full flex-col', className)}>\n      <div ref={scrollRef} className=\"relative flex-1 overflow-y-auto\">\n        {children}\n\n        <div className=\"pointer-events-none sticky bottom-4 flex justify-end gap-2 px-4 pb-2\">\n          {showGoToTop && (\n            <button\n              type=\"button\"\n              onClick={scrollToTop}\n              className={NAV_BUTTON_CLASS}\n              aria-label=\"Scroll to top\">\n              <ArrowUp className=\"size-4\" />\n            </button>\n          )}\n          {showGoToBottom && (\n            <button\n              type=\"button\"\n              onClick={scrollToBottom}\n              className={NAV_BUTTON_CLASS}\n              aria-label=\"Scroll to bottom\">\n              <ArrowDown className=\"size-4\" />\n            </button>\n          )}\n        </div>\n      </div>\n\n      <div className=\"shrink-0\">{prompt}</div>\n    </div>\n  )\n}\n"]}

package/dist/compact-prompt-area/index.d.ts

@@ -0,0 +1,86 @@
+import * as react from 'react';
+import { S as Segment, f as TriggerConfig, C as ChipSegment, c as PromptAreaImage, P as PromptAreaFile, b as PromptAreaHandle } from '../types-C4BgDEpe.js';
+
+type CompactPromptAreaProps = {
+    /** The document segments (controlled) */
+    value: Segment[];
+    /** Called when the content changes */
+    onChange: (segments: Segment[]) => void;
+    /** Trigger configurations */
+    triggers?: TriggerConfig[];
+    /** Placeholder text when empty. Pass an array to animate between them. */
+    placeholder?: string | string[];
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether to render simple inline markdown */
+    markdown?: boolean;
+    /** Called when Enter is pressed (without Shift) */
+    onSubmit?: (segments: Segment[]) => void;
+    /** Called when Escape is pressed */
+    onEscape?: () => void;
+    /** Called when a chip element is clicked */
+    onChipClick?: (chip: ChipSegment) => void;
+    /** Called when a new chip is added */
+    onChipAdd?: (chip: ChipSegment) => void;
+    /** Called when a chip is deleted */
+    onChipDelete?: (chip: ChipSegment) => void;
+    /** Called after content is pasted */
+    onPaste?: (data: {
+        segments: Segment[];
+        source: 'internal' | 'external';
+    }) => void;
+    /** Array of image attachments */
+    images?: PromptAreaImage[];
+    /** Called when the user pastes an image */
+    onImagePaste?: (file: File) => void;
+    /** Called when the user removes an image */
+    onImageRemove?: (image: PromptAreaImage) => void;
+    /** Array of file attachments */
+    files?: PromptAreaFile[];
+    /** Called when the user removes a file */
+    onFileRemove?: (file: PromptAreaFile) => void;
+    /** Icon for the circular plus button on the left. Defaults to Plus icon. */
+    plusButtonIcon?: React.ReactNode;
+    /** Click handler for the plus button */
+    onPlusClick?: () => void;
+    /** Icon for the circular submit button on the right. Defaults to ArrowUp icon. */
+    submitButtonIcon?: React.ReactNode;
+    /** Slot rendered immediately before the submit button (e.g., mic button) */
+    beforeSubmitSlot?: React.ReactNode;
+    /** Maximum height the expanded area can reach in pixels. Defaults to 320. */
+    maxHeight?: number;
+    /** Additional CSS class for the outer container */
+    className?: string;
+    /** Accessible label */
+    'aria-label'?: string;
+    /** data-test-id for e2e testing */
+    'data-test-id'?: string;
+};
+
+/**
+ * CompactPromptArea – A pill-shaped prompt input that sits on a single row
+ * and expands downward on focus.
+ *
+ * - Left: circular plus button
+ * - Middle: PromptArea text input (expands down when focused)
+ * - Right: optional slot + circular submit button
+ *
+ * Reuses PromptArea internally with autoGrow enabled.
+ *
+ * @example
+ * ```tsx
+ * <CompactPromptArea
+ *   value={segments}
+ *   onChange={setSegments}
+ *   placeholder="Ask anything..."
+ *   onSubmit={handleSubmit}
+ *   onPlusClick={() => setMenuOpen(true)}
+ *   beforeSubmitSlot={<button aria-label="Voice"><Mic className="size-4" /></button>}
+ * />
+ * ```
+ */
+declare function CompactPromptArea({ value, onChange, triggers, placeholder, disabled, markdown, onSubmit, onEscape, onChipClick, onChipAdd, onChipDelete, onPaste, images, onImagePaste, onImageRemove, files, onFileRemove, plusButtonIcon, onPlusClick, submitButtonIcon, beforeSubmitSlot, maxHeight, className, 'aria-label': ariaLabel, 'data-test-id': dataTestId, ref, }: CompactPromptAreaProps & {
+    ref?: React.Ref<PromptAreaHandle>;
+}): react.JSX.Element;
+
+export { CompactPromptArea, type CompactPromptAreaProps };

package/dist/compact-prompt-area/index.js

@@ -0,0 +1,6 @@
+'use client';
+export { CompactPromptArea } from '../chunk-BPJO4DGM.js';
+import '../chunk-E7HUXORB.js';
+import '../chunk-NF2LHZIE.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/compact-prompt-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}