@underverse-ui/underverse 1.0.83 → 1.0.85

package/AGENTS.md

@@ -51,7 +51,7 @@ import { OverlayScrollbarProvider, ScrollArea, DataTable } from "@underverse-ui/
 export function App() {
   return (
     <OverlayScrollbarProvider theme="os-theme-underverse" autoHide="leave">
-      <ScrollArea className="h-56" useOverlayScrollbar />
+      <ScrollArea className="h-56 rounded-xl border border-border" useOverlayScrollbar />
       <DataTable columns={columns} data={rows} useOverlayScrollbar />
     </OverlayScrollbarProvider>
   );

package/README.md

@@ -147,7 +147,7 @@ import { OverlayScrollbarProvider, ScrollArea, DataTable } from "@underverse-ui/
 function App() {
   return (
     <OverlayScrollbarProvider theme="os-theme-underverse" autoHide="leave">
-      <ScrollArea className="h-56" useOverlayScrollbar>
+      <ScrollArea className="h-56 rounded-xl border border-border" useOverlayScrollbar>
         {/* long content */}
       </ScrollArea>
 
@@ -183,6 +183,9 @@ Provider props:
 Component-level enable flags:
 
 - `ScrollArea`: `useOverlayScrollbar?: boolean` (default `false`)
+  - `className` styles the outer wrapper
+  - `contentClassName` styles the scroll viewport
+  - set border/radius explicitly; the primitive no longer hardcodes rounded corners
 - `Table`: `useOverlayScrollbar?: boolean` (default `false`)
 - `DataTable`: `useOverlayScrollbar?: boolean` (default `false`)
 - `Combobox`: `useOverlayScrollbar?: boolean` (default `false`)

package/agent-recipes.json

@@ -26,7 +26,7 @@
     {
       "id": "overlay-scrollbar-provider",
       "title": "Enable overlay scrollbars (opt-in)",
-      "code": "import \"overlayscrollbars/overlayscrollbars.css\";\nimport { OverlayScrollbarProvider, ScrollArea } from \"@underverse-ui/underverse\";\n\nexport function App(){\n  return (\n    <OverlayScrollbarProvider theme=\"os-theme-underverse\" autoHide=\"leave\">\n      <ScrollArea className=\"h-56\" useOverlayScrollbar>{/* content */}</ScrollArea>\n    </OverlayScrollbarProvider>\n  );\n}\n"
+      "code": "import \"overlayscrollbars/overlayscrollbars.css\";\nimport { OverlayScrollbarProvider, ScrollArea } from \"@underverse-ui/underverse\";\n\nexport function App(){\n  return (\n    <OverlayScrollbarProvider theme=\"os-theme-underverse\" autoHide=\"leave\">\n      <ScrollArea className=\"h-56 rounded-xl border border-border\" useOverlayScrollbar>{/* content */}</ScrollArea>\n    </OverlayScrollbarProvider>\n  );\n}\n"
     },
     {
       "id": "overlay-scrollbar-custom-component",

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.83",
+  "version": "1.0.85",
   "sourceEntry": "src/index.ts",
   "totalExports": 225,
   "exports": [

package/dist/index.cjs

@@ -5493,9 +5493,10 @@ var ToastComponent = ({ toast, onRemove }) => {
     "div",
     {
       className: cn(
-        "relative w-80 rounded-xl border backdrop-blur-md transition-all duration-300 pointer-events-auto overflow-hidden",
+        "relative w-80 rounded-xl border backdrop-blur-md transition-all duration-300 pointer-events-auto",
         "bg-card shadow-xl",
         "animate-in slide-in-from-right-full",
+        toast.overflowHidden !== false && "overflow-hidden",
         config.containerClassName,
         isVisible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
       ),
@@ -6341,7 +6342,18 @@ var variantConfig = {
     accentBarClassName: "bg-destructive"
   }
 };
-var Alert = ({ title, description, variant = "default", className, icon, dismissible = false, onClose, actions, closeAriaLabel }) => {
+var Alert = ({
+  title,
+  description,
+  variant = "default",
+  className,
+  icon,
+  dismissible = false,
+  onClose,
+  actions,
+  closeAriaLabel,
+  overflowHidden = true
+}) => {
   const [open, setOpen] = (0, import_react12.useState)(true);
   const t = useSmartTranslations("Common");
   if (!open) return null;
@@ -6355,9 +6367,10 @@ var Alert = ({ title, description, variant = "default", className, icon, dismiss
     "div",
     {
       className: cn(
-        "relative w-full rounded-r-xl border border-l-0 overflow-hidden",
+        "relative w-full rounded-r-xl border border-l-0",
         "flex items-start gap-3 p-4 pl-5",
         "backdrop-blur-md",
+        overflowHidden && "overflow-hidden",
         config.containerClassName,
         className
       ),
@@ -7934,19 +7947,23 @@ var variantClasses2 = {
   accent: "bg-accent/10"
 };
 var ScrollArea = (0, import_react17.forwardRef)(
-  ({ className, contentClassName, children, variant = "default", outlined = false, useOverlayScrollbar = false, ...props }, ref) => {
+  ({
+    className,
+    contentClassName,
+    children,
+    variant = "default",
+    outlined = false,
+    overflowHidden = true,
+    useOverlayScrollbar = false,
+    ...props
+  }, ref) => {
     const viewportRef = (0, import_react17.useRef)(null);
     useOverlayScrollbarTarget(viewportRef, { enabled: useOverlayScrollbar });
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "div",
       {
         ref,
-        className: cn(
-          "relative overflow-hidden rounded-2xl md:rounded-3xl",
-          variantClasses2[variant],
-          outlined && "border border-border/60",
-          className
-        ),
+        className: cn("relative", variantClasses2[variant], outlined && "border border-border/60", overflowHidden && "overflow-hidden", className),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref: viewportRef, className: cn("h-full w-full overflow-y-auto scroll-area-viewport", contentClassName), children })
       }
@@ -7959,13 +7976,13 @@ ScrollArea.displayName = "ScrollArea";
 var import_react18 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var OverlayScrollArea = (0, import_react18.forwardRef)(
-  ({ className, viewportClassName, viewportProps, enabled = true, overlayScrollbarOptions, children, ...props }, ref) => {
+  ({ className, viewportClassName, viewportProps, enabled = true, overflowHidden = true, overlayScrollbarOptions, children, ...props }, ref) => {
     const viewportRef = (0, import_react18.useRef)(null);
     useOverlayScrollbarTarget(viewportRef, {
       enabled,
       ...overlayScrollbarOptions
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref, className: cn("relative overflow-hidden", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { ref, className: cn("relative", overflowHidden && "overflow-hidden", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         ref: viewportRef,
@@ -13733,6 +13750,7 @@ function CalendarTimeline({
   dayEventMaxWidth,
   monthEventStyle = "span",
   monthEventMaxWidth,
+  overflowHidden = true,
   dayTimeStepMinutes = 60,
   enableEventTooltips = true,
   dayHeaderMode = "full",
@@ -14795,9 +14813,10 @@ function CalendarTimeline({
     "div",
     {
       className: cn(
-        "rounded-2xl md:rounded-3xl overflow-hidden bg-card text-card-foreground backdrop-blur-sm",
+        "rounded-2xl md:rounded-3xl bg-card text-card-foreground backdrop-blur-sm",
         "border border-border/50 shadow-sm md:hover:shadow-md",
         "transition-[transform,box-shadow,border-color,background-color] duration-300 ease-soft",
+        overflowHidden && "overflow-hidden",
         densityClass,
         className
       ),
@@ -18962,6 +18981,7 @@ var ListRoot = React46.forwardRef(
     className,
     itemClassName,
     // New prop
+    overflowHidden = true,
     children,
     ...rest
   }, ref) => {
@@ -18975,21 +18995,36 @@ var ListRoot = React46.forwardRef(
       bordered: "border border-border/50 rounded-2xl md:rounded-3xl max-md:rounded-xl",
       card: "rounded-2xl md:rounded-3xl bg-card shadow-md border border-border/50 max-md:rounded-xl max-md:shadow-sm",
       flush: "",
-      striped: "rounded-2xl md:rounded-3xl border border-border/50 overflow-hidden max-md:rounded-xl"
+      striped: "rounded-2xl md:rounded-3xl border border-border/50 max-md:rounded-xl"
     };
     if (loading2) {
       return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         Comp,
         {
           ref,
-          className: cn("group/list", variantClasses3[variant], inset && "p-1.5 md:p-2 max-md:p-1", divided && "divide-y divide-border/60", className),
+          className: cn(
+            "group/list",
+            variantClasses3[variant],
+            variant === "striped" && overflowHidden && "overflow-hidden",
+            inset && "p-1.5 md:p-2 max-md:p-1",
+            divided && "divide-y divide-border/60",
+            className
+          ),
           ...rest,
           children: Array.from({ length: loadingCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ListItemSkeleton, { size }, i))
         }
       );
     }
     if (!hasChildren && emptyText) {
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Comp, { ref, className: cn("group/list", variantClasses3[variant], inset && "p-1.5 md:p-2 max-md:p-1", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText }) });
+      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        Comp,
+        {
+          ref,
+          className: cn("group/list", variantClasses3[variant], variant === "striped" && overflowHidden && "overflow-hidden", inset && "p-1.5 md:p-2 max-md:p-1", className),
+          ...rest,
+          children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "text-center py-8 text-muted-foreground text-sm", children: emptyText })
+        }
+      );
     }
     return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       Comp,
@@ -18998,6 +19033,7 @@ var ListRoot = React46.forwardRef(
         className: cn(
           "group/list",
           variantClasses3[variant],
+          variant === "striped" && overflowHidden && "overflow-hidden",
           inset && "p-1.5 md:p-2 max-md:p-1",
           divided && "divide-y divide-border/60",
           variant === "striped" && "[&>*:nth-child(even)]:bg-muted/30",
@@ -20328,7 +20364,8 @@ var MusicPlayer = ({
   playlist = DEFAULT_PLAYLIST,
   autoPlay = false,
   showPlaylist: initialShowPlaylist = true,
-  className = ""
+  className = "",
+  overflowHidden = true
 }) => {
   const [currentSongIndex, setCurrentSongIndex] = (0, import_react26.useState)(0);
   const [isPlaying, setIsPlaying] = (0, import_react26.useState)(false);
@@ -20430,108 +20467,116 @@ var MusicPlayer = ({
       }
     }
   }, [currentSongIndex, currentSong.startTime, isPlaying]);
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: `underverse-music-player bg-card dark:bg-card border border-border/50 rounded-2xl shadow-2xl overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("audio", { ref: audioRef, src: currentSong.audioUrl, onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleLoadedMetadata, onEnded: playNext }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "p-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "text-center mb-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "w-48 h-48 mx-auto mb-4 bg-primary/10 dark:bg-primary/20 border border-primary/30 rounded-2xl shadow-lg flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-6xl", children: "\u{1F3B5}" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h2", { className: "text-2xl font-bold text-foreground mb-1", children: currentSong.title }),
-        currentSong.artist && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-muted-foreground", children: currentSong.artist })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mb-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-          "input",
-          {
-            type: "range",
-            min: "0",
-            max: duration || 0,
-            value: currentTime,
-            onChange: handleSeek,
-            className: "w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer slider"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex justify-between text-sm text-muted-foreground mt-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: formatTime3(currentTime) }),
-          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: formatTime3(duration) })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center justify-center gap-4 mb-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-          "button",
-          {
-            onClick: playPrevious,
-            className: "w-12 h-12 flex items-center justify-center rounded-full bg-secondary hover:bg-secondary/80 transition-colors text-secondary-foreground",
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.SkipBack, { size: 24 })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-          "button",
-          {
-            onClick: togglePlay,
-            className: "w-16 h-16 flex items-center justify-center rounded-full bg-primary hover:bg-primary/90 transition-colors text-primary-foreground shadow-lg",
-            children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.Pause, { size: 32 }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.Play, { size: 32, className: "ml-1" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-          "button",
-          {
-            onClick: playNext,
-            className: "w-12 h-12 flex items-center justify-center rounded-full bg-secondary hover:bg-secondary/80 transition-colors text-secondary-foreground",
-            children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.SkipForward, { size: 24 })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-3 mb-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { onClick: toggleMute, className: "text-foreground hover:text-primary transition-colors", children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.VolumeX, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.Volume2, { size: 20 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-          "input",
-          {
-            type: "range",
-            min: "0",
-            max: "1",
-            step: "0.01",
-            value: volume,
-            onChange: handleVolumeChange,
-            className: "flex-1 h-2 bg-muted rounded-lg appearance-none cursor-pointer"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
-        "button",
-        {
-          onClick: () => setShowPlaylist(!showPlaylist),
-          className: "flex items-center gap-2 px-4 py-2 bg-secondary hover:bg-secondary/80 rounded-lg text-secondary-foreground transition-colors",
-          children: [
-            showPlaylist ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.X, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.List, { size: 20 }),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: showPlaylist ? "Hide Playlist" : "Show Playlist" })
-          ]
-        }
-      ) })
-    ] }),
-    showPlaylist && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "bg-muted/50 backdrop-blur-sm max-h-96 overflow-y-auto border-t border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "p-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("h3", { className: "text-lg font-semibold text-foreground mb-3", children: [
-        "Playlist (",
-        playlist.length,
-        " songs)"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "space-y-2", children: playlist.map((song, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
-        "div",
-        {
-          onClick: () => playSong(index),
-          className: `flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all ${index === currentSongIndex ? "bg-primary/20 border border-primary shadow-lg" : "bg-secondary/30 hover:bg-secondary/50"}`,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "shrink-0 w-8 h-8 flex items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-semibold", children: index === currentSongIndex && isPlaying ? "\u25B6" : index + 1 }),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-foreground font-medium truncate", children: song.title }),
-              song.artist && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-muted-foreground text-sm truncate", children: song.artist })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-muted-foreground text-sm shrink-0", children: song.duration })
-          ]
-        },
-        song.id
-      )) })
-    ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("style", { children: `
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    "div",
+    {
+      className: [
+        "underverse-music-player bg-card dark:bg-card border border-border/50 rounded-2xl shadow-2xl",
+        overflowHidden ? "overflow-hidden" : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("audio", { ref: audioRef, src: currentSong.audioUrl, onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleLoadedMetadata, onEnded: playNext }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "p-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "text-center mb-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "w-48 h-48 mx-auto mb-4 bg-primary/10 dark:bg-primary/20 border border-primary/30 rounded-2xl shadow-lg flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-6xl", children: "\u{1F3B5}" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("h2", { className: "text-2xl font-bold text-foreground mb-1", children: currentSong.title }),
+            currentSong.artist && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-muted-foreground", children: currentSong.artist })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "mb-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "input",
+              {
+                type: "range",
+                min: "0",
+                max: duration || 0,
+                value: currentTime,
+                onChange: handleSeek,
+                className: "w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer slider"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex justify-between text-sm text-muted-foreground mt-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: formatTime3(currentTime) }),
+              /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: formatTime3(duration) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center justify-center gap-4 mb-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "button",
+              {
+                onClick: playPrevious,
+                className: "w-12 h-12 flex items-center justify-center rounded-full bg-secondary hover:bg-secondary/80 transition-colors text-secondary-foreground",
+                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.SkipBack, { size: 24 })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "button",
+              {
+                onClick: togglePlay,
+                className: "w-16 h-16 flex items-center justify-center rounded-full bg-primary hover:bg-primary/90 transition-colors text-primary-foreground shadow-lg",
+                children: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.Pause, { size: 32 }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.Play, { size: 32, className: "ml-1" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "button",
+              {
+                onClick: playNext,
+                className: "w-12 h-12 flex items-center justify-center rounded-full bg-secondary hover:bg-secondary/80 transition-colors text-secondary-foreground",
+                children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.SkipForward, { size: 24 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center gap-3 mb-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { onClick: toggleMute, className: "text-foreground hover:text-primary transition-colors", children: isMuted || volume === 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.VolumeX, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.Volume2, { size: 20 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+              "input",
+              {
+                type: "range",
+                min: "0",
+                max: "1",
+                step: "0.01",
+                value: volume,
+                onChange: handleVolumeChange,
+                className: "flex-1 h-2 bg-muted rounded-lg appearance-none cursor-pointer"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+            "button",
+            {
+              onClick: () => setShowPlaylist(!showPlaylist),
+              className: "flex items-center gap-2 px-4 py-2 bg-secondary hover:bg-secondary/80 rounded-lg text-secondary-foreground transition-colors",
+              children: [
+                showPlaylist ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.X, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_lucide_react33.List, { size: 20 }),
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: showPlaylist ? "Hide Playlist" : "Show Playlist" })
+              ]
+            }
+          ) })
+        ] }),
+        showPlaylist && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "bg-muted/50 backdrop-blur-sm max-h-96 overflow-y-auto border-t border-border/50", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("h3", { className: "text-lg font-semibold text-foreground mb-3", children: [
+            "Playlist (",
+            playlist.length,
+            " songs)"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "space-y-2", children: playlist.map((song, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+            "div",
+            {
+              onClick: () => playSong(index),
+              className: `flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all ${index === currentSongIndex ? "bg-primary/20 border border-primary shadow-lg" : "bg-secondary/30 hover:bg-secondary/50"}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "shrink-0 w-8 h-8 flex items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-semibold", children: index === currentSongIndex && isPlaying ? "\u25B6" : index + 1 }),
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-foreground font-medium truncate", children: song.title }),
+                  song.artist && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "text-muted-foreground text-sm truncate", children: song.artist })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-muted-foreground text-sm shrink-0", children: song.duration })
+              ]
+            },
+            song.id
+          )) })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("style", { children: `
         .underverse-music-player input[type="range"]::-webkit-slider-thumb {
           -webkit-appearance: none;
           appearance: none;
@@ -20557,7 +20602,9 @@ var MusicPlayer = ({
           background: linear-gradient(to right, hsl(var(--primary)) var(--progress, 0%), hsl(var(--muted)) var(--progress, 0%));
         }
       ` })
-  ] });
+      ]
+    }
+  );
 };
 var MusicPlayer_default = MusicPlayer;
 
@@ -22092,6 +22139,7 @@ function DataTable({
   storageKey,
   stickyHeader = true,
   maxHeight = 500,
+  overflowHidden = true,
   useOverlayScrollbar = false,
   enableHeaderAutoFit = true,
   labels
@@ -22225,7 +22273,8 @@ function DataTable({
       "div",
       {
         className: cn(
-          "relative rounded-2xl md:rounded-3xl border border-border/50 bg-card overflow-hidden",
+          "relative rounded-2xl md:rounded-3xl border border-border/50 bg-card",
+          overflowHidden && "overflow-hidden",
           loading2 && "opacity-60 pointer-events-none"
         ),
         children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(