@plannotator/ui 0.22.0

package/components/sidebar/SidebarContainer.tsx

@@ -0,0 +1,353 @@
+/**
+ * SidebarContainer — Shared sidebar shell
+ *
+ * Houses the Table of Contents, Version Browser, File Browser, and Archive Browser views.
+ * Tab bar at top switches between them.
+ */
+
+import React from "react";
+import type { SidebarTab } from "../../hooks/useSidebar";
+import type { Block, Annotation } from "../../types";
+import type { VersionInfo, VersionEntry } from "../../hooks/usePlanDiff";
+import type { UseFileBrowserReturn } from "../../hooks/useFileBrowser";
+import { TableOfContents } from "../TableOfContents";
+import { VersionBrowser } from "./VersionBrowser";
+import { FileBrowser, type FileEditStatus } from "./FileBrowser";
+import { ArchiveBrowser, type ArchivedPlan } from "./ArchiveBrowser";
+import { MessagesBrowser, type PickerMessage } from "./MessagesBrowser";
+import { MessagesIcon } from "../icons/MessagesIcon";
+import { OverlayScrollArea } from "../OverlayScrollArea";
+import { ReviewAgentsIcon } from "../ReviewAgentsIcon";
+
+interface SidebarContainerProps {
+  activeTab: SidebarTab;
+  onTabChange: (tab: SidebarTab) => void;
+  onClose: () => void;
+  width: number | string;
+  showAgentTerminalButton?: boolean;
+  isAgentTerminalOpen?: boolean;
+  isAgentTerminalRunning?: boolean;
+  onToggleAgentTerminal?: () => void;
+  // TOC props
+  blocks: Block[];
+  annotations: Annotation[];
+  activeSection: string | null;
+  onTocNavigate: (blockId: string) => void;
+  linkedDocFilepath?: string | null;
+  onLinkedDocBack?: () => void;
+  backLabel?: string;
+  // File Browser props
+  showFilesTab?: boolean;
+  fileAnnotationCounts?: Map<string, number>;
+  highlightedFiles?: Set<string>;
+  fileEditStatuses?: Map<string, FileEditStatus>;
+  fileBrowser?: UseFileBrowserReturn;
+  onFilesSelectFile?: (absolutePath: string, dirPath: string) => void;
+  onFilesFetchAll?: () => void;
+  onFilesRetryVaultDir?: (vaultPath: string) => void;
+  // Version Browser props
+  showVersionsTab?: boolean;
+  versionInfo: VersionInfo | null;
+  versions: VersionEntry[];
+  selectedBaseVersion: number | null;
+  onSelectBaseVersion: (version: number) => void;
+  isPlanDiffActive: boolean;
+  hasPreviousVersion: boolean;
+  onActivatePlanDiff: () => void;
+  isLoadingVersions: boolean;
+  isSelectingVersion: boolean;
+  fetchingVersion: number | null;
+  onFetchVersions: () => void;
+  // Annotation indicators
+  hasFileAnnotations?: boolean;
+  // Archive Browser props
+  showArchiveTab?: boolean;
+  archivePlans: ArchivedPlan[];
+  selectedArchiveFile: string | null;
+  onArchiveSelect: (filename: string) => void;
+  isLoadingArchive: boolean;
+  showMessagesTab?: boolean;
+  messages?: PickerMessage[];
+  selectedMessageId?: string | null;
+  onSelectMessage?: (messageId: string) => void;
+  messageAnnotationCounts?: Map<string, number>;
+}
+
+export const SidebarContainer: React.FC<SidebarContainerProps> = ({
+  activeTab,
+  onTabChange,
+  onClose,
+  width,
+  showAgentTerminalButton,
+  isAgentTerminalOpen,
+  isAgentTerminalRunning,
+  onToggleAgentTerminal,
+  blocks,
+  annotations,
+  activeSection,
+  onTocNavigate,
+  linkedDocFilepath,
+  onLinkedDocBack,
+  backLabel,
+  showFilesTab,
+  fileAnnotationCounts,
+  highlightedFiles,
+  fileEditStatuses,
+  fileBrowser,
+  onFilesSelectFile,
+  onFilesFetchAll,
+  onFilesRetryVaultDir,
+  showVersionsTab,
+  versionInfo,
+  versions,
+  selectedBaseVersion,
+  onSelectBaseVersion,
+  isPlanDiffActive,
+  hasPreviousVersion,
+  onActivatePlanDiff,
+  isLoadingVersions,
+  isSelectingVersion,
+  fetchingVersion,
+  onFetchVersions,
+  hasFileAnnotations,
+  showArchiveTab,
+  archivePlans,
+  selectedArchiveFile,
+  onArchiveSelect,
+  isLoadingArchive,
+  showMessagesTab,
+  messages,
+  selectedMessageId,
+  onSelectMessage,
+  messageAnnotationCounts,
+}) => {
+  return (
+    <aside
+      className="hidden lg:flex flex-col sticky top-12 h-[calc(100vh-3rem)] flex-shrink-0 bg-card border-r border-border"
+      style={{ width }}
+    >
+      {/* Tab bar */}
+      <div className="flex h-10 items-center border-b border-border/50 px-2 gap-0.5 flex-shrink-0 overflow-hidden min-w-0">
+        {showAgentTerminalButton && onToggleAgentTerminal && (
+          <ActionButton
+            active={!!isAgentTerminalOpen}
+            running={!!isAgentTerminalRunning}
+            onClick={onToggleAgentTerminal}
+            icon={<ReviewAgentsIcon className="w-3 h-3" />}
+            label="Agent"
+          />
+        )}
+        <TabButton
+          active={activeTab === "toc"}
+          onClick={() => onTabChange("toc")}
+          icon={
+            <svg
+              className="w-3 h-3"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M4 6h16M4 10h16M4 14h10M4 18h10"
+              />
+            </svg>
+          }
+          label="Contents"
+        />
+        {showVersionsTab && (
+          <TabButton
+            active={activeTab === "versions"}
+            onClick={() => onTabChange("versions")}
+            icon={
+              <svg
+                className="w-3 h-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            }
+            label="Versions"
+          />
+        )}
+        {showMessagesTab && (
+          <TabButton
+            active={activeTab === "messages"}
+            onClick={() => onTabChange("messages")}
+            icon={<MessagesIcon className="w-3 h-3" />}
+            label="Messages"
+            badge={messageAnnotationCounts !== undefined && messageAnnotationCounts.size > 0}
+          />
+        )}
+        {showFilesTab && (
+          <TabButton
+            active={activeTab === "files"}
+            onClick={() => onTabChange("files")}
+            icon={
+              <svg
+                className="w-3 h-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                />
+              </svg>
+            }
+            label="Files"
+            badge={hasFileAnnotations}
+          />
+        )}
+        {showArchiveTab && (
+          <TabButton
+            active={activeTab === "archive"}
+            onClick={() => onTabChange("archive")}
+            icon={
+              <svg
+                className="w-3 h-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"
+                />
+              </svg>
+            }
+            label="Archive"
+          />
+        )}
+        {/* No header close button — the sidebar collapses via the resize-handle
+            hover button (see ResizeHandle onCollapse). */}
+      </div>
+
+      {/* Content area */}
+      <OverlayScrollArea className="flex-1 min-h-0">
+        {activeTab === "toc" && (
+          <TableOfContents
+            blocks={blocks}
+            annotations={annotations}
+            activeId={activeSection}
+            onNavigate={onTocNavigate}
+            className=""
+            linkedDocFilepath={linkedDocFilepath}
+            onLinkedDocBack={onLinkedDocBack}
+            backLabel={backLabel}
+          />
+        )}
+        {activeTab === "versions" && (
+          <VersionBrowser
+            versionInfo={versionInfo}
+            versions={versions}
+            selectedBaseVersion={selectedBaseVersion}
+            onSelectBaseVersion={onSelectBaseVersion}
+            isPlanDiffActive={isPlanDiffActive}
+            hasPreviousVersion={hasPreviousVersion}
+            onActivatePlanDiff={onActivatePlanDiff}
+            isLoading={isLoadingVersions}
+            isSelectingVersion={isSelectingVersion}
+            fetchingVersion={fetchingVersion}
+            onFetchVersions={onFetchVersions}
+          />
+        )}
+        {activeTab === "files" && showFilesTab && fileBrowser && (
+          <FileBrowser
+            dirs={fileBrowser.dirs}
+            expandedFolders={fileBrowser.expandedFolders}
+            onToggleFolder={fileBrowser.toggleFolder}
+            collapsedDirs={fileBrowser.collapsedDirs}
+            onToggleCollapse={fileBrowser.toggleCollapse}
+            onSelectFile={onFilesSelectFile ?? (() => {})}
+            activeFile={fileBrowser.activeFile}
+            onFetchAll={onFilesFetchAll ?? (() => {})}
+            onRetryVaultDir={onFilesRetryVaultDir}
+            annotationCounts={fileAnnotationCounts}
+            highlightedFiles={highlightedFiles}
+            editStatuses={fileEditStatuses}
+          />
+        )}
+        {activeTab === "archive" && showArchiveTab && (
+          <ArchiveBrowser
+            plans={archivePlans}
+            selectedFile={selectedArchiveFile}
+            onSelect={onArchiveSelect}
+            isLoading={isLoadingArchive}
+          />
+        )}
+        {activeTab === "messages" && showMessagesTab && messages && onSelectMessage && (
+          <MessagesBrowser
+            messages={messages}
+            selectedMessageId={selectedMessageId ?? null}
+            onSelect={onSelectMessage}
+            annotationCounts={messageAnnotationCounts}
+          />
+        )}
+      </OverlayScrollArea>
+    </aside>
+  );
+};
+
+const TabButton: React.FC<{
+  active: boolean;
+  onClick: () => void;
+  icon: React.ReactNode;
+  label: string;
+  badge?: boolean;
+}> = ({ active, onClick, icon, label, badge }) => (
+  <button
+    onClick={onClick}
+    className={`relative flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-colors min-w-0 shrink-0 ${
+      active
+        ? "bg-primary/10 text-primary"
+        : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+    }`}
+  >
+    {icon}
+    {label}
+    {badge && (
+      <span className="absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-primary" />
+    )}
+</button>
+);
+
+const ActionButton: React.FC<{
+  active: boolean;
+  running?: boolean;
+  onClick: () => void;
+  icon: React.ReactNode;
+  label: string;
+}> = ({ active, running, onClick, icon, label }) => (
+  <button
+    type="button"
+    onClick={onClick}
+    aria-pressed={active}
+    title={running ? "Agent running" : label}
+    className={`relative flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-colors min-w-0 shrink-0 ${
+      active || running
+        ? "bg-primary/10 text-primary"
+        : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
+    }`}
+  >
+    {icon}
+    {label}
+    {running && (
+      <span className="absolute -top-0.5 -right-0.5 h-1.5 w-1.5 rounded-full bg-primary" />
+    )}
+  </button>
+);

package/components/sidebar/SidebarTabs.tsx

@@ -0,0 +1,155 @@
+/**
+ * SidebarTabs — Collapsed tab flags
+ *
+ * When the sidebar is closed, small vertical tabs protrude from the left edge.
+ * Clicking a tab opens the sidebar in that mode.
+ */
+
+import React from "react";
+import type { SidebarTab } from "../../hooks/useSidebar";
+import { MessagesIcon } from "../icons/MessagesIcon";
+import { ReviewAgentsIcon } from "../ReviewAgentsIcon";
+
+interface SidebarTabsProps {
+  activeTab: SidebarTab;
+  onToggleTab: (tab: SidebarTab) => void;
+  hasDiff: boolean;
+  showVersionsTab?: boolean;
+  showFilesTab?: boolean;
+  showMessagesTab?: boolean;
+  showAgentTerminalTab?: boolean;
+  isAgentTerminalOpen?: boolean;
+  isAgentTerminalRunning?: boolean;
+  onToggleAgentTerminal?: () => void;
+  hasFileAnnotations?: boolean;
+  hasMessageAnnotations?: boolean;
+  className?: string;
+}
+
+export const SidebarTabs: React.FC<SidebarTabsProps> = ({
+  activeTab,
+  onToggleTab,
+  hasDiff,
+  showVersionsTab,
+  showFilesTab,
+  showMessagesTab,
+  showAgentTerminalTab,
+  isAgentTerminalOpen,
+  isAgentTerminalRunning,
+  onToggleAgentTerminal,
+  hasFileAnnotations,
+  hasMessageAnnotations,
+  className,
+}) => {
+  return (
+    <div
+      data-sidebar-tabs="true"
+      className={`flex flex-col gap-1 pt-3 pl-0.5 flex-shrink-0 ${className ?? ""}`}
+    >
+      {showAgentTerminalTab && onToggleAgentTerminal && (
+        <button
+          onClick={onToggleAgentTerminal}
+          className={`sidebar-tab-flag group relative flex items-center justify-center w-7 h-9 rounded-r-md border border-l-0 border-border/50 bg-card/80 backdrop-blur-sm transition-colors ${
+            isAgentTerminalOpen || isAgentTerminalRunning
+              ? "text-primary"
+              : "text-muted-foreground hover:text-foreground hover:bg-card"
+          }`}
+          title={isAgentTerminalRunning ? "Agent running" : "Agent"}
+          aria-pressed={isAgentTerminalOpen}
+        >
+          <ReviewAgentsIcon className="w-3.5 h-3.5" />
+          {isAgentTerminalRunning && (
+            <span className="absolute top-1 right-1 h-1.5 w-1.5 rounded-full bg-primary" />
+          )}
+        </button>
+      )}
+
+      {/* TOC tab */}
+      <button
+        onClick={() => onToggleTab("toc")}
+        className="sidebar-tab-flag group flex items-center justify-center w-7 h-9 rounded-r-md border border-l-0 border-border/50 bg-card/80 backdrop-blur-sm text-muted-foreground hover:text-foreground hover:bg-card transition-colors"
+        title="Table of Contents"
+      >
+        <svg
+          className="w-3.5 h-3.5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M4 6h16M4 10h16M4 14h10M4 18h10"
+          />
+        </svg>
+      </button>
+
+      {/* Versions tab — only shown when multiple versions exist */}
+      {showVersionsTab && (
+        <button
+          onClick={() => onToggleTab("versions")}
+          className="sidebar-tab-flag group relative flex items-center justify-center w-7 h-9 rounded-r-md border border-l-0 border-border/50 bg-card/80 backdrop-blur-sm text-muted-foreground hover:text-foreground hover:bg-card transition-colors"
+          title="Plan Versions"
+        >
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
+          </svg>
+          {/* Availability indicator dot */}
+          {hasDiff && (
+            <span className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-primary" />
+          )}
+        </button>
+      )}
+
+      {showMessagesTab && (
+        <button
+          onClick={() => onToggleTab("messages")}
+          className="sidebar-tab-flag group relative flex items-center justify-center w-7 h-9 rounded-r-md border border-l-0 border-border/50 bg-card/80 backdrop-blur-sm text-muted-foreground hover:text-foreground hover:bg-card transition-colors"
+          title="Pick a different message"
+        >
+          <MessagesIcon />
+          {hasMessageAnnotations && (
+            <span className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-primary" />
+          )}
+        </button>
+      )}
+
+      {/* Files tab */}
+      {showFilesTab && (
+        <button
+          onClick={() => onToggleTab("files")}
+          className="sidebar-tab-flag group relative flex items-center justify-center w-7 h-9 rounded-r-md border border-l-0 border-border/50 bg-card/80 backdrop-blur-sm text-muted-foreground hover:text-foreground hover:bg-card transition-colors"
+          title="File Browser"
+        >
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+            />
+          </svg>
+          {hasFileAnnotations && (
+            <span className="absolute top-1 right-1 w-1.5 h-1.5 rounded-full bg-primary" />
+          )}
+        </button>
+      )}
+    </div>
+  );
+};

package/components/sidebar/VersionBrowser.tsx

@@ -0,0 +1,141 @@
+/**
+ * VersionBrowser — Version list for plan diff
+ *
+ * Shows all versions of the current plan and allows selecting
+ * which version to diff against.
+ */
+
+import React, { useEffect } from "react";
+import type { VersionInfo, VersionEntry } from "../../hooks/usePlanDiff";
+
+interface VersionBrowserProps {
+  versionInfo: VersionInfo | null;
+  versions: VersionEntry[];
+  selectedBaseVersion: number | null;
+  onSelectBaseVersion: (version: number) => void;
+  isPlanDiffActive: boolean;
+  hasPreviousVersion: boolean;
+  onActivatePlanDiff: () => void;
+  isLoading: boolean;
+  isSelectingVersion: boolean;
+  fetchingVersion: number | null;
+  onFetchVersions: () => void;
+}
+
+function relativeTime(timestamp: string): string {
+  if (!timestamp) return "";
+  const now = Date.now();
+  const then = new Date(timestamp).getTime();
+  const diff = now - then;
+
+  if (diff < 60_000) return "just now";
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+  if (diff < 604_800_000) return `${Math.floor(diff / 86_400_000)}d ago`;
+  return new Date(timestamp).toLocaleDateString();
+}
+
+export const VersionBrowser: React.FC<VersionBrowserProps> = ({
+  versionInfo,
+  versions,
+  selectedBaseVersion,
+  onSelectBaseVersion,
+  isPlanDiffActive,
+  hasPreviousVersion,
+  onActivatePlanDiff,
+  isLoading,
+  isSelectingVersion,
+  fetchingVersion,
+  onFetchVersions,
+}) => {
+  // Fetch version list once versionInfo is available
+  useEffect(() => {
+    if (versionInfo && versions.length === 0) {
+      onFetchVersions();
+    }
+  }, [versionInfo, versions.length, onFetchVersions]);
+
+  if (!versionInfo) {
+    return (
+      <div className="p-4 text-xs text-muted-foreground text-center">
+        No version history available.
+      </div>
+    );
+  }
+
+  const currentVersion = versionInfo.version;
+  const totalVersions = versionInfo.totalVersions;
+
+  return (
+    <div className="p-3">
+      {/* Current version info */}
+      <div className="mb-3">
+        <div className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider mb-1">
+          Current Plan
+        </div>
+        <div className="text-xs text-foreground">
+          Version {currentVersion} of {totalVersions}
+        </div>
+      </div>
+
+      {/* Show Diff button if not active */}
+      {hasPreviousVersion && !isPlanDiffActive && (
+        <button
+          onClick={onActivatePlanDiff}
+          className="w-full mb-3 px-3 py-1.5 text-xs font-medium rounded-md bg-primary/10 text-primary hover:bg-primary/20 transition-colors border border-primary/20"
+        >
+          Show Changes
+        </button>
+      )}
+
+      {/* Version list */}
+      {totalVersions > 1 && (
+        <div className="mb-3">
+          <div className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider mb-2">
+            Compare Against
+          </div>
+
+          {isLoading ? (
+            <div className="text-xs text-muted-foreground py-2 text-center">
+              Loading...
+            </div>
+          ) : (
+            <div className="space-y-0.5">
+              {versions
+                .filter((v) => v.version !== currentVersion)
+                .reverse()
+                .map((v) => {
+                  const isSelected = selectedBaseVersion === v.version;
+                  return (
+                    <button
+                      key={v.version}
+                      onClick={() => onSelectBaseVersion(v.version)}
+                      className={`w-full text-left px-2 py-1.5 rounded text-xs transition-colors ${
+                        isSelected
+                          ? "bg-primary/10 text-primary border border-primary/30"
+                          : "text-foreground hover:bg-muted/50 border border-transparent"
+                      }`}
+                    >
+                      <div className="flex items-center justify-between">
+                        <span className="font-medium">
+                          v{v.version}
+                          {v.version === currentVersion - 1 && (
+                            <span className="ml-1 text-muted-foreground font-normal">
+                              (previous)
+                            </span>
+                          )}
+                        </span>
+                        <span className="text-[10px] text-muted-foreground">
+                          {fetchingVersion === v.version ? "Loading..." : relativeTime(v.timestamp)}
+                        </span>
+                      </div>
+                    </button>
+                  );
+                })}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/components/types.d.ts

@@ -0,0 +1,7 @@
+// Vite globals injected at build time
+declare const __APP_VERSION__: string;
+
+// Image asset module declarations live in ../globals.d.ts (the package's
+// ambient-declaration home, /// <reference>'d by each asset-importing
+// component so consumer compilers load them too). Declaring them here as
+// well would be a duplicate-identifier error under skipLibCheck: false.

package/components/ui/badge.tsx

@@ -0,0 +1,44 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+/**
+ * Badge — small labelled token (status, category, count). Token-driven variants.
+ * Pass `asChild` to render as a link/button. Override padding/size via className
+ * for tighter inline badges (e.g. `px-1.5 py-px text-[10px]`).
+ */
+const badgeVariants = cva(
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-auto whitespace-nowrap rounded-md border px-3 py-1 text-xs font-medium transition-[color,box-shadow] [&>svg]:size-3 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    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 };