@vvedantb/ui 0.4.1 → 0.4.3

package/README.md

@@ -194,6 +194,26 @@ import { SessionsHoverCard } from "@vvedantb/ui";
 
 `children` is the trigger. It is rendered with `asChild` by default, so it keeps its own handlers (such as a context menu). Extra props and the ref go to it. Use `asChild={false}` for a default trigger element. The content portals to `document.body` by default, so `overflow:hidden` ancestors do not clip it. Pass `portal={false}` to opt out. `surface` is `"overlay"` (default), `"surface"` (`rounded-surface`) or `"glass"` (`glass-panel-strong`, `rounded-surface`). `className` merges over the surface without `!`. Defaults: `openDelay` 400 ms, `closeDelay` 150 ms, `side="right"`, `align="start"`, `sideOffset` 8, width and padding `w-64 p-3` (override with `className`). `body` is a node or a function of `{ open }`. `loadContent` runs only while the card is open. Control the state with `open`, `defaultOpen` and `onOpenChange`. The card opens on pointer hover and on keyboard focus (`:focus-visible`) only. Focus that follows a click or a context menu close does not open it. If pointer-driven focus left it stuck open, pointer leave force-closes it; otherwise Radix handles close (including moving onto the content). Fixture: `shell/examples/sessions-hover-card/`.
 
