@djangocfg/ui-tools 2.1.418 → 2.1.419

package/src/tools/input/CronScheduler/index.tsx

@@ -17,7 +17,7 @@
  */
 
 import React, { lazy, Suspense } from 'react';
-import { LoadingFallback } from '../../../components';
+import { LoadingFallback } from '../../../common';
 import type { CronSchedulerProps } from './types';
 
 // Lazy load the client component
@@ -78,6 +78,8 @@ export {
   parseCron,
   isValidCron,
   humanizeCron,
+  getNextRuns,
+  formatNextRun,
 } from './utils';
 
 // Re-export components for custom compositions
@@ -88,6 +90,8 @@ export {
   MonthDayGrid,
   CustomInput,
   SchedulePreview,
+  CronPreview,
 } from './components';
+export type { CronPreviewProps } from './components';
 
 export default CronScheduler;

package/src/tools/input/CronScheduler/lazy.tsx

@@ -15,7 +15,7 @@
  * />
  */
 
-import { createLazyComponent, LoadingFallback } from '../../../components';
+import { createLazyComponent, LoadingFallback } from '../../../common';
 import type { CronSchedulerProps } from './types';
 
 // Re-export types
@@ -28,6 +28,10 @@ export type {
   CronSchedulerState,
 } from './types';
 
+// Re-export the read-only preview (small, no lazy needed — pure render).
+export { CronPreview } from './components/CronPreview';
+export type { CronPreviewProps } from './components/CronPreview';
+
 /**
  * LazyCronScheduler - Lazy-loaded cron expression builder
  *

package/src/tools/input/CronScheduler/utils/cron-next-runs.ts

@@ -0,0 +1,122 @@
+/**
+ * Cron Next Runs
+ *
+ * Computes upcoming run times for a standard 5-field cron expression
+ * (minute, hour, day-of-month, month, day-of-week). Supports `*`, lists
+ * (`1,2,3`), ranges (`1-5`), and step values (`*\/15`, `1-5/2`).
+ *
+ * Implementation note: this is a minute-resolution scanner — adequate for
+ * preview UIs (showing the next few runs). It does not attempt to support
+ * non-standard fields (seconds, year, `L`, `W`, `#`).
+ */
+
+function parseField(field: string, min: number, max: number): number[] {
+  const values = new Set<number>();
+
+  for (const part of field.split(',')) {
+    const stepMatch = part.match(/^(.+)\/(\d+)$/);
+    const step = stepMatch ? parseInt(stepMatch[2], 10) : 1;
+    const range = stepMatch ? stepMatch[1] : part;
+
+    if (!Number.isFinite(step) || step < 1) continue;
+
+    if (range === '*') {
+      for (let i = min; i <= max; i += step) values.add(i);
+    } else if (range.includes('-')) {
+      const [start, end] = range.split('-').map(Number);
+      if (Number.isFinite(start) && Number.isFinite(end)) {
+        for (let i = start; i <= end; i += step) values.add(i);
+      }
+    } else {
+      const n = parseInt(range, 10);
+      if (Number.isFinite(n)) values.add(n);
+    }
+  }
+
+  return Array.from(values).sort((a, b) => a - b);
+}
+
+/**
+ * Compute the next `count` run times of a cron expression starting after
+ * `from` (exclusive). Returns an empty array for invalid expressions.
+ */
+export function getNextRuns(cron: string, count: number, from: Date = new Date()): Date[] {
+  if (!cron || typeof cron !== 'string' || count <= 0) return [];
+
+  const fields = cron.trim().split(/\s+/);
+  if (fields.length !== 5) return [];
+
+  const minuteValues = parseField(fields[0], 0, 59);
+  const hourValues = parseField(fields[1], 0, 23);
+  const domValues = parseField(fields[2], 1, 31);
+  const monthValues = parseField(fields[3], 1, 12);
+  const dowValues = parseField(fields[4], 0, 6);
+
+  if (
+    minuteValues.length === 0 ||
+    hourValues.length === 0 ||
+    (fields[2] !== '*' && domValues.length === 0) ||
+    (fields[3] !== '*' && monthValues.length === 0) ||
+    (fields[4] !== '*' && dowValues.length === 0)
+  ) {
+    return [];
+  }
+
+  const minuteSet = new Set(minuteValues);
+  const hourSet = new Set(hourValues);
+  const domSet = fields[2] === '*' ? null : new Set(domValues);
+  const monthSet = fields[3] === '*' ? null : new Set(monthValues);
+  const dowSet = fields[4] === '*' ? null : new Set(dowValues);
+
+  const runs: Date[] = [];
+  const cursor = new Date(from);
+  cursor.setSeconds(0, 0);
+  cursor.setMinutes(cursor.getMinutes() + 1);
+
+  // cap at ~1 year of minutes — far enough for monthly schedules,
+  // tight enough that broken expressions return quickly.
+  const maxIterations = 366 * 24 * 60;
+
+  for (let i = 0; i < maxIterations && runs.length < count; i++) {
+    const m = cursor.getMinutes();
+    const h = cursor.getHours();
+    const d = cursor.getDate();
+    const mo = cursor.getMonth() + 1;
+    const w = cursor.getDay();
+
+    if (
+      minuteSet.has(m) &&
+      hourSet.has(h) &&
+      (domSet === null || domSet.has(d)) &&
+      (monthSet === null || monthSet.has(mo)) &&
+      (dowSet === null || dowSet.has(w))
+    ) {
+      runs.push(new Date(cursor));
+    }
+
+    cursor.setMinutes(cursor.getMinutes() + 1);
+  }
+
+  return runs;
+}
+
+/**
+ * Default human-friendly formatter for a next-run Date.
+ * Example: "Mon, Jan 5 at 9:00 AM"
+ */
+export function formatNextRun(date: Date): string {
+  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+  const months = [
+    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+  ];
+  const day = days[date.getDay()];
+  const month = months[date.getMonth()];
+  const d = date.getDate();
+  const h = date.getHours();
+  const m = date.getMinutes().toString().padStart(2, '0');
+  const period = h >= 12 ? 'PM' : 'AM';
+  const hour = h === 0 ? 12 : h > 12 ? h - 12 : h;
+
+  return `${day}, ${month} ${d} at ${hour}:${m} ${period}`;
+}

