@vvedantb/ui 0.17.0 → 0.18.0

package/src/ai-elements/provider-icon.tsx

@@ -0,0 +1,133 @@
+import type { ComponentProps } from "react";
+import { useCn } from "../ui/ui-config";
+
+interface ProviderIconProps extends Omit<ComponentProps<"svg">, "children"> {
+  provider: string;
+  size?: number;
+}
+
+/**
+ * Renders the brand icon for an AI provider.
+ * Supports "claude" (Claude sparkle mark), "codex" (OpenAI mark), "opencode" (OpenCode mark), and "cursor" (Cursor mark).
+ */
+export function ProviderIcon({
+  provider,
+  size = 14,
+  className,
+  ...props
+}: ProviderIconProps) {
+  const shared = { size, className, ...props };
+  switch (provider) {
+    case "claude":
+      return <ClaudeMark {...shared} />;
+    case "codex":
+      return <OpenAIMark {...shared} />;
+    case "opencode":
+      return <OpencodeMark {...shared} />;
+    case "cursor":
+      return <CursorMark {...shared} />;
+    default:
+      return <ClaudeMark {...shared} />;
+  }
+}
+
+function ClaudeMark({
+  size = 14,
+  className,
+  ...props
+}: Omit<ProviderIconProps, "provider">) {
+  const merge = useCn();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="#D97757"
+      className={merge("shrink-0", className)}
+      aria-hidden="true"
+      {...props}
+    >
+      <path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z" />
+    </svg>
+  );
+}
+
+/** OpenAI mark — path from svgl `openai.svg` / `openai_dark.svg` (current B&W brand). */
+function OpenAIMark({
+  size = 14,
+  className,
+  ...props
+}: Omit<ProviderIconProps, "provider">) {
+  const merge = useCn();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 256 260"
+      className={merge("shrink-0 text-black dark:text-white", className)}
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z"
+      />
+    </svg>
+  );
+}
+
+function OpencodeMark({
+  size = 14,
+  className,
+  ...props
+}: Omit<ProviderIconProps, "provider">) {
+  const merge = useCn();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 512 512"
+      fill="none"
+      className={merge("shrink-0", className)}
+      aria-hidden="true"
+      {...props}
+    >
+      <rect width="512" height="512" fill="#FDFCFC" />
+      <path d="M320 224V352H192V224H320Z" fill="#E6E5E6" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M384 416H128V96H384V416ZM320 160H192V352H320V160Z"
+        fill="#17181C"
+      />
+    </svg>
+  );
+}
+
+/** Cursor glyph — path from svgl `cursor_light.svg` / `cursor_dark.svg`. */
+function CursorMark({
+  size = 14,
+  className,
+  ...props
+}: Omit<ProviderIconProps, "provider">) {
+  const merge = useCn();
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 466.73 532.09"
+      className={merge("shrink-0 text-[#26251E] dark:text-[#EDECEC]", className)}
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"
+      />
+    </svg>
+  );
+}

