@exegia/corpora-ui 0.29.0 → 1.0.0

package/src/components/ui/avatar.tsx

@@ -1,52 +1,109 @@
-"use client";
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+import { cn } from "cn"
 
-import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
-import type React from "react";
-import { cn } from "@/lib/utils";
-
-export function Avatar({
+function Avatar({
   className,
+  size = "md",
   ...props
-}: AvatarPrimitive.Root.Props): React.ReactElement {
+}: AvatarPrimitive.Root.Props & {
+  size?: "sm" | "md" | "lg" | "xl" | "xxl"
+}) {
   return (
     <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
       className={cn(
-        "inline-flex size-8 shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-background align-middle font-medium text-xs",
-        className,
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=xl]:size-12 data-[size=xxl]:size-16 data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
       )}
-      data-slot="avatar"
       {...props}
     />
-  );
+  )
 }
 
-export function AvatarImage({
-  className,
-  ...props
-}: AvatarPrimitive.Image.Props): React.ReactElement {
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
   return (
     <AvatarPrimitive.Image
-      className={cn("size-full object-cover", className)}
       data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
       {...props}
     />
-  );
+  )
 }
 
-export function AvatarFallback({
+function AvatarFallback({
   className,
   ...props
-}: AvatarPrimitive.Fallback.Props): React.ReactElement {
+}: AvatarPrimitive.Fallback.Props) {
   return (
     <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
       className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted",
-        className,
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=md]/avatar:size-2.5 group-data-[size=md]/avatar:[&>svg]:size-1.5",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        "group-data-[size=xl]/avatar:size-3 group-data-[size=xl]/avatar:-right-0.5 group-data-[size=xl]/avatar:-bottom-0.5 group-data-[size=xl]/avatar:[&>svg]:size-2",
+        "group-data-[size=xxl]/avatar:size-4 group-data-[size=xxl]/avatar:right-0.5 group-data-[size=xxl]/avatar:bottom-0.5 group-data-[size=xxl]/avatar:[&>svg]:size-3",
+        className
+
       )}
-      data-slot="avatar-fallback"
       {...props}
     />
-  );
+  )
 }
 
-export { AvatarPrimitive };
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs/relaxed text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}

package/src/components/ui/badge.tsx

@@ -5,48 +5,97 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-2.5!",
+  [
+    "relative inline-flex w-fit shrink-0 items-center justify-center border border-transparent font-medium whitespace-nowrap transition-shadow outline-none",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-3",
+  ],
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline:
-          "border-border bg-input/20 text-foreground dark:bg-input/30 [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
+        default: "bg-primary text-primary-foreground",
+        outline: "border-border bg-transparent dark:bg-input/32",
+        secondary: "bg-secondary text-secondary-foreground",
+        info: "bg-info text-white",
+        success: "bg-success text-white",
+        warning: "bg-warning text-white",
+        destructive: "bg-destructive text-white",
+        focus: "bg-focus text-focus-foreground",
+        invert: "bg-invert text-invert-foreground",
+        "primary-light":
+          "border-primary/10 bg-primary/10 text-primary dark:border-primary/25 dark:bg-primary/15 dark:text-primary",
+        "warning-light":
+          "border-warning/15 bg-warning/10 text-warning-foreground dark:border-warning/25 dark:bg-warning/15 dark:text-warning",
+        "success-light":
+          "border-success/15 bg-success/10 text-success-foreground dark:border-success/25 dark:bg-success/15 dark:text-success",
+        "info-light":
+          "border-info/15 bg-info/10 text-info-foreground dark:border-info/25 dark:bg-info/15 dark:text-info",
+        "destructive-light":
+          "border-destructive/15 bg-destructive/10 text-destructive-foreground dark:border-destructive/25 dark:bg-destructive/15 dark:text-destructive",
+        "invert-light":
+          "border-invert/15 bg-invert/10 text-foreground dark:border-invert/45 dark:bg-invert/35 dark:text-invert-foreground",
+        "focus-light":
+          "border-focus/15 bg-focus/10 text-focus-foreground dark:border-focus/25 dark:bg-focus/15 dark:text-focus",
+        "primary-outline":
+          "border-border bg-background text-primary dark:bg-input/30",
+        "warning-outline":
+          "border-border bg-background text-warning-foreground dark:bg-input/30",
+        "success-outline":
+          "border-border bg-background text-success-foreground dark:bg-input/30",
+        "info-outline":
+          "border-border bg-background text-info-foreground dark:bg-input/30",
+        "destructive-outline":
+          "border-border bg-background text-destructive-foreground dark:bg-input/30",
+        "invert-outline":
+          "border-border bg-background text-invert-foreground dark:bg-input/30",
+        "focus-outline":
+          "text-focus-foreground border-border bg-background dark:bg-input/30",
+      },
+      size: {
+        xs: "h-4 min-w-4 gap-1 px-1 py-0.25 text-[0.6rem] leading-none",
+        sm: "h-4.5 min-w-4.5 gap-1 px-1 py-0.25 text-[0.625rem] leading-none",
+        default: "h-5 min-w-5 gap-1 px-1.25 py-0.5 text-xs",
+        lg: "h-5.5 min-w-5.5 gap-1 px-1.5 py-0.5 text-xs",
+        xl: "h-6 min-w-6 gap-1.5 px-2 py-0.75 text-sm",
+      },
+      /** `default`: active style radius. `full`: pill radius. */
+      radius: {
+        default: "rounded-sm",
+        full: "rounded-full",
       },
     },
     defaultVariants: {
       variant: "default",
+      size: "default",
+      radius: "default",
     },
   }
 )
 