package/src/tools/input/CronScheduler/utils/index.ts

@@ -10,3 +10,4 @@ export {
   getWeekdayName,
   getWeekdayShort,
 } from './cron-humanize';
+export { getNextRuns, formatNextRun } from './cron-next-runs';

package/src/tools/input/Scroller/lazy.tsx

@@ -4,7 +4,7 @@
  * Lazy-loaded Scroller Component
  */
 
-import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
+import { createLazyComponent, LoadingFallback } from '../../../common/lazy-wrapper';
 import type {
   ScrollerProps,
   ScrollerItemProps,

package/src/tools/input/Sortable/lazy.tsx

@@ -4,7 +4,7 @@
  * Lazy-loaded Sortable Component
  */
 
-import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
+import { createLazyComponent, LoadingFallback } from '../../../common/lazy-wrapper';
 import type {
   SortableProps,
   SortableItemProps,

package/src/tools/input/SpeechRecognition/lazy.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createLazyComponent } from '../../../components';
+import { createLazyComponent } from '../../../common';
 import type { DictationFieldProps } from './widgets/DictationField';
 
 export const LazyDictationField = createLazyComponent<DictationFieldProps>(

package/src/tools/input/SpeechRecognition/widgets/VoiceComposerSlot.tsx

@@ -6,6 +6,7 @@ import { AlertCircle, Loader2, Mic } from 'lucide-react';
 
 import { useCountdownFromSeconds, useNotificationSounds } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@djangocfg/ui-core/components';
 import { useActiveComposer } from '@djangocfg/ui-tools/composer-registry';
 import { useSpeechRecognition } from '../hooks/useSpeechRecognition';
 import { useVoiceSupport } from '../hooks/useVoiceSupport';
@@ -364,44 +365,48 @@ export function VoiceComposerSlot({
           Failed
         </span>
       ) : null}
-      <button
-        type="button"
-        onClick={toggle}
-        aria-pressed={slotState === 'listening'}
-        aria-label={ariaLabel}
-        title={tooltip}
-        data-state={slotState}
-        className={cn(
-          'relative inline-flex items-center justify-center rounded-full transition-all duration-200',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-          SIZE_CLS[size],
-          slotState === 'listening' &&
-            'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-          slotState === 'processing' &&
-            'bg-primary/10 text-primary hover:bg-primary/15',
-          slotState === 'error' &&
-            'bg-destructive/10 text-destructive hover:bg-destructive/15',
-          slotState === 'idle' &&
-            'text-muted-foreground hover:bg-muted hover:text-foreground',
-          className,
-        )}
-      >
-        {/* Recording feedback — pulsing circle overlay driven by the
-            live mic level. Hidden in every non-listening state. */}
-        <RecordingPulse active={slotState === 'listening'} level={rec.level} />
-        {slotState === 'processing' ? (
-          <Loader2 className="animate-spin" />
-        ) : slotState === 'error' ? (
-          <AlertCircle />
-        ) : (
-          <Mic
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            type="button"
+            onClick={toggle}
+            aria-pressed={slotState === 'listening'}
+            aria-label={ariaLabel}
+            data-state={slotState}
             className={cn(
-              'transition-transform duration-200',
-              slotState === 'listening' && 'scale-110',
+              'relative inline-flex items-center justify-center rounded-full transition-all duration-200',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+              SIZE_CLS[size],
+              slotState === 'listening' &&
+                'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+              slotState === 'processing' &&
+                'bg-primary/10 text-primary hover:bg-primary/15',
+              slotState === 'error' &&
+                'bg-destructive/10 text-destructive hover:bg-destructive/15',
+              slotState === 'idle' &&
+                'text-muted-foreground hover:bg-muted hover:text-foreground',
+              className,
             )}
-          />
-        )}
-      </button>
+          >
+            {/* Recording feedback — pulsing circle overlay driven by the
+                live mic level. Hidden in every non-listening state. */}
+            <RecordingPulse active={slotState === 'listening'} level={rec.level} />
+            {slotState === 'processing' ? (
+              <Loader2 className="animate-spin" />
+            ) : slotState === 'error' ? (
+              <AlertCircle />
+            ) : (
+              <Mic
+                className={cn(
+                  'transition-transform duration-200',
+                  slotState === 'listening' && 'scale-110',
+                )}
+              />
+            )}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="top">{tooltip}</TooltipContent>
+      </Tooltip>
     </span>
   );
 }

