@underverse-ui/underverse 1.0.84 → 1.0.86

package/dist/index.d.cts

@@ -448,6 +448,7 @@ interface Toast {
         onClick: () => void;
     };
     dismissible?: boolean;
+    overflowHidden?: boolean;
 }
 interface ToastContextType {
     addToast: (toast: Omit<Toast, "id">) => void;
@@ -542,8 +543,9 @@ interface AlertProps {
     onClose?: () => void;
     actions?: ReactNode;
     closeAriaLabel?: string;
+    overflowHidden?: boolean;
 }
-declare const Alert: ({ title, description, variant, className, icon, dismissible, onClose, actions, closeAriaLabel }: AlertProps) => react_jsx_runtime.JSX.Element | null;
+declare const Alert: ({ title, description, variant, className, icon, dismissible, onClose, actions, closeAriaLabel, overflowHidden, }: AlertProps) => react_jsx_runtime.JSX.Element | null;
 
 interface GlobalLoadingProps {
     className?: string;
@@ -1378,6 +1380,8 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     monthEventStyle?: "span" | "compact";
     /** Month view only (when `monthEventStyle="compact"`): max visual width (px). */
     monthEventMaxWidth?: number;
+    /** Clip overflow at the outer surface. Disable when child hover shadows or focus rings should escape the timeline card. Default: true. */
+    overflowHidden?: boolean;
     dayTimeStepMinutes?: number;
     /** Render tooltips on events (can be expensive for large datasets). Default: true. */
     enableEventTooltips?: boolean;
@@ -1468,7 +1472,7 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     virtualization?: CalendarTimelineVirtualization;
 }
 
-declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, eventSheetOverlayOpacity, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, onlyView, view, defaultView, onViewChange, dueDateSprint, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, hideResourceColumn, resourceColumnWidth, defaultResourceColumnWidth, onResourceColumnWidthChange, minResourceColumnWidth, maxResourceColumnWidth, rowHeight, defaultRowHeight, onRowHeightChange, minRowHeight, maxRowHeight, rowHeights, defaultRowHeights, onRowHeightsChange, autoRowHeight, enableLayoutResize, slotMinWidth, adaptiveSlotWidths, dayEventStyle, dayEventMaxWidth, monthEventStyle, monthEventMaxWidth, dayTimeStepMinutes, enableEventTooltips, dayHeaderMode, daySlotCompression, columnVirtualization, dayRangeMode, workHours, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEventClick, onCreateEvent, onEventMove, onEventResize, onEventDelete, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
+declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, eventSheetOverlayOpacity, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, onlyView, view, defaultView, onViewChange, dueDateSprint, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, hideResourceColumn, resourceColumnWidth, defaultResourceColumnWidth, onResourceColumnWidthChange, minResourceColumnWidth, maxResourceColumnWidth, rowHeight, defaultRowHeight, onRowHeightChange, minRowHeight, maxRowHeight, rowHeights, defaultRowHeights, onRowHeightsChange, autoRowHeight, enableLayoutResize, slotMinWidth, adaptiveSlotWidths, dayEventStyle, dayEventMaxWidth, monthEventStyle, monthEventMaxWidth, overflowHidden, dayTimeStepMinutes, enableEventTooltips, dayHeaderMode, daySlotCompression, columnVirtualization, dayRangeMode, workHours, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEventClick, onCreateEvent, onEventMove, onEventResize, onEventDelete, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
 
 type ComboboxOption = string | {
     label: string;
@@ -2105,6 +2109,7 @@ interface MusicPlayerProps {
     autoPlay?: boolean;
     showPlaylist?: boolean;
     className?: string;
+    overflowHidden?: boolean;
 }
 declare const MusicPlayer: React__default.FC<MusicPlayerProps>;
 
@@ -2416,8 +2421,9 @@ interface AccessDeniedProps {
     }>;
     className?: string;
     children?: React__default.ReactNode;
+    overflowHidden?: boolean;
 }
-declare function AccessDenied({ title, description, variant, icon: Icon, className, children, }: AccessDeniedProps): react_jsx_runtime.JSX.Element;
+declare function AccessDenied({ title, description, variant, icon: Icon, className, children, overflowHidden, }: AccessDeniedProps): react_jsx_runtime.JSX.Element;
 
 type ThemeMode = "light" | "dark" | "system";
 interface ThemeToggleHeadlessProps {

package/dist/index.d.ts

@@ -448,6 +448,7 @@ interface Toast {
         onClick: () => void;
     };
     dismissible?: boolean;
+    overflowHidden?: boolean;
 }
 interface ToastContextType {
     addToast: (toast: Omit<Toast, "id">) => void;
@@ -542,8 +543,9 @@ interface AlertProps {
     onClose?: () => void;
     actions?: ReactNode;
     closeAriaLabel?: string;
+    overflowHidden?: boolean;
 }
-declare const Alert: ({ title, description, variant, className, icon, dismissible, onClose, actions, closeAriaLabel }: AlertProps) => react_jsx_runtime.JSX.Element | null;
+declare const Alert: ({ title, description, variant, className, icon, dismissible, onClose, actions, closeAriaLabel, overflowHidden, }: AlertProps) => react_jsx_runtime.JSX.Element | null;
 
 interface GlobalLoadingProps {
     className?: string;
@@ -1378,6 +1380,8 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     monthEventStyle?: "span" | "compact";
     /** Month view only (when `monthEventStyle="compact"`): max visual width (px). */
     monthEventMaxWidth?: number;
+    /** Clip overflow at the outer surface. Disable when child hover shadows or focus rings should escape the timeline card. Default: true. */
+    overflowHidden?: boolean;
     dayTimeStepMinutes?: number;
     /** Render tooltips on events (can be expensive for large datasets). Default: true. */
     enableEventTooltips?: boolean;
@@ -1468,7 +1472,7 @@ interface CalendarTimelineProps<TResourceMeta = unknown, TEventMeta = unknown> e
     virtualization?: CalendarTimelineVirtualization;
 }
 
-declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, eventSheetOverlayOpacity, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, onlyView, view, defaultView, onViewChange, dueDateSprint, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, hideResourceColumn, resourceColumnWidth, defaultResourceColumnWidth, onResourceColumnWidthChange, minResourceColumnWidth, maxResourceColumnWidth, rowHeight, defaultRowHeight, onRowHeightChange, minRowHeight, maxRowHeight, rowHeights, defaultRowHeights, onRowHeightsChange, autoRowHeight, enableLayoutResize, slotMinWidth, adaptiveSlotWidths, dayEventStyle, dayEventMaxWidth, monthEventStyle, monthEventMaxWidth, dayTimeStepMinutes, enableEventTooltips, dayHeaderMode, daySlotCompression, columnVirtualization, dayRangeMode, workHours, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEventClick, onCreateEvent, onEventMove, onEventResize, onEventDelete, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
+declare function CalendarTimeline<TResourceMeta = unknown, TEventMeta = unknown>({ resources, events, size, enableEventSheet, eventSheetSize, eventSheetOverlayOpacity, renderEventSheet, selectedEventId, defaultSelectedEventId, onSelectedEventIdChange, eventSheetOpen, defaultEventSheetOpen, onEventSheetOpenChange, onlyView, view, defaultView, onViewChange, dueDateSprint, date, defaultDate, onDateChange, weekStartsOn, locale, timeZone, labels, formatters, groups, groupCollapsed, defaultGroupCollapsed, onGroupCollapsedChange, hideResourceColumn, resourceColumnWidth, defaultResourceColumnWidth, onResourceColumnWidthChange, minResourceColumnWidth, maxResourceColumnWidth, rowHeight, defaultRowHeight, onRowHeightChange, minRowHeight, maxRowHeight, rowHeights, defaultRowHeights, onRowHeightsChange, autoRowHeight, enableLayoutResize, slotMinWidth, adaptiveSlotWidths, dayEventStyle, dayEventMaxWidth, monthEventStyle, monthEventMaxWidth, overflowHidden, dayTimeStepMinutes, enableEventTooltips, dayHeaderMode, daySlotCompression, columnVirtualization, dayRangeMode, workHours, maxLanesPerRow, now, renderResource, renderGroup, renderEvent, interactions, onRangeChange, onEventClick, onEventDoubleClick, onCreateEventClick, onCreateEvent, onEventMove, onEventResize, onEventDelete, onMoreClick, virtualization, className, ...rest }: CalendarTimelineProps<TResourceMeta, TEventMeta>): react_jsx_runtime.JSX.Element;
 
 type ComboboxOption = string | {
     label: string;
@@ -2105,6 +2109,7 @@ interface MusicPlayerProps {
     autoPlay?: boolean;
     showPlaylist?: boolean;
     className?: string;
+    overflowHidden?: boolean;
 }
 declare const MusicPlayer: React__default.FC<MusicPlayerProps>;
 
@@ -2416,8 +2421,9 @@ interface AccessDeniedProps {
     }>;
     className?: string;
     children?: React__default.ReactNode;
+    overflowHidden?: boolean;
 }
-declare function AccessDenied({ title, description, variant, icon: Icon, className, children, }: AccessDeniedProps): react_jsx_runtime.JSX.Element;
+declare function AccessDenied({ title, description, variant, icon: Icon, className, children, overflowHidden, }: AccessDeniedProps): react_jsx_runtime.JSX.Element;
 
 type ThemeMode = "light" | "dark" | "system";
 interface ThemeToggleHeadlessProps {

package/dist/index.js

@@ -5308,9 +5308,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"
       ),
@@ -6156,7 +6157,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] = useState12(true);
   const t = useSmartTranslations("Common");
   if (!open) return null;
@@ -6170,9 +6182,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
       ),
