refactor(ui): move non-component exports out of component files

A file that exports both a component and anything else (cva style objects,
hooks) breaks Vite Fast Refresh — every edit full-reloads and wipes component
state. Move the four cva variants to sibling *-variants.ts files and the
useTheme/useMessages hooks next to their contexts (theme-context.ts,
i18n/context.ts), repointing importers. The @elide/ui barrel re-exports
everything from the new locations, so the public API is unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: sgammon

packages/ui/src/components/ai-actions.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Check, Copy, ExternalLink, Sparkles } from "lucide-react";
 import { cn } from "../lib/utils";
-import { useMessages } from "../i18n/provider";
+import { useMessages } from "../i18n/context";
 
 /**
  * AiActions — the "Use with AI" panel in the docs right rail: copy the page as

packages/ui/src/components/app-nav.tsx

@@ -3,7 +3,7 @@ import { ChevronDown, Globe, History, Search, Sparkles, Sun } from "lucide-react
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 import { ElideLogo } from "./elide-logo";
-import { useMessages } from "../i18n/provider";
+import { useMessages } from "../i18n/context";
 
 /**
  * AppNav — the 56px top nav bar present on every docs page: brand + "DOCS"

packages/ui/src/components/badge-variants.ts

@@ -0,0 +1,25 @@
+import { cva } from "class-variance-authority";
+
+/**
+ * Badge class variants. Kept out of badge.tsx so that file exports only
+ * components and Fast Refresh can preserve state on edit.
+ */
+export const badgeVariants = cva(
+  "inline-flex items-center gap-1.5 rounded-full font-semibold leading-none",
+  {
+    variants: {
+      variant: {
+        neutral: "border border-border text-muted-foreground",
+        primary: "text-[var(--primary-emphasis)] [background:var(--primary-soft)]",
+        supported: "text-[var(--eld-success-strong)] [background:color-mix(in_oklab,var(--eld-success-strong)_14%,transparent)]",
+        partial: "text-[var(--eld-warning-strong)] [background:color-mix(in_oklab,var(--eld-warning-strong)_14%,transparent)]",
+        missing: "text-muted-foreground [background:var(--muted)]",
+      },
+      size: {
+        sm: "px-2 py-0.5 text-[10px]",
+        md: "px-2.5 py-1 text-xs",
+      },
+    },
+    defaultVariants: { variant: "neutral", size: "md" },
+  },
+);

packages/ui/src/components/badge.tsx

@@ -1,31 +1,12 @@
 import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
+import { badgeVariants } from "./badge-variants";
 
 /**
  * Badge — leaf primitive. Includes the API-reference status tones
  * (supported / partial / missing) used across the docs reference pages.
  */
-const badgeVariants = cva(
-  "inline-flex items-center gap-1.5 rounded-full font-semibold leading-none",
-  {
-    variants: {
-      variant: {
-        neutral: "border border-border text-muted-foreground",
-        primary: "text-[var(--primary-emphasis)] [background:var(--primary-soft)]",
-        supported: "text-[var(--eld-success-strong)] [background:color-mix(in_oklab,var(--eld-success-strong)_14%,transparent)]",
-        partial: "text-[var(--eld-warning-strong)] [background:color-mix(in_oklab,var(--eld-warning-strong)_14%,transparent)]",
-        missing: "text-muted-foreground [background:var(--muted)]",
-      },
-      size: {
-        sm: "px-2 py-0.5 text-[10px]",
-        md: "px-2.5 py-1 text-xs",
-      },
-    },
-    defaultVariants: { variant: "neutral", size: "md" },
-  },
-);
-
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLSpanElement>,
     VariantProps<typeof badgeVariants> {
@@ -41,5 +22,3 @@ export function Badge({ className, variant, size, dot, children, ...props }: Bad
     </span>
   );
 }
-
-export { badgeVariants };

packages/ui/src/components/button-variants.ts

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority";
+
+/**
+ * Button class variants. Kept out of button.tsx so that file exports only
+ * components and Fast Refresh can preserve state on edit.
+ *
+ * `gradient` is the Elide brand CTA (the "Install" button). `changelog` is the
+ * violet-outlined affordance used in the docs nav.
+ */
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        gradient: "text-white [background:var(--eld-gradient-brand)] hover:opacity-95",
+        outline: "border border-border bg-transparent text-foreground hover:bg-[var(--hover)]",
+        ghost: "bg-transparent text-muted-foreground hover:bg-[var(--hover)] hover:text-foreground",
+        changelog:
+          "border text-foreground [border-color:var(--eld-accent-violet)] [background:color-mix(in_oklab,var(--eld-accent-violet)_10%,transparent)] [box-shadow:0_0_0_1px_color-mix(in_oklab,var(--eld-accent-violet)_22%,transparent),0_0_16px_-4px_color-mix(in_oklab,var(--eld-accent-violet)_55%,transparent)] hover:[background:color-mix(in_oklab,var(--eld-accent-violet)_16%,transparent)]",
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-9 px-4 text-sm",
+        icon: "h-9 w-9 p-0",
+        "icon-sm": "h-8 w-8 p-0",
+      },
+    },
+    defaultVariants: { variant: "primary", size: "md" },
+  },
+);

