@exegia/corpora-ui 3.0.0 → 4.0.0

package/src/components/ui/button.tsx

@@ -1,192 +0,0 @@
-"use client";
-
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-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 { GlassSurface } from "@/components/ui/glasscn/liquid-glass";
-import {
-  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-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: [
-      {
-        // `link` is inline text, not a control surface: drop the button box so
-        // it sits with the surrounding copy instead of riding high in a 32/36px
-        // flex box. Both the bare and `sm:` heights have to be reset —
-        // tailwind-merge keeps modifier-prefixed classes in a separate group,
-        // so a call-site `h-auto` alone still loses to `sm:h-8`. border-0 makes
-        // the inline box exactly one line-height so it doesn't grow the line.
-        //
-        // align-middle is the alignment that holds: an inline-flex box exposes
-        // the baseline of its *first* flex item, which here is the always-
-        // mounted loading indicator rather than the label, so plain baseline
-        // alignment leaves the text ~3px high. `items-baseline` fixes that but
-        // then hangs icons 3px above the label. Centering the box lands within
-        // ~1px in every state without touching the loading-morph machinery.
-        //
-        // Icon sizes are excluded; they keep their square hit area.
-        class: "h-auto border-0 px-0 align-middle sm:h-auto",
-        size: ["xs", "sm", "default", "lg", "xl"],
-        variant: "link",
-      },
-    ],
-    defaultVariants: {
-      size: "default",
-      variant: "default",
-    },
-    variants: {
-      size: {
-        default: "h-9 px-[calc(--spacing(3)-1px)] sm:h-8",
-        icon: "size-9 sm:size-8",
-        "icon-lg": "size-8 sm:size-8",
-        "icon-sm": "size-7 sm:size-6",
-        "icon-xl":
-          "size-10 sm:size-9 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
-        "icon-xs":
-          "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
-        sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
-        xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
-        xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
-      },
-      variant: {
-        default:
-          "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:
-          "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:
-          "border-transparent text-foreground hover:bg-accent data-pressed:bg-accent *:data-[slot=button-loading-indicator]:text-foreground",
-        // Base for the glass treatment. The finish itself (blur, tint, bevel)
-        // comes from glassVariantStyles keyed by the `glassVariant` prop,
-        // which is only accepted when variant is "glass".
-        glass:
-          "border-transparent text-foreground *:data-[slot=button-loading-indicator]:text-foreground",
-        link: "border-transparent text-foreground underline-offset-4 hover:underline data-pressed:underline *:data-[slot=button-loading-indicator]:text-foreground",
-        outline:
-          "border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] hover:bg-accent/50 data-pressed:bg-accent/50 *:data-[slot=button-loading-indicator]:text-foreground dark:bg-input/32 dark:data-pressed:bg-input/64 dark:hover:bg-input/64 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",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90 *:data-[slot=button-loading-indicator]:text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80",
-      },
-    },
-  },
-);
-
-type TButtonVariant = VariantProps<typeof buttonVariants>["variant"];
-
-interface IButtonBaseProps extends useRender.ComponentProps<"button"> {
-  size?: VariantProps<typeof buttonVariants>["size"];
-  loading?: boolean;
-  /**
-   * Emit cuelume press/release attributes. Inert unless the app opts into
-   * interaction sound by calling `bindSounds()` once.
-   */
-  sound?: boolean;
-}
-
-export type TButtonProps = IButtonBaseProps &
-  (
-    | {
-        variant: "glass";
-        /** Glass finish. Only available when `variant` is "glass". */
-        glassVariant?: TFrostGlassVariant;
-      }
-    | {
-        variant?: Exclude<TButtonVariant, "glass">;
-        glassVariant?: never;
-      }
-  );
-
-export function Button({
-  className,
-  variant,
-  size,
-  render,
-  children,
-  loading = false,
-  disabled: disabledProp,
-  glassVariant,
-  sound = true,
-  ...props
-}: TButtonProps): React.ReactElement {
-  const isDisabled: boolean = Boolean(loading || disabledProp);
-  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
-    render ? undefined : "button";
-
-  const resolvedGlassVariant: TFrostGlassVariant | undefined =
-    variant === "glass" ? (glassVariant ?? "liquid-refract") : undefined;
-
-
-  // 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.
-  const isIconSize = (size ?? "default").startsWith("icon");
-
-  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
-          // per size) with a matching negative margin.
-          <span
-            aria-hidden={loading ? undefined : true}
-            data-slot="button-loading-indicator"
-            className={cn(
-              "pointer-events-none inline-flex shrink-0 items-center overflow-hidden transition-[max-width,margin-inline-start,opacity,filter] duration-300 ease-smooth-out motion-reduce:transition-none",
-              loading
-                ? "max-w-6"
-                : cn(
-                    "max-w-0 opacity-0 blur-small",
-                    size === "xs" ? "-ms-1" : size === "sm" ? "-ms-1.5" : "-ms-2",
-                  ),
-            )}
-          >
-            <Spinner className={loading ? undefined : "animate-none"} />
-          </span>
-        )}
-        {children}
-        {loading && isIconSize && (
-          <Spinner
-            className="pointer-events-none absolute"
-            data-slot="button-loading-indicator"
-          />
-        )}
-      </>
-    ),
-    className: cn(
-      buttonVariants({ size, variant }),
-      // 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-101 motion-reduce:hover:[&_svg]:scale-100",
-      loading && isIconSize && "data-loading:text-transparent",
-      resolvedGlassVariant && cn("isolate", liquidRefractStyles),
-      className,
-    ),
-    "aria-disabled": loading || undefined,
-    "data-cuelume-press": sound ? "" : undefined,
-    "data-cuelume-release": sound ? "" : undefined,
-    "data-loading": loading ? "" : undefined,
-    "data-glass-variant": resolvedGlassVariant,
-    "data-slot": "button",
-    disabled: isDisabled,
-    type: typeValue,
-  };
-
-  const element = useRender({
-    defaultTagName: "button",
-    props: mergeProps<"button">(defaultProps, props),
-    render,
-  });
-
-  return element;
-}