@@ -13552,6 +13565,7 @@ function CalendarTimeline({
   dayEventMaxWidth,
   monthEventStyle = "span",
   monthEventMaxWidth,
+  overflowHidden = true,
   dayTimeStepMinutes = 60,
   enableEventTooltips = true,
   dayHeaderMode = "full",
@@ -14614,9 +14628,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
       ),
@@ -20180,7 +20195,8 @@ var MusicPlayer = ({
   playlist = DEFAULT_PLAYLIST,
   autoPlay = false,
   showPlaylist: initialShowPlaylist = true,
-  className = ""
+  className = "",
+  overflowHidden = true
 }) => {
   const [currentSongIndex, setCurrentSongIndex] = useState38(0);
   const [isPlaying, setIsPlaying] = useState38(false);
@@ -20282,108 +20298,116 @@ var MusicPlayer = ({
       }
     }
   }, [currentSongIndex, currentSong.startTime, isPlaying]);
-  return /* @__PURE__ */ jsxs48("div", { className: `underverse-music-player bg-card dark:bg-card border border-border/50 rounded-2xl shadow-2xl overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsx58("audio", { ref: audioRef, src: currentSong.audioUrl, onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleLoadedMetadata, onEnded: playNext }),
-    /* @__PURE__ */ jsxs48("div", { className: "p-6", children: [
-      /* @__PURE__ */ jsxs48("div", { className: "text-center mb-6", children: [
-        /* @__PURE__ */ jsx58("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__ */ jsx58("div", { className: "text-6xl", children: "\u{1F3B5}" }) }),
-        /* @__PURE__ */ jsx58("h2", { className: "text-2xl font-bold text-foreground mb-1", children: currentSong.title }),
-        currentSong.artist && /* @__PURE__ */ jsx58("p", { className: "text-muted-foreground", children: currentSong.artist })
-      ] }),
-      /* @__PURE__ */ jsxs48("div", { className: "mb-4", children: [
-        /* @__PURE__ */ jsx58(
-          "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__ */ jsxs48("div", { className: "flex justify-between text-sm text-muted-foreground mt-1", children: [
-          /* @__PURE__ */ jsx58("span", { children: formatTime3(currentTime) }),
-          /* @__PURE__ */ jsx58("span", { children: formatTime3(duration) })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-center gap-4 mb-6", children: [
-        /* @__PURE__ */ jsx58(
-          "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__ */ jsx58(SkipBack, { size: 24 })
-          }
-        ),
-        /* @__PURE__ */ jsx58(
-          "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__ */ jsx58(Pause2, { size: 32 }) : /* @__PURE__ */ jsx58(Play2, { size: 32, className: "ml-1" })
-          }
-        ),
-        /* @__PURE__ */ jsx58(
-          "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__ */ jsx58(SkipForward, { size: 24 })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-3 mb-4", children: [
-        /* @__PURE__ */ jsx58("button", { onClick: toggleMute, className: "text-foreground hover:text-primary transition-colors", children: isMuted || volume === 0 ? /* @__PURE__ */ jsx58(VolumeX2, { size: 20 }) : /* @__PURE__ */ jsx58(Volume22, { size: 20 }) }),
-        /* @__PURE__ */ jsx58(
-          "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__ */ jsx58("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs48(
-        "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__ */ jsx58(X17, { size: 20 }) : /* @__PURE__ */ jsx58(List2, { size: 20 }),
-            /* @__PURE__ */ jsx58("span", { children: showPlaylist ? "Hide Playlist" : "Show Playlist" })
-          ]
-        }
-      ) })
-    ] }),
-    showPlaylist && /* @__PURE__ */ jsx58("div", { className: "bg-muted/50 backdrop-blur-sm max-h-96 overflow-y-auto border-t border-border/50", children: /* @__PURE__ */ jsxs48("div", { className: "p-4", children: [
-      /* @__PURE__ */ jsxs48("h3", { className: "text-lg font-semibold text-foreground mb-3", children: [
-        "Playlist (",
-        playlist.length,
-        " songs)"
-      ] }),
-      /* @__PURE__ */ jsx58("div", { className: "space-y-2", children: playlist.map((song, index) => /* @__PURE__ */ jsxs48(
-        "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__ */ jsx58("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__ */ jsxs48("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx58("p", { className: "text-foreground font-medium truncate", children: song.title }),
-              song.artist && /* @__PURE__ */ jsx58("p", { className: "text-muted-foreground text-sm truncate", children: song.artist })
-            ] }),
-            /* @__PURE__ */ jsx58("div", { className: "text-muted-foreground text-sm shrink-0", children: song.duration })
-          ]
-        },
-        song.id
-      )) })
-    ] }) }),
-    /* @__PURE__ */ jsx58("style", { children: `
+  return /* @__PURE__ */ jsxs48(
+    "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__ */ jsx58("audio", { ref: audioRef, src: currentSong.audioUrl, onTimeUpdate: handleTimeUpdate, onLoadedMetadata: handleLoadedMetadata, onEnded: playNext }),
+        /* @__PURE__ */ jsxs48("div", { className: "p-6", children: [
+          /* @__PURE__ */ jsxs48("div", { className: "text-center mb-6", children: [
+            /* @__PURE__ */ jsx58("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__ */ jsx58("div", { className: "text-6xl", children: "\u{1F3B5}" }) }),
+            /* @__PURE__ */ jsx58("h2", { className: "text-2xl font-bold text-foreground mb-1", children: currentSong.title }),
+            currentSong.artist && /* @__PURE__ */ jsx58("p", { className: "text-muted-foreground", children: currentSong.artist })
+          ] }),
+          /* @__PURE__ */ jsxs48("div", { className: "mb-4", children: [
+            /* @__PURE__ */ jsx58(
+              "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__ */ jsxs48("div", { className: "flex justify-between text-sm text-muted-foreground mt-1", children: [
+              /* @__PURE__ */ jsx58("span", { children: formatTime3(currentTime) }),
+              /* @__PURE__ */ jsx58("span", { children: formatTime3(duration) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs48("div", { className: "flex items-center justify-center gap-4 mb-6", children: [
+            /* @__PURE__ */ jsx58(
+              "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__ */ jsx58(SkipBack, { size: 24 })
+              }
+            ),
+            /* @__PURE__ */ jsx58(
+              "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__ */ jsx58(Pause2, { size: 32 }) : /* @__PURE__ */ jsx58(Play2, { size: 32, className: "ml-1" })
+              }
+            ),
+            /* @__PURE__ */ jsx58(
+              "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__ */ jsx58(SkipForward, { size: 24 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-3 mb-4", children: [
+            /* @__PURE__ */ jsx58("button", { onClick: toggleMute, className: "text-foreground hover:text-primary transition-colors", children: isMuted || volume === 0 ? /* @__PURE__ */ jsx58(VolumeX2, { size: 20 }) : /* @__PURE__ */ jsx58(Volume22, { size: 20 }) }),
+            /* @__PURE__ */ jsx58(
+              "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__ */ jsx58("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs48(
+            "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__ */ jsx58(X17, { size: 20 }) : /* @__PURE__ */ jsx58(List2, { size: 20 }),
+                /* @__PURE__ */ jsx58("span", { children: showPlaylist ? "Hide Playlist" : "Show Playlist" })
+              ]
+            }
+          ) })
+        ] }),
+        showPlaylist && /* @__PURE__ */ jsx58("div", { className: "bg-muted/50 backdrop-blur-sm max-h-96 overflow-y-auto border-t border-border/50", children: /* @__PURE__ */ jsxs48("div", { className: "p-4", children: [
+          /* @__PURE__ */ jsxs48("h3", { className: "text-lg font-semibold text-foreground mb-3", children: [
+            "Playlist (",
+            playlist.length,
+            " songs)"
+          ] }),
+          /* @__PURE__ */ jsx58("div", { className: "space-y-2", children: playlist.map((song, index) => /* @__PURE__ */ jsxs48(
+            "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__ */ jsx58("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__ */ jsxs48("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx58("p", { className: "text-foreground font-medium truncate", children: song.title }),
+                  song.artist && /* @__PURE__ */ jsx58("p", { className: "text-muted-foreground text-sm truncate", children: song.artist })
+                ] }),
+                /* @__PURE__ */ jsx58("div", { className: "text-muted-foreground text-sm shrink-0", children: song.duration })
+              ]
+            },
+            song.id
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsx58("style", { children: `
         .underverse-music-player input[type="range"]::-webkit-slider-thumb {
           -webkit-appearance: none;
           appearance: none;
@@ -20409,7 +20433,9 @@ var MusicPlayer = ({
           background: linear-gradient(to right, hsl(var(--primary)) var(--progress, 0%), hsl(var(--muted)) var(--progress, 0%));
         }
       ` })
-  ] });
+      ]
+    }
+  );
 };
 var MusicPlayer_default = MusicPlayer;
 
@@ -22360,18 +22386,26 @@ function AccessDenied({
   variant = "destructive",
   icon: Icon,
   className,
-  children
+  children,
+  overflowHidden = true
 }) {
   const styles = VARIANT_STYLES[variant];
   const UsedIcon = Icon || DEFAULT_ICONS[variant];
-  return /* @__PURE__ */ jsx70(Card_default, { className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className), children: /* @__PURE__ */ jsxs59("div", { className: "flex flex-col items-center gap-4", children: [
-    /* @__PURE__ */ jsx70("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ jsx70(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
-    /* @__PURE__ */ jsxs59("div", { children: [
-      /* @__PURE__ */ jsx70("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
-      /* @__PURE__ */ jsx70("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
-    ] }),
-    children && /* @__PURE__ */ jsx70("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
-  ] }) });
+  return /* @__PURE__ */ jsx70(
+    Card_default,
+    {
+      className: cn("p-8 text-center shadow-sm", styles.bg, styles.border, className),
+      innerClassName: !overflowHidden ? "overflow-visible" : void 0,
+      children: /* @__PURE__ */ jsxs59("div", { className: "flex flex-col items-center gap-4", children: [
+        /* @__PURE__ */ jsx70("div", { className: cn("p-3 rounded-lg", styles.bg.replace("/5", "/10")), children: /* @__PURE__ */ jsx70(UsedIcon, { className: cn("w-8 h-8", styles.text) }) }),
+        /* @__PURE__ */ jsxs59("div", { children: [
+          /* @__PURE__ */ jsx70("h3", { className: cn("font-semibold mb-2", styles.text), children: title }),
+          /* @__PURE__ */ jsx70("p", { className: cn(styles.text.replace("text-", "text-") + "/80", "text-sm"), children: description })
+        ] }),
+        children && /* @__PURE__ */ jsx70("div", { className: "mt-2 flex flex-wrap gap-2 justify-center", children })
+      ] })
+    }
+  );
 }
 
 // src/components/ThemeToggleHeadless.tsx