From e37bd38f346f9af148eb39867a0390f9e9c9fd5a Mon Sep 17 00:00:00 2001
From: ajnart <49837342+ajnart@users.noreply.github.com>
Date: Wed, 24 Jun 2026 13:51:55 +0000
Subject: [PATCH] style: auto-fix lint and format

---
 apps/docs/src/components/store/DetailPage.tsx |  33 ++++--
 apps/docs/src/components/store/StoreApp.tsx   |  15 ++-
 apps/docs/src/components/store/useStore.ts    |   4 +-
 apps/docs/src/components/ui/badge.tsx         |  27 ++---
 apps/docs/src/components/ui/button.tsx        |  26 ++---
 apps/docs/src/components/ui/dialog.tsx        |  84 +++++---------
 apps/docs/src/components/ui/input.tsx         |  12 +-
 apps/docs/src/components/ui/label.tsx         |  10 +-
 apps/docs/src/components/ui/select.tsx        | 106 ++++++------------
 apps/docs/src/components/ui/separator.tsx     |  16 +--
 apps/docs/src/components/ui/textarea.tsx      |  10 +-
 .../custom-widgets/_custom-widget-form.tsx    |  83 ++++++++++++--
 .../custom-widgets/_custom-widget-list.tsx    |  14 ++-
 13 files changed, 224 insertions(+), 216 deletions(-)

diff --git a/apps/docs/src/components/store/DetailPage.tsx b/apps/docs/src/components/store/DetailPage.tsx
index 018c4b047..6d95aea8f 100644
--- a/apps/docs/src/components/store/DetailPage.tsx
+++ b/apps/docs/src/components/store/DetailPage.tsx
@@ -227,7 +227,9 @@ const CommentsSection = ({
     const trimmed = editContent.trim();
     if (!trimmed) return;
     try {
-      const updated = await pb.collection("comments").update<StoreComment>(id, { content: trimmed }, { expand: "author" });
+      const updated = await pb
+        .collection("comments")
+        .update<StoreComment>(id, { content: trimmed }, { expand: "author" });
       setRows((prev) => prev.map((c) => (c.id === id ? updated : c)));
       setEditingId(null);
     } catch (caught) {
@@ -329,7 +331,12 @@ const DeleteConfirmButton = ({ onConfirm }: { onConfirm: () => void }) => {
   const [pending, setPending] = useState(false);
   const timer = useRef<ReturnType<typeof setTimeout>>(null);
 
-  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    [],
+  );
 
   const handleClick = () => {
     if (!pending) {
@@ -345,7 +352,9 @@ const DeleteConfirmButton = ({ onConfirm }: { onConfirm: () => void }) => {
     <Button
       variant="outline"
       size="sm"
-      className={cn(pending ? "border-destructive bg-destructive/10 text-destructive" : "text-destructive hover:bg-destructive/10")}
+      className={cn(
+        pending ? "border-destructive bg-destructive/10 text-destructive" : "text-destructive hover:bg-destructive/10",
+      )}
       onClick={handleClick}
     >
       <IconTrash size={14} /> {pending ? "Confirm delete?" : "Delete"}
@@ -465,7 +474,11 @@ const MarketplaceDetail = ({ storeUrl }: { storeUrl: string }) => {
     const isToggleOff = prev?.value === value;
     const [upD, downD] = voteDelta(prev?.value, value);
 
-    setUserVote(isToggleOff ? undefined : { ...(prev ?? { id: "", submission: submission.id, user: userId }), value } as StoreVote);
+    setUserVote(
+      isToggleOff
+        ? undefined
+        : ({ ...(prev ?? { id: "", submission: submission.id, user: userId }), value } as StoreVote),
+    );
     setSubmission((s) => (s ? { ...s, upvotes: s.upvotes + upD, downvotes: s.downvotes + downD } : s));
 
     try {
@@ -577,7 +590,9 @@ const MarketplaceDetail = ({ storeUrl }: { storeUrl: string }) => {
           >
             <IconArrowBigUp size={18} />
           </button>
-          <span className={cn("min-w-6 text-center text-sm font-semibold tabular-nums", scoreClassBySign[scoreSign(score)])}>
+          <span
+            className={cn("min-w-6 text-center text-sm font-semibold tabular-nums", scoreClassBySign[scoreSign(score)])}
+          >
             {score}
           </span>
           <button
@@ -614,9 +629,7 @@ const MarketplaceDetail = ({ storeUrl }: { storeUrl: string }) => {
             <IconDownload size={14} /> Download
           </Button>
         )}
-        {user?.id === submission.author && (
-          <DeleteConfirmButton onConfirm={handleDelete} />
-        )}
+        {user?.id === submission.author && <DeleteConfirmButton onConfirm={handleDelete} />}
       </div>
 
       <div className="mt-6">
@@ -643,9 +656,7 @@ export default function MarketplaceDetailPage() {
   return (
     <Layout title="Workshop" description="Community custom CSS and custom widgets for Homarr">
       <main className="marketplace bg-background text-foreground min-h-[80vh]">
-        <BrowserOnly fallback={<DetailSkeleton />}>
-          {() => <MarketplaceDetail storeUrl={storeUrl} />}
-        </BrowserOnly>
+        <BrowserOnly fallback={<DetailSkeleton />}>{() => <MarketplaceDetail storeUrl={storeUrl} />}</BrowserOnly>
       </main>
     </Layout>
   );
diff --git a/apps/docs/src/components/store/StoreApp.tsx b/apps/docs/src/components/store/StoreApp.tsx
index fe119d4b8..24905de21 100644
--- a/apps/docs/src/components/store/StoreApp.tsx
+++ b/apps/docs/src/components/store/StoreApp.tsx
@@ -42,7 +42,10 @@ import { useStore } from "./useStore";
 
 const typeDotColors: Record<SubmissionType, string> = { css: "bg-blue-500", widget: "bg-yellow-500" };
 const typeLabels: Record<SubmissionType, string> = { css: "CSS", widget: "Widget" };
-const typeIcons: Record<SubmissionType, React.ComponentType<{ size: number; className?: string }>> = { css: IconBrandCss3, widget: IconPuzzle };
+const typeIcons: Record<SubmissionType, React.ComponentType<{ size: number; className?: string }>> = {
+  css: IconBrandCss3,
+  widget: IconPuzzle,
+};
 const typeBgColors: Record<SubmissionType, string> = { css: "bg-blue-500/5", widget: "bg-yellow-500/5" };
 const filterActiveClass = "bg-background text-foreground shadow-sm";
 const filterInactiveClass = "text-muted-foreground hover:text-foreground";
@@ -66,7 +69,6 @@ const sortOptions: { value: SortKey; label: string }[] = [
   { value: "new", label: "Newest" },
 ];
 
-
 const relativeTime = (date: string) => {
   const minutes = Math.floor((Date.now() - new Date(date).getTime()) / 60000);
   if (minutes < 1) return "just now";
@@ -191,7 +193,9 @@ export const StoreApp = ({ storeUrl }: { storeUrl: string }) => {
 
       {store.loading && (
         <div className="columns-1 gap-4 lg:columns-2 xl:columns-3 2xl:columns-4 [&>*]:mb-4">
-          {Array.from({ length: 6 }, (_, i) => <SkeletonCard key={i} hasImage={i % 3 === 0} />)}
+          {Array.from({ length: 6 }, (_, i) => (
+            <SkeletonCard key={i} hasImage={i % 3 === 0} />
+          ))}
         </div>
       )}
 
@@ -422,7 +426,9 @@ const SubmissionCard = ({
               <button
                 className={cn(
                   "flex items-center gap-1 rounded px-1 py-0.5 text-xs transition-colors",
-                  confirmDelete ? "bg-destructive/10 text-destructive" : "text-muted-foreground/60 hover:text-destructive",
+                  confirmDelete
+                    ? "bg-destructive/10 text-destructive"
+                    : "text-muted-foreground/60 hover:text-destructive",
                 )}
                 onClick={handleDelete}
                 aria-label="Delete"
@@ -516,4 +522,3 @@ const ScreenshotGallery = ({ urls, title }: { urls: string[]; title: string }) =
     </div>
   );
 };
-
diff --git a/apps/docs/src/components/store/useStore.ts b/apps/docs/src/components/store/useStore.ts
index 7153707bf..a6bac1999 100644
--- a/apps/docs/src/components/store/useStore.ts
+++ b/apps/docs/src/components/store/useStore.ts
@@ -53,9 +53,7 @@ export const useStore = (storeUrl: string) => {
     setLoading(true);
     setError(null);
     try {
-      setSubmissions(
-        await pb.collection("marketplace").getFullList<StoreSubmission>({ sort: "-created" }),
-      );
+      setSubmissions(await pb.collection("marketplace").getFullList<StoreSubmission>({ sort: "-created" }));
       await refreshVotes();
     } catch (caught) {
       setError(errorMessage(caught, "Failed to load the workshop"));
diff --git a/apps/docs/src/components/ui/badge.tsx b/apps/docs/src/components/ui/badge.tsx
index b20959dd7..e1997af40 100644
--- a/apps/docs/src/components/ui/badge.tsx
+++ b/apps/docs/src/components/ui/badge.tsx
@@ -1,8 +1,8 @@
-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 { 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"
+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!",
@@ -10,22 +10,19 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/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",
+        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,
@@ -39,14 +36,14 @@ function Badge({
       {
         className: cn(badgeVariants({ variant }), className),
       },
-      props
+      props,
     ),
     render,
     state: {
       slot: "badge",
       variant,
     },
-  })
+  });
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/apps/docs/src/components/ui/button.tsx b/apps/docs/src/components/ui/button.tsx
index b0336017b..914b2251f 100644
--- a/apps/docs/src/components/ui/button.tsx
+++ b/apps/docs/src/components/ui/button.tsx
@@ -1,7 +1,7 @@
-import { Button as ButtonPrimitive } from "@base-ui/react/button"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+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",
@@ -20,16 +20,14 @@ const buttonVariants = cva(
         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",
+        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-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
         "icon-lg": "size-9",
       },
     },
@@ -37,8 +35,8 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 function Button({
   className,
@@ -46,13 +44,7 @@ function Button({
   size = "default",
   ...props
 }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
-  return (
-    <ButtonPrimitive
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
+  return <ButtonPrimitive data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/apps/docs/src/components/ui/dialog.tsx b/apps/docs/src/components/ui/dialog.tsx
index deca44763..1794a2773 100644
--- a/apps/docs/src/components/ui/dialog.tsx
+++ b/apps/docs/src/components/ui/dialog.tsx
@@ -1,42 +1,39 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { IconX } from "@tabler/icons-react"
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { IconX } from "@tabler/icons-react";
 
 function Dialog({ ...props }: DialogPrimitive.Root.Props) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
-function DialogOverlay({
-  className,
-  ...props
-}: DialogPrimitive.Backdrop.Props) {
+function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
   return (
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
         "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DialogContent({
@@ -45,7 +42,7 @@ function DialogContent({
   showCloseButton = true,
   ...props
 }: DialogPrimitive.Popup.Props & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <DialogPortal>
@@ -54,7 +51,7 @@ function DialogContent({
         data-slot="dialog-content"
         className={cn(
           "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
-          className
+          className,
         )}
         {...props}
       >
@@ -62,32 +59,19 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            render={
-              <Button
-                variant="ghost"
-                className="absolute top-2 right-2"
-                size="icon-sm"
-              />
-            }
+            render={<Button variant="ghost" className="absolute top-2 right-2" size="icon-sm" />}
           >
-            <IconX
-            />
+            <IconX />
             <span className="sr-only">Close</span>
           </DialogPrimitive.Close>
         )}
       </DialogPrimitive.Popup>
     </DialogPortal>
-  )
+  );
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  )
+  return <div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />;
 }
 
 function DialogFooter({
@@ -96,54 +80,44 @@ function DialogFooter({
   children,
   ...props
 }: React.ComponentProps<"div"> & {
-  showCloseButton?: boolean
+  showCloseButton?: boolean;
 }) {
   return (
     <div
       data-slot="dialog-footer"
       className={cn(
         "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
-        className
+        className,
       )}
       {...props}
     >
       {children}
-      {showCloseButton && (
-        <DialogPrimitive.Close render={<Button variant="outline" />}>
-          Close
-        </DialogPrimitive.Close>
-      )}
+      {showCloseButton && <DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>}
     </div>
-  )
+  );
 }
 
 function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
-      className={cn(
-        "font-heading text-base leading-none font-medium",
-        className
-      )}
+      className={cn("font-heading text-base leading-none font-medium", className)}
       {...props}
     />
-  )
+  );
 }
 
-function DialogDescription({
-  className,
-  ...props
-}: DialogPrimitive.Description.Props) {
+function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
       className={cn(
         "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -157,4 +131,4 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-}
+};
diff --git a/apps/docs/src/components/ui/input.tsx b/apps/docs/src/components/ui/input.tsx
index 7d21babba..abb87eb98 100644
--- a/apps/docs/src/components/ui/input.tsx
+++ b/apps/docs/src/components/ui/input.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { Input as InputPrimitive } from "@base-ui/react/input"
+import * as React from "react";
+import { Input as InputPrimitive } from "@base-ui/react/input";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -10,11 +10,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       data-slot="input"
       className={cn(
         "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };
diff --git a/apps/docs/src/components/ui/label.tsx b/apps/docs/src/components/ui/label.tsx
index f16299612..ef05c96c7 100644
--- a/apps/docs/src/components/ui/label.tsx
+++ b/apps/docs/src/components/ui/label.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Label({ className, ...props }: React.ComponentProps<"label">) {
   return (
@@ -8,11 +8,11 @@ function Label({ className, ...props }: React.ComponentProps<"label">) {
       data-slot="label"
       className={cn(
         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export { Label };
diff --git a/apps/docs/src/components/ui/select.tsx b/apps/docs/src/components/ui/select.tsx
index 2a82b3484..fbd671c7e 100644
--- a/apps/docs/src/components/ui/select.tsx
+++ b/apps/docs/src/components/ui/select.tsx
@@ -1,31 +1,21 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { Select as SelectPrimitive } from "@base-ui/react/select"
+import * as React from "react";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
 
-import { cn } from "@/lib/utils"
-import { IconSelector, IconCheck, IconChevronUp, IconChevronDown } from "@tabler/icons-react"
+import { cn } from "@/lib/utils";
+import { IconSelector, IconCheck, IconChevronUp, IconChevronDown } from "@tabler/icons-react";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
 function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
-  return (
-    <SelectPrimitive.Group
-      data-slot="select-group"
-      className={cn("scroll-my-1 p-1", className)}
-      {...props}
-    />
-  )
+  return <SelectPrimitive.Group data-slot="select-group" className={cn("scroll-my-1 p-1", className)} {...props} />;
 }
 
 function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
   return (
-    <SelectPrimitive.Value
-      data-slot="select-value"
-      className={cn("flex flex-1 text-left", className)}
-      {...props}
-    />
-  )
+    <SelectPrimitive.Value data-slot="select-value" className={cn("flex flex-1 text-left", className)} {...props} />
+  );
 }
 
 function SelectTrigger({
@@ -34,7 +24,7 @@ function SelectTrigger({
   children,
   ...props
 }: SelectPrimitive.Trigger.Props & {
-  size?: "sm" | "default"
+  size?: "sm" | "default";
 }) {
   return (
     <SelectPrimitive.Trigger
@@ -42,18 +32,14 @@ function SelectTrigger({
       data-size={size}
       className={cn(
         "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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",
-        className
+        className,
       )}
       {...props}
     >
       {children}
-      <SelectPrimitive.Icon
-        render={
-          <IconSelector className="pointer-events-none size-4 text-muted-foreground" />
-        }
-      />
+      <SelectPrimitive.Icon render={<IconSelector className="pointer-events-none size-4 text-muted-foreground" />} />
     </SelectPrimitive.Trigger>
-  )
+  );
 }
 
 function SelectContent({
@@ -66,10 +52,7 @@ function SelectContent({
   alignItemWithTrigger = true,
   ...props
 }: SelectPrimitive.Popup.Props &
-  Pick<
-    SelectPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
-  >) {
+  Pick<SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">) {
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Positioner
@@ -83,7 +66,10 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
-          className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+          className={cn(
+            "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
           {...props}
         >
           <SelectScrollUpButton />
@@ -92,33 +78,26 @@ function SelectContent({
         </SelectPrimitive.Popup>
       </SelectPrimitive.Positioner>
     </SelectPrimitive.Portal>
-  )
+  );
 }
 
-function SelectLabel({
-  className,
-  ...props
-}: SelectPrimitive.GroupLabel.Props) {
+function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
       className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
       {...props}
     />
-  )
+  );
 }
 
-function SelectItem({
-  className,
-  children,
-  ...props
-}: SelectPrimitive.Item.Props) {
+function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
         "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
+        className,
       )}
       {...props}
     >
@@ -126,65 +105,52 @@ function SelectItem({
         {children}
       </SelectPrimitive.ItemText>
       <SelectPrimitive.ItemIndicator
-        render={
-          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
-        }
+        render={<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />}
       >
         <IconCheck className="pointer-events-none" />
       </SelectPrimitive.ItemIndicator>
     </SelectPrimitive.Item>
-  )
+  );
 }
 
-function SelectSeparator({
-  className,
-  ...props
-}: SelectPrimitive.Separator.Props) {
+function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
       className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
-  )
+  );
 }
 
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
   return (
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
       className={cn(
         "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
-      <IconChevronUp
-      />
+      <IconChevronUp />
     </SelectPrimitive.ScrollUpArrow>
-  )
+  );
 }
 
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
   return (
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"
       className={cn(
         "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
-        className
+        className,
       )}
       {...props}
     >
-      <IconChevronDown
-      />
+      <IconChevronDown />
     </SelectPrimitive.ScrollDownArrow>
-  )
+  );
 }
 
 export {
@@ -198,4 +164,4 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
-}
+};
diff --git a/apps/docs/src/components/ui/separator.tsx b/apps/docs/src/components/ui/separator.tsx
index 4f65961bb..e99046a0d 100644
--- a/apps/docs/src/components/ui/separator.tsx
+++ b/apps/docs/src/components/ui/separator.tsx
@@ -1,23 +1,19 @@
-import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function Separator({
-  className,
-  orientation = "horizontal",
-  ...props
-}: SeparatorPrimitive.Props) {
+function Separator({ className, orientation = "horizontal", ...props }: SeparatorPrimitive.Props) {
   return (
     <SeparatorPrimitive
       data-slot="separator"
       orientation={orientation}
       className={cn(
         "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Separator }
+export { Separator };
diff --git a/apps/docs/src/components/ui/textarea.tsx b/apps/docs/src/components/ui/textarea.tsx
index 04d27f7d1..d102c701b 100644
--- a/apps/docs/src/components/ui/textarea.tsx
+++ b/apps/docs/src/components/ui/textarea.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
   return (
@@ -8,11 +8,11 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
       data-slot="textarea"
       className={cn(
         "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Textarea }
+export { Textarea };
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx
index 6868f7320..6c554651e 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-form.tsx
@@ -470,20 +470,74 @@ const serverToFormFieldMap: Record<string, Record<string, string>> = {
 };
 
 const importToFormValues: Record<string, (config: Record<string, unknown>) => Record<string, unknown>> = {
-  singleValue: (c) => ({ jsonPath: c.jsonPath, label: c.label ?? "", unit: c.unit ?? "", valueSize: c.valueSize ?? "lg", labelPosition: c.labelPosition ?? "below" }),
-  keyValue: (c) => ({ mappings: (c.mappings as Array<Record<string, string>>)?.map((m) => ({ label: m.label, jsonPath: m.jsonPath, unit: m.unit ?? "" })) ?? [], kvLayout: c.layout ?? "list", kvColumns: c.columns ?? 2 }),
-  table: (c) => ({ tablePath: c.tablePath, columns: c.columns ?? [], striped: c.striped ?? true, compact: c.compact ?? false }),
-  statGrid: (c) => ({ statGridItems: c.items ?? [], statGridColumns: c.columns ?? 2, cardStyle: c.cardStyle ?? "filled" }),
-  progressBars: (c) => ({ progressBars: (c.bars as Array<Record<string, unknown>>)?.map((b) => ({ label: b.label ?? "", valuePath: b.valuePath ?? "", maxPath: b.maxPath ?? "", unit: b.unit ?? "", color: b.color ?? "blue" })) ?? [], showPercentage: c.showPercentage ?? true, barSize: c.barSize ?? "md" }),
-  statusIndicator: (c) => ({ statusItems: (c.items as Array<Record<string, unknown>>)?.map((i) => ({ label: i.label ?? "", jsonPath: i.jsonPath ?? "", goodValues: Array.isArray(i.goodValues) ? (i.goodValues as string[]).join(", ") : String(i.goodValues ?? "") })) ?? [], statusLayout: c.layout ?? "list", dotSize: c.dotSize ?? "md" }),
-  countGrid: (c) => ({ countGridItems: c.items ?? [], countGridColumns: c.columns ?? 2, countValueSize: c.valueSize ?? "md" }),
+  singleValue: (c) => ({
+    jsonPath: c.jsonPath,
+    label: c.label ?? "",
+    unit: c.unit ?? "",
+    valueSize: c.valueSize ?? "lg",
+    labelPosition: c.labelPosition ?? "below",
+  }),
+  keyValue: (c) => ({
+    mappings:
+      (c.mappings as Array<Record<string, string>>)?.map((m) => ({
+        label: m.label,
+        jsonPath: m.jsonPath,
+        unit: m.unit ?? "",
+      })) ?? [],
+    kvLayout: c.layout ?? "list",
+    kvColumns: c.columns ?? 2,
+  }),
+  table: (c) => ({
+    tablePath: c.tablePath,
+    columns: c.columns ?? [],
+    striped: c.striped ?? true,
+    compact: c.compact ?? false,
+  }),
+  statGrid: (c) => ({
+    statGridItems: c.items ?? [],
+    statGridColumns: c.columns ?? 2,
+    cardStyle: c.cardStyle ?? "filled",
+  }),
+  progressBars: (c) => ({
+    progressBars:
+      (c.bars as Array<Record<string, unknown>>)?.map((b) => ({
+        label: b.label ?? "",
+        valuePath: b.valuePath ?? "",
+        maxPath: b.maxPath ?? "",
+        unit: b.unit ?? "",
+        color: b.color ?? "blue",
+      })) ?? [],
+    showPercentage: c.showPercentage ?? true,
+    barSize: c.barSize ?? "md",
+  }),
+  statusIndicator: (c) => ({
+    statusItems:
+      (c.items as Array<Record<string, unknown>>)?.map((i) => ({
+        label: i.label ?? "",
+        jsonPath: i.jsonPath ?? "",
+        goodValues: Array.isArray(i.goodValues) ? (i.goodValues as string[]).join(", ") : String(i.goodValues ?? ""),
+      })) ?? [],
+    statusLayout: c.layout ?? "list",
+    dotSize: c.dotSize ?? "md",
+  }),
+  countGrid: (c) => ({
+    countGridItems: c.items ?? [],
+    countGridColumns: c.columns ?? 2,
+    countValueSize: c.valueSize ?? "md",
+  }),
   raw: (c) => ({ rawJsonPath: c.jsonPath ?? "$", rawMaxHeight: c.maxHeight ?? 300 }),
-  actionButton: (c) => ({ buttonLabel: c.buttonLabel ?? "", buttonColor: c.buttonColor ?? "blue", confirmText: c.confirmText ?? "", successMessage: c.successMessage ?? "" }),
+  actionButton: (c) => ({
+    buttonLabel: c.buttonLabel ?? "",
+    buttonColor: c.buttonColor ?? "blue",
+    confirmText: c.confirmText ?? "",
+    successMessage: c.successMessage ?? "",
+  }),
   customJsx: (c) => ({ template: c.template ?? "" }),
 };
 
 function importJsonToFormValues(imported: CustomWidgetImport): Partial<z.infer<typeof formSchema>> {
-  const displayFields = importToFormValues[imported.displayType]?.(imported.displayConfig as unknown as Record<string, unknown>) ?? {};
+  const displayFields =
+    importToFormValues[imported.displayType]?.(imported.displayConfig as unknown as Record<string, unknown>) ?? {};
   return {
     name: imported.name,
     description: imported.description ?? "",
@@ -719,14 +773,21 @@ export function CustomWidgetForm({ mode, initialValues, definitionId }: CustomWi
       const raw = e.clipboardData?.getData("text/plain");
       if (!raw) return;
       let parsed: unknown;
-      try { parsed = JSON.parse(raw); } catch { return; }
+      try {
+        parsed = JSON.parse(raw);
+      } catch {
+        return;
+      }
       const result = customWidgetImportSchema.safeParse(parsed);
       if (!result.success) return;
       e.preventDefault();
       const formValues = importJsonToFormValues(result.data);
       form.setValues({ ...defaultCreateValues, ...formValues });
       form.clearErrors();
-      showSuccessNotification({ title: t("action.paste"), message: t("notification.imported" as never, { name: result.data.name }) });
+      showSuccessNotification({
+        title: t("action.paste"),
+        message: t("notification.imported" as never, { name: result.data.name }),
+      });
     };
     document.addEventListener("paste", onPaste);
     return () => document.removeEventListener("paste", onPaste);
diff --git a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx
index aa44eb7b5..1b9a035fd 100644
--- a/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/custom-widgets/_custom-widget-list.tsx
@@ -53,7 +53,11 @@ export const CustomWidgetList = ({ definitions }: CustomWidgetListProps) => {
       const raw = e.clipboardData?.getData("text/plain");
       if (!raw) return;
       let parsed: unknown;
-      try { parsed = JSON.parse(raw); } catch { return; }
+      try {
+        parsed = JSON.parse(raw);
+      } catch {
+        return;
+      }
       const result = customWidgetImportSchema.safeParse(parsed);
       if (!result.success) return;
       e.preventDefault();
@@ -79,8 +83,12 @@ export const CustomWidgetList = ({ definitions }: CustomWidgetListProps) => {
         <Table.Thead>
           <Table.Tr>
             <Table.Th>{t("table.name")}</Table.Th>
-            <Table.Th w="30%" visibleFrom="sm">{t("table.url")}</Table.Th>
-            <Table.Th w={120} visibleFrom="xs">{t("table.display")}</Table.Th>
+            <Table.Th w="30%" visibleFrom="sm">
+              {t("table.url")}
+            </Table.Th>
+            <Table.Th w={120} visibleFrom="xs">
+              {t("table.display")}
+            </Table.Th>
             <Table.Th w={90} />
           </Table.Tr>
         </Table.Thead>