@stigmer/react 0.0.36 → 0.0.40

package/src/agent-execution/helpers.ts

@@ -1,193 +0,0 @@
-import {
-  ExecutionPhase,
-  ToolCallStatus,
-  SubAgentStatus,
-  MessageType,
-} from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
-import type { SubAgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/subagent_pb";
-
-// ---------------------------------------------------------------------------
-// Execution phase utilities
-// ---------------------------------------------------------------------------
-
-const TERMINAL_PHASES = new Set<ExecutionPhase>([
-  ExecutionPhase.EXECUTION_COMPLETED,
-  ExecutionPhase.EXECUTION_FAILED,
-  ExecutionPhase.EXECUTION_CANCELLED,
-  ExecutionPhase.EXECUTION_TERMINATED,
-]);
-
-export function isTerminalPhase(phase: ExecutionPhase): boolean {
-  return TERMINAL_PHASES.has(phase);
-}
-
-const PHASE_LABELS: Record<ExecutionPhase, string> = {
-  [ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED]: "Unknown",
-  [ExecutionPhase.EXECUTION_PENDING]: "Pending",
-  [ExecutionPhase.EXECUTION_IN_PROGRESS]: "Running",
-  [ExecutionPhase.EXECUTION_COMPLETED]: "Completed",
-  [ExecutionPhase.EXECUTION_FAILED]: "Failed",
-  [ExecutionPhase.EXECUTION_CANCELLED]: "Cancelled",
-  [ExecutionPhase.EXECUTION_TERMINATED]: "Terminated",
-  [ExecutionPhase.EXECUTION_WAITING_FOR_APPROVAL]: "Waiting for Approval",
-  [ExecutionPhase.EXECUTION_PAUSED]: "Paused",
-};
-
-export function phaseLabel(phase: ExecutionPhase): string {
-  return PHASE_LABELS[phase] ?? "Unknown";
-}
-
-type BadgeVariant = "default" | "secondary" | "destructive" | "outline";
-
-const PHASE_VARIANTS: Record<ExecutionPhase, BadgeVariant> = {
-  [ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED]: "outline",
-  [ExecutionPhase.EXECUTION_PENDING]: "outline",
-  [ExecutionPhase.EXECUTION_IN_PROGRESS]: "default",
-  [ExecutionPhase.EXECUTION_COMPLETED]: "secondary",
-  [ExecutionPhase.EXECUTION_FAILED]: "destructive",
-  [ExecutionPhase.EXECUTION_CANCELLED]: "outline",
-  [ExecutionPhase.EXECUTION_TERMINATED]: "destructive",
-  [ExecutionPhase.EXECUTION_WAITING_FOR_APPROVAL]: "default",
-  [ExecutionPhase.EXECUTION_PAUSED]: "outline",
-};
-
-export function phaseVariant(phase: ExecutionPhase): BadgeVariant {
-  return PHASE_VARIANTS[phase] ?? "outline";
-}
-
-// ---------------------------------------------------------------------------
-// Tool call status utilities
-// ---------------------------------------------------------------------------
-
-const TOOL_CALL_STATUS_LABELS: Record<ToolCallStatus, string> = {
-  [ToolCallStatus.TOOL_CALL_STATUS_UNSPECIFIED]: "Unknown",
-  [ToolCallStatus.TOOL_CALL_PENDING]: "Pending",
-  [ToolCallStatus.TOOL_CALL_RUNNING]: "Running",
-  [ToolCallStatus.TOOL_CALL_COMPLETED]: "Completed",
-  [ToolCallStatus.TOOL_CALL_FAILED]: "Failed",
-  [ToolCallStatus.TOOL_CALL_WAITING_APPROVAL]: "Awaiting Approval",
-  [ToolCallStatus.TOOL_CALL_SKIPPED]: "Skipped",
-};
-
-export function toolCallStatusLabel(status: ToolCallStatus): string {
-  return TOOL_CALL_STATUS_LABELS[status] ?? "Unknown";
-}
-
-const TOOL_CALL_STATUS_VARIANTS: Record<ToolCallStatus, BadgeVariant> = {
-  [ToolCallStatus.TOOL_CALL_STATUS_UNSPECIFIED]: "outline",
-  [ToolCallStatus.TOOL_CALL_PENDING]: "outline",
-  [ToolCallStatus.TOOL_CALL_RUNNING]: "default",
-  [ToolCallStatus.TOOL_CALL_COMPLETED]: "secondary",
-  [ToolCallStatus.TOOL_CALL_FAILED]: "destructive",
-  [ToolCallStatus.TOOL_CALL_WAITING_APPROVAL]: "default",
-  [ToolCallStatus.TOOL_CALL_SKIPPED]: "outline",
-};
-
-export function toolCallStatusVariant(status: ToolCallStatus): BadgeVariant {
-  return TOOL_CALL_STATUS_VARIANTS[status] ?? "outline";
-}
-
-export function isToolCallTerminal(status: ToolCallStatus): boolean {
-  return (
-    status === ToolCallStatus.TOOL_CALL_COMPLETED ||
-    status === ToolCallStatus.TOOL_CALL_FAILED ||
-    status === ToolCallStatus.TOOL_CALL_SKIPPED
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Sub-agent status utilities
-// ---------------------------------------------------------------------------
-
-const SUB_AGENT_STATUS_LABELS: Record<SubAgentStatus, string> = {
-  [SubAgentStatus.SUB_AGENT_STATUS_UNSPECIFIED]: "Unknown",
-  [SubAgentStatus.SUB_AGENT_PENDING]: "Pending",
-  [SubAgentStatus.SUB_AGENT_IN_PROGRESS]: "Running",
-  [SubAgentStatus.SUB_AGENT_COMPLETED]: "Completed",
-  [SubAgentStatus.SUB_AGENT_FAILED]: "Failed",
-  [SubAgentStatus.SUB_AGENT_CANCELLED]: "Cancelled",
-};
-
-export function subAgentStatusLabel(status: SubAgentStatus): string {
-  return SUB_AGENT_STATUS_LABELS[status] ?? "Unknown";
-}
-
-const SUB_AGENT_STATUS_VARIANTS: Record<SubAgentStatus, BadgeVariant> = {
-  [SubAgentStatus.SUB_AGENT_STATUS_UNSPECIFIED]: "outline",
-  [SubAgentStatus.SUB_AGENT_PENDING]: "outline",
-  [SubAgentStatus.SUB_AGENT_IN_PROGRESS]: "default",
-  [SubAgentStatus.SUB_AGENT_COMPLETED]: "secondary",
-  [SubAgentStatus.SUB_AGENT_FAILED]: "destructive",
-  [SubAgentStatus.SUB_AGENT_CANCELLED]: "outline",
-};
-
-export function subAgentStatusVariant(status: SubAgentStatus): BadgeVariant {
-  return SUB_AGENT_STATUS_VARIANTS[status] ?? "outline";
-}
-
-// ---------------------------------------------------------------------------
-// Message type utilities
-// ---------------------------------------------------------------------------
-
-export function isHumanMessage(type: MessageType): boolean {
-  return type === MessageType.MESSAGE_HUMAN;
-}
-
-export function isAiMessage(type: MessageType): boolean {
-  return type === MessageType.MESSAGE_AI;
-}
-
-export function isToolMessage(type: MessageType): boolean {
-  return type === MessageType.MESSAGE_TOOL;
-}
-
-export function isSystemMessage(type: MessageType): boolean {
-  return type === MessageType.MESSAGE_SYSTEM;
-}
-
-// ---------------------------------------------------------------------------
-// Execution-level helpers
-// ---------------------------------------------------------------------------
-
-/**
- * Build an index of sub-agent executions keyed by their ID.
- * The sub-agent ID matches the tool call ID from the parent's "task" tool
- * invocation, enabling O(1) lookup when rendering tool calls that represent
- * sub-agent delegations.
- */
-export function buildSubAgentIndex(
-  execution: AgentExecution,
-): Map<string, SubAgentExecution> {
-  const subAgents = execution.status?.subAgentExecutions;
-  if (!subAgents || subAgents.length === 0) return new Map();
-  return new Map(subAgents.map((sa) => [sa.id, sa]));
-}
-
-/**
- * Format a qualified tool name: "mcp-server/tool-name" when an MCP server
- * slug is present, or just "tool-name" for built-in sandbox tools.
- */
-export function qualifiedToolName(name: string, mcpServerSlug: string): string {
-  if (mcpServerSlug) return `${mcpServerSlug}/${name}`;
-  return name;
-}
-
-/**
- * Format elapsed time between two ISO timestamps as a human-readable duration.
- * Returns null if either timestamp is missing.
- */
-export function formatDuration(
-  startedAt: string,
-  completedAt: string,
-): string | null {
-  if (!startedAt || !completedAt) return null;
-  const ms = new Date(completedAt).getTime() - new Date(startedAt).getTime();
-  if (ms < 0) return null;
-  if (ms < 1000) return `${ms}ms`;
-  const seconds = ms / 1000;
-  if (seconds < 60) return `${seconds.toFixed(1)}s`;
-  const minutes = Math.floor(seconds / 60);
-  const remainingSeconds = Math.round(seconds % 60);
-  return `${minutes}m ${remainingSeconds}s`;
-}

package/src/agent-execution/hooks/useAgentExecution.ts

@@ -1,147 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { AgentExecution } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/api_pb";
-import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { create } from "@bufbuild/protobuf";
-import { CancelAgentExecutionInputSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/io_pb";
-import { useStigmer } from "../../hooks";
-import { isTerminalPhase } from "../helpers";
-
-export interface CreateExecutionInput {
-  agentId?: string;
-  sessionId?: string;
-  message: string;
-  org: string;
-}
-
-export interface UseAgentExecutionOptions {
-  executionId?: string;
-}
-
-export interface UseAgentExecutionReturn {
-  execution: AgentExecution | null;
-  phase: ExecutionPhase;
-  isConnected: boolean;
-  error: string | null;
-  start: (input: CreateExecutionInput) => Promise<void>;
-  cancel: (reason?: string) => Promise<void>;
-}
-
-export function useAgentExecution(
-  options?: UseAgentExecutionOptions,
-): UseAgentExecutionReturn {
-  const stigmer = useStigmer();
-  const [execution, setExecution] = useState<AgentExecution | null>(null);
-  const [isConnected, setIsConnected] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const activeExecutionIdRef = useRef<string | null>(
-    options?.executionId ?? null,
-  );
-  const abortRef = useRef<AbortController | null>(null);
-
-  const subscribe = useCallback(
-    (executionId: string) => {
-      abortRef.current?.abort();
-
-      const controller = new AbortController();
-      abortRef.current = controller;
-      activeExecutionIdRef.current = executionId;
-      setIsConnected(true);
-      setError(null);
-
-      (async () => {
-        try {
-          const stream = stigmer.agentExecution.subscribe(
-            executionId,
-            controller.signal,
-          );
-          for await (const update of stream) {
-            if (controller.signal.aborted) break;
-            setExecution(update);
-
-            const phase =
-              update.status?.phase ??
-              ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED;
-            if (isTerminalPhase(phase)) {
-              setIsConnected(false);
-              break;
-            }
-          }
-        } catch (err: unknown) {
-          if (controller.signal.aborted) return;
-          const message =
-            err instanceof Error ? err.message : "Stream disconnected";
-          setError(message);
-        } finally {
-          if (!controller.signal.aborted) {
-            setIsConnected(false);
-          }
-        }
-      })();
-    },
-    [stigmer],
-  );
-
-  useEffect(() => {
-    if (options?.executionId) {
-      subscribe(options.executionId);
-    }
-    return () => {
-      abortRef.current?.abort();
-    };
-  }, [options?.executionId, subscribe]);
-
-  const start = useCallback(
-    async (input: CreateExecutionInput) => {
-      setError(null);
-      setExecution(null);
-      try {
-        const created = await stigmer.agentExecution.create({
-          name: "",
-          org: input.org,
-          agentId: input.agentId,
-          sessionId: input.sessionId,
-          message: input.message,
-        });
-        const executionId = created.metadata?.id;
-        if (!executionId) {
-          throw new Error("Created execution missing metadata.id");
-        }
-        setExecution(created);
-        subscribe(executionId);
-      } catch (err: unknown) {
-        const message =
-          err instanceof Error ? err.message : "Failed to create execution";
-        setError(message);
-      }
-    },
-    [stigmer, subscribe],
-  );
-
-  const cancel = useCallback(
-    async (reason?: string) => {
-      const id = activeExecutionIdRef.current;
-      if (!id) return;
-      try {
-        await stigmer.agentExecution.cancel(
-          create(CancelAgentExecutionInputSchema, {
-            id,
-            reason: reason ?? "",
-          }),
-        );
-      } catch (err: unknown) {
-        const message =
-          err instanceof Error ? err.message : "Failed to cancel execution";
-        setError(message);
-      }
-    },
-    [stigmer],
-  );
-
-  const phase =
-    execution?.status?.phase ?? ExecutionPhase.EXECUTION_PHASE_UNSPECIFIED;
-
-  return { execution, phase, isConnected, error, start, cancel };
-}

package/src/agent-execution/hooks/useApproval.ts

@@ -1,56 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import type { ApprovalAction } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
-import { create } from "@bufbuild/protobuf";
-import { SubmitApprovalInputSchema } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/io_pb";
-import { useStigmer } from "../../hooks";
-
-export interface UseApprovalOptions {
-  executionId: string;
-}
-
-export interface UseApprovalReturn {
-  submit: (
-    toolCallId: string,
-    action: ApprovalAction,
-    comment?: string,
-  ) => Promise<void>;
-  isSubmitting: boolean;
-  error: string | null;
-  clearError: () => void;
-}
-
-export function useApproval(options: UseApprovalOptions): UseApprovalReturn {
-  const stigmer = useStigmer();
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const submit = useCallback(
-    async (toolCallId: string, action: ApprovalAction, comment?: string) => {
-      setIsSubmitting(true);
-      setError(null);
-      try {
-        await stigmer.agentExecution.submitApproval(
-          create(SubmitApprovalInputSchema, {
-            agentExecutionId: options.executionId,
-            toolCallId,
-            action,
-            comment: comment ?? "",
-          }),
-        );
-      } catch (err: unknown) {
-        const message =
-          err instanceof Error ? err.message : "Failed to submit approval";
-        setError(message);
-      } finally {
-        setIsSubmitting(false);
-      }
-    },
-    [stigmer, options.executionId],
-  );
-
-  const clearError = useCallback(() => setError(null), []);
-
-  return { submit, isSubmitting, error, clearError };
-}

package/src/agent-execution/index.ts

@@ -1,46 +0,0 @@
-// Components
-export { ExecutionStream } from "./components/ExecutionStream";
-export { ExecutionStatus } from "./components/ExecutionStatus";
-export { OutputBlock } from "./components/OutputBlock";
-export { ToolCallCard } from "./components/ToolCallCard";
-export { ApprovalControls } from "./components/ApprovalControls";
-export { SubAgentCard } from "./components/SubAgentCard";
-export { MessageInput } from "./components/MessageInput";
-export {
-  MessageEntry,
-  HumanMessageBubble,
-  SystemMessageBlock,
-} from "./components/MessageEntry";
-
-// Hooks
-export { useAgentExecution } from "./hooks/useAgentExecution";
-export type {
-  UseAgentExecutionOptions,
-  UseAgentExecutionReturn,
-  CreateExecutionInput,
-} from "./hooks/useAgentExecution";
-
-export { useApproval } from "./hooks/useApproval";
-export type {
-  UseApprovalOptions,
-  UseApprovalReturn,
-} from "./hooks/useApproval";
-
-// Helpers
-export {
-  isTerminalPhase,
-  phaseLabel,
-  phaseVariant,
-  toolCallStatusLabel,
-  toolCallStatusVariant,
-  isToolCallTerminal,
-  subAgentStatusLabel,
-  subAgentStatusVariant,
-  isHumanMessage,
-  isAiMessage,
-  isToolMessage,
-  isSystemMessage,
-  buildSubAgentIndex,
-  qualifiedToolName,
-  formatDuration,
-} from "./helpers";

package/src/catalog/components/ResourceSearchCard.tsx

@@ -1,137 +0,0 @@
-import type { ReactNode } from "react";
-import type { SearchResult } from "@stigmer/protos/ai/stigmer/search/v1/io_pb";
-import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
-import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
-import { Bot, FileCode2, Server, Globe, Box } from "lucide-react";
-
-import { cn } from "@stigmer/theme";
-
-import { Badge } from "../../internal/badge";
-import { formatRelativeTime, toDate } from "../internal/time";
-
-const KIND_ICON: Record<number, ReactNode> = {
-  [ApiResourceKind.agent]: <Bot className="text-muted-foreground size-4" />,
-  [ApiResourceKind.skill]: <FileCode2 className="text-muted-foreground size-4" />,
-  [ApiResourceKind.mcp_server]: <Server className="text-muted-foreground size-4" />,
-};
-
-const FALLBACK_ICON = <Box className="text-muted-foreground size-4" />;
-
-export interface ResourceSearchCardProps {
-  /** The search result to display. */
-  result: SearchResult;
-  /** When provided, the card renders as an `<a>` element with this URL. */
-  href?: string;
-  /** Click handler for SPA navigation or custom actions. */
-  onClick?: () => void;
-  /** Override the auto-detected icon derived from `result.kind`. */
-  icon?: ReactNode;
-  /** Additional CSS class names on the root element. */
-  className?: string;
-}
-
-/**
- * A card component for displaying any Stigmer resource search result
- * (agent, skill, MCP server) in a grid catalog layout.
- *
- * Auto-selects the icon based on `result.kind`. Renders as an `<a>` tag
- * when `href` is provided, otherwise as a `<div>`.
- */
-export function ResourceSearchCard({
-  result,
-  href,
-  onClick,
-  icon,
-  className,
-}: ResourceSearchCardProps) {
-  const isPublic =
-    result.visibility === ApiResourceVisibility.visibility_public;
-
-  const resolvedIcon = icon ?? KIND_ICON[result.kind] ?? FALLBACK_ICON;
-
-  const Tag = href ? "a" : "div";
-  const interactive = !!(onClick || href);
-
-  return (
-    <Tag
-      href={href}
-      onClick={onClick}
-      role={interactive ? "button" : undefined}
-      tabIndex={interactive ? 0 : undefined}
-      onKeyDown={
-        interactive
-          ? (e: React.KeyboardEvent) => {
-              if (onClick && (e.key === "Enter" || e.key === " ")) {
-                e.preventDefault();
-                onClick();
-              }
-            }
-          : undefined
-      }
-      className={cn(
-        "bg-card text-card-foreground flex flex-col rounded-xl border p-4",
-        interactive &&
-          "hover:bg-accent/50 focus-visible:ring-ring cursor-pointer transition-colors focus-visible:ring-2 focus-visible:outline-none",
-        className,
-      )}
-    >
-      {/* Header: icon + name + visibility */}
-      <div className="flex items-start gap-3">
-        <div className="bg-muted flex size-9 shrink-0 items-center justify-center rounded-lg">
-          {resolvedIcon}
-        </div>
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-2">
-            <span className="truncate text-sm font-semibold">
-              {result.name}
-            </span>
-            {isPublic && (
-              <Badge variant="outline" className="shrink-0 text-[10px]">
-                <Globe className="size-2.5" />
-                Public
-              </Badge>
-            )}
-          </div>
-          <p className="text-muted-foreground truncate font-mono text-[11px]">
-            {result.qualifiedSlug}
-          </p>
-        </div>
-      </div>
-
-      {/* Description */}
-      {result.description && (
-        <p className="text-muted-foreground mt-2 line-clamp-2 text-xs leading-relaxed">
-          {result.description}
-        </p>
-      )}
-
-      {/* Footer: tags + timestamp */}
-      <div className="mt-3 flex items-end justify-between gap-2">
-        {result.tags.length > 0 ? (
-          <div className="flex min-w-0 flex-wrap gap-1">
-            {result.tags.slice(0, 3).map((tag) => (
-              <Badge key={tag} variant="secondary" className="text-[10px]">
-                {tag}
-              </Badge>
-            ))}
-            {result.tags.length > 3 && (
-              <span className="text-muted-foreground self-center text-[10px]">
-                +{result.tags.length - 3}
-              </span>
-            )}
-          </div>
-        ) : (
-          <div />
-        )}
-        {result.createdAt && (
-          <time
-            dateTime={toDate(result.createdAt)?.toISOString() ?? ""}
-            className="text-muted-foreground shrink-0 text-[10px]"
-          >
-            {formatRelativeTime(result.createdAt)}
-          </time>
-        )}
-      </div>
-    </Tag>
-  );
-}

package/src/catalog/index.ts

@@ -1,6 +0,0 @@
-// Components
-export { ResourceSearchCard } from "./components/ResourceSearchCard";
-export type { ResourceSearchCardProps } from "./components/ResourceSearchCard";
-
-// Utilities
-export { formatRelativeTime, toDate } from "./internal/time";

package/src/catalog/internal/time.ts

@@ -1,40 +0,0 @@
-import type { Timestamp } from "@bufbuild/protobuf/wkt";
-
-/**
- * Convert a protobuf Timestamp to a JS Date.
- * Returns null if the timestamp is undefined or has no seconds.
- */
-export function toDate(ts: Timestamp | undefined): Date | null {
-  if (!ts) return null;
-  const seconds = Number(ts.seconds);
-  if (!seconds && seconds !== 0) return null;
-  return new Date(seconds * 1000 + Math.floor(ts.nanos / 1_000_000));
-}
-
-/**
- * Format a protobuf Timestamp as a human-readable relative time string.
- *
- * Examples: "just now", "2m ago", "3h ago", "yesterday", "Mar 12"
- */
-export function formatRelativeTime(ts: Timestamp | undefined): string {
-  const date = toDate(ts);
-  if (!date) return "";
-
-  const now = Date.now();
-  const diffMs = now - date.getTime();
-
-  if (diffMs < 0) return "just now";
-  if (diffMs < 60_000) return "just now";
-
-  const minutes = Math.floor(diffMs / 60_000);
-  if (minutes < 60) return `${minutes}m ago`;
-
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h ago`;
-
-  const days = Math.floor(hours / 24);
-  if (days === 1) return "yesterday";
-  if (days < 7) return `${days}d ago`;
-
-  return date.toLocaleDateString(undefined, { month: "short", day: "numeric" });
-}

package/src/internal/badge.tsx

@@ -1,52 +0,0 @@
-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 { cn } from "@stigmer/theme";
-
-const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs 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-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 text-foreground [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",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-function Badge({
-  className,
-  variant = "default",
-  render,
-  ...props
-}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
-  return useRender({
-    defaultTagName: "span",
-    props: mergeProps<"span">(
-      {
-        className: cn(badgeVariants({ variant }), className),
-      },
-      props,
-    ),
-    render,
-    state: {
-      slot: "badge",
-      variant,
-    },
-  });
-}
-
-export { Badge, badgeVariants };