@djangocfg/ui-tools 2.1.418 → 2.1.420

package/src/tools/input/CronScheduler/components/CronPreview.tsx

@@ -0,0 +1,136 @@
+'use client';
+
+/**
+ * CronPreview
+ *
+ * Read-only sibling of `CronScheduler`. Renders a human-readable summary
+ * for a cron expression plus an optional list of upcoming run times.
+ *
+ * Unlike `SchedulePreview` (which lives inside the editor and pulls its
+ * state from `CronSchedulerProvider`), `CronPreview` is fully standalone:
+ * pass a value, get a preview. Use it in dashboards, list rows, and
+ * read-only schedule views where the heavier editor is not needed.
+ *
+ * @example
+ * <CronPreview value="0 9 * * 1-5" />
+ *
+ * @example
+ * <CronPreview value="*\/15 * * * *" nextRuns={5} />
+ */
+
+import * as React from 'react';
+import { Calendar } from 'lucide-react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { humanizeCron } from '../utils/cron-humanize';
+import { getNextRuns, formatNextRun } from '../utils/cron-next-runs';
+import { isValidCron } from '../utils/cron-parser';
+
+export interface CronPreviewProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
+  /** Cron expression (standard 5-field format, e.g. `"0 9 * * 1-5"`). */
+  value: string;
+  /** Optional heading shown above the summary. */
+  title?: string;
+  /**
+   * Number of upcoming run times to display.
+   * `0` hides the list. Defaults to `5`.
+   */
+  nextRuns?: number;
+  /** Show the raw cron expression alongside the summary. Defaults to `true`. */
+  showExpression?: boolean;
+  /** Base date for computing next runs. Defaults to "now". */
+  referenceDate?: Date;
+  /** Additional CSS classes for the outer container. */
+  className?: string;
+}
+
+export function CronPreview({
+  value,
+  title,
+  nextRuns = 5,
+  showExpression = true,
+  referenceDate,
+  className,
+  ...rest
+}: CronPreviewProps) {
+  const trimmed = (value ?? '').trim();
+  const valid = isValidCron(trimmed);
+
+  const summary = React.useMemo(() => humanizeCron(trimmed), [trimmed]);
+
+  const runs = React.useMemo(() => {
+    if (!valid || nextRuns <= 0) return [];
+    return getNextRuns(trimmed, nextRuns, referenceDate ?? new Date());
+  }, [trimmed, valid, nextRuns, referenceDate]);
+
+  if (!valid) {
+    return (
+      <div
+        data-slot="cron-preview"
+        className={cn(
+          'rounded-xl border border-destructive/30 bg-destructive/5 px-4 py-3 text-sm text-destructive',
+          className
+        )}
+        {...rest}
+      >
+        Invalid cron expression: <code className="font-mono">{trimmed || '(empty)'}</code>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-slot="cron-preview"
+      role="status"
+      aria-live="polite"
+      className={cn(
+        'overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-sm',
+        className
+      )}
+      {...rest}
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between gap-3 border-b border-border/60 px-4 py-3">
+        <div className="flex min-w-0 items-start gap-2">
+          <Calendar aria-hidden="true" className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+          <div className="flex min-w-0 flex-col gap-0.5">
+            {title && (
+              <h3 className="text-sm font-semibold text-foreground">{title}</h3>
+            )}
+            <p className="text-sm text-muted-foreground">{summary}</p>
+          </div>
+        </div>
+        {showExpression && (
+          <code className="shrink-0 rounded-md bg-muted px-2.5 py-1 font-mono text-xs text-foreground">
+            {trimmed}
+          </code>
+        )}
+      </div>
+
+      {/* Next runs */}
+      {runs.length > 0 && (
+        <div className="px-4 py-3">
+          <p className="mb-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+            Next {runs.length === 1 ? 'run' : `${runs.length} runs`}
+          </p>
+          <ol className="flex flex-col gap-1">
+            {runs.map((run, i) => (
+              <li
+                key={run.toISOString()}
+                className="flex items-center gap-2 text-sm"
+              >
+                <span className="flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-[10px] font-semibold text-muted-foreground">
+                  {i + 1}
+                </span>
+                <span className="font-mono text-xs text-foreground">
+                  {formatNextRun(run)}
+                </span>
+              </li>
+            ))}
+          </ol>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default CronPreview;

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

@@ -22,3 +22,6 @@ export type { SchedulePreviewProps } from './SchedulePreview';
 
 export { CronCheatsheet } from './CronCheatsheet';
 export type { CronCheatsheetProps } from './CronCheatsheet';
+
+export { CronPreview } from './CronPreview';
+export type { CronPreviewProps } from './CronPreview';

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';
 
 // ============================================================================