packages/ui/src/components/button.tsx

@@ -1,41 +1,17 @@
 import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
+import { type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
+import { buttonVariants } from "./button-variants";
 
 /**
  * Button — leaf primitive.
  *
  * Styled entirely from @elide/tokens (bg-primary, text-primary-foreground, …).
- * `gradient` is the Elide brand CTA (the "Install" button). `changelog` is the
- * violet-outlined affordance used in the docs nav.
  *
  * The `render` prop mirrors Base UI's composition model (replaces Radix
  * `asChild`): pass an element and the button's props/classes merge onto it —
  * e.g. `<Button render={<a href="/install" />}>Install</Button>`.
  */
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
-        gradient: "text-white [background:var(--eld-gradient-brand)] hover:opacity-95",
-        outline: "border border-border bg-transparent text-foreground hover:bg-[var(--hover)]",
-        ghost: "bg-transparent text-muted-foreground hover:bg-[var(--hover)] hover:text-foreground",
-        changelog:
-          "border text-foreground [border-color:var(--eld-accent-violet)] [background:color-mix(in_oklab,var(--eld-accent-violet)_10%,transparent)] [box-shadow:0_0_0_1px_color-mix(in_oklab,var(--eld-accent-violet)_22%,transparent),0_0_16px_-4px_color-mix(in_oklab,var(--eld-accent-violet)_55%,transparent)] hover:[background:color-mix(in_oklab,var(--eld-accent-violet)_16%,transparent)]",
-      },
-      size: {
-        sm: "h-8 px-3 text-xs",
-        md: "h-9 px-4 text-sm",
-        icon: "h-9 w-9 p-0",
-        "icon-sm": "h-8 w-8 p-0",
-      },
-    },
-    defaultVariants: { variant: "primary", size: "md" },
-  },
-);
-
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
@@ -65,5 +41,3 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   },
 );
 Button.displayName = "Button";
-
-export { buttonVariants };

packages/ui/src/components/code-block.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Check, Copy } from "lucide-react";
 import { Highlight, type PrismTheme } from "prism-react-renderer";
 import { cn, keyed } from "../lib/utils";
-import { useMessages } from "../i18n/provider";
+import { useMessages } from "../i18n/context";
 
 /**
  * CopyButton — copies `value` to the clipboard, flips to a check for 1.5s.

packages/ui/src/components/mobile-nav.tsx

@@ -3,7 +3,7 @@ import { History, Menu, Search, Sparkle } from "lucide-react";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 import { Sheet, SheetTrigger, SheetContent } from "./sheet";
-import { useMessages } from "../i18n/provider";
+import { useMessages } from "../i18n/context";
 
 /**
  * MobileNav — the docs shell at phone width (mockup 3b): a condensed top app

packages/ui/src/components/navigation-menu-variants.ts

@@ -0,0 +1,10 @@
+import { cva } from "class-variance-authority"
+
+/**
+ * Trigger style shared by NavigationMenuTrigger and standalone links styled to
+ * match. Kept out of navigation-menu.tsx so that file exports only components
+ * and Fast Refresh can preserve state on edit.
+ */
+export const navigationMenuTriggerStyle = cva(
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
+)

packages/ui/src/components/navigation-menu.tsx

@@ -1,7 +1,7 @@
 import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
-import { cva } from "class-variance-authority"
 
 import { cn } from "../lib/utils"
+import { navigationMenuTriggerStyle } from "./navigation-menu-variants"
 import { ChevronDownIcon } from "lucide-react"
 
 function NavigationMenu({
@@ -55,10 +55,6 @@ function NavigationMenuItem({
   )
 }
 
-const navigationMenuTriggerStyle = cva(
-  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
-)
-
 function NavigationMenuTrigger({
   className,
   children,
@@ -163,6 +159,5 @@ export {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
   NavigationMenuPositioner,
 }