tower-studio 0.1.1 → 0.1.3

package/src/components/task/task-terminal.tsx

@@ -0,0 +1,294 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebglAddon } from "@xterm/addon-webgl";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import { useTheme } from "next-themes";
+import { LocalFileLinkProvider } from "@/lib/terminal-link-provider";
+import { useI18n } from "@/lib/i18n";
+import { getActualWsPort } from "@/actions/config-actions";
+import "@xterm/xterm/css/xterm.css";
+
+export interface TaskTerminalProps {
+  taskId: string;
+  worktreePath?: string | null;
+  onSessionEnd?: (exitCode: number) => void;
+  /** Called when user clicks a file path in terminal output. Opens file in workbench editor. */
+  onFileOpen?: (fullPath: string, line?: number, col?: number) => void;
+  /** Force canvas renderer instead of WebGL. Use when many terminals coexist (portal system). */
+  useCanvasRenderer?: boolean;
+}
+
+type WsStatus = "connecting" | "connected" | "disconnected";
+
+/**
+ * TaskTerminal — xterm.js browser terminal connected to WebSocket PTY server.
+ *
+ * Uses manual bidirectional I/O (terminal.onData → ws.send, ws.onmessage → terminal.write)
+ * instead of AttachAddon, which has compatibility issues with React Strict Mode.
+ *
+ * IMPORTANT: This component accesses `window` at import time via @xterm/xterm.
+ * Always load via `next/dynamic({ ssr: false })`.
+ */
+export function TaskTerminal({
+  taskId,
+  worktreePath,
+  onSessionEnd,
+  onFileOpen,
+  useCanvasRenderer = false,
+}: TaskTerminalProps) {
+  const { t } = useI18n();
+  const { resolvedTheme } = useTheme();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const terminalRef = useRef<Terminal | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
+  const fitAddonRef = useRef<FitAddon | null>(null);
+
+  // Stable refs for callbacks — avoids useEffect re-run on prop change
+  const onSessionEndRef = useRef(onSessionEnd);
+  onSessionEndRef.current = onSessionEnd;
+  const onFileOpenRef = useRef(onFileOpen);
+  onFileOpenRef.current = onFileOpen;
+
+  const [wsStatus, setWsStatus] = useState<WsStatus>("connecting");
+  const [connectedVisible, setConnectedVisible] = useState(false);
+
+  // Mount effect: create terminal + WebSocket connection
+  useEffect(() => {
+    if (!worktreePath || !containerRef.current) return;
+
+    const isDark = resolvedTheme !== "light";
+    const initialTheme = isDark
+      ? { background: "#0a0a0a", foreground: "#e5e5e5" }
+      : { background: "#fafafa", foreground: "#171717" };
+
+    const terminal = new Terminal({
+      fontFamily: "Menlo, Monaco, 'Courier New', monospace",
+      fontSize: 13,
+      scrollback: 5000,
+      cursorBlink: true,
+      allowTransparency: false,
+      theme: initialTheme,
+    });
+
+    const fitAddon = new FitAddon();
+    terminal.loadAddon(fitAddon);
+    terminal.open(containerRef.current);
+
+    // Attempt WebGL addon (GPU-accelerated renderer)
+    // Skip WebGL when many terminals may coexist (portal system) —
+    // browsers limit WebGL contexts (~8-16), excess causes context loss and blank terminals.
+    // Canvas renderer is reliable for any number of terminals.
+    let webglAddon: WebglAddon | null = null;
+    if (!useCanvasRenderer) {
+      try {
+        webglAddon = new WebglAddon();
+        webglAddon.onContextLoss(() => {
+          webglAddon?.dispose();
+          webglAddon = null;
+        });
+        terminal.loadAddon(webglAddon);
+      } catch {
+        // WebGL not available — fall back to canvas renderer
+      }
+    }
+
+    // URL links — opens in new browser tab
+    const webLinksAddon = new WebLinksAddon((_event, uri) => {
+      window.open(uri, "_blank");
+    });
+    terminal.loadAddon(webLinksAddon);
+
+    // Local file links — opens in workbench editor
+    if (worktreePath) {
+      terminal.registerLinkProvider(
+        new LocalFileLinkProvider(terminal, worktreePath, (fullPath, line, col) => {
+          onFileOpenRef.current?.(fullPath, line, col);
+        }),
+      );
+    }
+
+    fitAddon.fit();
+    terminal.focus();
+
+    // Fetch WS port from config, then connect (with auto-reconnect)
+    let ws: WebSocket | null = null;
+    let dataDisposable: { dispose: () => void } | null = null;
+    let cancelled = false;
+    let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+    let sessionEnded = false;
+
+    function connectWs(wsPort: number) {
+      if (cancelled || sessionEnded) return;
+      setWsStatus("connecting");
+      const socket = new WebSocket(
+        `ws://localhost:${wsPort}/terminal?taskId=${encodeURIComponent(taskId)}`
+      );
+      ws = socket;
+
+      socket.addEventListener("open", () => {
+        socket.send(JSON.stringify({ type: "resize", cols: terminal.cols, rows: terminal.rows }));
+        terminal.focus();
+        setWsStatus("connected");
+        setConnectedVisible(true);
+        setTimeout(() => setConnectedVisible(false), 2000);
+      });
+
+      // Output: WS → terminal (replaces AttachAddon for React Strict Mode compat)
+      socket.addEventListener("message", (event) => {
+        const data = event.data;
+        if (typeof data === "string") {
+          terminal.write(data);
+        } else if (data instanceof Blob) {
+          data.text().then((text) => terminal.write(text));
+        } else if (data instanceof ArrayBuffer) {
+          terminal.write(new Uint8Array(data));
+        }
+      });
+
+      // Input: terminal → WS
+      dataDisposable?.dispose();
+      dataDisposable = terminal.onData((data) => {
+        if (socket.readyState === WebSocket.OPEN) {
+          socket.send(data);
+        }
+      });
+
+      // Session end: WS close code 4000+exitCode
+      socket.addEventListener("close", (event) => {
+        if (event.code >= 4000) {
+          // Process exited — don't reconnect
+          sessionEnded = true;
+          setWsStatus("disconnected");
+          onSessionEndRef.current?.(event.code - 4000);
+          return;
+        }
+        setWsStatus("disconnected");
+        // Auto-reconnect after 3s (session may still be alive)
+        if (!cancelled && !sessionEnded) {
+          reconnectTimer = setTimeout(() => connectWs(wsPort), 3000);
+        }
+      });
+
+      socket.addEventListener("error", () => {
+        // error is always followed by close, so reconnect is handled there
+      });
+
+      // Store refs for resize/theme effects
+      wsRef.current = socket;
+    }
+
+    getActualWsPort().then((wsPort) => {
+      if (cancelled) return;
+      connectWs(wsPort);
+    });
+
+    terminalRef.current = terminal;
+    fitAddonRef.current = fitAddon;
+
+    return () => {
+      cancelled = true;
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      dataDisposable?.dispose();
+      webLinksAddon.dispose();
+      webglAddon?.dispose();
+      fitAddon.dispose();
+      terminal.dispose();
+      ws?.close();
+      terminalRef.current = null;
+      wsRef.current = null;
+      fitAddonRef.current = null;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [taskId, worktreePath]);
+
+  // Resize effect — re-runs when taskId changes (portal re-mount to different container)
+  useEffect(() => {
+    if (!worktreePath || !containerRef.current) return;
+
+    // Initial fit after portal re-mount (e.g. drawer → detail page)
+    const fit = fitAddonRef.current;
+    const ws = wsRef.current;
+    const term = terminalRef.current;
+    if (fit && term) {
+      // Use rAF to ensure container has its final layout dimensions
+      requestAnimationFrame(() => {
+        fit.fit();
+        if (ws?.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows }));
+        }
+      });
+    }
+
+    let resizeTimer: ReturnType<typeof setTimeout> | null = null;
+    const el = containerRef.current;
+    const resizeObserver = new ResizeObserver(() => {
+      if (resizeTimer) clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(() => {
+        const f = fitAddonRef.current;
+        const w = wsRef.current;
+        const t = terminalRef.current;
+        if (!f || !t) return;
+        f.fit();
+        if (w?.readyState === WebSocket.OPEN) {
+          w.send(JSON.stringify({ type: "resize", cols: t.cols, rows: t.rows }));
+        }
+      }, 100);
+    });
+    resizeObserver.observe(el);
+
+    return () => {
+      if (resizeTimer) clearTimeout(resizeTimer);
+      resizeObserver.disconnect();
+    };
+  }, [taskId, worktreePath]);
+
+  // Theme effect
+  useEffect(() => {
+    const term = terminalRef.current;
+    if (!term) return;
+    const isDark = resolvedTheme !== "light";
+    term.options.theme = isDark
+      ? { background: "#0a0a0a", foreground: "#e5e5e5" }
+      : { background: "#fafafa", foreground: "#171717" };
+  }, [resolvedTheme]);
+
+  if (!worktreePath) {
+    return (
+      <div className="flex h-full w-full flex-col items-center justify-center bg-[#0a0a0a] text-center">
+        <p className="text-sm text-neutral-400">{t("terminal.noWorktree")}</p>
+        <p className="text-xs text-neutral-600 mt-1">{t("terminal.noWorktreeDesc")}</p>
+      </div>
+    );
+  }
+
+  const statusColor =
+    wsStatus === "connected" ? "bg-green-500"
+      : wsStatus === "connecting" ? "bg-yellow-500"
+        : "bg-red-500";
+
+  const statusLabel =
+    wsStatus === "connected" ? t("terminal.connected")
+      : wsStatus === "connecting" ? t("terminal.connecting")
+        : t("terminal.disconnected");
+
+  return (
+    <div className="relative h-full w-full bg-[#0a0a0a]">
+      <div
+        className={[
+          "absolute right-3 top-3 z-10 flex items-center gap-1.5 rounded px-2 py-0.5 text-xs transition-opacity duration-500",
+          wsStatus === "connected" && !connectedVisible ? "opacity-0 pointer-events-none" : "opacity-100",
+          "bg-black/40 backdrop-blur-sm",
+        ].join(" ")}
+        title={statusLabel}
+      >
+        <span className={`h-2 w-2 rounded-full ${statusColor}`} />
+        <span className="text-neutral-300">{statusLabel}</span>
+      </div>
+      <div ref={containerRef} className="h-full w-full overflow-hidden" />
+    </div>
+  );
+}

