prettier config

.prettierrc.mjs

@@ -1,6 +1,6 @@
 /** @type {import("prettier").Config} */
 export default {
-  plugins: ["prettier-plugin-astro"],
+  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
   overrides: [
     {
       files: "*.astro",

apps/docs/src/components/blog-header.astro

@@ -14,19 +14,19 @@ const { title } = Astro.props;
 const { category } = Astro.params;
 ---
 
-<h1 class="inline-block font-heading text-4xl">{title}</h1>
+<h1 class="font-heading inline-block text-4xl">{title}</h1>
 
-<div class="flex items-start justify-between my-6 max-md:gap-4">
+<div class="my-6 flex items-start justify-between max-md:gap-4">
   <div
-    class="flex items-center lg:w-full max-w-xs h-10 rounded-md px-2 lg:px-3 border text-muted-foreground"
+    class="text-muted-foreground flex h-10 max-w-xs items-center rounded-md border px-2 lg:w-full lg:px-3"
   >
     <Icon name="ri:search-line" class="size-5" />
-    <span class="text-sm ml-2 hidden lg:flex">Search (coming soon)</span>
+    <span class="ml-2 hidden text-sm lg:flex">Search (coming soon)</span>
   </div>
 
   {
     categories?.length ? (
-      <ul class="flex snap-x snap-mandatory overflow-auto items-center space-x-2 lg:space-x-2.5 pb-2">
+      <ul class="flex snap-x snap-mandatory items-center space-x-2 overflow-auto pb-2 lg:space-x-2.5">
         <li class="flex-shrink-0 snap-start">
           <a
             href={`/blog`}

apps/docs/src/components/callout.astro

@@ -20,7 +20,7 @@ const { icon, type = "default" } = Astro.props;
       type === "warning",
   })}
 >
-  {icon && <span class="mr-3 text-xl font-icon-callout">{icon}</span>}
+  {icon && <span class="font-icon-callout mr-3 text-xl">{icon}</span>}
   <div class="callout">
     <slot />
   </div>

apps/docs/src/components/cards/blog-card.astro

@@ -12,11 +12,11 @@ const post = Astro.props;
 <article class="group space-y-4">
   <a
     href={`/blog/${post.slug}/`}
-    class="flex h-52 group-hover:-translate-y-2 group-hover:shadow-xl transition duration-300"
+    class="flex h-52 transition duration-300 group-hover:-translate-y-2 group-hover:shadow-xl"
   >
     <Image
       loading="eager"
-      class="w-full h-full object-cover rounded-xl overflow-hidden"
+      class="h-full w-full overflow-hidden rounded-xl object-cover"
       width={720}
       height={360}
       src={post.data.cover}
@@ -35,7 +35,7 @@ const post = Astro.props;
       </Badge>
     </a>
     <span
-      class="font-medium text-muted-foreground"
+      class="text-muted-foreground font-medium"
       transition:name={"date-" + post.slug}
     >
       {formatDate(post.data.pubDate)}
@@ -45,7 +45,7 @@ const post = Astro.props;
   <div>
     <a href={`/blog/${post.slug}/`} class="group-hover:underline">
       <h2
-        class="font-heading text-xl md:text-2xl leading-snug line-clamp-3"
+        class="font-heading line-clamp-3 text-xl leading-snug md:text-2xl"
         transition:name={"title-" + post.slug}
       >
         {post.data.title}

apps/docs/src/components/cards/guide-card.astro

@@ -34,7 +34,7 @@ const guide = Astro.props.data;
     {
       guide.pubDate && (
         <span
-          class="font-medium text-sm text-muted-foreground"
+          class="text-muted-foreground text-sm font-medium"
           transition:name={"date-" + slug}
         >
           {formatDate(guide.pubDate)}

apps/docs/src/components/content/mdx-card.astro

@@ -21,7 +21,7 @@ const { href, className, disabled, ...attrs } = Astro.props;
 >
   <div class="flex flex-col justify-between space-y-4">
     <div
-      class="space-y-2 [&>h3]:!mt-0 [&>h4]:!mt-0 [&>p]:text-muted-foreground"
+      class="[&>p]:text-muted-foreground space-y-2 [&>h3]:!mt-0 [&>h4]:!mt-0"
     >
       <slot />
     </div>

apps/docs/src/components/content/mdx-components.tsx

@@ -88,7 +88,7 @@ export const MdxComponents = {
   blockquote: ({ className, ...props }: Props) => (
     <blockquote
       className={cn(
-        "mt-6 border-l-2 pl-6 italic [&>*]:text-muted-foreground",
+        "[&>*]:text-muted-foreground mt-6 border-l-2 pl-6 italic",
         className,
       )}
       {...props}
@@ -109,7 +109,7 @@ export const MdxComponents = {
   ),
   tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
     <tr
-      className={cn("m-0 border-t p-0 even:bg-muted", className)}
+      className={cn("even:bg-muted m-0 border-t p-0", className)}
       {...props}
     />
   ),

apps/docs/src/components/content/mdx-image.astro

@@ -16,7 +16,7 @@ const { src, alt, className, height, width, ...attrs } = Astro.props;
 
 <Image
   class:list={cn(
-    "w-full h-full object-cover rounded-md overflow-hidden border",
+    "h-full w-full overflow-hidden rounded-md border object-cover",
     className,
   )}
   width={width}

apps/docs/src/components/example-grid.astro

@@ -13,20 +13,20 @@ type Props = {
 const { title, items } = Astro.props;
 ---
 
-<div id="" class="grid grid-cols-3 xl:grid-cols-4 py-8 gap-x-8 gap-y-6">
-  <h3 class="text-lg text-foreground font-semibold col-span-3 xl:col-span-1">
+<div id="" class="grid grid-cols-3 gap-x-8 gap-y-6 py-8 xl:grid-cols-4">
+  <h3 class="text-foreground col-span-3 text-lg font-semibold xl:col-span-1">
     {title}
   </h3>
   <div
-    class="col-span-3 grid sm:grid-cols-2 md:grid-cols-3 gap-6 sm:gap-y-7 lg:gap-x-7"
+    class="col-span-3 grid gap-6 sm:grid-cols-2 sm:gap-y-7 md:grid-cols-3 lg:gap-x-7"
   >
     {
       items &&
         items.map((item) => (
           <a
             href={item.disabled ? undefined : item.href}
             class={cn(
-              "group bg-background rounded-xl overflow-hidden card_border",
+              "bg-background card_border group overflow-hidden rounded-xl",
               item.disabled && "cursor-default",
             )}
             {...(item.forceReload ? { "data-astro-reload": true } : {})}
@@ -43,16 +43,16 @@ const { title, items } = Astro.props;
                 class="size-full object-cover object-top"
               />
               {item.disabled && (
-                <p class="absolute z-10 top-3 right-3 text-foreground bg-gray-900 bg-opacity-35 rounded-full flex items-center justify-center p-1.5">
+                <p class="text-foreground absolute right-3 top-3 z-10 flex items-center justify-center rounded-full bg-gray-900 bg-opacity-35 p-1.5">
                   <span class="sr-only">Work on it actually!</span>
                   <Icons.wrenchSrewdriver className="size-6 text-white" />
                 </p>
               )}
             </div>
 
-            <div class="py-3 px-4 border-t">
-              <p class="font-medium text-foreground mb-1.5">{item.title}</p>
-              <p class="text-sm text-muted-foreground/85">{item.description}</p>
+            <div class="border-t px-4 py-3">
+              <p class="text-foreground mb-1.5 font-medium">{item.title}</p>
+              <p class="text-muted-foreground/85 text-sm">{item.description}</p>
             </div>
           </a>
         ))

apps/docs/src/components/layout/header.astro

@@ -16,7 +16,7 @@ const { className } = Astro.props;
     className,
   )}
 >
-  <div class="relative container flex items-center justify-between w-full">
+  <div class="container relative flex w-full items-center justify-between">
     <div class="flex items-center gap-6 md:gap-8 lg:gap-10">
       <a href="/" class="hidden items-center space-x-2 md:flex">
         <Icon name="stars-outline" class="size-8" />
@@ -34,7 +34,7 @@ const { className } = Astro.props;
 
     <!-- logo mobile center -->
     <div
-      class="absolute top-1/2 left-1/2 -translate-x-4 -translate-y-4 md:hidden"
+      class="absolute left-1/2 top-1/2 -translate-x-4 -translate-y-4 md:hidden"
     >
       <a href="/" aria-label="llm-ui homepage">
         <Icon name="stars-outline" class="size-8" />

apps/docs/src/components/layout/main-nav.astro

@@ -17,7 +17,7 @@ const segment = extractSegmentURL(Astro.url.pathname);
         <a
           href={item.disabled ? "#" : item.href}
           class={cn(
-            "flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm",
+            "hover:text-foreground/80 flex items-center text-lg font-medium transition-colors sm:text-sm",
             item.href.startsWith(`/${segment}`)
               ? "text-foreground"
               : "text-foreground/60",

apps/docs/src/components/layout/sheet-mobile-nav.tsx

@@ -47,7 +47,7 @@ export function SheetMobileNav({
           <span className="font-bold">{siteConfig.name}</span>
         </a>
         <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-10">
-          <div className="mt-2 mb-20">
+          <div className="mb-20 mt-2">
             {mainNavItems?.length ? (
               <div className="flex flex-col space-y-3">
                 {mergedMainNavItems?.map(

apps/docs/src/components/page-header.astro

@@ -12,7 +12,7 @@ const { heading, text, className, ...attrs } = Astro.props;
 ---
 
 <div class={cn("space-y-4", className)} {...attrs}>
-  <h1 class="inline-block font-heading text-4xl">
+  <h1 class="font-heading inline-block text-4xl">
     {heading}
   </h1>
   {text && <p class="text-muted-foreground">{text}</p>}

apps/docs/src/components/theme-toggle.tsx

@@ -105,7 +105,7 @@ export function ThemeToggle() {
     <button
       role="button"
       onClick={toggleTheme}
-      className="min-h-[40px] block focus:outline-none"
+      className="block min-h-[40px] focus:outline-none"
     >
       <span className="sr-only">Toggle mode</span>
       <AnimatePresence initial={false}>

apps/docs/src/components/toc.tsx

@@ -88,8 +88,8 @@ function Tree({ tree, level = 1, activeItem }: TreeProps) {
               className={cn(
                 "inline-block no-underline",
                 item.url === `#${activeItem}`
-                  ? "font-medium text-primary"
-                  : "text-sm text-muted-foreground",
+                  ? "text-primary font-medium"
+                  : "text-muted-foreground text-sm",
               )}
             >
               {item.title}

apps/docs/src/components/ui/accordion.tsx

@@ -45,7 +45,7 @@ const AccordionContent = React.forwardRef<
   <AccordionPrimitive.Content
     ref={ref}
     className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all",
       className,
     )}
     {...props}

apps/docs/src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "bg-card text-card-foreground rounded-lg border shadow-sm",
       className,
     )}
     {...props}
@@ -50,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));

apps/docs/src/components/ui/form.tsx

@@ -134,7 +134,7 @@ const FormDescription = React.forwardRef<
     <p
       ref={ref}
       id={formDescriptionId}
-      className={cn("text-sm text-muted-foreground", className)}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
   );
@@ -156,7 +156,7 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-sm font-medium text-destructive", className)}
+      className={cn("text-destructive text-sm font-medium", className)}
       {...props}
     >
       {body}

apps/docs/src/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

apps/docs/src/components/ui/navigation-menu.tsx

@@ -69,7 +69,7 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 left-0 top-0 w-full md:absolute md:w-auto ",
       className,
     )}
     {...props}
@@ -86,7 +86,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
         className,
       )}
       ref={ref}
@@ -104,12 +104,12 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
       className,
     )}
     {...props}
   >
-    <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div className="bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md" />
   </NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName =

apps/docs/src/components/ui/scroll-area.tsx

@@ -38,7 +38,7 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;

apps/docs/src/components/ui/select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}
@@ -38,7 +38,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,
@@ -79,7 +79,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
@@ -101,7 +101,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("bg-muted -mx-1 my-1 h-px", className)}
     {...props}
   />
 ));

apps/docs/src/components/ui/sheet.tsx

@@ -22,7 +22,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "bg-background/80 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 backdrop-blur-sm",
       className,
     )}
     {...props}
@@ -66,7 +66,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-7 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-7 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
         <X className="size-6" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -109,7 +109,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold text-foreground", className)}
+    className={cn("text-foreground text-lg font-semibold", className)}
     {...props}
   />
 ));
@@ -121,7 +121,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground text-sm", className)}
     {...props}
   />
 ));