@exegia/corpora-ui 1.0.0 → 2.0.0

package/src/components/stories/tree.story.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { Tree } from "@/components/composed/tree"
+
+function TreePreview({ sound }: { sound: boolean }) {
+  return (
+    <Tree
+      sound={sound}
+      variant="navigation"
+      items={[
+        {
+          id: "corpora",
+          label: "Corpora",
+          children: [
+            { id: "iliad", label: "Iliad" },
+            { id: "odyssey", label: "Odyssey" },
+          ],
+        },
+      ]}
+    />
+  )
+}
+
+export const story = defineStory({
+  Component: TreePreview,
+  args: { initial: { sound: true } },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/update-password-block.story.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+
+import { UpdatePasswordBlock } from "@/components/blocks/auth/update-password-block"
+
+export const story = defineStory({
+  Component: UpdatePasswordBlock,
+  args: {
+    initial: { minStrength: 4 },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/user.story.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { Info } from "@/components/composed/user/info"
+
+export const story = defineStory({
+  Component: Info as FC<
+    Pick<
+      ComponentProps<typeof Info>,
+      "variant" | "user" | "description" | "size" | "direction" | "audio"
+    >
+  >,
+  args: {
+    initial: {
+      variant: "info",
+      user: {
+        firstName: "Jenny",
+        lastName: "Hamilton",
+        role: "Editor",
+      },
+      description: "Corpus researcher",
+      size: "default",
+      direction: "sender",
+      audio: "muted",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/stories/verse.story.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import type { ComponentProps, FC } from "react"
+
+import { defineStory } from "@/registry/story"
+
+import { Verse } from "@/components/composed/verse"
+
+type TPreviewProps = Pick<
+  ComponentProps<typeof Verse>,
+  "chapter" | "href" | "size" | "children"
+>
+
+function VersePreview(props: TPreviewProps) {
+  return (
+    <Verse
+      {...props}
+      chapterPopover={
+        <div className="gap-1 grid">
+          <span className="text-xs font-medium">Genesis {props.chapter}</span>
+          <span className="text-sm text-muted-foreground">
+            Opening reference in the creation account.
+          </span>
+        </div>
+      }
+    />
+  )
+}
+
+export const story = defineStory({
+  Component: VersePreview as FC<TPreviewProps>,
+  args: {
+    initial: {
+      chapter: "1:1",
+      href: "#verse-preview",
+      size: "medium",
+      children: "In the beginning God created the heavens and the earth.",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/theme-provider.tsx

@@ -1,37 +1,37 @@
 /* eslint-disable react-refresh/only-export-components */
 import * as React from "react"
 
-type Theme = "dark" | "light" | "system"
-type ResolvedTheme = "dark" | "light"
+type TTheme = "dark" | "light" | "system"
+type TResolvedTheme = "dark" | "light"
 
-type ThemeProviderProps = {
+type TThemeProviderProps = {
   children: React.ReactNode
-  defaultTheme?: Theme
+  defaultTheme?: TTheme
   storageKey?: string
   disableTransitionOnChange?: boolean
 }
 
-type ThemeProviderState = {
-  theme: Theme
-  setTheme: (theme: Theme) => void
+type TThemeProviderState = {
+  theme: TTheme
+  setTheme: (theme: TTheme) => void
 }
 
 const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)"
-const THEME_VALUES: Theme[] = ["dark", "light", "system"]
+const THEME_VALUES: TTheme[] = ["dark", "light", "system"]
 
 const ThemeProviderContext = React.createContext<
-  ThemeProviderState | undefined
+  TThemeProviderState | undefined
 >(undefined)
 
-function isTheme(value: string | null): value is Theme {
+function isTheme(value: string | null): value is TTheme {
   if (value === null) {
     return false
   }
 
-  return THEME_VALUES.includes(value as Theme)
+  return THEME_VALUES.includes(value as TTheme)
 }
 
-function getSystemTheme(): ResolvedTheme {
+function getSystemTheme(): TResolvedTheme {
   if (window.matchMedia(COLOR_SCHEME_QUERY).matches) {
     return "dark"
   }
@@ -83,8 +83,8 @@ export function ThemeProvider({
   storageKey = "theme",
   disableTransitionOnChange = true,
   ...props
-}: ThemeProviderProps) {
-  const [theme, setThemeState] = React.useState<Theme>(() => {
+}: TThemeProviderProps) {
+  const [theme, setThemeState] = React.useState<TTheme>(() => {
     const storedTheme = localStorage.getItem(storageKey)
     if (isTheme(storedTheme)) {
       return storedTheme
@@ -94,7 +94,7 @@ export function ThemeProvider({
   })
 
   const setTheme = React.useCallback(
-    (nextTheme: Theme) => {
+    (nextTheme: TTheme) => {
       localStorage.setItem(storageKey, nextTheme)
       setThemeState(nextTheme)
     },
@@ -102,7 +102,7 @@ export function ThemeProvider({
   )
 
   const applyTheme = React.useCallback(
-    (nextTheme: Theme) => {
+    (nextTheme: TTheme) => {
       const root = document.documentElement
       const resolvedTheme =
         nextTheme === "system" ? getSystemTheme() : nextTheme

package/src/components/types.ts

@@ -0,0 +1,106 @@
+import type * as NAtomsProps from "./atoms/types"
+import type * as NComposedProps from "./composed/types"
+import type * as NBlockProps from "./blocks/types"
+import type * as NIconsProps from "./icons/types"
+
+// Type-only namespace exports cannot be reflected with `typeof`/`keyof`.
+// Keep these lists aligned with the exported *Props types, not state or options.
+type TAtomsProps =
+  | NAtomsProps.IReferenceProps
+  | NAtomsProps.IInputFieldProps
+  | NAtomsProps.ILoaderProps
+  | NAtomsProps.IAvatarProps<NAtomsProps.TUserType>
+  | NAtomsProps.ITextureProps
+  | NAtomsProps.IBubbleProps
+  | NAtomsProps.TBubbleMessageProps
+  | NAtomsProps.TBubbleHeaderProps
+  | NAtomsProps.IBubbleReactionsProps
+  | NAtomsProps.TBubbleActionsProps
+  | NAtomsProps.IBubbleReactionChipProps
+  | NAtomsProps.TBubbleReactionsButtonProps
+  | NAtomsProps.TTextProps
+  | NAtomsProps.THeadingProps
+  | NAtomsProps.TSpanProps
+  | NAtomsProps.TParagraphProps
+  | NAtomsProps.TLabelProps
+  | NAtomsProps.ISelectionRenderProps
+  | NAtomsProps.THighlightPopoverPrimitiveProps
+  | NAtomsProps.IHighlightPopoverProps
+  | NAtomsProps.ITextSelectionProps
+  | NAtomsProps.ITextPopoverRenderProps
+  | NAtomsProps.ITextClickPopoverProps
+
+// Instantiate generic props at their declared domains. Stories still infer the
+// concrete component's props (including narrower generic arguments) separately.
+type TComposedProps =
+  | NComposedProps.IActionButtonProps<string>
+  | NComposedProps.IActionBarProps
+  | NComposedProps.IEmojiActionBarProps
+  | NComposedProps.IStreamingTextProps
+  | NComposedProps.TAIContentProps<NComposedProps.TAIMessageType>
+  | NComposedProps.IAIMessageProps<NComposedProps.TAIMessageType>
+  | NComposedProps.IFlowchartProps
+  | NComposedProps.IConnectorProps
+  | NComposedProps.IChartNodeProps
+  | NComposedProps.IRecommendationItemProps
+  | NComposedProps.IRecommendationCardProps
+  | NComposedProps.IUserBaseProps<NAtomsProps.TUserType, NComposedProps.TUserVariant>
+  | NComposedProps.IUserMessageProps<NAtomsProps.TUserType>
+  | NComposedProps.TUserInfoProps<NAtomsProps.TUserType>
+  | NComposedProps.TUserPillProps<NAtomsProps.TUserType>
+  | NComposedProps.IVerseProps
+  | NComposedProps.TVerseSpanProps
+  | NComposedProps.TVerseNoteProps
+
+type TBlockProps =
+  | NBlockProps.IRecommendationStackProps
+  | NBlockProps.IPinnedThreadBannerProps
+  | NBlockProps.IDegradedBannerProps
+  | NBlockProps.IAiPanelProps
+  | NBlockProps.IAiPanelHeaderProps
+  | NBlockProps.ISuggestedPromptsProps
+  | NBlockProps.IVersionHistoryRecordProps
+  | NBlockProps.ILockedBannerProps
+  | NBlockProps.IAISidebarProps
+  | NBlockProps.TAISidebarViewProps
+  | NBlockProps.IAISidebarControllerProps
+  | NBlockProps.TAISidebarComponentProps
+  | NBlockProps.ISignupBlockProps
+  | NBlockProps.IForgotPasswordBlockProps
+  | NBlockProps.ILoginBlockProps
+  | NBlockProps.ICodeAuthBlockProps
+  | NBlockProps.IOnboardingBlockProps
+  | NBlockProps.IPasskeySignInBlockProps
+  | NBlockProps.IPasskeyManagerBlockProps
+  | NBlockProps.IUpdatePasswordBlockProps
+  | NBlockProps.ILinkedAccountsBlockProps
+  | NBlockProps.IAuthFlowBlockProps
+  | NBlockProps.IAISidebarProps
+  | NBlockProps.IAiPanelHeaderProps
+  | NBlockProps.IResourceRowProps
+  | NBlockProps.IScaffoldRootProps
+  | NBlockProps.TScaffoldSidebarProps
+  | NBlockProps.TScaffoldMainProps
+  | NBlockProps.TScaffoldCanvasProps
+  | NBlockProps.IScaffoldActionsProps
+  | NBlockProps.IScaffoldPanelProps
+  | NBlockProps.IScaffoldTabProps
+  | NBlockProps.IScaffoldSubPanelProps
+  | NBlockProps.IScaffoldInspectorProps
+  | NBlockProps.IPanelFloatingButtonProps
+  | NBlockProps.IPanelMenuButtonProps
+  | NBlockProps.TShellPanelControlProps
+  | NBlockProps.IShellLayoutProps
+  | NBlockProps.IAnimatedSidebarProviderProps
+  | NBlockProps.TAnimatedSidebarInsetProps
+  | NBlockProps.IAnimatedSidebarTriggerProps
+  | NBlockProps.IAnimatedSidebarProps
+  | NBlockProps.IAnimatedSidebarMenuSubProps
+  | NBlockProps.IAnimatedSidebarMenuSubButtonProps
+  | NBlockProps.IAnimatedSidebarMenuButtonProps
+
+type TIconsProps = NIconsProps.IFileIconProps
+
+/** Catalog of namespace-exported props, not a shared component call signature. */
+type TStoryComponentProps = TAtomsProps | TComposedProps | TBlockProps | TIconsProps
+export type { NAtomsProps, NComposedProps, NBlockProps, NIconsProps, TStoryComponentProps }

package/src/components/ui/badge.tsx

@@ -72,7 +72,7 @@ const badgeVariants = cva(
   }
 )
 
-interface BadgeProps extends useRender.ComponentProps<"span"> {
+interface IBadgeProps extends useRender.ComponentProps<"span"> {
   variant?: VariantProps<typeof badgeVariants>["variant"]
   size?: VariantProps<typeof badgeVariants>["size"]
   radius?: VariantProps<typeof badgeVariants>["radius"]
@@ -85,7 +85,7 @@ function Badge({
   radius,
   render,
   ...props
-}: BadgeProps) {
+}: IBadgeProps) {
   const defaultProps = {
     "data-slot": "badge",
     className: cn(badgeVariants({ variant, size, radius, className })),
@@ -98,4 +98,4 @@ function Badge({
   })
 }
 
-export { Badge, badgeVariants, type BadgeProps }
+export { Badge, badgeVariants, type IBadgeProps }

package/src/components/ui/button.tsx

@@ -6,15 +6,14 @@ import { cva, type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 import { cn } from "@/lib/utils";
 import { Spinner } from "@/components/ui/spinner";
-import { LiquidGlass } from "@/components/ui/glasscn/liquid-glass";
+import { GlassSurface } from "@/components/ui/glasscn/liquid-glass";
 import {
-  type FrostGlassVariant,
-  glassVariantStyles,
+  type TFrostGlassVariant,
   liquidRefractStyles,
 } from "@/lib/glass-variants";
 
 export const buttonVariants = cva(
-  "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border font-medium text-base outline-none transition-[scale,box-shadow,width,height,background-color,border-color] [transition-duration:150ms,150ms,300ms,300ms,150ms,150ms] ease-smooth-out active:scale-97 data-pressed:scale-97 motion-reduce:transition-none motion-reduce:active:scale-100 motion-reduce:data-pressed:scale-100 [&_svg]:transition-transform [&_svg]:duration-150 [&_svg]:ease-smooth-out motion-reduce:[&_svg]:transition-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-loading:select-none sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
+  "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border font-medium text-base outline-none transition-[scale,box-shadow,width,height,background-color,border-color] [transition-duration:150ms,150ms,300ms,300ms,150ms,150ms] ease-smooth-out active:scale-99 data-pressed:scale-99 motion-reduce:transition-none motion-reduce:active:scale-100 motion-reduce:data-pressed:scale-100 [&_svg]:transition-transform [&_svg]:duration-150 [&_svg]:ease-smooth-out motion-reduce:[&_svg]:transition-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-loading:select-none sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0",
   {
     compoundVariants: [
       {
@@ -81,9 +80,9 @@ export const buttonVariants = cva(
   },
 );
 
-type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+type TButtonVariant = VariantProps<typeof buttonVariants>["variant"];
 
-interface ButtonBaseProps extends useRender.ComponentProps<"button"> {
+interface IButtonBaseProps extends useRender.ComponentProps<"button"> {
   size?: VariantProps<typeof buttonVariants>["size"];
   loading?: boolean;
   /**
@@ -93,15 +92,15 @@ interface ButtonBaseProps extends useRender.ComponentProps<"button"> {
   sound?: boolean;
 }
 
-export type ButtonProps = ButtonBaseProps &
+export type TButtonProps = IButtonBaseProps &
   (
     | {
         variant: "glass";
         /** Glass finish. Only available when `variant` is "glass". */
-        glassVariant?: FrostGlassVariant;
+        glassVariant?: TFrostGlassVariant;
       }
     | {
-        variant?: Exclude<ButtonVariant, "glass">;
+        variant?: Exclude<TButtonVariant, "glass">;
         glassVariant?: never;
       }
   );
@@ -117,14 +116,14 @@ export function Button({
   glassVariant,
   sound = true,
   ...props
-}: ButtonProps): React.ReactElement {
+}: TButtonProps): React.ReactElement {
   const isDisabled: boolean = Boolean(loading || disabledProp);
   const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
     render ? undefined : "button";
 
-  const resolvedGlassVariant: FrostGlassVariant | undefined =
+  const resolvedGlassVariant: TFrostGlassVariant | undefined =
     variant === "glass" ? (glassVariant ?? "liquid-refract") : undefined;
-  const isLiquidRefract = resolvedGlassVariant === "liquid-refract";
+
 
   // Icon-only sizes overlay the spinner on top of the (hidden) icon; text
   // sizes keep the label visible and show the spinner inline before it.
@@ -133,6 +132,7 @@ export function Button({
   const defaultProps = {
     children: (
       <>
+        {resolvedGlassVariant && <GlassSurface glassVariant={resolvedGlassVariant} />}
         {!isIconSize && (
           // Always mounted so the button width morphs as the slot collapses
           // and expands; the closed state cancels the flex gap (which varies
@@ -145,7 +145,7 @@ export function Button({
               loading
                 ? "max-w-6"
                 : cn(
-                    "max-w-0 opacity-0 blur-[2px]",
+                    "max-w-0 opacity-0 blur-small",
                     size === "xs" ? "-ms-1" : size === "sm" ? "-ms-1.5" : "-ms-2",
                   ),
             )}
@@ -167,10 +167,9 @@ export function Button({
       // Label + icon buttons: icons do a gentle scale bump on hover. The
       // class-based :not() skips the spinner (animate-spin / animate-none).
       !isIconSize &&
-        "hover:[&_svg:not([class*='animate-'])]:scale-110 motion-reduce:hover:[&_svg]:scale-100",
+        "hover:[&_svg:not([class*='animate-'])]:scale-101 motion-reduce:hover:[&_svg]:scale-100",
       loading && isIconSize && "data-loading:text-transparent",
-      resolvedGlassVariant && glassVariantStyles[resolvedGlassVariant],
-      isLiquidRefract && liquidRefractStyles,
+      resolvedGlassVariant && cn("isolate", liquidRefractStyles),
       className,
     ),
     "aria-disabled": loading || undefined,
@@ -189,11 +188,5 @@ export function Button({
     render,
   });
 
-  // liquid-refract delegates the finish to the LiquidGlass wrapper, which
-  // renders the SVG-displacement backdrop behind an unstyled button.
-  if (isLiquidRefract) {
-    return <LiquidGlass>{element}</LiquidGlass>;
-  }
-
   return element;
 }

package/src/components/ui/chat/avatar-handle.tsx

@@ -1,7 +1,7 @@
 import type * as React from "react"
 import { cn } from "@/lib/utils"
 
-export interface AvatarHandleProps extends React.ComponentPropsWithoutRef<"span"> {
+export interface IAvatarHandleProps extends React.ComponentPropsWithoutRef<"span"> {
   src?: string
   /** Initials shown when no image loads; two characters at most. */
   initials?: string
@@ -13,7 +13,7 @@ export interface AvatarHandleProps extends React.ComponentPropsWithoutRef<"span"
  *
  * @sketch "Atom / Avatar / Handle 20"
  */
-export function AvatarHandle({ src, initials, size = 20, className, ...props }: AvatarHandleProps): React.ReactElement {
+export function AvatarHandle({ src, initials, size = 20, className, ...props }: IAvatarHandleProps): React.ReactElement {
   return (
     <span
       data-slot="avatar-handle"

package/src/components/ui/chat/badges.tsx

@@ -22,7 +22,7 @@ export function FileTypeBadge({ className, children, ...props }: React.Component
   )
 }
 
-export interface FaviconProps extends React.ComponentPropsWithoutRef<"span"> {
+export interface IFaviconProps extends React.ComponentPropsWithoutRef<"span"> {
   src?: string
   size?: 14 | 16
 }
@@ -32,7 +32,7 @@ export interface FaviconProps extends React.ComponentPropsWithoutRef<"span"> {
  *
  * @sketch "Atom / Favicon"
  */
-export function Favicon({ src, size = 16, className, ...props }: FaviconProps): React.ReactElement {
+export function Favicon({ src, size = 16, className, ...props }: IFaviconProps): React.ReactElement {
   return (
     <span
       data-slot="favicon"

package/src/components/ui/chat/buttons.tsx

@@ -3,16 +3,16 @@
 import { Play, Plus, X } from "lucide-react"
 import type * as React from "react"
 import { cn } from "@/lib/utils"
-import { Button, type ButtonProps } from "@/components/ui/button"
+import { Button, type TButtonProps } from "@/components/ui/button"
 
-type IconButtonProps = Omit<ButtonProps, "variant" | "size" | "glassVariant" | "children">
+type TIconButtonProps = Omit<TButtonProps, "variant" | "size" | "glassVariant" | "children">
 
 /**
  * 18px filled circle with an inverse ✕, used on composer chips.
  *
  * @sketch "Atom / Button / Remove"
  */
-export function RemoveButton({ className, ...props }: IconButtonProps): React.ReactElement {
+export function RemoveButton({ className, ...props }: TIconButtonProps): React.ReactElement {
   return (
     <Button
       aria-label="Remove"
@@ -34,7 +34,7 @@ export function RemoveButton({ className, ...props }: IconButtonProps): React.Re
  *
  * @sketch "Atom / Button / Play"
  */
-export function PlayButton({ className, ...props }: IconButtonProps): React.ReactElement {
+export function PlayButton({ className, ...props }: TIconButtonProps): React.ReactElement {
   return (
     <Button
       aria-label="Play"
@@ -56,7 +56,7 @@ export function PlayButton({ className, ...props }: IconButtonProps): React.Reac
  *
  * @sketch "Atom / Button / Add"
  */
-export function AddButton({ className, ...props }: IconButtonProps): React.ReactElement {
+export function AddButton({ className, ...props }: TIconButtonProps): React.ReactElement {
   return (
     <Button
       aria-label="Add attachment"
@@ -70,14 +70,14 @@ export function AddButton({ className, ...props }: IconButtonProps): React.React
   )
 }
 
-export type SendButtonProps = Omit<ButtonProps, "variant" | "glassVariant">
+export type TSendButtonProps = Omit<TButtonProps, "variant" | "glassVariant">
 
 /**
  * Brand-yellow 61×31 pill, radius 8, dark label.
  *
  * @sketch "Atom / Button / Send"
  */
-export function SendButton({ className, children = "Send", ...props }: SendButtonProps): React.ReactElement {
+export function SendButton({ className, children = "Send", ...props }: TSendButtonProps): React.ReactElement {
   return (
     <Button
       variant="ghost"

package/src/components/ui/chat/chips.tsx

@@ -2,9 +2,9 @@ import { CornerDownLeft } from "lucide-react"
 import type * as React from "react"
 import { cn } from "@/lib/utils"
 import { Favicon } from "./badges"
-import { Dot, type DotTone } from "./dot"
+import { Dot, type TDotTone } from "./dot"
 
-export interface SourceChipProps extends React.ComponentPropsWithoutRef<"span"> {
+export interface ISourceChipProps extends React.ComponentPropsWithoutRef<"span"> {
   favicon?: string
   /** Domain in mono ("scoopdata.io"). */
   children: React.ReactNode
@@ -15,7 +15,7 @@ export interface SourceChipProps extends React.ComponentPropsWithoutRef<"span">
  *
  * @sketch "Atom / Source Chip"
  */
-export function SourceChip({ favicon, className, children, ...props }: SourceChipProps): React.ReactElement {
+export function SourceChip({ favicon, className, children, ...props }: ISourceChipProps): React.ReactElement {
   return (
     <span
       data-slot="source-chip"
@@ -28,9 +28,9 @@ export function SourceChip({ favicon, className, children, ...props }: SourceChi
   )
 }
 
-export interface AvatarStackProps extends React.ComponentPropsWithoutRef<"span"> {
+export interface IAvatarStackProps extends React.ComponentPropsWithoutRef<"span"> {
   /** Up to three tones or image urls, rendered overlapping. */
-  items?: (DotTone | { src: string })[]
+  items?: (TDotTone | { src: string })[]
 }
 
 /**
@@ -38,7 +38,7 @@ export interface AvatarStackProps extends React.ComponentPropsWithoutRef<"span">
  *
  * @sketch "Atom / Avatar Stack"
  */
-export function AvatarStack({ items = ["series-1", "series-3", "series-4"], className, ...props }: AvatarStackProps): React.ReactElement {
+export function AvatarStack({ items = ["series-1", "series-3", "series-4"], className, ...props }: IAvatarStackProps): React.ReactElement {
   return (
     <span aria-hidden="true" data-slot="avatar-stack" className={cn("inline-flex items-center", className)} {...props}>
       {items.slice(0, 3).map((item, i) => (
@@ -50,8 +50,8 @@ export function AvatarStack({ items = ["series-1", "series-3", "series-4"], clas
   )
 }
 
-export interface StatProps extends React.ComponentPropsWithoutRef<"div"> {
-  tone?: DotTone
+export interface IStatProps extends React.ComponentPropsWithoutRef<"div"> {
+  tone?: TDotTone
   label: React.ReactNode
   value: React.ReactNode
   /** Secondary mono line ("−$2,377.66"). */
@@ -64,7 +64,7 @@ export interface StatProps extends React.ComponentPropsWithoutRef<"div"> {
  *
  * @sketch "Atom / Stat / {Positive, Negative}"
  */
-export function Stat({ tone = "series-1", label, value, delta, trend = "positive", className, ...props }: StatProps): React.ReactElement {
+export function Stat({ tone = "series-1", label, value, delta, trend = "positive", className, ...props }: IStatProps): React.ReactElement {
   const color = trend === "positive" ? "text-semantic-success" : "text-semantic-danger"
   return (
     <div data-slot="stat" data-trend={trend} className={cn("flex w-[152px] flex-col gap-1", className)} {...props}>
@@ -78,7 +78,7 @@ export function Stat({ tone = "series-1", label, value, delta, trend = "positive
   )
 }
 
-export interface FollowUpRowProps extends Omit<React.ComponentPropsWithoutRef<"button">, "onSelect"> {
+export interface IFollowUpRowProps extends Omit<React.ComponentPropsWithoutRef<"button">, "onSelect"> {
   onSelect?: () => void
 }
 
@@ -87,7 +87,7 @@ export interface FollowUpRowProps extends Omit<React.ComponentPropsWithoutRef<"b
  *
  * @sketch "Atom / Follow-up Row"
  */
-export function FollowUpRow({ onSelect, className, children, ...props }: FollowUpRowProps): React.ReactElement {
+export function FollowUpRow({ onSelect, className, children, ...props }: IFollowUpRowProps): React.ReactElement {
   return (
     <button
       type="button"

package/src/components/ui/chat/dot.tsx

@@ -1,11 +1,11 @@
 import type * as React from "react"
 import { cn } from "@/lib/utils"
 
-export type DotTone =
+export type TDotTone =
   | "success" | "warning" | "info" | "danger" | "neutral" | "accent" | "brand"
   | "series-1" | "series-2" | "series-3" | "series-4" | "series-5"
 
-export const DOT_TONE_CLASSES: Record<DotTone, string> = {
+export const DOT_TONE_CLASSES: Record<TDotTone, string> = {
   success: "bg-semantic-success",
   warning: "bg-semantic-warning",
   info: "bg-semantic-info",
@@ -20,8 +20,8 @@ export const DOT_TONE_CLASSES: Record<DotTone, string> = {
   "series-5": "bg-chart-series-5",
 }
 
-export interface DotProps extends React.ComponentPropsWithoutRef<"span"> {
-  tone?: DotTone
+export interface IDotProps extends React.ComponentPropsWithoutRef<"span"> {
+  tone?: TDotTone
   size?: 6 | 8
 }
 
@@ -30,7 +30,7 @@ export interface DotProps extends React.ComponentPropsWithoutRef<"span"> {
  *
  * @sketch "Atom / Dot / {Success, Warning, Info, Danger, Neutral, Accent, Brand, Series 3, Series 4}"
  */
-export function Dot({ tone = "neutral", size = 8, className, ...props }: DotProps): React.ReactElement {
+export function Dot({ tone = "neutral", size = 8, className, ...props }: IDotProps): React.ReactElement {
   return (
     <span
       aria-hidden="true"
@@ -42,8 +42,8 @@ export function Dot({ tone = "neutral", size = 8, className, ...props }: DotProp
   )
 }
 
-export interface LegendItemProps extends React.ComponentPropsWithoutRef<"span"> {
-  tone?: DotTone
+export interface ILegendItemProps extends React.ComponentPropsWithoutRef<"span"> {
+  tone?: TDotTone
   /** Optional trailing value ("42%"). */
   value?: React.ReactNode
 }
@@ -53,7 +53,7 @@ export interface LegendItemProps extends React.ComponentPropsWithoutRef<"span">
  *
  * @sketch "Atom / Legend Item"
  */
-export function LegendItem({ tone = "series-1", value, className, children, ...props }: LegendItemProps): React.ReactElement {
+export function LegendItem({ tone = "series-1", value, className, children, ...props }: ILegendItemProps): React.ReactElement {
   return (
     <span data-slot="legend-item" className={cn("inline-flex h-4 items-center gap-2 text-[11px] leading-none text-text-secondary", className)} {...props}>
       <Dot tone={tone} />