@sero-ai/ui 0.2.0 → 0.3.0

package/package.json

@@ -1,21 +1,20 @@
 {
   "name": "@sero-ai/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Shared UI components, AI elements, and design tokens for the Sero platform",
   "type": "module",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./*": "./src/*",
-    "./package.json": "./package.json"
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
   },
   "peerDependencies": {
-    "react": "catalog:peer",
-    "react-dom": "catalog:peer"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
@@ -24,7 +23,6 @@
     "@radix-ui/react-use-controllable-state": "^1.2.2",
     "@remixicon/react": "^4.9.0",
     "@rive-app/react-webgl2": "^4.27.1",
-    "@sero-ai/common": "workspace:*",
     "@streamdown/cjk": "^1.0.2",
     "@streamdown/code": "^1.1.0",
     "@streamdown/math": "^1.0.2",
@@ -38,9 +36,9 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "catalog:",
+    "lucide-react": "^0.563.0",
     "media-chrome": "^4.18.0",
-    "motion": "catalog:",
+    "motion": "^12.34.0",
     "nanoid": "^5.1.11",
     "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
@@ -52,20 +50,27 @@
     "recharts": "2.15.4",
     "shiki": "^3.23.0",
     "sonner": "^2.0.7",
-    "streamdown": "catalog:",
+    "streamdown": "^2.5.0",
     "tailwind-merge": "^3.5.0",
     "tokenlens": "^1.3.1",
     "use-stick-to-bottom": "^1.1.4",
-    "vaul": "^1.1.2"
+    "vaul": "^1.1.2",
+    "@sero-ai/common": "0.3.1"
   },
   "devDependencies": {
     "@hookform/resolvers": "^5.2.2",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
+    "@types/react": "^19.2.13",
+    "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "shadcn": "^3.8.5",
-    "tailwindcss": "catalog:",
+    "tailwindcss": "4.1.18",
+    "tsup": "^8.5.1",
     "tw-animate-css": "^1.4.0",
-    "typescript": "catalog:"
-  }
-}
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "typecheck": "tsc --noEmit"
+  },
+  "module": "./dist/index.mjs"
+}

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

@@ -19,7 +19,7 @@ import {
   VideoIcon,
   XIcon,
 } from "lucide-react";
-import { createContext, useCallback, useContext, useMemo } from "react";
+import { createContext, useCallback, use, useMemo } from "react";
 
 // ============================================================================
 // Types
@@ -133,10 +133,10 @@ const AttachmentContext = createContext<AttachmentContextValue | null>(null);
 // ============================================================================
 
 export const useAttachmentsContext = () =>
-  useContext(AttachmentsContext) ?? { variant: "grid" as const };
+  use(AttachmentsContext) ?? { variant: "grid" as const };
 
 export const useAttachmentContext = () => {
-  const ctx = useContext(AttachmentContext);
+  const ctx = use(AttachmentContext);
   if (!ctx) {
     throw new Error("Attachment components must be used within <Attachment>");
   }
@@ -253,7 +253,7 @@ export const AttachmentPreview = ({
     }
 
     if (mediaCategory === "video" && data.type === "file" && data.url) {
-      return <video className="size-full object-cover" muted src={data.url} />;
+      return <video aria-label="Video preview" className="size-full object-cover" muted src={data.url} />;
     }
 
     const Icon = mediaCategoryIcons[mediaCategory];

package/src/components/ai-elements/audio-player.tsx

@@ -78,7 +78,7 @@ export type AudioPlayerElementProps = Omit<ComponentProps<"audio">, "src"> &
 
 export const AudioPlayerElement = ({ ...props }: AudioPlayerElementProps) => (
   // oxlint-disable-next-line eslint-plugin-jsx-a11y(media-has-caption) -- audio player captions are provided by consumer
-  <audio
+  <audio aria-label="Audio preview"
     data-slot="audio-player-element"
     slot="media"
     src={

package/src/components/ai-elements/chain-of-thought.tsx

@@ -12,7 +12,7 @@ import {
 } from "../ui/collapsible";
 import { cn } from "../../lib/utils";
 import { BrainIcon, ChevronDownIcon, DotIcon } from "lucide-react";
-import { createContext, memo, useContext, useMemo } from "react";
+import { createContext, memo, use, useMemo } from "react";
 
 interface ChainOfThoughtContextValue {
   isOpen: boolean;
@@ -24,7 +24,7 @@ const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(
 );
 
 const useChainOfThought = () => {
-  const context = useContext(ChainOfThoughtContext);
+  const context = use(ChainOfThoughtContext);
   if (!context) {
     throw new Error(
       "ChainOfThought components must be used within ChainOfThought"

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

@@ -6,7 +6,7 @@ import type { ComponentProps, ReactNode } from "react";
 import { Alert, AlertDescription } from "../ui/alert";
 import { Button } from "../ui/button";
 import { cn } from "../../lib/utils";
-import { createContext, useContext } from "react";
+import { createContext, use } from "react";
 
 type ToolUIPartApproval =
   | {
@@ -46,7 +46,7 @@ const ConfirmationContext = createContext<ConfirmationContextValue | null>(
 );
 
 const useConfirmation = () => {
-  const context = useContext(ConfirmationContext);
+  const context = use(ConfirmationContext);
 
   if (!context) {
     throw new Error("Confirmation components must be used within Confirmation");

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

@@ -11,7 +11,7 @@ import {
 } from "../ui/hover-card";
 import { Progress } from "../ui/progress";
 import { cn } from "../../lib/utils";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 import { getUsage } from "tokenlens";
 
 const PERCENT_MAX = 100;
@@ -32,7 +32,7 @@ interface ContextSchema {
 const ContextContext = createContext<ContextSchema | null>(null);
 
 const useContextValue = () => {
-  const context = useContext(ContextContext);
+  const context = use(ContextContext);
 
   if (!context) {
     throw new Error("Context components must be used within Context");

package/src/components/ai-elements/environment-variables.tsx

@@ -10,7 +10,7 @@ import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "lucide-react";
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -111,7 +111,7 @@ export const EnvironmentVariablesToggle = ({
   className,
   ...props
 }: EnvironmentVariablesToggleProps) => {
-  const { showValues, setShowValues } = useContext(EnvironmentVariablesContext);
+  const { showValues, setShowValues } = use(EnvironmentVariablesContext);
 
   return (
     <div className={cn("flex items-center gap-2", className)}>
@@ -206,7 +206,7 @@ export const EnvironmentVariableName = ({
   children,
   ...props
 }: EnvironmentVariableNameProps) => {
-  const { name } = useContext(EnvironmentVariableContext);
+  const { name } = use(EnvironmentVariableContext);
 
   return (
     <span className={cn("font-mono text-sm", className)} {...props}>
@@ -222,8 +222,8 @@ export const EnvironmentVariableValue = ({
   children,
   ...props
 }: EnvironmentVariableValueProps) => {
-  const { value } = useContext(EnvironmentVariableContext);
-  const { showValues } = useContext(EnvironmentVariablesContext);
+  const { value } = use(EnvironmentVariableContext);
+  const { showValues } = use(EnvironmentVariablesContext);
 
   const displayValue = showValues
     ? value
@@ -263,7 +263,7 @@ export const EnvironmentVariableCopyButton = ({
 }: EnvironmentVariableCopyButtonProps) => {
   const [isCopied, setIsCopied] = useState(false);
   const timeoutRef = useRef<number>(0);
-  const { name, value } = useContext(EnvironmentVariableContext);
+  const { name, value } = use(EnvironmentVariableContext);
 
   const getTextToCopy = useCallback((): string => {
     const formatMap = {

package/src/components/ai-elements/file-tree.tsx

@@ -17,7 +17,7 @@ import {
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useMemo,
   useState,
 } from "react";
@@ -120,7 +120,7 @@ export const FileTreeFolder = ({
   ...props
 }: FileTreeFolderProps) => {
   const { expandedPaths, togglePath, selectedPath, onSelect } =
-    useContext(FileTreeContext);
+    use(FileTreeContext);
   const isExpanded = expandedPaths.has(path);
   const isSelected = selectedPath === path;
 
@@ -204,7 +204,7 @@ export const FileTreeFile = ({
   children,
   ...props
 }: FileTreeFileProps) => {
-  const { selectedPath, onSelect } = useContext(FileTreeContext);
+  const { selectedPath, onSelect } = use(FileTreeContext);
   const isSelected = selectedPath === path;
 
   const handleClick = useCallback(() => {

package/src/components/ai-elements/inline-citation.tsx

@@ -19,7 +19,7 @@ import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useState,
 } from "react";
@@ -93,7 +93,7 @@ export const InlineCitationCardBody = ({
 const CarouselApiContext = createContext<CarouselApi | undefined>(undefined);
 
 const useCarouselApi = () => {
-  const context = useContext(CarouselApiContext);
+  const context = use(CarouselApiContext);
   return context;
 };
 

package/src/components/ai-elements/jsx-preview.tsx

@@ -9,7 +9,7 @@ import {
   createContext,
   memo,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -32,7 +32,7 @@ const JSXPreviewContext = createContext<JSXPreviewContextValue | null>(null);
 const TAG_REGEX = /<\/?([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*?)(\/)?>/;
 
 export const useJSXPreview = () => {
-  const context = useContext(JSXPreviewContext);
+  const context = use(JSXPreviewContext);
   if (!context) {
     throw new Error("JSXPreview components must be used within JSXPreview");
   }

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

@@ -24,7 +24,7 @@ import {
   createContext,
   memo,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useState,
@@ -128,7 +128,7 @@ const MessageBranchContext = createContext<MessageBranchContextType | null>(
 );
 
 const useMessageBranch = () => {
-  const context = useContext(MessageBranchContext);
+  const context = use(MessageBranchContext);
 
   if (!context) {
     throw new Error(

package/src/components/ai-elements/mic-selector.tsx

@@ -21,7 +21,7 @@ import { ChevronsUpDownIcon } from "lucide-react";
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -112,7 +112,7 @@ export const MicSelectorTrigger = ({
   children,
   ...props
 }: MicSelectorTriggerProps) => {
-  const { setWidth } = useContext(MicSelectorContext);
+  const { setWidth } = use(MicSelectorContext);
   const ref = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
@@ -158,7 +158,7 @@ export const MicSelectorContent = ({
   popoverOptions,
   ...props
 }: MicSelectorContentProps) => {
-  const { width, onValueChange, value } = useContext(MicSelectorContext);
+  const { width, onValueChange, value } = use(MicSelectorContext);
 
   return (
     <PopoverContent
@@ -178,7 +178,7 @@ export type MicSelectorInputProps = ComponentProps<typeof CommandInput> & {
 };
 
 export const MicSelectorInput = ({ ...props }: MicSelectorInputProps) => (
-  <CommandInput placeholder="Search microphones..." {...props} />
+  <CommandInput placeholder="Search microphones…" {...props} />
 );
 
 export type MicSelectorListProps = Omit<
@@ -192,7 +192,7 @@ export const MicSelectorList = ({
   children,
   ...props
 }: MicSelectorListProps) => {
-  const { data } = useContext(MicSelectorContext);
+  const { data } = use(MicSelectorContext);
 
   return <CommandList {...props}>{children(data)}</CommandList>;
 };
@@ -207,7 +207,7 @@ export const MicSelectorEmpty = ({
 export type MicSelectorItemProps = ComponentProps<typeof CommandItem>;
 
 export const MicSelectorItem = (props: MicSelectorItemProps) => {
-  const { onValueChange, onOpenChange } = useContext(MicSelectorContext);
+  const { onValueChange, onOpenChange } = use(MicSelectorContext);
 
   const handleSelect = useCallback(
     (currentValue: string) => {
@@ -256,13 +256,13 @@ export const MicSelectorValue = ({
   className,
   ...props
 }: MicSelectorValueProps) => {
-  const { data, value } = useContext(MicSelectorContext);
+  const { data, value } = use(MicSelectorContext);
   const currentDevice = data.find((d) => d.deviceId === value);
 
   if (!currentDevice) {
     return (
       <span className={cn("flex-1 text-left", className)} {...props}>
-        Select microphone...
+        Select microphone…
       </span>
     );
   }

package/src/components/ai-elements/open-in-chat.tsx

@@ -17,7 +17,7 @@ import {
   ExternalLinkIcon,
   MessageCircleIcon,
 } from "lucide-react";
-import { createContext, useContext } from "react";
+import { createContext, use } from "react";
 
 const providers = {
   chatgpt: {
@@ -188,7 +188,7 @@ const providers = {
 const OpenInContext = createContext<{ query: string } | undefined>(undefined);
 
 const useOpenInContext = () => {
-  const context = useContext(OpenInContext);
+  const context = use(OpenInContext);
   if (!context) {
     throw new Error("OpenIn components must be used within an OpenIn provider");
   }

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

@@ -5,7 +5,7 @@ import type { HTMLAttributes } from "react";
 import { Badge } from "../ui/badge";
 import { cn } from "../../lib/utils";
 import { ArrowRightIcon, MinusIcon, PackageIcon, PlusIcon } from "lucide-react";
-import { createContext, useContext } from "react";
+import { createContext, use } from "react";
 
 type ChangeType = "major" | "minor" | "patch" | "added" | "removed";
 
@@ -78,7 +78,7 @@ export const PackageInfoName = ({
   children,
   ...props
 }: PackageInfoNameProps) => {
-  const { name } = useContext(PackageInfoContext);
+  const { name } = use(PackageInfoContext);
 
   return (
     <div className={cn("flex items-center gap-2", className)} {...props}>
@@ -112,7 +112,7 @@ export const PackageInfoChangeType = ({
   children,
   ...props
 }: PackageInfoChangeTypeProps) => {
-  const { changeType } = useContext(PackageInfoContext);
+  const { changeType } = use(PackageInfoContext);
 
   if (!changeType) {
     return null;
@@ -141,7 +141,7 @@ export const PackageInfoVersion = ({
   children,
   ...props
 }: PackageInfoVersionProps) => {
-  const { currentVersion, newVersion } = useContext(PackageInfoContext);
+  const { currentVersion, newVersion } = use(PackageInfoContext);
 
   if (!(currentVersion || newVersion)) {
     return null;

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

@@ -19,7 +19,7 @@ import {
 } from "../ui/collapsible";
 import { cn } from "../../lib/utils";
 import { ChevronsUpDownIcon } from "lucide-react";
-import { createContext, useContext } from "react";
+import { createContext, use } from "react";
 
 import { Shimmer } from "./shimmer";
 
@@ -30,7 +30,7 @@ interface PlanContextValue {
 const PlanContext = createContext<PlanContextValue | null>(null);
 
 const usePlan = () => {
-  const context = useContext(PlanContext);
+  const context = use(PlanContext);
   if (!context) {
     throw new Error("Plan components must be used within Plan");
   }

package/src/components/ai-elements/prompt-input-context.tsx

@@ -14,7 +14,7 @@ import { nanoid } from "nanoid";
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -71,7 +71,7 @@ export const LocalReferencedSourcesContext = createContext<ReferencedSourcesCont
 // ============================================================================
 
 export const usePromptInputController = () => {
-  const ctx = useContext(PromptInputController);
+  const ctx = use(PromptInputController);
   if (!ctx) {
     throw new Error(
       "Wrap your component inside <PromptInputProvider> to use usePromptInputController()."
@@ -80,12 +80,12 @@ export const usePromptInputController = () => {
   return ctx;
 };
 
-/** Optional variant — does NOT throw. Useful for dual-mode components. */
+/** Optional variant, does NOT throw. Useful for dual-mode components. */
 export const useOptionalPromptInputController = () =>
-  useContext(PromptInputController);
+  use(PromptInputController);
 
 export const useProviderAttachments = () => {
-  const ctx = useContext(ProviderAttachmentsContext);
+  const ctx = use(ProviderAttachmentsContext);
   if (!ctx) {
     throw new Error(
       "Wrap your component inside <PromptInputProvider> to use useProviderAttachments()."
@@ -95,12 +95,12 @@ export const useProviderAttachments = () => {
 };
 
 const useOptionalProviderAttachments = () =>
-  useContext(ProviderAttachmentsContext);
+  use(ProviderAttachmentsContext);
 
 export const usePromptInputAttachments = () => {
   // Prefer local context (inside PromptInput) as it has validation, fall back to provider
   const provider = useOptionalProviderAttachments();
-  const local = useContext(LocalAttachmentsContext);
+  const local = use(LocalAttachmentsContext);
   const context = local ?? provider;
   if (!context) {
     throw new Error(
@@ -111,7 +111,7 @@ export const usePromptInputAttachments = () => {
 };
 
 export const usePromptInputReferencedSources = () => {
-  const ctx = useContext(LocalReferencedSourcesContext);
+  const ctx = use(LocalReferencedSourcesContext);
   if (!ctx) {
     throw new Error(
       "usePromptInputReferencedSources must be used within a LocalReferencedSourcesContext.Provider"

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

@@ -154,7 +154,7 @@ export const QueueItemImage = ({
 }: QueueItemImageProps) => (
   <img
     alt=""
-    className={cn("h-8 w-8 rounded border object-cover", className)}
+    className={cn("size-8 rounded border object-cover", className)}
     height={32}
     width={32}
     {...props}

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

@@ -18,7 +18,7 @@ import {
   createContext,
   memo,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -38,7 +38,7 @@ interface ReasoningContextValue {
 const ReasoningContext = createContext<ReasoningContextValue | null>(null);
 
 export const useReasoning = () => {
-  const context = useContext(ReasoningContext);
+  const context = use(ReasoningContext);
   if (!context) {
     throw new Error("Reasoning components must be used within Reasoning");
   }
@@ -157,7 +157,7 @@ export type ReasoningTriggerProps = ComponentProps<
 
 const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
   if (isStreaming || duration === 0) {
-    return <Shimmer duration={1}>Thinking...</Shimmer>;
+    return <Shimmer duration={1}>Thinking…</Shimmer>;
   }
   if (duration === undefined) {
     return <p>Thought for a few seconds</p>;

package/src/components/ai-elements/schema-display.tsx

@@ -10,7 +10,7 @@ import {
 } from "../ui/collapsible";
 import { cn } from "../../lib/utils";
 import { ChevronRightIcon } from "lucide-react";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 
 type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
 
@@ -144,7 +144,7 @@ export const SchemaDisplayMethod = ({
   children,
   ...props
 }: SchemaDisplayMethodProps) => {
-  const { method } = useContext(SchemaDisplayContext);
+  const { method } = use(SchemaDisplayContext);
 
   return (
     <Badge
@@ -164,7 +164,7 @@ export const SchemaDisplayPath = ({
   children,
   ...props
 }: SchemaDisplayPathProps) => {
-  const { path } = useContext(SchemaDisplayContext);
+  const { path } = use(SchemaDisplayContext);
 
   // Highlight path parameters
   const highlightedPath = path.replaceAll(
@@ -191,7 +191,7 @@ export const SchemaDisplayDescription = ({
   children,
   ...props
 }: SchemaDisplayDescriptionProps) => {
-  const { description } = useContext(SchemaDisplayContext);
+  const { description } = use(SchemaDisplayContext);
 
   return (
     <p
@@ -225,7 +225,7 @@ export const SchemaDisplayParameters = ({
   children,
   ...props
 }: SchemaDisplayParametersProps) => {
-  const { parameters } = useContext(SchemaDisplayContext);
+  const { parameters } = use(SchemaDisplayContext);
 
   return (
     <Collapsible className={cn(className)} defaultOpen {...props}>
@@ -293,7 +293,7 @@ export const SchemaDisplayRequest = ({
   children,
   ...props
 }: SchemaDisplayRequestProps) => {
-  const { requestBody } = useContext(SchemaDisplayContext);
+  const { requestBody } = use(SchemaDisplayContext);
 
   return (
     <Collapsible className={cn(className)} defaultOpen {...props}>
@@ -320,7 +320,7 @@ export const SchemaDisplayResponse = ({
   children,
   ...props
 }: SchemaDisplayResponseProps) => {
-  const { responseBody } = useContext(SchemaDisplayContext);
+  const { responseBody } = use(SchemaDisplayContext);
 
   return (
     <Collapsible className={cn(className)} defaultOpen {...props}>

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

@@ -14,7 +14,7 @@ import { CheckIcon, CopyIcon } from "lucide-react";
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useRef,
   useState,
@@ -66,7 +66,7 @@ export type SnippetInputProps = Omit<
 >;
 
 export const SnippetInput = ({ className, ...props }: SnippetInputProps) => {
-  const { code } = useContext(SnippetContext);
+  const { code } = use(SnippetContext);
 
   return (
     <InputGroupInput
@@ -94,7 +94,7 @@ export const SnippetCopyButton = ({
 }: SnippetCopyButtonProps) => {
   const [isCopied, setIsCopied] = useState(false);
   const timeoutRef = useRef<number>(0);
-  const { code } = useContext(SnippetContext);
+  const { code } = use(SnippetContext);
 
   const copyToClipboard = useCallback(async () => {
     if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {

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

@@ -36,7 +36,7 @@ export const SourcesTrigger = ({
     {children ?? (
       <>
         <p className="font-medium">Used {count} sources</p>
-        <ChevronDownIcon className="h-4 w-4" />
+        <ChevronDownIcon className="size-4" />
       </>
     )}
   </CollapsibleTrigger>
@@ -70,7 +70,7 @@ export const Source = ({ href, title, children, ...props }: SourceProps) => (
   >
     {children ?? (
       <>
-        <BookIcon className="h-4 w-4" />
+        <BookIcon className="size-4" />
         <span className="block font-medium">{title}</span>
       </>
     )}