+## Panels, search and confirm
+
+```tsx
+import { ConfirmDialog, SlideOverPanel, ToolbarSearchInput } from "@vvedantb/ui";
+
+<div className="relative">
+  <SlideOverPanel open={open} onClose={() => setOpen(false)} header={<h2>Details</h2>}>
+    <div className="p-4">Body</div>
+  </SlideOverPanel>
+</div>
+
+<ToolbarSearchInput value={query} onChange={setQuery} />
+
+<ConfirmDialog size="sm" open={open} onOpenChange={setOpen} title="Delete item?" variant="destructive" onConfirm={remove} />
+```
+
+- `SlideOverPanel`: a right-side panel, absolutely positioned inside its nearest positioned parent. It is not a portal or dialog. It slides in with a spring and is hidden below `md`. Only the close button closes it (no Escape, no outside click). `width` is `"w-96"` (default) or `"w-80"`. `closeLabel` defaults to `"Close panel"`. `className` merges last.
+- `ToolbarSearchInput`: a compact `h-8` search field for toolbars, with a search icon and a clear button. The clear button stays mounted and is hidden while the value is blank. Clearing calls `onChange("")` and does not move focus. Defaults: `placeholder="Search..."`, `label="Search"` (the `aria-label`), `clearLabel="Clear search"`. The ref goes to the `<input>`.
+- `ConfirmDialog` `size`: `"default"` keeps the alert dialog. `"sm"` renders a compact, dismissible dialog (outside click, Escape and the close button close it) with small Cancel and confirm buttons. Cancel calls `onCancel` and then `onOpenChange(false)`. Confirm calls `onConfirm` only, so the caller closes it.
+
 ## Toaster
 
 ```tsx

package/app/src/settings/SettingsField.tsx

@@ -1,12 +1,14 @@
 import type { ReactNode } from "react";
 
 interface SettingsFieldProps {
-  /** Field name, shown above the control. */
+  /** Field name, shown above the control (stacked) or left of it (horizontal). */
   label: ReactNode;
-  /** Help text shown under the control. */
+  /** Help text, shown under the control (stacked) or under the label (horizontal). */
   description?: ReactNode;
   /** `id` of the control, so clicking the label focuses it. */
   htmlFor?: string;
+  /** `"stacked"` (default) or `"horizontal"`. */
+  layout?: "stacked" | "horizontal";
   children: ReactNode;
 }
 
@@ -16,13 +18,39 @@ interface SettingsFieldProps {
  * Every settings form repeats the same label / control / help-text stack, so it
  * lives here rather than being re-spaced per field. Stack several inside a
  * section body with `grid gap-5`. Shared across apps.
+ *
+ * - `layout="stacked"` (default): label above the control, help text below it.
+ * - `layout="horizontal"`: one row with the label and help text on the left and
+ *   the control on the right, for compact controls such as a select. The label
+ *   is a `<label>` when `htmlFor` is set, otherwise a `<p>`.
  */
 export function SettingsField({
   label,
   description,
   htmlFor,
+  layout = "stacked",
   children,
 }: SettingsFieldProps) {
+  if (layout === "horizontal") {
+    return (
+      <div className="flex items-center justify-between gap-3">
+        <div className="min-w-0">
+          {htmlFor ? (
+            <label htmlFor={htmlFor} className="block text-sm font-medium text-foreground">
+              {label}
+            </label>
+          ) : (
+            <p className="text-sm font-medium text-foreground">{label}</p>
+          )}
+          {description ? (
+            <p className="mt-1 text-xs text-muted-foreground text-pretty">{description}</p>
+          ) : null}
+        </div>
+        {children}
+      </div>
+    );
+  }
+
   return (
     <div>
       <label

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/src/composer/input-area/InputArea.tsx

@@ -22,7 +22,7 @@ import {
 import { SpeechInput } from "../../ai-elements/speech-input";
 import { chatInputContainerClass } from "../../ui/surface-classes";
 import { ComposerSlashMenu } from "./ComposerSlashMenu";
-import { InputAreaEditor } from "./InputAreaEditor";
+import { InputAreaEditor, placeCaretAtEnd } from "./InputAreaEditor";
 import { FadePresence } from "./FadePresence";
 import { InputActions, type InputActionsProps } from "./InputActions";
 import { motionFast } from "./motion";
@@ -33,8 +33,11 @@ import { useInputAreaPrediction } from "./useInputAreaPrediction";
 
 const EXPANDED_EDITOR =
   "min-h-16 max-h-50 w-full self-stretch overflow-y-auto rounded-none px-4 pt-3.5 pb-1 text-left";
+// Block, not flex: chips and text must share one inline flow, or a click lands
+// the caret inside a chip. The 36px box (py-2 + leading-5) centres the line, and
+// `align-top` keeps chips level with the text as the old flex row did.
 const COMPACT_EDITOR =
-  "flex min-h-9 max-h-9 min-w-0 w-auto flex-1 items-center self-center overflow-hidden whitespace-pre! rounded-none px-1 py-2 text-left leading-5";
+  "block min-h-9 max-h-9 min-w-0 w-auto overflow-hidden whitespace-pre! rounded-none px-1 py-2 text-left leading-5 [&>[data-composer-chips-inline]>*]:align-top";
 const COMPACT_START_ADDON =
   "order-first shrink-0 justify-start gap-1 py-0 pl-1.5 pr-0 has-[>button]:ml-0";
 const COMPACT_END_ADDON =
@@ -252,14 +255,7 @@ export function InputArea({
           const length = editor.value.length;
           editor.setSelectionRange(length, length);
         } else {
-          const sel = window.getSelection();
-          if (sel) {
-            const range = document.createRange();
-            range.selectNodeContents(editor);
-            range.collapse(false);
-            sel.removeAllRanges();
-            sel.addRange(range);
-          }
+          placeCaretAtEnd(editor);
         }
       }
     };

package/src/composer/input-area/InputAreaEditor.tsx

@@ -28,6 +28,8 @@ export const INLINE_EDITOR_CLASS =
 // the text in a column beside it.
 const CHIPS_HOST_CLASS = "contents empty:hidden [&>*]:mr-1.5";
 
+const ZERO_WIDTH_SPACE = "\u200b";
+
 /** Reads the plain text of the editor. Skips the chips host. */
 export function extractEditorText(root: HTMLElement): string {
   let out = "";
@@ -50,7 +52,7 @@ export function extractEditorText(root: HTMLElement): string {
         return;
       }
       if (child.nodeType === Node.TEXT_NODE) {
-        out += (child.textContent ?? "").replace(/\u200b/g, "");
+        out += (child.textContent ?? "").replaceAll(ZERO_WIDTH_SPACE, "");
       }
     });
   };
@@ -58,14 +60,105 @@ export function extractEditorText(root: HTMLElement): string {
   return out;
 }
 
-function placeCaretAtEnd(el: HTMLElement) {
+function chipsHost(root: HTMLElement): HTMLElement | null {
+  for (const child of root.children) {
+    if (child instanceof HTMLElement && child.hasAttribute(CHIPS_HOST_ATTR)) return child;
+  }
+  return null;
+}
+
+/**
+ * Returns the text node right after the chips host, creating it if missing.
+ * It starts with U+200B, so the caret always has an editable position after
+ * the chips, even with an empty draft. `extractEditorText` strips U+200B.
+ */
+function ensureCaretAnchor(root: HTMLElement): Text {
+  const existing = findCaretAnchor(root);
+  if (existing) return existing;
+  const host = chipsHost(root);
+  const anchor = document.createTextNode(ZERO_WIDTH_SPACE);
+  root.insertBefore(anchor, host ? host.nextSibling : root.firstChild);
+  return anchor;
+}
+
+function findCaretAnchor(root: HTMLElement): Text | null {
+  const host = chipsHost(root);
+  const next = host ? host.nextSibling : root.firstChild;
+  return next instanceof Text && next.data.startsWith(ZERO_WIDTH_SPACE) ? next : null;
+}
+
+function setSelection(
+  anchorNode: Node,
+  anchorOffset: number,
+  focusNode: Node = anchorNode,
+  focusOffset: number = anchorOffset,
+) {
+  window.getSelection()?.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+}
+
+/** End of the text: the last text node, or the end of the editor after a line break. */
+function textEnd(root: HTMLElement): [Node, number] {
+  ensureCaretAnchor(root);
+  const last = root.lastChild;
+  if (last instanceof Text) return [last, last.length];
+  return [root, root.childNodes.length];
+}
+
+/** Puts a collapsed caret at the end of the text, after the chips host. */
+export function placeCaretAtEnd(root: HTMLElement) {
+  const [node, offset] = textEnd(root);
+  setSelection(node, offset);
+}
+
+/**
+ * Moves any selection end that sits inside or before the chips host to the
+ * first text position after it. The host is React's, so the caret must never
+ * rest in it and an edit must never delete it.
+ */
+export function normaliseSelection(root: HTMLElement) {
   const sel = window.getSelection();
-  if (!sel) return;
-  const range = document.createRange();
-  range.selectNodeContents(el);
-  range.collapse(false);
-  sel.removeAllRanges();
-  sel.addRange(range);
+  if (!sel || sel.rangeCount === 0) return;
+  const range = sel.getRangeAt(0);
+  const { startContainer, startOffset, endContainer, endOffset } = range;
+  if (!root.contains(startContainer) || !root.contains(endContainer)) return;
+  const anchor = ensureCaretAnchor(root);
+  const first = document.createRange();
+  first.setStart(anchor, 1);
+  // The host comes first, so only the start can be before the text unless both are.
+  if (first.comparePoint(startContainer, startOffset) >= 0) return;
+  const endBefore = first.comparePoint(endContainer, endOffset) < 0;
+  const [end, endAt]: [Node, number] = endBefore ? [anchor, 1] : [endContainer, endOffset];
+  const backwards =
+    !range.collapsed &&
+    sel.anchorNode === endContainer &&
+    sel.anchorOffset === endOffset;
+  if (backwards) setSelection(end, endAt, anchor, 1);
+  else setSelection(anchor, 1, end, endAt);
+}
+
+/** Selects the text only, never the chips host. */
+function selectText(root: HTMLElement) {
+  const anchor = ensureCaretAnchor(root);
+  const [node, offset] = textEnd(root);
+  setSelection(anchor, 1, node, offset);
+}
+
+/**
+ * Width the inline chips take before the text on the first line. The host is
+ * `display: contents` and has no box, so this measures where the text starts.
+ */
+export function readInlineChipsWidth(root: HTMLElement): number {
+  const anchor = findCaretAnchor(root);
+  if (!anchor || !chipsHost(root)?.childElementCount) return 0;
+  // A text offset, not an element boundary: Chromium gives no rect for the latter.
+  const textStart = document.createRange();
+  textStart.setStart(anchor, 0);
+  const style = getComputedStyle(root);
+  const contentLeft =
+    root.getBoundingClientRect().left +
+    root.clientLeft +
+    (Number.parseFloat(style.paddingLeft) || 0);
+  return Math.max(0, textStart.getBoundingClientRect().left - contentLeft);
 }
 
 /** True when nothing but the chips host sits before the caret. */
@@ -74,13 +167,24 @@ function caretAtTextStart(root: HTMLElement): boolean {
   if (!sel || sel.rangeCount === 0 || !sel.isCollapsed) return false;
   const anchor = sel.anchorNode;
   if (!anchor || !root.contains(anchor)) return false;
-  const host = root.querySelector(`[${CHIPS_HOST_ATTR}]`);
+  const host = chipsHost(root);
   if (host?.contains(anchor)) return false;
   const probe = document.createRange();
   probe.selectNodeContents(root);
   if (host) probe.setStartAfter(host);
   probe.setEnd(anchor, sel.anchorOffset);
-  return probe.toString().replace(/\u200b/g, "") === "";
+  const before = probe.cloneContents();
+  return (
+    (before.textContent ?? "").replaceAll(ZERO_WIDTH_SPACE, "") === "" &&
+    before.querySelector("br, div, p") === null
+  );
+}
+
+/** Clicks on chip controls, such as remove buttons, keep their own behaviour. */
+function isChipControl(target: EventTarget | null): boolean {
+  if (!(target instanceof Element)) return false;
+  const control = target.closest("button, a, input, [role=button]");
+  return control?.closest(`[${CHIPS_HOST_ATTR}]`) != null;
 }
 
 function insertPlainText(root: HTMLElement, text: string) {
@@ -121,7 +225,8 @@ export type InputAreaEditorProps = {
  * Contenteditable editor. The chips host is a non-editable inline atom at the
  * start of the same text flow, so wrapped lines start under the chips. React
  * owns the host only. The text nodes after it belong to the DOM and are
- * reconciled against `value`.
+ * reconciled against `value`, behind a U+200B caret anchor that keeps an
+ * editable position after the chips.
  */
 export function InputAreaEditor({
   editorRef,
@@ -142,23 +247,45 @@ export function InputAreaEditor({
   const composingRef = useRef(false);
   const ghostProbeRef = useRef<HTMLSpanElement | null>(null);
 
-  const setRefs = (node: HTMLDivElement | null) => {
+  const assignEditorRef = (node: HTMLDivElement | null) => {
     rootRef.current = node;
     if (typeof editorRef === "function") editorRef(node);
     else if (editorRef) editorRef.current = node;
   };
 
+  const keepCaretOutsideChips = (root: HTMLElement) => {
+    if (!composingRef.current) normaliseSelection(root);
+  };
+
+  // Native listeners: React has no `selectionchange`, and its `onBeforeInput`
+  // does not see deletions.
+  const setRefs = (node: HTMLDivElement) => {
+    assignEditorRef(node);
+    const keepSelectionOutsideChips = () => {
+      if (document.activeElement === node) keepCaretOutsideChips(node);
+    };
+    document.addEventListener("selectionchange", keepSelectionOutsideChips);
+    node.addEventListener("beforeinput", keepSelectionOutsideChips);
+    return () => {
+      document.removeEventListener("selectionchange", keepSelectionOutsideChips);
+      node.removeEventListener("beforeinput", keepSelectionOutsideChips);
+      assignEditorRef(null);
+    };
+  };
+
   useLayoutEffect(() => {
     const root = rootRef.current;
     if (!root || composingRef.current) return;
-    if (extractEditorText(root) === value) return;
-    Array.from(root.childNodes).forEach((child) => {
-      if (!(child instanceof HTMLElement && child.hasAttribute(CHIPS_HOST_ATTR))) {
-        root.removeChild(child);
-      }
-    });
-    if (value !== "") root.appendChild(document.createTextNode(value));
-    if (document.activeElement === root) placeCaretAtEnd(root);
+    if (extractEditorText(root) !== value) {
+      Array.from(root.childNodes).forEach((child) => {
+        if (!(child instanceof HTMLElement && child.hasAttribute(CHIPS_HOST_ATTR))) {
+          root.removeChild(child);
+        }
+      });
+      root.appendChild(document.createTextNode(ZERO_WIDTH_SPACE + value));
+      if (document.activeElement === root) placeCaretAtEnd(root);
+    }
+    ensureCaretAnchor(root);
   });
 
   // Copy the probe colour to the editor. Opacity below 1 is folded into the
@@ -185,8 +312,20 @@ export function InputAreaEditor({
     onKeyDown?.(event);
     if (event.defaultPrevented) return;
     const root = event.currentTarget;
+    if (composingRef.current || event.nativeEvent.isComposing) return;
+    if (
+      (event.metaKey || event.ctrlKey) &&
+      !event.altKey &&
+      !event.shiftKey &&
+      event.key.toLowerCase() === "a"
+    ) {
+      event.preventDefault();
+      selectText(root);
+      return;
+    }
+    // Before the default action, so a selection never spans the chips host.
+    normaliseSelection(root);
     if (event.key === "Enter") {
-      if (composingRef.current || event.nativeEvent.isComposing) return;
       if (event.shiftKey) return;
       event.preventDefault();
       const form = root.closest("form");
@@ -197,13 +336,10 @@ export function InputAreaEditor({
       form?.requestSubmit();
       return;
     }
-    if (
-      event.key === "Backspace" &&
-      chipCount > 0 &&
-      caretAtTextStart(root)
-    ) {
+    // Nothing visible to delete. The default would eat the U+200B anchor.
+    if (event.key === "Backspace" && caretAtTextStart(root)) {
       event.preventDefault();
-      onRemoveLastChip?.();
+      if (chipCount > 0) onRemoveLastChip?.();
     }
   };
 
@@ -231,6 +367,7 @@ export function InputAreaEditor({
         className={cn(INLINE_EDITOR_CLASS, className)}
         onInput={(event) => {
           if (composingRef.current) return;
+          ensureCaretAnchor(event.currentTarget);
           onValueChange(extractEditorText(event.currentTarget));
         }}
         onCompositionStart={() => {
@@ -238,9 +375,15 @@ export function InputAreaEditor({
         }}
         onCompositionEnd={(event) => {
           composingRef.current = false;
+          ensureCaretAnchor(event.currentTarget);
           onValueChange(extractEditorText(event.currentTarget));
         }}
         onKeyDown={handleKeyDown}
+        onFocus={(event) => keepCaretOutsideChips(event.currentTarget)}
+        onMouseUp={(event) => {
+          if (!isChipControl(event.target)) keepCaretOutsideChips(event.currentTarget);
+        }}
+        onKeyUp={(event) => keepCaretOutsideChips(event.currentTarget)}
         onPaste={handlePaste}
         onBlur={onBlur}
       >

package/src/composer/input-area/useComposerCompact.ts

@@ -5,6 +5,7 @@ import {
   isComposerCompact,
   readEditorInnerWidth,
 } from "./composerCompact";
+import { readInlineChipsWidth } from "./InputAreaEditor";
 
 export function useComposerCompact({
   value,
@@ -24,10 +25,7 @@ export function useComposerCompact({
   const editor = editorNode instanceof HTMLElement ? editorNode : null;
   const font = editor ? getComputedStyle(editor).font : "14px sans-serif";
   if (editor && wasCompactRef.current) {
-    const chipsWidth =
-      editor.querySelector<HTMLElement>("[data-composer-chips-inline]")
-        ?.offsetWidth ?? 0;
-    const inner = readEditorInnerWidth(editor) - chipsWidth;
+    const inner = readEditorInnerWidth(editor) - readInlineChipsWidth(editor);
     if (inner > 0) pillWidthRef.current = inner;
   }
   const exceedsPill =

package/src/index.ts

@@ -42,12 +42,14 @@ export * from "./ui/search-input";
 export * from "./ui/select";
 export * from "./ui/separator";
 export * from "./ui/skeleton";
+export * from "./ui/slide-over-panel";
 export * from "./ui/sonner";
 export * from "./ui/spinner";
 export * from "./ui/switch";
 export * from "./ui/table";
 export * from "./ui/tabs";
 export * from "./ui/textarea";
+export * from "./ui/toolbar-search-input";
 export * from "./ui/time-picker";
 export * from "./ui/tooltip";
 export * from "./ui/kbd";

package/src/ui/confirm-dialog.tsx

@@ -9,6 +9,8 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "./alert-dialog";
+import { Button } from "./button";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog";
 
 export type ConfirmDialogProps = React.ComponentProps<typeof AlertDialog> & {
   title: React.ReactNode;
@@ -19,6 +21,12 @@ export type ConfirmDialogProps = React.ComponentProps<typeof AlertDialog> & {
   onConfirm?: () => void;
   variant?: "default" | "destructive";
   confirmDisabled?: boolean;
+  /**
+   * `"default"`: blocking alert dialog that closes on either button.
+   * `"sm"`: compact dismissible dialog (outside click, Escape and the close
+   * button close it). Confirm does not close it; the caller controls `open`.
+   */
+  size?: "default" | "sm";
 };
 
 function ConfirmDialog({
@@ -30,9 +38,46 @@ function ConfirmDialog({
   onConfirm,
   variant = "default",
   confirmDisabled,
+  size = "default",
   children,
   ...props
 }: ConfirmDialogProps) {
+  if (size === "sm") {
+    return (
+      <Dialog {...props}>
+        {children}
+        <DialogContent className="sm:max-w-96">
+          <DialogTitle className="mb-2 text-sm font-medium">{title}</DialogTitle>
+          {description != null ? (
+            <DialogDescription className="mb-4 text-sm text-muted-foreground">
+              {description}
+            </DialogDescription>
+          ) : null}
+          <div className="flex justify-end gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => {
+                onCancel?.();
+                props.onOpenChange?.(false);
+              }}
+            >
+              {cancelLabel}
+            </Button>
+            <Button
+              variant={variant}
+              size="sm"
+              disabled={confirmDisabled}
+              onClick={onConfirm}
+            >
+              {confirmLabel}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
   return (
     <AlertDialog {...props}>
       {children}

package/src/ui/slide-over-panel.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { IconX } from "@tabler/icons-react";
+import { cn } from "../utils/cn";
+import { Button } from "./button";
+
+export interface SlideOverPanelProps {
+  open: boolean;
+  /** Panel width. Default `"w-96"`. */
+  width?: "w-80" | "w-96";
+  onClose: () => void;
+  header: ReactNode;
+  children: ReactNode;
+  /** `aria-label` of the close button. Default `"Close panel"`. */
+  closeLabel?: string;
+  className?: string;
+}
+
+/**
+ * Right-side slide-over shell, absolutely positioned inside its nearest
+ * positioned parent (not a portal or dialog). Only the close button closes it.
+ * Hidden below `md`.
+ */
+export function SlideOverPanel({
+  open,
+  width = "w-96",
+  onClose,
+  header,
+  children,
+  closeLabel = "Close panel",
+  className,
+}: SlideOverPanelProps) {
+  return (
+    <AnimatePresence initial={false}>
+      {open && (
+        <motion.div
+          key="slide-over-panel"
+          initial={{ x: "100%" }}
+          animate={{ x: 0 }}
+          exit={{ x: "100%" }}
+          transition={{ type: "spring", damping: 30, stiffness: 300 }}
+          className={cn(
+            `absolute top-0 right-0 bottom-0 ${width} z-20 glass-panel-strong smooth-shadow-ring-xl overflow-y-auto hidden md:flex flex-col`,
+            className,
+          )}
+        >
+          <div className="flex items-start justify-between p-4 pb-2">
+            {header}
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              onClick={onClose}
+              className="ml-2 shrink-0 text-muted-foreground hover:text-foreground"
+              aria-label={closeLabel}
+            >
+              <IconX size={16} />
+            </Button>
+          </div>
+          {children}
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

package/src/ui/toolbar-search-input.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { IconSearch, IconX } from "@tabler/icons-react";
+import { cn } from "../utils/cn";
+import { Button } from "./button";
+import { Input } from "./input";
+
+export interface ToolbarSearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  /** Default `"Search..."`. */
+  placeholder?: string;
+  /** `aria-label` of the input. Default `"Search"`. */
+  label?: string;
+  /** `aria-label` of the clear button. Default `"Clear search"`. */
+  clearLabel?: string;
+  className?: string;
+  inputClassName?: string;
+}
+
+/**
+ * Stable rounded search field for toolbars: no enter or clear animations, no
+ * layout jump. The clear button stays mounted and is hidden while the value is
+ * blank. Clearing does not move focus. The ref points at the `<input>`.
+ */
+export const ToolbarSearchInput = React.forwardRef<HTMLInputElement, ToolbarSearchInputProps>(
+  function ToolbarSearchInput(
+    {
+      value,
+      onChange,
+      placeholder = "Search...",
+      label = "Search",
+      clearLabel = "Clear search",
+      className,
+      inputClassName,
+    },
+    ref,
+  ) {
+    const active = value.trim().length > 0;
+
+    return (
+      <div className={cn("relative min-w-0 flex-1 sm:flex-none", className)}>
+        <IconSearch
+          size={14}
+          className="pointer-events-none absolute left-2.5 top-1/2 z-[1] -translate-y-1/2 text-muted-foreground"
+        />
+        <Input
+          ref={ref}
+          type="text"
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          placeholder={placeholder}
+          aria-label={label}
+          enterKeyHint="search"
+          className={cn(
+            // match outline toolbar buttons beside it
+            "h-8 w-full min-w-0 rounded-lg border border-border bg-transparent pl-8 pr-8 text-sm shadow-none sm:w-44 md:w-52",
+            "placeholder:text-muted-foreground/70 hover:bg-default",
+            "focus-visible:border-border focus-visible:bg-default focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            inputClassName,
+          )}
+        />
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          aria-label={clearLabel}
+          tabIndex={active ? 0 : -1}
+          aria-hidden={!active}
+          className={cn(
+            "absolute right-0.5 top-1/2 z-[1] h-7 w-7 -translate-y-1/2 text-muted-foreground hover:text-foreground",
+            !active && "pointer-events-none opacity-0",
+          )}
+          onClick={() => onChange("")}
+        >
+          <IconX size={14} stroke={1.75} />
+        </Button>
+      </div>
+    );
+  },
+);