@wopr-network/platform-ui-core 1.27.8 → 1.27.9

package/src/components/pricing/dividend-calculator.tsx

@@ -13,12 +13,11 @@ export function DividendCalculator() {
           <div className="space-y-2 text-center">
             <p className="text-lg text-foreground">
               <span className="font-semibold text-terminal">100K active users</span> &middot;{" "}
-              <span className="font-semibold text-terminal">$20/month average spend</span> &middot;
-              equal daily share
+              <span className="font-semibold text-terminal">$20/month average spend</span> &middot; equal daily share
             </p>
             <p className="text-muted-foreground">
-              Projected dividend: <span className="font-semibold text-terminal">~$0.67/day</span>.
-              Average daily spend: <span className="font-semibold text-terminal">~$0.67</span>.
+              Projected dividend: <span className="font-semibold text-terminal">~$0.67/day</span>. Average daily spend:{" "}
+              <span className="font-semibold text-terminal">~$0.67</span>.
             </p>
             <p className="text-xl font-bold text-terminal" data-testid="net-cost">
               Net cost of credits at scale: $0.
@@ -29,17 +28,12 @@ export function DividendCalculator() {
 
       <Card className="border-amber-500/20 bg-amber-500/5">
         <CardContent className="space-y-2 py-6 text-center">
-          <p className="text-sm uppercase tracking-widest text-amber-500">
-            Early adopter advantage
-          </p>
+          <p className="text-sm uppercase tracking-widest text-amber-500">Early adopter advantage</p>
           <p className="text-foreground">
             The earlier you join, the more you accumulate. Day 1 users in a 100K community collect{" "}
-            <span className="font-semibold text-terminal">~$132</span> in their first 60 days on a
-            $5 minimum spend.
-          </p>
-          <p className="text-sm text-muted-foreground">
-            The math doesn&apos;t lie — being early pays.
+            <span className="font-semibold text-terminal">~$132</span> in their first 60 days on a $5 minimum spend.
           </p>
+          <p className="text-sm text-muted-foreground">The math doesn&apos;t lie — being early pays.</p>
         </CardContent>
       </Card>
     </div>

package/src/components/pricing/dividend-stats.tsx

@@ -14,10 +14,7 @@ function useCountUp(target: number, duration = 1200) {
       return;
     }
     // Respect prefers-reduced-motion: skip animation, set immediately
-    if (
-      typeof window !== "undefined" &&
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches
-    ) {
+    if (typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
       setValue(target);
       return;
     }
@@ -79,9 +76,7 @@ export function DividendStats() {
       {error && <p className="col-span-full text-center text-sm text-red-500">{error}</p>}
       <Card className="border-terminal/30">
         <CardContent className="flex flex-col items-center gap-1 py-6 text-center">
-          <p className="text-xs uppercase tracking-widest text-muted-foreground">
-            Today&apos;s community pool
-          </p>
+          <p className="text-xs uppercase tracking-widest text-muted-foreground">Today&apos;s community pool</p>
           <p className="text-3xl font-bold text-terminal sm:text-4xl" data-testid="pool-amount">
             {loaded && pool > 0 ? formatDollars(animatedPool) : "--"}
           </p>
@@ -90,9 +85,7 @@ export function DividendStats() {
 
       <Card className="border-terminal/30">
         <CardContent className="flex flex-col items-center gap-1 py-6 text-center">
-          <p className="text-xs uppercase tracking-widest text-muted-foreground">
-            Active users in pool
-          </p>
+          <p className="text-xs uppercase tracking-widest text-muted-foreground">Active users in pool</p>
           <p className="text-3xl font-bold text-terminal sm:text-4xl" data-testid="active-users">
             {loaded && users > 0 ? Math.round(animatedUsers).toLocaleString() : "--"}
           </p>
@@ -101,13 +94,8 @@ export function DividendStats() {
 
       <Card className="border-terminal/30">
         <CardContent className="flex flex-col items-center gap-1 py-6 text-center">
-          <p className="text-xs uppercase tracking-widest text-muted-foreground">
-            Your projected daily dividend
-          </p>
-          <p
-            className="text-3xl font-bold text-terminal sm:text-4xl"
-            data-testid="projected-dividend"
-          >
+          <p className="text-xs uppercase tracking-widest text-muted-foreground">Your projected daily dividend</p>
+          <p className="text-3xl font-bold text-terminal sm:text-4xl" data-testid="projected-dividend">
             {loaded && dividend > 0 ? `~${formatCreditStandard(animatedDividend)}` : "--"}
           </p>
         </CardContent>

package/src/components/pricing/pricing-page.tsx

@@ -47,13 +47,13 @@ export async function PricingPage() {
         </h1>
 
         <p className="mt-6 max-w-xl text-lg text-muted-foreground">
-          Every day, the platform distributes credits back to active users from its own margin. The
-          bigger the community grows, the more you receive. Early users get the most.
+          Every day, the platform distributes credits back to active users from its own margin. The bigger the community
+          grows, the more you receive. Early users get the most.
         </p>
 
         <p className="mt-4 max-w-lg text-sm text-muted-foreground">
-          At scale, the daily dividend covers your entire credit spend. You&apos;re not paying to
-          run your bots. {brandName()} is.
+          At scale, the daily dividend covers your entire credit spend. You&apos;re not paying to run your bots.{" "}
+          {brandName()} is.
         </p>
       </section>
 
@@ -75,22 +75,17 @@ export async function PricingPage() {
           <span className="font-semibold text-terminal">
             ${pricingData.bot_price.amount}/{pricingData.bot_price.period}
           </span>
-          . That&apos;s the minimum to be eligible for the daily dividend. Usage is billed at cost
-          from credits.
+          . That&apos;s the minimum to be eligible for the daily dividend. Usage is billed at cost from credits.
         </p>
 
         <Card className="w-full max-w-md border-terminal">
           <CardHeader className="items-center text-center">
-            <CardTitle className="text-sm uppercase tracking-widest text-muted-foreground">
-              Pool eligibility
-            </CardTitle>
+            <CardTitle className="text-sm uppercase tracking-widest text-muted-foreground">Pool eligibility</CardTitle>
           </CardHeader>
           <CardContent className="flex flex-col items-center gap-4">
             <p className="text-5xl font-bold text-terminal sm:text-6xl" data-testid="bot-price">
               ${pricingData.bot_price.amount}
-              <span className="text-xl font-normal text-muted-foreground">
-                /{pricingData.bot_price.period}
-              </span>
+              <span className="text-xl font-normal text-muted-foreground">/{pricingData.bot_price.period}</span>
             </p>
             <p className="text-muted-foreground">Minimum spend to stay in the dividend pool.</p>
           </CardContent>
@@ -121,9 +116,7 @@ export async function PricingPage() {
                           <p className="font-medium">{model.name}</p>
                           <p className="text-sm text-muted-foreground">per {model.unit}</p>
                         </div>
-                        <p className="text-lg font-bold text-terminal">
-                          {formatPrice(model.price)}
-                        </p>
+                        <p className="text-lg font-bold text-terminal">{formatPrice(model.price)}</p>
                       </CardContent>
                     </Card>
                   ))}
@@ -136,19 +129,15 @@ export async function PricingPage() {
 
       {/* --- VPS Tier --- */}
       <section className="mx-auto max-w-4xl px-6 pb-24">
-        <h2 className="mb-4 text-center text-2xl font-bold tracking-tight sm:text-3xl">
-          Need a dedicated machine?
-        </h2>
+        <h2 className="mb-4 text-center text-2xl font-bold tracking-tight sm:text-3xl">Need a dedicated machine?</h2>
         <p className="mb-8 text-center text-muted-foreground">
-          The VPS tier gives your bot a persistent container with fixed monthly pricing — no
-          per-credit billing for compute.
+          The VPS tier gives your bot a persistent container with fixed monthly pricing — no per-credit billing for
+          compute.
         </p>
         <div className="mx-auto max-w-sm">
           <Card className="border-terminal/50">
             <CardHeader className="items-center text-center">
-              <CardTitle className="text-sm uppercase tracking-widest text-muted-foreground">
-                VPS tier
-              </CardTitle>
+              <CardTitle className="text-sm uppercase tracking-widest text-muted-foreground">VPS tier</CardTitle>
             </CardHeader>
             <CardContent className="flex flex-col items-center gap-4">
               <p className="text-5xl font-bold text-terminal sm:text-6xl">
@@ -160,8 +149,7 @@ export async function PricingPage() {
                   <span className="text-terminal">✓</span> 2 GB RAM / 2 vCPU / 20 GB SSD
                 </li>
                 <li className="flex items-center gap-2">
-                  <span className="text-terminal">✓</span> Persistent container — data survives
-                  restarts
+                  <span className="text-terminal">✓</span> Persistent container — data survives restarts
                 </li>
                 <li className="flex items-center gap-2">
                   <span className="text-terminal">✓</span> Dedicated hostname
@@ -173,12 +161,7 @@ export async function PricingPage() {
                   <span className="text-terminal">✓</span> Flat monthly price — no metered compute
                 </li>
               </ul>
-              <Button
-                data-onboarding-id="pricing.subscribe.vps"
-                variant="terminal"
-                className="w-full"
-                asChild
-              >
+              <Button data-onboarding-id="pricing.subscribe.vps" variant="terminal" className="w-full" asChild>
                 <Link href="/signup">Get started</Link>
               </Button>
             </CardContent>
@@ -189,8 +172,8 @@ export async function PricingPage() {
       {/* --- Credits Explainer --- */}
       <section className="flex flex-col items-center justify-center gap-6 px-6 pb-24 text-center">
         <p className="max-w-lg text-lg text-muted-foreground">
-          Your bot is ${pricingData.bot_price.amount}/mo. Usage is billed from credits. Free tier
-          includes ${pricingData.signup_credit} signup credit.
+          Your bot is ${pricingData.bot_price.amount}/mo. Usage is billed from credits. Free tier includes $
+          {pricingData.signup_credit} signup credit.
         </p>
         <p className="text-sm text-muted-foreground">
           Credits in, dividend back. The community grows, your costs shrink.
@@ -207,9 +190,7 @@ export async function PricingPage() {
           <Link href="/signup">Get Started</Link>
         </Button>
 
-        <span className="mt-4 text-sm text-muted-foreground opacity-60">
-          {getBrandConfig().domain}
-        </span>
+        <span className="mt-4 text-sm text-muted-foreground opacity-60">{getBrandConfig().domain}</span>
       </section>
 
       {/* --- Footer --- */}

package/src/components/settings/create-org-wizard.tsx

@@ -155,9 +155,7 @@ export default function CreateOrgWizard() {
             >
               <DialogHeader>
                 <DialogTitle>Confirm</DialogTitle>
-                <DialogDescription>
-                  You{"'"}ll be the admin. You can invite members after setup.
-                </DialogDescription>
+                <DialogDescription>You{"'"}ll be the admin. You can invite members after setup.</DialogDescription>
               </DialogHeader>
               <div className="mt-4 space-y-3">
                 <div className="rounded-md border px-4 py-3 text-sm">
@@ -165,8 +163,7 @@ export default function CreateOrgWizard() {
                     <span className="text-muted-foreground">Name:</span> <strong>{orgName}</strong>
                   </p>
                   <p>
-                    <span className="text-muted-foreground">Slug:</span>{" "}
-                    <code className="text-xs">{slug}</code>
+                    <span className="text-muted-foreground">Slug:</span> <code className="text-xs">{slug}</code>
                   </p>
                 </div>
                 {error && <p className="text-sm text-destructive">{error}</p>}

package/src/components/sidebar.tsx

@@ -20,8 +20,8 @@ import {
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
 import { AccountSwitcher } from "@/components/account-switcher";
+import { CreditBalanceBadge } from "@/components/billing/credit-balance-badge";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -31,10 +31,8 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
-import { getCreditBalance } from "@/lib/api";
 import { signOut, useSession } from "@/lib/auth-client";
 import { getBrandConfig, productName } from "@/lib/brand-config";
-import { formatCreditStandard } from "@/lib/format-credit";
 import { cn } from "@/lib/utils";
 
 function getNavItems() {
@@ -44,21 +42,13 @@ function getNavItems() {
 function isNavActive(href: string, pathname: string): boolean {
   if (href === "/dashboard") return pathname === "/dashboard";
   if (href === "/marketplace") return pathname === "/marketplace";
-  if (href === "/settings/profile") return pathname.startsWith("/settings");
-  if (href === "/billing/plans")
-    return pathname.startsWith("/billing") && !pathname.startsWith("/billing/credits");
+  if (href === "/settings") return pathname.startsWith("/settings");
+  if (href === "/billing/plans") return pathname.startsWith("/billing") && !pathname.startsWith("/billing/credits");
   if (href === "/billing/credits") return pathname.startsWith("/billing/credits");
   if (href === "/admin/tenants" || href === "/admin") return pathname.startsWith("/admin");
   return pathname.startsWith(href);
 }
 
-function balanceColorClass(balance: number): string {
-  if (balance === 0) return "text-red-500";
-  if (balance < 1) return "text-red-500";
-  if (balance <= 2) return "text-amber-500";
-  return "text-terminal";
-}
-
 function getInitials(name: string): string {
   return name
     .split(" ")
@@ -90,23 +80,9 @@ export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
   const pathname = usePathname();
   const router = useRouter();
   const { data: session, isPending } = useSession();
-  const [creditBalance, setCreditBalance] = useState<number | null>(null);
 
   const user = session?.user;
 
-  const loadBalance = useCallback(async () => {
-    try {
-      const data = await getCreditBalance();
-      setCreditBalance(data.balance);
-    } catch {
-      // Silently fail — balance is non-critical UI decoration
-    }
-  }, []);
-
-  useEffect(() => {
-    if (user) loadBalance();
-  }, [user, loadBalance]);
-
   async function handleSignOut() {
     try {
       await signOut();
@@ -131,8 +107,7 @@ export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
         {getNavItems()
           .filter(
             (item) =>
-              !item.href.startsWith("/admin") ||
-              (user as { role?: string } | undefined)?.role === "platform_admin",
+              !item.href.startsWith("/admin") || (user as { role?: string } | undefined)?.role === "platform_admin",
           )
           .map((item) => {
             const NavIcon = getNavIcon(item.href);
@@ -153,11 +128,7 @@ export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
                   {NavIcon && <NavIcon className="size-4 shrink-0 opacity-70" />}
                   {item.label}
                 </span>
-                {item.label === "Credits" && creditBalance !== null && (
-                  <span className={cn("text-xs font-mono", balanceColorClass(creditBalance))}>
-                    {formatCreditStandard(creditBalance)}
-                  </span>
-                )}
+                {item.label === "Credits" && <CreditBalanceBadge />}
               </Link>
             );
           })}
@@ -190,17 +161,11 @@ export function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
               <DropdownMenuLabel className="font-normal">
                 <div className="flex flex-col gap-1">
                   {user.name && <span className="text-sm font-medium">{user.name}</span>}
-                  {user.email && (
-                    <span className="text-xs text-muted-foreground">{user.email}</span>
-                  )}
+                  {user.email && <span className="text-xs text-muted-foreground">{user.email}</span>}
                 </div>
               </DropdownMenuLabel>
               <DropdownMenuSeparator />
-              <DropdownMenuItem onClick={() => router.push("/settings/profile")}>
-                <UserIcon />
-                Profile
-              </DropdownMenuItem>
-              <DropdownMenuItem onClick={() => router.push("/settings/providers")}>
+              <DropdownMenuItem onClick={() => router.push("/settings")}>
                 <SettingsIcon />
                 Settings
               </DropdownMenuItem>

package/src/components/sidecar-frame.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useSidecarBridge } from "@/hooks/use-sidecar-bridge";
+import { getRouteType } from "@/lib/sidecar-routes";
+
+/**
+ * Build the iframe src. For deep-link paths (non-/dashboard iframe routes),
+ * pass the path as an `initial-path` query so the sidecar's root redirect
+ * can land on the right page directly instead of racing with the shell's
+ * postMessage forwarding. See CompanyRootRedirect on the sidecar side.
+ */
+function buildIframeSrc(): string {
+  if (typeof window === "undefined") return "/_sidecar/";
+  const pathname = window.location.pathname;
+  if (getRouteType(pathname) !== "iframe" || pathname === "/dashboard") return "/_sidecar/";
+  const initialPath = pathname + window.location.search + window.location.hash;
+  return `/_sidecar/?initial-path=${encodeURIComponent(initialPath)}`;
+}
+
+export function SidecarFrame() {
+  // iframe loads /_sidecar/ — core API's tenant-proxy resolves the user's instance
+  const { setIframeRef, navigate } = useSidecarBridge();
+  const pathname = usePathname();
+  const iframeElRef = useRef<HTMLIFrameElement>(null);
+  const [iframeLoaded, setIframeLoaded] = useState(false);
+  // Stable across re-renders: computed once from the shell's initial URL so
+  // the iframe doesn't reload when the shell URL changes post-routeChanged.
+  const [iframeSrc] = useState(buildIframeSrc);
+
+  const routeType = getRouteType(pathname);
+  const isVisible = routeType === "iframe";
+
+  // Register iframe ref with bridge
+  useEffect(() => {
+    setIframeRef(iframeElRef.current);
+    return () => setIframeRef(null);
+  }, [setIframeRef]);
+
+  // Handle browser back/forward
+  useEffect(() => {
+    function onPopState() {
+      const newPath = window.location.pathname;
+      if (getRouteType(newPath) === "iframe") {
+        navigate(newPath);
+      }
+    }
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, [navigate]);
+
+  return (
+    <div className="relative flex-1 min-h-0" style={{ display: isVisible ? "flex" : "none" }}>
+      {/* Loading skeleton until sidecar posts "ready" */}
+      {isVisible && !iframeLoaded && (
+        <div className="absolute inset-0 flex flex-col gap-4 p-6">
+          <Skeleton className="h-8 w-64" />
+          <Skeleton className="h-4 w-96" />
+          <div className="flex gap-4 mt-4">
+            <Skeleton className="h-32 w-64" />
+            <Skeleton className="h-32 w-64" />
+            <Skeleton className="h-32 w-64" />
+          </div>
+        </div>
+      )}
+      <iframe
+        ref={iframeElRef}
+        src={iframeSrc}
+        title="Paperclip"
+        className="h-full w-full border-0"
+        onLoad={() => setIframeLoaded(true)}
+        allow="clipboard-write"
+      />
+    </div>
+  );
+}

package/src/components/status/status-page.tsx

@@ -17,10 +17,7 @@ const STATUS_LABELS: Record<HealthStatus, string> = {
   unhealthy: "Down",
 };
 
-const BANNER_CONFIG: Record<
-  HealthStatus,
-  { text: string; border: string; bg: string; textColor: string }
-> = {
+const BANNER_CONFIG: Record<HealthStatus, { text: string; border: string; bg: string; textColor: string }> = {
   healthy: {
     text: "> ALL SYSTEMS OPERATIONAL",
     border: "border-terminal/20",
@@ -96,9 +93,7 @@ export function StatusPage() {
     <div className="mx-auto max-w-2xl px-6 py-16">
       <div className="space-y-1">
         <h1 className="text-2xl font-bold tracking-tight">Platform Status</h1>
-        <p className="text-sm text-muted-foreground">
-          Real-time health of the {brandName()} platform.
-        </p>
+        <p className="text-sm text-muted-foreground">Real-time health of the {brandName()} platform.</p>
       </div>
 
       <div className="mt-8 space-y-6">
@@ -116,9 +111,7 @@ export function StatusPage() {
             <div className="flex items-center gap-3">
               <XCircle className="size-5 shrink-0 text-red-500" />
               <div className="flex-1">
-                <p className="text-sm font-medium text-red-500">
-                  Unable to reach the {brandName()} platform
-                </p>
+                <p className="text-sm font-medium text-red-500">Unable to reach the {brandName()} platform</p>
                 <p className="mt-1 text-xs text-muted-foreground">
                   The health endpoint is not responding. The platform may be experiencing an outage.
                 </p>
@@ -136,14 +129,7 @@ export function StatusPage() {
             {(() => {
               const cfg = BANNER_CONFIG[health.status];
               return (
-                <div
-                  className={cn(
-                    "rounded-sm border px-4 py-2 text-sm font-mono",
-                    cfg.border,
-                    cfg.bg,
-                    cfg.textColor,
-                  )}
-                >
+                <div className={cn("rounded-sm border px-4 py-2 text-sm font-mono", cfg.border, cfg.bg, cfg.textColor)}>
                   {cfg.text}
                 </div>
               );
@@ -160,9 +146,7 @@ export function StatusPage() {
                     </div>
                     <div className="flex items-center gap-3">
                       {svc.latencyMs !== null && (
-                        <span className="text-xs font-mono text-muted-foreground">
-                          {svc.latencyMs}ms
-                        </span>
+                        <span className="text-xs font-mono text-muted-foreground">{svc.latencyMs}ms</span>
                       )}
                       <div className="flex items-center gap-1.5">
                         <StatusIcon status={svc.status} />
@@ -190,13 +174,7 @@ export function StatusPage() {
               </div>
               <div className="flex items-center gap-2">
                 {lastChecked && <span>checked {lastChecked.toLocaleTimeString()}</span>}
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="h-6 px-2"
-                  onClick={load}
-                  disabled={refreshing}
-                >
+                <Button variant="ghost" size="sm" className="h-6 px-2" onClick={load} disabled={refreshing}>
                   <RefreshCw className={cn("size-3", refreshing && "animate-spin")} />
                 </Button>
               </div>

package/src/components/ui/alert-dialog.tsx

@@ -9,9 +9,7 @@ function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimit
   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
 }
 
-function AlertDialogTrigger({
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
   return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
 }
 
@@ -19,15 +17,12 @@ function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialog
   return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
 }
 
-function AlertDialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
   return (
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 backdrop-blur-sm",
         className,
       )}
       {...props}
@@ -35,17 +30,14 @@ function AlertDialogOverlay({
   );
 }
 
-function AlertDialogContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
   return (
     <AlertDialogPortal>
       <AlertDialogOverlay />
       <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg duration-200",
           className,
         )}
         {...props}
@@ -74,10 +66,7 @@ function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">)
   );
 }
 
-function AlertDialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
@@ -100,10 +89,7 @@ function AlertDialogDescription({
   );
 }
 
-function AlertDialogAction({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
   return (
     <AlertDialogPrimitive.Action
       data-slot="alert-dialog-action"
@@ -113,10 +99,7 @@ function AlertDialogAction({
   );
 }
 
-function AlertDialogCancel({
-  className,
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
   return (
     <AlertDialogPrimitive.Cancel
       data-slot="alert-dialog-cancel"

package/src/components/ui/badge.tsx

@@ -13,8 +13,7 @@ const badgeVariants = cva(
         secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
           "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         link: "text-primary underline-offset-4 [a&]:hover:underline",
         terminal: "border-terminal text-terminal bg-terminal/10 [a&]:hover:bg-terminal/20",
@@ -35,12 +34,7 @@ function Badge({
   const Comp = asChild ? Slot.Root : "span";
 
   return (
-    <Comp
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
+    <Comp data-slot="badge" data-variant={variant} className={cn(badgeVariants({ variant }), className)} {...props} />
   );
 }
 

package/src/components/ui/banner.tsx

@@ -24,12 +24,7 @@ function Banner({
   ...props
 }: React.ComponentProps<"div"> & VariantProps<typeof bannerVariants>) {
   return (
-    <div
-      data-slot="banner"
-      data-variant={variant}
-      className={cn(bannerVariants({ variant, className }))}
-      {...props}
-    />
+    <div data-slot="banner" data-variant={variant} className={cn(bannerVariants({ variant, className }))} {...props} />
   );
 }