myoperator-mcp 0.2.122 → 0.2.124

package/dist/index.js

@@ -139,7 +139,7 @@ export interface AccordionProps
   onValueChange?: (value: string[]) => void;
 }
 
-const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+const Accordion = React.forwardRef(
   (
     {
       className,
@@ -150,8 +150,8 @@ const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
       onValueChange,
       children,
       ...props
-    },
-    ref
+    }: AccordionProps,
+    ref: React.Ref<HTMLDivElement>
   ) => {
     const [internalValue, setInternalValue] =
       React.useState<string[]>(defaultValue);
@@ -207,8 +207,8 @@ export interface AccordionItemProps
   disabled?: boolean;
 }
 
-const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
-  ({ className, value, disabled, children, ...props }, ref) => {
+const AccordionItem = React.forwardRef(
+  ({ className, value, disabled, children, ...props }: AccordionItemProps, ref: React.Ref<HTMLDivElement>) => {
     const { value: openValues, variant } = useAccordionContext();
     const isOpen = openValues.includes(value);
 
@@ -248,10 +248,7 @@ export interface AccordionTriggerProps
   showChevron?: boolean;
 }
 
-const AccordionTrigger = React.forwardRef<
-  HTMLButtonElement,
-  AccordionTriggerProps
->(({ className, showChevron = true, children, ...props }, ref) => {
+const AccordionTrigger = React.forwardRef(({ className, showChevron = true, children, ...props }: AccordionTriggerProps, ref: React.Ref<HTMLButtonElement>) => {
   const {
     type,
     value: openValues,
@@ -310,10 +307,7 @@ export interface AccordionContentProps
     React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof accordionContentVariants> {}
 
-const AccordionContent = React.forwardRef<
-  HTMLDivElement,
-  AccordionContentProps
->(({ className, children, ...props }, ref) => {
+const AccordionContent = React.forwardRef(({ className, children, ...props }: AccordionContentProps, ref: React.Ref<HTMLDivElement>) => {
   const { variant } = useAccordionContext();
   const { isOpen } = useAccordionItemContext();
   const contentRef = React.useRef<HTMLDivElement>(null);
@@ -448,7 +442,7 @@ export interface AlertProps
   defaultOpen?: boolean;
 }
 
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+const Alert = React.forwardRef(
   (
     {
       className,
@@ -463,8 +457,8 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       defaultOpen = true,
       children,
       ...props
-    },
-    ref
+    }: AlertProps,
+    ref: React.Ref<HTMLDivElement>
   ) => {
     const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
     const isControlled = controlledOpen !== undefined;
@@ -536,10 +530,7 @@ Alert.displayName = "Alert";
 /**
  * Alert title component for the heading text.
  */
-const AlertTitle = React.forwardRef<
-  HTMLHeadingElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
+const AlertTitle = React.forwardRef(({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>, ref: React.Ref<HTMLHeadingElement>) => (
   <h5
     ref={ref}
     className={cn("font-semibold leading-tight tracking-tight", className)}
@@ -551,15 +542,154 @@ AlertTitle.displayName = "AlertTitle";
 /**
  * Alert description component for the body text.
  */
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
+const AlertDescription = React.forwardRef(({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>, ref: React.Ref<HTMLParagraphElement>) => (
   <p ref={ref} className={cn("m-0 mt-1 text-sm", className)} {...props} />
 ));
 AlertDescription.displayName = "AlertDescription";
 
 export { Alert, AlertTitle, AlertDescription, alertVariants };
+`,
+  "avatar": `import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Extracts initials from a name string.
+ * For two+ words, takes first letter of first and last word.
+ * For single words, takes first two characters.
+ *
+ * @example
+ * getInitials("Ankish Sachdeva") // "AS"
+ * getInitials("John") // "JO"
+ */
+function getInitials(name: string): string {
+  const parts = name.trim().split(/\\s+/);
+  return parts.length >= 2
+    ? (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+    : name.slice(0, 2).toUpperCase();
+}
+
+const avatarVariants = cva(
+  "relative inline-flex items-center justify-center rounded-full font-semibold select-none shrink-0 overflow-hidden",
+  {
+    variants: {
+      variant: {
+        soft: "bg-semantic-bg-grey text-semantic-text-muted",
+        filled: "bg-semantic-primary text-semantic-text-inverted",
+      },
+      size: {
+        xs: "size-6 text-[10px]",
+        sm: "size-8 text-xs",
+        md: "size-10 text-sm",
+        lg: "size-12 text-base",
+        xl: "size-16 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "soft",
+      size: "md",
+    },
+  }
+);
+
+const statusDotSizeMap = {
+  xs: "size-2 border",
+  sm: "size-2.5 border-[1.5px]",
+  md: "size-3 border-2",
+  lg: "size-3.5 border-2",
+  xl: "size-4 border-2",
+} as const;
+
+const statusColorMap = {
+  online: "bg-semantic-success-primary",
+  offline: "bg-semantic-bg-grey",
+  busy: "bg-semantic-error-primary",
+  away: "bg-semantic-warning-primary",
+} as const;
+
+export interface AvatarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof avatarVariants> {
+  /** Name used to auto-generate initials and aria-label */
+  name?: string;
+  /** Image URL \u2014 renders an <img> instead of initials */
+  src?: string;
+  /** Alt text for the image (defaults to name) */
+  alt?: string;
+  /** Override auto-generated initials (e.g., "AS") */
+  initials?: string;
+  /** Status indicator dot shown at bottom-right */
+  status?: "online" | "offline" | "busy" | "away";
+}
+
+/**
+ * Avatar component for displaying user identity via image or initials.
+ *
+ * @example
+ * \`\`\`tsx
+ * <Avatar name="Ankish Sachdeva" />
+ * <Avatar name="John Doe" size="lg" variant="filled" />
+ * <Avatar src="/photo.jpg" alt="Profile" status="online" />
+ * <Avatar initials="AS" size="xs" />
+ * \`\`\`
+ */
+const Avatar = React.forwardRef(
+  (
+    {
+      className,
+      variant,
+      size,
+      name,
+      src,
+      alt,
+      initials,
+      status,
+      children,
+      ...props
+    }: AvatarProps,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const resolvedSize = size ?? "md";
+    const displayInitials = initials ?? (name ? getInitials(name) : undefined);
+
+    return (
+      <div
+        ref={ref}
+        className={cn(avatarVariants({ variant, size, className }))}
+        aria-label={name}
+        role="img"
+        {...props}
+      >
+        {src ? (
+          <img
+            src={src}
+            alt={alt ?? name ?? "Avatar"}
+            className="size-full object-cover"
+          />
+        ) : children ? (
+          children
+        ) : displayInitials ? (
+          <span aria-hidden="true">{displayInitials}</span>
+        ) : null}
+
+        {status && (
+          <span
+            className={cn(
+              "absolute bottom-0 right-0 rounded-full border-background",
+              statusDotSizeMap[resolvedSize],
+              statusColorMap[status]
+            )}
+            data-status={status}
+          />
+        )}
+      </div>
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+export { Avatar, avatarVariants, getInitials };
 `,
   "badge": `import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
@@ -630,7 +760,7 @@ export interface BadgeProps
   asChild?: boolean;
 }
 
-const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
+const Badge = React.forwardRef(
   (
     {
       className,
@@ -641,8 +771,8 @@ const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
       asChild = false,
       children,
       ...props
-    },
-    ref
+    }: BadgeProps,
+    ref: React.Ref<HTMLDivElement>
   ) => {
     const Comp = asChild ? Slot : "div";
 
@@ -695,13 +825,15 @@ const buttonVariants = cva(
           "bg-semantic-primary text-semantic-text-inverted hover:bg-semantic-primary-hover",
         destructive:
           "bg-semantic-error-primary text-semantic-text-inverted hover:bg-semantic-error-hover",
+        success:
+          "bg-semantic-success-primary text-semantic-text-inverted hover:bg-semantic-success-hover",
         outline:
-          "border border-semantic-border-layout bg-semantic-bg-primary text-semantic-text-secondary hover:bg-semantic-primary-surface",
+          "border border-[var(--color-neutral-300,#D5D7DA)] bg-semantic-bg-primary text-semantic-text-secondary hover:bg-semantic-primary-surface",
         secondary:
           "bg-semantic-primary-surface text-semantic-text-secondary hover:bg-semantic-bg-hover",
         ghost:
           "text-semantic-text-muted hover:bg-semantic-bg-ui hover:text-semantic-text-primary",
-        link: "text-semantic-text-secondary underline-offset-4 hover:underline",
+        link: "text-semantic-text-link underline-offset-4 hover:underline",
         dashed:
           "border border-dashed border-semantic-bg-hover bg-transparent text-semantic-text-muted hover:border-semantic-border-primary hover:text-semantic-text-secondary hover:bg-[var(--color-neutral-50)]",
       },
@@ -747,7 +879,7 @@ export interface ButtonProps
   loadingText?: string;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = React.forwardRef(
   (
     {
       className,
@@ -761,8 +893,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       children,
       disabled,
       ...props
-    },
-    ref
+    }: ButtonProps,
+    ref: React.Ref<HTMLButtonElement>
   ) => {
     const Comp = asChild ? Slot : "button";
 
@@ -884,10 +1016,7 @@ export interface CheckboxProps
   separateLabel?: boolean;
 }
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxProps
->(
+const Checkbox = React.forwardRef(
   (
     {
       className,
@@ -900,8 +1029,8 @@ const Checkbox = React.forwardRef<
       id,
       disabled,
       ...props
-    },
-    ref
+    }: CheckboxProps,
+    ref: React.Ref<React.ElementRef<typeof CheckboxPrimitive.Root>>
   ) => {
     const checkbox = (
       <CheckboxPrimitive.Root
@@ -1075,10 +1204,7 @@ export interface ConfirmationModalProps {
  * />
  * \`\`\`
  */
-const ConfirmationModal = React.forwardRef<
-  HTMLDivElement,
-  ConfirmationModalProps
->(
+const ConfirmationModal = React.forwardRef(
   (
     {
       open,
@@ -1093,8 +1219,8 @@ const ConfirmationModal = React.forwardRef<
       cancelButtonText = "Cancel",
       trigger,
       className,
-    },
-    ref
+    }: ConfirmationModalProps,
+    ref: React.Ref<HTMLDivElement>
   ) => {
     const handleConfirm = () => {
       onConfirm?.();
@@ -1136,6 +1262,104 @@ const ConfirmationModal = React.forwardRef<
 ConfirmationModal.displayName = "ConfirmationModal";
 
 export { ConfirmationModal };
+`,
+  "contact-list-item": `import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+import { Avatar } from "./avatar";
+
+export interface ContactListItemProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
+  /** Contact name \u2014 displayed as primary text and used for Avatar initials */
+  name: string;
+  /** Secondary text below the name (e.g., phone number, email) */
+  subtitle?: string;
+  /** Content rendered at the right edge (e.g., channel badge, status text) */
+  trailing?: React.ReactNode;
+  /** Avatar image source \u2014 shows image instead of initials when provided */
+  avatarSrc?: string;
+  /** Whether this item is currently selected/active */
+  isSelected?: boolean;
+  /** Click handler */
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+/**
+ * ContactListItem displays a contact entry with avatar, name, optional subtitle,
+ * and trailing content \u2014 used in contact directories, user lists, and search results.
+ *
+ * @example
+ * \`\`\`tsx
+ * <ContactListItem
+ *   name="Aditi Kumar"
+ *   subtitle="+91 98765 43210"
+ *   trailing="MY01"
+ *   onClick={() => selectContact("1")}
+ * />
+ * \`\`\`
+ */
+const ContactListItem = React.forwardRef(
+  (
+    {
+      name,
+      subtitle,
+      trailing,
+      avatarSrc,
+      isSelected = false,
+      onClick,
+      className,
+      ...props
+    }: ContactListItemProps,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    return (
+      <div
+        ref={ref}
+        role="button"
+        tabIndex={0}
+        onClick={onClick}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);
+          }
+        }}
+        className={cn(
+          "flex items-center gap-3 px-3 py-3 cursor-pointer transition-colors",
+          isSelected
+            ? "bg-semantic-bg-ui"
+            : "hover:bg-semantic-bg-hover",
+          className
+        )}
+        {...props}
+      >
+        <Avatar name={name} src={avatarSrc} size="sm" />
+
+        <div className="flex-1 flex items-center justify-between min-w-0">
+          <div className="flex flex-col min-w-0">
+            <span className="text-sm font-medium text-semantic-text-primary leading-5 truncate">
+              {name}
+            </span>
+            {subtitle && (
+              <span className="text-xs text-semantic-text-muted">
+                {subtitle}
+              </span>
+            )}
+          </div>
+          {trailing && (
+            <span className="text-xs font-medium text-semantic-text-muted shrink-0 ml-2">
+              {trailing}
+            </span>
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+ContactListItem.displayName = "ContactListItem";
+
+export { ContactListItem };
 `,
   "creatable-multi-select": `import * as React from "react"
 import { cva } from "class-variance-authority"
@@ -1188,12 +1412,13 @@ export interface CreatableMultiSelectProps
   creatableHint?: string
   /** Helper text shown below the trigger */
   helperText?: string
+  /** Max number of items that can be selected (default: unlimited) */
+  maxItems?: number
+  /** Max character length per item when typing/creating (default: unlimited) */
+  maxLengthPerItem?: number
 }
 
-const CreatableMultiSelect = React.forwardRef<
-  HTMLDivElement,
-  CreatableMultiSelectProps
->(
+const CreatableMultiSelect = React.forwardRef(
   (
     {
       className,
@@ -1205,9 +1430,11 @@ const CreatableMultiSelect = React.forwardRef<
       state = "default",
       creatableHint = "Type to create a custom option",
       helperText,
+      maxItems,
+      maxLengthPerItem,
       ...props
-    },
-    ref
+    }: CreatableMultiSelectProps,
+    ref: React.Ref<HTMLDivElement>
   ) => {
     const [isOpen, setIsOpen] = React.useState(false)
     const [inputValue, setInputValue] = React.useState("")
@@ -1219,12 +1446,18 @@ const CreatableMultiSelect = React.forwardRef<
     const addValue = React.useCallback(
       (val: string) => {
         const trimmed = val.trim()
-        if (trimmed && !value.includes(trimmed)) {
-          onValueChange?.([...value, trimmed])
+        if (!trimmed || value.includes(trimmed)) return
+        if (maxItems != null && value.length >= maxItems) return
+        const toAdd =
+          maxLengthPerItem != null
+            ? trimmed.slice(0, maxLengthPerItem)
+            : trimmed
+        if (toAdd) {
+          onValueChange?.([...value, toAdd])
           setInputValue("")
         }
       },
-      [value, onValueChange]
+      [value, onValueChange, maxItems, maxLengthPerItem]
     )
 
     const removeValue = React.useCallback(
@@ -1328,9 +1561,13 @@ const CreatableMultiSelect = React.forwardRef<
             type="text"
             value={inputValue}
             onChange={(e) => {
-              setInputValue(e.target.value)
+              const v = e.target.value
+              setInputValue(
+                maxLengthPerItem != null ? v.slice(0, maxLengthPerItem) : v
+              )
               if (!isOpen) setIsOpen(true)
             }}
+            maxLength={maxLengthPerItem}
             onFocus={() => {
               if (!disabled) setIsOpen(true)
             }}
@@ -1354,18 +1591,14 @@ const CreatableMultiSelect = React.forwardRef<
         {/* Dropdown panel */}
         {isOpen && (
           <div className="absolute z-[9999] top-full mt-1 w-full bg-semantic-bg-primary border border-semantic-border-layout rounded shadow-md animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200">
-            {/* Creatable hint \u2014 contextual */}
+            {/* Creatable hint \u2014 Enter key */}
             <div className="flex items-center justify-between px-4 py-2 border-b border-semantic-border-layout">
-              {canAddCustom ? (
-                <span className="text-sm font-medium text-semantic-text-primary">
-                  Press enter to add &ldquo;{inputValue.trim()}&rdquo;
-                </span>
-              ) : (
-                <span className="text-sm text-semantic-text-muted">
-                  {creatableHint}
-                </span>
-              )}
-              <kbd className="inline-flex items-center gap-0.5 rounded border border-semantic-border-layout bg-semantic-bg-ui px-1.5 py-0.5 text-[10px] text-semantic-text-muted font-medium">
+              <span className="text-sm text-semantic-text-muted">
+                {canAddCustom
+                  ? \`Press enter to add "\${inputValue.trim()}"\`
+                  : creatableHint}
+              </span>
+              <kbd className="inline-flex items-center gap-0.5 rounded border border-semantic-border-layout bg-semantic-bg-ui px-1.5 py-0.5 text-[10px] text-semantic-text-muted font-medium shrink-0">
                 Enter \u21B5
               </kbd>
             </div>
@@ -1393,14 +1626,31 @@ const CreatableMultiSelect = React.forwardRef<
           </div>
         )}
 
-        {/* Helper text below trigger */}
-        {helperText && !isOpen && (
-          <div className="flex items-center gap-1.5 mt-1.5">
-            <Info className="size-[18px] shrink-0 text-semantic-text-muted" />
-            <p className="m-0 text-sm text-semantic-text-muted">
-              {helperText}
-            </p>
+        {/* Helper row below trigger: when maxLengthPerItem show dynamic hint + counter (Figma); else optional static helperText */}
+        {maxLengthPerItem != null ? (
+          <div className="flex items-center justify-between gap-2 mt-1.5">
+            <div className="flex items-center gap-1.5 text-xs text-semantic-text-muted min-w-0">
+              <Info className="size-3.5 shrink-0 text-semantic-text-muted" />
+              <p className="m-0 truncate">
+                {inputValue.trim()
+                  ? \`Press Enter to add "\${inputValue.trim()}" \u21B5\`
+                  : creatableHint}
+              </p>
+            </div>
+            <span className="text-sm text-semantic-text-muted shrink-0">
+              {inputValue.length}/{maxLengthPerItem}
+            </span>
           </div>
+        ) : (
+          helperText &&
+          !isOpen && (
+            <div className="flex items-center gap-1.5 mt-1.5">
+              <Info className="size-[18px] shrink-0 text-semantic-text-muted" />
+              <p className="m-0 text-sm text-semantic-text-muted">
+                {helperText}
+              </p>
+            </div>
+          )
         )}
       </div>
     )
@@ -1454,9 +1704,11 @@ export interface CreatableSelectProps
   creatableHint?: string
   /** Whether the select is disabled */
   disabled?: boolean
+  /** Max character length for the value (enforced when open and when creating) */
+  maxLength?: number
 }
 
-const CreatableSelect = React.forwardRef<HTMLDivElement, CreatableSelectProps>(
+const CreatableSelect = React.forwardRef(
   (
     {
       className,
@@ -1467,9 +1719,10 @@ const CreatableSelect = React.forwardRef<HTMLDivElement, CreatableSelectProps>(
       placeholder = "Select an option",
       creatableHint = "Type to create a custom option",
       disabled = false,
+      maxLength,
       ...props
-    },
-    ref
+    }: CreatableSelectProps,
+    ref: React.Ref<HTMLDivElement>
   ) => {
     const [open, setOpen] = React.useState(false)
     const [search, setSearch] = React.useState("")
@@ -1516,11 +1769,12 @@ const CreatableSelect = React.forwardRef<HTMLDivElement, CreatableSelectProps>(
     const handleCreate = React.useCallback(() => {
       const trimmed = search.trim()
       if (trimmed) {
-        onValueChange?.(trimmed)
+        const value = maxLength != null ? trimmed.slice(0, maxLength) : trimmed
+        onValueChange?.(value)
         setOpen(false)
         setSearch("")
       }
-    }, [search, onValueChange])
+    }, [search, onValueChange, maxLength])
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
       if (e.key === "Escape") {
@@ -1608,7 +1862,11 @@ const CreatableSelect = React.forwardRef<HTMLDivElement, CreatableSelectProps>(
               ref={inputRef}
               type="text"
               value={search}
-              onChange={(e) => setSearch(e.target.value)}
+              onChange={(e) => {
+                const v = e.target.value
+                setSearch(maxLength != null ? v.slice(0, maxLength) : v)
+              }}
+              maxLength={maxLength}
               onKeyDown={handleKeyDown}
               className="flex-1 min-w-0 bg-transparent outline-none text-base text-semantic-text-primary placeholder:text-semantic-text-muted"
               placeholder={selectedLabel || placeholder}
@@ -1720,6 +1978,45 @@ const CreatableSelect = React.forwardRef<HTMLDivElement, CreatableSelectProps>(
 CreatableSelect.displayName = "CreatableSelect"
 
 export { CreatableSelect, creatableSelectTriggerVariants }
+`,
+  "date-divider": `import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * DateDivider component for separating chat messages by date.
+ * Renders a horizontal line with centered date text.
+ *
+ * @example
+ * \`\`\`tsx
+ * <DateDivider>Today</DateDivider>
+ * <DateDivider>March 20, 2026</DateDivider>
+ * \`\`\`
+ */
+export interface DateDividerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** The date text to display. Can be a string like "Today", "March 20, 2026", etc. */
+  children: React.ReactNode;
+}
+
+const DateDivider = React.forwardRef(
+  ({ className, children, ...props }: DateDividerProps, ref: React.Ref<HTMLDivElement>) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center gap-4 my-4", className)}
+      {...props}
+    >
+      <div className="flex-1 h-px bg-semantic-border-layout" />
+      <span className="text-xs text-semantic-text-muted shrink-0">
+        {children}
+      </span>
+      <div className="flex-1 h-px bg-semantic-border-layout" />
+    </div>
+  )
+);
+DateDivider.displayName = "DateDivider";
+
+export { DateDivider };
 `,
   "delete-confirmation-modal": `import * as React from "react";
 
@@ -1789,10 +2086,7 @@ export interface DeleteConfirmationModalProps {
  * />
  * \`\`\`
  */
-const DeleteConfirmationModal = React.forwardRef<
-  HTMLDivElement,
-  DeleteConfirmationModalProps
->(
+const DeleteConfirmationModal = React.forwardRef(
   (
     {
       open,
@@ -1808,8 +2102,8 @@ const DeleteConfirmationModal = React.forwardRef<
       cancelButtonText = "Cancel",
       trigger,
       className,
-    },
-    ref
+    }: DeleteConfirmationModalProps,
+    ref: React.Ref<HTMLDivElement>
   ) => {
     const [inputValue, setInputValue] = React.useState("");
     const isConfirmEnabled = inputValue === confirmText;
@@ -1905,10 +2199,7 @@ const DialogPortal = DialogPrimitive.Portal;
 
 const DialogClose = DialogPrimitive.Close;
 
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+const DialogOverlay = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>, ref: React.Ref<React.ElementRef<typeof DialogPrimitive.Overlay>>) => (
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
@@ -1966,10 +2257,7 @@ const hasDialogDescription = (children: React.ReactNode): boolean => {
   return found;
 };
 
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  DialogContentProps
->(({ className, children, size, hideCloseButton = false, ...props }, ref) => {
+const DialogContent = React.forwardRef(({ className, children, size, hideCloseButton = false, ...props }: DialogContentProps, ref: React.Ref<React.ElementRef<typeof DialogPrimitive.Content>>) => {
   const hasDescription = hasDialogDescription(children);
 
   return (
@@ -2027,10 +2315,7 @@ const DialogFooter = ({
 );
 DialogFooter.displayName = "DialogFooter";
 
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
+const DialogTitle = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>, ref: React.Ref<React.ElementRef<typeof DialogPrimitive.Title>>) => (
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
@@ -2042,10 +2327,7 @@ const DialogTitle = React.forwardRef<
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
+const DialogDescription = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>, ref: React.Ref<React.ElementRef<typeof DialogPrimitive.Description>>) => (
   <DialogPrimitive.Description
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
@@ -2070,13 +2352,20 @@ export {
 `,
   "dropdown-menu": `import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
+import { Check, ChevronRight } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuTrigger = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Trigger>>) => (
+  <DropdownMenuPrimitive.Trigger
+    ref={ref}
+    className={cn("focus-visible:outline-none focus-visible:ring-0", className)}
+    {...props}
+  />
+));
+DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
 
 const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
@@ -2086,16 +2375,13 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
-const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean;
-  }
->(({ className, inset, children, ...props }, ref) => (
+  }, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>>) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-semantic-bg-ui data-[state=open]:bg-semantic-bg-ui",
+      "flex cursor-pointer select-none items-center rounded-sm px-2 py-2 text-sm text-semantic-text-secondary outline-none focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[state=open]:bg-semantic-bg-ui",
       inset && "pl-8",
       className
     )}
@@ -2108,10 +2394,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
 DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName;
 
-const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->(({ className, ...props }, ref) => (
+const DropdownMenuSubContent = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>>) => (
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
@@ -2124,10 +2407,7 @@ const DropdownMenuSubContent = React.forwardRef<
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName;
 
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Content>>) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
@@ -2143,76 +2423,110 @@ const DropdownMenuContent = React.forwardRef<
 ));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
-const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+const DropdownMenuItem = React.forwardRef(({ className, inset, children, description, suffix, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+    /** Secondary text displayed below children */
+    description?: string;
+    /** Content displayed at the right edge of the item */
+    suffix?: React.ReactNode;
+  }, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Item>>) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-2 text-sm text-semantic-text-secondary outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
     {...props}
-  />
+  >
+    {description ? (
+      <div className="flex flex-1 flex-col">
+        <span>{children}</span>
+        <span className="text-xs text-semantic-text-muted">{description}</span>
+      </div>
+    ) : (
+      children
+    )}
+    {suffix && (
+      <span className="ml-auto text-xs text-semantic-text-muted shrink-0 pl-2">{suffix}</span>
+    )}
+  </DropdownMenuPrimitive.Item>
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
-const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, description, suffix, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    /** Secondary text displayed below children */
+    description?: string;
+    /** Content displayed at the right edge of the item */
+    suffix?: React.ReactNode;
+  }, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>>) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm py-2 pl-8 pr-2 text-sm text-semantic-text-secondary outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-semantic-primary">
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
-    {children}
+    {description ? (
+      <div className="flex flex-1 flex-col">
+        <span>{children}</span>
+        <span className="text-xs text-semantic-text-muted">{description}</span>
+      </div>
+    ) : (
+      children
+    )}
+    {suffix && (
+      <span className="ml-auto text-xs text-semantic-text-muted shrink-0 pl-2">{suffix}</span>
+    )}
   </DropdownMenuPrimitive.CheckboxItem>
 ));
 DropdownMenuCheckboxItem.displayName =
   DropdownMenuPrimitive.CheckboxItem.displayName;
 
-const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
+const DropdownMenuRadioItem = React.forwardRef(({ className, children, description, suffix, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    /** Secondary text displayed below children */
+    description?: string;
+    /** Content displayed at the right edge of the item */
+    suffix?: React.ReactNode;
+  }, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>>) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm py-2 pl-8 pr-2 text-sm text-semantic-text-secondary outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center text-semantic-primary">
       <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
+        <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
-    {children}
+    {description ? (
+      <div className="flex flex-1 flex-col">
+        <span>{children}</span>
+        <span className="text-xs text-semantic-text-muted">{description}</span>
+      </div>
+    ) : (
+      children
+    )}
+    {suffix && (
+      <span className="ml-auto text-xs text-semantic-text-muted shrink-0 pl-2">{suffix}</span>
+    )}
   </DropdownMenuPrimitive.RadioItem>
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean;
-  }
->(({ className, inset, ...props }, ref) => (
+  }, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Label>>) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
@@ -2225,10 +2539,7 @@ const DropdownMenuLabel = React.forwardRef<
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>, ref: React.Ref<React.ElementRef<typeof DropdownMenuPrimitive.Separator>>) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-semantic-border-layout", className)}
@@ -2395,7 +2706,7 @@ export interface FormModalProps {
  * </FormModal>
  * \`\`\`
  */
-const FormModal = React.forwardRef<HTMLDivElement, FormModalProps>(
+const FormModal = React.forwardRef(
   (
     {
       open,
@@ -2411,8 +2722,8 @@ const FormModal = React.forwardRef<HTMLDivElement, FormModalProps>(
       disableSave = false,
       className,
       size = "sm",
-    },
-    ref
+    }: FormModalProps,
+    ref: React.Ref<HTMLDivElement>
   ) => {
     const handleSave = () => {
       onSave?.();
@@ -2461,6 +2772,51 @@ const FormModal = React.forwardRef<HTMLDivElement, FormModalProps>(
 FormModal.displayName = "FormModal";
 
 export { FormModal };
+`,
+  "image-media": `import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * ImageMedia component for displaying images in chat messages.
+ *
+ * @example
+ * \`\`\`tsx
+ * <ImageMedia src="https://example.com/photo.jpg" />
+ * <ImageMedia src="https://example.com/photo.jpg" alt="A sunset" />
+ * <ImageMedia src="https://example.com/photo.jpg" maxHeight={400} />
+ * <ImageMedia src="https://example.com/photo.jpg" maxHeight="50vh" />
+ * \`\`\`
+ */
+export interface ImageMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Image source URL */
+  src: string;
+  /** Alt text for the image */
+  alt?: string;
+  /** Maximum height of the image. Defaults to 280px */
+  maxHeight?: number | string;
+}
+
+const ImageMedia = React.forwardRef(
+  ({ className, src, alt = "Image", maxHeight = 280, ...props }: ImageMediaProps, ref: React.Ref<HTMLDivElement>) => {
+    const maxHeightStyle =
+      typeof maxHeight === "number" ? \`\${maxHeight}px\` : maxHeight;
+
+    return (
+      <div ref={ref} className={cn("relative", className)} {...props}>
+        <img
+          src={src}
+          alt={alt}
+          className="w-full rounded-t object-cover"
+          style={{ maxHeight: maxHeightStyle }}
+        />
+      </div>
+    );
+  }
+);
+ImageMedia.displayName = "ImageMedia";
+
+export { ImageMedia };
 `,
   "input": `import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -2477,9 +2833,9 @@ const inputVariants = cva(
     variants: {
       state: {
         default:
-          "border border-semantic-border-input hover:border-semantic-border-input-focus focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-semantic-error-primary/40 hover:border-semantic-error-primary focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
       },
     },
     defaultVariants: {
@@ -2506,8 +2862,8 @@ export interface InputProps
   showCheckIcon?: boolean;
 }
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, state, type, showCheckIcon, onFocus, onBlur, onWheel, ...props }, ref) => {
+const Input = React.forwardRef(
+  ({ className, state, type, showCheckIcon, onFocus, onBlur, onWheel, ...props }: InputProps, ref: React.Ref<HTMLInputElement>) => {
     const [isFocused, setIsFocused] = React.useState(false);
 
     const inputEl = (
@@ -2651,7 +3007,7 @@ export interface MultiSelectProps extends VariantProps<
  * />
  * \`\`\`
  */
-const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
+const MultiSelect = React.forwardRef(
   (
     {
       label,
@@ -2674,8 +3030,8 @@ const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(
       state,
       id,
       name,
-    },
-    ref
+    }: MultiSelectProps,
+    ref: React.Ref<HTMLButtonElement>
   ) => {
     // Internal state for selected values (uncontrolled mode)
     const [internalValue, setInternalValue] =
@@ -3070,7 +3426,7 @@ export interface PageHeaderProps
   mobileOverflowLimit?: number;
 }
 
-const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
+const PageHeader = React.forwardRef(
   (
     {
       className,
@@ -3086,8 +3442,8 @@ const PageHeader = React.forwardRef<HTMLDivElement, PageHeaderProps>(
       layout = "responsive",
       mobileOverflowLimit = 2,
       ...props
-    },
-    ref
+    }: PageHeaderProps,
+    ref: React.Ref<HTMLDivElement>
   ) => {
     // State for overflow expansion (moved to top level)
     const [isOverflowExpanded, setIsOverflowExpanded] = React.useState(false);
@@ -3593,44 +3949,285 @@ export {
   PaginationWidget,
 };
 `,
-  "readable-field": `import * as React from "react";
-import { Copy, Check, Eye, EyeOff } from "lucide-react";
+  "panel": `import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
 import { cn } from "@/lib/utils";
 
-export interface ReadableFieldProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
-  /** Label text displayed above the field */
-  label: string;
-  /** Value to display and copy */
-  value: string;
-  /** Helper text displayed below the field */
-  helperText?: string;
-  /** When true, masks the value with dots and shows eye toggle */
-  secret?: boolean;
-  /** Header action (e.g., "Regenerate" link) */
-  headerAction?: {
-    label: string;
-    onClick: () => void;
-    /** When true, button is shown but non-interactive */
-    disabled?: boolean;
-    /** Tooltip text shown on hover when disabled */
-    disabledTooltip?: string;
-  };
-  /** Callback when value is copied */
-  onValueCopy?: (value: string) => void;
-  /** Additional class for the input container */
-  inputClassName?: string;
+import { Button } from "./button";
+
+/**
+ * Panel root variants
+ */
+const panelVariants = cva(
+  "border-l border-semantic-border-layout bg-semantic-bg-primary flex flex-col overflow-hidden transition-all duration-300 ease-in-out shrink-0",
+  {
+    variants: {
+      size: {
+        sm: "",
+        default: "",
+        lg: "",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
+const panelWidths = {
+  sm: "w-[280px]",
+  default: "w-[320px]",
+  lg: "w-[400px]",
+} as const;
+
+export interface PanelProps
+  extends React.HTMLAttributes<HTMLElement>,
+    VariantProps<typeof panelVariants> {
+  /** Whether the panel is open */
+  open?: boolean;
+  /** Panel title displayed in the header */
+  title?: string;
+  /** Callback when close button is clicked */
+  onClose?: () => void;
+  /** Optional footer content (e.g., action buttons) */
+  footer?: React.ReactNode;
+  /** Custom header content \u2014 replaces the default title + close button */
+  header?: React.ReactNode;
 }
 
 /**
- * ReadableField displays a read-only value with copy-to-clipboard functionality.
- * Supports secret mode for sensitive data like API keys and passwords.
+ * Panel is a collapsible side panel layout with a header, scrollable body,
+ * and optional footer \u2014 used for detail views, settings, and edit forms.
  *
  * @example
  * \`\`\`tsx
- * // Simple readable field
- * <ReadableField
- *   label="Base URL"
+ * <Panel open={isOpen} title="Contact Details" onClose={() => setIsOpen(false)}>
+ *   <TextField label="Name" value="Aditi Kumar" disabled size="sm" />
+ *   <TextField label="Email" value="email@example.com" disabled size="sm" />
+ * </Panel>
+ * \`\`\`
+ */
+const Panel = React.forwardRef(
+  (
+    {
+      open = true,
+      title,
+      onClose,
+      footer,
+      header,
+      size,
+      className,
+      children,
+      "aria-label": ariaLabel,
+      onKeyDown,
+      ...props
+    }: PanelProps,
+    ref: React.Ref<HTMLElement>
+  ) => {
+    const resolvedSize = size ?? "default";
+    const widthClass = panelWidths[resolvedSize];
+    const innerRef = React.useRef<HTMLDivElement>(null);
+
+    // Focus the inner container when the panel opens
+    React.useEffect(() => {
+      if (open) {
+        innerRef.current?.focus();
+      }
+    }, [open]);
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+      if (e.key === "Escape" && onClose) {
+        onClose();
+      }
+      // Forward to user-provided onKeyDown if any
+      onKeyDown?.(e);
+    };
+
+    return (
+      <aside
+        ref={ref}
+        className={cn(
+          panelVariants({ size }),
+          open ? widthClass : "w-0 border-l-0",
+          className
+        )}
+        aria-label={ariaLabel ?? title}
+        aria-hidden={!open}
+        onKeyDown={handleKeyDown}
+        {...props}
+      >
+        <div
+          ref={innerRef}
+          tabIndex={-1}
+          className={cn(widthClass, "flex flex-col h-full outline-none")}
+        >
+          {/* Header */}
+          {header ?? (
+            <div className="flex items-center gap-3 px-4 h-14 border-b border-semantic-border-layout shrink-0">
+              {title && (
+                <span className="flex-1 text-base font-semibold text-semantic-text-primary truncate">
+                  {title}
+                </span>
+              )}
+              {onClose && (
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={onClose}
+                  aria-label="Close"
+                >
+                  <X className="size-5" />
+                </Button>
+              )}
+            </div>
+          )}
+
+          {/* Body */}
+          <div className="flex-1 overflow-y-auto">
+            {children}
+          </div>
+
+          {/* Footer */}
+          {footer && (
+            <div className="flex gap-3 px-4 py-3 shrink-0 border-t border-semantic-border-layout">
+              {footer}
+            </div>
+          )}
+        </div>
+      </aside>
+    );
+  }
+);
+Panel.displayName = "Panel";
+
+export { Panel, panelVariants };
+`,
+  "phone-input": `import * as React from "react";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * A phone number input with a country code prefix area.
+ *
+ * @example
+ * \`\`\`tsx
+ * <PhoneInput placeholder="Enter phone number" />
+ * <PhoneInput countryFlag="\u{1F1FA}\u{1F1F8}" countryCode="+1" />
+ * <PhoneInput onCountryClick={() => openCountryPicker()} />
+ * \`\`\`
+ */
+export interface PhoneInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+  /** Country flag emoji (e.g., "\u{1F1EE}\u{1F1F3}", "\u{1F1FA}\u{1F1F8}"). Defaults to "\u{1F1EE}\u{1F1F3}" */
+  countryFlag?: string;
+  /** Country dial code (e.g., "+91", "+1"). Defaults to "+91" */
+  countryCode?: string;
+  /** Whether to show the chevron dropdown indicator. Defaults to true */
+  showChevron?: boolean;
+  /** Handler called when the country code area is clicked */
+  onCountryClick?: () => void;
+  /** Additional className for the outer wrapper */
+  wrapperClassName?: string;
+}
+
+const PhoneInput = React.forwardRef(
+  (
+    {
+      className,
+      countryFlag = "\u{1F1EE}\u{1F1F3}",
+      countryCode = "+91",
+      showChevron = true,
+      onCountryClick,
+      wrapperClassName,
+      disabled,
+      ...props
+    }: PhoneInputProps,
+    ref: React.Ref<HTMLInputElement>
+  ) => {
+    return (
+      <div
+        className={cn(
+          "flex items-center border border-semantic-border-layout rounded-lg focus-within:border-semantic-border-focus transition-colors",
+          disabled && "opacity-60",
+          wrapperClassName
+        )}
+      >
+        <div
+          className={cn(
+            "flex items-center gap-1.5 pl-3 pr-2 h-10 shrink-0",
+            onCountryClick && "cursor-pointer"
+          )}
+          onClick={onCountryClick}
+          data-testid="phone-input-country"
+        >
+          <span className="text-sm">{countryFlag}</span>
+          <span className="text-sm text-semantic-text-secondary">
+            {countryCode}
+          </span>
+          {showChevron && (
+            <ChevronDown className="size-3 text-semantic-text-muted" />
+          )}
+        </div>
+        <div className="w-px h-5 bg-semantic-border-layout shrink-0" />
+        <input
+          type="tel"
+          ref={ref}
+          disabled={disabled}
+          className={cn(
+            "flex-1 h-10 px-3 text-sm text-semantic-text-primary placeholder:text-semantic-text-muted outline-none bg-transparent disabled:cursor-not-allowed",
+            className
+          )}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+PhoneInput.displayName = "PhoneInput";
+
+export { PhoneInput };
+`,
+  "readable-field": `import * as React from "react";
+import { Copy, Check, Eye, EyeOff } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface ReadableFieldProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /** Label text displayed above the field */
+  label: string;
+  /** Value to display and copy */
+  value: string;
+  /** Helper text displayed below the field */
+  helperText?: string;
+  /** When true, masks the value with dots and shows eye toggle */
+  secret?: boolean;
+  /** Header action (e.g., "Regenerate" link) */
+  headerAction?: {
+    label: string;
+    onClick: () => void;
+    /** When true, button is shown but non-interactive */
+    disabled?: boolean;
+    /** Tooltip text shown on hover when disabled */
+    disabledTooltip?: string;
+  };
+  /** Callback when value is copied */
+  onValueCopy?: (value: string) => void;
+  /** Additional class for the input container */
+  inputClassName?: string;
+}
+
+/**
+ * ReadableField displays a read-only value with copy-to-clipboard functionality.
+ * Supports secret mode for sensitive data like API keys and passwords.
+ *
+ * @example
+ * \`\`\`tsx
+ * // Simple readable field
+ * <ReadableField
+ *   label="Base URL"
  *   value="https://api.myoperator.co/v3/voice/gateway"
  * />
  *
@@ -3647,7 +4244,7 @@ export interface ReadableFieldProps
  * />
  * \`\`\`
  */
-export const ReadableField = React.forwardRef<HTMLDivElement, ReadableFieldProps>(
+export const ReadableField = React.forwardRef(
   (
     {
       label,
@@ -3659,8 +4256,8 @@ export const ReadableField = React.forwardRef<HTMLDivElement, ReadableFieldProps
       className,
       inputClassName,
       ...props
-    },
-    ref
+    }: ReadableFieldProps,
+    ref: React.Ref<HTMLDivElement>
   ) => {
     const [copied, setCopied] = React.useState(false);
     const [isVisible, setIsVisible] = React.useState(!secret);
@@ -3806,9 +4403,80 @@ export const ReadableField = React.forwardRef<HTMLDivElement, ReadableFieldProps
 );
 
 ReadableField.displayName = "ReadableField";
+`,
+  "reply-quote": `import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * ReplyQuote component for displaying a quoted message with a brand-accented left border.
+ * Used in chat applications for reply-to previews.
+ *
+ * When an \`onClick\` handler is provided, the component becomes interactive:
+ * it receives \`role="button"\`, \`tabIndex={0}\`, and keyboard support (Enter/Space).
+ * A focus ring is shown when focused via keyboard.
+ *
+ * @example
+ * \`\`\`tsx
+ * <ReplyQuote sender="John Doe" message="Hello, how are you?" />
+ * <ReplyQuote sender="Jane" message="Check this out!" onClick={() => scrollToMessage()} />
+ * \`\`\`
+ */
+export interface ReplyQuoteProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Name of the person being quoted */
+  sender: string;
+  /** The quoted message text */
+  message: string;
+}
+
+const ReplyQuote = React.forwardRef(
+  ({ className, sender, message, onClick, onKeyDown, role, tabIndex, "aria-label": ariaLabel, ...props }: ReplyQuoteProps, ref: React.Ref<HTMLDivElement>) => {
+    const isInteractive = !!onClick;
+
+    const handleKeyDown = React.useCallback(
+      (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (onClick && (e.key === "Enter" || e.key === " ")) {
+          if (e.key === " ") {
+            e.preventDefault();
+          }
+          onClick(e as unknown as React.MouseEvent<HTMLDivElement>);
+        }
+        onKeyDown?.(e);
+      },
+      [onClick, onKeyDown]
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "w-full bg-semantic-bg-ui border-l-[3px] border-semantic-border-accent rounded-sm px-4 py-1.5 mb-2 h-[56px] flex flex-col justify-center cursor-pointer hover:bg-semantic-bg-hover transition-colors",
+          isInteractive && "focus-visible:ring-2 focus-visible:ring-semantic-border-focus focus-visible:ring-offset-1 focus-visible:outline-none",
+          className
+        )}
+        role={role ?? (isInteractive ? "button" : undefined)}
+        tabIndex={tabIndex ?? (isInteractive ? 0 : undefined)}
+        onClick={onClick}
+        onKeyDown={isInteractive ? handleKeyDown : onKeyDown}
+        aria-label={ariaLabel ?? \`Quoted reply from \${sender}: \${message}\`}
+        {...props}
+      >
+        <p className="text-[14px] font-semibold text-semantic-text-primary truncate leading-5 tracking-[0.014px] m-0">
+          {sender}
+        </p>
+        <p className="text-[14px] text-semantic-text-muted truncate m-0">
+          {message}
+        </p>
+      </div>
+    );
+  }
+);
+ReplyQuote.displayName = "ReplyQuote";
+
+export { ReplyQuote };
 `,
   "select-field": `import * as React from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2, Search } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import {
@@ -3898,7 +4566,7 @@ export interface SelectFieldProps {
  * />
  * \`\`\`
  */
-const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
+const SelectField = React.forwardRef(
   (
     {
       label,
@@ -3921,8 +4589,8 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
       labelClassName,
       id,
       name,
-    },
-    ref
+    }: SelectFieldProps,
+    ref: React.Ref<HTMLButtonElement>
   ) => {
     // Internal state for search
     const [searchQuery, setSearchQuery] = React.useState("");
@@ -4019,7 +4687,7 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
           <label
             htmlFor={selectId}
             className={cn(
-              "text-xs font-normal text-semantic-text-muted",
+              "text-sm font-medium text-semantic-text-muted",
               labelClassName
             )}
           >
@@ -4055,13 +4723,14 @@ const SelectField = React.forwardRef<HTMLButtonElement, SelectFieldProps>(
           <SelectContent>
             {/* Search input */}
             {searchable && (
-              <div className="px-2 pb-2">
+              <div className="flex items-center gap-2 px-3 pb-1.5 border-b border-semantic-border-layout">
+                <Search className="size-4 text-semantic-text-muted shrink-0" />
                 <input
                   type="text"
                   placeholder={searchPlaceholder}
                   value={searchQuery}
                   onChange={handleSearchChange}
-                  className="w-full h-8 px-3 text-sm border border-semantic-border-input rounded bg-semantic-bg-primary placeholder:text-semantic-text-placeholder focus:outline-none focus:border-semantic-border-input-focus/50"
+                  className="w-full h-8 text-sm bg-transparent placeholder:text-semantic-text-muted focus:outline-none"
                   // Prevent closing dropdown when clicking input
                   onClick={(e) => e.stopPropagation()}
                   onKeyDown={(e) => e.stopPropagation()}
@@ -4169,10 +4838,7 @@ const Select = SelectPrimitive.Root;
 
 const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Value>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
->(({ className, ...props }, ref) => (
+const SelectValue = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Value>>) => (
   <SelectPrimitive.Value
     ref={ref}
     className={cn("[&[data-placeholder]]:text-semantic-text-muted", className)}
@@ -4186,10 +4852,7 @@ export interface SelectTriggerProps
     React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
     VariantProps<typeof selectTriggerVariants> {}
 
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  SelectTriggerProps
->(({ className, state, children, ...props }, ref) => (
+const SelectTrigger = React.forwardRef(({ className, state, children, ...props }: SelectTriggerProps, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Trigger>>) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(selectTriggerVariants({ state, className }))}
@@ -4203,10 +4866,7 @@ const SelectTrigger = React.forwardRef<
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.ScrollUpButton>>) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
@@ -4220,10 +4880,7 @@ const SelectScrollUpButton = React.forwardRef<
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.ScrollDownButton>>) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
@@ -4277,10 +4934,7 @@ function useUnlockBodyScroll() {
   }, []);
 }
 
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => {
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Content>>) => {
   useUnlockBodyScroll();
 
   return (
@@ -4318,10 +4972,7 @@ const SelectContent = React.forwardRef<
 });
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
+const SelectLabel = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Label>>) => (
   <SelectPrimitive.Label
     ref={ref}
     className={cn(
@@ -4333,10 +4984,7 @@ const SelectLabel = React.forwardRef<
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
->(({ className, children, ...props }, ref) => (
+const SelectItem = React.forwardRef(({ className, children, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Item>>) => (
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
@@ -4357,10 +5005,7 @@ const SelectItem = React.forwardRef<
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
+const SelectSeparator = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>, ref: React.Ref<React.ElementRef<typeof SelectPrimitive.Separator>>) => (
   <SelectPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-semantic-border-layout", className)}
@@ -4438,8 +5083,8 @@ export interface SkeletonProps
   height?: number | string;
 }
 
-const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
-  ({ className, variant, shape, width, height, style, ...props }, ref) => {
+const Skeleton = React.forwardRef(
+  ({ className, variant, shape, width, height, style, ...props }: SkeletonProps, ref: React.Ref<HTMLDivElement>) => {
     const dimensionStyle: React.CSSProperties = {
       ...style,
       ...(width !== undefined
@@ -4525,7 +5170,7 @@ export interface SpinnerProps
   "aria-label"?: string;
 }
 
-const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
+const Spinner = React.forwardRef(
   (
     {
       className,
@@ -4533,8 +5178,8 @@ const Spinner = React.forwardRef<HTMLDivElement, SpinnerProps>(
       variant,
       "aria-label": ariaLabel = "Loading",
       ...props
-    },
-    ref
+    }: SpinnerProps,
+    ref: React.Ref<HTMLDivElement>
   ) => {
     const strokeWidth = strokeWidths[size || "default"] ?? 3;
     const radius = 10;
@@ -4667,13 +5312,10 @@ export interface SwitchProps
   labelPosition?: "left" | "right";
 }
 
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  SwitchProps
->(
+const Switch = React.forwardRef(
   (
-    { className, size, label, labelPosition = "right", disabled, ...props },
-    ref
+    { className, size, label, labelPosition = "right", disabled, ...props }: SwitchProps,
+    ref: React.Ref<React.ElementRef<typeof SwitchPrimitives.Root>>
   ) => {
     const switchElement = (
       <SwitchPrimitives.Root
@@ -4727,6 +5369,52 @@ const Switch = React.forwardRef<
 Switch.displayName = "Switch";
 
 export { Switch, switchVariants };
+`,
+  "system-message": `import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * SystemMessage component for displaying centered, muted system/timeline
+ * events in a chat interface. Supports **bold** markdown-style formatting
+ * which renders as link-colored bold text.
+ *
+ * @example
+ * \`\`\`tsx
+ * <SystemMessage>Assigned to **Alex Smith** by **Admin**</SystemMessage>
+ * <SystemMessage>Chat was closed</SystemMessage>
+ * \`\`\`
+ */
+export interface SystemMessageProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** The message text. Supports **bold** markdown syntax which renders as link-colored bold text. */
+  children: string;
+}
+
+const SystemMessage = React.forwardRef(
+  ({ className, children, ...props }: SystemMessageProps, ref: React.Ref<HTMLDivElement>) => (
+    <div
+      ref={ref}
+      className={cn("flex justify-center my-1", className)}
+      {...props}
+    >
+      <span className="text-[13px] text-semantic-text-muted">
+        {children.split(/(\\*\\*[^*]+\\*\\*)/).map((part, i) =>
+          part.startsWith("**") ? (
+            <span key={i} className="text-semantic-text-link font-medium">
+              {part.slice(2, -2)}
+            </span>
+          ) : (
+            part
+          )
+        )}
+      </span>
+    </div>
+  )
+);
+SystemMessage.displayName = "SystemMessage";
+
+export { SystemMessage };
 `,
   "table": `import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -4782,8 +5470,8 @@ export interface TableProps
   wrapContent?: boolean;
 }
 
-const Table = React.forwardRef<HTMLTableElement, TableProps>(
-  ({ className, size, withoutBorder, wrapContent, ...props }, ref) => (
+const Table = React.forwardRef(
+  ({ className, size, withoutBorder, wrapContent, ...props }: TableProps, ref: React.Ref<HTMLTableElement>) => (
     <div
       className={cn(
         "relative w-full overflow-auto",
@@ -4804,10 +5492,7 @@ const Table = React.forwardRef<HTMLTableElement, TableProps>(
 );
 Table.displayName = "Table";
 
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+const TableHeader = React.forwardRef(({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>, ref: React.Ref<HTMLTableSectionElement>) => (
   <thead
     ref={ref}
     className={cn("bg-[var(--color-neutral-100)] [&_tr]:border-b", className)}
@@ -4826,8 +5511,8 @@ export interface TableBodyProps
   loadingColumns?: number;
 }
 
-const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
-  ({ className, isLoading, loadingRows = 5, loadingColumns = 5, children, ...props }, ref) => (
+const TableBody = React.forwardRef(
+  ({ className, isLoading, loadingRows = 5, loadingColumns = 5, children, ...props }: TableBodyProps, ref: React.Ref<HTMLTableSectionElement>) => (
     <tbody
       ref={ref}
       className={cn("[&_tr:last-child]:border-0", className)}
@@ -4843,10 +5528,7 @@ const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
 );
 TableBody.displayName = "TableBody";
 
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+const TableFooter = React.forwardRef(({ className, ...props }: React.HTMLAttributes<HTMLTableSectionElement>, ref: React.Ref<HTMLTableSectionElement>) => (
   <tfoot
     ref={ref}
     className={cn(
@@ -4863,8 +5545,8 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
   highlighted?: boolean;
 }
 
-const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(
-  ({ className, highlighted, ...props }, ref) => (
+const TableRow = React.forwardRef(
+  ({ className, highlighted, ...props }: TableRowProps, ref: React.Ref<HTMLTableRowElement>) => (
     <tr
       ref={ref}
       className={cn(
@@ -4889,10 +5571,10 @@ export interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElem
   infoTooltip?: string;
 }
 
-const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
+const TableHead = React.forwardRef(
   (
-    { className, sticky, sortDirection, infoTooltip, children, ...props },
-    ref
+    { className, sticky, sortDirection, infoTooltip, children, ...props }: TableHeadProps,
+    ref: React.Ref<HTMLTableCellElement>
   ) => (
     <th
       ref={ref}
@@ -4930,8 +5612,8 @@ export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElem
   sticky?: boolean;
 }
 
-const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
-  ({ className, sticky, ...props }, ref) => (
+const TableCell = React.forwardRef(
+  ({ className, sticky, ...props }: TableCellProps, ref: React.Ref<HTMLTableCellElement>) => (
     <td
       ref={ref}
       className={cn(
@@ -4945,10 +5627,7 @@ const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
 );
 TableCell.displayName = "TableCell";
 
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
+const TableCaption = React.forwardRef(({ className, ...props }: React.HTMLAttributes<HTMLTableCaptionElement>, ref: React.Ref<HTMLTableCaptionElement>) => (
   <caption
     ref={ref}
     className={cn("mt-4 text-sm text-semantic-text-muted", className)}
@@ -5037,8 +5716,8 @@ export interface TableToggleProps extends Omit<SwitchProps, "size"> {
   size?: "sm" | "default";
 }
 
-const TableToggle = React.forwardRef<HTMLButtonElement, TableToggleProps>(
-  ({ size = "sm", ...props }, ref) => (
+const TableToggle = React.forwardRef(
+  ({ size = "sm", ...props }: TableToggleProps, ref: React.Ref<HTMLButtonElement>) => (
     <Switch ref={ref} size={size} {...props} />
   )
 );
@@ -5059,6 +5738,76 @@ export {
   TableToggle,
   tableVariants,
 };
+`,
+  "tabs": `import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+/**
+ * A flexible tabs component with underline-style active indicator.
+ *
+ * @example
+ * \`\`\`tsx
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ * \`\`\`
+ */
+const Tabs = TabsPrimitive.Root
+
+export interface TabsListProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+  /** When true, tabs stretch to fill the full width equally */
+  fullWidth?: boolean
+}
+
+const TabsList = React.forwardRef(({ className, fullWidth, ...props }: TabsListProps, ref: React.Ref<React.ComponentRef<typeof TabsPrimitive.List>>) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex items-center border-b border-semantic-border-layout w-full",
+      fullWidth && "[&>*]:flex-1",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, ref: React.Ref<React.ComponentRef<typeof TabsPrimitive.Trigger>>) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center gap-2 whitespace-nowrap py-3 px-3 text-sm font-medium border-b-2 -mb-px cursor-pointer transition-colors",
+      "text-semantic-text-muted border-transparent hover:text-semantic-text-secondary",
+      "data-[state=active]:text-semantic-text-primary data-[state=active]:border-semantic-primary",
+      "focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, ref: React.Ref<React.ComponentRef<typeof TabsPrimitive.Content>>) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 focus-visible:outline-none",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
 `,
   "tag": `import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
@@ -5110,8 +5859,8 @@ export interface TagProps
   label?: string;
 }
 
-const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
-  ({ className, variant, size, label, children, ...props }, ref) => {
+const Tag = React.forwardRef(
+  ({ className, variant, size, label, children, ...props }: TagProps, ref: React.Ref<HTMLSpanElement>) => {
     return (
       <span
         className={cn(tagVariants({ variant, size, className }))}
@@ -5198,7 +5947,7 @@ export { Tag, TagGroup, tagVariants };
 `,
   "text-field": `import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Loader2 } from "lucide-react";
+import { Loader2, X } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -5211,9 +5960,9 @@ const textFieldContainerVariants = cva(
     variants: {
       state: {
         default:
-          "border border-semantic-border-input focus-within:border-semantic-border-input-focus/50 focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          "border border-semantic-border-input focus-within:border-semantic-border-input-focus focus-within:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-semantic-error-primary/40 focus-within:border-semantic-error-primary/60 focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-semantic-error-primary/40 focus-within:border-semantic-error-primary focus-within:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
       },
       disabled: {
         true: "cursor-not-allowed opacity-50 bg-[var(--color-neutral-50)]",
@@ -5231,18 +5980,23 @@ const textFieldContainerVariants = cva(
  * TextField input variants (standalone without container)
  */
 const textFieldInputVariants = cva(
-  "h-[42px] w-full rounded bg-semantic-bg-primary px-4 py-2 text-base text-semantic-text-primary outline-none transition-all file:border-0 file:bg-transparent file:text-base file:font-medium file:text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
+  "w-full rounded bg-semantic-bg-primary text-semantic-text-primary outline-none transition-all file:border-0 file:bg-transparent file:font-medium file:text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
   {
     variants: {
       state: {
         default:
-          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus/50 focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
         error:
-          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary/60 focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+      },
+      size: {
+        default: "h-[42px] px-4 py-2 text-base file:text-base",
+        sm: "h-9 px-3 py-1.5 text-sm file:text-sm",
       },
     },
     defaultVariants: {
       state: "default",
+      size: "default",
     },
   }
 );
@@ -5261,6 +6015,8 @@ export interface TextFieldProps
   extends
     Omit<React.ComponentProps<"input">, "size">,
     VariantProps<typeof textFieldInputVariants> {
+  /** Size of the text field \u2014 \`default\` (42px) or \`sm\` (36px, compact) */
+  size?: "default" | "sm";
   /** Label text displayed above the input */
   label?: string;
   /** Shows red asterisk next to label when true */
@@ -5281,6 +6037,10 @@ export interface TextFieldProps
   showCount?: boolean;
   /** Shows loading spinner inside input */
   loading?: boolean;
+  /** Shows a clear (X) button when input has a value */
+  clearable?: boolean;
+  /** Callback fired when the clear button is clicked */
+  onClear?: () => void;
   /** Additional class for the wrapper container */
   wrapperClassName?: string;
   /** Additional class for the label */
@@ -5289,35 +6049,329 @@ export interface TextFieldProps
   inputContainerClassName?: string;
 }
 
-const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
+const TextField = React.forwardRef(
+  (
+    {
+      className,
+      wrapperClassName,
+      labelClassName,
+      inputContainerClassName,
+      state,
+      size,
+      label,
+      required,
+      helperText,
+      error,
+      leftIcon,
+      rightIcon,
+      prefix,
+      suffix,
+      showCount,
+      loading,
+      clearable,
+      onClear,
+      maxLength,
+      value,
+      defaultValue,
+      onChange,
+      onWheel,
+      disabled,
+      id,
+      type,
+      ...props
+    }: TextFieldProps,
+    ref: React.ForwardedRef<HTMLInputElement>
+  ) => {
+    // Internal ref for programmatic control (e.g., clearable)
+    const internalRef = React.useRef<HTMLInputElement | null>(null);
+    const mergedRef = React.useCallback(
+      (node: HTMLInputElement | null) => {
+        internalRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref && typeof ref === "object") ref.current = node;
+      },
+      [ref]
+    );
+
+    // Internal state for character count in uncontrolled mode
+    const [internalValue, setInternalValue] = React.useState(
+      defaultValue ?? ""
+    );
+
+    // Determine if controlled
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+
+    // Derive state from props
+    const derivedState = error ? "error" : (state ?? "default");
+
+    // Handle change for both controlled and uncontrolled
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value);
+      }
+      onChange?.(e);
+    };
+
+    // Determine if we need the container wrapper (for icons/prefix/suffix)
+    const hasAddons = leftIcon || rightIcon || prefix || suffix || loading || clearable;
+
+    // Handle clear
+    const handleClear = () => {
+      if (!isControlled) {
+        setInternalValue("");
+        if (internalRef.current) {
+          internalRef.current.value = "";
+        }
+      }
+      onClear?.();
+    };
+
+    const showClearButton = clearable && String(currentValue).length > 0 && !disabled && !loading;
+
+    // Character count
+    const charCount = String(currentValue).length;
+
+    // Generate unique IDs for accessibility
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+    const helperId = \`\${inputId}-helper\`;
+    const errorId = \`\${inputId}-error\`;
+
+    // Determine aria-describedby
+    const ariaDescribedBy = error ? errorId : helperText ? helperId : undefined;
+
+    // Render the input element
+    const inputElement = (
+      <input
+        ref={mergedRef}
+        id={inputId}
+        type={type}
+        className={cn(
+          hasAddons
+            ? cn(
+                "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-0 h-full text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed",
+                size === "sm" ? "text-sm" : "text-base"
+              )
+            : textFieldInputVariants({ state: derivedState, size, className }),
+          type === "number" &&
+            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+        )}
+        disabled={disabled || loading}
+        maxLength={maxLength}
+        value={isControlled ? value : undefined}
+        defaultValue={!isControlled ? defaultValue : undefined}
+        onChange={handleChange}
+        onWheel={
+          type === "number"
+            ? (e) => {
+                e.currentTarget.blur();
+                onWheel?.(e);
+              }
+            : onWheel
+        }
+        aria-invalid={!!error}
+        aria-describedby={ariaDescribedBy}
+        {...props}
+      />
+    );
+
+    return (
+      <div className={cn("flex flex-col gap-1", wrapperClassName)}>
+        {/* Label */}
+        {label && (
+          <label
+            htmlFor={inputId}
+            className={cn(
+              "text-sm font-medium text-semantic-text-muted",
+              labelClassName
+            )}
+          >
+            {label}
+            {required && (
+              <span className="text-semantic-error-primary ml-0.5">*</span>
+            )}
+          </label>
+        )}
+
+        {/* Input or Input Container */}
+        {hasAddons ? (
+          <div
+            className={cn(
+              textFieldContainerVariants({
+                state: derivedState,
+                disabled: disabled || loading,
+              }),
+              size === "sm" ? "h-9 px-3" : "h-[42px] px-4",
+              inputContainerClassName
+            )}
+          >
+            {prefix && (
+              <span className="text-sm text-semantic-text-muted mr-2 select-none">
+                {prefix}
+              </span>
+            )}
+            {leftIcon && (
+              <span className="mr-2 text-semantic-text-muted [&_svg]:size-4 flex-shrink-0">
+                {leftIcon}
+              </span>
+            )}
+            {inputElement}
+            {loading && (
+              <Loader2 className="animate-spin size-4 text-semantic-text-muted ml-2 flex-shrink-0" />
+            )}
+            {!loading && rightIcon && (
+              <span className="ml-2 text-semantic-text-muted [&_svg]:size-4 flex-shrink-0">
+                {rightIcon}
+              </span>
+            )}
+            {showClearButton && (
+              <button
+                type="button"
+                onClick={handleClear}
+                className="ml-2 text-semantic-text-muted hover:text-semantic-text-primary flex-shrink-0 cursor-pointer"
+                aria-label="Clear input"
+                tabIndex={-1}
+              >
+                <X className="size-4" />
+              </button>
+            )}
+            {suffix && (
+              <span className="text-sm text-semantic-text-muted ml-2 select-none">
+                {suffix}
+              </span>
+            )}
+          </div>
+        ) : (
+          inputElement
+        )}
+
+        {/* Helper text / Error message / Character count */}
+        {(error || helperText || (showCount && maxLength)) && (
+          <div className="flex justify-between items-start gap-2">
+            {error ? (
+              <span
+                id={errorId}
+                className="text-sm text-semantic-error-primary"
+              >
+                {error}
+              </span>
+            ) : helperText ? (
+              <span id={helperId} className="text-sm text-semantic-text-muted">
+                {helperText}
+              </span>
+            ) : (
+              <span />
+            )}
+            {showCount && maxLength && (
+              <span
+                className={cn(
+                  "text-sm",
+                  charCount > maxLength
+                    ? "text-semantic-error-primary"
+                    : "text-semantic-text-muted"
+                )}
+              >
+                {charCount}/{maxLength}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+TextField.displayName = "TextField";
+
+export { TextField, textFieldContainerVariants, textFieldInputVariants };
+`,
+  "textarea": `import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Textarea variants for different visual states
+ */
+const textareaVariants = cva(
+  "w-full rounded bg-semantic-bg-primary text-semantic-text-primary outline-none transition-all placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-[var(--color-neutral-50)]",
+  {
+    variants: {
+      state: {
+        default:
+          "border border-semantic-border-input focus:outline-none focus:border-semantic-border-input-focus focus:shadow-[0_0_0_1px_rgba(43,188,202,0.15)]",
+        error:
+          "border border-semantic-error-primary/40 focus:outline-none focus:border-semantic-error-primary focus:shadow-[0_0_0_1px_rgba(240,68,56,0.1)]",
+      },
+      size: {
+        default: "px-4 py-2.5 text-base",
+        sm: "px-3 py-2 text-sm",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+      size: "default",
+    },
+  }
+);
+
+/**
+ * A multi-line text input with label, error state, helper text, character counter, and resize control.
+ *
+ * @example
+ * \`\`\`tsx
+ * <Textarea label="Description" placeholder="Enter description" />
+ * <Textarea label="Notes" error="Too short" showCount maxLength={500} />
+ * <Textarea label="JSON" rows={8} resize="vertical" />
+ * \`\`\`
+ */
+export interface TextareaProps
+  extends Omit<React.ComponentProps<"textarea">, "size">,
+    VariantProps<typeof textareaVariants> {
+  /** Size of the textarea \u2014 \`default\` or \`sm\` (compact) */
+  size?: "default" | "sm";
+  /** Label text displayed above the textarea */
+  label?: string;
+  /** Shows red asterisk next to label when true */
+  required?: boolean;
+  /** Helper text displayed below the textarea */
+  helperText?: string;
+  /** Error message \u2014 shows error state with red styling */
+  error?: string;
+  /** Shows character count when maxLength is set */
+  showCount?: boolean;
+  /** Controls CSS resize behavior. Defaults to "none" */
+  resize?: "none" | "vertical" | "horizontal" | "both";
+  /** Additional class for the wrapper container */
+  wrapperClassName?: string;
+  /** Additional class for the label */
+  labelClassName?: string;
+}
+
+const Textarea = React.forwardRef(
   (
     {
       className,
       wrapperClassName,
       labelClassName,
-      inputContainerClassName,
       state,
+      size,
       label,
       required,
       helperText,
       error,
-      leftIcon,
-      rightIcon,
-      prefix,
-      suffix,
       showCount,
-      loading,
+      resize = "none",
       maxLength,
+      rows = 4,
       value,
       defaultValue,
       onChange,
-      onWheel,
       disabled,
       id,
-      type,
       ...props
-    },
-    ref
+    }: TextareaProps,
+    ref: React.ForwardedRef<HTMLTextAreaElement>
   ) => {
     // Internal state for character count in uncontrolled mode
     const [internalValue, setInternalValue] = React.useState(
@@ -5332,68 +6386,41 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
     const derivedState = error ? "error" : (state ?? "default");
 
     // Handle change for both controlled and uncontrolled
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
       if (!isControlled) {
         setInternalValue(e.target.value);
       }
       onChange?.(e);
     };
 
-    // Determine if we need the container wrapper (for icons/prefix/suffix)
-    const hasAddons = leftIcon || rightIcon || prefix || suffix || loading;
-
     // Character count
     const charCount = String(currentValue).length;
 
     // Generate unique IDs for accessibility
     const generatedId = React.useId();
-    const inputId = id || generatedId;
-    const helperId = \`\${inputId}-helper\`;
-    const errorId = \`\${inputId}-error\`;
+    const textareaId = id || generatedId;
+    const helperId = \`\${textareaId}-helper\`;
+    const errorId = \`\${textareaId}-error\`;
 
     // Determine aria-describedby
     const ariaDescribedBy = error ? errorId : helperText ? helperId : undefined;
 
-    // Render the input element
-    const inputElement = (
-      <input
-        ref={ref}
-        id={inputId}
-        type={type}
-        className={cn(
-          hasAddons
-            ? "flex-1 bg-transparent border-0 outline-none focus:ring-0 px-0 h-full text-base text-semantic-text-primary placeholder:text-semantic-text-placeholder disabled:cursor-not-allowed"
-            : textFieldInputVariants({ state: derivedState, className }),
-          type === "number" &&
-            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-        )}
-        disabled={disabled || loading}
-        maxLength={maxLength}
-        value={isControlled ? value : undefined}
-        defaultValue={!isControlled ? defaultValue : undefined}
-        onChange={handleChange}
-        onWheel={
-          type === "number"
-            ? (e) => {
-                e.currentTarget.blur();
-                onWheel?.(e);
-              }
-            : onWheel
-        }
-        aria-invalid={!!error}
-        aria-describedby={ariaDescribedBy}
-        {...props}
-      />
-    );
+    // Resize class map
+    const resizeClasses: Record<string, string> = {
+      none: "resize-none",
+      vertical: "resize-y",
+      horizontal: "resize-x",
+      both: "resize",
+    };
 
     return (
       <div className={cn("flex flex-col gap-1", wrapperClassName)}>
         {/* Label */}
         {label && (
           <label
-            htmlFor={inputId}
+            htmlFor={textareaId}
             className={cn(
-              "text-xs font-normal text-semantic-text-muted",
+              "text-sm font-medium text-semantic-text-muted",
               labelClassName
             )}
           >
@@ -5404,46 +6431,24 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
           </label>
         )}
 
-        {/* Input or Input Container */}
-        {hasAddons ? (
-          <div
-            className={cn(
-              textFieldContainerVariants({
-                state: derivedState,
-                disabled: disabled || loading,
-              }),
-              "h-[42px] px-4",
-              inputContainerClassName
-            )}
-          >
-            {prefix && (
-              <span className="text-sm text-semantic-text-muted mr-2 select-none">
-                {prefix}
-              </span>
-            )}
-            {leftIcon && (
-              <span className="mr-2 text-semantic-text-muted [&_svg]:size-4 flex-shrink-0">
-                {leftIcon}
-              </span>
-            )}
-            {inputElement}
-            {loading && (
-              <Loader2 className="animate-spin size-4 text-semantic-text-muted ml-2 flex-shrink-0" />
-            )}
-            {!loading && rightIcon && (
-              <span className="ml-2 text-semantic-text-muted [&_svg]:size-4 flex-shrink-0">
-                {rightIcon}
-              </span>
-            )}
-            {suffix && (
-              <span className="text-sm text-semantic-text-muted ml-2 select-none">
-                {suffix}
-              </span>
-            )}
-          </div>
-        ) : (
-          inputElement
-        )}
+        {/* Textarea */}
+        <textarea
+          ref={ref}
+          id={textareaId}
+          rows={rows}
+          className={cn(
+            textareaVariants({ state: derivedState, size, className }),
+            resizeClasses[resize]
+          )}
+          disabled={disabled}
+          maxLength={maxLength}
+          value={isControlled ? value : undefined}
+          defaultValue={!isControlled ? defaultValue : undefined}
+          onChange={handleChange}
+          aria-invalid={!!error}
+          aria-describedby={ariaDescribedBy}
+          {...props}
+        />
 
         {/* Helper text / Error message / Character count */}
         {(error || helperText || (showCount && maxLength)) && (
@@ -5451,12 +6456,12 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             {error ? (
               <span
                 id={errorId}
-                className="text-xs text-semantic-error-primary"
+                className="text-sm text-semantic-error-primary"
               >
                 {error}
               </span>
             ) : helperText ? (
-              <span id={helperId} className="text-xs text-semantic-text-muted">
+              <span id={helperId} className="text-sm text-semantic-text-muted">
                 {helperText}
               </span>
             ) : (
@@ -5465,7 +6470,7 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
             {showCount && maxLength && (
               <span
                 className={cn(
-                  "text-xs",
+                  "text-sm",
                   charCount > maxLength
                     ? "text-semantic-error-primary"
                     : "text-semantic-text-muted"
@@ -5480,9 +6485,9 @@ const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(
     );
   }
 );
-TextField.displayName = "TextField";
+Textarea.displayName = "Textarea";
 
-export { TextField, textFieldContainerVariants, textFieldInputVariants };
+export { Textarea, textareaVariants };
 `,
   "toast": `import * as React from "react";
 import * as ToastPrimitives from "@radix-ui/react-toast";
@@ -5493,10 +6498,7 @@ import { cn } from "@/lib/utils";
 
 const ToastProvider = ToastPrimitives.Provider;
 
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
+const ToastViewport = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>, ref: React.Ref<React.ElementRef<typeof ToastPrimitives.Viewport>>) => (
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
@@ -5530,11 +6532,8 @@ const toastVariants = cva(
   }
 );
 
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
+const Toast = React.forwardRef(({ className, variant, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>, ref: React.Ref<React.ElementRef<typeof ToastPrimitives.Root>>) => {
   return (
     <ToastPrimitives.Root
       ref={ref}
@@ -5545,10 +6544,7 @@ const Toast = React.forwardRef<
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
 
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
+const ToastAction = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>, ref: React.Ref<React.ElementRef<typeof ToastPrimitives.Action>>) => (
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
@@ -5564,10 +6560,7 @@ const ToastAction = React.forwardRef<
 ));
 ToastAction.displayName = ToastPrimitives.Action.displayName;
 
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
+const ToastClose = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>, ref: React.Ref<React.ElementRef<typeof ToastPrimitives.Close>>) => (
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
@@ -5582,10 +6575,7 @@ const ToastClose = React.forwardRef<
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
+const ToastTitle = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>, ref: React.Ref<React.ElementRef<typeof ToastPrimitives.Title>>) => (
   <ToastPrimitives.Title
     ref={ref}
     className={cn("text-sm font-semibold tracking-[0.014px]", className)}
@@ -5594,10 +6584,7 @@ const ToastTitle = React.forwardRef<
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
+const ToastDescription = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>, ref: React.Ref<React.ElementRef<typeof ToastPrimitives.Description>>) => (
   <ToastPrimitives.Description
     ref={ref}
     className={cn("text-xs tracking-[0.048px]", className)}
@@ -5982,10 +6969,7 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, ref: React.Ref<React.ElementRef<typeof TooltipPrimitive.Content>>) => (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       ref={ref}
@@ -6000,10 +6984,7 @@ const TooltipContent = React.forwardRef<
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
-const TooltipArrow = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Arrow>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
->(({ className, ...props }, ref) => (
+const TooltipArrow = React.forwardRef(({ className, ...props }: React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>, ref: React.Ref<React.ElementRef<typeof TooltipPrimitive.Arrow>>) => (
   <TooltipPrimitive.Arrow
     ref={ref}
     className={cn("fill-semantic-primary", className)}
@@ -6155,7 +7136,7 @@ export interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
  * <Typography truncate>Very long text that will be truncated...</Typography>
  * \`\`\`
  */
-const Typography = React.forwardRef<HTMLElement, TypographyProps>(
+const Typography = React.forwardRef(
   (
     {
       children,
@@ -6168,8 +7149,8 @@ const Typography = React.forwardRef<HTMLElement, TypographyProps>(
       tag,
       htmlFor,
       ...props
-    },
-    ref
+    }: TypographyProps,
+    ref: React.Ref<HTMLElement>
   ) => {
     const key: Key = \`\${kind}-\${variant}\`;
     const Tag = (tag || mapTagName[key]) as React.ElementType;
@@ -6206,6 +7187,48 @@ export {
   mapColorClassName,
   mapAlignClassName,
 };
+`,
+  "unread-separator": `import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * UnreadSeparator component for displaying a horizontal divider with an unread message count.
+ * Used in chat message lists to indicate where unread messages begin.
+ *
+ * @example
+ * \`\`\`tsx
+ * <UnreadSeparator count={3} />
+ * <UnreadSeparator count={1} />
+ * <UnreadSeparator count={5} label="5 new messages" />
+ * \`\`\`
+ */
+export interface UnreadSeparatorProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  /** Number of unread messages */
+  count: number;
+  /** Custom label. Defaults to "{count} unread message(s)" */
+  label?: string;
+}
+
+const UnreadSeparator = React.forwardRef(
+  ({ className, count, label, ...props }: UnreadSeparatorProps, ref: React.Ref<HTMLDivElement>) => (
+    <div
+      ref={ref}
+      className={cn("flex items-center gap-4 my-2", className)}
+      {...props}
+    >
+      <div className="flex-1 h-px bg-semantic-border-layout" />
+      <span className="text-xs text-semantic-text-muted bg-semantic-bg-ui px-2 shrink-0">
+        {label ?? \`\${count} unread message\${count !== 1 ? "s" : ""}\`}
+      </span>
+      <div className="flex-1 h-px bg-semantic-border-layout" />
+    </div>
+  )
+);
+UnreadSeparator.displayName = "UnreadSeparator";
+
+export { UnreadSeparator };
 `
 };
 var utilsSourceCode = `import { type ClassValue, clsx } from "clsx"
@@ -6334,6 +7357,24 @@ var componentMetadata = {
       }
     ]
   },
+  "avatar": {
+    "name": "Avatar",
+    "description": "A avatar component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic Avatar",
+        "code": "<Avatar>Content</Avatar>",
+        "description": "Simple avatar usage"
+      }
+    ]
+  },
   "badge": {
     "name": "Badge",
     "description": "A status badge component with active, failed, disabled, outline, secondary, and destructive variants. Supports asChild for rendering as links.",
@@ -6604,6 +7645,24 @@ var componentMetadata = {
       }
     ]
   },
+  "contact-list-item": {
+    "name": "ContactListItem",
+    "description": "A contact list item component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic ContactListItem",
+        "code": "<ContactListItem>Content</ContactListItem>",
+        "description": "Simple contact list item usage"
+      }
+    ]
+  },
   "creatable-multi-select": {
     "name": "CreatableMultiSelect",
     "description": "A creatable multi select component.",
@@ -6642,6 +7701,24 @@ var componentMetadata = {
       }
     ]
   },
+  "date-divider": {
+    "name": "DateDivider",
+    "description": "A date divider component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic DateDivider",
+        "code": "<DateDivider>Content</DateDivider>",
+        "description": "Simple date divider usage"
+      }
+    ]
+  },
   "delete-confirmation-modal": {
     "name": "DeleteConfirmationModal",
     "description": "A delete confirmation modal component.",
@@ -6735,6 +7812,24 @@ var componentMetadata = {
       }
     ]
   },
+  "image-media": {
+    "name": "ImageMedia",
+    "description": "A image media component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic ImageMedia",
+        "code": "<ImageMedia>Content</ImageMedia>",
+        "description": "Simple image media usage"
+      }
+    ]
+  },
   "input": {
     "name": "Input",
     "description": "A flexible input component for text entry with state variants. Supports default and error states.",
@@ -6888,6 +7983,44 @@ var componentMetadata = {
       }
     ]
   },
+  "panel": {
+    "name": "Panel",
+    "description": "A panel component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic Panel",
+        "code": "<Panel>Content</Panel>",
+        "description": "Simple panel usage"
+      }
+    ]
+  },
+  "phone-input": {
+    "name": "PhoneInput",
+    "description": "A phone input component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge",
+      "lucide-react"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic PhoneInput",
+        "code": "<PhoneInput>Content</PhoneInput>",
+        "description": "Simple phone input usage"
+      }
+    ]
+  },
   "readable-field": {
     "name": "ReadableField",
     "description": "A readable field component.",
@@ -6907,6 +8040,24 @@ var componentMetadata = {
       }
     ]
   },
+  "reply-quote": {
+    "name": "ReplyQuote",
+    "description": "A reply quote component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic ReplyQuote",
+        "code": "<ReplyQuote>Content</ReplyQuote>",
+        "description": "Simple reply quote usage"
+      }
+    ]
+  },
   "select-field": {
     "name": "SelectField",
     "description": "A form-ready select component with label, helper text, error handling, and grouped options support.",
@@ -7106,6 +8257,24 @@ var componentMetadata = {
       }
     ]
   },
+  "system-message": {
+    "name": "SystemMessage",
+    "description": "A system message component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic SystemMessage",
+        "code": "<SystemMessage>Content</SystemMessage>",
+        "description": "Simple system message usage"
+      }
+    ]
+  },
   "table": {
     "name": "Table",
     "description": "A composable table component with size variants, loading/empty states, sticky columns, and sorting support.",
@@ -7149,6 +8318,25 @@ var componentMetadata = {
       }
     ]
   },
+  "tabs": {
+    "name": "Tabs",
+    "description": "A tabs component.",
+    "dependencies": [
+      "@radix-ui/react-tabs",
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic Tabs",
+        "code": "<Tabs>Content</Tabs>",
+        "description": "Simple tabs usage"
+      }
+    ]
+  },
   "tag": {
     "name": "Tag",
     "description": "A tag component for event labels with optional bold label prefix. Rounded rectangle tags for categorization.",
@@ -7326,6 +8514,24 @@ var componentMetadata = {
       }
     ]
   },
+  "textarea": {
+    "name": "Textarea",
+    "description": "A textarea component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic Textarea",
+        "code": "<Textarea>Content</Textarea>",
+        "description": "Simple textarea usage"
+      }
+    ]
+  },
   "toast": {
     "name": "Toast",
     "description": "A toast component.",
@@ -7382,6 +8588,24 @@ var componentMetadata = {
         "description": "Simple typography usage"
       }
     ]
+  },
+  "unread-separator": {
+    "name": "UnreadSeparator",
+    "description": "A unread separator component.",
+    "dependencies": [
+      "class-variance-authority",
+      "clsx",
+      "tailwind-merge"
+    ],
+    "props": [],
+    "variants": [],
+    "examples": [
+      {
+        "title": "Basic UnreadSeparator",
+        "code": "<UnreadSeparator>Content</UnreadSeparator>",
+        "description": "Simple unread separator usage"
+      }
+    ]
   }
 };
 function getComponentNames() {