package/src/ai-elements/queue.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { useState, type ReactNode } from "react";
+import {
+  createContext,
+  useContext,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
 import { motion, AnimatePresence } from "motion/react";
 import { cn } from "../utils/cn";
 import {
@@ -9,10 +15,17 @@ import {
 } from "../ui/surface-classes";
 import { Button } from "../ui/button";
 import { Badge } from "../ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible";
 import { ScrollArea } from "../ui/scroll-area";
 import { Textarea } from "../ui/textarea";
+import { useCn, useUiConfig } from "../ui/ui-config";
 import {
   IconChevronDown,
+  IconChevronRight,
   IconEdit,
   IconTrash,
   IconCheck,
@@ -20,13 +33,65 @@ import {
   IconStack2,
 } from "@tabler/icons-react";
 
+// One Queue family, used in one of two ways:
+// - The queued-messages widget: `Queue` with `count`, `QueueHeader`,
+//   `QueueList` and `QueueItem` with `text`. It animates with `motion.*`.
+// - Composable parts (the AI Elements `Queue`): `Queue` without `count`, the
+//   `QueueSection*` parts, `QueueList`, `QueueItem` with children and the
+//   `QueueItem*` parts. Plain elements only, no `motion.*`, so it renders
+//   under a strict `LazyMotion`.
+// `QueueList` inside a composable `Queue` is the plain list; anywhere else it
+// is the widget's animated list.
+//
+// The widget keeps its own markup: its rows, actions and list have other
+// elements and classes than the parts, so building it on them would change
+// its DOM.
+
+/** `UiConfig.Queue`: `classes.sectionTrigger` replaces the section header's classes. */
+export interface QueueConfig {
+  classes?: {
+    sectionTrigger?: string;
+  };
+}
+
+/** True inside a composable `Queue` (one without `count`). */
+const QueuePartsContext = createContext(false);
+
+/** The queued-messages widget: animates in while `count > 0`. */
 export interface QueueProps {
   className?: string;
   children?: ReactNode;
   count: number;
 }
 
-export function Queue({ className, children, count }: QueueProps) {
+/** The composable root: a plain container for `QueueSection`s. */
+export type QueueDivProps = ComponentProps<"div"> & { count?: never };
+
+/**
+ * With `count`, the queued-messages widget. Without it, the root container
+ * of a collapsible queue of pending items.
+ */
+export function Queue(props: QueueProps | QueueDivProps) {
+  if (props.count === undefined) return <QueueRoot {...props} />;
+  return <QueueWidget {...props} />;
+}
+
+function QueueRoot({ className, count: _count, ...props }: QueueDivProps) {
+  const merge = useCn();
+  return (
+    <QueuePartsContext.Provider value>
+      <div
+        className={merge(
+          "flex flex-col rounded-xl border border-border bg-card/40 px-2.5 py-2",
+          className,
+        )}
+        {...props}
+      />
+    </QueuePartsContext.Provider>
+  );
+}
+
+function QueueWidget({ className, children, count }: QueueProps) {
   return (
     <AnimatePresence initial={false}>
       {count > 0 ? (
@@ -52,6 +117,7 @@ export interface QueueHeaderProps {
   className?: string;
 }
 
+/** The widget's header: a toggle with the message count. */
 export function QueueHeader({
   count,
   isOpen,
@@ -92,16 +158,41 @@ export function QueueHeader({
   );
 }
 
-export interface QueueListProps {
-  className?: string;
-  children?: ReactNode;
+export interface QueueListProps extends ComponentProps<"div"> {
+  /** Widget list only: animates the list in and out. Default `true`. */
   open?: boolean;
 }
 
-export function QueueList({
+/**
+ * Inside a composable `Queue`, a scrollable list capped at `max-h-48`.
+ * Anywhere else, the widget's animated list capped at 240px.
+ */
+export function QueueList({ open = true, ...props }: QueueListProps) {
+  const inParts = useContext(QueuePartsContext);
+  if (inParts) return <QueuePartsList {...props} />;
+  return <QueueWidgetList open={open} {...props} />;
+}
+
+function QueuePartsList({
+  children,
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  const merge = useCn();
+  return (
+    <div className={merge("mt-1", className)} {...props}>
+      <div className="max-h-48 overflow-y-auto">
+        <ul className="flex flex-col gap-1">{children}</ul>
+      </div>
+    </div>
+  );
+}
+
+function QueueWidgetList({
   className,
   children,
-  open = true,
+  open,
+  ...props
 }: QueueListProps) {
   return (
     <AnimatePresence initial={false}>
@@ -114,7 +205,10 @@ export function QueueList({
           transition={{ type: "spring", bounce: 0, duration: 0.35 }}
           className="overflow-hidden"
         >
-          <div className={cn(flatPanelSubtleClass, "rounded-b-2xl", className)}>
+          <div
+            className={cn(flatPanelSubtleClass, "rounded-b-2xl", className)}
+            {...props}
+          >
             <ScrollArea className="max-h-[240px]">
               <div className="p-2 space-y-1.5">{children}</div>
             </ScrollArea>
@@ -125,6 +219,7 @@ export function QueueList({
   );
 }
 
+/** A widget row: one queued message with edit and remove. */
 export interface QueueItemProps {
   text: string;
   model?: string;
@@ -136,7 +231,29 @@ export interface QueueItemProps {
   className?: string;
 }
 
-export function QueueItem({
+/** A composable row: an `li` for your own content and the `QueueItem*` parts. */
+export type QueueItemLiProps = ComponentProps<"li"> & { text?: never };
+
+/** With `text`, a widget row. Without it, a plain `li` row. */
+export function QueueItem(props: QueueItemProps | QueueItemLiProps) {
+  if (props.text === undefined) return <QueuePartsItem {...props} />;
+  return <QueueWidgetItem {...props} />;
+}
+
+function QueuePartsItem({ className, text: _text, ...props }: QueueItemLiProps) {
+  const merge = useCn();
+  return (
+    <li
+      className={merge(
+        "group flex flex-col gap-1 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-surface-secondary/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function QueueWidgetItem({
   text,
   model,
   personalityName,
@@ -249,3 +366,170 @@ export function QueueItem({
     </div>
   );
 }
+
+export type QueueSectionProps = ComponentProps<typeof Collapsible>;
+
+export const QueueSection = ({
+  className,
+  defaultOpen = true,
+  ...props
+}: QueueSectionProps) => {
+  const merge = useCn();
+  return <Collapsible className={merge(className)} defaultOpen={defaultOpen} {...props} />;
+};
+
+export type QueueSectionTriggerProps = ComponentProps<"button">;
+
+export const QueueSectionTrigger = ({
+  children,
+  className,
+  ...props
+}: QueueSectionTriggerProps) => {
+  const sectionTrigger = useUiConfig("Queue")?.classes?.sectionTrigger;
+  const merge = useCn();
+  return (
+    <CollapsibleTrigger asChild>
+      <button
+        className={merge(
+          sectionTrigger ??
+            "group flex w-full items-center rounded-md px-1 py-1 text-left text-xs font-medium text-muted-foreground transition-[color,scale] duration-150 ease-out hover:text-foreground active:scale-[0.99]",
+          className,
+        )}
+        type="button"
+        {...props}
+      >
+        {children}
+      </button>
+    </CollapsibleTrigger>
+  );
+};
+
+export type QueueSectionLabelProps = ComponentProps<"span"> & {
+  count?: number;
+  label: string;
+  icon?: ReactNode;
+};
+
+export const QueueSectionLabel = ({
+  count,
+  label,
+  icon,
+  className,
+  ...props
+}: QueueSectionLabelProps) => {
+  const merge = useCn();
+  return (
+    <span className={merge("flex items-center gap-1.5", className)} {...props}>
+      {icon}
+      <span>
+        {count} {label}
+      </span>
+      {/* After the text, pointing right, turning 90° when the section is open. */}
+      <IconChevronRight className="-ml-0.5 size-3.5 opacity-70 transition-transform group-data-[state=open]:rotate-90" />
+    </span>
+  );
+};
+
+export type QueueSectionContentProps = ComponentProps<
+  typeof CollapsibleContent
+>;
+
+export const QueueSectionContent = ({
+  className,
+  ...props
+}: QueueSectionContentProps) => {
+  const merge = useCn();
+  return <CollapsibleContent className={merge(className)} {...props} />;
+};
+
+export type QueueItemIndicatorProps = ComponentProps<"span"> & {
+  completed?: boolean;
+};
+
+export const QueueItemIndicator = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemIndicatorProps) => {
+  const merge = useCn();
+  return (
+    <span
+      className={merge(
+        "mt-1 inline-block size-2.5 shrink-0 rounded-full border",
+        completed
+          ? "border-muted-foreground/20 bg-muted-foreground/10"
+          : "border-muted-foreground/45",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export type QueueItemContentProps = ComponentProps<"span"> & {
+  completed?: boolean;
+};
+
+export const QueueItemContent = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemContentProps) => {
+  const merge = useCn();
+  return (
+    <span
+      className={merge(
+        "line-clamp-2 min-w-0 grow wrap-break-word leading-snug",
+        completed
+          ? "text-muted-foreground/50 line-through"
+          : "text-foreground/90",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export type QueueItemActionsProps = ComponentProps<"div">;
+
+export const QueueItemActions = ({
+  className,
+  ...props
+}: QueueItemActionsProps) => {
+  const merge = useCn();
+  return (
+    <div
+      className={merge(
+        // `reveal-on-hover`: hidden until row hover on pointer devices, always
+        // visible below `sm` where there is no hover.
+        "flex shrink-0 items-start gap-0.5 reveal-on-hover transition-opacity",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export type QueueItemActionProps = Omit<
+  ComponentProps<typeof Button>,
+  "variant" | "size"
+>;
+
+export const QueueItemAction = ({
+  className,
+  ...props
+}: QueueItemActionProps) => {
+  const merge = useCn();
+  return (
+    <Button
+      className={merge(
+        "size-auto rounded-md p-1 text-muted-foreground hover:bg-surface-secondary hover:text-foreground",
+        className,
+      )}
+      size="icon"
+      type="button"
+      variant="ghost"
+      {...props}
+    />
+  );
+};

package/src/ai-elements/shimmer.tsx

@@ -2,18 +2,54 @@
 import { type CSSProperties, type ElementType } from "react";
 import { motion } from "motion/react";
 import { cn } from "../utils/cn";
+import { useAnimOffscreenRef } from "../utils/runtimeVisibility";
+import { useCn, useUiConfig } from "../ui/ui-config";
 interface ShimmerCSSProperties extends CSSProperties {
   "--spread"?: string;
   "--bg"?: string;
 }
+/** Custom properties the `mask` sweep reads from the app's `.shimmer-*` CSS. */
+interface ShimmerMaskStyle extends CSSProperties {
+  "--shimmer-spread": string;
+  "--shimmer-duration": string;
+}
+/**
+ * `UiConfig.Shimmer`. `mode: "mask"` sweeps a masked copy of the text on the
+ * compositor (no repaint per frame, paused offscreen) instead of animating a
+ * `background-position`. The app defines the `overlay`, `band` and `copy`
+ * classes (default `shimmer-overlay`, `shimmer-band`, `shimmer-copy`).
+ */
+export interface ShimmerConfig {
+  mode?: "gradient" | "mask";
+  /** Default element. */
+  as?: ElementType;
+  classes?: {
+    /** Root element in `mask` mode. */
+    base?: string;
+    overlay?: string;
+    band?: string;
+    copy?: string;
+  };
+}
 interface ShimmerProps {
   children: string;
   as?: ElementType;
   className?: string;
   duration?: number;
   spread?: number;
+  /** `"mask"`: compositor sweep, see `ShimmerConfig`. Default `"gradient"`. */
+  mode?: "gradient" | "mask";
+}
+function Shimmer({ mode, as, ...props }: ShimmerProps) {
+  const config = useUiConfig("Shimmer");
+  const Component = as ?? config?.as ?? "span";
+  return (mode ?? config?.mode) === "mask" ? (
+    <MaskShimmer as={Component} {...props} />
+  ) : (
+    <GradientShimmer as={Component} {...props} />
+  );
 }
-function Shimmer({
+function GradientShimmer({
   children,
   as: Component = "span",
   className,
@@ -53,4 +89,39 @@ function Shimmer({
     </MotionComponent>
   );
 }
+/**
+ * The text renders once in the base colour; a copy in the highlight colour
+ * sits over it, masked to a soft band. The band translates one way while the
+ * copy inside it translates the other by the same amount, so only the mask
+ * moves: two transform animations, no repaint. The copy is `aria-hidden`.
+ */
+function MaskShimmer({
+  children,
+  as: Component = "span",
+  className,
+  duration = 2,
+  spread = 2,
+}: ShimmerProps) {
+  const classes = useUiConfig("Shimmer")?.classes;
+  const merge = useCn();
+  const setOffscreen = useAnimOffscreenRef<HTMLElement>();
+  const style: ShimmerMaskStyle = {
+    "--shimmer-spread": `${children.length * spread}px`,
+    "--shimmer-duration": `${duration}s`,
+  };
+  return (
+    <Component
+      ref={setOffscreen}
+      className={merge(classes?.base ?? "relative inline-block text-muted-foreground", className)}
+      style={style}
+    >
+      {children}
+      <span aria-hidden="true" data-anim-chrome="" className={classes?.overlay ?? "shimmer-overlay"}>
+        <span className={classes?.band ?? "shimmer-band"}>
+          <span className={classes?.copy ?? "shimmer-copy"}>{children}</span>
+        </span>
+      </span>
+    </Component>
+  );
+}
 export { Shimmer, type ShimmerProps };