sea-dev 1.0.0

package/libs/ui/src/components/ui/artifact.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { type LucideIcon, XIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+
+export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
+
+export const Artifact = ({ className, ...props }: ArtifactProps) => (
+  <div
+    className={cn(
+      "bg-background flex flex-col overflow-hidden rounded-lg border shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
+
+export const ArtifactHeader = ({ className, ...props }: ArtifactHeaderProps) => (
+  <div
+    className={cn("bg-muted/50 flex items-center justify-between border-b px-4 py-3", className)}
+    {...props}
+  />
+);
+
+export type ArtifactCloseProps = ComponentProps<typeof Button>;
+
+export const ArtifactClose = ({
+  className,
+  children,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}: ArtifactCloseProps) => (
+  <Button
+    className={cn("text-muted-foreground hover:text-foreground size-8 p-0", className)}
+    size={size}
+    type="button"
+    variant={variant}
+    {...props}
+  >
+    {children ?? <XIcon className="size-4" />}
+    <span className="sr-only">Close</span>
+  </Button>
+);
+
+export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
+  <p className={cn("text-foreground text-sm font-medium", className)} {...props} />
+);
+
+export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const ArtifactDescription = ({ className, ...props }: ArtifactDescriptionProps) => (
+  <p className={cn("text-muted-foreground text-sm", className)} {...props} />
+);
+
+export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
+
+export const ArtifactActions = ({ className, ...props }: ArtifactActionsProps) => (
+  <div className={cn("flex items-center gap-1", className)} {...props} />
+);
+
+export type ArtifactActionProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+  label?: string;
+  icon?: LucideIcon;
+};
+
+export const ArtifactAction = ({
+  tooltip,
+  label,
+  icon: Icon,
+  children,
+  className,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}: ArtifactActionProps) => {
+  const button = (
+    <Button
+      className={cn("text-muted-foreground hover:text-foreground size-8 p-0", className)}
+      size={size}
+      type="button"
+      variant={variant}
+      {...props}
+    >
+      {Icon ? <Icon className="size-4" /> : children}
+      <span className="sr-only">{label || tooltip}</span>
+    </Button>
+  );
+
+  if (tooltip) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return button;
+};
+
+export type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const ArtifactContent = ({ className, ...props }: ArtifactContentProps) => (
+  <div className={cn("flex-1 overflow-auto p-4", className)} {...props} />
+);

package/libs/ui/src/components/ui/attachments.tsx

@@ -0,0 +1,388 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card";
+import { cn } from "@/lib/utils";
+import type { FileUIPart, SourceDocumentUIPart } from "ai";
+import {
+  FileTextIcon,
+  GlobeIcon,
+  ImageIcon,
+  Music2Icon,
+  PaperclipIcon,
+  VideoIcon,
+  XIcon,
+} from "lucide-react";
+import type { ComponentProps, HTMLAttributes, ReactNode } from "react";
+import { createContext, useContext, useMemo } from "react";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type AttachmentData =
+  | (FileUIPart & { id: string })
+  | (SourceDocumentUIPart & { id: string });
+
+export type AttachmentMediaCategory =
+  | "image"
+  | "video"
+  | "audio"
+  | "document"
+  | "source"
+  | "unknown";
+
+export type AttachmentVariant = "grid" | "inline" | "list";
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+export const getMediaCategory = (data: AttachmentData): AttachmentMediaCategory => {
+  if (data.type === "source-document") {
+    return "source";
+  }
+
+  const mediaType = data.mediaType ?? "";
+
+  if (mediaType.startsWith("image/")) {
+    return "image";
+  }
+  if (mediaType.startsWith("video/")) {
+    return "video";
+  }
+  if (mediaType.startsWith("audio/")) {
+    return "audio";
+  }
+  if (mediaType.startsWith("application/") || mediaType.startsWith("text/")) {
+    return "document";
+  }
+
+  return "unknown";
+};
+
+export const getAttachmentLabel = (data: AttachmentData): string => {
+  if (data.type === "source-document") {
+    return data.title || data.filename || "Source";
+  }
+
+  const category = getMediaCategory(data);
+  return data.filename || (category === "image" ? "Image" : "Attachment");
+};
+
+// ============================================================================
+// Contexts
+// ============================================================================
+
+interface AttachmentsContextValue {
+  variant: AttachmentVariant;
+}
+
+const AttachmentsContext = createContext<AttachmentsContextValue | null>(null);
+
+interface AttachmentContextValue {
+  data: AttachmentData;
+  mediaCategory: AttachmentMediaCategory;
+  onRemove?: () => void;
+  variant: AttachmentVariant;
+}
+
+const AttachmentContext = createContext<AttachmentContextValue | null>(null);
+
+// ============================================================================
+// Hooks
+// ============================================================================
+
+export const useAttachmentsContext = () =>
+  useContext(AttachmentsContext) ?? { variant: "grid" as const };
+
+export const useAttachmentContext = () => {
+  const ctx = useContext(AttachmentContext);
+  if (!ctx) {
+    throw new Error("Attachment components must be used within <Attachment>");
+  }
+  return ctx;
+};
+
+// ============================================================================
+// Attachments - Container
+// ============================================================================
+
+export type AttachmentsProps = HTMLAttributes<HTMLDivElement> & {
+  variant?: AttachmentVariant;
+};
+
+export const Attachments = ({
+  variant = "grid",
+  className,
+  children,
+  ...props
+}: AttachmentsProps) => {
+  const contextValue = useMemo(() => ({ variant }), [variant]);
+
+  return (
+    <AttachmentsContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "flex items-start",
+          variant === "list" ? "flex-col gap-2" : "flex-wrap gap-2",
+          variant === "grid" && "ml-auto w-fit",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </AttachmentsContext.Provider>
+  );
+};
+
+// ============================================================================
+// Attachment - Item
+// ============================================================================
+
+export type AttachmentProps = HTMLAttributes<HTMLDivElement> & {
+  data: AttachmentData;
+  onRemove?: () => void;
+};
+
+export const Attachment = ({ data, onRemove, className, children, ...props }: AttachmentProps) => {
+  const { variant } = useAttachmentsContext();
+  const mediaCategory = getMediaCategory(data);
+
+  const contextValue = useMemo<AttachmentContextValue>(
+    () => ({ data, mediaCategory, onRemove, variant }),
+    [data, mediaCategory, onRemove, variant],
+  );
+
+  return (
+    <AttachmentContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "group relative",
+          variant === "grid" && "size-24 overflow-hidden rounded-lg",
+          variant === "inline" && [
+            "flex h-8 cursor-pointer items-center gap-1.5 select-none",
+            "border-border rounded-md border px-1.5",
+            "text-sm font-medium transition-all",
+            "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          ],
+          variant === "list" && [
+            "flex w-full items-center gap-3 rounded-lg border p-3",
+            "hover:bg-accent/50",
+          ],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </AttachmentContext.Provider>
+  );
+};
+
+// ============================================================================
+// AttachmentPreview - Media preview
+// ============================================================================
+
+export type AttachmentPreviewProps = HTMLAttributes<HTMLDivElement> & {
+  fallbackIcon?: ReactNode;
+};
+
+export const AttachmentPreview = ({
+  fallbackIcon,
+  className,
+  ...props
+}: AttachmentPreviewProps) => {
+  const { data, mediaCategory, variant } = useAttachmentContext();
+
+  const iconSize = variant === "inline" ? "size-3" : "size-4";
+
+  const renderImage = (url: string, filename: string | undefined, isGrid: boolean) =>
+    isGrid ? (
+      <img
+        alt={filename || "Image"}
+        className="size-full object-cover"
+        height={96}
+        src={url}
+        width={96}
+      />
+    ) : (
+      <img
+        alt={filename || "Image"}
+        className="size-full rounded object-cover"
+        height={20}
+        src={url}
+        width={20}
+      />
+    );
+
+  const renderIcon = (Icon: typeof ImageIcon) => (
+    <Icon className={cn(iconSize, "text-muted-foreground")} />
+  );
+
+  const renderContent = () => {
+    if (mediaCategory === "image" && data.type === "file" && data.url) {
+      return renderImage(data.url, data.filename, variant === "grid");
+    }
+
+    if (mediaCategory === "video" && data.type === "file" && data.url) {
+      return <video className="size-full object-cover" muted src={data.url} />;
+    }
+
+    const iconMap: Record<AttachmentMediaCategory, typeof ImageIcon> = {
+      image: ImageIcon,
+      video: VideoIcon,
+      audio: Music2Icon,
+      source: GlobeIcon,
+      document: FileTextIcon,
+      unknown: PaperclipIcon,
+    };
+
+    const Icon = iconMap[mediaCategory];
+    return fallbackIcon ?? renderIcon(Icon);
+  };
+
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center justify-center overflow-hidden",
+        variant === "grid" && "bg-muted size-full",
+        variant === "inline" && "bg-background size-5 rounded",
+        variant === "list" && "bg-muted size-12 rounded",
+        className,
+      )}
+      {...props}
+    >
+      {renderContent()}
+    </div>
+  );
+};
+
+// ============================================================================
+// AttachmentInfo - Name and type display
+// ============================================================================
+
+export type AttachmentInfoProps = HTMLAttributes<HTMLDivElement> & {
+  showMediaType?: boolean;
+};
+
+export const AttachmentInfo = ({
+  showMediaType = false,
+  className,
+  ...props
+}: AttachmentInfoProps) => {
+  const { data, variant } = useAttachmentContext();
+  const label = getAttachmentLabel(data);
+
+  if (variant === "grid") {
+    return null;
+  }
+
+  return (
+    <div className={cn("min-w-0 flex-1", className)} {...props}>
+      <span className="block truncate">{label}</span>
+      {showMediaType && data.mediaType && (
+        <span className="text-muted-foreground block truncate text-xs">{data.mediaType}</span>
+      )}
+    </div>
+  );
+};
+
+// ============================================================================
+// AttachmentRemove - Remove button
+// ============================================================================
+
+export type AttachmentRemoveProps = ComponentProps<typeof Button> & {
+  label?: string;
+};
+
+export const AttachmentRemove = ({
+  label = "Remove",
+  className,
+  children,
+  ...props
+}: AttachmentRemoveProps) => {
+  const { onRemove, variant } = useAttachmentContext();
+
+  if (!onRemove) {
+    return null;
+  }
+
+  return (
+    <Button
+      aria-label={label}
+      className={cn(
+        variant === "grid" && [
+          "absolute top-2 right-2 size-6 rounded-full p-0",
+          "bg-background/80 backdrop-blur-sm",
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          "hover:bg-background",
+          "[&>svg]:size-3",
+        ],
+        variant === "inline" && [
+          "size-5 rounded p-0",
+          "opacity-0 transition-opacity group-hover:opacity-100",
+          "[&>svg]:size-2.5",
+        ],
+        variant === "list" && ["size-8 shrink-0 rounded p-0", "[&>svg]:size-4"],
+        className,
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+        onRemove();
+      }}
+      type="button"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <XIcon />}
+      <span className="sr-only">{label}</span>
+    </Button>
+  );
+};
+
+// ============================================================================
+// AttachmentHoverCard - Hover preview
+// ============================================================================
+
+export type AttachmentHoverCardProps = ComponentProps<typeof HoverCard>;
+
+export const AttachmentHoverCard = ({
+  openDelay = 0,
+  closeDelay = 0,
+  ...props
+}: AttachmentHoverCardProps) => (
+  <HoverCard closeDelay={closeDelay} openDelay={openDelay} {...props} />
+);
+
+export type AttachmentHoverCardTriggerProps = ComponentProps<typeof HoverCardTrigger>;
+
+export const AttachmentHoverCardTrigger = (props: AttachmentHoverCardTriggerProps) => (
+  <HoverCardTrigger {...props} />
+);
+
+export type AttachmentHoverCardContentProps = ComponentProps<typeof HoverCardContent>;
+
+export const AttachmentHoverCardContent = ({
+  align = "start",
+  className,
+  ...props
+}: AttachmentHoverCardContentProps) => (
+  <HoverCardContent align={align} className={cn("w-auto p-2", className)} {...props} />
+);
+
+// ============================================================================
+// AttachmentEmpty - Empty state
+// ============================================================================
+
+export type AttachmentEmptyProps = HTMLAttributes<HTMLDivElement>;
+
+export const AttachmentEmpty = ({ className, children, ...props }: AttachmentEmptyProps) => (
+  <div
+    className={cn("text-muted-foreground flex items-center justify-center p-4 text-sm", className)}
+    {...props}
+  >
+    {children ?? "No attachments"}
+  </div>
+);

package/libs/ui/src/components/ui/avatar.tsx

@@ -0,0 +1,39 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarImage };

package/libs/ui/src/components/ui/badge.tsx

@@ -0,0 +1,43 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+        secondary:
+          "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+        destructive:
+          "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 border-transparent text-white",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        brand: "bg-brand text-brand-foreground [a&]:hover:bg-brand/90 border-transparent",
+        brandsec:
+          "bg-brand-sec text-brand-sec-foreground [a&]:hover:bg-brand-sec/90 border-transparent",
+        green: "border-transparent bg-emerald-100 text-emerald-600",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };

package/libs/ui/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,102 @@
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};