@sero-ai/ui 0.1.0

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,4 @@
+
+> @sero/ui@0.1.0 typecheck /Users/danielcarter/Documents/Dev/projects/sero/sero/packages/ui
+> tsc --noEmit
+

package/components.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "registries": {
+    "@ai-elements": "https://ai-sdk.dev/elements/api/registry/{name}.json"
+  }
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@sero-ai/ui",
+  "version": "0.1.0",
+  "description": "Shared UI components, AI elements, and design tokens for the Sero platform",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "catalog:peer",
+    "react-dom": "catalog:peer"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@headless-tree/core": "^1.6.3",
+    "@headless-tree/react": "^1.6.3",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@remixicon/react": "^4.9.0",
+    "@rive-app/react-webgl2": "^4.27.1",
+    "@streamdown/cjk": "^1.0.2",
+    "@streamdown/code": "^1.1.0",
+    "@streamdown/math": "^1.0.2",
+    "@streamdown/mermaid": "^1.0.2",
+    "@xyflow/react": "^12.10.1",
+    "ai": "^6.0.116",
+    "ansi-to-react": "^6.2.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "catalog:",
+    "media-chrome": "^4.18.0",
+    "motion": "catalog:",
+    "nanoid": "^5.1.6",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
+    "react-day-picker": "^9.14.0",
+    "react-hook-form": "^7.71.2",
+    "react-jsx-parser": "^2.4.1",
+    "react-resizable-panels": "^4.7.2",
+    "react-syntax-highlighter": "^16.1.1",
+    "recharts": "2.15.4",
+    "shiki": "^3.23.0",
+    "sonner": "^2.0.7",
+    "streamdown": "^2.4.0",
+    "tailwind-merge": "^3.5.0",
+    "tokenlens": "^1.3.1",
+    "use-stick-to-bottom": "^1.1.3",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "shadcn": "^3.8.5",
+    "tailwindcss": "catalog:",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "catalog:"
+  }
+}

package/src/components/ai-elements/agent.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import type { Tool } from "ai";
+import type { ComponentProps } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../ui/accordion";
+import { Badge } from "../ui/badge";
+import { cn } from "../../lib/utils";
+import { BotIcon } from "lucide-react";
+import { memo } from "react";
+
+import { CodeBlock } from "./code-block";
+
+export type AgentProps = ComponentProps<"div">;
+
+export const Agent = memo(({ className, ...props }: AgentProps) => (
+  <div
+    className={cn("not-prose w-full rounded-md border", className)}
+    {...props}
+  />
+));
+
+export type AgentHeaderProps = ComponentProps<"div"> & {
+  name: string;
+  model?: string;
+};
+
+export const AgentHeader = memo(
+  ({ className, name, model, ...props }: AgentHeaderProps) => (
+    <div
+      className={cn(
+        "flex w-full items-center justify-between gap-4 p-3",
+        className
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-2">
+        <BotIcon className="size-4 text-muted-foreground" />
+        <span className="font-medium text-sm">{name}</span>
+        {model && (
+          <Badge className="font-mono text-xs" variant="secondary">
+            {model}
+          </Badge>
+        )}
+      </div>
+    </div>
+  )
+);
+
+export type AgentContentProps = ComponentProps<"div">;
+
+export const AgentContent = memo(
+  ({ className, ...props }: AgentContentProps) => (
+    <div className={cn("space-y-4 p-4 pt-0", className)} {...props} />
+  )
+);
+
+export type AgentInstructionsProps = ComponentProps<"div"> & {
+  children: string;
+};
+
+export const AgentInstructions = memo(
+  ({ className, children, ...props }: AgentInstructionsProps) => (
+    <div className={cn("space-y-2", className)} {...props}>
+      <span className="font-medium text-muted-foreground text-sm">
+        Instructions
+      </span>
+      <div className="rounded-md bg-muted/50 p-3 text-muted-foreground text-sm">
+        <p>{children}</p>
+      </div>
+    </div>
+  )
+);
+
+export type AgentToolsProps = ComponentProps<typeof Accordion>;
+
+export const AgentTools = memo(({ className, ...props }: AgentToolsProps) => (
+  <div className={cn("space-y-2", className)}>
+    <span className="font-medium text-muted-foreground text-sm">Tools</span>
+    <Accordion className="rounded-md border" {...props} />
+  </div>
+));
+
+export type AgentToolProps = ComponentProps<typeof AccordionItem> & {
+  tool: Tool;
+};
+
+export const AgentTool = memo(
+  ({ className, tool, value, ...props }: AgentToolProps) => {
+    const schema =
+      "jsonSchema" in tool && tool.jsonSchema
+        ? tool.jsonSchema
+        : tool.inputSchema;
+
+    return (
+      <AccordionItem
+        className={cn("border-b last:border-b-0", className)}
+        value={value}
+        {...props}
+      >
+        <AccordionTrigger className="px-3 py-2 text-sm hover:no-underline">
+          {tool.description ?? "No description"}
+        </AccordionTrigger>
+        <AccordionContent className="px-3 pb-3">
+          <div className="rounded-md bg-muted/50">
+            <CodeBlock code={JSON.stringify(schema, null, 2)} language="json" />
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    );
+  }
+);
+
+export type AgentOutputProps = ComponentProps<"div"> & {
+  schema: string;
+};
+
+export const AgentOutput = memo(
+  ({ className, schema, ...props }: AgentOutputProps) => (
+    <div className={cn("space-y-2", className)} {...props}>
+      <span className="font-medium text-muted-foreground text-sm">
+        Output Schema
+      </span>
+      <div className="rounded-md bg-muted/50">
+        <CodeBlock code={schema} language="typescript" />
+      </div>
+    </div>
+  )
+);
+
+Agent.displayName = "Agent";
+AgentHeader.displayName = "AgentHeader";
+AgentContent.displayName = "AgentContent";
+AgentInstructions.displayName = "AgentInstructions";
+AgentTools.displayName = "AgentTools";
+AgentTool.displayName = "AgentTool";
+AgentOutput.displayName = "AgentOutput";

package/src/components/ai-elements/artifact.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+
+import { Button } from "../ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+import { cn } from "../../lib/utils";
+import { XIcon } from "lucide-react";
+
+export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
+
+export const Artifact = ({ className, ...props }: ArtifactProps) => (
+  <div
+    className={cn(
+      "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
+
+export const ArtifactHeader = ({
+  className,
+  ...props
+}: ArtifactHeaderProps) => (
+  <div
+    className={cn(
+      "flex items-center justify-between border-b bg-muted/50 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(
+      "size-8 p-0 text-muted-foreground hover:text-foreground",
+      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("font-medium text-foreground text-sm", 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(
+        "size-8 p-0 text-muted-foreground hover:text-foreground",
+        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} />
+);