+interface BadgeProps extends useRender.ComponentProps<"span"> {
+  variant?: VariantProps<typeof badgeVariants>["variant"]
+  size?: VariantProps<typeof badgeVariants>["size"]
+  radius?: VariantProps<typeof badgeVariants>["radius"]
+}
+
 function Badge({
   className,
-  variant = "default",
+  variant,
+  size,
+  radius,
   render,
   ...props
-}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+}: BadgeProps) {
+  const defaultProps = {
+    "data-slot": "badge",
+    className: cn(badgeVariants({ variant, size, radius, className })),
+  }
+
   return useRender({
     defaultTagName: "span",
-    props: mergeProps<"span">(
-      {
-        className: cn(badgeVariants({ variant }), className),
-      },
-      props
-    ),
     render,
-    state: {
-      slot: "badge",
-      variant,
-    },
+    props: mergeProps<"span">(defaultProps, props),
   })
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants, type BadgeProps }

package/src/components/ui/bubble.story.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Bubble } from "@/components/atoms/bubble"
+
+type PreviewProps = Pick<ComponentProps<typeof Bubble>, "variant" | "continued">
+
+function BubblePreview(props: PreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="max-w-lg">
+        <Bubble {...props}>
+          {!props.continued && (
+            <Bubble.Header>
+              <span>John Doe</span>
+              <span className="text-muted-foreground">10 min ago</span>
+            </Bubble.Header>
+          )}
+          <Bubble.Message>
+            Can you check whether this passage keeps the boundary?
+          </Bubble.Message>
+          <Bubble.Reactions
+            reactions={[
+              {
+                id: "heart",
+                emoji: "❤️",
+                count: 4,
+                reacted: true,
+                label: "heart",
+              },
+            ]}
+          />
+        </Bubble>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: BubblePreview,
+  args: { initial: { variant: "recipient", continued: false } },
+})
+
+export const Preview = story.WithControl

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

@@ -7,14 +7,14 @@ import { cn } from "@/lib/utils"
 import { Separator } from "@/components/ui/separator"
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
         horizontal:
-          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
         vertical:
