@exegia/corpora-ui 1.0.0 → 2.0.0

package/src/components/ui/chat/icon-button.tsx

@@ -2,9 +2,9 @@
 
 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"
 
-export type IconButtonProps = Omit<ButtonProps, "variant" | "size" | "glassVariant" | "aria-label"> & {
+export type TIconButtonProps = Omit<TButtonProps, "variant" | "size" | "glassVariant" | "aria-label"> & {
   /** Required: icon-only controls need a name. */
   "aria-label": string
 }
@@ -14,7 +14,7 @@ export type IconButtonProps = Omit<ButtonProps, "variant" | "size" | "glassVaria
  *
  * @sketch "Atom / Icon Button"
  */
-export function IconButton({ className, ...props }: IconButtonProps): React.ReactElement {
+export function IconButton({ className, ...props }: TIconButtonProps): React.ReactElement {
   return (
     <Button
       variant="ghost"

package/src/components/ui/chat/icon-tile.tsx

@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils"
 
 const SIZES = { 28: "size-7 rounded-md", 32: "size-8 rounded-[10px]", 36: "size-9 rounded-[10px]", 40: "size-10 rounded-[10px]" } as const
 
-export interface IconTileProps extends React.ComponentPropsWithoutRef<"span"> {
+export interface IIconTileProps extends React.ComponentPropsWithoutRef<"span"> {
   /** Tile edge in px. The design uses 40 (attachments), 32 (agent avatar), 28 (research kicker), 36 (flowchart node). */
   size?: keyof typeof SIZES
   /** Fill the tile with the accent-subtle tint instead of the neutral surface. */
@@ -15,7 +15,7 @@ export interface IconTileProps extends React.ComponentPropsWithoutRef<"span"> {
  *
  * @sketch "Atom / Icon Tile"
  */
-export function IconTile({ size = 40, tone = "neutral", className, children, ...props }: IconTileProps): React.ReactElement {
+export function IconTile({ size = 40, tone = "neutral", className, children, ...props }: IIconTileProps): React.ReactElement {
   return (
     <span
       data-slot="icon-tile"

package/src/components/ui/chat/index.ts

@@ -1,12 +1,12 @@
-export { IconTile, type IconTileProps } from "./icon-tile"
-export { Thumbnail, type ThumbnailProps } from "./thumbnail"
-export { AvatarHandle, type AvatarHandleProps } from "./avatar-handle"
-export { AddButton, PlayButton, RemoveButton, SendButton, type SendButtonProps } from "./buttons"
-export { DurationPill, Favicon, FileTypeBadge, QuoteRail, type FaviconProps } from "./badges"
-export { Waveform, type WaveformProps } from "./waveform"
-export { DOT_TONE_CLASSES, Dot, LegendItem, Pill, type DotProps, type DotTone, type LegendItemProps } from "./dot"
-export { SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps } from "./segmented-toggle"
-export { AgentBadge, IconButton, type IconButtonProps } from "./icon-button"
-export { Signal, Tag, type SignalLevel, type SignalProps, type TagProps, type TagTone } from "./tag"
-export { AvatarStack, FollowUpRow, SourceChip, Stat, type AvatarStackProps, type FollowUpRowProps, type SourceChipProps, type StatProps } from "./chips"
-export { InlineSource, type InlineSourceProps } from "./inline-source"
+export { IconTile, type IIconTileProps } from "./icon-tile"
+export { Thumbnail, type IThumbnailProps } from "./thumbnail"
+export { AvatarHandle, type IAvatarHandleProps } from "./avatar-handle"
+export { AddButton, PlayButton, RemoveButton, SendButton, type TSendButtonProps } from "./buttons"
+export { DurationPill, Favicon, FileTypeBadge, QuoteRail, type IFaviconProps } from "./badges"
+export { Waveform, type IWaveformProps } from "./waveform"
+export { DOT_TONE_CLASSES, Dot, LegendItem, Pill, type IDotProps, type TDotTone, type ILegendItemProps } from "./dot"
+export { SegmentedToggle, type ISegmentedToggleOption, type ISegmentedToggleProps } from "./segmented-toggle"
+export { AgentBadge, IconButton, type TIconButtonProps } from "./icon-button"
+export { Signal, Tag, type TSignalLevel, type ISignalProps, type ITagProps, type TTagTone } from "./tag"
+export { AvatarStack, FollowUpRow, SourceChip, Stat, type IAvatarStackProps, type IFollowUpRowProps, type ISourceChipProps, type IStatProps } from "./chips"
+export { InlineSource, type IInlineSourceProps } from "./inline-source"

package/src/components/ui/chat/inline-source.tsx

@@ -12,7 +12,7 @@ import { cn } from "@/lib/utils"
 import { Favicon } from "./badges"
 import { SourceChip } from "./chips"
 
-export interface InlineSourceProps
+export interface IInlineSourceProps
   extends Omit<React.ComponentPropsWithoutRef<"span">, "title"> {
   /** Domain shown in the chip ("scoopdata.io"). */
   domain: React.ReactNode
@@ -41,7 +41,7 @@ export function InlineSource({
   openLabel = "Open source",
   className,
   ...props
-}: InlineSourceProps): React.ReactElement {
+}: IInlineSourceProps): React.ReactElement {
   const chip = (
     <SourceChip
       className={cn(href || title || description ? "cursor-default" : null, className)}

package/src/components/ui/chat/segmented-toggle.tsx

@@ -6,13 +6,13 @@ import { cn } from "@/lib/utils"
 import { SPRING_LAYOUT } from "@/lib/ease"
 import { playCue } from "@/lib/sound"
 
-export interface SegmentedToggleOption<T extends string> {
+export interface ISegmentedToggleOption<T extends string> {
   value: T
   label: React.ReactNode
 }
 
-export interface SegmentedToggleProps<T extends string> extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> {
-  options: readonly SegmentedToggleOption<T>[]
+export interface ISegmentedToggleProps<T extends string> extends Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "defaultValue"> {
+  options: readonly ISegmentedToggleOption<T>[]
   value?: T
   defaultValue?: T
   onValueChange?: (value: T) => void
@@ -35,7 +35,7 @@ export function SegmentedToggle<T extends string>({
   sound = true,
   className,
   ...props
-}: SegmentedToggleProps<T>): React.ReactElement {
+}: ISegmentedToggleProps<T>): React.ReactElement {
   const reduceMotion = useReducedMotion()
   const layoutId = React.useId()
   const [internal, setInternal] = React.useState<T>(defaultValue ?? options[0].value)

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

@@ -1,17 +1,17 @@
 import type * as React from "react"
 import { cn } from "@/lib/utils"
 
-export type TagTone = "amber" | "purple" | "blue" | "green"
+export type TTagTone = "amber" | "purple" | "blue" | "green"
 
-const TONE: Record<TagTone, string> = {
+const TONE: Record<TTagTone, string> = {
   amber: "border-tag-amber-border bg-tag-amber-fill text-tag-amber-text",
   purple: "border-tag-purple-border bg-tag-purple-fill text-tag-purple-text",
   blue: "border-tag-blue-border bg-tag-blue-fill text-tag-blue-text",
   green: "border-tag-green-border bg-tag-green-fill text-tag-green-text",
 }
 
-export interface TagProps extends React.ComponentPropsWithoutRef<"span"> {
-  tone?: TagTone
+export interface ITagProps extends React.ComponentPropsWithoutRef<"span"> {
+  tone?: TTagTone
 }
 
 /**
@@ -19,7 +19,7 @@ export interface TagProps extends React.ComponentPropsWithoutRef<"span"> {
  *
  * @sketch "Atom / Tag / {Amber, Purple, Blue, Green}"
  */
-export function Tag({ tone = "blue", className, children, ...props }: TagProps): React.ReactElement {
+export function Tag({ tone = "blue", className, children, ...props }: ITagProps): React.ReactElement {
   return (
     <span
       data-slot="tag"
@@ -32,16 +32,16 @@ export function Tag({ tone = "blue", className, children, ...props }: TagProps):
   )
 }
 
-export type SignalLevel = "high" | "medium" | "low"
+export type TSignalLevel = "high" | "medium" | "low"
 
-const SIGNAL: Record<SignalLevel, { lit: number; color: string }> = {
+const SIGNAL: Record<TSignalLevel, { lit: number; color: string }> = {
   high: { lit: 3, color: "bg-semantic-success" },
   medium: { lit: 2, color: "bg-semantic-warning" },
   low: { lit: 1, color: "bg-text-muted" },
 }
 
-export interface SignalProps extends React.ComponentPropsWithoutRef<"span"> {
-  level?: SignalLevel
+export interface ISignalProps extends React.ComponentPropsWithoutRef<"span"> {
+  level?: TSignalLevel
 }
 
 /**
@@ -49,7 +49,7 @@ export interface SignalProps extends React.ComponentPropsWithoutRef<"span"> {
  *
  * @sketch "Atom / Signal / {High, Medium, Low}"
  */
-export function Signal({ level = "high", className, ...props }: SignalProps): React.ReactElement {
+export function Signal({ level = "high", className, ...props }: ISignalProps): React.ReactElement {
   const { lit, color } = SIGNAL[level]
   return (
     <span role="img" aria-label={`${level} signal`} data-slot="signal" data-level={level} className={cn("inline-flex h-2.5 items-end gap-0.5", className)} {...props}>

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

@@ -1,7 +1,7 @@
 import type * as React from "react"
 import { cn } from "@/lib/utils"
 
-export interface ThumbnailProps extends React.ComponentPropsWithoutRef<"span"> {
+export interface IThumbnailProps extends React.ComponentPropsWithoutRef<"span"> {
   src?: string
   alt?: string
   /** `sm` is the 40px chip tile (radius 10); `lg` the 240×160 preview (radius 14). */
@@ -13,7 +13,7 @@ export interface ThumbnailProps extends React.ComponentPropsWithoutRef<"span"> {
  *
  * @sketch "Atom / Thumbnail / Small", "Atom / Thumbnail / Large"
  */
-export function Thumbnail({ src, alt = "", size = "sm", className, children, ...props }: ThumbnailProps): React.ReactElement {
+export function Thumbnail({ src, alt = "", size = "sm", className, children, ...props }: IThumbnailProps): React.ReactElement {
   return (
     <span
       data-slot="thumbnail"

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

@@ -3,7 +3,7 @@ import { cn } from "@/lib/utils"
 
 const DEFAULT_BARS = [0.3, 0.6, 1, 0.75, 0.45, 0.9, 0.55, 0.35, 0.8, 1, 0.6, 0.4, 0.7, 0.5, 0.85, 0.3, 0.65, 0.95, 0.5, 0.35]
 
-export interface WaveformProps extends React.ComponentPropsWithoutRef<"span"> {
+export interface IWaveformProps extends React.ComponentPropsWithoutRef<"span"> {
   /** Bar heights in 0…1. Defaults to a 20-bar sample. */
   bars?: number[]
   /** Bars up to this index render in the accent colour (playback progress). */
@@ -15,7 +15,7 @@ export interface WaveformProps extends React.ComponentPropsWithoutRef<"span"> {
  *
  * @sketch "Atom / Waveform"
  */
-export function Waveform({ bars = DEFAULT_BARS, progress = 0, className, ...props }: WaveformProps): React.ReactElement {
+export function Waveform({ bars = DEFAULT_BARS, progress = 0, className, ...props }: IWaveformProps): React.ReactElement {
   return (
     <span aria-hidden="true" data-slot="waveform" className={cn("inline-flex h-5 items-center gap-[2.5px]", className)} {...props}>
       {bars.map((h, i) => (

package/src/components/ui/field.tsx

@@ -10,7 +10,7 @@ export function Field({
 }: FieldPrimitive.Root.Props): React.ReactElement {
   return (
     <FieldPrimitive.Root
-      className={cn("flex flex-col items-start gap-2", className)}
+      className={cn("flex flex-col items-start gap-1.5", className)}
       data-slot="field"
       {...props}
     />
@@ -56,7 +56,7 @@ export function FieldDescription({
       // interpolate-size (set on :root) plus a fade/blur rise. Removal is
       // unmount-instant; wrap in AnimatePresence when an exit is needed.
       className={cn(
-        "overflow-hidden text-muted-foreground text-xs transition-[height,opacity,filter,translate] duration-300 ease-smooth-out starting:h-0 starting:translate-y-1 starting:opacity-0 starting:blur-[2px] motion-reduce:transition-none",
+        "overflow-hidden text-muted-foreground text-xs ml-3 transition-[height,opacity,filter,translate] duration-300 ease-smooth-out starting:h-0 starting:translate-y-1 starting:opacity-0 starting:blur-small motion-reduce:transition-none",
         className,
       )}
       data-slot="field-description"
@@ -72,7 +72,7 @@ export function FieldError({
   return (
     <FieldPrimitive.Error
       className={cn(
-        "overflow-hidden text-destructive-foreground text-xs transition-[height,opacity,filter,translate] duration-300 ease-smooth-out starting:h-0 starting:translate-y-1 starting:opacity-0 starting:blur-[2px] motion-reduce:transition-none",
+        "overflow-hidden text-destructive-foreground text-xs ml-3 transition-[height,opacity,filter,translate] duration-300 ease-smooth-out starting:h-0 starting:translate-y-1 starting:opacity-0 starting:blur-small motion-reduce:transition-none",
         className,
       )}
       data-slot="field-error"

package/src/components/ui/glasscn/glass-button-group.tsx

@@ -1,45 +1,31 @@
 "use client"
 
 import {
-  type FrostGlassVariantProp,
-  glassVariantStyles,
+  type TFrostGlassVariantProp,
 } from "@/lib/glass-variants"
 import { cn } from "@/lib/utils"
 
 import { ButtonGroup } from "../button-group"
-import { LiquidGlass } from "./liquid-glass"
+import { GlassSurface } from "./liquid-glass"
 
-type GlassButtonGroupProps = React.ComponentProps<typeof ButtonGroup> &
-  FrostGlassVariantProp
+type TGlassButtonGroupProps = Omit<React.ComponentProps<typeof ButtonGroup>, "children"> & { children?: React.ReactNode } &
+  TFrostGlassVariantProp
 
 function GlassButtonGroup({
   className,
   glassVariant = "liquid-refract",
   children,
   ...props
-}: GlassButtonGroupProps) {
-  if (glassVariant === "liquid-refract") {
-    return (
-      <LiquidGlass className={cn("", className)}>
-        <ButtonGroup
-          data-slot="glass-button-group"
-          data-glass-variant={glassVariant}
-          className={cn("bg-transparent", className)}
-          {...props}
-        >
-          {children}
-        </ButtonGroup>
-      </LiquidGlass>
-    )
-  }
+}: TGlassButtonGroupProps) {
 
   return (
     <ButtonGroup
       data-slot="glass-button-group"
       data-glass-variant={glassVariant}
-      className={cn("rounded-lg", glassVariantStyles[glassVariant], className)}
+      className={cn("relative isolate rounded-lg", className)}
       {...props}
     >
+      <GlassSurface glassVariant={glassVariant} />
       {children}
     </ButtonGroup>
   )

package/src/components/ui/glasscn/glass-button.tsx

@@ -1,17 +1,17 @@
 "use client";
 
-import type { FrostGlassVariantProp } from "@/lib/glass-variants";
+import type { TFrostGlassVariantProp } from "@/lib/glass-variants";
 
-import { Button, type ButtonProps } from "../button";
+import { Button, type TButtonProps } from "../button";
 
-type GlassButtonProps = Omit<ButtonProps, "variant" | "glassVariant"> &
-  FrostGlassVariantProp;
+type TGlassButtonProps = Omit<TButtonProps, "variant" | "glassVariant"> &
+  TFrostGlassVariantProp;
 
 /** @deprecated Use `<Button variant="glass" glassVariant="…">` instead. */
 function GlassButton({
   glassVariant = "liquid-refract",
   ...props
-}: GlassButtonProps) {
+}: TGlassButtonProps) {
   return (
     <Button
       data-slot="glass-button"

package/src/components/ui/glasscn/glass-container.tsx

@@ -3,14 +3,12 @@
 import * as React from "react"
 
 import {
-  type FrostGlassVariant,
-  type FrostGlassVariantProp,
-  glassVariantStyles,
+  type TFrostGlassVariant,
 } from "@/lib/glass-variants"
 import { cn } from "@/lib/utils"
 import { LiquidGlass } from "./liquid-glass"
 
-const glassSidebarVariableStyles: Record<FrostGlassVariant, string> = {
+const glassSidebarVariableStyles: Record<TFrostGlassVariant, string> = {
   clear: [
     "[--sidebar:rgba(255,255,255,0.18)]",
     "[--sidebar-foreground:oklch(0.145_0_0)]",
@@ -82,50 +80,15 @@ const glassSidebarVariableStyles: Record<FrostGlassVariant, string> = {
   ].join(" "),
 }
 
-type GlassSidebarProps = React.HTMLAttributes<HTMLDivElement> &
-  FrostGlassVariantProp & { refraction?: number, bezel?: number, saturation?: number, blur?: number }
+type TGlassSidebarProps = React.ComponentProps<typeof LiquidGlass>
 
-function getGlassSidebarStandaloneClasses(glassVariant: FrostGlassVariant) {
-  return cn(
-    glassVariantStyles[glassVariant],
-    glassSidebarVariableStyles[glassVariant],
-    "overflow-hidden",
-    "shadow-[0_24px_80px_rgba(15,23,42,0.08)] dark:shadow-[0_24px_80px_rgba(0,0,0,0.28)]"
-  )
-}
-
-function GlassContainer({
-  glassVariant = "liquid-refract",
-  className,
-  children,
-  refraction,
-  bezel,
-  blur,
-  saturation,
-  ...props
-}: GlassSidebarProps) {
-  return (
-    <LiquidGlass
-      className={cn("rounded-[1.75rem]", className)}
-      refraction={refraction ?? 50}
-      bezel={bezel}
-      blur={blur}
-      saturation={saturation}
-    >
-      <div
-        className={cn(
-          getGlassSidebarStandaloneClasses(glassVariant),
-          glassVariant === "liquid-refract" &&
-            "border-0 bg-transparent shadow-none",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    </LiquidGlass>
-  )
+function GlassContainer({ glassVariant = "liquid-refract", className, ...props }: TGlassSidebarProps) {
+  return <LiquidGlass
+    glassVariant={glassVariant}
+    className={cn("rounded-[1.75rem]", glassSidebarVariableStyles[glassVariant], className)}
+    {...props}
+  />
 }
 
 export { GlassContainer, glassSidebarVariableStyles }
-export type { FrostGlassVariant } from "@/lib/glass-variants"
+export type { TFrostGlassVariant } from "@/lib/glass-variants"

package/src/components/ui/glasscn/glass-separator.tsx

@@ -1,14 +1,14 @@
 "use client"
 
 import {
-  type FrostGlassVariant,
-  type FrostGlassVariantProp,
+  type TFrostGlassVariant,
+  type TFrostGlassVariantProp,
 } from "@/lib/glass-variants"
 import { cn } from "@/lib/utils"
 
 import { Separator } from "../separator"
 
-const separatorVariantStyles: Record<FrostGlassVariant, string> = {
+const separatorVariantStyles: Record<TFrostGlassVariant, string> = {
   clear: "bg-white/[0.5] dark:bg-white/[0.12]",
   frosted: "bg-white/[0.4] dark:bg-white/10",
   subtle: "bg-black/[0.05] dark:bg-white/[0.08]",
@@ -18,14 +18,14 @@ const separatorVariantStyles: Record<FrostGlassVariant, string> = {
     "bg-gradient-to-r from-white/0 via-white/70 to-white/0 dark:via-white/25",
 }
 
-type GlassSeparatorProps = React.ComponentProps<typeof Separator> &
-  FrostGlassVariantProp
+type TGlassSeparatorProps = React.ComponentProps<typeof Separator> &
+  TFrostGlassVariantProp
 
 function GlassSeparator({
   className,
   glassVariant = "liquid-refract",
   ...props
-}: GlassSeparatorProps) {
+}: TGlassSeparatorProps) {
   return (
     <Separator
       data-slot="glass-separator"