package/src/components/ui/card.tsx

@@ -1,253 +0,0 @@
-"use client";
-
-import { mergeProps } from "@base-ui/react/merge-props";
-import { useRender } from "@base-ui/react/use-render";
-import type React from "react";
-import { cn } from "@/lib/utils";
-
-export function Card({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn(
-      "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",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export function CardFrame({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn(
-      "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",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export function CardFrameHeader({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn(
-      "relative flex grid auto-rows-min grid-rows-[auto_auto] flex-col items-start gap-x-4 px-6 py-4 has-data-[slot=card-frame-action]:grid-cols-[1fr_auto]",
-      className,
-    ),
-    "data-slot": "card-frame-header",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export function CardFrameTitle({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn("self-center font-semibold text-sm", className),
-    "data-slot": "card-frame-title",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export function CardFrameDescription({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn("self-center text-muted-foreground text-sm", className),
-    "data-slot": "card-frame-description",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export function CardFrameAction({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn(
-      "col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end",
-      className,
-    ),
-    "data-slot": "card-frame-action",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export function CardFrameFooter({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn("px-6 py-4", className),
-    "data-slot": "card-frame-footer",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export function CardHeader({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn(
-      "grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pb-4 has-data-[slot=card-action]:grid-cols-[1fr_auto]",
-      className,
-    ),
-    "data-slot": "card-header",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export function CardTitle({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn("font-heading font-semibold text-lg leading-none", className),
-    "data-slot": "card-title",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export function CardDescription({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn("text-muted-foreground text-sm", className),
-    "data-slot": "card-description",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export function CardAction({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn(
-      "col-start-2 row-span-2 row-start-1 inline-flex self-start justify-self-end",
-      className,
-    ),
-    "data-slot": "card-action",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export function CardPanel({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn(
-      "flex-1 p-6 in-[[data-slot=card]:has(>[data-slot=card-header]:not(.border-b))]:pt-0 in-[[data-slot=card]:has(>[data-slot=card-footer]:not(.border-t))]:pb-0",
-      className,
-    ),
-    "data-slot": "card-panel",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export function CardFooter({
-  className,
-  render,
-  ...props
-}: useRender.ComponentProps<"div">): React.ReactElement {
-  const defaultProps = {
-    className: cn(
-      "flex items-center p-6 in-[[data-slot=card]:has(>[data-slot=card-panel])]:pt-4",
-      className,
-    ),
-    "data-slot": "card-footer",
-  };
-
-  return useRender({
-    defaultTagName: "div",
-    props: mergeProps<"div">(defaultProps, props),
-    render,
-  });
-}
-
-export { CardPanel as CardContent };

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

@@ -1,27 +0,0 @@
-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

@@ -1,30 +0,0 @@
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-
-export interface IAvatarHandleProps 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 }: IAvatarHandleProps): 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

@@ -1,85 +0,0 @@
-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 IFaviconProps 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 }: IFaviconProps): 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}
-    />
-  )
-}

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

@@ -1,94 +0,0 @@
-"use client"
-
-import { Play, Plus, X } from "lucide-react"
-import type * as React from "react"
-import { cn } from "@/lib/utils"
-import { Button, type TButtonProps } from "@/components/ui/button"
-
-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 }: TIconButtonProps): React.ReactElement {
-  return (
-    <Button
-      aria-label="Remove"
-      variant="ghost"
-      size="icon-xs"
-      className={cn(
-        "size-[18px] rounded-full border-0 bg-text-primary text-text-inverse hover:bg-text-primary/85 sm:size-[18px] [&_svg]:size-2.5! [&_svg]:opacity-100",
-        className
-      )}
-      {...props}
-    >
-      <X strokeWidth={3} />
-    </Button>
-  )
-}
-
-/**
- * 36px scrim circle with a white play glyph, centred on media previews.
- *
- * @sketch "Atom / Button / Play"
- */
-export function PlayButton({ className, ...props }: TIconButtonProps): React.ReactElement {
-  return (
-    <Button
-      aria-label="Play"
-      variant="ghost"
-      size="icon"
-      className={cn(
-        "size-9 rounded-full border-0 bg-overlay-scrim text-overlay-on-media hover:bg-overlay-scrim/80 sm:size-9 [&_svg]:size-3.5! [&_svg]:translate-x-px [&_svg]:fill-current [&_svg]:opacity-100",
-        className
-      )}
-      {...props}
-    >
-      <Play />
-    </Button>
-  )
-}
-
-/**
- * 26px ghost "+" for the composer's attach action.
- *
- * @sketch "Atom / Button / Add"
- */
-export function AddButton({ className, ...props }: TIconButtonProps): React.ReactElement {
-  return (
-    <Button
-      aria-label="Add attachment"
-      variant="ghost"
-      size="icon-xs"
-      className={cn("size-[26px] rounded-md text-icon sm:size-[26px] [&_svg]:size-4!", className)}
-      {...props}
-    >
-      <Plus />
-    </Button>
-  )
-}
-
-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 }: TSendButtonProps): React.ReactElement {
-  return (
-    <Button
-      variant="ghost"
-      size="sm"
-      className={cn(
-        "h-[31px] rounded-md border-0 bg-brand px-4 text-[13px] font-semibold text-[#1a1a1a] shadow-none hover:bg-brand/90 data-pressed:bg-brand/90 sm:h-[31px] *:data-[slot=button-loading-indicator]:text-[#1a1a1a]",
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </Button>
-  )
-}