@exegia/corpora-ui 1.0.0 → 2.0.0

package/src/components/composed/chat/recommendation/item.tsx

@@ -16,28 +16,13 @@ import {
   CardPanel,
 } from "@/components/ui/card"
 import { AvatarHandle, Signal, Tag } from "@/components/ui/chat"
-import { EASE_IN_OUT, EASE_OUT_STRONG } from "@/lib/ease"
+import { EASE_OUT_STRONG } from "@/lib/ease"
 import { cn } from "@/lib/utils"
 import { Checkbox } from "./checkbox"
-import { CONFIDENCE, STATE_LABEL, STATE_TONE } from "./constant"
-import type { RecommendationItemProps } from "./types"
+import { CONFIDENCE, STATE_LABEL, STATE_TONE, ACTION_MOTION, ROW_VARIANTS } from "./constant"
+import type { IRecommendationItemProps } from "./types"
+import { Reference } from "@/components/atoms"
 
-const ACTION_MOTION = {
-  animate: { opacity: 1, y: 0 },
-  exit: { opacity: 0, y: 4 },
-  initial: { opacity: 0, y: 4 },
-  transition: { duration: 0.18, ease: EASE_IN_OUT },
-} as const
-
-/** Row entrance, driven by the Group's staggered `visible` variant. */
-const ROW_VARIANTS = {
-  hidden: { opacity: 0, y: 8 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: { duration: 0.45, ease: EASE_OUT_STRONG },
-  },
-} as const
 
 /**
  * Human-in-the-loop proposal: title, description with entity + lead-time
@@ -53,8 +38,8 @@ export function Item({
   title,
   description,
   entity,
-  descriptionSuffix,
   leadTime,
+  reference,
   options = [],
   optionsLabel = "Other options",
   confidence = "high",
@@ -72,7 +57,7 @@ export function Item({
   children,
   className,
   ...props
-}: RecommendationItemProps): React.ReactElement {
+}: IRecommendationItemProps): React.ReactElement {
   const declined = state === "rejected"
   const decline = onReject ?? onAlternatives
   const declineLabel = rejectLabel ?? alternativesLabel
@@ -106,41 +91,17 @@ export function Item({
         data-slot="recommendation-card"
         data-state={state}
       >
-        <AccordionTrigger className="relative items-center gap-3 rounded-t-[calc(var(--radius-md)-1px)] rounded-b-none px-3 py-2.5 text-left hover:bg-black/4 focus-visible:ring-2 focus-visible:ring-ring dark:hover:bg-white/4">
+        <AccordionTrigger className="gap-3 px-3 py-2.5 hover:bg-black/4 dark:hover:bg-white/4 relative items-center rounded-none text-left focus-visible:ring-0">
           <Checkbox state={state} step={step} />
-          <div className="flex min-w-0 flex-1 flex-col items-start gap-1">
+          <div className="min-w-0 gap-1 flex flex-1 flex-col items-start">
             <span
               className={cn(
-                "w-full text-[14px] leading-4 font-semibold text-text-primary",
+                "leading-4 font-semibold w-full text-[14px] text-text-primary",
                 declined && "font-light text-muted-foreground line-through"
               )}
             >
               {title}
             </span>
-            <span
-              className={cn(
-                "flex w-full flex-wrap items-center gap-x-1.5 gap-y-1.5 text-[13px] leading-[15px] text-text-secondary",
-                declined && "line-through opacity-50"
-              )}
-            >
-              {description}
-              {entity ? (
-                <span className="inline-flex h-[22px] items-center gap-1.5 rounded-full bg-surface-subtle py-0.5 pr-2 pl-0.5 text-[12px] font-medium text-text-primary">
-                  <AvatarHandle
-                    initials={entity.initials}
-                    size={16}
-                    src={entity.src}
-                  />
-                  {entity.name}
-                </span>
-              ) : null}
-              {descriptionSuffix}
-              {leadTime ? (
-                <Tag className="rounded-full" tone="green">
-                  {leadTime}
-                </Tag>
-              ) : null}
-            </span>
           </div>
           {state === "accepted" || state === "rejected" ? (
             <Tag className="uppercase" tone={STATE_TONE[state]}>
@@ -151,17 +112,31 @@ export function Item({
 
         {/* `relative`: the frame's ::before veil is positioned, so an
             unpositioned panel body would paint under it and look faded. */}
