@vvedantb/ui 0.38.0 → 0.39.1

package/src/ai-elements/message.tsx

@@ -1,8 +1,14 @@
 "use client";
 import type { UIMessage } from "ai";
-import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
+import type { ComponentProps, HTMLAttributes, ReactElement, ReactNode } from "react";
 import { Button } from "../ui/button";
 import { ButtonGroup, ButtonGroupText } from "../ui/button-group";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "../ui/context-menu";
 import {
   Tooltip,
   TooltipContent,
@@ -30,23 +36,233 @@ export interface MessageConfig {
     branchIcon?: string;
   };
 }
+/**
+ * One action of a message: a row in the right-click menu and, with an `icon`,
+ * a button in the hover toolbar. Start with Reply.
+ */
+export type MessageMenuAction = {
+  key: string;
+  label: string;
+  /** Shows the action in the hover toolbar (an icon button). Without it: menu only. */
+  icon?: ReactNode;
+  destructive?: boolean;
+  disabled?: boolean;
+  onSelect: () => void;
+  /** Force the hover toolbar on (`true`) or off (`false`). Default: on when there is an `icon`. */
+  hover?: boolean;
+};
 export type MessageProps = HTMLAttributes<HTMLDivElement> & {
   from: UIMessage["role"];
+  /**
+   * Right-click menu and hover toolbar actions, such as Reply. Without it (or
+   * empty) `Message` renders the same `div` as before. With it a right click
+   * opens the menu and a hover toolbar shows beside the bubble. The toolbar is
+   * absolutely positioned and takes no layout space.
+   */
+  actions?: MessageMenuAction[];
+  /**
+   * The target of a quote click: a soft primary wash and ring. Set it back to
+   * `false` about 1.5 seconds later and it fades out (`duration-1000`). Sets
+   * `data-highlighted`.
+   */
+  highlighted?: boolean;
 };
