@vvedantb/ui 0.37.1 → 0.39.0

package/README.md

@@ -324,7 +324,7 @@ import {
       rail={
         <SidebarRail
           showDivider={hasPanel && !(isDesktop && collapsed)}
-          top={<RailTile asChild label="Home" active={isHome}><Link to="/"><IconHome size={22} /></Link></RailTile>}
+          top={<RailTile asChild app="vmem" label="Home" active={isHome}><Link to="/" /></RailTile>}
           bodyClassName="scrollbar-thin"
           footerClassName="border-t border-separator"
           footer={<SidebarAccountMenu name={name} email={email} imageUrl={avatarUrl}><DropdownMenuItem>Settings</DropdownMenuItem></SidebarAccountMenu>}
@@ -344,7 +344,8 @@ import {
 - `AppShell`: `sidebar`, `children`, `panelHidden` (main offsets by the rail width instead of the sidebar width), `skipLinkLabel` (`"Skip to main content"`), `mainId` (`"main-content"`), `className`, `mainClassName`, `contentClassName`.
 - `AppSidebar`: legacy (still supported) `rail`, `panel` and `mobile*` props; compose `Sidebar.*` instead. `rail`, `panel` (not rendered while `panelHidden`), `collapsed`, `panelHidden`, `isDesktop`, `mobileOpen`, `onMobileOpenChange`, `id` (default from `useId`), `asideProps` (`data-*` attributes for the `<aside>`), `className`, `mobileTitle`, `mobileHeaderActions` (0.5.2; trailing actions such as icon buttons, in place of the end spacer), `mobileMenuIcon` (`(open) => node`, default a menu icon), `mobileMenuLabel` (`"Open navigation menu"`), `closeLabel` (`"Close navigation"`). Swipe left or Escape closes the drawer. The drawer is `inert` while closed on mobile, and closes when `isDesktop` becomes `true`. Close it on route change in the app. The mobile header is a three-column grid, so the title and trailing actions stay on one row and a long title truncates (0.5.4).
 - `SidebarRail`: legacy (still supported) `top`, `footer`, `bodyAsChild`, `tabs` and `*ClassName` props; compose `Sidebar.Rail` parts instead. `top`, `children` (scroll body), `footer`, `showDivider`, `bodyAsChild` (the single child, for example a tabs list, becomes the body), `className`, `topClassName`, `bodyClassName`, `footerClassName`. Other HTML attributes (`id`, `data-*`, `aria-*`) go to the root `<div>`. The top and footer wrappers render only when their slot is set.
-- `RailTile`: `label` (`aria-label` and tooltip), `active`, `tooltip`, `showTooltip` (default `true`), `badge` (inside the tile, after the children; style it with `railBadgeClass`), `asChild`, `className`. Without `asChild` it is a native `<button type="button">` (0.5.3), so icons keep their authored size; other props go to it. With `asChild` the child (for example a router link) gets the tile classes and `aria-current="page"` when active.
+- `RailTile`: `label` (`aria-label` and tooltip), `active`, `tooltip`, `showTooltip` (default `true`), `badge` (inside the tile, after the children; style it with `railBadgeClass`), `asChild`, `app`, `className`. Without `asChild` it is a native `<button type="button">` (0.5.3), so icons keep their authored size; other props go to it. With `asChild` the child (for example a router link) gets the tile classes and `aria-current="page"` when active.
+- Rail app icon: the home `RailTile` icon is 26px across the apps, enforced by the tile. Pass `app="vmem"` (any `ProductAppName`) and the tile renders `APP_ICONS[app]` at `SIDEBAR_RAIL_APP_ICON_SIZE` (`26`). With `asChild` it goes inside the child (`<Link to="/" />`); without it, `children` are ignored. Tiles without `app` are unchanged: the tile renders the icon you pass, at its size. `Sidebar.MobileHeader` is the standard mobile bar: 56px plus safe-area, solid `bg-surface`, centred `text-base font-semibold tracking-tight` title, 20px menu icon.
 - `RailDivider`, `SidebarIconTooltip` (`label`, `enabled`, `side` `"right"`, `sideOffset` 8).
 - `SidebarPanel`: legacy (still supported) `headerTrailing`, `onClose`, `closeLabel` and `closeButtonClassName`; compose `Sidebar.Panel` parts instead. `title`, `headerTrailing`, `onClose` (adds the close button; pass it on the mobile drawer only), `closeLabel`, `closeButtonClassName`, `collapsed` (`md:hidden`), `className`, `children`.
 - `SidebarAccountMenu`: legacy (still supported) `badge`, `triggerProps`, `contentProps` and `stackedLabel`; compose `Sidebar.Account*` parts instead. `name`, `email` (two-line label when set), `stackedLabel` (two-line layout even without `email`, default `false`), `imageUrl` (initials without it), `align` (`"center"`), `side` (`"right"`), `sideOffset` (8), `collisionPadding`, `contentClassName`, `children` (menu items). 0.5.2 adds `badge` (unread dot beside the trigger, in a `relative` wrapper around the menu, so the trigger's dimming and press scale skip it: `true` shows it, `false` fades it out, omitted renders no wrapper and no dot), `triggerProps` (spread onto the trigger `Button` after the defaults; `className` merges last) and `contentProps` (spread onto `DropdownMenuContent`, for example `fitViewport` or `aria-label`; no `className`, use `contentClassName`). `SidebarAccountMenuPlaceholder` is the tile-sized loading box.
@@ -477,7 +478,7 @@ Convention: compound parts are static members of a namespace object, `<Namespace
 | `ResizeHandle` | `SidebarResizeHandle` in a resizable `AppShell`, shown on desktop while the panel shows. Place it inside `Aside`. |
 | `Rail` | Rail column. `showDivider`. |
 | `RailHeader` / `RailBody` / `RailFooter` | Top block, scroll body (`asChild`, `tabs` for a Radix tabs list) and bottom block. `Footer` is an alias of `RailFooter`. |
-| `RailItem` | Rail tile with tooltip (`RailTile`): `label`, `active`, `tooltip`, `showTooltip`, `badge`, `asChild`, `tabValue`. |
+| `RailItem` | Rail tile with tooltip (`RailTile`): `label`, `active`, `tooltip`, `showTooltip`, `badge`, `asChild`, `app`, `tabValue`. |
 | `RailSeparator` | Short rule between rail items (`RailDivider`). |
 | `Tooltip` | Right-side icon tooltip (`SidebarIconTooltip`). |
 | `Panel` | Panel column. `collapsed` (`md:hidden`) and `panelHidden` (renders nothing) default to the Root values. |
@@ -896,6 +897,34 @@ Constants: `landingShellClass`, `landingPanelClass`, `landingItemVariants`, and
 for the footer's `actions` slot `landingFooterLinkClass` (a text link) and
 `landingFooterButtonClass` (a `Button variant="link"`).
 
+### `SiteHeader`
+
+Marketing header (0.38.0): `AppWordmark` at `SITE_HEADER_WORDMARK_SIZE` (20px, icon 28px; no size prop), up to four
+links from `md`, one CTA and an optional GitHub button. Below `md` the links, the CTA and GitHub sit in one full-width
+dropdown menu, in that order. It is plain markup with no motion and needs no `createLandingKit`.
+
+```tsx
+<SiteHeader
+  app="vmem"
+  homeLabel="vmem home"
+  links={[{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }]}
+  cta={<Button size="sm" className="rounded-full">Sign in</Button>}
+  githubUrl="https://github.com/vvedantb"
+/>
+```
+
+| Prop | |
+| --- | --- |
+| `app` | `vibot`, `vmem`, `verve`, `velth` or `vhub`. |
+| `homeLabel` | `aria-label` of the home wordmark link. |
+| `homeHref` | Default `#home`. |
+| `links` | `{ label, href }[]`, at most 4. More logs a development warning and only the first 4 render. |
+| `cta` | One node. Use `Button` (default variant) with `size="sm"` and `className="rounded-full"`. Shows in the bar from `md` and full width in the menu below. No second slot. |
+| `githubUrl` | Optional. Ghost icon button from `sm`, labelled "{app} on GitHub", and the last menu item. |
+
+The bar is `sticky top-0 z-50`, `h-14 sm:h-16`, `bg-background/80 backdrop-blur-md` with a `border-separator` bottom border.
+`createLandingKit().LandingNav` and `LandingNavMenu` are deprecated in favour of `SiteHeader`.
+
 ### `SiteFooter`
 
 Brand, tagline and social icon buttons; link columns; then copyright, product-of line and legal
@@ -1604,6 +1633,33 @@ const config = {
 
   Outside a `StickToBottom` (for example a page outline) use `JumpRail` with `items` (`{ id, title, preview?, level? }`), a `scrollRef` or `getScrollElement`, and `targetAttribute="data-toc-id"` or `resolveTarget`. `onReveal` runs when a target is not in the DOM; `onBeforeScroll` runs just before it. `onSelect(id)` runs after a click or Enter/Space pick, once the scroll has started or `onReveal` has run, so an app can move focus to the target for keyboard users; `ChatJumpRail` accepts it too. `observeKey` re-observes when the rendered window changes. The geometry helpers (`resolveJumpRailTopPercent`, `resolveJumpRailIndexFromPointer`, `resolveJumpRailHeightStyle`, `resolveJumpRailTickWidthClass`, `resolveJumpRailTickLevelStyle`) are exported.
 - `Message`: `classes.root`, `classes.user`, `classes.assistant` (the role classes of `Message`), `classes.content` (all `MessageContent` classes), `classes.branchSelector`, `classes.branchIcon` (a class in place of the arrows' `size={14}`), and `lazyActionTooltips`: a `MessageAction` mounts its tooltip on first hover or focus (focus opens it), not with the button.
+- Quoted replies (0.39.0): `Message` takes `actions` (right-click menu plus hover toolbar) and `highlighted`; `MessageQuote` goes in `MessageContent` above the text; `ReplyQuoteChip` goes in `PromptInputHeader`.
+
+  ```tsx
+  <Message
+    from="user"
+    id={`msg-${m.id}`}
+    highlighted={highlightId === m.id}
+    actions={[
+      { key: "reply", label: "Reply", icon: <IconArrowBackUp size={14} />, onSelect: () => setReply(m) },
+      { key: "copy", label: "Copy", icon: <IconCopy size={14} />, onSelect: () => copy(m.text) },
+    ]}
+  >
+    <MessageContent>
+      {m.quoted && <MessageQuote author={m.quoted.author} text={m.quoted.text} onPress={() => jumpTo(m.quoted.id)} />}
+      {m.text}
+    </MessageContent>
+  </Message>
+
+  <PromptInput onSubmit={send}>
+    <PromptInputHeader>
+      {reply && <ReplyQuoteChip author={reply.author} text={reply.text} onDismiss={() => setReply(null)} />}
+    </PromptInputHeader>
+    {/* textarea, footer */}
+  </PromptInput>
+  ```
+
+  The app owns the reply state and the scroll. `MessageHoverActions` needs a `relative` `Message` (the `actions` prop sets it).
 - `PromptInput`: `classes.group` (the input group, default `overflow-hidden`), `classes.groupIdle` / `classes.groupDragOver` (added while no drag / an accepted drag is over the form), `classes.groupDefault` (added when no `containerClassName` is given), `classes.textarea`, `classes.footer`, `classes.submit`, `classes.tabItem`; `submitIcons.<send|submitted|streaming|error>`, `submitCrossfade` (cross-fade the submit icon on status change) and `menuTriggerAsChild` (default `true`: `PromptInputActionMenuTrigger` is the Radix trigger; `false` nests a button inside it). New `PromptInput` props: `dataDrop` (`{ type, onDrop }`: a non-file drag of that MIME type counts as a drag over the form and `onDrop` gets its string payload) and `inputGroupClassName` (same as `containerClassName`). The attachments context adds `replace(id, file)`; `accept` now matches extension patterns such as `.html` by file name; `useOptionalPromptInputController` is exported.
 - `PromptInputSubmit`: new prop `queued` (0.30.0). Set it when a send would join a queue (the agent is still working). The send icon becomes `SendQueueIcon`, an up arrow that morphs into a stack of bars while `queued` is `true`. Leave it unset to keep `submitIcons.send`. `SendQueueIcon` (`queued`, `className` default `size-4`) is exported for other send buttons. It uses `m`, so `queued` needs the app's `LazyMotion`.
 - `PromptInputSettings` (new): an overflow menu with a "Model" submenu (one radio list, or a submenu per provider). Entry: `providerLabel(provider)` (default the id), `providerIcon(provider)` (default none), `classes.trigger`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.37.1",
+  "version": "0.39.0",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one main JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), third-party brand logos (also @vvedantb/ui/logos), motion-driven animated SVG icons (@vvedantb/ui/icons/animated), a client entry without @vvedantb/server, convex or Clerk for Chrome extensions, design-token CSS, shared Tailwind v4 CSS, a Tailwind preset and packaged Instrument Sans fonts.",
   "type": "module",

package/shell/src/SidebarRail.tsx

@@ -3,7 +3,9 @@ import { Slot, Slottable } from "@radix-ui/react-slot";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { IconLayoutSidebarLeftCollapse, IconLayoutSidebarLeftExpandFilled } from "@tabler/icons-react";
 import { cn } from "../../src/utils/cn";
-import { railTileClass, railTileStateClass } from "./app-shell-classes";
+import { APP_ICONS } from "../../src/brand/AppIcons";
+import type { ProductAppName } from "../../src/brand/AppWordmark";
+import { SIDEBAR_RAIL_APP_ICON_SIZE, railTileClass, railTileStateClass } from "./app-shell-classes";
 import { SidebarIconTooltip } from "./SidebarIconTooltip";
 
 export type SidebarRailProps = Omit<ComponentPropsWithoutRef<"div">, "children" | "className"> & {
@@ -111,7 +113,7 @@ export function RailFooter({ className, ...props }: SidebarRailFooterProps) {
   return <div {...props} className={cn("flex w-full flex-col items-center gap-1.5 py-3", className)} />;
 }
 
-export type SidebarRailItemProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & {
+type SidebarRailItemBaseProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & {
   /** `aria-label`, and the tooltip unless `tooltip` is set. */
   label: string;
   /** Active state. With `asChild`, also sets `aria-current="page"`. */
@@ -129,9 +131,27 @@ export type SidebarRailItemProps = Omit<ComponentPropsWithoutRef<"button">, "chi
    * The label is sr-only text instead of `aria-label`; `asChild` is ignored.
    */
   tabValue?: string;
-  children: ReactNode;
 };
 
+export type SidebarRailItemProps = SidebarRailItemBaseProps &
+  (
+    | {
+        /**
+         * Product app id for the home tile. The tile renders `APP_ICONS[app]` at
+         * `SIDEBAR_RAIL_APP_ICON_SIZE` (26px), so apps cannot drift. With `asChild` the
+         * icon goes inside the child element (for example `<Link to="/" />`). Without
+         * `asChild`, `children` are ignored.
+         */
+        app: ProductAppName;
+        children?: ReactNode;
+      }
+    | {
+        app?: undefined;
+        /** The tile icon. The caller controls its size. */
+        children: ReactNode;
+      }
+  );
+
 /** Rail tile with a right-side tooltip. Renders a native `<button>`, its child with `asChild`, or a tabs trigger with `tabValue`. */
 export function RailItem({
   label,
@@ -142,9 +162,13 @@ export function RailItem({
   asChild = false,
   tabValue,
   className,
+  app,
   children,
   ...props
 }: SidebarRailItemProps) {
+  const AppIcon = app ? APP_ICONS[app] : null;
+  const appIcon = AppIcon ? <AppIcon size={SIDEBAR_RAIL_APP_ICON_SIZE} /> : null;
+  const content = appIcon ?? children;
   return (
     <SidebarIconTooltip label={tooltip ?? label} enabled={showTooltip}>
       {tabValue !== undefined ? (
@@ -153,7 +177,7 @@ export function RailItem({
           value={tabValue}
           className={cn(railTileClass, "group relative", railTileStateClass(active), className)}
         >
-          {children}
+          {content}
           <span className="sr-only">{label}</span>
           {badge}
         </TabsPrimitive.Trigger>
@@ -164,6 +188,7 @@ export function RailItem({
           aria-current={active ? "page" : undefined}
           className={cn(railTileClass, "group", railTileStateClass(active), className)}
         >
+          {appIcon}
           <Slottable>{children}</Slottable>
           {badge}
         </Slot>
@@ -174,7 +199,7 @@ export function RailItem({
           aria-label={label}
           className={cn(railTileClass, "group", railTileStateClass(active), className)}
         >
-          {children}
+          {content}
           {badge}
         </button>
       )}

package/shell/src/app-shell-classes.ts

@@ -5,6 +5,9 @@ import { cn } from "../../src/utils/cn";
 // accent colour names match that markup and are allow-listed for check:tokens
 // on the marked lines only.
 
+/** App icon size in px for the home `RailTile`. Fixed across the apps. `RailTile` applies it when you pass `app`. */
+export const SIDEBAR_RAIL_APP_ICON_SIZE = 26;
+
 /** Rail tile: size-11, rounded-lg, press scale. */
 export const railTileClass =
   "relative flex size-11 items-center justify-center rounded-lg border active:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring";

package/shell/src/index.ts

@@ -46,6 +46,7 @@ export type { SignOutDialogProps } from "./SignOutDialog.js";
 export {
   railBadgeClass,
   railTileClass,
+  SIDEBAR_RAIL_APP_ICON_SIZE,
   railTileStateClass,
   sidebarNavIconClass,
   sidebarNavItemActionsClass,

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/client.ts

@@ -257,6 +257,7 @@ export type { SignOutDialogProps } from "../shell/src/SignOutDialog";
 export {
   railBadgeClass,
   railTileClass,
+  SIDEBAR_RAIL_APP_ICON_SIZE,
   railTileStateClass,
   sidebarNavIconClass,
   sidebarNavItemActionsClass,
@@ -313,6 +314,8 @@ export {
   landingPanelClass,
   landingShellClass,
 } from "./marketing/marketing-classes";
+export { SITE_HEADER_WORDMARK_SIZE, SiteHeader } from "./marketing/SiteHeader";
+export type { SiteHeaderLink, SiteHeaderProps } from "./marketing/SiteHeader";
 export type { PricingModalTone, SiteFooterVariant } from "./marketing/marketing-classes";
 export { PROJECT_V_LEGAL_LINKS, PROJECT_V_SOCIALS, SITE_FOOTER_WORDMARK_SIZE, SiteFooter } from "./marketing/SiteFooter";
 export type {

package/src/index.ts

@@ -257,6 +257,7 @@ export type { SignOutDialogProps } from "../shell/src/SignOutDialog";
 export {
   railBadgeClass,
   railTileClass,
+  SIDEBAR_RAIL_APP_ICON_SIZE,
   railTileStateClass,
   sidebarNavIconClass,
   sidebarNavItemActionsClass,
@@ -313,6 +314,8 @@ export {
   landingPanelClass,
   landingShellClass,
 } from "./marketing/marketing-classes";
+export { SITE_HEADER_WORDMARK_SIZE, SiteHeader } from "./marketing/SiteHeader";
+export type { SiteHeaderLink, SiteHeaderProps } from "./marketing/SiteHeader";
 export type { PricingModalTone, SiteFooterVariant } from "./marketing/marketing-classes";
 export { PROJECT_V_LEGAL_LINKS, PROJECT_V_SOCIALS, SITE_FOOTER_WORDMARK_SIZE, SiteFooter } from "./marketing/SiteFooter";
 export type {

package/src/marketing/SiteHeader.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { IconMenu2, IconX } from "@tabler/icons-react";
+import { AppWordmark, type ProductAppName } from "../brand/AppWordmark";
+import { GitHubIcon } from "../logos";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { cn } from "../utils/cn";
+import { landingClasses, landingShellClass } from "./marketing-classes";
+
+/** Wordmark text size in px. The icon is `Math.round(20 * 1.4)` = 28px. There is no size prop. */
+export const SITE_HEADER_WORDMARK_SIZE = 20;
+
+const MAX_LINKS = 4;
+
+export type SiteHeaderLink = { label: string; href: string };
+
+export type SiteHeaderProps = {
+  /** Product app id for `AppWordmark`. */
+  app: ProductAppName;
+  /** Home link `href`. Default `#home`. */
+  homeHref?: string;
+  /** `aria-label` of the home wordmark link. */
+  homeLabel: string;
+  /** Up to 4 section links, shown from `md`. More than 4 logs a development warning. */
+  links: readonly SiteHeaderLink[];
+  /**
+   * Exactly one call to action, for example the app's Clerk "Sign in" or "Open <App>" button, or "Get the app".
+   * Pass a `Button` with the default variant, `size="sm"` and `className="rounded-full"`. It shows in the bar from `md`
+   * and below `md` it sits full width in the menu.
+   */
+  cta: ReactNode;
+  /** Optional GitHub URL. An icon button from `sm`, and the last item in the mobile menu. */
+  githubUrl?: string;
+  className?: string;
+};
+
+const focusRing =
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+
+function SiteHeaderMenu({ links, cta, githubUrl }: Pick<SiteHeaderProps, "links" | "cta" | "githubUrl">) {
+  const [open, setOpen] = useState(false);
+  const Icon = open ? IconX : IconMenu2;
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon-sm" aria-label={open ? "Close menu" : "Open menu"} className="md:hidden">
+          <Icon size={20} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="max-h-[70dvh] w-[calc(100vw-2.5rem)] max-w-none overflow-y-auto sm:w-[calc(100vw-4rem)]"
+      >
+        {links.slice(0, MAX_LINKS).map((link) => (
+          <DropdownMenuItem key={link.href} asChild className="max-sm:py-2.5">
+            <a href={link.href}>{link.label}</a>
+          </DropdownMenuItem>
+        ))}
+        <div data-site-header-cta="" className="p-1 [&>*]:w-full">
+          {cta}
+        </div>
+        {githubUrl ? (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem asChild className="max-sm:py-2.5">
+              <a href={githubUrl} target="_blank" rel="noreferrer">
+                <GitHubIcon size={16} />
+                GitHub
+              </a>
+            </DropdownMenuItem>
+          </>
+        ) : null}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/**
+ * Marketing header for the Project V apps: sticky, blurred, `AppWordmark` at `SITE_HEADER_WORDMARK_SIZE`, up to four
+ * links, one `cta` and an optional GitHub button. Below `md` the links, the CTA and GitHub move into one dropdown menu.
+ * Plain markup with no motion, so any app can use it.
+ */
+export function SiteHeader({ app, homeHref = "#home", homeLabel, links, cta, githubUrl, className }: SiteHeaderProps) {
+  const tooMany = links.length > MAX_LINKS;
+  useEffect(() => {
+    if (!tooMany) return;
+    const nodeEnv = (globalThis as { process?: { env?: { NODE_ENV?: string } } }).process?.env?.NODE_ENV;
+    if (nodeEnv === "production") return;
+    console.warn(`[SiteHeader] SiteHeader supports at most ${MAX_LINKS} links. Received ${links.length}.`);
+  }, [tooMany, links.length]);
+
+  const shown = links.slice(0, MAX_LINKS);
+  return (
+    <header className={cn("sticky top-0 z-50 border-b border-separator bg-background/80 backdrop-blur-md", className)}>
+      <div className={cn(landingShellClass, "flex h-14 items-center justify-between gap-3 sm:h-16")}>
+        <a href={homeHref} className={cn("group min-w-0 shrink-0 rounded-lg", focusRing)} aria-label={homeLabel}>
+          <AppWordmark app={app} size={SITE_HEADER_WORDMARK_SIZE} />
+        </a>
+
+        <nav className="hidden items-center gap-1 md:flex" aria-label="Page">
+          {shown.map((link) => (
+            <a key={link.href} href={link.href} className={landingClasses.navLink}>
+              {link.label}
+            </a>
+          ))}
+        </nav>
+
+        <div className="flex items-center gap-1.5">
+          {githubUrl ? (
+            <Button asChild variant="ghost" size="icon-sm" className="hidden sm:inline-flex">
+              <a href={githubUrl} target="_blank" rel="noreferrer" aria-label={`${app} on GitHub`}>
+                <GitHubIcon size={18} />
+              </a>
+            </Button>
+          ) : null}
+          <div className="hidden md:flex">{cta}</div>
+          <SiteHeaderMenu links={shown} cta={cta} githubUrl={githubUrl} />
+        </div>
+      </div>
+    </header>
+  );
+}

package/src/marketing/createLandingKit.tsx

@@ -153,7 +153,7 @@ export function createLandingKit({ motion }: LandingKitOptions): LandingKit {
     );
   }
 
-  /** Sticky blurred header that rises in on mount. */
+  /** @deprecated Use `SiteHeader`. Sticky blurred header that rises in on mount. */
   function LandingNav({ brand, homeLabel, links, github, actions, menu }: LandingNavProps) {
     return (
       <motion.header