fix(dashboard): avoid node-only ui imports in browser

web/src/App.tsx

@@ -42,13 +42,11 @@ import {
   X,
   Zap,
 } from "lucide-react";
-import {
-  Button,
-  ListItem,
-  SelectionSwitcher,
-  Spinner,
-  Typography,
-} from "@nous-research/ui";
+import { Button } from "@nous-research/ui/ui/components/button";
+import { ListItem } from "@nous-research/ui/ui/components/list-item";
+import { SelectionSwitcher } from "@nous-research/ui/ui/components/selection-switcher";
+import { Spinner } from "@nous-research/ui/ui/components/spinner";
+import { Typography } from "@/components/NouiTypography";
 import { cn } from "@/lib/utils";
 import { Backdrop } from "@/components/Backdrop";
 import { SidebarFooter } from "@/components/SidebarFooter";

web/src/components/LanguageSwitcher.tsx

@@ -1,4 +1,5 @@
-import { Button, Typography } from "@nous-research/ui";
+import { Button } from "@nous-research/ui/ui/components/button";
+import { Typography } from "@/components/NouiTypography";
 import { useI18n } from "@/i18n/context";
 
 /**

web/src/components/NouiTypography.tsx

@@ -0,0 +1,63 @@
+import { forwardRef, type ElementType, type HTMLAttributes, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+type TypographyProps = HTMLAttributes<HTMLElement> & {
+  as?: ElementType;
+  children?: ReactNode;
+  compressed?: boolean;
+  courier?: boolean;
+  expanded?: boolean;
+  mondwest?: boolean;
+  mono?: boolean;
+  sans?: boolean;
+  variant?: "sm" | "md" | "lg" | "xl";
+};
+
+const variantClasses: Record<NonNullable<TypographyProps["variant"]>, string> = {
+  sm: "leading-1.4 text-[.9375rem] tracking-[0.1875rem]",
+  md: "text-[2.625rem] leading-[1] tracking-[0.0525rem]",
+  lg: "text-[2.625rem] leading-[1] tracking-[0.0525rem]",
+  xl: "text-[4.5rem] leading-[1] tracking-[0.135rem]",
+};
+
+export const Typography = forwardRef<HTMLElement, TypographyProps>(function Typography(
+  {
+    as: Component = "span",
+    className,
+    compressed,
+    courier,
+    expanded,
+    mondwest,
+    mono,
+    sans,
+    variant,
+    ...props
+  },
+  ref,
+) {
+  const hasFontVariant = compressed || courier || expanded || mondwest || mono || sans;
+
+  return (
+    <Component
+      className={cn(
+        compressed && "font-compressed",
+        courier && "font-courier",
+        expanded && "font-expanded",
+        mondwest && "font-mondwest tracking-[0.1875rem]",
+        mono && "font-mono",
+        (!hasFontVariant || sans) && "font-sans",
+        variant && variantClasses[variant],
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export const H2 = forwardRef<HTMLHeadingElement, Omit<TypographyProps, "as">>(function H2(
+  { className, variant = "lg", ...props },
+  ref,
+) {
+  return <Typography as="h2" className={cn("font-bold", className)} variant={variant} ref={ref} {...props} />;
+});

web/src/components/OAuthLoginModal.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useRef, useState } from "react";
 import { ExternalLink, X, Check } from "lucide-react";
-import { Button, CopyButton, H2, Spinner } from "@nous-research/ui";
+import { Button } from "@nous-research/ui/ui/components/button";
+import { CopyButton } from "@nous-research/ui/ui/components/command-block";
+import { Spinner } from "@nous-research/ui/ui/components/spinner";
+import { H2 } from "@/components/NouiTypography";
 import { api, type OAuthProvider, type OAuthStartResponse } from "@/lib/api";
 import { Input } from "@/components/ui/input";
 import { useI18n } from "@/i18n";

web/src/components/SidebarFooter.tsx

@@ -1,4 +1,4 @@
-import { Typography } from "@nous-research/ui";
+import { Typography } from "@/components/NouiTypography";
 import { useSidebarStatus } from "@/hooks/useSidebarStatus";
 import { cn } from "@/lib/utils";
 import { useI18n } from "@/i18n";

web/src/components/ThemeSwitcher.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Palette, Check } from "lucide-react";
-import { Button, ListItem, Typography } from "@nous-research/ui";
+import { Button } from "@nous-research/ui/ui/components/button";
+import { ListItem } from "@nous-research/ui/ui/components/list-item";
+import { Typography } from "@/components/NouiTypography";
 import { BUILTIN_THEMES, useTheme } from "@/themes";
 import { useI18n } from "@/i18n";
 import { cn } from "@/lib/utils";

web/src/pages/ChatPage.tsx

@@ -22,7 +22,8 @@ import { WebLinksAddon } from "@xterm/addon-web-links";
 import { WebglAddon } from "@xterm/addon-webgl";
 import { Terminal } from "@xterm/xterm";
 import "@xterm/xterm/css/xterm.css";
-import { Button, Typography } from "@nous-research/ui";
+import { Button } from "@nous-research/ui/ui/components/button";
+import { Typography } from "@/components/NouiTypography";
 import { cn } from "@/lib/utils";
 import { Copy, PanelRight, X } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";

web/src/pages/CronPage.tsx

@@ -1,6 +1,10 @@
 import { useCallback, useEffect, useState } from "react";
 import { Clock, Pause, Play, Plus, Trash2, Zap } from "lucide-react";
-import { Badge, Button, H2, Select, SelectOption, Spinner } from "@nous-research/ui";
+import { Badge } from "@nous-research/ui/ui/components/badge";
+import { Button } from "@nous-research/ui/ui/components/button";
+import { Select, SelectOption } from "@nous-research/ui/ui/components/select";
+import { Spinner } from "@nous-research/ui/ui/components/spinner";
+import { H2 } from "@/components/NouiTypography";
 import { api } from "@/lib/api";
 import type { CronJob } from "@/lib/api";
 import { DeleteConfirmDialog } from "@/components/DeleteConfirmDialog";

web/src/pages/ProfilesPage.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { ChevronDown, Pencil, Plus, Terminal, Trash2, Users } from "lucide-react";
-import { H2 } from "@nous-research/ui";
+import { H2 } from "@/components/NouiTypography";
 import { api } from "@/lib/api";
 import type { ProfileInfo } from "@/lib/api";
 import { DeleteConfirmDialog } from "@/components/DeleteConfirmDialog";