-        <AccordionPanel className="relative px-0 pb-0">
-          {options.length ? (
+        <AccordionPanel className="px-0 pb-0 relative">
+          {(description || entity || leadTime) && <div className={cn("flex flex-wrap items-center gap-x-1.5 gap-y-1.5 px-3 pb-3 text-[13px] leading-[18px] text-text-secondary", declined && "line-through opacity-50")}>
+            {description}
+            {entity && <span className="inline-flex h-[22px] items-center gap-1.5 rounded-full bg-surface-subtle py-0.5 pl-0.5 pr-2 text-xs font-medium text-text-primary"><AvatarHandle initials={entity.initials} size={16} src={entity.src} />{entity.name}</span>}
+            {leadTime && <Tag className="rounded-full" tone="green">{leadTime}</Tag>}
+          </div>}
+          {reference && <div
+            className={cn(
+              "gap-x-1.5 gap-y-1 px-2 pb-1.5 flex w-full items-center",
+              declined && "line-through opacity-50"
+            )}
+          >
+            <Reference {...reference} />
+          </div>}
+          {children && <div className="px-3 py-2">{children}</div>}
+          {options.length > 0 && (
             <Card className="mx-3 rounded-md before:rounded-[calc(var(--radius-md)-1px)]">
-              <CardPanel className="flex flex-col gap-2 px-3.5 py-2.5">
-                <span className="text-[11px] leading-3 text-text-secondary">
+              <CardPanel className="gap-2 px-3.5 py-2.5 flex flex-col">
+                <span className="leading-3 text-[11px] text-text-secondary">
                   {optionsLabel}
                 </span>
                 {options.map((option, index) => (
                   <motion.button
                     {...optionMotion(index)}
-                    className="-mx-2 flex h-6 items-center gap-2.5 rounded-md px-2 text-left text-[12.5px] leading-none text-text-primary outline-none hover:bg-black/4 focus-visible:ring-2 focus-visible:ring-ring dark:hover:bg-white/6"
+                    className="-mx-2 h-6 gap-2.5 px-2 hover:bg-black/4 dark:hover:bg-white/6 flex items-center rounded-md text-left text-[12.5px] leading-none text-text-primary outline-none focus-visible:ring-2 focus-visible:ring-ring"
                     key={index}
                     onClick={() => onSelectOption?.(index)}
                     type="button"
@@ -177,18 +152,14 @@ export function Item({
                 ))}
               </CardPanel>
             </Card>
-          ) : null}
-          {children ? (
-            <div className="px-3 pb-2 text-sm leading-[22px] text-foreground/90">
-              {children}
-            </div>
-          ) : null}
-          <CardFrameFooter className="relative flex items-center gap-2 px-4 py-3">
+          )}
+         
+          <CardFrameFooter className="gap-2 px-4 py-3.5 relative flex items-center">
             <Signal level={confidence} />
             <span className="text-[12.5px] text-text-primary">
               {confidenceLabel ?? CONFIDENCE[confidence]}
             </span>
-            <span className="ml-auto flex items-center gap-2">
+            <span className="gap-2 ml-auto flex items-center">
               <AnimatePresence initial={false} mode="wait">
                 {state === "running" ? (
                   // The spinner in the heading already reports progress; the
@@ -197,11 +168,11 @@ export function Item({
                 ) : state === "pending" ? (
                   <motion.div
                     {...ACTION_MOTION}
-                    className="flex items-center gap-2"
+                    className="gap-2 flex items-center"
                     key="actions"
                   >
                     <Button
-                      className="h-[27px] rounded-full px-3 text-[12px] font-medium sm:h-[27px]"
+                      className="px-3 font-medium sm:h-6 h-6 rounded-full text-[12px]"
                       onClick={decline}
                       size="xs"
                       variant="outline"
@@ -219,7 +190,7 @@ export function Item({
                   // leaving actions once a sibling enters behind them.
                   <motion.div
                     {...ACTION_MOTION}
-                    className="inline-flex items-center gap-1 text-xs font-normal text-success-foreground"
+                    className="gap-1 text-xs font-normal inline-flex items-center text-success-foreground"
                     key={state}
                   >
                     {onUndo ? (

package/src/components/composed/chat/recommendation/types.ts

@@ -1,19 +1,21 @@
 import type * as React from "react"
-import type { SignalLevel } from "@/components/ui/chat"
+import type { TSignalLevel } from "@/components/ui/chat"
+import type { AccordionPrimitive } from "@/components/ui/accordion"
+import type { IReferenceProps } from "@/components/atoms/types"
 
-export interface RecommendationOption {
+export interface IRecommendationOption {
   label: React.ReactNode
   status?: React.ReactNode
-  signal?: SignalLevel
+  signal?: TSignalLevel
 }
 
-export interface RecommendationEntity {
+export interface IRecommendationEntity {
   name: React.ReactNode
   initials?: string
   src?: string
 }
 
-export type RecommendationState =
+export type TRecommendationState =
   | "accepted"
   | "rejected"
   | "pending"
@@ -21,21 +23,21 @@ export type RecommendationState =
   | "running"
 
 /** Shared fields of a human-in-the-loop proposal. */
-export interface RecommendationFields {
+export interface IRecommendationFields {
   title: React.ReactNode
-  /** Sentence fragments around the entity and lead-time pills. */
+  /** Collapsible body text around the entity and lead-time pills. */
   description: React.ReactNode
-  entity?: RecommendationEntity
-  descriptionSuffix?: React.ReactNode
+  entity?: IRecommendationEntity
+  reference?: IReferenceProps
   leadTime?: React.ReactNode
-  options?: RecommendationOption[]
+  options?: IRecommendationOption[]
   optionsLabel?: React.ReactNode
-  confidence?: SignalLevel
+  confidence?: TSignalLevel
   confidenceLabel?: React.ReactNode
   acceptLabel?: React.ReactNode
   rejectLabel?: React.ReactNode
   alternativesLabel?: React.ReactNode
-  state?: RecommendationState
+  state?: TRecommendationState
   /** Number inside the pending ring, e.g. the item's position in its group. */
   step?: number
   onAccept?: () => void
@@ -48,18 +50,27 @@ export interface RecommendationFields {
   children?: React.ReactNode
 }
 
-export interface RecommendationItemProps
+export interface IRecommendationItemProps
   extends
-    RecommendationFields,
+    IRecommendationFields,
     Omit<React.ComponentPropsWithoutRef<"div">, "title" | "children"> {
   /** Accordion item identity. Required inside `Recommendation.Group`. */
   value: string
 }
 
-export interface RecommendationCardProps extends RecommendationFields {
+export interface IRecommendationCardProps extends IRecommendationFields {
   /** Accordion item identity. Auto-generated when omitted. */
   value?: string
   /** Uncontrolled initial open state. Default true — Accept lives in the body. */
   defaultOpen?: boolean
   className?: string
 }
+
+export type TRecommendationGroupProps = AccordionPrimitive.Root.Props
+
+export interface IRecommendationCheckboxProps {
+  state: TRecommendationState
+  /** Number shown inside the pending ring (its position in the group). */
+  step?: number
+  className?: string
+}

package/src/components/composed/chat/records-table.tsx

@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils"
 import { Card } from "@/components/ui/card"
 import { createKeyedFamilies } from "@/lib/keyed-atom"
 import { Checkbox } from "@/components/ui/checkbox"
-import { Tag, type TagTone } from "@/components/ui/chat"
+import { Tag, type TTagTone } from "@/components/ui/chat"
 
 const { stateFamily, removeInstance } = createKeyedFamilies("recordsTable")
 
@@ -15,31 +15,33 @@ const { stateFamily, removeInstance } = createKeyedFamilies("recordsTable")
 export const recordsTableSelectionAtom = stateFamily<ReadonlySet<string>>("selection", new Set<string>())
 export const removeRecordsTableInstance = removeInstance
 
-export interface RecordsRow {
+export interface IRecordsRow {
   id: string
   name: React.ReactNode
   initial?: string
   avatarSrc?: string
-  tags?: { label: React.ReactNode; tone?: TagTone }[]
+  tags?: { label: React.ReactNode; tone?: TTagTone }[]
   /** Max tags shown inline; the rest collapse to "+N". */
   lastInteraction?: React.ReactNode
   strength?: React.ReactNode
 }
 
-export type RecordsColumnKey = "name" | "tags" | "lastInteraction" | "strength"
+export type TRecordsColumnKey = "name" | "tags" | "lastInteraction" | "strength"
 
-export interface RecordsTableProps extends React.ComponentPropsWithoutRef<"div"> {
+export interface IRecordsTableProps extends React.ComponentPropsWithoutRef<"div"> {
   tableId?: string
-  rows: RecordsRow[]
-  headers?: Partial<Record<RecordsColumnKey, React.ReactNode>>
+  rows: IRecordsRow[]
+  headers?: Partial<Record<TRecordsColumnKey, React.ReactNode>>
+  /** Pin the header inside a height-constrained scroll container. */
+  stickyHeader?: boolean
   maxTags?: number
   selected?: ReadonlySet<string>
   onSelectionChange?: (selected: ReadonlySet<string>) => void
   /** Sort is the caller's: the design shows the control only. */
-  onSortChange?: (column: RecordsColumnKey) => void
+  onSortChange?: (column: TRecordsColumnKey) => void
 }
 
-const HEADERS: Record<RecordsColumnKey, string> = { name: "Company", tags: "Categories", lastInteraction: "Last interaction", strength: "Connection" }
+const HEADERS: Record<TRecordsColumnKey, string> = { name: "Company", tags: "Categories", lastInteraction: "Last interaction", strength: "Connection" }
 
 /**
  * Selectable records table: index, initial avatar, name, tag row with
@@ -47,7 +49,7 @@ const HEADERS: Record<RecordsColumnKey, string> = { name: "Company", tags: "Cate
  *
  * @sketch "Component / Records Table"
  */
-export function RecordsTable({ tableId, rows, headers, maxTags = 2, selected, onSelectionChange, onSortChange, className, ...props }: RecordsTableProps): React.ReactElement {
+export function RecordsTable({ tableId, rows, headers, stickyHeader = false, maxTags = 2, selected, onSelectionChange, onSortChange, className, ...props }: IRecordsTableProps): React.ReactElement {
   const generatedId = React.useId()
   const id = tableId ?? generatedId
   const [stored, setStored] = useAtom(recordsTableSelectionAtom(id))
@@ -71,19 +73,19 @@ export function RecordsTable({ tableId, rows, headers, maxTags = 2, selected, on
     update(next)
   }
   const h = { ...HEADERS, ...headers }
-  const sortable = (key: RecordsColumnKey, label: React.ReactNode) => (
+  const sortable = (key: TRecordsColumnKey, label: React.ReactNode) => (
     <button type="button" onClick={() => onSortChange?.(key)} className="inline-flex items-center gap-1.5 text-left outline-none hover:text-text-primary focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-3 [&_svg]:text-text-muted">
       {label}<ChevronsUpDown />
     </button>
   )
 
   return (
-    <Card data-slot="records-table" className={cn("w-[540px] max-w-full overflow-x-auto", className)} {...props}>
-      <table className="w-full border-collapse text-left">
-        <thead>
+    <Card tabIndex={0} role="region" aria-label="Records table" data-slot="records-table" className={cn("isolate w-[540px] max-w-full overflow-auto select-none [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", className)} {...props}>
+      <table className="w-full min-w-[540px] border-separate border-spacing-0 text-left [&_td]:border-b [&_td]:border-border-default [&_th]:border-b [&_th]:border-border-default [&_tr:last-child_td]:border-b-0">
+        <thead className={cn(stickyHeader && "[&_th]:sticky [&_th]:top-0 [&_th]:z-20 [&_th]:bg-surface-card [&_th:first-child]:z-30 [&_th:nth-child(2)]:z-30")}>
           <tr className="border-b border-border-default text-[11px] font-medium leading-3 text-text-secondary">
-            <th className="w-7 py-2.5 pl-3"><Checkbox aria-label="Select all" checked={all} indeterminate={some} onCheckedChange={toggleAll} className="size-4" /></th>
-            <th className="px-2 py-2.5">{h.name}</th>
+            <th className="sticky left-0 z-10 w-13 min-w-13 bg-surface-card py-2.5 pl-3"><Checkbox aria-label="Select all" checked={all} indeterminate={some} onCheckedChange={toggleAll} className="size-4" /></th>
+            <th className="sticky left-13 z-10 min-w-44 bg-surface-card px-2 py-2.5">{h.name}</th>
             <th className="px-2 py-2.5">{sortable("tags", h.tags)}</th>
             <th className="px-2 py-2.5">{sortable("lastInteraction", h.lastInteraction)}</th>
             <th className="px-2 py-2.5 pr-3">{sortable("strength", h.strength)}</th>
@@ -96,13 +98,13 @@ export function RecordsTable({ tableId, rows, headers, maxTags = 2, selected, on
             const checked = current.has(row.id)
             return (
               <tr key={row.id} data-selected={checked || undefined} className="border-b border-border-default last:border-b-0 data-selected:bg-accent-subtle/40">
-                <td className="py-2 pl-3">
+                <td className={cn("sticky left-0 z-10 w-13 min-w-13 py-2 pl-3", checked ? "bg-accent-subtle" : "bg-surface-card")}>
                   <span className="flex items-center gap-2">
                     <span className="w-2 text-[11px] text-text-muted group-hover:hidden">{i + 1}</span>
                     <Checkbox aria-label={`Select row ${i + 1}`} checked={checked} onCheckedChange={() => toggle(row.id)} className="size-4" />
                   </span>
                 </td>
-                <td className="px-2 py-2">
+                <td className={cn("sticky left-13 z-10 min-w-44 px-2 py-2", checked ? "bg-accent-subtle" : "bg-surface-card")}>
                   <span className="flex items-center gap-2">
                     <span className="inline-flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-full bg-surface-subtle text-[9px] font-semibold text-text-secondary">
                       {row.avatarSrc ? <img alt="" className="size-full object-cover" src={row.avatarSrc} /> : row.initial}

package/src/components/composed/chat/type.ts

@@ -1,25 +1,42 @@
 import type * as React from "react"
 
-import type { MenuCommandItem } from "@/components/ui/menu-command"
-import type { AttachmentProps } from "./attachment"
+import type { IMenuCommandItem } from "@/components/ui/menu-command"
+import type { TAttachmentProps } from "./attachment"
 import type { HTMLMotionProps } from "motion/react"
-import type { AtomSize } from "@/components/atoms/types"
+import type { TAtomSize } from "@/components/atoms/types"
 
-export type ComposerMode = "answer" | "fix" | "ask"
+export type TComposerMode = "answer" | "fix" | "ask"
 
 /** A tray chip: any Attachment kind plus a stable id. */
-export type ComposerAttachment = Omit<
-  AttachmentProps,
-  "variant" | "onRemove" | "removable"
-> & { id: string }
+type ComposerAttachment<T> = T extends TAttachmentProps
+  ? Omit<T, "variant" | "onRemove" | "removable"> & { id: string }
+  : never
+export type TComposerAttachment = ComposerAttachment<TAttachmentProps>
+
+export interface IComposerModel {
+  id: string
+  label: string
+  description?: string
+}
+
+export interface IComposerOption {
+  id: string
+  label: string
+  description?: string
+  icon?: React.ReactNode
+  /** Text to insert instead of @label or /id. */
+  insertText?: string
+  onSelect?: () => void
+}
 
 export interface IComposerMenuProps {
-  items?: MenuCommandItem[]
-  onCommand?: (item: MenuCommandItem) => void
+  disabled?: boolean
+  items?: IMenuCommandItem[]
+  onCommand?: (item: IMenuCommandItem) => void
   onAttach?: () => void
 }
 
-export interface ComposerSuggestionsProps {
+export interface IComposerSuggestionsProps {
   prompts?: React.ReactNode
   label?: (count: number) => React.ReactNode
   defaultOpen?: boolean
@@ -37,23 +54,37 @@ export interface IComposerSubmitButtonProps<
   isExpanded: E
 }
 
-export interface ComposerModeProps {
-  mode: ComposerMode
-  onModeChange?: (mode: ComposerMode) => void
+export interface IComposerModeProps {
+  mode: TComposerMode
+  onModeChange?: (mode: TComposerMode) => void
 }
 
-export interface ComposerBaseProps<
+export interface IComposerBaseProps<
   S extends boolean = boolean,
   E extends boolean = boolean,
-  M extends ComposerMode = ComposerMode,
-  A extends ComposerAttachment = ComposerAttachment,
+  M extends TComposerMode = TComposerMode,
+  A extends TComposerAttachment = TComposerAttachment,
 > {
+  shape?: "rounded" | "pill"
+  sources?: IComposerOption[]
+  commands?: IComposerOption[]
+  models?: IComposerModel[]
+  model?: string
+  defaultModel?: string
+  onModelChange?: (model: string) => void
+  onSourceSelect?: (source: IComposerOption) => void
+  onCommand?: (command: IComposerOption) => void
+  /** Receives local files; uploading remains the consuming app's responsibility. */
+  onFilesChange?: (files: File[]) => void
+  accept?: string
+  /** Hide the microphone. Unsupported browsers show it disabled otherwise. */
+  dictation?: boolean
   value?: string
   onValueChange?: (value: string) => void
   composerId?: string
   /** Seeds the tray once on mount; the atoms own it from then on. */
   attachments?: A[]
-  /** Start in the tall, focused layout. */
+  /** Keep the text above the controls even for a short message. */
   expanded?: E
   isStreaming?: S
   disabled?: boolean
@@ -67,18 +98,18 @@ export interface ComposerBaseProps<
 }
 
 export interface IComposerProps<
-  IMode extends ComposerModeProps = ComposerModeProps,
+  IMode extends IComposerModeProps = IComposerModeProps,
   S extends boolean = boolean,
   E extends boolean = boolean,
-> extends ComposerBaseProps<S, E> {
+> extends IComposerBaseProps<S, E> {
   /** Replaces the default `SendButton`. Receives the streaming/expanded state. */
   SubmitButton?: React.FC<IComposerSubmitButtonProps<S, E>>
   ModeComponent?: React.FC<IMode>
-  Suggestions?: React.FC<ComposerSuggestionsProps>
+  Suggestions?: React.FC<IComposerSuggestionsProps>
   ComposerMenu?: React.FC<IComposerMenuProps>
 }
 
-export interface SuggestedPromptsProps extends Omit<
+export interface ISuggestedPromptsProps extends Omit<
   HTMLMotionProps<"div">,
   "children"
 > {
@@ -95,7 +126,7 @@ export interface SuggestedPromptsProps extends Omit<
 
 export type TBubbleActionPayload =
   string | number | Record<string, unknown> | undefined
-export type TBubbleActionSize = Extract<AtomSize, "sm" | "default" | "lg">
+export type TBubbleActionSize = Extract<TAtomSize, "sm" | "default" | "lg">
 export type TBubbleActionKey =
   "copy" | "edit" | "delete" | "share" | "retry" | "more" | "download"
 export interface IBubbleActionBaseProps<
@@ -110,7 +141,7 @@ export interface IBubbleActionBaseProps<
   size?: S
 }
 
-export type IBubbleActionProps<
+export type TIBubbleActionProps<
   K extends TBubbleActionKey = TBubbleActionKey,
   S extends TBubbleActionSize = TBubbleActionSize,
   P extends TBubbleActionPayload = TBubbleActionPayload,
@@ -122,5 +153,5 @@ export interface IBubbleActionsProps<
 > {
   size?: S
   onClick?: (key: K, payload: P) => void
-  actions: { [key in K]?: IBubbleActionProps<K, S, P> }
+  actions: { [key in K]?: TIBubbleActionProps<K, S, P> }
 }

package/src/components/composed/logo.tsx

@@ -10,9 +10,9 @@ import { initialsFrom } from "@/components/atoms/avatar/utils"
 
 /** `full` shows mark + wordmark; `mark` folds the wordmark away — an icon
  * rail, a favicon-sized corner. */
-export type LogoVariant = "full" | "mark"
+export type TLogoVariant = "full" | "mark"
 
-export interface LogoProps extends Omit<
+export interface ILogoProps extends Omit<
   React.HTMLAttributes<HTMLElement>,
   "children"
 > {
@@ -29,7 +29,7 @@ export interface LogoProps extends Omit<
   /** Wordmark content. Defaults to `name`. */
   wordmark?: React.ReactNode
   /** `full` (default) or `mark` — the wordmark folds away, animated. */
-  variant?: LogoVariant
+  variant?: TLogoVariant
   /** Renders the logo as a link — the usual "mark goes home" affordance. */
   href?: string
 }
@@ -89,7 +89,7 @@ export function Logo({
   href,
   className,
   ...props
-}: LogoProps): React.ReactElement {
+}: ILogoProps): React.ReactElement {
   const reduce = useReducedMotion()
   const folded = variant === "mark"
 

package/src/components/composed/password-input.tsx

@@ -35,7 +35,7 @@ const STRENGTH_COLORS = [
   "bg-emerald-500",
 ] as const;
 
-export interface PasswordInputProps
+export interface IPasswordInputProps
   extends Omit<React.ComponentProps<typeof InputGroupInput>, "type" | "size"> {
   /** Render the eye toggle button. */
   visibilityToggle?: boolean;
@@ -59,7 +59,7 @@ export function PasswordInput({
   defaultValue,
   onChange,
   ...props
-}: PasswordInputProps) {
+}: IPasswordInputProps) {
   const [visible, setVisible] = React.useState(false);
   const [uncontrolled, setUncontrolled] = React.useState(
     String(defaultValue ?? ""),

package/src/components/composed/reader/applied-mark.tsx

@@ -2,14 +2,14 @@
 
 import type * as React from "react"
 import { cn } from "@/lib/utils"
-import type { AppliedMarkProps } from "./type"
+import type { IAppliedMarkProps } from "./type"
 
 export function AppliedMark({
   nodeId,
   className,
   children,
   ...props
-}: AppliedMarkProps): React.ReactElement {
+}: IAppliedMarkProps): React.ReactElement {
   return (
     <span
       className={cn(

package/src/components/composed/reader/apply-toast.tsx

@@ -5,14 +5,14 @@ import type * as React from "react"
 import { EASE_OUT_STRONG } from "@/lib/ease"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import type { ApplyToastProps } from "./type"
+import type { IApplyToastProps } from "./type"
 
 export function ApplyToast({
   open = true,
   message = "Change applied and recorded in version history.",
   onUndo,
   className,
-}: ApplyToastProps): React.ReactElement | null {
+}: IApplyToastProps): React.ReactElement | null {
   const reduceMotion = useReducedMotion()
   if (!open) return null
   return (

package/src/components/composed/reader/selection-highlight.tsx

@@ -2,14 +2,14 @@
 
 import type * as React from "react"
 import { cn } from "@/lib/utils"
-import type { SelectionHighlightProps } from "./type"
+import type { ISelectionHighlightProps } from "./type"
 
 export function SelectionHighlight({
   range,
   className,
   children,
   ...props
-}: SelectionHighlightProps): React.ReactElement {
+}: ISelectionHighlightProps): React.ReactElement {
   return (
     <span
       aria-label={range ? `Selected ${range}` : "Selected text"}

package/src/components/composed/reader/selection-popover.tsx

@@ -18,7 +18,7 @@ import {
   mutedText,
   surface,
 } from "@/components/composed/ai/shared"
-import type { SelectionPopoverProps } from "./type"
+import type { ISelectionPopoverProps } from "./type"
 
 /**
  * The reader entry point, built on the preview-card atom: hovering or
@@ -37,7 +37,7 @@ export function SelectionPopover({
   onClose,
   children,
   className,
-}: SelectionPopoverProps): React.ReactElement {
+}: ISelectionPopoverProps): React.ReactElement {
   const [internalOpen, setInternalOpen] = useState(defaultOpen)
   const isOpen = open ?? internalOpen