-          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
       },
     },
     defaultVariants: {
@@ -49,7 +49,7 @@ function ButtonGroupText({
     props: mergeProps<"div">(
       {
         className: cn(
-          "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          "flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
           className
         ),
       },

package/src/components/ui/button.story.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { defineStory } from "@/registry/story"
+import { BookOpen } from "lucide-react"
+import { Button, type ButtonProps } from "./button"
+
+type PreviewProps = Pick<
+  ButtonProps,
+  "variant" | "glassVariant" | "size" | "loading" | "disabled" | "sound"
+> & { children: string }
+
+function ButtonPreview({
+  variant,
+  glassVariant,
+  size,
+  children,
+  ...props
+}: PreviewProps) {
+  const isIconSize = size?.startsWith("icon")
+  const content = isIconSize ? <BookOpen aria-hidden /> : children
+
+  return (
+    <div className="min-h-32 p-6 flex items-center justify-center">
+      {variant === "glass" ? (
+        <Button
+          {...props}
+          aria-label={isIconSize ? children : undefined}
+          variant="glass"
+          glassVariant={glassVariant}
+          size={size}
+        >
+          {content}
+        </Button>
+      ) : (
+        <Button
+          {...props}
+          aria-label={isIconSize ? children : undefined}
+          variant={variant}
+          size={size}
+        >
+          {content}
+        </Button>
+      )}
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: ButtonPreview,
+  args: {
+    initial: {
+      children: "Consult manuscript",
+      variant: "outline",
+      size: "default",
+      loading: false,
+      disabled: false,
+      sound: true,
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/button.tsx

@@ -14,7 +14,7 @@ import {
 } from "@/lib/glass-variants";
 
 export const buttonVariants = cva(
-  "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg 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-lg)-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-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",
   {
     compoundVariants: [
       {
@@ -59,9 +59,9 @@ export const buttonVariants = cva(
       },
       variant: {
         default:
-          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs hover:bg-primary/90 data-pressed:bg-primary/90 *:data-[slot=button-loading-indicator]:text-primary-foreground [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none",
+          "inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs hover:bg-primary/90 data-pressed:bg-primary/90 *:data-[slot=button-loading-indicator]:text-primary-foreground [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none disabled:opacity-50!",
         destructive:
-          "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs hover:bg-destructive/90 data-pressed:bg-destructive/90 *:data-[slot=button-loading-indicator]:text-white [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none",
+          "inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs hover:bg-destructive/90 data-pressed:bg-destructive/90 *:data-[slot=button-loading-indicator]:text-white [:active,[data-pressed]]:inset-shadow-[0_1px_--theme(--color-black/8%)] [:disabled,:active,[data-pressed]]:shadow-none",
         "destructive-outline":
           "border-input bg-popover not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:border-destructive/32 hover:bg-destructive/4 data-pressed:border-destructive/32 data-pressed:bg-destructive/4 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none",
         ghost:

package/src/components/ui/card.story.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Card, CardHeader, CardPanel, CardTitle } from "./card"
+
+type PreviewProps = Pick<ComponentProps<typeof Card>, "className"> & {
+  children: string
+}
+
+function CardPreview({ children, ...props }: PreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="max-w-sm">
+        <Card {...props}>
+          <CardHeader>
+            <CardTitle>Manuscript</CardTitle>
+          </CardHeader>
+          <CardPanel>{children}</CardPanel>
+        </Card>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: CardPreview,
+  args: {
+    initial: {
+      className: "",
+      children: "Explore this passage and its annotations.",
+    },
+  },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/card.tsx

@@ -12,7 +12,7 @@ export function Card({
 }: useRender.ComponentProps<"div">): React.ReactElement {
   const defaultProps = {
     className: cn(
-      "relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+      "relative flex flex-col rounded-md border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
       className,
     ),
     "data-slot": "card",
@@ -32,7 +32,7 @@ export function CardFrame({
 }: useRender.ComponentProps<"div">): React.ReactElement {
   const defaultProps = {
     className: cn(
-      "relative flex flex-col rounded-2xl border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=table-container]:overflow-hidden *:data-[slot=card]:-m-px *:data-[slot=table-container]:-m-px *:data-[slot=table-container]:w-[calc(100%+2px)] *:not-first:data-[slot=card]:rounded-t-xl *:not-last:data-[slot=card]:rounded-b-xl *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--radius-xl)-1px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--radius-xl)-1px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--radius-2xl)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]",
+      "relative flex flex-col rounded-(--frame-radius) border bg-card not-dark:bg-clip-padding text-card-foreground shadow-xs/5 [--clip-bottom:-1rem] [--clip-top:-1rem] [--frame-radius:var(--radius-md)] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--frame-radius)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] has-data-[slot=table-container]:overflow-hidden *:data-[slot=card]:-m-px *:data-[slot=card]:rounded-(--frame-radius) *:data-[slot=table-container]:-m-px *:data-[slot=table-container]:w-[calc(100%+2px)] *:not-first:data-[slot=card]:rounded-t-[calc(var(--frame-radius)-1px)] *:not-last:data-[slot=card]:rounded-b-[calc(var(--frame-radius)-1px)] *:data-[slot=card]:bg-clip-padding *:data-[slot=card]:shadow-none *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[calc(var(--frame-radius)-2px)] *:not-last:data-[slot=card]:before:rounded-b-[calc(var(--frame-radius)-2px)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--frame-radius)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]",
       className,
     ),
     "data-slot": "card-frame",

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

@@ -0,0 +1,27 @@
+import { describe, expect, mock, test } from "bun:test"
+import { fireEvent, render, screen } from "@testing-library/react"
+
+import { SegmentedToggle } from "../segmented-toggle"
+
+const OPTIONS = [{ value: "preview", label: "Preview" }, { value: "markup", label: "Markup" }] as const
+
+describe("SegmentedToggle", () => {
+  test("uncontrolled: click and arrow keys move the selection", () => {
+    const onValueChange = mock(() => {})
+    render(<SegmentedToggle label="View" options={OPTIONS} onValueChange={onValueChange} />)
+    const [preview, markup] = screen.getAllByRole("radio")
+    expect(preview.getAttribute("aria-checked")).toBe("true")
+    fireEvent.click(markup)
+    expect(markup.getAttribute("aria-checked")).toBe("true")
+    expect(onValueChange).toHaveBeenLastCalledWith("markup")
+    fireEvent.keyDown(markup, { key: "ArrowRight" })
+    expect(preview.getAttribute("aria-checked")).toBe("true")
+  })
+
+  test("controlled: value wins over clicks", () => {
+    render(<SegmentedToggle label="View" options={OPTIONS} value="markup" />)
+    const [preview, markup] = screen.getAllByRole("radio")
+    fireEvent.click(preview)
+    expect(markup.getAttribute("aria-checked")).toBe("true")
+  })
+})

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

@@ -0,0 +1,30 @@
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+
+export interface AvatarHandleProps extends React.ComponentPropsWithoutRef<"span"> {
+  src?: string
+  /** Initials shown when no image loads; two characters at most. */
+  initials?: string
+  size?: 16 | 20
+}
+
+/**
+ * 20px avatar for @-handle chips and reply headers.
+ *
+ * @sketch "Atom / Avatar / Handle 20"
+ */
+export function AvatarHandle({ src, initials, size = 20, className, ...props }: AvatarHandleProps): React.ReactElement {
+  return (
+    <span
+      data-slot="avatar-handle"
+      className={cn(
+        "inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-accent-subtle font-semibold text-accent-text",
+        size === 20 ? "size-5 text-[8px]" : "size-4 text-[7px]",
+        className
+      )}
+      {...props}
+    >
+      {src ? <img alt="" className="size-full object-cover" src={src} /> : initials?.slice(0, 2).toUpperCase()}
+    </span>
+  )
+}

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

@@ -0,0 +1,85 @@
+import { Globe } from "lucide-react"
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+
+/**
+ * 28×14 uppercase file-format badge ("PDF", "CSV").
+ *
+ * @sketch "Atom / Badge / File Type"
+ */
+export function FileTypeBadge({ className, children, ...props }: React.ComponentPropsWithoutRef<"span">): React.ReactElement {
+  return (
+    <span
+      data-slot="file-type-badge"
+      className={cn(
+        "inline-flex h-3.5 min-w-7 shrink-0 items-center justify-center rounded-[4px] bg-surface-subtle px-1 text-[8px] font-bold uppercase leading-none tracking-wide text-text-secondary",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+export interface FaviconProps extends React.ComponentPropsWithoutRef<"span"> {
+  src?: string
+  size?: 14 | 16
+}
+
+/**
+ * 16px site icon tile with a globe fallback.
+ *
+ * @sketch "Atom / Favicon"
+ */
+export function Favicon({ src, size = 16, className, ...props }: FaviconProps): React.ReactElement {
+  return (
+    <span
+      data-slot="favicon"
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-[4px] bg-surface-subtle text-icon",
+        size === 16 ? "size-4 [&_svg]:size-2.5" : "size-3.5 [&_svg]:size-2",
+        className
+      )}
+      {...props}
+    >
+      {src ? <img alt="" className="size-full object-cover" src={src} /> : <Globe />}
+    </span>
+  )
+}
+
+/**
+ * Scrim pill with a mono duration ("0:42"), bottom-right of media previews.
+ *
+ * @sketch "Atom / Duration Pill"
+ */
+export function DurationPill({ className, children, ...props }: React.ComponentPropsWithoutRef<"span">): React.ReactElement {
+  return (
+    <span
+      data-slot="duration-pill"
+      className={cn(
+        "inline-flex h-4 shrink-0 items-center rounded-[4px] bg-overlay-scrim px-1.5 font-mono text-[10px] font-medium leading-none text-overlay-on-media",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  )
+}
+
+/**
+ * 3px accent bar that rails a quote or reply.
+ *
+ * @sketch "Atom / Quote Rail"
+ */
+export function QuoteRail({ className, ...props }: React.ComponentPropsWithoutRef<"span">): React.ReactElement {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="quote-rail"
+      className={cn("block w-[3px] shrink-0 self-stretch rounded-full bg-accent-default", className)}
+      {...props}
+    />
+  )
+}