package/src/tools/media/ImageViewer/components/ImageToolbar.tsx

@@ -4,10 +4,18 @@
  * ImageToolbar - Floating toolbar for image controls
  */
 
-import { useMemo } from 'react';
+import { useMemo, type ReactNode } from 'react';
 import { ZoomIn, ZoomOut, RotateCw, FlipHorizontal, FlipVertical, Maximize2, Expand } from 'lucide-react';
 import { useControls } from 'react-zoom-pan-pinch';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@djangocfg/ui-core/components';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@djangocfg/ui-core/components';
 import { useAppT } from '@djangocfg/i18n';
 import { cn } from '@djangocfg/ui-core/lib';
 import { ZOOM_PRESETS } from '../utils';
@@ -29,6 +37,36 @@ const TB_BUTTON =
   'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 ' +
   'disabled:opacity-40 disabled:pointer-events-none';
 
+// Small helper so each icon button shares the same Tooltip wrapper +
+// accessibility shape (visible tooltip on hover/focus, aria-label for AT).
+function TbIconButton({
+  label,
+  onClick,
+  className,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={label}
+          onClick={onClick}
+          className={cn(TB_BUTTON, 'h-7 w-7', className)}
+        >
+          {children}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top">{label}</TooltipContent>
+    </Tooltip>
+  );
+}
+
 export function ImageToolbar({
   scale,
   transform,
@@ -59,14 +97,9 @@ export function ImageToolbar({
   return (
     <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex items-center gap-0.5 bg-black/60 backdrop-blur-sm border border-white/10 rounded-lg p-1 shadow-lg">
       {/* Zoom controls */}
-      <button
-        type="button"
-        className={cn(TB_BUTTON, 'h-7 w-7')}
-        onClick={() => zoomOut()}
-        title={labels.zoomOut}
-      >
+      <TbIconButton label={labels.zoomOut} onClick={() => zoomOut()}>
         <ZoomOut className="h-3.5 w-3.5" />
-      </button>
+      </TbIconButton>
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
@@ -90,56 +123,39 @@ export function ImageToolbar({
         </DropdownMenuContent>
       </DropdownMenu>
 
-      <button
-        type="button"
-        className={cn(TB_BUTTON, 'h-7 w-7')}
-        onClick={() => zoomIn()}
-        title={labels.zoomIn}
-      >
+      <TbIconButton label={labels.zoomIn} onClick={() => zoomIn()}>
         <ZoomIn className="h-3.5 w-3.5" />
-      </button>
+      </TbIconButton>
 
       <div className="w-px h-4 bg-white/20 mx-1" />
 
       {/* Fit to view */}
-      <button
-        type="button"
-        className={cn(TB_BUTTON, 'h-7 w-7')}
-        onClick={() => resetTransform()}
-        title={labels.fitToView}
-      >
+      <TbIconButton label={labels.fitToView} onClick={() => resetTransform()}>
         <Maximize2 className="h-3.5 w-3.5" />
-      </button>
+      </TbIconButton>
 
       <div className="w-px h-4 bg-white/20 mx-1" />
 
       {/* Transform controls */}
-      <button
-        type="button"
-        className={cn(TB_BUTTON, 'h-7 w-7', transform.flipH && 'bg-white/20 text-white')}
+      <TbIconButton
+        label={labels.flipHorizontal}
         onClick={onFlipH}
-        title={labels.flipHorizontal}
+        className={transform.flipH ? 'bg-white/20 text-white' : undefined}
       >
         <FlipHorizontal className="h-3.5 w-3.5" />
-      </button>
+      </TbIconButton>
 
-      <button
-        type="button"
-        className={cn(TB_BUTTON, 'h-7 w-7', transform.flipV && 'bg-white/20 text-white')}
+      <TbIconButton
+        label={labels.flipVertical}
         onClick={onFlipV}
-        title={labels.flipVertical}
+        className={transform.flipV ? 'bg-white/20 text-white' : undefined}
       >
         <FlipVertical className="h-3.5 w-3.5" />
-      </button>
+      </TbIconButton>
 
-      <button
-        type="button"
-        className={cn(TB_BUTTON, 'h-7 w-7')}
-        onClick={onRotate}
-        title={labels.rotate}
-      >
+      <TbIconButton label={labels.rotate} onClick={onRotate}>
         <RotateCw className="h-3.5 w-3.5" />
-      </button>
+      </TbIconButton>
 
       {transform.rotation !== 0 && (
         <span className="text-[10px] text-white/60 font-mono pl-1">
@@ -150,14 +166,9 @@ export function ImageToolbar({
       {onExpand && (
         <>
           <div className="w-px h-4 bg-white/20 mx-1" />
-          <button
-            type="button"
-            className={cn(TB_BUTTON, 'h-7 w-7')}
-            onClick={onExpand}
-            title={labels.fullscreen}
-          >
+          <TbIconButton label={labels.fullscreen} onClick={onExpand}>
             <Expand className="h-3.5 w-3.5" />
-          </button>
+          </TbIconButton>
         </>
       )}
     </div>

package/src/tools/media/ImageViewer/components/ImageViewer.tsx

@@ -20,7 +20,7 @@ import {
   TransformComponent,
   type ReactZoomPanPinchRef,
 } from 'react-zoom-pan-pinch';
-import { cn, Dialog, DialogContent, DialogTitle, Alert, AlertDescription } from '@djangocfg/ui-core';
+import { cn, Dialog, DialogContent, DialogTitle, Alert, AlertDescription, Tooltip, TooltipContent, TooltipTrigger } from '@djangocfg/ui-core';
 import { useAppT } from '@djangocfg/i18n';
 import { useHotkey } from '@djangocfg/ui-core/hooks';
 
@@ -313,24 +313,32 @@ export function ImageViewer({
       {/* Gallery navigation */}
       {hasMultiple && (
         <>
-          <button
-            type="button"
-            onClick={prev}
-            aria-label={labels.prev}
-            title={labels.prev}
-            className="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
-          >
-            <ChevronLeft className="h-5 w-5" />
-          </button>
-          <button
-            type="button"
-            onClick={next}
-            aria-label={labels.next}
-            title={labels.next}
-            className="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
-          >
-            <ChevronRight className="h-5 w-5" />
-          </button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onClick={prev}
+                aria-label={labels.prev}
+                className="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
+              >
+                <ChevronLeft className="h-5 w-5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">{labels.prev}</TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                onClick={next}
+                aria-label={labels.next}
+                className="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
+              >
+                <ChevronRight className="h-5 w-5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="left">{labels.next}</TooltipContent>
+          </Tooltip>
           <div className="absolute top-3 left-1/2 -translate-x-1/2 z-10 bg-black/60 backdrop-blur-sm border border-white/10 text-white/80 text-xs font-mono px-2 py-0.5 rounded-full pointer-events-none">
             {currentIndex + 1} / {images.length}
           </div>

package/src/tools/media/ImageViewer/lazy.tsx

@@ -10,7 +10,7 @@
  * import { ImageViewer } from '@djangocfg/ui-tools/image-viewer'
  */
 
-import { createLazyComponent, LoadingFallback } from '../../../components';
+import { createLazyComponent, LoadingFallback } from '../../../common';
 import type { ImageViewerProps } from './types';
 
 // ============================================================================

package/src/tools/media/LottiePlayer/lazy.tsx

@@ -10,7 +10,7 @@
  * import { LottiePlayer } from '@djangocfg/ui-tools/lottie'
  */
 
-import { createLazyComponent } from '../../../components';
+import { createLazyComponent } from '../../../common';
 import type { LottiePlayerProps } from './types';
 
 // ============================================================================

package/src/tools/media/VideoPlayer/VideoPlayer.tsx

@@ -12,7 +12,7 @@
  * iframe sources where the embed renders its own UI).
  */
 
-import { useEffect, useMemo, useRef, type CSSProperties } from 'react';
+import { useCallback, useEffect, useMemo, useRef, type CSSProperties } from 'react';
 import { MediaController } from 'media-chrome/react';
 import { cn } from '@djangocfg/ui-core/lib';
 import './styles/video-player.css';
@@ -51,6 +51,7 @@ export function VideoPlayer({
   );
 
   const isIframe = normalized.type === 'iframe';
+  const isYouTube = normalized.type === 'youtube';
   // For iframe embeds media-chrome cannot drive the inner player — hide the
   // control bar to avoid a non-functional UI.
   const showControls = controls && !isIframe;
@@ -61,6 +62,20 @@ export function VideoPlayer({
   // all we use) — media-chrome's full MediaController type pulls private
   // fields we don't need to see.
   const controllerRef = useRef<HTMLElement | null>(null);
+
+  // Click-to-play overlay for YouTube — the underlying YT iframe is made
+  // `pointer-events: none` via CSS to suppress YouTube's own hover-state /
+  // UI (title bar, pause-screen, branding tray; ToS forbids hiding them,
+  // but we can make them inert). This overlay restores click-to-toggle
+  // by dispatching media-chrome request events the controller listens for.
+  const onYouTubeShieldClick = useCallback(() => {
+    const el = controllerRef.current;
+    if (!el) return;
+    const paused = el.hasAttribute('mediapaused');
+    const eventName = paused ? 'mediaplayrequest' : 'mediapauserequest';
+    el.dispatchEvent(new CustomEvent(eventName, { bubbles: true, composed: true }));
+  }, []);
+
   useEffect(() => {
     if (!autoFocus) return;
     const el = controllerRef.current;
@@ -85,6 +100,18 @@ export function VideoPlayer({
       style={aspectRatioStyle(aspectRatio)}
     >
       <CanvasDispatcher source={normalized} {...settings} />
+      {isYouTube && (
+        // Transparent click-shield over the YT iframe. The iframe itself
+        // is pointer-events:none (see video-player.css); this div absorbs
+        // pointer events and forwards a play/pause request to media-chrome,
+        // so users still get click-to-toggle without ever interacting with
+        // YouTube's own UI.
+        <div
+          className="vp-yt-click-shield"
+          onClick={onYouTubeShieldClick}
+          aria-hidden="true"
+        />
+      )}
       {children ??
         (showControls && (
           <ControlsBar>

package/src/tools/media/VideoPlayer/parts/fullscreen.tsx

@@ -2,12 +2,20 @@
 
 import { MediaFullscreenButton } from 'media-chrome/react';
 import { cn } from '@djangocfg/ui-core/lib';
-import type { ComponentProps } from 'react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@djangocfg/ui-core/components';
+import type { ComponentProps, ReactNode } from 'react';
 
-export type FullscreenProps = ComponentProps<typeof MediaFullscreenButton>;
+export type FullscreenProps = ComponentProps<typeof MediaFullscreenButton> & {
+  /** Tooltip copy. Defaults to `"Fullscreen"`. Pass `false` to opt out. */
+  readonly label?: ReactNode | false;
+};
 
-export function Fullscreen({ className, ...props }: FullscreenProps) {
-  return (
+export function Fullscreen({ className, label, ...props }: FullscreenProps) {
+  const button = (
     <MediaFullscreenButton
       {...props}
       className={cn(
@@ -16,4 +24,13 @@ export function Fullscreen({ className, ...props }: FullscreenProps) {
       )}
     />
   );
+
+  if (label === false) return button;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent side="top">{label ?? 'Fullscreen'}</TooltipContent>
+    </Tooltip>
+  );
 }