package/src/components/task/terminal-portal.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  createHtmlPortalNode,
+  InPortal,
+  OutPortal,
+  type HtmlPortalNode,
+} from "react-reverse-portal";
+import dynamic from "next/dynamic";
+
+const TaskTerminal = dynamic(
+  () => import("@/components/task/task-terminal").then((m) => ({ default: m.TaskTerminal })),
+  { ssr: false }
+);
+
+/**
+ * Reverse portal for terminal components using react-reverse-portal.
+ *
+ * Terminals persist across navigations (drawer ↔ detail page).
+ * The DOM node is "teleported" between views — zero WS reconnect, zero flicker.
+ */
+
+interface TerminalInstance {
+  portalNode: HtmlPortalNode;
+  taskId: string;
+  worktreePath: string;
+  onSessionEnd: { current: ((exitCode: number) => void) | null };
+  onFileOpen: { current: ((fullPath: string, line?: number, col?: number) => void) | null };
+}
+
+interface TerminalPortalContextValue {
+  /** Get or create a portal node for a task */
+  getPortal: (taskId: string, worktreePath: string) => TerminalInstance;
+  /** Remove a terminal instance */
+  removePortal: (taskId: string) => void;
+  /** Register session-end callback for a task */
+  setOnSessionEnd: (taskId: string, fn: ((exitCode: number) => void) | null) => void;
+  /** Register file-open callback for a task (terminal link clicks) */
+  setOnFileOpen: (taskId: string, fn: ((fullPath: string, line?: number, col?: number) => void) | null) => void;
+}
+
+const TerminalPortalContext = createContext<TerminalPortalContextValue | null>(null);
+
+export function useTerminalPortal() {
+  const ctx = useContext(TerminalPortalContext);
+  if (!ctx) throw new Error("useTerminalPortal must be used within TerminalPortalProvider");
+  return ctx;
+}
+
+export function TerminalPortalProvider({ children }: { children: ReactNode }) {
+  const instancesRef = useRef(new Map<string, TerminalInstance>());
+  const [, setTick] = useState(0);
+
+  const getPortal = useCallback((taskId: string, worktreePath: string) => {
+    const existing = instancesRef.current.get(taskId);
+    if (existing) return existing;
+
+    const portalNode = createHtmlPortalNode({
+      attributes: { style: "width:100%;height:100%" },
+    });
+    const instance: TerminalInstance = {
+      portalNode,
+      taskId,
+      worktreePath,
+      onSessionEnd: { current: null },
+      onFileOpen: { current: null },
+    };
+    instancesRef.current.set(taskId, instance);
+    setTick((t) => t + 1);
+    return instance;
+  }, []);
+
+  const removePortal = useCallback((taskId: string) => {
+    instancesRef.current.delete(taskId);
+    setTick((t) => t + 1);
+  }, []);
+
+  const setOnSessionEnd = useCallback((taskId: string, fn: ((exitCode: number) => void) | null) => {
+    const inst = instancesRef.current.get(taskId);
+    if (inst) inst.onSessionEnd.current = fn;
+  }, []);
+
+  const setOnFileOpen = useCallback((taskId: string, fn: ((fullPath: string, line?: number, col?: number) => void) | null) => {
+    const inst = instancesRef.current.get(taskId);
+    if (inst) inst.onFileOpen.current = fn;
+  }, []);
+
+  // Render all terminal instances via InPortal (they stay alive even when OutPortal unmounts)
+  const portals = Array.from(instancesRef.current.values()).map((inst) => (
+    <InPortal key={inst.taskId} node={inst.portalNode}>
+      <TaskTerminal
+        taskId={inst.taskId}
+        worktreePath={inst.worktreePath}
+        onSessionEnd={(code) => inst.onSessionEnd.current?.(code)}
+        onFileOpen={(path, line, col) => inst.onFileOpen.current?.(path, line, col)}
+        useCanvasRenderer
+      />
+    </InPortal>
+  ));
+
+  return (
+    <TerminalPortalContext.Provider value={{ getPortal, removePortal, setOnSessionEnd, setOnFileOpen }}>
+      {children}
+      {portals}
+    </TerminalPortalContext.Provider>
+  );
+}
+
+/**
+ * Renders a terminal by "projecting" its persistent portal node here.
+ * When this unmounts, the terminal stays alive — just detached from the DOM.
+ */
+export function TerminalOutlet({
+  taskId,
+  worktreePath,
+  onSessionEnd,
+  onFileOpen,
+}: {
+  taskId: string;
+  worktreePath: string;
+  onSessionEnd?: (exitCode: number) => void;
+  onFileOpen?: (fullPath: string, line?: number, col?: number) => void;
+}) {
+  const { getPortal, setOnSessionEnd, setOnFileOpen } = useTerminalPortal();
+  const [instance, setInstance] = useState<TerminalInstance | null>(null);
+
+  // Create/get portal instance — clear stale instance immediately when taskId changes
+  useEffect(() => {
+    setInstance(getPortal(taskId, worktreePath));
+    return () => setInstance(null);
+  }, [taskId, worktreePath, getPortal]);
+
+  // Register session-end callback
+  useEffect(() => {
+    setOnSessionEnd(taskId, onSessionEnd ?? null);
+    return () => setOnSessionEnd(taskId, null);
+  }, [taskId, onSessionEnd, setOnSessionEnd]);
+
+  // Register file-open callback
+  useEffect(() => {
+    setOnFileOpen(taskId, onFileOpen ?? null);
+    return () => setOnFileOpen(taskId, null);
+  }, [taskId, onFileOpen, setOnFileOpen]);
+
+  if (!instance) return null;
+  return <OutPortal node={instance.portalNode} />;
+}

package/src/components/task/types.ts

@@ -0,0 +1,6 @@
+export interface PromptOption {
+  id: string;
+  name: string;
+  content: string;
+  isDefault: boolean;
+}

package/src/components/ui/avatar.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: "default" | "sm" | "lg"
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
+        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
+        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
+        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarGroupCount({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarBadge,
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+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 "@/lib/utils"
+
+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 }

package/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-accent hover:text-foreground aria-expanded:bg-accent aria-expanded:text-foreground",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }