@muhgholy/next-drive 3.13.0 → 4.1.0

package/dist/client/index.js

@@ -1,5 +1,5 @@
 import './index.css';
-import { cn, driveCreateUrl, driveCreateSrcSet, matchesMimeFilter, formatBytes, getFileIcon } from '../chunk-CN3AV3AN.js';
+import { cn, driveCreateUrl, driveCreateSrcSet, matchesMimeFilter, formatBytes, getFileIcon } from '../chunk-T43C7MQ6.js';
 export { driveFileSchemaZod } from '../chunk-FJRGKB3U.js';
 import * as React3 from 'react';
 import React3__default, { createContext, useContext, useState, useCallback, useRef, useEffect, useMemo } from 'react';
@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronRight, Check, Circle, Loader2, Folder, FolderPlus, Menu, RotateCcw, Trash2, Group, ArrowUpDown, Calendar, ArrowDownAZ, ArrowUpAZ, ArrowDown01, ArrowUp01, LayoutGrid, List, RefreshCw, Upload, CheckCircle2, Cloud, AlertCircle, Pencil, FileText, HardDrive, Database, ChevronsUpDown, Plus, Settings2, Trash, FolderOpen, Clock } from 'lucide-react';
+import { X, ChevronRight, Check, Circle, Loader2, Folder, FolderPlus, Menu, RotateCcw, Trash2, Group, Search, ArrowUpDown, Calendar, ArrowDownAZ, ArrowUpAZ, ArrowDown01, ArrowUp01, LayoutGrid, List, RefreshCw, Upload, CheckCircle2, Cloud, AlertCircle, Pencil, FileText, HardDrive, Database, ChevronsUpDown, Plus, Settings2, Trash, FolderOpen, Clock } from 'lucide-react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { useForm } from 'react-hook-form';
@@ -482,24 +482,24 @@ var useUpload = (apiEndpoint, activeAccountId, withCredentials = false, onUpload
   return { uploads, uploadFiles, cancelUpload, cancelAllUploads };
 };
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "nd:inline-flex nd:items-center nd:justify-center nd:gap-2 nd:whitespace-nowrap nd:rounded-md nd:text-sm nd:font-medium nd:transition-all nd:disabled:pointer-events-none nd:disabled:opacity-50 [&_svg]:nd:pointer-events-none [&_svg:not([class*='size-'])]:nd:size-4 nd:shrink-0 [&_svg]:nd:shrink-0 nd:outline-none nd:focus-visible:border-ring nd:focus-visible:ring-ring/50 nd:focus-visible:ring-[3px] aria-invalid:nd:ring-destructive/20 dark:aria-invalid:nd:ring-destructive/40 aria-invalid:nd:border-destructive",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
-        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
+        default: "nd:bg-primary nd:text-primary-foreground nd:hover:bg-primary/90",
+        destructive: "nd:bg-destructive nd:text-white nd:hover:bg-destructive/90 nd:focus-visible:ring-destructive/20 dark:nd:focus-visible:ring-destructive/40",
+        outline: "nd:border nd:bg-background nd:shadow-xs nd:hover:bg-accent nd:hover:text-accent-foreground nd:dark:bg-input/30 nd:dark:border-input nd:dark:hover:bg-input/50",
+        secondary: "nd:bg-secondary nd:text-secondary-foreground nd:hover:bg-secondary/80",
+        ghost: "nd:hover:bg-accent nd:hover:text-accent-foreground nd:dark:hover:bg-accent/50",
+        link: "nd:text-primary nd:underline-offset-4 nd:hover:underline"
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-        "icon-sm": "size-8",
-        "icon-lg": "size-10"
+        default: "nd:h-9 nd:px-4 nd:py-2 nd:has-[>svg]:px-3",
+        sm: "nd:h-8 nd:rounded-md nd:gap-1.5 nd:px-3 nd:has-[>svg]:px-2.5",
+        lg: "nd:h-10 nd:rounded-md nd:px-6 nd:has-[>svg]:px-4",
+        icon: "nd:size-9",
+        "icon-sm": "nd:size-8",
+        "icon-lg": "nd:size-10"
       }
     },
     defaultVariants: {
@@ -540,9 +540,9 @@ function Dialog2Content({
       {
         "data-slot": "dialog2-overlay",
         className: cn(
-          "fixed inset-0 z-50 bg-black/60 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"
+          "nd:fixed nd:inset-0 nd:z-50 nd:bg-black/60 nd:backdrop-blur-sm",
+          "nd:data-[state=open]:animate-in nd:data-[state=closed]:animate-out",
+          "nd:data-[state=closed]:fade-out-0 nd:data-[state=open]:fade-in-0"
         )
       }
     ),
@@ -551,20 +551,21 @@ function Dialog2Content({
       {
         "data-slot": "dialog2-content",
         className: cn(
+          "nd:overflow-hidden",
           // Base styles
-          "fixed z-50 flex flex-col bg-background shadow-2xl outline-none",
+          "nd:fixed nd:z-50 nd:flex nd:flex-col nd:bg-background nd:shadow-2xl nd:outline-none",
           // Mobile: Full screen
-          "inset-0 rounded-none",
+          "nd:inset-0 nd:rounded-none",
           // Desktop: Centered modal with max dimensions
-          "md:inset-auto md:top-[50%] md:left-[50%] md:translate-x-[-50%] md:translate-y-[-50%]",
-          "md:max-w-5xl md:w-[95vw] md:max-h-[90vh] md:rounded-xl md:border",
+          "nd:md:inset-auto nd:md:top-[50%] nd:md:left-[50%] nd:md:translate-x-[-50%] nd:md:translate-y-[-50%]",
+          "nd:md:max-w-5xl nd:md:w-[95vw] nd:md:max-h-[90vh] nd:md:rounded-xl nd:md:border",
           // Animations
-          "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]:slide-out-to-bottom-2 data-[state=open]:slide-in-from-bottom-2",
-          "md:data-[state=closed]:zoom-out-95 md:data-[state=open]:zoom-in-95",
-          "md:data-[state=closed]:slide-out-to-bottom-0 md:data-[state=open]:slide-in-from-bottom-0",
-          "duration-200",
+          "nd:data-[state=open]:animate-in nd:data-[state=closed]:animate-out",
+          "nd:data-[state=closed]:fade-out-0 nd:data-[state=open]:fade-in-0",
+          "nd:data-[state=closed]:slide-out-to-bottom-2 nd:data-[state=open]:slide-in-from-bottom-2",
+          "nd:md:data-[state=closed]:zoom-out-95 nd:md:data-[state=open]:zoom-in-95",
+          "nd:md:data-[state=closed]:slide-out-to-bottom-0 nd:md:data-[state=open]:slide-in-from-bottom-0",
+          "nd:duration-200",
           className
         ),
         ...props,
@@ -575,15 +576,15 @@ function Dialog2Content({
             {
               "data-slot": "dialog2-close",
               className: cn(
-                "absolute top-3 right-3 z-10",
-                "flex items-center justify-center size-8 rounded-full",
-                "bg-muted/80 hover:bg-muted text-muted-foreground hover:text-foreground",
-                "transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-                "md:top-4 md:right-4 md:size-7 md:rounded-md md:bg-transparent"
+                "nd:absolute nd:top-3 nd:right-3 nd:z-10",
+                "nd:flex nd:items-center nd:justify-center nd:size-8 nd:rounded-full",
+                "nd:bg-muted/80 nd:hover:bg-muted nd:text-muted-foreground nd:hover:text-foreground",
+                "nd:transition-colors nd:focus:outline-none nd:focus:ring-2 nd:focus:ring-ring nd:focus:ring-offset-2",
+                "nd:md:top-4 nd:md:right-4 nd:md:size-7 nd:md:rounded-md nd:md:bg-transparent"
               ),
               children: [
-                /* @__PURE__ */ jsx(X, { className: "size-4" }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx(X, { className: "nd:size-4" }),
+                /* @__PURE__ */ jsx("span", { className: "nd:sr-only", children: "Close" })
               ]
             }
           )
@@ -598,7 +599,7 @@ function Dialog2Header({ className, ...props }) {
     {
       "data-slot": "dialog2-header",
       className: cn(
-        "flex items-center justify-between shrink-0 px-4 h-14 border-b bg-background/95 backdrop-blur-sm",
+        "nd:flex nd:items-center nd:justify-between nd:shrink-0 nd:px-4 nd:h-14 nd:border-b nd:bg-background/95 nd:backdrop-blur-sm",
         className
       ),
       ...props
@@ -610,7 +611,7 @@ function Dialog2Body({ className, ...props }) {
     "div",
     {
       "data-slot": "dialog2-body",
-      className: cn("flex-1 min-h-0 overflow-hidden", className),
+      className: cn("nd:flex-1 nd:min-h-0 nd:overflow-hidden", className),
       ...props
     }
   );
@@ -621,7 +622,7 @@ function Dialog2Footer({ className, ...props }) {
     {
       "data-slot": "dialog2-footer",
       className: cn(
-        "flex items-center justify-end gap-2 shrink-0 px-4 py-3 border-t bg-background/95 backdrop-blur-sm",
+        "nd:flex nd:items-center nd:justify-end nd:gap-2 nd:shrink-0 nd:px-4 nd:py-3 nd:border-t nd:bg-background/95 nd:backdrop-blur-sm",
         className
       ),
       ...props
@@ -636,7 +637,7 @@ function Dialog2Title({
     SheetPrimitive.Title,
     {
       "data-slot": "dialog2-title",
-      className: cn("text-base font-semibold", className),
+      className: cn("nd:text-base nd:font-semibold", className),
       ...props
     }
   );
@@ -648,7 +649,7 @@ var SheetOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PUR
   SheetPrimitive.Overlay,
   {
     className: cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "nd:fixed nd:inset-0 nd:z-50 nd:bg-black/80 nd:data-[state=open]:animate-in nd:data-[state=closed]:animate-out nd:data-[state=closed]:fade-out-0 nd:data-[state=open]:fade-in-0",
       className
     ),
     ...props,
@@ -657,14 +658,14 @@ var SheetOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PUR
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 var sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "nd:fixed nd:z-50 nd:gap-4 nd:bg-background nd:p-6 nd:shadow-lg nd:transition nd:ease-in-out nd:data-[state=open]:animate-in nd:data-[state=closed]:animate-out nd:data-[state=closed]:duration-300 nd:data-[state=open]:duration-500",
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+        top: "nd:inset-x-0 nd:top-0 nd:border-b nd:data-[state=closed]:slide-out-to-top nd:data-[state=open]:slide-in-from-top",
+        bottom: "nd:inset-x-0 nd:bottom-0 nd:border-t nd:data-[state=closed]:slide-out-to-bottom nd:data-[state=open]:slide-in-from-bottom",
+        left: "nd:inset-y-0 nd:left-0 nd:h-full nd:w-3/4 nd:border-r nd:data-[state=closed]:slide-out-to-left nd:data-[state=open]:slide-in-from-left nd:sm:max-w-sm",
+        right: "nd:inset-y-0 nd:right-0 nd:h-full nd:w-3/4 nd:border-l nd:data-[state=closed]:slide-out-to-right nd:data-[state=open]:slide-in-from-right nd:sm:max-w-sm"
       }
     },
     defaultVariants: {
@@ -682,9 +683,9 @@ var SheetContent = React3.forwardRef(({ side = "right", className, children, hid
       ...props,
       children: [
         children,
-        !hideCloseButton && /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "absolute right-4 top-4 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", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        !hideCloseButton && /* @__PURE__ */ jsxs(SheetPrimitive.Close, { className: "nd:absolute nd:right-4 nd:top-4 nd:rounded-sm nd:opacity-70 nd:ring-offset-background nd:transition-opacity nd:hover:opacity-100 nd:focus:outline-none nd:focus:ring-2 nd:focus:ring-ring nd:focus:ring-offset-2 nd:disabled:pointer-events-none nd:data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsx(X, { className: "nd:h-4 nd:w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "nd:sr-only", children: "Close" })
         ] })
       ]
     }
@@ -695,7 +696,7 @@ var SheetTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   SheetPrimitive.Title,
   {
     ref,
-    className: cn("text-lg font-semibold text-foreground", className),
+    className: cn("nd:text-lg nd:font-semibold nd:text-foreground", className),
     ...props
   }
 ));
@@ -704,7 +705,7 @@ var SheetDescription = React3.forwardRef(({ className, ...props }, ref) => /* @_
   SheetPrimitive.Description,
   {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn("nd:text-sm nd:text-muted-foreground", className),
     ...props
   }
 ));
@@ -728,7 +729,7 @@ function DialogOverlay({
     {
       "data-slot": "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",
+        "nd:data-[state=open]:animate-in nd:data-[state=closed]:animate-out nd:data-[state=closed]:fade-out-0 nd:data-[state=open]:fade-in-0 nd:fixed nd:inset-0 nd:z-50 nd:bg-black/50",
         className
       ),
       ...props
@@ -748,7 +749,7 @@ function DialogContent({
       {
         "data-slot": "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",
+          "nd:bg-background nd:data-[state=open]:animate-in nd:data-[state=closed]:animate-out nd:data-[state=closed]:fade-out-0 nd:data-[state=open]:fade-in-0 nd:data-[state=closed]:zoom-out-95 nd:data-[state=open]:zoom-in-95 nd:fixed nd:top-[50%] nd:left-[50%] nd:z-50 nd:grid nd:w-full nd:max-w-[calc(100%-2rem)] nd:translate-x-[-50%] nd:translate-y-[-50%] nd:gap-4 nd:rounded-lg nd:border nd:p-6 nd:shadow-lg nd:duration-200 nd:sm:max-w-lg",
           className
         ),
         ...props,
@@ -758,10 +759,10 @@ function DialogContent({
             SheetPrimitive.Close,
             {
               "data-slot": "dialog-close",
-              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              className: "nd:ring-offset-background nd:focus:ring-ring nd:data-[state=open]:bg-accent nd:data-[state=open]:text-muted-foreground nd:absolute nd:top-4 nd:right-4 nd:rounded-xs nd:opacity-70 nd:transition-opacity nd:hover:opacity-100 nd:focus:ring-2 nd:focus:ring-offset-2 nd:focus:outline-hidden nd:disabled:pointer-events-none [&_svg]:nd:pointer-events-none [&_svg]:nd:shrink-0 [&_svg:not([class*='size-'])]:nd:size-4",
               children: [
-                /* @__PURE__ */ jsx(X, { className: "size-4" }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx(X, { className: "nd:size-4" }),
+                /* @__PURE__ */ jsx("span", { className: "nd:sr-only", children: "Close" })
               ]
             }
           )
@@ -775,7 +776,7 @@ function DialogHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "dialog-header",
-      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      className: cn("nd:flex nd:flex-col nd:gap-2 nd:text-center nd:sm:text-left", className),
       ...props
     }
   );
@@ -786,7 +787,7 @@ function DialogFooter({ className, ...props }) {
     {
       "data-slot": "dialog-footer",
       className: cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "nd:flex nd:flex-col-reverse nd:gap-2 nd:sm:flex-row nd:sm:justify-end",
         className
       ),
       ...props
@@ -801,7 +802,7 @@ function DialogTitle({
     SheetPrimitive.Title,
     {
       "data-slot": "dialog-title",
-      className: cn("text-lg leading-none font-semibold", className),
+      className: cn("nd:text-lg nd:leading-none nd:font-semibold", className),
       ...props
     }
   );
@@ -814,7 +815,7 @@ function DialogDescription({
     SheetPrimitive.Description,
     {
       "data-slot": "dialog-description",
-      className: cn("text-muted-foreground text-sm", className),
+      className: cn("nd:text-muted-foreground nd:text-sm", className),
       ...props
     }
   );
@@ -827,14 +828,14 @@ var DropdownMenuSubTrigger = React3.forwardRef(({ className, inset, children, ..
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
+      "nd:flex nd:cursor-default nd:select-none nd:items-center nd:rounded-sm nd:px-2 nd:py-1.5 nd:text-sm nd:outline-none nd:focus:bg-accent nd:data-[state=open]:bg-accent",
+      inset && "nd:pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "nd:ml-auto nd:h-4 nd:w-4" })
     ]
   }
 ));
@@ -844,7 +845,7 @@ var DropdownMenuSubContent = React3.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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",
+      "nd:z-50 nd:min-w-[8rem] nd:overflow-hidden nd:rounded-md nd:border nd:bg-popover nd:p-1 nd:text-popover-foreground nd:shadow-lg nd:data-[state=open]:animate-in nd:data-[state=closed]:animate-out nd:data-[state=closed]:fade-out-0 nd:data-[state=open]:fade-in-0 nd:data-[state=closed]:zoom-out-95 nd:data-[state=open]:zoom-in-95 nd:data-[side=bottom]:slide-in-from-top-2 nd:data-[side=left]:slide-in-from-right-2 nd:data-[side=right]:slide-in-from-left-2 nd:data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -857,7 +858,7 @@ var DropdownMenuContent = React3.forwardRef(({ className, sideOffset = 4, ...pro
     ref,
     sideOffset,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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",
+      "nd:z-50 nd:min-w-[8rem] nd:overflow-hidden nd:rounded-md nd:border nd:bg-popover nd:p-1 nd:text-popover-foreground nd:shadow-md nd:data-[state=open]:animate-in nd:data-[state=closed]:animate-out nd:data-[state=closed]:fade-out-0 nd:data-[state=open]:fade-in-0 nd:data-[state=closed]:zoom-out-95 nd:data-[state=open]:zoom-in-95 nd:data-[side=bottom]:slide-in-from-top-2 nd:data-[side=left]:slide-in-from-right-2 nd:data-[side=right]:slide-in-from-left-2 nd:data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -869,8 +870,8 @@ var DropdownMenuItem = React3.forwardRef(({ className, inset, ...props }, ref) =
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      "nd:relative nd:flex nd:cursor-default nd:select-none nd:items-center nd:rounded-sm nd:px-2 nd:py-1.5 nd:text-sm nd:outline-none nd:transition-colors nd:focus:bg-accent nd:focus:text-accent-foreground nd:data-[disabled]:pointer-events-none nd:data-[disabled]:opacity-50",
+      inset && "nd:pl-8",
       className
     ),
     ...props
@@ -882,13 +883,13 @@ var DropdownMenuCheckboxItem = React3.forwardRef(({ className, children, checked
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "nd:relative nd:flex nd:cursor-default nd:select-none nd:items-center nd:rounded-sm nd:px-2 nd:py-1.5 nd:text-sm nd:outline-none nd:transition-colors nd:focus:bg-accent nd:focus:text-accent-foreground nd:data-[disabled]:pointer-events-none nd:data-[disabled]:opacity-50",
       className
     ),
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "nd:absolute nd:left-2 nd:flex nd:h-3.5 nd:w-3.5 nd:items-center nd:justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "nd:h-4 nd:w-4" }) }) }),
       children
     ]
   }
@@ -899,12 +900,12 @@ var DropdownMenuRadioItem = React3.forwardRef(({ className, children, ...props }
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "nd:relative nd:flex nd:cursor-default nd:select-none nd:items-center nd:rounded-sm nd:px-2 nd:py-1.5 nd:text-sm nd:outline-none nd:transition-colors nd:focus:bg-accent nd:focus:text-accent-foreground nd:data-[disabled]:pointer-events-none nd:data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "nd:absolute nd:left-2 nd:flex nd:h-3.5 nd:w-3.5 nd:items-center nd:justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "nd:h-2 nd:w-2 nd:fill-current" }) }) }),
       children
     ]
   }
@@ -915,8 +916,8 @@ var DropdownMenuLabel = React3.forwardRef(({ className, inset, ...props }, ref)
   {
     ref,
     className: cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
+      "nd:px-2 nd:py-1.5 nd:text-sm nd:font-semibold",
+      inset && "nd:pl-8",
       className
     ),
     ...props
@@ -927,18 +928,18 @@ var DropdownMenuSeparator = React3.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("-nd:mx-1 nd:my-1 nd:h-px nd:bg-muted", className),
     ...props
   }
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "nd:relative nd:w-full nd:rounded-lg nd:border nd:px-4 nd:py-3 nd:text-sm nd:grid nd:has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] nd:grid-cols-[0_1fr] nd:has-[>svg]:gap-x-3 nd:gap-y-0.5 nd:items-start nd:[&>svg]:size-4 nd:[&>svg]:translate-y-0.5 nd:[&>svg]:text-current",
   {
     variants: {
       variant: {
-        default: "bg-card text-card-foreground",
-        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+        default: "nd:bg-card nd:text-card-foreground",
+        destructive: "nd:text-destructive nd:bg-card nd:[&>svg]:text-current nd:*:data-[slot=alert-description]:text-destructive/90"
       }
     },
     defaultVariants: {
@@ -967,7 +968,7 @@ function AlertTitle({ className, ...props }) {
     {
       "data-slot": "alert-title",
       className: cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        "nd:col-start-2 nd:line-clamp-1 nd:min-h-4 nd:font-medium nd:tracking-tight",
         className
       ),
       ...props
@@ -983,7 +984,7 @@ function AlertDescription({
     {
       "data-slot": "alert-description",
       className: cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        "nd:text-muted-foreground nd:col-start-2 nd:grid nd:justify-items-start nd:gap-1 nd:text-sm nd:[&_p]:leading-relaxed",
         className
       ),
       ...props
@@ -997,9 +998,9 @@ function Input({ className, type, ...props }) {
       type,
       "data-slot": "input",
       className: cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "file:nd:text-foreground placeholder:nd:text-muted-foreground selection:nd:bg-primary selection:nd:text-primary-foreground nd:dark:bg-input/30 nd:border-input nd:h-9 nd:w-full nd:min-w-0 nd:rounded-md nd:border nd:bg-transparent nd:px-3 nd:py-1 nd:text-base nd:shadow-xs nd:transition-[color,box-shadow] nd:outline-none file:nd:inline-flex file:nd:h-7 file:nd:border-0 file:nd:bg-transparent file:nd:text-sm file:nd:font-medium nd:disabled:pointer-events-none nd:disabled:cursor-not-allowed nd:disabled:opacity-50 nd:md:text-sm",
+        "nd:focus-visible:border-ring nd:focus-visible:ring-ring/50 nd:focus-visible:ring-[3px]",
+        "aria-invalid:nd:ring-destructive/20 dark:aria-invalid:nd:ring-destructive/40 aria-invalid:nd:border-destructive",
         className
       ),
       ...props
@@ -1015,7 +1016,7 @@ function Label2({
     {
       "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",
+        "nd:flex nd:items-center nd:gap-2 nd:text-sm nd:leading-none nd:font-medium nd:select-none group-nd:data-[disabled=true]:pointer-events-none group-nd:data-[disabled=true]:opacity-50 peer-nd:disabled:cursor-not-allowed peer-nd:disabled:opacity-50",
         className
       ),
       ...props
@@ -1100,11 +1101,11 @@ var DialogConfirmation = (props) => {
           /* @__PURE__ */ jsx(DialogDescription, { children: description })
         ] }),
         error && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
-          /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(AlertCircle, { className: "nd:h-4 nd:w-4" }),
           /* @__PURE__ */ jsx(AlertTitle, { children: "Error" }),
           /* @__PURE__ */ jsx(AlertDescription, { children: error })
         ] }),
-        inputs && inputs.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid gap-4 py-4", children: inputs.map((input, index) => /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        inputs && inputs.length > 0 && /* @__PURE__ */ jsx("div", { className: "nd:grid nd:gap-4 nd:py-4", children: inputs.map((input, index) => /* @__PURE__ */ jsxs("div", { className: "nd:grid nd:gap-2", children: [
           /* @__PURE__ */ jsx(Label2, { htmlFor: input.id, children: input.name }),
           /* @__PURE__ */ jsx(
             Input,
@@ -1199,11 +1200,11 @@ var RenameAccountDialog = (props) => {
           /* @__PURE__ */ jsx(DialogDescription, { children: "Enter a new display name for this storage account." })
         ] }),
         errors.name && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
-          /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(AlertCircle, { className: "nd:h-4 nd:w-4" }),
           /* @__PURE__ */ jsx(AlertTitle, { children: "Error" }),
           /* @__PURE__ */ jsx(AlertDescription, { children: errors.name.message })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid gap-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "nd:grid nd:gap-4 nd:py-4", children: /* @__PURE__ */ jsxs("div", { className: "nd:grid nd:gap-2", children: [
           /* @__PURE__ */ jsx(Label2, { htmlFor: "rename-account-input", children: "Account name" }),
           /* @__PURE__ */ jsx(
             Input,
@@ -1328,7 +1329,7 @@ function Progress({
     {
       "data-slot": "progress",
       className: cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        "nd:bg-primary/20 nd:relative nd:h-2 nd:w-full nd:overflow-hidden nd:rounded-full",
         className
       ),
       ...props,
@@ -1337,9 +1338,9 @@ function Progress({
         {
           "data-slot": "progress-indicator",
           className: cn(
-            "bg-primary h-full flex-1 transition-all",
-            isIndeterminate && "w-1/3 animate-[indeterminate_1.5s_ease-in-out_infinite]",
-            !isIndeterminate && "w-full",
+            "nd:bg-primary nd:h-full nd:flex-1 nd:transition-all",
+            isIndeterminate && "nd:w-1/3 nd:animate-[indeterminate_1.5s_ease-in-out_infinite]",
+            !isIndeterminate && "nd:w-full",
             indicatorClassName
           ),
           style: isIndeterminate ? void 0 : { transform: `translateX(-${100 - (value || 0)}%)` }
@@ -1355,14 +1356,14 @@ var ContextMenuSubTrigger = React3.forwardRef(({ className, inset, children, ...
   {
     ref,
     className: cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      inset && "pl-8",
+      "nd:flex nd:cursor-default nd:select-none nd:items-center nd:rounded-sm nd:px-2 nd:py-1.5 nd:text-sm nd:outline-none nd:focus:bg-accent nd:focus:text-accent-foreground nd:data-[state=open]:bg-accent nd:data-[state=open]:text-accent-foreground",
+      inset && "nd:pl-8",
       className
     ),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "nd:ml-auto nd:h-4 nd:w-4" })
     ]
   }
 ));
@@ -1372,7 +1373,7 @@ var ContextMenuSubContent = React3.forwardRef(({ className, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 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",
+      "nd:z-50 nd:min-w-[8rem] nd:overflow-hidden nd:rounded-md nd:border nd:bg-popover nd:p-1 nd:text-popover-foreground nd:shadow-md nd:data-[state=open]:animate-in nd:data-[state=closed]:animate-out nd:data-[state=closed]:fade-out-0 nd:data-[state=open]:fade-in-0 nd:data-[state=closed]:zoom-out-95 nd:data-[state=open]:zoom-in-95 nd:data-[side=bottom]:slide-in-from-top-2 nd:data-[side=left]:slide-in-from-right-2 nd:data-[side=right]:slide-in-from-left-2 nd:data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -1384,7 +1385,7 @@ var ContextMenuContent = React3.forwardRef(({ className, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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",
+      "nd:z-50 nd:min-w-[8rem] nd:overflow-hidden nd:rounded-md nd:border nd:bg-popover nd:p-1 nd:text-popover-foreground nd:shadow-md nd:animate-in nd:fade-in-80 nd:data-[state=open]:animate-in nd:data-[state=closed]:animate-out nd:data-[state=closed]:fade-out-0 nd:data-[state=open]:fade-in-0 nd:data-[state=closed]:zoom-out-95 nd:data-[state=open]:zoom-in-95 nd:data-[side=bottom]:slide-in-from-top-2 nd:data-[side=left]:slide-in-from-right-2 nd:data-[side=right]:slide-in-from-left-2 nd:data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -1396,8 +1397,8 @@ var ContextMenuItem = React3.forwardRef(({ className, inset, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      "nd:relative nd:flex nd:cursor-default nd:select-none nd:items-center nd:rounded-sm nd:px-2 nd:py-1.5 nd:text-sm nd:outline-none nd:focus:bg-accent nd:focus:text-accent-foreground nd:data-[disabled]:pointer-events-none nd:data-[disabled]:opacity-50",
+      inset && "nd:pl-8",
       className
     ),
     ...props
@@ -1409,13 +1410,13 @@ var ContextMenuCheckboxItem = React3.forwardRef(({ className, children, checked,
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "nd:relative nd:flex nd:cursor-default nd:select-none nd:items-center nd:rounded-sm nd:px-2 nd:py-1.5 nd:text-sm nd:outline-none nd:focus:bg-accent nd:focus:text-accent-foreground nd:data-[disabled]:pointer-events-none nd:data-[disabled]:opacity-50",
       className
     ),
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "nd:absolute nd:left-2 nd:flex nd:h-3.5 nd:w-3.5 nd:items-center nd:justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "nd:h-4 nd:w-4" }) }) }),
       children
     ]
   }
@@ -1426,12 +1427,12 @@ var ContextMenuRadioItem = React3.forwardRef(({ className, children, ...props },
   {
     ref,
     className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "nd:relative nd:flex nd:cursor-default nd:select-none nd:items-center nd:rounded-sm nd:px-2 nd:py-1.5 nd:text-sm nd:outline-none nd:focus:bg-accent nd:focus:text-accent-foreground nd:data-[disabled]:pointer-events-none nd:data-[disabled]:opacity-50",
       className
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "nd:absolute nd:left-2 nd:flex nd:h-3.5 nd:w-3.5 nd:items-center nd:justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "nd:h-2 nd:w-2 nd:fill-current" }) }) }),
       children
     ]
   }
@@ -1442,8 +1443,8 @@ var ContextMenuLabel = React3.forwardRef(({ className, inset, ...props }, ref) =
   {
     ref,
     className: cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
+      "nd:px-2 nd:py-1.5 nd:text-sm nd:font-semibold nd:text-foreground",
+      inset && "nd:pl-8",
       className
     ),
     ...props
@@ -1454,7 +1455,7 @@ var ContextMenuSeparator = React3.forwardRef(({ className, ...props }, ref) => /
   ContextMenuPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-border", className),
+    className: cn("-nd:mx-1 nd:my-1 nd:h-px nd:bg-border", className),
     ...props
   }
 ));
@@ -1517,11 +1518,11 @@ var CreateFolderDialog = (props) => {
           /* @__PURE__ */ jsx(DialogDescription, { children: "Enter a name for the new folder" })
         ] }),
         errors.name && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
-          /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(AlertCircle, { className: "nd:h-4 nd:w-4" }),
           /* @__PURE__ */ jsx(AlertTitle, { children: "Error" }),
           /* @__PURE__ */ jsx(AlertDescription, { children: errors.name.message })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid gap-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "nd:grid nd:gap-4 nd:py-4", children: /* @__PURE__ */ jsxs("div", { className: "nd:grid nd:gap-2", children: [
           /* @__PURE__ */ jsx(Label2, { htmlFor: "folder-name", children: "Folder name" }),
           /* @__PURE__ */ jsx(
             Input,
@@ -1632,11 +1633,11 @@ var RenameDialog = (props) => {
           ] })
         ] }),
         errors.name && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
-          /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(AlertCircle, { className: "nd:h-4 nd:w-4" }),
           /* @__PURE__ */ jsx(AlertTitle, { children: "Error" }),
           /* @__PURE__ */ jsx(AlertDescription, { children: errors.name.message })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "grid gap-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "grid gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "nd:grid nd:gap-4 nd:py-4", children: /* @__PURE__ */ jsxs("div", { className: "nd:grid nd:gap-2", children: [
           /* @__PURE__ */ jsx(Label2, { htmlFor: "rename-input", children: "Name" }),
           /* @__PURE__ */ jsx(
             Input,
@@ -1698,62 +1699,62 @@ var FileItem = (props) => {
       "div",
       {
         className: cn(
-          "group relative cursor-pointer transition-all select-none",
-          "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
-          viewMode === "GRID" ? "flex flex-col rounded-lg sm:rounded-xl border bg-card dark:bg-card/50 hover:bg-accent/50 dark:hover:bg-accent/30 overflow-hidden" : "flex items-center gap-2 sm:gap-3 p-1.5 sm:p-2 rounded-lg border border-transparent hover:bg-accent/50 dark:hover:bg-accent/30 hover:border-border",
-          isSelected && "ring-2 ring-primary border-primary/50 bg-primary/5 dark:bg-primary/10",
-          isDragOver && "ring-2 ring-primary border-primary scale-[1.02] bg-primary/10 shadow-lg"
+          "group nd:relative nd:cursor-pointer nd:transition-all nd:select-none",
+          "nd:focus:outline-none nd:focus-visible:ring-2 nd:focus-visible:ring-primary",
+          viewMode === "GRID" ? "nd:flex nd:flex-col nd:rounded-lg nd:sm:rounded-xl nd:border nd:bg-card nd:dark:bg-card/50 nd:hover:bg-accent/50 nd:dark:hover:bg-accent/30 nd:overflow-hidden" : "nd:flex nd:items-center nd:gap-2 nd:sm:gap-3 nd:p-1.5 nd:sm:p-2 nd:rounded-lg nd:border nd:border-transparent nd:hover:bg-accent/50 nd:dark:hover:bg-accent/30 nd:hover:border-border",
+          isSelected && "nd:ring-2 nd:ring-primary nd:border-primary/50 nd:bg-primary/5 nd:dark:bg-primary/10",
+          isDragOver && "nd:ring-2 nd:ring-primary nd:border-primary nd:scale-[1.02] nd:bg-primary/10 nd:shadow-lg"
         ),
         onClick: onSelect,
         onDoubleClick,
         role: "button",
         tabIndex: 0,
         children: viewMode === "GRID" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "aspect-square w-full bg-muted/30 dark:bg-muted/20 flex items-center justify-center overflow-hidden relative", children: [
+          /* @__PURE__ */ jsxs("div", { className: "nd:aspect-square nd:w-full nd:bg-muted/30 nd:dark:bg-muted/20 nd:flex nd:items-center nd:justify-center nd:overflow-hidden nd:relative", children: [
             isThumbnailable ? /* @__PURE__ */ jsx(
               "img",
               {
                 src: thumbnailUrl,
                 alt: item.name,
-                className: "size-full object-cover transition-transform group-hover:scale-105 duration-300",
+                className: "nd:size-full nd:object-cover nd:transition-transform group-nd:hover:scale-105 nd:duration-300",
                 loading: "lazy"
               }
-            ) : /* @__PURE__ */ jsx("div", { className: "transition-transform group-hover:scale-110 duration-200", children: getFileIcon(item.information.type === "FILE" ? item.information.mime : "", isFolder, "size-8 sm:size-10 md:size-12 text-muted-foreground/60") }),
-            isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-1.5 right-1.5 sm:top-2 sm:right-2 size-5 bg-primary rounded-full flex items-center justify-center shadow-md animate-in zoom-in-50", children: /* @__PURE__ */ jsx("div", { className: "size-2 bg-primary-foreground rounded-full" }) }),
-            isFolder && currentView === "BROWSE" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-1.5 right-1.5 sm:bottom-2 sm:right-2 lg:hidden size-5 sm:size-6 bg-primary/90 rounded-full flex items-center justify-center shadow-md", children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-3 sm:size-3.5 text-primary-foreground" }) })
+            ) : /* @__PURE__ */ jsx("div", { className: "nd:transition-transform group-nd:hover:scale-110 nd:duration-200", children: getFileIcon(item.information.type === "FILE" ? item.information.mime : "", isFolder, "nd:size-8 nd:sm:size-10 nd:md:size-12 nd:text-muted-foreground/60") }),
+            isSelected && /* @__PURE__ */ jsx("div", { className: "nd:absolute nd:top-1.5 nd:right-1.5 nd:sm:top-2 nd:sm:right-2 nd:size-5 nd:bg-primary nd:rounded-full nd:flex nd:items-center nd:justify-center nd:shadow-md nd:animate-in nd:zoom-in-50", children: /* @__PURE__ */ jsx("div", { className: "nd:size-2 nd:bg-primary-foreground nd:rounded-full" }) }),
+            isFolder && currentView === "BROWSE" && /* @__PURE__ */ jsx("div", { className: "nd:absolute nd:bottom-1.5 nd:right-1.5 nd:sm:bottom-2 nd:sm:right-2 nd:lg:hidden nd:size-5 nd:sm:size-6 nd:bg-primary/90 nd:rounded-full nd:flex nd:items-center nd:justify-center nd:shadow-md", children: /* @__PURE__ */ jsx(ChevronRight, { className: "nd:size-3 nd:sm:size-3.5 nd:text-primary-foreground" }) })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "p-1.5 sm:p-2", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate leading-tight", title: item.name, children: item.name }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: isFolder ? "Folder" : formatBytes(item.information.type === "FILE" ? item.information.sizeInBytes : 0) })
+          /* @__PURE__ */ jsxs("div", { className: "nd:p-1.5 nd:sm:p-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "nd:text-sm nd:font-medium nd:truncate nd:leading-tight", title: item.name, children: item.name }),
+            /* @__PURE__ */ jsx("p", { className: "nd:text-xs nd:text-muted-foreground nd:mt-0.5", children: isFolder ? "Folder" : formatBytes(item.information.type === "FILE" ? item.information.sizeInBytes : 0) })
           ] })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "size-10 shrink-0 rounded-lg overflow-hidden bg-muted/50 dark:bg-muted/30 flex items-center justify-center", children: isThumbnailable ? /* @__PURE__ */ jsx("img", { src: thumbnailUrl, alt: item.name, className: "size-full object-cover", loading: "lazy" }) : getFileIcon(item.information.type === "FILE" ? item.information.mime : "", isFolder, "size-5 text-muted-foreground") }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", title: item.name, children: item.name }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: isFolder ? "Folder" : formatBytes(item.information.type === "FILE" ? item.information.sizeInBytes : 0) })
+          /* @__PURE__ */ jsx("div", { className: "nd:size-10 nd:shrink-0 nd:rounded-lg nd:overflow-hidden nd:bg-muted/50 nd:dark:bg-muted/30 nd:flex nd:items-center nd:justify-center", children: isThumbnailable ? /* @__PURE__ */ jsx("img", { src: thumbnailUrl, alt: item.name, className: "nd:size-full nd:object-cover", loading: "lazy" }) : getFileIcon(item.information.type === "FILE" ? item.information.mime : "", isFolder, "nd:size-5 nd:text-muted-foreground") }),
+          /* @__PURE__ */ jsxs("div", { className: "nd:flex-1 nd:min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "nd:text-sm nd:font-medium nd:truncate", title: item.name, children: item.name }),
+            /* @__PURE__ */ jsx("p", { className: "nd:text-xs nd:text-muted-foreground", children: isFolder ? "Folder" : formatBytes(item.information.type === "FILE" ? item.information.sizeInBytes : 0) })
           ] }),
-          isFolder && currentView === "BROWSE" && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground lg:hidden shrink-0" })
+          isFolder && currentView === "BROWSE" && /* @__PURE__ */ jsx(ChevronRight, { className: "nd:size-4 nd:text-muted-foreground nd:lg:hidden nd:shrink-0" })
         ] })
       }
     ) }),
     /* @__PURE__ */ jsx(ContextMenuContent, { children: currentView === "TRASH" ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(ContextMenuItem, { onClick: onRestore, children: [
-        /* @__PURE__ */ jsx(RotateCcw, { className: "mr-2 size-4" }),
+        /* @__PURE__ */ jsx(RotateCcw, { className: "nd:mr-2 nd:size-4" }),
         " Restore"
       ] }),
       /* @__PURE__ */ jsx(ContextMenuSeparator, {}),
-      /* @__PURE__ */ jsxs(ContextMenuItem, { className: "text-destructive focus:text-destructive", onClick: onDelete, children: [
-        /* @__PURE__ */ jsx(Trash2, { className: "mr-2 size-4" }),
+      /* @__PURE__ */ jsxs(ContextMenuItem, { className: "nd:text-destructive nd:focus:text-destructive", onClick: onDelete, children: [
+        /* @__PURE__ */ jsx(Trash2, { className: "nd:mr-2 nd:size-4" }),
         " Delete Forever"
       ] })
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(ContextMenuItem, { onClick: onRename, children: [
-        /* @__PURE__ */ jsx(Pencil, { className: "mr-2 size-4" }),
+        /* @__PURE__ */ jsx(Pencil, { className: "nd:mr-2 nd:size-4" }),
         " Rename"
       ] }),
       /* @__PURE__ */ jsx(ContextMenuSeparator, {}),
-      /* @__PURE__ */ jsxs(ContextMenuItem, { className: "text-destructive focus:text-destructive", onClick: onDelete, children: [
-        /* @__PURE__ */ jsx(Trash2, { className: "mr-2 size-4" }),
+      /* @__PURE__ */ jsxs(ContextMenuItem, { className: "nd:text-destructive nd:focus:text-destructive", onClick: onDelete, children: [
+        /* @__PURE__ */ jsx(Trash2, { className: "nd:mr-2 nd:size-4" }),
         " Delete"
       ] })
     ] }) })
@@ -1876,49 +1877,49 @@ var DriveFileGrid = (props) => {
   };
   const enableDrag = currentView === "BROWSE";
   if (isLoading && items.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex-1 flex flex-col", className), children: [
-      /* @__PURE__ */ jsx("div", { className: "h-1 w-full shrink-0", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs("div", { className: cn("nd:flex-1 nd:flex nd:flex-col", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "nd:h-1 nd:w-full nd:shrink-0", children: /* @__PURE__ */ jsx(
         Progress,
         {
           indeterminate: true,
-          className: "h-full rounded-none bg-primary/10",
-          indicatorClassName: "bg-primary"
+          className: "nd:h-full nd:rounded-none nd:bg-primary/10",
+          indicatorClassName: "nd:bg-primary"
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "size-8 animate-spin text-muted-foreground" }) })
+      /* @__PURE__ */ jsx("div", { className: "nd:flex-1 nd:flex nd:items-center nd:justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "nd:size-8 nd:animate-spin nd:text-muted-foreground" }) })
     ] });
   }
   if (error) {
-    return /* @__PURE__ */ jsx("div", { className: cn("flex-1 flex items-center justify-center p-8", className), children: /* @__PURE__ */ jsx("p", { className: "text-destructive font-medium text-center", children: error }) });
+    return /* @__PURE__ */ jsx("div", { className: cn("nd:flex-1 nd:flex nd:items-center nd:justify-center nd:p-8", className), children: /* @__PURE__ */ jsx("p", { className: "nd:text-destructive nd:font-medium nd:text-center", children: error }) });
   }
   if (processedItems.length === 0) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex-1 flex flex-col items-center justify-center p-8 text-center", className), children: [
-      /* @__PURE__ */ jsx("div", { className: "size-16 rounded-2xl bg-muted/50 dark:bg-muted/30 flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(Folder, { className: "size-8 text-muted-foreground/60" }) }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-muted-foreground", children: currentView === "SEARCH" ? "No files match your search" : currentView === "TRASH" ? "Trash is empty" : "This folder is empty" })
+    return /* @__PURE__ */ jsxs("div", { className: cn("nd:flex-1 nd:flex nd:flex-col nd:items-center nd:justify-center nd:p-8 nd:text-center", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "nd:size-16 nd:rounded-2xl nd:bg-muted/50 nd:dark:bg-muted/30 nd:flex nd:items-center nd:justify-center nd:mb-4", children: /* @__PURE__ */ jsx(Folder, { className: "nd:size-8 nd:text-muted-foreground/60" }) }),
+      /* @__PURE__ */ jsx("p", { className: "nd:text-sm nd:font-medium nd:text-muted-foreground", children: currentView === "SEARCH" ? "No files match your search" : currentView === "TRASH" ? "Trash is empty" : "This folder is empty" })
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isLoading && /* @__PURE__ */ jsx("div", { className: "h-1 w-full shrink-0", children: /* @__PURE__ */ jsx(
+    isLoading && /* @__PURE__ */ jsx("div", { className: "nd:h-1 nd:w-full nd:shrink-0", children: /* @__PURE__ */ jsx(
       Progress,
       {
         indeterminate: true,
-        className: "h-full rounded-none bg-primary/10",
-        indicatorClassName: "bg-primary"
+        className: "nd:h-full nd:rounded-none nd:bg-primary/10",
+        indicatorClassName: "nd:bg-primary"
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: cn("flex-1 overflow-y-auto min-h-0 p-2 sm:p-3 md:p-4", className), children: [
-      /* @__PURE__ */ jsx("div", { className: "space-y-4 sm:space-y-6", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxs("div", { children: [
-        groupBy !== "NONE" && /* @__PURE__ */ jsxs("h3", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-2 sm:mb-3 px-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:p-2 nd:sm:p-3 nd:md:p-4", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "nd:space-y-4 nd:sm:space-y-6", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxs("div", { children: [
+        groupBy !== "NONE" && /* @__PURE__ */ jsxs("h3", { className: "nd:text-xs nd:font-semibold nd:text-muted-foreground nd:uppercase nd:tracking-wide nd:mb-2 nd:sm:mb-3 nd:px-1", children: [
           groupName,
           " ",
-          /* @__PURE__ */ jsxs("span", { className: "opacity-50", children: [
+          /* @__PURE__ */ jsxs("span", { className: "nd:opacity-50", children: [
             "(",
             groupItems.length,
             ")"
           ] })
         ] }),
         /* @__PURE__ */ jsx(SortableContext, { items: groupItems.map((i) => i.id), strategy: rectSortingStrategy, disabled: !enableDrag, children: /* @__PURE__ */ jsx("div", { className: cn(
-          viewMode === "GRID" ? "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 gap-2 sm:gap-3" : "flex flex-col gap-1"
+          viewMode === "GRID" ? "nd:grid nd:grid-cols-3 nd:sm:grid-cols-4 nd:md:grid-cols-5 nd:lg:grid-cols-6 nd:xl:grid-cols-7 nd:gap-2 nd:sm:gap-3" : "nd:flex nd:flex-col nd:gap-1"
         ), children: groupItems.map((item) => /* @__PURE__ */ jsx(
           SortableItem,
           {
@@ -1948,7 +1949,7 @@ var DriveFileGrid = (props) => {
           item.id
         )) }) })
       ] }, groupName)) }),
-      hasMore && /* @__PURE__ */ jsx("div", { ref: observerTarget, className: "flex justify-center py-6", children: isLoadingMore && /* @__PURE__ */ jsx(Loader2, { className: "size-6 animate-spin text-muted-foreground" }) })
+      hasMore && /* @__PURE__ */ jsx("div", { ref: observerTarget, className: "nd:flex nd:justify-center nd:py-6", children: isLoadingMore && /* @__PURE__ */ jsx(Loader2, { className: "nd:size-6 nd:animate-spin nd:text-muted-foreground" }) })
     ] }),
     /* @__PURE__ */ jsx(
       CreateFolderDialog,
@@ -2018,18 +2019,18 @@ var DriveHeader = ({ className }) => {
     createFolder
   } = useDrive();
   const [dialogs, setDialogs] = useState({ delete: false, emptyTrash: false, newFolder: false });
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-2 bg-muted/30 dark:bg-muted/20 p-2", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("nd:flex nd:flex-wrap nd:items-center nd:gap-2 nd:bg-muted/30 nd:dark:bg-muted/20 nd:p-2", className), children: [
     currentView === "BROWSE" && /* @__PURE__ */ jsxs(
       Button,
       {
         type: "button",
         variant: "outline",
         size: "sm",
-        className: "gap-1.5",
+        className: "nd:gap-1.5",
         onClick: () => setDialogs((prev) => ({ ...prev, newFolder: true })),
         children: [
-          /* @__PURE__ */ jsx(FolderPlus, { className: "size-4" }),
-          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "New Folder" })
+          /* @__PURE__ */ jsx(FolderPlus, { className: "nd:size-4" }),
+          /* @__PURE__ */ jsx("span", { className: "nd:hidden nd:sm:inline", children: "New Folder" })
         ]
       }
     ),
@@ -2040,8 +2041,8 @@ var DriveHeader = ({ className }) => {
           type: "button",
           variant: "outline",
           size: "sm",
-          className: "gap-1.5",
-          children: /* @__PURE__ */ jsx(Menu, { className: "size-4" })
+          className: "nd:gap-1.5",
+          children: /* @__PURE__ */ jsx(Menu, { className: "nd:size-4" })
         }
       ) }),
       /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
@@ -2055,7 +2056,7 @@ var DriveHeader = ({ className }) => {
               setSelectedFileIds([]);
             },
             children: [
-              /* @__PURE__ */ jsx(RotateCcw, { className: "size-3.5 mr-2" }),
+              /* @__PURE__ */ jsx(RotateCcw, { className: "nd:size-3.5 nd:mr-2" }),
               "Restore (",
               selectedFileIds.length,
               ")"
@@ -2066,9 +2067,9 @@ var DriveHeader = ({ className }) => {
           DropdownMenuItem,
           {
             onClick: () => setDialogs((prev) => ({ ...prev, delete: true })),
-            className: "text-destructive focus:text-destructive",
+            className: "nd:text-destructive nd:focus:text-destructive",
             children: [
-              /* @__PURE__ */ jsx(Trash2, { className: "size-3.5 mr-2" }),
+              /* @__PURE__ */ jsx(Trash2, { className: "nd:size-3.5 nd:mr-2" }),
               currentView === "TRASH" ? "Delete Forever" : "Delete",
               " (",
               selectedFileIds.length,
@@ -2080,9 +2081,9 @@ var DriveHeader = ({ className }) => {
           DropdownMenuItem,
           {
             onClick: () => setDialogs((prev) => ({ ...prev, emptyTrash: true })),
-            className: "text-destructive focus:text-destructive",
+            className: "nd:text-destructive nd:focus:text-destructive",
             children: [
-              /* @__PURE__ */ jsx(Trash2, { className: "size-3.5 mr-2" }),
+              /* @__PURE__ */ jsx(Trash2, { className: "nd:size-3.5 nd:mr-2" }),
               "Empty Trash"
             ]
           }
@@ -2096,31 +2097,31 @@ var DriveHeader = ({ className }) => {
           type: "button",
           variant: groupBy !== "NONE" ? "secondary" : "ghost",
           size: "sm",
-          className: "gap-1.5",
+          className: "nd:gap-1.5",
           children: [
-            /* @__PURE__ */ jsx(Group, { className: "size-3.5" }),
-            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: groupBy === "NONE" ? "Group" : "Grouped" })
+            /* @__PURE__ */ jsx(Group, { className: "nd:size-3.5" }),
+            /* @__PURE__ */ jsx("span", { className: "nd:hidden nd:sm:inline", children: groupBy === "NONE" ? "Group" : "Grouped" })
           ]
         }
       ) }),
       /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
         /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setGroupBy("NONE"), children: [
-          groupBy === "NONE" && /* @__PURE__ */ jsx(Check, { className: "size-3.5 mr-2" }),
-          /* @__PURE__ */ jsx("span", { className: cn(groupBy !== "NONE" && "pl-5.5"), children: "No Grouping" })
+          groupBy === "NONE" && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:mr-2" }),
+          /* @__PURE__ */ jsx("span", { className: cn(groupBy !== "NONE" && "nd:pl-5.5"), children: "No Grouping" })
         ] }),
         /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setGroupBy("CREATED_AT"), children: [
-          groupBy === "CREATED_AT" && /* @__PURE__ */ jsx(Check, { className: "size-3.5 mr-2" }),
-          /* @__PURE__ */ jsx("span", { className: cn(groupBy !== "CREATED_AT" && "pl-5.5"), children: "Created Date" })
+          groupBy === "CREATED_AT" && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:mr-2" }),
+          /* @__PURE__ */ jsx("span", { className: cn(groupBy !== "CREATED_AT" && "nd:pl-5.5"), children: "Created Date" })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 sm:min-w-50 relative", children: [
+    /* @__PURE__ */ jsxs("div", { className: "nd:flex-1 nd:min-w-0 nd:sm:min-w-50 nd:relative", children: [
       /* @__PURE__ */ jsx(
         Input,
         {
           type: "text",
           placeholder: "Search files...",
-          className: "w-full pl-8 pr-7 h-9",
+          className: "nd:w-full nd:pl-8 nd:pr-7 nd:h-9",
           value: searchQuery,
           onChange: (e) => {
             const val = e.target.value;
@@ -2136,79 +2137,73 @@ var DriveHeader = ({ className }) => {
           }
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none", children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-search", children: [
-        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
-        /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
-      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "nd:absolute nd:left-2.5 nd:top-1/2 nd:-translate-y-1/2 nd:text-muted-foreground nd:pointer-events-none", children: /* @__PURE__ */ jsx(Search, { className: "nd:size-3.5" }) }),
       searchQuery && /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
           variant: "ghost",
           size: "icon",
-          className: "absolute right-0.5 top-1/2 -translate-y-1/2 h-7 w-7 text-muted-foreground",
+          className: "nd:absolute nd:right-0.5 nd:top-1/2 nd:-translate-y-1/2 nd:h-7 nd:w-7 nd:text-muted-foreground",
           onClick: () => {
             setSearchQuery("");
             setCurrentView(searchScope === "TRASH" ? "TRASH" : "BROWSE");
           },
-          children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-x", children: [
-            /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
-            /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
-          ] })
+          children: /* @__PURE__ */ jsx(X, { className: "nd:size-3.5" })
         }
       )
     ] }),
     /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "gap-1.5", children: [
-        /* @__PURE__ */ jsx(ArrowUpDown, { className: "size-3.5" }),
-        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline max-w-24 truncate", children: sortBy.field === "id" ? "Default" : sortBy.field === "order" ? "Custom" : sortBy.field === "createdAt" ? sortBy.order === -1 ? "Date: Newest" : "Date: Oldest" : sortBy.field === "name" ? sortBy.order === 1 ? "Name: A to Z" : "Name: Z to A" : sortBy.field === "size" ? sortBy.order === -1 ? "Size: Large" : "Size: Small" : "Sort" })
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "nd:gap-1.5", children: [
+        /* @__PURE__ */ jsx(ArrowUpDown, { className: "nd:size-3.5" }),
+        /* @__PURE__ */ jsx("span", { className: "nd:hidden nd:sm:inline nd:max-w-24 nd:truncate", children: sortBy.field === "id" ? "Default" : sortBy.field === "order" ? "Custom" : sortBy.field === "createdAt" ? sortBy.order === -1 ? "Date: Newest" : "Date: Oldest" : sortBy.field === "name" ? sortBy.order === 1 ? "Name: A to Z" : "Name: Z to A" : sortBy.field === "size" ? sortBy.order === -1 ? "Size: Large" : "Size: Small" : "Sort" })
       ] }) }),
       /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
         /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setSortBy({ field: "order", order: 1 }), children: [
-          sortBy.field === "order" && /* @__PURE__ */ jsx(Check, { className: "size-3.5 mr-2" }),
-          /* @__PURE__ */ jsx("span", { className: cn(sortBy.field !== "order" && "pl-5.5"), children: "Custom Order" })
+          sortBy.field === "order" && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:mr-2" }),
+          /* @__PURE__ */ jsx("span", { className: cn(sortBy.field !== "order" && "nd:pl-5.5"), children: "Custom Order" })
         ] }),
         /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setSortBy({ field: "id", order: 1 }), children: [
-          sortBy.field === "id" && /* @__PURE__ */ jsx(Check, { className: "size-3.5 mr-2" }),
-          /* @__PURE__ */ jsx("span", { className: cn(sortBy.field !== "id" && "pl-5.5"), children: "Default" })
+          sortBy.field === "id" && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:mr-2" }),
+          /* @__PURE__ */ jsx("span", { className: cn(sortBy.field !== "id" && "nd:pl-5.5"), children: "Default" })
         ] }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
         /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setSortBy({ field: "createdAt", order: -1 }), children: [
-          sortBy.field === "createdAt" && sortBy.order === -1 && /* @__PURE__ */ jsx(Check, { className: "size-3.5 mr-2" }),
-          /* @__PURE__ */ jsx(Calendar, { className: cn("size-3.5 mr-2", sortBy.field === "createdAt" && sortBy.order === -1 ? "" : "ml-5.5") }),
+          sortBy.field === "createdAt" && sortBy.order === -1 && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:mr-2" }),
+          /* @__PURE__ */ jsx(Calendar, { className: cn("nd:size-3.5 nd:mr-2", sortBy.field === "createdAt" && sortBy.order === -1 ? "" : "nd:ml-5.5") }),
           "Date: Newest"
         ] }),
         /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setSortBy({ field: "createdAt", order: 1 }), children: [
-          sortBy.field === "createdAt" && sortBy.order === 1 && /* @__PURE__ */ jsx(Check, { className: "size-3.5 mr-2" }),
-          /* @__PURE__ */ jsx(Calendar, { className: cn("size-3.5 mr-2", sortBy.field === "createdAt" && sortBy.order === 1 ? "" : "ml-5.5") }),
+          sortBy.field === "createdAt" && sortBy.order === 1 && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:mr-2" }),
+          /* @__PURE__ */ jsx(Calendar, { className: cn("nd:size-3.5 nd:mr-2", sortBy.field === "createdAt" && sortBy.order === 1 ? "" : "nd:ml-5.5") }),
           "Date: Oldest"
         ] }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
         /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setSortBy({ field: "name", order: 1 }), children: [
-          sortBy.field === "name" && sortBy.order === 1 && /* @__PURE__ */ jsx(Check, { className: "size-3.5 mr-2" }),
-          /* @__PURE__ */ jsx(ArrowDownAZ, { className: cn("size-3.5 mr-2", sortBy.field === "name" && sortBy.order === 1 ? "" : "ml-5.5") }),
+          sortBy.field === "name" && sortBy.order === 1 && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:mr-2" }),
+          /* @__PURE__ */ jsx(ArrowDownAZ, { className: cn("nd:size-3.5 nd:mr-2", sortBy.field === "name" && sortBy.order === 1 ? "" : "nd:ml-5.5") }),
           "Name: A to Z"
         ] }),
         /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setSortBy({ field: "name", order: -1 }), children: [
-          sortBy.field === "name" && sortBy.order === -1 && /* @__PURE__ */ jsx(Check, { className: "size-3.5 mr-2" }),
-          /* @__PURE__ */ jsx(ArrowUpAZ, { className: cn("size-3.5 mr-2", sortBy.field === "name" && sortBy.order === -1 ? "" : "ml-5.5") }),
+          sortBy.field === "name" && sortBy.order === -1 && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:mr-2" }),
+          /* @__PURE__ */ jsx(ArrowUpAZ, { className: cn("nd:size-3.5 nd:mr-2", sortBy.field === "name" && sortBy.order === -1 ? "" : "nd:ml-5.5") }),
           "Name: Z to A"
         ] }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
         /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setSortBy({ field: "size", order: -1 }), children: [
-          sortBy.field === "size" && sortBy.order === -1 && /* @__PURE__ */ jsx(Check, { className: "size-3.5 mr-2" }),
-          /* @__PURE__ */ jsx(ArrowDown01, { className: cn("size-3.5 mr-2", sortBy.field === "size" && sortBy.order === -1 ? "" : "ml-5.5") }),
+          sortBy.field === "size" && sortBy.order === -1 && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:mr-2" }),
+          /* @__PURE__ */ jsx(ArrowDown01, { className: cn("nd:size-3.5 nd:mr-2", sortBy.field === "size" && sortBy.order === -1 ? "" : "nd:ml-5.5") }),
           "Size: Large"
         ] }),
         /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => setSortBy({ field: "size", order: 1 }), children: [
-          sortBy.field === "size" && sortBy.order === 1 && /* @__PURE__ */ jsx(Check, { className: "size-3.5 mr-2" }),
-          /* @__PURE__ */ jsx(ArrowUp01, { className: cn("size-3.5 mr-2", sortBy.field === "size" && sortBy.order === 1 ? "" : "ml-5.5") }),
+          sortBy.field === "size" && sortBy.order === 1 && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:mr-2" }),
+          /* @__PURE__ */ jsx(ArrowUp01, { className: cn("nd:size-3.5 nd:mr-2", sortBy.field === "size" && sortBy.order === 1 ? "" : "nd:ml-5.5") }),
           "Size: Small"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "w-px h-5 bg-border" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex bg-muted/50 dark:bg-muted/30 rounded-md p-0.5 gap-0.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "nd:w-px nd:h-5 nd:bg-border" }),
+    /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:bg-muted/50 nd:dark:bg-muted/30 nd:rounded-md nd:p-0.5 nd:gap-0.5", children: [
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -2216,13 +2211,13 @@ var DriveHeader = ({ className }) => {
           variant: "ghost",
           size: "icon",
           className: cn(
-            "h-8 w-8",
-            viewMode === "GRID" && "bg-background shadow-sm hover:bg-background dark:bg-background/80"
+            "nd:h-8 nd:w-8",
+            viewMode === "GRID" && "nd:bg-background nd:shadow-sm nd:hover:bg-background nd:dark:bg-background/80"
           ),
           onClick: () => setViewMode("GRID"),
           "aria-label": "Grid View",
           "aria-pressed": viewMode === "GRID",
-          children: /* @__PURE__ */ jsx(LayoutGrid, { className: "size-4" })
+          children: /* @__PURE__ */ jsx(LayoutGrid, { className: "nd:size-4" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -2232,13 +2227,13 @@ var DriveHeader = ({ className }) => {
           variant: "ghost",
           size: "icon",
           className: cn(
-            "h-8 w-8",
-            viewMode === "LIST" && "bg-background shadow-sm hover:bg-background dark:bg-background/80"
+            "nd:h-8 nd:w-8",
+            viewMode === "LIST" && "nd:bg-background nd:shadow-sm nd:hover:bg-background nd:dark:bg-background/80"
           ),
           onClick: () => setViewMode("LIST"),
           "aria-label": "List View",
           "aria-pressed": viewMode === "LIST",
-          children: /* @__PURE__ */ jsx(List, { className: "size-4" })
+          children: /* @__PURE__ */ jsx(List, { className: "nd:size-4" })
         }
       )
     ] }),
@@ -2287,12 +2282,12 @@ var DriveHeader = ({ className }) => {
 var DriveContentProgress = () => {
   const { isLoading } = useDrive();
   if (!isLoading) return null;
-  return /* @__PURE__ */ jsx("div", { className: "h-1 w-full shrink-0", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "nd:h-1 nd:w-full nd:shrink-0", children: /* @__PURE__ */ jsx(
     Progress,
     {
       indeterminate: true,
-      className: "h-full rounded-none bg-primary/10",
-      indicatorClassName: "bg-primary"
+      className: "nd:h-full nd:rounded-none nd:bg-primary/10",
+      indicatorClassName: "nd:bg-primary"
     }
   ) });
 };
@@ -2311,8 +2306,8 @@ var DroppablePathItem = (props) => {
       {
         ref: setNodeRef,
         className: cn(
-          "font-medium text-foreground px-1 text-xs sm:text-sm truncate max-w-30 sm:max-w-none",
-          isOver && !isCurrentFolder && "bg-primary/20 rounded"
+          "nd:font-medium nd:text-foreground nd:px-1 nd:text-xs nd:sm:text-sm nd:truncate nd:max-w-30 nd:sm:max-w-none",
+          isOver && !isCurrentFolder && "nd:bg-primary/20 nd:rounded"
         ),
         "aria-current": "page",
         title: name,
@@ -2327,8 +2322,8 @@ var DroppablePathItem = (props) => {
       variant: "ghost",
       size: "sm",
       className: cn(
-        "h-6 font-normal text-xs sm:text-sm px-1.5 sm:px-2 truncate max-w-25 sm:max-w-37.5",
-        isOver && !isCurrentFolder && "ring-2 ring-primary bg-primary/10 scale-105"
+        "nd:h-6 nd:font-normal nd:text-xs nd:sm:text-sm nd:px-1.5 nd:sm:px-2 nd:truncate nd:max-w-25 nd:sm:max-w-37.5",
+        isOver && !isCurrentFolder && "nd:ring-2 nd:ring-primary nd:bg-primary/10 nd:scale-105"
       ),
       onClick,
       type: "button",
@@ -2339,10 +2334,10 @@ var DroppablePathItem = (props) => {
 };
 var DrivePathBar = ({ className }) => {
   const { path, navigateToFolder } = useDrive();
-  return /* @__PURE__ */ jsx("ol", { className: cn("flex items-center gap-1 sm:gap-1.5 text-sm text-muted-foreground overflow-x-auto flex-nowrap min-w-0", className), "aria-label": "Breadcrumb", role: "navigation", children: path.map((item, index) => {
+  return /* @__PURE__ */ jsx("ol", { className: cn("nd:flex nd:items-center nd:gap-1 nd:sm:gap-1.5 nd:text-sm nd:text-muted-foreground nd:overflow-x-auto nd:flex-nowrap nd:min-w-0", className), "aria-label": "Breadcrumb", role: "navigation", children: path.map((item, index) => {
     const isLast = index === path.length - 1;
-    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1 sm:gap-1.5 shrink-0", children: [
-      index > 0 && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/50 text-xs", "aria-hidden": "true", children: "/" }),
+    return /* @__PURE__ */ jsxs("li", { className: "nd:flex nd:items-center nd:gap-1 nd:sm:gap-1.5 nd:shrink-0", children: [
+      index > 0 && /* @__PURE__ */ jsx("span", { className: "nd:text-muted-foreground/50 nd:text-xs", "aria-hidden": "true", children: "/" }),
       /* @__PURE__ */ jsx(
         DroppablePathItem,
         {
@@ -2359,15 +2354,15 @@ var UploadStatusIcon = (props) => {
   const { status } = props;
   switch (status) {
     case "complete":
-      return /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-emerald-500" });
+      return /* @__PURE__ */ jsx(CheckCircle2, { className: "nd:size-4 nd:text-emerald-500" });
     case "error":
-      return /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 text-destructive" });
+      return /* @__PURE__ */ jsx(AlertCircle, { className: "nd:size-4 nd:text-destructive" });
     case "cancelled":
-      return /* @__PURE__ */ jsx(X, { className: "size-4 text-muted-foreground" });
+      return /* @__PURE__ */ jsx(X, { className: "nd:size-4 nd:text-muted-foreground" });
     case "uploading":
-      return /* @__PURE__ */ jsx(Loader2, { className: "size-4 text-primary animate-spin" });
+      return /* @__PURE__ */ jsx(Loader2, { className: "nd:size-4 nd:text-primary nd:animate-spin" });
     default:
-      return /* @__PURE__ */ jsx(Clock, { className: "size-4 text-muted-foreground" });
+      return /* @__PURE__ */ jsx(Clock, { className: "nd:size-4 nd:text-muted-foreground" });
   }
 };
 var LogViewerDialog = (props) => {
@@ -2387,9 +2382,9 @@ var LogViewerDialog = (props) => {
     a.click();
     URL.revokeObjectURL(url);
   };
-  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg p-0 gap-0 max-h-[85vh] flex flex-col", children: [
-    /* @__PURE__ */ jsx(DialogHeader, { className: "px-4 py-3 border-b", children: /* @__PURE__ */ jsx(DialogTitle, { className: "text-base truncate", children: upload.name }) }),
-    /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 bg-background px-4 py-2 border-b flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "nd:sm:max-w-lg nd:p-0 nd:gap-0 nd:max-h-[85vh] nd:flex nd:flex-col", children: [
+    /* @__PURE__ */ jsx(DialogHeader, { className: "nd:px-4 nd:py-3 nd:border-b", children: /* @__PURE__ */ jsx(DialogTitle, { className: "nd:text-base nd:truncate", children: upload.name }) }),
+    /* @__PURE__ */ jsxs("div", { className: "nd:sticky nd:top-0 nd:z-10 nd:bg-background nd:px-4 nd:py-2 nd:border-b nd:flex nd:items-center nd:gap-2", children: [
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -2413,29 +2408,29 @@ var LogViewerDialog = (props) => {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-2", children: [
-      logs.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground text-center py-8", children: "No logs available" }),
+    /* @__PURE__ */ jsxs("div", { className: "nd:flex-1 nd:overflow-y-auto nd:p-4 nd:space-y-2", children: [
+      logs.length === 0 && /* @__PURE__ */ jsx("p", { className: "nd:text-sm nd:text-muted-foreground nd:text-center nd:py-8", children: "No logs available" }),
       logs.map((log, index) => /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
-            "flex items-start gap-2 p-2 rounded-md border text-sm",
-            log.type === "error" && "bg-destructive/5 border-destructive/20",
-            log.type === "warning" && "bg-yellow-500/5 border-yellow-500/20",
-            log.type === "success" && "bg-emerald-500/5 border-emerald-500/20",
-            log.type === "info" && "bg-muted/50 border-border"
+            "nd:flex nd:items-start nd:gap-2 nd:p-2 nd:rounded-md nd:border nd:text-sm",
+            log.type === "error" && "nd:bg-destructive/5 nd:border-destructive/20",
+            log.type === "warning" && "nd:bg-yellow-500/5 nd:border-yellow-500/20",
+            log.type === "success" && "nd:bg-emerald-500/5 nd:border-emerald-500/20",
+            log.type === "info" && "nd:bg-muted/50 nd:border-border"
           ),
           children: [
             /* @__PURE__ */ jsx("div", { className: cn(
-              "shrink-0 size-1.5 rounded-full mt-1.5",
-              log.type === "error" && "bg-destructive",
-              log.type === "warning" && "bg-yellow-500",
-              log.type === "success" && "bg-emerald-500",
-              log.type === "info" && "bg-muted-foreground"
+              "nd:shrink-0 nd:size-1.5 nd:rounded-full nd:mt-1.5",
+              log.type === "error" && "nd:bg-destructive",
+              log.type === "warning" && "nd:bg-yellow-500",
+              log.type === "success" && "nd:bg-emerald-500",
+              log.type === "info" && "nd:bg-muted-foreground"
             ) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 space-y-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "break-words whitespace-pre-wrap", children: log.message }),
-              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: new Date(log.timestamp).toLocaleTimeString() })
+            /* @__PURE__ */ jsxs("div", { className: "nd:flex-1 nd:min-w-0 nd:space-y-1", children: [
+              /* @__PURE__ */ jsx("p", { className: "nd:break-words nd:whitespace-pre-wrap", children: log.message }),
+              /* @__PURE__ */ jsx("p", { className: "nd:text-xs nd:text-muted-foreground", children: new Date(log.timestamp).toLocaleTimeString() })
             ] })
           ]
         },
@@ -2497,33 +2492,33 @@ var DriveUpload = (props) => {
   }, [handleFiles]);
   const hasUploadsInProgress = uploads.some((u) => ["uploading", "queued", "pending"].includes(u.status));
   const activeUploads = uploads.filter((u) => ["uploading", "queued", "pending"].includes(u.status));
-  const renderDialog = () => /* @__PURE__ */ jsx(Dialog, { open: showUploadsDialog, onOpenChange: setShowUploadsDialog, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md p-0 gap-0", showCloseButton: false, children: [
-    /* @__PURE__ */ jsxs(DialogHeader, { className: "px-4 py-3 border-b flex-row items-center justify-between space-y-0", children: [
-      /* @__PURE__ */ jsx(DialogTitle, { className: "text-base", children: "Upload Status" }),
+  const renderDialog = () => /* @__PURE__ */ jsx(Dialog, { open: showUploadsDialog, onOpenChange: setShowUploadsDialog, children: /* @__PURE__ */ jsxs(DialogContent, { className: "nd:sm:max-w-md nd:p-0 nd:gap-0", showCloseButton: false, children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { className: "nd:px-4 nd:py-3 nd:border-b nd:flex-row nd:items-center nd:justify-between nd:space-y-0", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { className: "nd:text-base", children: "Upload Status" }),
       hasUploadsInProgress && /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
           size: "sm",
           variant: "ghost",
-          className: "text-destructive hover:text-destructive",
+          className: "nd:text-destructive nd:hover:text-destructive",
           onClick: cancelAllUploads,
           children: "Cancel All"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "divide-y max-h-80 overflow-y-auto", children: [
-      uploads.length === 0 && /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No uploads" }),
+    /* @__PURE__ */ jsxs("div", { className: "nd:divide-y nd:max-h-80 nd:overflow-y-auto", children: [
+      uploads.length === 0 && /* @__PURE__ */ jsx("div", { className: "nd:p-4 nd:text-center nd:text-sm nd:text-muted-foreground", children: "No uploads" }),
       uploads.map((upload) => {
         const percent = upload.status === "complete" ? 100 : upload.status === "error" || !upload.totalChunks ? 0 : Math.round(upload.currentChunk / upload.totalChunks * 100);
-        return /* @__PURE__ */ jsxs("div", { className: "px-4 py-2.5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 mb-1.5", children: [
+        return /* @__PURE__ */ jsxs("div", { className: "nd:px-4 nd:py-2.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-start nd:gap-2 nd:mb-1.5", children: [
             /* @__PURE__ */ jsx(UploadStatusIcon, { status: upload.status }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: upload.name }),
+            /* @__PURE__ */ jsxs("div", { className: "nd:flex-1 nd:min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "nd:text-sm nd:font-medium nd:truncate", children: upload.name }),
               /* @__PURE__ */ jsxs("p", { className: cn(
-                "text-xs break-words",
-                upload.status === "error" ? "text-destructive" : "text-muted-foreground"
+                "nd:text-xs nd:break-words",
+                upload.status === "error" ? "nd:text-destructive" : "nd:text-muted-foreground"
               ), children: [
                 upload.status === "uploading" && "Uploading...",
                 upload.status === "queued" && "Waiting in queue",
@@ -2533,17 +2528,17 @@ var DriveUpload = (props) => {
                 upload.status === "cancelled" && "Upload cancelled"
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-1 nd:shrink-0", children: [
               upload.logs && upload.logs.length > 0 && /* @__PURE__ */ jsx(
                 Button,
                 {
                   type: "button",
                   size: "icon",
                   variant: "ghost",
-                  className: "text-muted-foreground hover:text-foreground",
+                  className: "nd:text-muted-foreground nd:hover:text-foreground",
                   onClick: () => setLogViewerUpload(upload),
                   title: "View logs",
-                  children: /* @__PURE__ */ jsx(FileText, { className: "size-3.5" })
+                  children: /* @__PURE__ */ jsx(FileText, { className: "nd:size-3.5" })
                 }
               ),
               ["uploading", "queued", "pending"].includes(upload.status) && /* @__PURE__ */ jsx(
@@ -2552,17 +2547,17 @@ var DriveUpload = (props) => {
                   type: "button",
                   size: "icon",
                   variant: "ghost",
-                  className: "text-muted-foreground hover:text-destructive",
+                  className: "nd:text-muted-foreground nd:hover:text-destructive",
                   onClick: () => cancelUpload(upload.id),
                   title: "Cancel",
-                  children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+                  children: /* @__PURE__ */ jsx(X, { className: "nd:size-3.5" })
                 }
               )
             ] })
           ] }),
-          upload.status === "uploading" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pl-6", children: [
-            /* @__PURE__ */ jsx(Progress, { value: percent, className: "flex-1" }),
-            /* @__PURE__ */ jsxs("span", { className: "text-xs tabular-nums text-muted-foreground w-8", children: [
+          upload.status === "uploading" && /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-2 nd:pl-6", children: [
+            /* @__PURE__ */ jsx(Progress, { value: percent, className: "nd:flex-1" }),
+            /* @__PURE__ */ jsxs("span", { className: "nd:text-xs nd:tabular-nums nd:text-muted-foreground nd:w-8", children: [
               percent,
               "%"
             ] })
@@ -2581,7 +2576,7 @@ var DriveUpload = (props) => {
           onOpenChange: (open) => !open && setLogViewerUpload(null)
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-2", children: [
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -2593,7 +2588,7 @@ var DriveUpload = (props) => {
               handleFiles(e.target.files);
               e.target.value = "";
             },
-            className: "hidden",
+            className: "nd:hidden",
             "aria-hidden": "true"
           }
         ),
@@ -2606,7 +2601,7 @@ var DriveUpload = (props) => {
             size: "sm",
             disabled: isLoading,
             title: "Refresh",
-            children: /* @__PURE__ */ jsx(RefreshCw, { className: cn("!size-4 shrink-0", isLoading && "animate-spin") })
+            children: /* @__PURE__ */ jsx(RefreshCw, { className: cn("nd:size-4 nd:shrink-0", isLoading && "nd:animate-spin") })
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -2617,7 +2612,7 @@ var DriveUpload = (props) => {
             size: "sm",
             disabled: hasUploadsInProgress,
             children: [
-              /* @__PURE__ */ jsx(Upload, { className: "!size-4 shrink-0" }),
+              /* @__PURE__ */ jsx(Upload, { className: "nd:size-4 nd:shrink-0" }),
               /* @__PURE__ */ jsx("span", { children: "Upload" })
             ]
           }
@@ -2633,7 +2628,7 @@ var DriveUpload = (props) => {
               setShowUploadsDialog(true);
             },
             children: [
-              activeUploads.length > 0 ? /* @__PURE__ */ jsx(Loader2, { className: "!size-4 shrink-0 animate-spin" }) : /* @__PURE__ */ jsx(CheckCircle2, { className: "!size-4 shrink-0" }),
+              activeUploads.length > 0 ? /* @__PURE__ */ jsx(Loader2, { className: "nd:size-4 nd:shrink-0 nd:animate-spin" }) : /* @__PURE__ */ jsx(CheckCircle2, { className: "nd:size-4 nd:shrink-0" }),
               /* @__PURE__ */ jsx("span", { children: activeUploads.length > 0 ? `(${activeUploads.length})` : "Status" })
             ]
           }
@@ -2642,13 +2637,13 @@ var DriveUpload = (props) => {
       renderDialog()
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "nd:w-full", children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
-          "flex flex-col items-center justify-center p-8 border-2 border-dashed rounded-lg cursor-pointer transition-colors",
-          isDragging ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50"
+          "nd:flex nd:flex-col nd:items-center nd:justify-center nd:p-8 nd:border-2 nd:border-dashed nd:rounded-lg nd:cursor-pointer nd:transition-colors",
+          isDragging ? "nd:border-primary nd:bg-primary/5" : "nd:border-muted-foreground/25 nd:hover:border-primary/50 nd:hover:bg-muted/50"
         ),
         onDragEnter: (e) => handleDrag(e, true),
         onDragLeave: (e) => handleDrag(e, false),
@@ -2670,18 +2665,18 @@ var DriveUpload = (props) => {
                 handleFiles(e.target.files);
                 e.target.value = "";
               },
-              className: "hidden",
+              className: "nd:hidden",
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [
-            /* @__PURE__ */ jsx("div", { className: "p-3 rounded-full bg-background border shadow-sm", children: /* @__PURE__ */ jsx(Upload, { className: "size-6 text-muted-foreground" }) }),
-            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: isDragging ? "Drop files here" : "Click or drag files to upload" })
+          /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:flex-col nd:items-center nd:gap-2 nd:text-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "nd:p-3 nd:rounded-full nd:bg-background nd:border nd:shadow-sm", children: /* @__PURE__ */ jsx(Upload, { className: "nd:size-6 nd:text-muted-foreground" }) }),
+            /* @__PURE__ */ jsx("div", { className: "nd:text-sm nd:font-medium nd:text-foreground", children: isDragging ? "Drop files here" : "Click or drag files to upload" })
           ] })
         ]
       }
     ),
-    hasUploadsInProgress && /* @__PURE__ */ jsx("div", { className: "mt-4 text-center", children: /* @__PURE__ */ jsx(Button, { variant: "link", onClick: () => {
+    hasUploadsInProgress && /* @__PURE__ */ jsx("div", { className: "nd:mt-4 nd:text-center", children: /* @__PURE__ */ jsx(Button, { variant: "link", onClick: () => {
       setManuallyOpened(true);
       setShowUploadsDialog(true);
     }, children: "View Upload Progress" }) }),
@@ -2706,15 +2701,15 @@ var DriveStorageIndicator = (props) => {
   const { usedInBytes, totalInBytes, percentage } = quota;
   const isNearFull = percentage >= 90;
   const isFull = percentage >= 100;
-  const stateColor = isFull ? "text-destructive" : isNearFull ? "text-yellow-600 dark:text-yellow-500" : "text-primary";
+  const stateColor = isFull ? "nd:text-destructive" : isNearFull ? "nd:text-yellow-600 nd:dark:text-yellow-500" : "nd:text-primary";
   if (compact) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3 text-xs font-medium text-muted-foreground", className), children: [
-      /* @__PURE__ */ jsxs("span", { className: "shrink-0 flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx(Cloud, { className: "size-3.5" }),
+    return /* @__PURE__ */ jsxs("div", { className: cn("nd:flex nd:items-center nd:gap-3 nd:text-xs nd:font-medium nd:text-muted-foreground", className), children: [
+      /* @__PURE__ */ jsxs("span", { className: "nd:shrink-0 nd:flex nd:items-center nd:gap-1.5", children: [
+        /* @__PURE__ */ jsx(Cloud, { className: "nd:size-3.5" }),
         "Storage"
       ] }),
-      /* @__PURE__ */ jsx(Progress, { value: percentage, indicatorClassName: cn("bg-gradient-to-r from-blue-500 to-cyan-500", isNearFull && "from-yellow-500 to-orange-500", isFull && "bg-destructive"), className: "w-24 sm:w-32" }),
-      /* @__PURE__ */ jsxs("span", { className: "shrink-0 whitespace-nowrap", children: [
+      /* @__PURE__ */ jsx(Progress, { value: percentage, indicatorClassName: cn("nd:bg-gradient-to-r nd:from-blue-500 nd:to-cyan-500", isNearFull && "nd:from-yellow-500 nd:to-orange-500", isFull && "nd:bg-destructive"), className: "nd:w-24 nd:sm:w-32" }),
+      /* @__PURE__ */ jsxs("span", { className: "nd:shrink-0 nd:whitespace-nowrap", children: [
         formatBytes(usedInBytes),
         " / ",
         formatBytes(totalInBytes)
@@ -2722,12 +2717,12 @@ var DriveStorageIndicator = (props) => {
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 mb-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Cloud, { className: cn("size-4", stateColor) }),
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Storage" })
+    /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:justify-between nd:gap-2 nd:mb-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-2", children: [
+        /* @__PURE__ */ jsx(Cloud, { className: cn("nd:size-4", stateColor) }),
+        /* @__PURE__ */ jsx("span", { className: "nd:text-xs nd:font-medium nd:text-muted-foreground", children: "Storage" })
       ] }),
-      /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold tabular-nums", children: [
+      /* @__PURE__ */ jsxs("span", { className: "nd:text-xs nd:font-semibold nd:tabular-nums", children: [
         percentage,
         "%"
       ] })
@@ -2736,22 +2731,22 @@ var DriveStorageIndicator = (props) => {
       Progress,
       {
         value: percentage,
-        className: "h-1.5",
+        className: "nd:h-1.5",
         indicatorClassName: cn(
-          "transition-all duration-500",
-          isFull ? "bg-destructive" : isNearFull ? "bg-yellow-500" : "bg-gradient-to-r from-blue-500 to-purple-500"
+          "nd:transition-all nd:duration-500",
+          isFull ? "nd:bg-destructive" : isNearFull ? "nd:bg-yellow-500" : "nd:bg-gradient-to-r nd:from-blue-500 nd:to-purple-500"
         )
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mt-1.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground tabular-nums", children: formatBytes(usedInBytes) }),
-      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground tabular-nums", children: formatBytes(totalInBytes) })
+    /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:justify-between nd:items-center nd:mt-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "nd:text-[10px] nd:text-muted-foreground nd:tabular-nums", children: formatBytes(usedInBytes) }),
+      /* @__PURE__ */ jsx("span", { className: "nd:text-[10px] nd:text-muted-foreground nd:tabular-nums", children: formatBytes(totalInBytes) })
     ] }),
     isNearFull && /* @__PURE__ */ jsxs("div", { className: cn(
-      "flex items-center gap-1.5 text-[10px] font-medium px-2 py-1 rounded-md mt-2",
-      isFull ? "bg-destructive/10 text-destructive" : "bg-yellow-500/10 text-yellow-600 dark:text-yellow-500"
+      "nd:flex nd:items-center nd:gap-1.5 nd:text-[10px] nd:font-medium nd:px-2 nd:py-1 nd:rounded-md nd:mt-2",
+      isFull ? "nd:bg-destructive/10 nd:text-destructive" : "nd:bg-yellow-500/10 nd:text-yellow-600 nd:dark:text-yellow-500"
     ), children: [
-      /* @__PURE__ */ jsx(AlertCircle, { className: "size-3 shrink-0" }),
+      /* @__PURE__ */ jsx(AlertCircle, { className: "nd:size-3 nd:shrink-0" }),
       /* @__PURE__ */ jsx("span", { children: isFull ? "Storage full" : "Almost full" })
     ] })
   ] });
@@ -2860,40 +2855,40 @@ var ChooserSidebar = (props) => {
     setOauthLoading(false);
     setOauthAbort(null);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full w-full bg-muted/5 dark:bg-muted/10", children: [
-    /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-border/50", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:flex-col nd:h-full nd:w-full nd:bg-muted/5 nd:dark:bg-muted/10", children: [
+    /* @__PURE__ */ jsx("div", { className: "nd:p-2 nd:border-b nd:border-border/50", children: /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-1", children: [
       isDropdownDisabled ? (
         /* Static display when no accounts and no providers */
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center gap-2 px-2 h-11 min-w-0", children: [
-          /* @__PURE__ */ jsx("div", { className: "size-7 rounded-md flex items-center justify-center shrink-0 bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400", children: /* @__PURE__ */ jsx(HardDrive, { className: "size-3.5" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: "Local Storage" }),
-            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: "On this device" })
+        /* @__PURE__ */ jsxs("div", { className: "nd:flex-1 nd:flex nd:items-center nd:gap-2 nd:px-2 nd:h-11 nd:min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "nd:size-7 nd:rounded-md nd:flex nd:items-center nd:justify-center nd:shrink-0 nd:bg-emerald-500/10 nd:text-emerald-600 nd:dark:bg-emerald-500/20 nd:dark:text-emerald-400", children: /* @__PURE__ */ jsx(HardDrive, { className: "nd:size-3.5" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:flex-col nd:min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "nd:text-sm nd:font-medium nd:truncate", children: "Local Storage" }),
+            /* @__PURE__ */ jsx("span", { className: "nd:text-[11px] nd:text-muted-foreground nd:truncate", children: "On this device" })
           ] })
         ] })
       ) : /* @__PURE__ */ jsxs(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
-        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "flex-1 min-w-0 justify-between px-2 h-11 hover:bg-muted/50 dark:hover:bg-muted/30", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-left min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "nd:flex-1 nd:min-w-0 nd:justify-between nd:px-2 nd:h-11 nd:hover:bg-muted/50 nd:dark:hover:bg-muted/30", children: [
+          /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-2 nd:text-left nd:min-w-0 nd:flex-1", children: [
             /* @__PURE__ */ jsx("div", { className: cn(
-              "size-7 rounded-md flex items-center justify-center shrink-0",
-              activeAccountId ? "bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400" : "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400"
-            ), children: activeAccountId ? /* @__PURE__ */ jsx(Database, { className: "size-3.5" }) : /* @__PURE__ */ jsx(HardDrive, { className: "size-3.5" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: currentAccountName }),
-              /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: currentAccountEmail })
+              "nd:size-7 nd:rounded-md nd:flex nd:items-center nd:justify-center nd:shrink-0",
+              activeAccountId ? "nd:bg-blue-500/10 nd:text-blue-600 nd:dark:bg-blue-500/20 nd:dark:text-blue-400" : "nd:bg-emerald-500/10 nd:text-emerald-600 nd:dark:bg-emerald-500/20 nd:dark:text-emerald-400"
+            ), children: activeAccountId ? /* @__PURE__ */ jsx(Database, { className: "nd:size-3.5" }) : /* @__PURE__ */ jsx(HardDrive, { className: "nd:size-3.5" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:flex-col nd:min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "nd:text-sm nd:font-medium nd:truncate", children: currentAccountName }),
+              /* @__PURE__ */ jsx("span", { className: "nd:text-[11px] nd:text-muted-foreground nd:truncate", children: currentAccountEmail })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 text-muted-foreground/60 shrink-0" })
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "nd:size-3.5 nd:text-muted-foreground/60 nd:shrink-0" })
         ] }) }),
-        /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56", align: "start", children: [
-          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide", children: "Storage" }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "nd:w-56", align: "start", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "nd:text-[11px] nd:font-medium nd:text-muted-foreground nd:uppercase nd:tracking-wide", children: "Storage" }),
           /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
             setActiveAccountId(null);
             setCurrentView("BROWSE");
             onNavigate?.();
-          }, className: "gap-2 py-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children: "Local Storage" }),
-            activeAccountId === null && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })
+          }, className: "nd:gap-2 nd:py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "nd:flex-1 nd:text-sm", children: "Local Storage" }),
+            activeAccountId === null && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:text-primary" })
           ] }),
           accounts.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
           accounts.map((account) => /* @__PURE__ */ jsxs(
@@ -2904,13 +2899,13 @@ var ChooserSidebar = (props) => {
                 setCurrentView("BROWSE");
                 onNavigate?.();
               },
-              className: "gap-2 py-2",
+              className: "nd:gap-2 nd:py-2",
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsx("p", { className: "text-sm truncate", children: account.name }),
-                  /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground truncate", children: account.email })
+                /* @__PURE__ */ jsxs("div", { className: "nd:flex-1 nd:min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "nd:text-sm nd:truncate", children: account.name }),
+                  /* @__PURE__ */ jsx("p", { className: "nd:text-[10px] nd:text-muted-foreground nd:truncate", children: account.email })
                 ] }),
-                activeAccountId === account.id && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })
+                activeAccountId === account.id && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:text-primary" })
               ]
             },
             account.id
@@ -2918,9 +2913,9 @@ var ChooserSidebar = (props) => {
           hasAnyProvider && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
             /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
-              /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
-                /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Add Account" })
+              /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "nd:gap-2", children: [
+                /* @__PURE__ */ jsx(Plus, { className: "nd:size-3.5" }),
+                /* @__PURE__ */ jsx("span", { className: "nd:text-sm", children: "Add Account" })
               ] }),
               /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: availableProviders.google && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: openOAuthPopup, children: "Google Drive" }) })
             ] })
@@ -2928,39 +2923,39 @@ var ChooserSidebar = (props) => {
         ] })
       ] }),
       currentAccount && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-9 shrink-0 hover:bg-muted/50 dark:hover:bg-muted/30", children: /* @__PURE__ */ jsx(Settings2, { className: "size-4 text-muted-foreground" }) }) }),
-        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-40", children: [
-          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground truncate", children: currentAccount.name }),
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "nd:size-9 nd:shrink-0 nd:hover:bg-muted/50 nd:dark:hover:bg-muted/30", children: /* @__PURE__ */ jsx(Settings2, { className: "nd:size-4 nd:text-muted-foreground" }) }) }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "nd:w-40", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "nd:text-xs nd:text-muted-foreground nd:truncate", children: currentAccount.name }),
           /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
           /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
             setRenameDialog({ open: true, account: currentAccount });
           }, children: [
-            /* @__PURE__ */ jsx(Pencil, { className: "size-3.5 mr-2" }),
+            /* @__PURE__ */ jsx(Pencil, { className: "nd:size-3.5 nd:mr-2" }),
             " Rename"
           ] }),
           /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: openOAuthPopup, children: [
-            /* @__PURE__ */ jsx(RefreshCw, { className: "size-3.5 mr-2" }),
+            /* @__PURE__ */ jsx(RefreshCw, { className: "nd:size-3.5 nd:mr-2" }),
             " Reconnect"
           ] }),
-          /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => setDeleteDialog({ open: true, account: currentAccount }), children: [
-            /* @__PURE__ */ jsx(Trash, { className: "size-3.5 mr-2" }),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "nd:text-destructive nd:focus:text-destructive", onClick: () => setDeleteDialog({ open: true, account: currentAccount }), children: [
+            /* @__PURE__ */ jsx(Trash, { className: "nd:size-3.5 nd:mr-2" }),
             " Disconnect"
           ] })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs("nav", { className: "flex-1 p-2 space-y-0.5", children: [
+    /* @__PURE__ */ jsxs("nav", { className: "nd:flex-1 nd:p-2 nd:space-y-0.5", children: [
       /* @__PURE__ */ jsxs(
         Button,
         {
           variant: "ghost",
-          className: cn("w-full justify-start gap-2.5 h-9 px-2.5 font-medium", currentView !== "TRASH" ? "bg-primary/10 text-primary hover:bg-primary/15" : "hover:bg-muted/50"),
+          className: cn("nd:w-full nd:justify-start nd:gap-2.5 nd:h-9 nd:px-2.5 nd:font-medium", currentView !== "TRASH" ? "nd:bg-primary/10 nd:text-primary nd:hover:bg-primary/15" : "nd:hover:bg-muted/50"),
           onClick: () => {
             setCurrentView("BROWSE");
             onNavigate?.();
           },
           children: [
-            /* @__PURE__ */ jsx(FolderOpen, { className: "size-4" }),
+            /* @__PURE__ */ jsx(FolderOpen, { className: "nd:size-4" }),
             " My Files"
           ]
         }
@@ -2969,19 +2964,19 @@ var ChooserSidebar = (props) => {
         Button,
         {
           variant: "ghost",
-          className: cn("w-full justify-start gap-2.5 h-9 px-2.5 font-medium", currentView === "TRASH" ? "bg-destructive/10 text-destructive hover:bg-destructive/15" : "hover:bg-muted/50"),
+          className: cn("nd:w-full nd:justify-start nd:gap-2.5 nd:h-9 nd:px-2.5 nd:font-medium", currentView === "TRASH" ? "nd:bg-destructive/10 nd:text-destructive nd:hover:bg-destructive/15" : "nd:hover:bg-muted/50"),
           onClick: () => {
             setCurrentView("TRASH");
             onNavigate?.();
           },
           children: [
-            /* @__PURE__ */ jsx(Trash2, { className: "size-4" }),
+            /* @__PURE__ */ jsx(Trash2, { className: "nd:size-4" }),
             " Trash"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "p-2.5 border-t border-border/50 bg-background/50 dark:bg-background/30", children: /* @__PURE__ */ jsx(DriveStorageIndicator, {}) }),
+    /* @__PURE__ */ jsx("div", { className: "nd:p-2.5 nd:border-t nd:border-border/50 nd:bg-background/50 nd:dark:bg-background/30", children: /* @__PURE__ */ jsx(DriveStorageIndicator, {}) }),
     /* @__PURE__ */ jsx(
       RenameAccountDialog,
       {
@@ -3001,11 +2996,11 @@ var ChooserSidebar = (props) => {
         onConfirm: handleDelete
       }
     ),
-    /* @__PURE__ */ jsx(Dialog, { open: oauthLoading, onOpenChange: (open) => !open && cancelOAuth(), children: /* @__PURE__ */ jsx(DialogContent, { className: "sm:max-w-xs", showCloseButton: false, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 py-4", children: [
-      /* @__PURE__ */ jsx(Loader2, { className: "size-8 text-primary animate-spin" }),
-      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx(DialogTitle, { className: "text-base", children: "Connecting..." }),
-        /* @__PURE__ */ jsx(DialogDescription, { className: "text-sm mt-1", children: "Preparing Google authentication" })
+    /* @__PURE__ */ jsx(Dialog, { open: oauthLoading, onOpenChange: (open) => !open && cancelOAuth(), children: /* @__PURE__ */ jsx(DialogContent, { className: "nd:sm:max-w-xs", showCloseButton: false, children: /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:flex-col nd:items-center nd:gap-4 nd:py-4", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "nd:size-8 nd:text-primary nd:animate-spin" }),
+      /* @__PURE__ */ jsxs("div", { className: "nd:text-center", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "nd:text-base", children: "Connecting..." }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "nd:text-sm nd:mt-1", children: "Preparing Google authentication" })
       ] }),
       /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: cancelOAuth, children: "Cancel" })
     ] }) }) })
@@ -3014,10 +3009,10 @@ var ChooserSidebar = (props) => {
 var MobileSidebarSheet = () => {
   const [sheetOpen, setSheetOpen] = useState(false);
   return /* @__PURE__ */ jsxs(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: [
-    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-9 md:hidden shrink-0", children: /* @__PURE__ */ jsx(Menu, { className: "size-5" }) }) }),
-    /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-72 p-0", hideCloseButton: true, children: [
-      /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
-      /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Storage and navigation" }),
+    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "nd:size-9 nd:md:hidden nd:shrink-0", children: /* @__PURE__ */ jsx(Menu, { className: "nd:size-5" }) }) }),
+    /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "nd:w-72 nd:p-0", hideCloseButton: true, children: [
+      /* @__PURE__ */ jsx(SheetTitle, { className: "nd:sr-only", children: "Navigation" }),
+      /* @__PURE__ */ jsx(SheetDescription, { className: "nd:sr-only", children: "Storage and navigation" }),
       /* @__PURE__ */ jsx(ChooserSidebar, { onNavigate: () => setSheetOpen(false) })
     ] })
   ] });
@@ -3063,7 +3058,7 @@ var DriveFileChooser = (props) => {
   }, [multiple, value, onChange]);
   const hasSelection = value && (Array.isArray(value) ? value.length > 0 : true);
   const displayFiles = useMemo(() => !value ? [] : Array.isArray(value) ? value : [value], [value]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("nd:w-full", className), children: [
     !hasSelection ? /* @__PURE__ */ jsxs(
       Button,
       {
@@ -3072,74 +3067,74 @@ var DriveFileChooser = (props) => {
         onClick: () => setIsOpen(true),
         disabled,
         className: cn(
-          "w-full h-auto justify-start gap-3 px-3 py-2.5 border-dashed",
-          error && "border-destructive"
+          "nd:w-full nd:h-auto nd:justify-start nd:gap-3 nd:px-3 nd:py-2.5 nd:border-dashed",
+          error && "nd:border-destructive"
         ),
         children: [
           /* @__PURE__ */ jsx("div", { className: cn(
-            "size-9 rounded-lg flex items-center justify-center shrink-0",
-            error ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-muted-foreground"
-          ), children: /* @__PURE__ */ jsx(Upload, { className: "size-4" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 text-left", children: [
-            /* @__PURE__ */ jsx("p", { className: cn("text-sm font-medium", error && "text-destructive"), children: multiple ? "Select files" : "Select a file" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground font-normal truncate", children: placeholder })
+            "nd:size-9 nd:rounded-lg nd:flex nd:items-center nd:justify-center nd:shrink-0",
+            error ? "nd:bg-destructive/10 nd:text-destructive" : "nd:bg-muted/50 nd:text-muted-foreground"
+          ), children: /* @__PURE__ */ jsx(Upload, { className: "nd:size-4" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "nd:flex-1 nd:min-w-0 nd:text-left", children: [
+            /* @__PURE__ */ jsx("p", { className: cn("nd:text-sm nd:font-medium", error && "nd:text-destructive"), children: multiple ? "Select files" : "Select a file" }),
+            /* @__PURE__ */ jsx("p", { className: "nd:text-xs nd:text-muted-foreground nd:font-normal nd:truncate", children: placeholder })
           ] })
         ]
       }
     ) : (
       /* Selected Files Display */
-      /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border", error ? "border-destructive" : "border-border", disabled && "opacity-50"), children: [
-        !multiple && displayFiles[0] && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-2.5", children: [
-          /* @__PURE__ */ jsx("div", { className: "size-12 rounded-lg overflow-hidden bg-muted/30 flex items-center justify-center shrink-0", children: displayFiles[0].file.mime.startsWith("image/") ? /* @__PURE__ */ jsx("img", { src: createUrl(displayFiles[0], { quality: "low", format: "webp" }), alt: displayFiles[0].file.name, className: "size-full object-cover" }) : getFileIcon(displayFiles[0].file.mime, false, "size-6 text-muted-foreground") }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", children: displayFiles[0].file.name }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: displayFiles[0].file.mime || "File" })
+      /* @__PURE__ */ jsxs("div", { className: cn("nd:rounded-lg nd:border", error ? "nd:border-destructive" : "nd:border-border", disabled && "nd:opacity-50"), children: [
+        !multiple && displayFiles[0] && /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-3 nd:p-2.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "nd:size-12 nd:rounded-lg nd:overflow-hidden nd:bg-muted/30 nd:flex nd:items-center nd:justify-center nd:shrink-0", children: displayFiles[0].file.mime.startsWith("image/") ? /* @__PURE__ */ jsx("img", { src: createUrl(displayFiles[0], { quality: "low", format: "webp" }), alt: displayFiles[0].file.name, className: "nd:size-full nd:object-cover" }) : getFileIcon(displayFiles[0].file.mime, false, "nd:size-6 nd:text-muted-foreground") }),
+          /* @__PURE__ */ jsxs("div", { className: "nd:flex-1 nd:min-w-0", children: [
+            /* @__PURE__ */ jsx("p", { className: "nd:text-sm nd:font-medium nd:truncate", children: displayFiles[0].file.name }),
+            /* @__PURE__ */ jsx("p", { className: "nd:text-xs nd:text-muted-foreground", children: displayFiles[0].file.mime || "File" })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-1 nd:shrink-0", children: [
             /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setIsOpen(true), disabled, children: "Change" }),
-            !disabled && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8", onClick: () => handleRemove(displayFiles[0].id), children: /* @__PURE__ */ jsx(X, { className: "size-4" }) })
+            !disabled && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "nd:size-8", onClick: () => handleRemove(displayFiles[0].id), children: /* @__PURE__ */ jsx(X, { className: "nd:size-4" }) })
           ] })
         ] }),
         multiple && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 border-b bg-muted/20", children: [
-            /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground font-medium", children: [
+          /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:justify-between nd:px-3 nd:py-2 nd:border-b nd:bg-muted/20", children: [
+            /* @__PURE__ */ jsxs("span", { className: "nd:text-xs nd:text-muted-foreground nd:font-medium", children: [
               displayFiles.length,
               " file",
               displayFiles.length !== 1 ? "s" : "",
               " selected"
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-              /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 text-xs", onClick: () => setIsOpen(true), disabled, children: "Add more" }),
-              !disabled && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 text-xs text-muted-foreground", onClick: () => onChange([]), children: "Clear" })
+            /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-1", children: [
+              /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "nd:h-7 nd:text-xs", onClick: () => setIsOpen(true), disabled, children: "Add more" }),
+              !disabled && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "nd:h-7 nd:text-xs nd:text-muted-foreground", onClick: () => onChange([]), children: "Clear" })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "max-h-40 overflow-y-auto divide-y divide-border/50", children: displayFiles.map((file) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2 hover:bg-muted/20", children: [
-            /* @__PURE__ */ jsx("div", { className: "size-8 rounded overflow-hidden bg-muted/30 flex items-center justify-center shrink-0", children: file.file.mime.startsWith("image/") ? /* @__PURE__ */ jsx("img", { src: createUrl(file, { quality: "ultralow", format: "webp" }), alt: file.file.name, className: "size-full object-cover" }) : getFileIcon(file.file.mime, false, "size-4 text-muted-foreground") }),
-            /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm truncate", children: file.file.name }),
-            !disabled && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 shrink-0", onClick: () => handleRemove(file.id), children: /* @__PURE__ */ jsx(X, { className: "size-3.5" }) })
+          /* @__PURE__ */ jsx("div", { className: "nd:max-h-40 nd:overflow-y-auto nd:divide-y nd:divide-border/50", children: displayFiles.map((file) => /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-2.5 nd:px-3 nd:py-2 nd:hover:bg-muted/20", children: [
+            /* @__PURE__ */ jsx("div", { className: "nd:size-8 nd:rounded nd:overflow-hidden nd:bg-muted/30 nd:flex nd:items-center nd:justify-center nd:shrink-0", children: file.file.mime.startsWith("image/") ? /* @__PURE__ */ jsx("img", { src: createUrl(file, { quality: "ultralow", format: "webp" }), alt: file.file.name, className: "nd:size-full nd:object-cover" }) : getFileIcon(file.file.mime, false, "nd:size-4 nd:text-muted-foreground") }),
+            /* @__PURE__ */ jsx("span", { className: "nd:flex-1 nd:text-sm nd:truncate", children: file.file.name }),
+            !disabled && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "nd:size-7 nd:shrink-0", onClick: () => handleRemove(file.id), children: /* @__PURE__ */ jsx(X, { className: "nd:size-3.5" }) })
           ] }, file.id)) })
         ] })
       ] })
     ),
-    error && helperText && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive mt-1.5", children: helperText }),
-    /* @__PURE__ */ jsx(Dialog2, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs(Dialog2Content, { showCloseButton: false, children: [
-      /* @__PURE__ */ jsxs(Dialog2Header, { className: "gap-2", children: [
+    error && helperText && /* @__PURE__ */ jsx("p", { className: "nd:text-xs nd:text-destructive nd:mt-1.5", children: helperText }),
+    /* @__PURE__ */ jsx(Dialog2, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs(Dialog2Content, { showCloseButton: false, className: "nd-drive-root", children: [
+      /* @__PURE__ */ jsxs(Dialog2Header, { className: "nd:gap-2", children: [
         /* @__PURE__ */ jsx(MobileSidebarSheet, {}),
-        /* @__PURE__ */ jsxs(Dialog2Title, { className: "flex-1", children: [
+        /* @__PURE__ */ jsxs(Dialog2Title, { className: "nd:flex-1", children: [
           "Select ",
           multiple ? "Files" : "File"
         ] }),
-        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8", onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsx(X, { className: "size-4" }) })
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "nd:size-8", onClick: () => setIsOpen(false), children: /* @__PURE__ */ jsx(X, { className: "nd:size-4" }) })
       ] }),
-      /* @__PURE__ */ jsxs(Dialog2Body, { className: "flex flex-col md:flex-row", children: [
-        /* @__PURE__ */ jsx("div", { className: "hidden md:flex w-52 lg:w-56 border-r shrink-0", children: /* @__PURE__ */ jsx(ChooserSidebar, {}) }),
-        /* @__PURE__ */ jsx(DriveDndProvider, { children: /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col min-w-0 min-h-0", children: [
-          /* @__PURE__ */ jsx(DriveHeader, { className: "border-b" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b bg-muted/20 dark:bg-muted/10", children: [
-            /* @__PURE__ */ jsx(DrivePathBar, { className: "flex-1" }),
+      /* @__PURE__ */ jsxs(Dialog2Body, { className: "nd:flex nd:flex-col nd:md:flex-row", children: [
+        /* @__PURE__ */ jsx("div", { className: "nd:hidden nd:md:flex nd:w-52 nd:lg:w-56 nd:border-r nd:shrink-0", children: /* @__PURE__ */ jsx(ChooserSidebar, {}) }),
+        /* @__PURE__ */ jsx(DriveDndProvider, { children: /* @__PURE__ */ jsxs("div", { className: "nd:flex-1 nd:flex nd:flex-col nd:min-w-0 nd:min-h-0", children: [
+          /* @__PURE__ */ jsx(DriveHeader, { className: "nd:border-b" }),
+          /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-2 nd:px-3 nd:py-2 nd:border-b nd:bg-muted/20 nd:dark:bg-muted/10", children: [
+            /* @__PURE__ */ jsx(DrivePathBar, { className: "nd:flex-1" }),
             /* @__PURE__ */ jsx(DriveUpload, { compact: true, accept })
           ] }),
-          /* @__PURE__ */ jsx(DriveFileGrid, { mimeFilter: accept, className: "flex-1" })
+          /* @__PURE__ */ jsx(DriveFileGrid, { mimeFilter: accept, className: "nd:flex-1" })
         ] }) })
       ] }),
       /* @__PURE__ */ jsxs(Dialog2Footer, { children: [
@@ -3266,40 +3261,40 @@ var SidebarContent = (props) => {
     setOauthLoading(false);
     setOauthAbort(null);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "w-full h-full flex flex-col bg-muted/5 dark:bg-muted/10", children: [
-    /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-border/50", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "nd:w-full nd:h-full nd:flex nd:flex-col nd:bg-muted/5 nd:dark:bg-muted/10", children: [
+    /* @__PURE__ */ jsx("div", { className: "nd:p-2 nd:border-b nd:border-border/50", children: /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-1", children: [
       isDropdownDisabled ? (
         /* Static display when no accounts and no providers */
-        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center gap-2.5 px-2 h-11 min-w-0", children: [
-          /* @__PURE__ */ jsx("div", { className: "size-7 rounded-md flex items-center justify-center shrink-0 bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400", children: /* @__PURE__ */ jsx(HardDrive, { className: "size-3.5" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: "Local Storage" }),
-            /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: "On this device" })
+        /* @__PURE__ */ jsxs("div", { className: "nd:flex-1 nd:flex nd:items-center nd:gap-2.5 nd:px-2 nd:h-11 nd:min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "nd:size-7 nd:rounded-md nd:flex nd:items-center nd:justify-center nd:shrink-0 nd:bg-emerald-500/10 nd:text-emerald-600 nd:dark:bg-emerald-500/20 nd:dark:text-emerald-400", children: /* @__PURE__ */ jsx(HardDrive, { className: "nd:size-3.5" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:flex-col nd:min-w-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "nd:text-sm nd:font-medium nd:truncate", children: "Local Storage" }),
+            /* @__PURE__ */ jsx("span", { className: "nd:text-[11px] nd:text-muted-foreground nd:truncate", children: "On this device" })
           ] })
         ] })
       ) : /* @__PURE__ */ jsxs(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
-        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "flex-1 min-w-0 justify-between px-2 h-11 hover:bg-muted/50 dark:hover:bg-muted/30", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 text-left min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "nd:flex-1 nd:min-w-0 nd:justify-between nd:px-2 nd:h-11 nd:hover:bg-muted/50 nd:dark:hover:bg-muted/30", children: [
+          /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:items-center nd:gap-2.5 nd:text-left nd:min-w-0 nd:flex-1", children: [
             /* @__PURE__ */ jsx("div", { className: cn(
-              "size-7 rounded-md flex items-center justify-center shrink-0",
-              activeAccountId ? "bg-blue-500/10 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400" : "bg-emerald-500/10 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400"
-            ), children: activeAccountId ? /* @__PURE__ */ jsx(Database, { className: "size-3.5" }) : /* @__PURE__ */ jsx(HardDrive, { className: "size-3.5" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: currentAccountName }),
-              /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground truncate", children: currentAccountEmail })
+              "nd:size-7 nd:rounded-md nd:flex nd:items-center nd:justify-center nd:shrink-0",
+              activeAccountId ? "nd:bg-blue-500/10 nd:text-blue-600 nd:dark:bg-blue-500/20 nd:dark:text-blue-400" : "nd:bg-emerald-500/10 nd:text-emerald-600 nd:dark:bg-emerald-500/20 nd:dark:text-emerald-400"
+            ), children: activeAccountId ? /* @__PURE__ */ jsx(Database, { className: "nd:size-3.5" }) : /* @__PURE__ */ jsx(HardDrive, { className: "nd:size-3.5" }) }),
+            /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:flex-col nd:min-w-0", children: [
+              /* @__PURE__ */ jsx("span", { className: "nd:text-sm nd:font-medium nd:truncate", children: currentAccountName }),
+              /* @__PURE__ */ jsx("span", { className: "nd:text-[11px] nd:text-muted-foreground nd:truncate", children: currentAccountEmail })
             ] })
           ] }),
-          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 text-muted-foreground/60 shrink-0" })
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "nd:size-3.5 nd:text-muted-foreground/60 nd:shrink-0" })
         ] }) }),
-        /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "w-56", align: "start", children: [
-          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide", children: "Storage" }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { className: "nd:w-56", align: "start", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "nd:text-[11px] nd:font-medium nd:text-muted-foreground nd:uppercase nd:tracking-wide", children: "Storage" }),
           /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
             setActiveAccountId(null);
             setCurrentView("BROWSE");
             onNavigate?.();
-          }, className: "gap-2 py-2", children: [
-            /* @__PURE__ */ jsx("span", { className: "flex-1 text-sm", children: "Local Storage" }),
-            activeAccountId === null && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })
+          }, className: "nd:gap-2 nd:py-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "nd:flex-1 nd:text-sm", children: "Local Storage" }),
+            activeAccountId === null && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:text-primary" })
           ] }),
           accounts.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
           accounts.map((account) => /* @__PURE__ */ jsxs(
@@ -3310,13 +3305,13 @@ var SidebarContent = (props) => {
                 setCurrentView("BROWSE");
                 onNavigate?.();
               },
-              className: "gap-2 py-2",
+              className: "nd:gap-2 nd:py-2",
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ jsx("p", { className: "text-sm truncate", children: account.name }),
-                  /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground truncate", children: account.email })
+                /* @__PURE__ */ jsxs("div", { className: "nd:flex-1 nd:min-w-0", children: [
+                  /* @__PURE__ */ jsx("p", { className: "nd:text-sm nd:truncate", children: account.name }),
+                  /* @__PURE__ */ jsx("p", { className: "nd:text-[10px] nd:text-muted-foreground nd:truncate", children: account.email })
                 ] }),
-                activeAccountId === account.id && /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-primary" })
+                activeAccountId === account.id && /* @__PURE__ */ jsx(Check, { className: "nd:size-3.5 nd:text-primary" })
               ]
             },
             account.id
@@ -3324,9 +3319,9 @@ var SidebarContent = (props) => {
           hasAnyProvider && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
             /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
-              /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "gap-2", children: [
-                /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Add Account" })
+              /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { className: "nd:gap-2", children: [
+                /* @__PURE__ */ jsx(Plus, { className: "nd:size-3.5" }),
+                /* @__PURE__ */ jsx("span", { className: "nd:text-sm", children: "Add Account" })
               ] }),
               /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: availableProviders.google && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: openOAuthPopup, children: "Google Drive" }) })
             ] })
@@ -3339,30 +3334,30 @@ var SidebarContent = (props) => {
           {
             variant: "ghost",
             size: "icon",
-            className: "size-9 shrink-0 hover:bg-muted/50 dark:hover:bg-muted/30",
-            children: /* @__PURE__ */ jsx(Settings2, { className: "size-4 text-muted-foreground" })
+            className: "nd:size-9 nd:shrink-0 nd:hover:bg-muted/50 nd:dark:hover:bg-muted/30",
+            children: /* @__PURE__ */ jsx(Settings2, { className: "nd:size-4 nd:text-muted-foreground" })
           }
         ) }),
-        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-40", children: [
-          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs text-muted-foreground truncate", children: currentAccount.name }),
+        /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "nd:w-40", children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "nd:text-xs nd:text-muted-foreground nd:truncate", children: currentAccount.name }),
           /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
           /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => {
             setRenameDialog({ open: true, account: currentAccount });
           }, children: [
-            /* @__PURE__ */ jsx(Pencil, { className: "size-3.5 mr-2" }),
+            /* @__PURE__ */ jsx(Pencil, { className: "nd:size-3.5 nd:mr-2" }),
             "Rename"
           ] }),
           /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: openOAuthPopup, children: [
-            /* @__PURE__ */ jsx(RefreshCw, { className: "size-3.5 mr-2" }),
+            /* @__PURE__ */ jsx(RefreshCw, { className: "nd:size-3.5 nd:mr-2" }),
             "Reconnect"
           ] }),
           /* @__PURE__ */ jsxs(
             DropdownMenuItem,
             {
-              className: "text-destructive focus:text-destructive",
+              className: "nd:text-destructive nd:focus:text-destructive",
               onClick: () => setDeleteDialog({ open: true, account: currentAccount }),
               children: [
-                /* @__PURE__ */ jsx(Trash, { className: "size-3.5 mr-2" }),
+                /* @__PURE__ */ jsx(Trash, { className: "nd:size-3.5 nd:mr-2" }),
                 "Disconnect"
               ]
             }
@@ -3370,21 +3365,21 @@ var SidebarContent = (props) => {
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs("nav", { className: "flex-1 p-2 space-y-0.5", children: [
+    /* @__PURE__ */ jsxs("nav", { className: "nd:flex-1 nd:p-2 nd:space-y-0.5", children: [
       /* @__PURE__ */ jsxs(
         Button,
         {
           variant: "ghost",
           className: cn(
-            "w-full justify-start gap-2.5 h-9 px-2.5 font-medium",
-            currentView !== "TRASH" ? "bg-primary/10 text-primary hover:bg-primary/15 dark:bg-primary/15 dark:hover:bg-primary/20" : "hover:bg-muted/50 dark:hover:bg-muted/30"
+            "nd:w-full nd:justify-start nd:gap-2.5 nd:h-9 nd:px-2.5 nd:font-medium",
+            currentView !== "TRASH" ? "nd:bg-primary/10 nd:text-primary nd:hover:bg-primary/15 nd:dark:bg-primary/15 nd:dark:hover:bg-primary/20" : "nd:hover:bg-muted/50 nd:dark:hover:bg-muted/30"
           ),
           onClick: () => {
             setCurrentView("BROWSE");
             onNavigate?.();
           },
           children: [
-            /* @__PURE__ */ jsx(FolderOpen, { className: "size-4" }),
+            /* @__PURE__ */ jsx(FolderOpen, { className: "nd:size-4" }),
             "My Files"
           ]
         }
@@ -3394,21 +3389,21 @@ var SidebarContent = (props) => {
         {
           variant: "ghost",
           className: cn(
-            "w-full justify-start gap-2.5 h-9 px-2.5 font-medium",
-            currentView === "TRASH" ? "bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/15" : "hover:bg-muted/50 dark:hover:bg-muted/30"
+            "nd:w-full nd:justify-start nd:gap-2.5 nd:h-9 nd:px-2.5 nd:font-medium",
+            currentView === "TRASH" ? "nd:bg-destructive/10 nd:text-destructive nd:hover:bg-destructive/15 nd:dark:bg-destructive/15" : "nd:hover:bg-muted/50 nd:dark:hover:bg-muted/30"
           ),
           onClick: () => {
             setCurrentView("TRASH");
             onNavigate?.();
           },
           children: [
-            /* @__PURE__ */ jsx(Trash2, { className: "size-4" }),
+            /* @__PURE__ */ jsx(Trash2, { className: "nd:size-4" }),
             "Trash"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "p-2.5 border-t border-border/50 bg-background/50 dark:bg-background/30", children: /* @__PURE__ */ jsx(DriveStorageIndicator, {}) }),
+    /* @__PURE__ */ jsx("div", { className: "nd:p-2.5 nd:border-t nd:border-border/50 nd:bg-background/50 nd:dark:bg-background/30", children: /* @__PURE__ */ jsx(DriveStorageIndicator, {}) }),
     /* @__PURE__ */ jsx(
       RenameAccountDialog,
       {
@@ -3428,11 +3423,11 @@ var SidebarContent = (props) => {
         onConfirm: handleDelete
       }
     ),
-    /* @__PURE__ */ jsx(Dialog, { open: oauthLoading, onOpenChange: (open) => !open && cancelOAuth(), children: /* @__PURE__ */ jsx(DialogContent, { className: "sm:max-w-xs", showCloseButton: false, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 py-4", children: [
-      /* @__PURE__ */ jsx(Loader2, { className: "size-8 text-primary animate-spin" }),
-      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx(DialogTitle, { className: "text-base", children: "Connecting..." }),
-        /* @__PURE__ */ jsx(DialogDescription, { className: "text-sm mt-1", children: "Preparing Google authentication" })
+    /* @__PURE__ */ jsx(Dialog, { open: oauthLoading, onOpenChange: (open) => !open && cancelOAuth(), children: /* @__PURE__ */ jsx(DialogContent, { className: "nd:sm:max-w-xs", showCloseButton: false, children: /* @__PURE__ */ jsxs("div", { className: "nd:flex nd:flex-col nd:items-center nd:gap-4 nd:py-4", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "nd:size-8 nd:text-primary nd:animate-spin" }),
+      /* @__PURE__ */ jsxs("div", { className: "nd:text-center", children: [
+        /* @__PURE__ */ jsx(DialogTitle, { className: "nd:text-base", children: "Connecting..." }),
+        /* @__PURE__ */ jsx(DialogDescription, { className: "nd:text-sm nd:mt-1", children: "Preparing Google authentication" })
       ] }),
       /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", onClick: cancelOAuth, children: "Cancel" })
     ] }) }) })
@@ -3441,10 +3436,10 @@ var SidebarContent = (props) => {
 var DriveSidebar = ({ className }) => {
   const [sheetOpen, setSheetOpen] = useState(false);
   return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: [
-    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "size-9", "aria-label": "Open menu", children: /* @__PURE__ */ jsx(Menu, { className: "size-5" }) }) }),
-    /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-70 sm:w-80 p-0", hideCloseButton: true, children: [
-      /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
-      /* @__PURE__ */ jsx(SheetDescription, { className: "sr-only", children: "Storage accounts and navigation" }),
+    /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "nd:size-9", "aria-label": "Open menu", children: /* @__PURE__ */ jsx(Menu, { className: "nd:size-5" }) }) }),
+    /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "nd:w-70 nd:sm:w-80 nd:p-0", hideCloseButton: true, children: [
+      /* @__PURE__ */ jsx(SheetTitle, { className: "nd:sr-only", children: "Navigation Menu" }),
+      /* @__PURE__ */ jsx(SheetDescription, { className: "nd:sr-only", children: "Storage accounts and navigation" }),
       /* @__PURE__ */ jsx(SidebarContent, { onNavigate: () => setSheetOpen(false) })
     ] })
   ] }) });
@@ -3649,47 +3644,47 @@ var DriveExplorer = (props) => {
   const enableDrag = currentView === "BROWSE";
   const stateContent = (() => {
     if (isLoading && items.length === 0) {
-      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12 flex-1", children: /* @__PURE__ */ jsx(Loader2, { className: "size-6 animate-spin text-muted-foreground" }) });
+      return /* @__PURE__ */ jsx("div", { className: "nd:flex nd:items-center nd:justify-center nd:py-12 nd:flex-1", children: /* @__PURE__ */ jsx(Loader2, { className: "nd:size-6 nd:animate-spin nd:text-muted-foreground" }) });
     }
     if (error) {
-      return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-12 text-destructive bg-destructive/10 rounded-lg flex-1", children: error });
+      return /* @__PURE__ */ jsx("div", { className: "nd:flex nd:items-center nd:justify-center nd:p-12 nd:text-destructive nd:bg-destructive/10 nd:rounded-lg nd:flex-1", children: error });
     }
     if (processedItems.length === 0) {
       return /* @__PURE__ */ jsxs(ContextMenu, { children: [
-        /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col items-center justify-center py-12 text-center flex-1", className), children: [
-          /* @__PURE__ */ jsx("div", { className: "size-12 rounded-full bg-muted flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx(Folder, { className: "size-6 text-muted-foreground" }) }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: currentView === "SEARCH" ? "No files match your search" : currentView === "TRASH" ? "Trash is empty" : "No files found" })
+        /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("nd:flex nd:flex-col nd:items-center nd:justify-center nd:py-12 nd:text-center nd:flex-1", className), children: [
+          /* @__PURE__ */ jsx("div", { className: "nd:size-12 nd:rounded-full nd:bg-muted nd:flex nd:items-center nd:justify-center nd:mb-3", children: /* @__PURE__ */ jsx(Folder, { className: "nd:size-6 nd:text-muted-foreground" }) }),
+          /* @__PURE__ */ jsx("p", { className: "nd:text-sm nd:text-muted-foreground", children: currentView === "SEARCH" ? "No files match your search" : currentView === "TRASH" ? "Trash is empty" : "No files found" })
         ] }) }),
         /* @__PURE__ */ jsx(ContextMenuContent, { children: currentView === "BROWSE" ? /* @__PURE__ */ jsxs(ContextMenuItem, { onClick: () => setDialogs((prev) => ({ ...prev, newFolder: true })), children: [
-          /* @__PURE__ */ jsx(FolderPlus, { className: "mr-2 size-4" }),
+          /* @__PURE__ */ jsx(FolderPlus, { className: "nd:mr-2 nd:size-4" }),
           " New Folder"
-        ] }) : /* @__PURE__ */ jsx("div", { className: "px-2 py-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No actions available" }) }) })
+        ] }) : /* @__PURE__ */ jsx("div", { className: "nd:px-2 nd:py-6 nd:text-center", children: /* @__PURE__ */ jsx("p", { className: "nd:text-xs nd:text-muted-foreground", children: "No actions available" }) }) })
       ] });
     }
     return null;
   })();
-  return /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full w-full overflow-hidden bg-background/50 dark:bg-background/30 relative", children: [
+  return /* @__PURE__ */ jsx(DndContext, { sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs("div", { className: "nd-drive-root nd:flex nd:flex-col nd:h-full nd:w-full nd:overflow-hidden nd:bg-background/50 nd:dark:bg-background/30 nd:relative", children: [
     /* @__PURE__ */ jsx(DriveContentProgress, {}),
-    /* @__PURE__ */ jsxs("div", { className: "h-12 px-3 sm:px-4 border-b bg-background/95 dark:bg-background/80 backdrop-blur-sm flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx(DriveSidebar, { className: "lg:hidden" }),
-      /* @__PURE__ */ jsx(DrivePathBar, { className: "hidden lg:flex flex-1" }),
+    /* @__PURE__ */ jsxs("div", { className: "nd:h-12 nd:px-3 nd:sm:px-4 nd:border-b nd:bg-background/95 nd:dark:bg-background/80 nd:backdrop-blur-sm nd:flex nd:items-center nd:gap-3", children: [
+      /* @__PURE__ */ jsx(DriveSidebar, { className: "nd:lg:hidden" }),
+      /* @__PURE__ */ jsx(DrivePathBar, { className: "nd:hidden nd:lg:flex nd:flex-1" }),
       /* @__PURE__ */ jsx(DriveUpload, { compact: true, accept: mimeFilter })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "lg:hidden px-3 py-2 border-b bg-background/95 dark:bg-background/80 backdrop-blur-sm", children: /* @__PURE__ */ jsx(DrivePathBar, {}) }),
+    /* @__PURE__ */ jsx("div", { className: "nd:lg:hidden nd:px-3 nd:py-2 nd:border-b nd:bg-background/95 nd:dark:bg-background/80 nd:backdrop-blur-sm", children: /* @__PURE__ */ jsx(DrivePathBar, {}) }),
     stateContent || /* @__PURE__ */ jsxs(ContextMenu, { children: [
-      /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("flex-1 overflow-y-auto min-h-0 container mx-auto p-2 sm:p-3 md:p-4", className), children: [
-        /* @__PURE__ */ jsx("div", { className: "space-y-4 sm:space-y-6 pb-8 sm:pb-12", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          groupBy !== "NONE" && /* @__PURE__ */ jsxs("h3", { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("nd:flex-1 nd:overflow-y-auto nd:min-h-0 nd:container nd:mx-auto nd:p-2 nd:sm:p-3 nd:md:p-4", className), children: [
+        /* @__PURE__ */ jsx("div", { className: "nd:space-y-4 nd:sm:space-y-6 nd:pb-8 nd:sm:pb-12", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxs("div", { className: "nd:space-y-3", children: [
+          groupBy !== "NONE" && /* @__PURE__ */ jsxs("h3", { className: "nd:text-sm nd:font-medium nd:text-muted-foreground nd:flex nd:items-center nd:gap-2", children: [
             groupName,
             " ",
-            /* @__PURE__ */ jsxs("span", { className: "text-xs opacity-50", children: [
+            /* @__PURE__ */ jsxs("span", { className: "nd:text-xs nd:opacity-50", children: [
               "(",
               groupItems.length,
               ")"
             ] })
           ] }),
           /* @__PURE__ */ jsx(SortableContext, { items: groupItems.map((i) => i.id), strategy: rectSortingStrategy, disabled: !enableDrag, children: /* @__PURE__ */ jsx("div", { className: cn(
-            viewMode === "GRID" ? "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-2 sm:gap-3 md:gap-4" : "flex flex-col gap-1"
+            viewMode === "GRID" ? "nd:grid nd:grid-cols-2 nd:sm:grid-cols-3 nd:md:grid-cols-4 nd:lg:grid-cols-5 nd:xl:grid-cols-6 2nd:xl:grid-cols-7 nd:gap-2 nd:sm:gap-3 nd:md:gap-4" : "nd:flex nd:flex-col nd:gap-1"
           ), children: groupItems.map((item) => {
             const isSelected = selectedFileIds.includes(item.id);
             const isFolder = item.information.type === "FOLDER";
@@ -3703,10 +3698,10 @@ var DriveExplorer = (props) => {
                 "div",
                 {
                   className: cn(
-                    "group relative cursor-pointer transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
-                    viewMode === "GRID" ? "flex flex-col rounded-xl border bg-card dark:bg-card/50 hover:bg-accent/50 dark:hover:bg-accent/30 hover:shadow-sm overflow-hidden" : "flex items-center p-2 rounded-lg hover:bg-accent/50 dark:hover:bg-accent/30 gap-3 border border-transparent hover:border-border",
-                    isSelected && "ring-2 ring-primary border-primary/50 bg-accent/30 dark:bg-accent/20",
-                    isDragOver && "ring-2 ring-primary border-primary scale-[1.02] bg-primary/10 shadow-lg transition-transform"
+                    "group nd:relative nd:cursor-pointer nd:transition-all nd:focus:outline-none nd:focus:ring-2 nd:focus:ring-primary nd:focus:ring-offset-2",
+                    viewMode === "GRID" ? "nd:flex nd:flex-col nd:rounded-xl nd:border nd:bg-card nd:dark:bg-card/50 nd:hover:bg-accent/50 nd:dark:hover:bg-accent/30 nd:hover:shadow-sm nd:overflow-hidden" : "nd:flex nd:items-center nd:p-2 nd:rounded-lg nd:hover:bg-accent/50 nd:dark:hover:bg-accent/30 nd:gap-3 nd:border nd:border-transparent nd:hover:border-border",
+                    isSelected && "nd:ring-2 nd:ring-primary nd:border-primary/50 nd:bg-accent/30 nd:dark:bg-accent/20",
+                    isDragOver && "nd:ring-2 nd:ring-primary nd:border-primary nd:scale-[1.02] nd:bg-primary/10 nd:shadow-lg nd:transition-transform"
                   ),
                   onClick: (e) => handleItemClick(e, item),
                   onTouchEnd: (e) => {
@@ -3717,34 +3712,34 @@ var DriveExplorer = (props) => {
                   role: "button",
                   tabIndex: 0,
                   children: viewMode === "GRID" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsxs("div", { className: "aspect-square w-full bg-muted/20 dark:bg-muted/10 flex items-center justify-center overflow-hidden relative", children: [
-                      isThumbnailable ? /* @__PURE__ */ jsx("img", { src: thumbnailUrl, alt: item.name, className: "size-full object-contain transition-transform group-hover:scale-105 duration-300", loading: "lazy" }) : /* @__PURE__ */ jsx("div", { className: "transition-transform group-hover:scale-110 duration-200", children: getFileIcon(item.information.type === "FILE" ? item.information.mime : "", isFolder, "size-10 text-muted-foreground/70") }),
-                      isSelected && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 size-5 bg-primary rounded-full flex items-center justify-center shadow-sm animate-in zoom-in-50", children: /* @__PURE__ */ jsx("div", { className: "size-2 bg-primary-foreground rounded-full" }) }),
-                      isFolder && currentView === "BROWSE" && /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 right-2 lg:hidden size-6 bg-primary/90 rounded-full flex items-center justify-center shadow-md", children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 text-primary-foreground" }) })
+                    /* @__PURE__ */ jsxs("div", { className: "nd:aspect-square nd:w-full nd:bg-muted/20 nd:dark:bg-muted/10 nd:flex nd:items-center nd:justify-center nd:overflow-hidden nd:relative", children: [
+                      isThumbnailable ? /* @__PURE__ */ jsx("img", { src: thumbnailUrl, alt: item.name, className: "nd:size-full nd:object-contain nd:transition-transform group-nd:hover:scale-105 nd:duration-300", loading: "lazy" }) : /* @__PURE__ */ jsx("div", { className: "nd:transition-transform group-nd:hover:scale-110 nd:duration-200", children: getFileIcon(item.information.type === "FILE" ? item.information.mime : "", isFolder, "nd:size-10 nd:text-muted-foreground/70") }),
+                      isSelected && /* @__PURE__ */ jsx("div", { className: "nd:absolute nd:top-2 nd:right-2 nd:size-5 nd:bg-primary nd:rounded-full nd:flex nd:items-center nd:justify-center nd:shadow-sm nd:animate-in nd:zoom-in-50", children: /* @__PURE__ */ jsx("div", { className: "nd:size-2 nd:bg-primary-foreground nd:rounded-full" }) }),
+                      isFolder && currentView === "BROWSE" && /* @__PURE__ */ jsx("div", { className: "nd:absolute nd:bottom-2 nd:right-2 nd:lg:hidden nd:size-6 nd:bg-primary/90 nd:rounded-full nd:flex nd:items-center nd:justify-center nd:shadow-md", children: /* @__PURE__ */ jsx(ChevronRight, { className: "nd:size-3.5 nd:text-primary-foreground" }) })
                     ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "p-2.5", children: [
-                      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium truncate", title: item.name, children: item.name }),
-                      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: isFolder ? "Folder" : formatBytes(item.information.type === "FILE" ? item.information.sizeInBytes : 0) })
+                    /* @__PURE__ */ jsxs("div", { className: "nd:p-2.5", children: [
+                      /* @__PURE__ */ jsx("p", { className: "nd:text-sm nd:font-medium nd:truncate", title: item.name, children: item.name }),
+                      /* @__PURE__ */ jsx("p", { className: "nd:text-xs nd:text-muted-foreground nd:mt-0.5", children: isFolder ? "Folder" : formatBytes(item.information.type === "FILE" ? item.information.sizeInBytes : 0) })
                     ] })
                   ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx("div", { className: "size-9 shrink-0 rounded-md overflow-hidden bg-muted/40 dark:bg-muted/20 flex items-center justify-center border", children: isThumbnailable ? /* @__PURE__ */ jsx("img", { src: thumbnailUrl, alt: item.name, className: "size-full object-contain", loading: "lazy" }) : getFileIcon(item.information.type === "FILE" ? item.information.mime : "", isFolder, "size-4 text-muted-foreground") }),
-                    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate flex-1", title: item.name, children: item.name }),
-                    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground w-20 text-right shrink-0", children: isFolder ? "-" : formatBytes(item.information.type === "FILE" ? item.information.sizeInBytes : 0) }),
-                    isFolder && currentView === "BROWSE" && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground lg:hidden shrink-0" })
+                    /* @__PURE__ */ jsx("div", { className: "nd:size-9 nd:shrink-0 nd:rounded-md nd:overflow-hidden nd:bg-muted/40 nd:dark:bg-muted/20 nd:flex nd:items-center nd:justify-center nd:border", children: isThumbnailable ? /* @__PURE__ */ jsx("img", { src: thumbnailUrl, alt: item.name, className: "nd:size-full nd:object-contain", loading: "lazy" }) : getFileIcon(item.information.type === "FILE" ? item.information.mime : "", isFolder, "nd:size-4 nd:text-muted-foreground") }),
+                    /* @__PURE__ */ jsx("span", { className: "nd:text-sm nd:font-medium nd:truncate nd:flex-1", title: item.name, children: item.name }),
+                    /* @__PURE__ */ jsx("span", { className: "nd:text-xs nd:text-muted-foreground nd:w-20 nd:text-right nd:shrink-0", children: isFolder ? "-" : formatBytes(item.information.type === "FILE" ? item.information.sizeInBytes : 0) }),
+                    isFolder && currentView === "BROWSE" && /* @__PURE__ */ jsx(ChevronRight, { className: "nd:size-4 nd:text-muted-foreground nd:lg:hidden nd:shrink-0" })
                   ] })
                 }
               ) }),
               /* @__PURE__ */ jsx(ContextMenuContent, { children: currentView === "TRASH" ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsxs(ContextMenuItem, { onClick: () => restoreItem(item.id), children: [
-                  /* @__PURE__ */ jsx(RotateCcw, { className: "mr-2 size-4" }),
+                  /* @__PURE__ */ jsx(RotateCcw, { className: "nd:mr-2 nd:size-4" }),
                   " Restore"
                 ] }),
                 /* @__PURE__ */ jsx(ContextMenuSeparator, {}),
-                /* @__PURE__ */ jsxs(ContextMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => {
+                /* @__PURE__ */ jsxs(ContextMenuItem, { className: "nd:text-destructive nd:focus:text-destructive", onClick: () => {
                   setItemToDelete(item);
                   setDialogs((prev) => ({ ...prev, delete: true }));
                 }, children: [
-                  /* @__PURE__ */ jsx(Trash2, { className: "mr-2 size-4" }),
+                  /* @__PURE__ */ jsx(Trash2, { className: "nd:mr-2 nd:size-4" }),
                   " Delete Forever"
                 ] })
               ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -3752,30 +3747,30 @@ var DriveExplorer = (props) => {
                   setItemToRename(item);
                   setDialogs((prev) => ({ ...prev, rename: true }));
                 }, children: [
-                  /* @__PURE__ */ jsx(Pencil, { className: "mr-2 size-4" }),
+                  /* @__PURE__ */ jsx(Pencil, { className: "nd:mr-2 nd:size-4" }),
                   " Rename"
                 ] }),
                 /* @__PURE__ */ jsx(ContextMenuSeparator, {}),
-                /* @__PURE__ */ jsxs(ContextMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => {
+                /* @__PURE__ */ jsxs(ContextMenuItem, { className: "nd:text-destructive nd:focus:text-destructive", onClick: () => {
                   setItemToDelete(item);
                   setDialogs((prev) => ({ ...prev, delete: true }));
                 }, children: [
-                  /* @__PURE__ */ jsx(Trash2, { className: "mr-2 size-4" }),
+                  /* @__PURE__ */ jsx(Trash2, { className: "nd:mr-2 nd:size-4" }),
                   " Delete"
                 ] })
               ] }) })
             ] }) }, item.id);
           }) }) })
         ] }, groupName)) }),
-        hasMore && /* @__PURE__ */ jsxs("div", { ref: observerTarget, className: "flex justify-center py-4", children: [
-          isLoadingMore && /* @__PURE__ */ jsx(Loader2, { className: "size-6 animate-spin text-muted-foreground" }),
-          !isLoadingMore && /* @__PURE__ */ jsx("div", { className: "h-4 w-full" })
+        hasMore && /* @__PURE__ */ jsxs("div", { ref: observerTarget, className: "nd:flex nd:justify-center nd:py-4", children: [
+          isLoadingMore && /* @__PURE__ */ jsx(Loader2, { className: "nd:size-6 nd:animate-spin nd:text-muted-foreground" }),
+          !isLoadingMore && /* @__PURE__ */ jsx("div", { className: "nd:h-4 nd:w-full" })
         ] })
       ] }) }),
       /* @__PURE__ */ jsx(ContextMenuContent, { children: currentView === "BROWSE" ? /* @__PURE__ */ jsxs(ContextMenuItem, { onClick: () => setDialogs((prev) => ({ ...prev, newFolder: true })), children: [
-        /* @__PURE__ */ jsx(FolderPlus, { className: "mr-2 size-4" }),
+        /* @__PURE__ */ jsx(FolderPlus, { className: "nd:mr-2 nd:size-4" }),
         " New Folder"
-      ] }) : /* @__PURE__ */ jsx("div", { className: "px-2 py-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "No actions available" }) }) })
+      ] }) : /* @__PURE__ */ jsx("div", { className: "nd:px-2 nd:py-6 nd:text-center", children: /* @__PURE__ */ jsx("p", { className: "nd:text-xs nd:text-muted-foreground", children: "No actions available" }) }) })
     ] }),
     /* @__PURE__ */ jsx(
       CreateFolderDialog,