-export const Message = ({ className, from, ...props }: MessageProps) => {
+export const Message = ({
+  className,
+  from,
+  actions,
+  highlighted,
+  children,
+  ...props
+}: MessageProps) => {
   const classes = useUiConfig("Message")?.classes;
   const merge = useCn();
-  return (
+  const hasActions = actions !== undefined && actions.length > 0;
+  const root = (
     <div
       className={merge(
         classes?.root ?? "group flex w-full max-w-[95%] flex-col gap-2",
         from === "user"
           ? (classes?.user ?? "is-user ml-auto justify-end")
           : (classes?.assistant ?? "is-assistant"),
+                highlighted !== undefined &&
+          "rounded-xl transition-[background-color,box-shadow] duration-1000",
+        highlighted && "bg-primary/10 ring-2 ring-primary/30",
         className,
       )}
+      data-highlighted={highlighted ? "" : undefined}
       {...props}
-    />
+    >
+      {hasActions ? (
+        <div
+          className={
+            from === "user"
+              ? "relative ml-auto w-fit max-w-full"
+              : "relative w-fit max-w-full"
+          }
+        >
+          {children}
+          <MessageHoverActions actions={actions} from={from} />
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
+  return hasActions ? (
+    <MessageContextMenu actions={actions}>{root}</MessageContextMenu>
+  ) : (
+    root
+  );
+};
+export type MessageContextMenuProps = {
+  actions: MessageMenuAction[];
+  /** One element, which becomes the right-click target (Radix `asChild`). */
+  children: ReactElement;
+};
+/**
+ * The right-click menu of a message: `actions` as `ContextMenuItem`s,
+ * destructive ones in the danger colour. With no actions it returns `children`.
+ */
+export const MessageContextMenu = ({
+  actions,
+  children,
+}: MessageContextMenuProps) => {
+  if (actions.length === 0) return children;
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
+      <ContextMenuContent aria-label="Message actions">
+        {actions.map((action) => (
+          <ContextMenuItem
+            key={action.key}
+            disabled={action.disabled}
+            startContent={action.icon}
+            className={action.destructive ? "text-danger" : undefined}
+            onSelect={action.onSelect}
+          >
+            {action.label}
+          </ContextMenuItem>
+        ))}
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+};
+export type MessageHoverActionsProps = Omit<
+  ComponentProps<"div">,
+  "children"
+> & {
+  actions: MessageMenuAction[];
+  /** Role of the message: user toolbars sit left of the bubble, others right. Default `assistant`. */
+  from?: UIMessage["role"];
+};
+/**
+ * A small toolbar of icon buttons that shows on hover or focus of the
+ * enclosing `Message` (the `group` class, `reveal-on-hover`; always visible on
+ * touch). It is absolutely positioned, so it takes no layout space: beside the
+ * bubble, top-aligned (left of a user bubble, right of an assistant message).
+ * On narrow screens it moves to the bubble's top edge. Draws the actions that
+ * have an `icon`. Place it inside a `relative w-fit` wrapper around the
+ * bubble; the `actions` prop on `Message` does this.
+ */
+export const MessageHoverActions = ({
+  actions,
+  from = "assistant",
+  className,
+  ...props
+}: MessageHoverActionsProps) => {
+  const merge = useCn();
+  const shown = actions.filter((action) =>
+    action.hover === undefined ? action.icon !== undefined : action.hover,
+  );
+  if (shown.length === 0) return null;
+  return (
+    <div
+      role="toolbar"
+      aria-label="Message actions"
+      className={merge(
+        "reveal-on-hover absolute top-0 z-10 flex w-fit items-center gap-0.5 rounded-lg border border-border bg-surface p-0.5 shadow-sm transition-opacity",
+        from === "user"
+          ? "right-full mr-1 max-sm:right-2 max-sm:mr-0 max-sm:-translate-y-[62%] max-sm:[&>button]:size-6"
+          : "left-full ml-1 max-sm:left-auto max-sm:right-0 max-sm:ml-0 max-sm:-translate-y-full max-sm:[&>button]:size-6",
+        className,
+      )}
+      {...props}
+    >
+      {shown.map((action) => (
+        <MessageAction
+          key={action.key}
+          label={action.label}
+          tooltip={action.label}
+          tooltipSide="bottom"
+          // Narrow: the toolbar sits on the bubble corner and a tooltip below it would cover the text.
+          tooltipClassName="max-sm:hidden"
+          disabled={action.disabled}
+          className={action.destructive ? "text-danger" : undefined}
+          onClick={action.onSelect}
+        >
+          {action.icon}
+        </MessageAction>
+      ))}
+    </div>
+  );
+};
+export type MessageQuoteProps = Omit<ComponentProps<"div">, "onClick"> & {
+  /** Who wrote the quoted message. */
+  author: string;
+  /** The quoted text, cut to two lines. */
+  text: string;
+  /** Makes the quote a button, so the app can scroll to and highlight the original. */
+  onPress?: () => void;
+};
+/**
+ * A compact quote inside a message bubble, above its text: a left border, the
+ * author and two lines of the text. It reads on the primary user bubble, the
+ * border and text take the bubble colour. With `onPress` it is a button.
+ */
+export const MessageQuote = ({
+  author,
+  text,
+  onPress,
+  className,
+  ...props
+}: MessageQuoteProps) => {
+  const merge = useCn();
+  const body = (
+    <>
+      <span className="block truncate text-xs font-semibold opacity-70">
+        {author}
+      </span>
+      <span className="line-clamp-2 block text-sm opacity-90">{text}</span>
+    </>
+  );
+  const base = "block min-w-0 border-l-2 border-current/40 pl-2.5 text-left";
+  if (onPress === undefined) {
+    return (
+      <div
+        role="group"
+        aria-label={`Quoted message from ${author}`}
+        className={merge(base, className)}
+        {...props}
+      >
+        {body}
+      </div>
+    );
+  }
+  return (
+    <div
+      className={merge(base, className)}
+      {...props}
+    >
+      <button
+        type="button"
+        aria-label={`Go to quoted message from ${author}`}
+        onClick={onPress}
+        className="block w-full min-w-0 cursor-pointer text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+      >
+        {body}
+      </button>
+    </div>
   );
 };
 export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
@@ -88,6 +304,10 @@ export const MessageActionsBar = ({
 };
 export type MessageActionProps = ComponentProps<typeof Button> & {
   tooltip?: string;
+  /** Side of the tooltip. Default: the Radix default (`top`). */
+  tooltipSide?: "top" | "right" | "bottom" | "left";
+  /** Extra classes for the tooltip content. */
+  tooltipClassName?: string;
   label?: string;
 };
 export const MessageAction = (props: MessageActionProps) => {
@@ -96,6 +316,8 @@ export const MessageAction = (props: MessageActionProps) => {
 };
 function EagerMessageAction({
   tooltip,
+  tooltipSide,
+  tooltipClassName,
   children,
   label,
   variant = "ghost",
@@ -113,7 +335,7 @@ function EagerMessageAction({
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger asChild>{button}</TooltipTrigger>
-          <TooltipContent>
+          <TooltipContent side={tooltipSide} className={tooltipClassName}>
             <p>{tooltip}</p>
           </TooltipContent>
         </Tooltip>
@@ -129,6 +351,8 @@ function EagerMessageAction({
  */
 function LazyMessageAction({
   tooltip,
+  tooltipSide,
+  tooltipClassName,
   children,
   label,
   variant = "ghost",
@@ -166,7 +390,7 @@ function LazyMessageAction({
         {/* The focus that armed it landed before the tooltip existed. */}
         <Tooltip defaultOpen={armedBy === "focus"}>
           <TooltipTrigger asChild>{button}</TooltipTrigger>
-          <TooltipContent>
+          <TooltipContent side={tooltipSide} className={tooltipClassName}>
             <p>{tooltip}</p>
           </TooltipContent>
         </Tooltip>

package/src/ai-elements/prompt-input.tsx

@@ -47,6 +47,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "../ui/radix-select";
+import { Button } from "../ui/button";
 import { CrossfadeIconSlot } from "../ui/crossfade-icon";
 import { SendQueueIcon } from "../ui/send-queue-icon";
 import { Spinner } from "../ui/spinner";
@@ -811,6 +812,67 @@ export const PromptInputHeader = ({
     />
   );
 };
+export type ReplyQuoteChipProps = Omit<ComponentProps<"div">, "children"> & {
+  /** Who wrote the message being replied to. */
+  author: string;
+  /** Its text, cut to two lines. */
+  text: string;
+  /** Called by the X button. Clear the reply in the app. */
+  onDismiss?: () => void;
+  /** Default "Dismiss reply quote". */
+  dismissLabel?: string;
+};
+/**
+ * The chip above the composer while a reply is pending: an accent bar, the
+ * author, two lines of the message and an X. Put it in `PromptInputHeader`:
+ *
+ * ```tsx
+ * <PromptInputHeader>
+ *   {reply && <ReplyQuoteChip author={reply.author} text={reply.text} onDismiss={() => setReply(null)} />}
+ * </PromptInputHeader>
+ * ```
+ */
+export const ReplyQuoteChip = ({
+  author,
+  text,
+  onDismiss,
+  dismissLabel = "Dismiss reply quote",
+  className,
+  ...props
+}: ReplyQuoteChipProps) => {
+  const merge = useCn();
+  return (
+    <div
+      role="group"
+      aria-label={`Replying to ${author}`}
+      className={merge(
+        "flex w-full min-w-0 items-start gap-2 rounded-field border border-border bg-surface-secondary/60 py-1.5 pr-1 pl-3 text-sm",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        aria-hidden="true"
+        className="w-0.5 shrink-0 self-stretch rounded-full bg-primary"
+      />
+      <div className="min-w-0 flex-1">
+        <span className="block truncate text-xs font-semibold text-muted-foreground">
+          {author}
+        </span>
+        <span className="line-clamp-2 block text-foreground">{text}</span>
+      </div>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        aria-label={dismissLabel}
+        onClick={onDismiss}
+      >
+        <IconX size={14} />
+      </Button>
+    </div>
+  );
+};
 export type PromptInputFooterProps = Omit<
   ComponentProps<typeof InputGroupAddon>,
   "align"

package/src/ai-elements/queue.tsx

@@ -292,7 +292,7 @@ function QueueWidgetItem({
           <Textarea
             value={editText}
             onChange={(e) => setEditText(e.currentTarget.value)}
-            className="min-h-[60px] text-sm"
+            className="min-h-[60px]"
             autoFocus
           />
           <div className="flex justify-end gap-2">

package/src/ai-elements/trace.tsx

@@ -47,8 +47,9 @@ export function AgentTraceLine({
       data-status={status}
       className={merge(
         "flex w-fit max-w-full min-w-0 items-center gap-2 text-muted-foreground text-sm transition-colors",
-        "in-[button:hover]:text-foreground",
-        "data-[status=error]:text-destructive data-[status=error]:in-[button:hover]:text-destructive",
+        // Gated like `hover:` plus a fine pointer, so a tap on a phone does not leave it lit.
+        "[@media(hover:hover)_and_(pointer:fine)]:in-[button:hover]:text-foreground",
+        "data-[status=error]:text-destructive data-[status=error]:[@media(hover:hover)_and_(pointer:fine)]:in-[button:hover]:text-destructive",
         "data-[status=pending]:opacity-60",
         className,
       )}

package/src/icons/nav-icon-base.tsx

@@ -1,7 +1,7 @@
 import { useId, type CSSProperties, type ReactNode, type SVGProps } from "react";
 import { cn } from "../utils/cn";
 
-/** `"hover"`: animate while an ancestor with the `group` class is hovered. `true`: always. `false`: never. */
+/** `"hover"`: animate while an ancestor with the `group` class is hovered by a mouse (fine pointer). `true`: always. `false`: never. */
 export type IconAnimate = boolean | "hover";
 
 export type IconProps = Omit<SVGProps<SVGSVGElement>, "children" | "color" | "height" | "width" | "strokeWidth"> & {

package/src/ui/__snapshots__/alt-wrappers.test.tsx.snap

@@ -12,8 +12,8 @@ exports[`ClearInputAlt markup > every prop 1`] = `"<div class="relative w-40"><s
 
 exports[`ClearInputAlt markup > filled 1`] = `"<div class="relative"><input class="flex h-10 w-full rounded-field border border-border bg-field-background px-3.5 py-2 text-sm transition-[border-color,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-1 focus-visible:ring-focus-ring pr-9" type="text" value="abc"><button type="button" tabindex="0" class="absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[opacity,background-color,color,transform] duration-150 ease-out active:duration-100 active:ease-out active:scale-[0.97] hover:bg-surface-tertiary hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring before:absolute before:inset-[-8px] before:content-[''] opacity-100" aria-hidden="false" aria-label="Clear"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-x"><path d="M18 6l-12 12"></path><path d="M6 6l12 12"></path></svg></button></div>"`;
 
-exports[`InputGroupAlt markup > input className and props 1`] = `"<div data-input-group="" class="flex h-10 flex-wrap rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth has-[textarea]:h-auto has-data-[slot=input-group-control]:h-auto has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-focus-visible:outline-hidden has-focus-visible:border-focus-border has-focus-visible:ring-1 has-focus-visible:ring-focus-ring"><input class="flex w-full max-sm:min-w-0 border-border text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-focus-ring h-full flex-1 rounded-none border-0 bg-transparent px-3 py-2 shadow-none focus-visible:border-0 focus-visible:ring-0 in-x" id="i" disabled=""></div>"`;
+exports[`InputGroupAlt markup > input className and props 1`] = `"<div data-input-group="" class="flex h-10 flex-wrap rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth has-[textarea]:h-auto has-data-[slot=input-group-control]:h-auto has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-focus-visible:outline-hidden has-focus-visible:border-focus-border has-focus-visible:ring-1 has-focus-visible:ring-focus-ring"><input class="flex w-full max-sm:min-w-0 border-border text-base sm:pointer-fine:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-focus-ring h-full flex-1 rounded-none border-0 bg-transparent px-3 py-2 shadow-none focus-visible:border-0 focus-visible:ring-0 in-x" id="i" disabled=""></div>"`;
 
-exports[`InputGroupAlt markup > input with every addon align and button size 1`] = `"<div data-input-group="" class="flex h-10 flex-wrap rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth has-[textarea]:h-auto has-data-[slot=input-group-control]:h-auto has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-focus-visible:outline-hidden has-focus-visible:border-focus-border has-focus-visible:ring-1 has-focus-visible:ring-focus-ring"><div class="flex items-center flex-row ps-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></div><div data-align="inline-start" class="flex items-center flex-row ps-3"><span class="flex items-center text-sm text-muted-foreground/95">https://</span></div><input class="flex w-full max-sm:min-w-0 border-border text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-focus-ring h-full flex-1 rounded-none border-0 bg-transparent px-3 py-2 shadow-none focus-visible:border-0 focus-visible:ring-0" placeholder="Search"><div data-align="inline-end" class="flex items-center flex-row pe-3"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground py-2 shrink-0 shadow-none h-7 rounded-lg px-2 text-xs">Go</button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground py-2 shrink-0 shadow-none h-8 rounded-lg px-2.5 text-xs">Small</button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground px-4 py-2 shrink-0 shadow-none h-7 w-7 rounded-lg" aria-label="A"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:-translate-y-0.5 hover:opacity-90 px-4 py-2 shrink-0 shadow-none h-8 w-8 rounded-lg" type="submit" aria-label="B"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button></div></div>"`;
+exports[`InputGroupAlt markup > input with every addon align and button size 1`] = `"<div data-input-group="" class="flex h-10 flex-wrap rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth has-[textarea]:h-auto has-data-[slot=input-group-control]:h-auto has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-focus-visible:outline-hidden has-focus-visible:border-focus-border has-focus-visible:ring-1 has-focus-visible:ring-focus-ring"><div class="flex items-center flex-row ps-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></div><div data-align="inline-start" class="flex items-center flex-row ps-3"><span class="flex items-center text-sm text-muted-foreground/95">https://</span></div><input class="flex w-full max-sm:min-w-0 border-border text-base sm:pointer-fine:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-focus-ring h-full flex-1 rounded-none border-0 bg-transparent px-3 py-2 shadow-none focus-visible:border-0 focus-visible:ring-0" placeholder="Search"><div data-align="inline-end" class="flex items-center flex-row pe-3"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] active:duration-[var(--motion-fast,150ms)] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground py-2 shrink-0 shadow-none h-7 rounded-lg px-2 text-xs">Go</button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] active:duration-[var(--motion-fast,150ms)] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground py-2 shrink-0 shadow-none h-8 rounded-lg px-2.5 text-xs">Small</button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] active:duration-[var(--motion-fast,150ms)] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground px-4 py-2 shrink-0 shadow-none h-7 w-7 rounded-lg" aria-label="A"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] active:duration-[var(--motion-fast,150ms)] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:-translate-y-0.5 hover:opacity-90 px-4 py-2 shrink-0 shadow-none h-8 w-8 rounded-lg" type="submit" aria-label="B"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button></div></div>"`;
 
-exports[`InputGroupAlt markup > textarea with block addons, error and classNames 1`] = `"<div data-input-group="" class="flex h-10 flex-wrap rounded-field border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth has-[textarea]:h-auto has-data-[slot=input-group-control]:h-auto has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-focus-visible:outline-hidden has-focus-visible:ring-1 border-danger-border has-focus-visible:border-danger has-focus-visible:ring-danger-ring root-x" id="g"><div data-align="block-start" class="flex items-center w-full flex-row border-b border-separator px-3 py-2 addon-x"><span class="flex items-center text-sm text-x">Title</span></div><textarea class="flex min-h-20 w-full max-sm:min-w-0 border-border text-base sm:text-sm placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-focus-ring flex-1 resize-none rounded-none border-0 bg-transparent px-3 py-2.5 shadow-none focus-visible:border-0 focus-visible:ring-0 field-sizing-content ta-x" rows="2">v</textarea><div data-align="block-end" class="flex items-center w-full flex-row px-3 py-2"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground py-2 shrink-0 shadow-none h-7 rounded-lg px-2 text-xs btn-x" disabled="" data-loading="true"><svg class="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Send</button></div></div>"`;
+exports[`InputGroupAlt markup > textarea with block addons, error and classNames 1`] = `"<div data-input-group="" class="flex h-10 flex-wrap rounded-field border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth has-[textarea]:h-auto has-data-[slot=input-group-control]:h-auto has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-focus-visible:outline-hidden has-focus-visible:ring-1 border-danger-border has-focus-visible:border-danger has-focus-visible:ring-danger-ring root-x" id="g"><div data-align="block-start" class="flex items-center w-full flex-row border-b border-separator px-3 py-2 addon-x"><span class="flex items-center text-sm text-x">Title</span></div><textarea class="flex min-h-20 w-full max-sm:min-w-0 border-border text-base sm:pointer-fine:text-sm placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-focus-ring flex-1 resize-none rounded-none border-0 bg-transparent px-3 py-2.5 shadow-none focus-visible:border-0 focus-visible:ring-0 field-sizing-content ta-x" rows="2">v</textarea><div data-align="block-end" class="flex items-center w-full flex-row px-3 py-2"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] active:duration-[var(--motion-fast,150ms)] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground py-2 shrink-0 shadow-none h-7 rounded-lg px-2 text-xs btn-x" disabled="" data-loading="true"><svg class="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Send</button></div></div>"`;

package/src/ui/__snapshots__/sonner-dom.test.tsx.snap

@@ -2,4 +2,4 @@
 
 exports[`SonnerToaster DOM > renders the toaster and a toast 1`] = `"<section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false" data-react-aria-top-layer="true"></section>"`;
 
-exports[`SonnerToaster DOM > renders the toaster and a toast 2`] = `"<section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false" data-react-aria-top-layer="true"><ol dir="ltr" tabindex="-1" class="toaster group !font-sans" data-sonner-toaster="true" data-sonner-theme="light" data-y-position="top" data-x-position="right" style="--front-toast-height: 0px; --width: 356px; --gap: 12px; --offset-top: 24px; --offset-right: 24px; --offset-bottom: 24px; --offset-left: 24px; --mobile-offset-top: 16px; --mobile-offset-right: 16px; --mobile-offset-bottom: 16px; --mobile-offset-left: 16px;"><li tabindex="0" class="group toast glass-panel-strong flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm text-foreground smooth-shadow-ring-md" data-sonner-toast="" data-styled="false" data-mounted="true" data-promise="false" data-swiped="false" data-removed="false" data-visible="true" data-y-position="top" data-x-position="right" data-index="0" data-front="true" data-swiping="false" data-dismissible="true" data-swipe-out="false" data-expanded="false" style="--index: 0; --toasts-before: 0; --z-index: 1; --offset: 0px; --initial-height: 0px;"><div data-content="" class="flex min-w-0 grow flex-col"><div data-title="" class="font-medium leading-snug">Saved</div><div data-description="" class="text-[13px] leading-snug text-muted-foreground">All changes stored</div></div></li></ol></section>"`;
+exports[`SonnerToaster DOM > renders the toaster and a toast 2`] = `"<section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false" data-react-aria-top-layer="true"><ol dir="ltr" tabindex="-1" class="toaster group !font-sans" data-sonner-toaster="true" data-sonner-theme="light" data-y-position="top" data-x-position="right" style="--front-toast-height: 0px; --width: 356px; --gap: 12px; --offset-top: 24px; --offset-right: 24px; --offset-bottom: 24px; --offset-left: 24px; --mobile-offset-top: calc(16px + env(safe-area-inset-top, 0px)); --mobile-offset-right: 16px; --mobile-offset-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); --mobile-offset-left: 16px;"><li tabindex="0" class="group toast glass-panel-strong flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm text-foreground smooth-shadow-ring-md" data-sonner-toast="" data-styled="false" data-mounted="true" data-promise="false" data-swiped="false" data-removed="false" data-visible="true" data-y-position="top" data-x-position="right" data-index="0" data-front="true" data-swiping="false" data-dismissible="true" data-swipe-out="false" data-expanded="false" style="--index: 0; --toasts-before: 0; --z-index: 1; --offset: 0px; --initial-height: 0px;"><div data-content="" class="flex min-w-0 grow flex-col"><div data-title="" class="font-medium leading-snug">Saved</div><div data-description="" class="text-[13px] leading-snug text-muted-foreground">All changes stored</div></div></li></ol></section>"`;

package/src/ui/button.tsx

@@ -8,7 +8,7 @@ const ghostClass =
   "text-muted-foreground hover:bg-surface-tertiary hover:text-foreground";
 
 const buttonBaseClasses =
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0";
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] active:duration-[var(--motion-fast,150ms)] [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0";
 
 const buttonVariantClasses = {
   default:

package/src/ui/clear-input.tsx

@@ -49,7 +49,7 @@ export interface ClearInputProps extends Omit<
 }
 
 const inputClasses =
-  "flex h-10 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50";
+  "flex h-10 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:pointer-fine:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50";
 
 const buttonClasses =
   "absolute right-2 top-1/2 z-4 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.92] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring max-sm:hit-target";

package/src/ui/command.tsx

@@ -131,7 +131,7 @@ const CommandInput = React.forwardRef<
         ref={ref}
         className={merge(
           config?.classes?.input ??
-            "flex h-11 w-full max-sm:min-w-0 bg-transparent text-base sm:text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            "flex h-11 w-full max-sm:min-w-0 bg-transparent text-base sm:pointer-fine:text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...props}

package/src/ui/input.tsx

@@ -16,7 +16,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
         type={type}
         className={merge(
           base ?? [
-            "flex h-10 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50",
+            "flex h-10 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:pointer-fine:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50",
             fieldFocusClass,
           ],
           className,

package/src/ui/search-input.tsx

@@ -7,7 +7,7 @@ import { Kbd } from "./kbd";
 import { useCn, useUiConfig } from "./ui-config";
 
 const sizeClasses = {
-  sm: { input: "h-8 pl-8 text-base sm:text-sm", icon: "left-2" },
+  sm: { input: "h-8 pl-8 text-base sm:pointer-fine:text-sm", icon: "left-2" },
   md: { input: "h-10 pl-9", icon: "left-3" },
 };
 

package/src/ui/select.tsx

@@ -55,7 +55,7 @@ const SelectTrigger = React.forwardRef<
       data-slot={(config?.triggerSlot ?? true) ? "select-trigger" : undefined}
       className={merge(
         config?.classes?.trigger ?? [
-          "flex h-10 w-full max-sm:min-w-0 items-center justify-between whitespace-nowrap rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:text-sm ring-offset-background placeholder:text-field-placeholder transition-[border-color,box-shadow,background-color] duration-200 ease-smooth disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+          "flex h-10 w-full max-sm:min-w-0 items-center justify-between whitespace-nowrap rounded-field border border-border bg-field-background px-3.5 py-2 text-base sm:pointer-fine:text-sm ring-offset-background placeholder:text-field-placeholder transition-[border-color,box-shadow,background-color] duration-200 ease-smooth disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
           fieldFocusClass,
         ],
         className,

package/src/ui/sonner.tsx

@@ -16,6 +16,7 @@ import "./sonner.css";
 //
 // Position: `top-right` by default (sonner's own default is `bottom-right`), as
 // apps mount it. A `position` prop or `UiConfig.SonnerToaster.position` wins.
+// `mobileOffset` adds the safe-area insets to sonner's 16px; a prop or config replaces it.
 //
 // Stacking: `expand={false}` keeps toasts collapsed (offset + scale). Hovering
 // the stack expands them. `sonner.css` hides back-toast content while collapsed
@@ -100,6 +101,14 @@ const defaultCancelButtonClassName =
 
 const defaultToasterPosition = "top-right" satisfies ToasterProps["position"];
 
+// Sonner's 16px phone offset (viewport up to 600px) plus the safe-area inset, so
+// toasts clear the notch and home indicator under a translucent status bar
+// (`viewport-fit=cover`). `env()` is 0 without it. Left and right keep 16px.
+const defaultMobileOffset = {
+  top: "calc(16px + env(safe-area-inset-top, 0px))",
+  bottom: "calc(16px + env(safe-area-inset-bottom, 0px))",
+} satisfies ToasterProps["mobileOffset"];
+
 const toastRadiusClasses = {
   lg: "rounded-lg",
   surface: "rounded-surface",
@@ -220,6 +229,7 @@ function SonnerToaster(props: ToasterProps & SonnerToasterOptions) {
     // Defaulted here, not by spreading after a literal, so `position={undefined}`
     // still gets top-right rather than sonner's bottom-right.
     position = defaultToasterPosition,
+    mobileOffset = defaultMobileOffset,
     toastRadius,
     density,
     toastIcons = "default",
@@ -252,6 +262,7 @@ function SonnerToaster(props: ToasterProps & SonnerToasterOptions) {
       gap={12}
       {...rest}
       position={position}
+      mobileOffset={mobileOffset}
       closeButton={closeButton ?? (closeButtonStyle === "hoverChip" ? true : undefined)}
       className={
         toasterClassName && className

package/src/ui/textarea.tsx

@@ -17,7 +17,7 @@ const Textarea = React.forwardRef<
     <textarea
       className={merge(
         base ?? [
-          "flex min-h-20 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2.5 text-base sm:text-sm placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-20 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2.5 text-base sm:pointer-fine:text-sm placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50",
           fieldFocusClass,
         ],
         className,

package/tokens/src/css/base.css

@@ -14,6 +14,29 @@
     accent-color: var(--accent);
   }
 
+  /* No double-tap-zoom wait on controls, so a tap fires `click` at once.
+     touch-action is not inherited and the `html` value stops at the first
+     scroll container, so controls inside scroll areas need their own. In
+     `@layer base`, so a `touch-*` utility (e.g. `touch-pan-y`) still wins. */
+  button,
+  a[href],
+  summary,
+  label,
+  [role="button"],
+  [role="link"],
+  [role="tab"],
+  [role="option"],
+  [role="menuitem"],
+  [role="menuitemcheckbox"],
+  [role="menuitemradio"],
+  [role="checkbox"],
+  [role="radio"],
+  [role="switch"],
+  input[type="checkbox"],
+  input[type="radio"] {
+    touch-action: manipulation;
+  }
+
   ::selection {
     background-color: color-mix(in oklch, var(--accent) 18%, transparent);
     color: var(--foreground);

package/tokens/src/css/markdown.css

@@ -181,8 +181,10 @@
     text-underline-offset: 0.2em;
     transition: text-decoration-color var(--motion-fast, 150ms) ease-out;
   }
-  .markdown-link:hover {
-    text-decoration-color: currentColor;
+  @media (hover: hover) and (pointer: fine) {
+    .markdown-link:hover {
+      text-decoration-color: currentColor;
+    }
   }
   .markdown-link-icon {
     display: inline-block;

package/tokens/src/css/marquee.css

@@ -35,9 +35,12 @@
   will-change: transform;
 }
 
-.mq-host[data-mq-overflow="true"]:hover .mq-inner,
-.group:hover .mq-host[data-mq-overflow="true"] .mq-inner {
-  max-width: none; /* let the text spill to its full width; the host clips it */
-  transform: translateX(calc(-1 * var(--mq-shift, 0px)));
-  transition: transform var(--mq-dur, 0s) linear var(--mq-delay, 400ms);
+/* Fine pointers only: on touch a tap leaves :hover stuck and the text scrolled. */
+@media (hover: hover) and (pointer: fine) {
+  .mq-host[data-mq-overflow="true"]:hover .mq-inner,
+  .group:hover .mq-host[data-mq-overflow="true"] .mq-inner {
+    max-width: none; /* let the text spill to its full width; the host clips it */
+    transform: translateX(calc(-1 * var(--mq-shift, 0px)));
+    transition: transform var(--mq-dur, 0s) linear var(--mq-delay, 400ms);
+  }
 }