sdaia-ui 1.0.1 → 1.0.2

package/src/components/MediaGallery/MediaGallery.types.ts

@@ -1,124 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-/** View mode for the image grid. */
-export type MediaGalleryView = 'list' | 'grid';
-
-/** A single image item rendered inside the gallery grid. */
-export interface MediaGalleryImage {
-  /** Unique identifier used as the React key. */
-  id: string | number;
-  /** Image source URL. When omitted renders the aspectRatio placeholder. */
-  src?: string;
-  /** Accessible alt text for the image. */
-  alt?: string;
-  /** Filename or caption displayed below the thumbnail. */
-  filename?: string;
-  /** Whether this image is currently selected (shows green border). */
-  selected?: boolean;
-  /** Called when the user toggles the selection checkbox on hover. */
-  onCheckedChange?: (checked: boolean) => void;
-  /** Called when the user clicks the delete icon on hover. */
-  onDelete?: () => void;
-  /** Called when the user clicks the Preview button on hover. */
-  onPreview?: () => void;
-  /**
-   * Label for the hover preview button.
-   * Defaults to "Preview". Pass an Arabic string for RTL contexts.
-   */
-  previewLabel?: string;
-}
-
-export interface MediaGalleryProps extends HTMLAttributes<HTMLDivElement> {
-  // ── Toolbar ────────────────────────────────────────────────────────
-  /**
-   * Show the toolbar (search + view toggle + action buttons).
-   * Default: true
-   */
-  toolbar?: boolean;
-
-  /** Controlled value for the search input. */
-  searchValue?: string;
-  /** Called when the search input value changes. */
-  onSearchChange?: (value: string) => void;
-  /** Placeholder text for the search input. Defaults to "Search". */
-  searchPlaceholder?: string;
-  /**
-   * Message shown when the search query matches no images.
-   * Defaults to "No results found".
-   */
-  emptySearchLabel?: string;
-
-  /**
-   * Currently active view mode.
-   * Controls which view-toggle button appears selected.
-   * Default: 'grid'
-   */
-  activeView?: MediaGalleryView;
-  /** Called when the user clicks a view-toggle button. */
-  onViewChange?: (view: MediaGalleryView) => void;
-
-  /**
-   * Called when the filter button is clicked.
-   * Visible on both desktop and mobile/tablet toolbars.
-   */
-  onFilterClick?: () => void;
-
-  /**
-   * Called when the delete/trash button is clicked.
-   * Receives the images that are selected at the time of the click.
-   * Desktop toolbar only.
-   */
-  onDeleteClick?: (selectedImages: MediaGalleryImage[]) => void;
-
-  /**
-   * Called when the Export button is clicked.
-   * Receives the images that are selected at the time of the click.
-   * Desktop toolbar only.
-   */
-  onExportClick?: (selectedImages: MediaGalleryImage[]) => void;
-  /** Label for the Export button. Defaults to "Export". */
-  exportLabel?: string;
-
-  /**
-   * Called when the Add button is clicked.
-   * Desktop toolbar only.
-   */
-  onAddClick?: () => void;
-  /** Label for the Add button. Defaults to "Add". */
-  addLabel?: string;
-
-  /**
-   * Called when the mobile/tablet "more" (…) button is clicked.
-   * Mobile/tablet toolbar only.
-   */
-  onMoreClick?: () => void;
-
-  // ── Grid ───────────────────────────────────────────────────────────
-  /**
-   * Array of image items to render in the gallery grid.
-   * Responsive grid columns: 2 (mobile) → 3 (tablet) → 5 (desktop).
-   * Image size scales accordingly: sm → md → lg.
-   */
-  images?: MediaGalleryImage[];
-
-  // ── Pagination ─────────────────────────────────────────────────────
-  /**
-   * Show the pagination section.
-   * Default: true
-   */
-  pagination?: boolean;
-
-  /** Current page number (1-indexed). Default: 1 */
-  currentPage?: number;
-  /** Total number of pages. Default: 1 */
-  totalPages?: number;
-  /** Called when the user navigates to a different page. */
-  onPageChange?: (page: number) => void;
-
-  // ── Direction ──────────────────────────────────────────────────────
-  /**
-   * Layout direction — set to 'rtl' for Arabic/Hebrew.
-   * Applied to the root element and forwarded to Pagination.
-   */
-  dir?: 'ltr' | 'rtl';
-}

package/src/components/MediaGallery/MediaGallery.variants.ts

@@ -1,116 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   MediaGallery.variants.ts
-   Class-name maps only — no JSX, no React imports.
-───────────────────────────────────────────────────────────── */
-
-/* ── Container ───────────────────────────────────────────────────── */
-
-/**
- * Base container styles.
- * Background: background-white token (#ffffff light, #111827 dark).
- * Border radius: radius-16 token (16px).
- *
- * Sizing:
- * - `min-w-[320px]` floor: never collapses below its smallest supported
- *   (mobile) width.
- * - `w-full` fills the parent container — the parent decides the width.
- *   Mobile (`max-w-[360px]`) and Tablet (`max-w-[600px]`) demo wrappers
- *   constrain the gallery to simulate those viewports.
- *
- * `@container` enables CSS container queries so the grid, toolbar and
- * pagination respond to the gallery's own width. This lets the
- * Mobile / Tablet / Desktop demos each render their intended layout
- * regardless of the docs viewport width.
- */
-export const CONTAINER_BASE =
-  '@container min-w-[320px] w-full bg-white dark:bg-[rgba(17,25,39,1)] rounded-[16px] flex flex-col';
-
-/**
- * Responsive padding and gap.
- * Mobile/Tablet: px=16px (spacing-xl) py=20px (spacing-2xl) gap=16px (spacing-xl).
- * Desktop (@[1000px]): p=20px (spacing-2xl) gap=24px (spacing-3xl).
- */
-export const CONTAINER_LAYOUT =
-  'px-spacing-xl py-spacing-2xl gap-spacing-xl @[1000px]:p-spacing-2xl @[1000px]:gap-spacing-3xl';
-
-/* ── Toolbar ─────────────────────────────────────────────────────── */
-
-/**
- * Mobile/tablet compact toolbar — search + 2 icon buttons (filter + more).
- * Shown when container < 1000px. Hidden at @[1000px]+.
- */
-export const TOOLBAR_MOBILE =
-  'flex items-center gap-spacing-lg shrink-0 w-full @[1000px]:hidden';
-
-/**
- * Full desktop toolbar — search 350px + view toggles + delete + filter + export + add.
- * Shown when container ≥ 1000px.
- */
-export const TOOLBAR_DESKTOP =
-  'hidden @[1000px]:flex items-center justify-between shrink-0 w-full';
-
-/** Left group inside desktop toolbar: search + view-toggle buttons. */
-export const TOOLBAR_LEFT_GROUP = 'flex items-center gap-spacing-lg';
-
-/** Right group inside desktop toolbar: delete + filter + actions. */
-export const TOOLBAR_RIGHT_GROUP = 'flex items-center gap-spacing-lg';
-
-/** Actions sub-group inside right group: Export + Add buttons. */
-export const TOOLBAR_ACTIONS = 'flex items-center gap-spacing-md';
-
-/* ── Grid ────────────────────────────────────────────────────────── */
-
-/**
- * Gap between image cards — 16px fixed.
- * Figma: gap-x-[16px] gap-y-[16px].
- */
-export const GRID_GAP = 'gap-spacing-xl';
-
-/**
- * Mobile grid: 2 columns.
- * Default layout (container < 600px). Hidden at @[600px]+.
- */
-export const GRID_MOBILE = `grid grid-cols-2 ${GRID_GAP} w-full shrink-0 @[600px]:hidden`;
-
-/**
- * Tablet grid: 3 columns.
- * Shown when container is 600px–999px.
- */
-export const GRID_TABLET = `hidden @[600px]:grid @[1000px]:hidden grid-cols-3 ${GRID_GAP} w-full shrink-0`;
-
-/**
- * Desktop grid: 5 columns.
- * Shown when container ≥ 1000px.
- */
-export const GRID_DESKTOP = `hidden @[1000px]:grid grid-cols-5 ${GRID_GAP} w-full shrink-0`;
-
-/* ── List view ───────────────────────────────────────────────────── */
-
-/** Outer list container — full width, vertical stack of rows. */
-export const LIST_CONTAINER = 'flex flex-col w-full shrink-0 divide-y divide-[rgba(210,214,219,1)] dark:divide-[rgba(56,66,80,1)]';
-
-/** A single row in list view. */
-export const LIST_ROW =
-  'flex items-center gap-spacing-md px-spacing-sm py-spacing-md w-full group hover:bg-[rgba(247,248,249,1)] dark:hover:bg-[rgba(31,42,55,1)] motion-feedback';
-
-/** Thumbnail wrapper inside a list row — fixed 48×48. */
-export const LIST_THUMBNAIL =
-  'relative flex-shrink-0 w-[80px] h-[80px] rounded-[8px] overflow-hidden border border-[rgba(210,214,219,1)] dark:border-[rgba(56,66,80,1)]';
-
-/** Filename text inside a list row. */
-export const LIST_FILENAME =
-  'flex-1 min-w-0 truncate text-text-sm font-normal text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]';
-
-/* ── Pagination wrappers ─────────────────────────────────────────── */
-
-/**
- * Wraps the mobile Pagination — hidden when container ≥ 1000px.
- * Mobile pagination: icon-only arrows + numbered cells + green bg on active cell.
- */
-export const PAGINATION_MOBILE_WRAP = '@[1000px]:hidden w-full shrink-0';
-
-/**
- * Wraps the desktop Pagination — shown when container ≥ 1000px.
- * Desktop pagination: "Previous" / "Next" text buttons + green underline on active cell.
- */
-export const PAGINATION_DESKTOP_WRAP = 'hidden @[1000px]:block w-full shrink-0';

package/src/components/MediaGallery/index.ts

@@ -1,2 +0,0 @@
-export { MediaGallery } from './MediaGallery';
-export type { MediaGalleryProps, MediaGalleryImage, MediaGalleryView } from './MediaGallery.types';

package/src/components/MediaGrids/MediaGrids.tsx

@@ -1,48 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-import { cn } from '../../lib/cn';
-import { Skeleton } from '../Skeleton';
-import type { MediaGridsProps } from './MediaGrids.types';
-import {
-  CONTAINER_WIDTH,
-  INNER_STACK_CLASS,
-  LINE_FULL_CLASS,
-  LINE_SHORT_CLASS,
-  MEDIA_BLOCK_CLASS,
-  OUTER_GAP_CLASSES,
-} from './MediaGrids.variants';
-
-export const MediaGrids = forwardRef<HTMLDivElement, MediaGridsProps>(function MediaGrids(
-  { variant = 'media-l', className, ...rest },
-  ref,
-) {
-  return (
-    <div
-      ref={ref}
-      data-slot="media-grids"
-      className={cn(
-        'flex flex-col items-start',
-        CONTAINER_WIDTH,
-        OUTER_GAP_CLASSES[variant],
-        className,
-      )}
-      {...rest}
-    >
-      {variant !== 'media-l' ? (
-        <>
-          <Skeleton data-slot="media-grids-media" className={MEDIA_BLOCK_CLASS} />
-          {variant === 'media-m' ? (
-            <Skeleton data-slot="media-grids-line-short" className={LINE_SHORT_CLASS} />
-          ) : null}
-        </>
-      ) : (
-        <div data-slot="media-grids-stack" className={INNER_STACK_CLASS}>
-          <Skeleton data-slot="media-grids-media" className={MEDIA_BLOCK_CLASS} />
-          <Skeleton data-slot="media-grids-line-full" className={LINE_FULL_CLASS} />
-          <Skeleton data-slot="media-grids-line-short" className={LINE_SHORT_CLASS} />
-        </div>
-      )}
-    </div>
-  );
-});

package/src/components/MediaGrids/MediaGrids.types.ts

@@ -1,14 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-export type MediaGridsVariant = 'media' | 'media-m' | 'media-l';
-
-export interface MediaGridsProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Layout preset for the media skeleton composition.
-   * Maps to Figma variants:
-   * - media: Media
-   * - media-m: Media / M
-   * - media-l: Media / L
-   */
-  variant?: MediaGridsVariant;
-}

package/src/components/MediaGrids/MediaGrids.variants.ts

@@ -1,16 +0,0 @@
-import type { MediaGridsVariant } from './MediaGrids.types';
-
-export const CONTAINER_WIDTH = 'w-[293.336px]';
-
-export const OUTER_GAP_CLASSES: Record<MediaGridsVariant, string> = {
-  media: '',
-  'media-m': 'gap-spacing-3xl',
-  'media-l': '',
-};
-
-export const MEDIA_BLOCK_CLASS = 'h-[220px] w-[293.336px]';
-
-export const INNER_STACK_CLASS = 'w-full flex flex-col items-start gap-spacing-3xl';
-
-export const LINE_FULL_CLASS = 'h-[16px] w-[293.336px]';
-export const LINE_SHORT_CLASS = 'h-[16px] w-[253.336px]';

package/src/components/MediaGrids/index.ts

@@ -1,2 +0,0 @@
-export { MediaGrids } from './MediaGrids';
-export type { MediaGridsProps, MediaGridsVariant } from './MediaGrids.types';

package/src/components/MediaViewer/MediaViewer.tsx

@@ -1,345 +0,0 @@
-'use client';
-
-import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { cn } from '../../lib/cn';
-import { Button } from '../Button';
-import {
-  BACKDROP,
-  CONTENT,
-  HEADER,
-  HEADER_META,
-  HEADER_FILENAME,
-  HEADER_DATE,
-  HEADER_ACTIONS,
-  HEADER_BTN,
-  IMAGE_AREA,
-  IMAGE,
-  NAV_ARROW,
-  ZOOM_CONTROLS,
-  ZOOM_BTN,
-  OVERLAY_BACKDROP,
-  OVERLAY_IMAGE_WRAP,
-  OVERLAY_IMAGE,
-  OVERLAY_HEADER_GRADIENT,
-  OVERLAY_ARROW_ROW,
-  OVERLAY_FOOTER_GRADIENT,
-  OVERLAY_ZOOM_CONTROLS,
-} from './MediaViewer.variants';
-import {
-  ArrowLeft01Icon,
-  ArrowRight01Icon,
-  ZoomInIcon,
-  MinusIcon,
-  PlusIcon,
-  ShareIcon,
-  PrintIcon,
-  CloseIcon,
-} from '../../icons/IconFactory';
-import type { MediaViewerProps } from './MediaViewer.types';
-
-/**
- * MediaViewer — full-screen lightbox for browsing and zooming images.
- *
- * Standard layout (default): [← arrow] [header / image / zoom] [→ arrow]
- * Overlay layout: image fills the frame; header, arrows, zoom are overlaid
- * inside the image using a flex-column with justify-between.
- *
- * Pixel-perfect to Figma nodes 6606:94834 (standard) and 6606:94833 (overlay).
- */
-export const MediaViewer = forwardRef<HTMLDivElement, MediaViewerProps>(
-  function MediaViewer(
-    {
-      open,
-      onClose,
-      images = [],
-      currentIndex: currentIndexProp,
-      onIndexChange,
-      zoom: zoomProp,
-      onZoomChange,
-      minZoom = 0.5,
-      maxZoom = 3,
-      zoomStep = 0.25,
-      onShare,
-      onPrint,
-      overlay = false,
-      rtl = false,
-      className,
-      ...rest
-    },
-    ref,
-  ) {
-    /* ── Index state (controlled / uncontrolled) ─────────────────── */
-    const isIndexControlled = currentIndexProp !== undefined;
-    const [internalIndex, setInternalIndex] = useState(0);
-    const activeIndex = isIndexControlled ? currentIndexProp! : internalIndex;
-
-    const setIndex = useCallback(
-      (next: number) => {
-        const clamped = Math.max(0, Math.min(images.length - 1, next));
-        if (!isIndexControlled) setInternalIndex(clamped);
-        onIndexChange?.(clamped);
-      },
-      [images.length, isIndexControlled, onIndexChange],
-    );
-
-    /* ── Zoom state (controlled / uncontrolled) ──────────────────── */
-    const isZoomControlled = zoomProp !== undefined;
-    const [internalZoom, setInternalZoom] = useState(1);
-    const activeZoom = isZoomControlled ? zoomProp! : internalZoom;
-
-    const setZoom = useCallback(
-      (next: number) => {
-        const clamped = Math.max(minZoom, Math.min(maxZoom, next));
-        if (!isZoomControlled) setInternalZoom(clamped);
-        onZoomChange?.(clamped);
-      },
-      [isZoomControlled, maxZoom, minZoom, onZoomChange],
-    );
-
-    const zoomIn  = useCallback(() => setZoom(activeZoom + zoomStep), [activeZoom, setZoom, zoomStep]);
-    const zoomOut = useCallback(() => setZoom(activeZoom - zoomStep), [activeZoom, setZoom, zoomStep]);
-    const resetZoom = useCallback(() => setZoom(1), [setZoom]);
-
-    /* ── Navigation helpers ──────────────────────────────────────── */
-    const goPrev = useCallback(() => { setIndex(activeIndex - 1); resetZoom(); }, [activeIndex, setIndex, resetZoom]);
-    const goNext = useCallback(() => { setIndex(activeIndex + 1); resetZoom(); }, [activeIndex, setIndex, resetZoom]);
-
-    /* ── Keyboard handler ────────────────────────────────────────── */
-    useEffect(() => {
-      if (!open) return;
-      const handleKey = (e: KeyboardEvent) => {
-        switch (e.key) {
-          case 'Escape':   onClose(); break;
-          case 'ArrowLeft':  rtl ? goNext() : goPrev(); break;
-          case 'ArrowRight': rtl ? goPrev() : goNext(); break;
-          case '+': case '=': zoomIn();  break;
-          case '-':           zoomOut(); break;
-        }
-      };
-      window.addEventListener('keydown', handleKey);
-      return () => window.removeEventListener('keydown', handleKey);
-    }, [open, onClose, goPrev, goNext, zoomIn, zoomOut, rtl]);
-
-    /* ── Body scroll lock ────────────────────────────────────────── */
-    useEffect(() => {
-      document.body.style.overflow = open ? 'hidden' : '';
-      return () => { document.body.style.overflow = ''; };
-    }, [open]);
-
-    /* ── Reset zoom on image change ──────────────────────────────── */
-    const prevIndexRef = useRef(activeIndex);
-    useEffect(() => {
-      if (activeIndex !== prevIndexRef.current) {
-        prevIndexRef.current = activeIndex;
-        if (!isZoomControlled) setInternalZoom(1);
-      }
-    }, [activeIndex, isZoomControlled]);
-
-    /* ── Share / print ───────────────────────────────────────────── */
-    const handleShare = () => {
-      if (onShare) { onShare(); return; }
-      const img = images[activeIndex];
-      if (typeof navigator !== 'undefined' && navigator.share) {
-        navigator.share({ title: img?.filename ?? 'Image', url: img?.src ?? window.location.href }).catch(() => {});
-      } else if (img?.src) {
-        navigator.clipboard.writeText(img.src).catch(() => {});
-      }
-    };
-
-    const handlePrint = () => {
-      if (onPrint) { onPrint(); return; }
-      window.print();
-    };
-
-    if (!open) return null;
-
-    const currentImage = images[activeIndex];
-    const hasPrev = activeIndex > 0;
-    const hasNext = activeIndex < images.length - 1;
-
-    /* RTL-aware prev/next */
-    const prevDisabled = rtl ? !hasNext : !hasPrev;
-    const nextDisabled = rtl ? !hasPrev : !hasNext;
-    const handlePrev   = rtl ? goNext : goPrev;
-    const handleNext   = rtl ? goPrev : goNext;
-
-    /* ── Image element (standard — fills its container) ─────────── */
-    const imageEl = currentImage?.src ? (
-      /* eslint-disable-next-line @next/next/no-img-element */
-      <img
-        key={currentImage.id}
-        src={currentImage.src}
-        alt={currentImage.alt ?? currentImage.filename ?? ''}
-        data-slot="viewer-image"
-        className={IMAGE}
-        style={{ transform: `scale(${activeZoom})` }}
-        draggable={false}
-      />
-    ) : (
-      /* eslint-disable-next-line @next/next/no-img-element */
-      <img
-        key={currentImage?.id ?? 'placeholder'}
-        src="/images/aspect-ratio.webp"
-        alt={currentImage?.alt ?? ''}
-        data-slot="viewer-image-placeholder"
-        className={IMAGE}
-        style={{ transform: `scale(${activeZoom})` }}
-        draggable={false}
-      />
-    );
-
-    /* ── Image element (overlay — absolute background layer) ─────── */
-    const overlayImageEl = currentImage?.src ? (
-      /* eslint-disable-next-line @next/next/no-img-element */
-      <img
-        key={currentImage.id}
-        src={currentImage.src}
-        alt={currentImage.alt ?? currentImage.filename ?? ''}
-        data-slot="viewer-image"
-        className={OVERLAY_IMAGE}
-        style={{ transform: `scale(${activeZoom})` }}
-        draggable={false}
-      />
-    ) : (
-      /* eslint-disable-next-line @next/next/no-img-element */
-      <img
-        key={currentImage?.id ?? 'placeholder'}
-        src="/images/aspect-ratio.webp"
-        alt={currentImage?.alt ?? ''}
-        data-slot="viewer-image-placeholder"
-        className={OVERLAY_IMAGE}
-        style={{ transform: `scale(${activeZoom})` }}
-        draggable={false}
-      />
-    );
-
-    /* ── Header actions (shared) ─────────────────────────────────── */
-    const headerActions = (
-      <div className={HEADER_ACTIONS}>
-        <Button type="button" iconOnly size="md" variant="secondary-outline" aria-label="Share" className={HEADER_BTN} leadingIcon={<ShareIcon width={24} height={24} />} onClick={handleShare} />
-        <Button type="button" iconOnly size="md" variant="secondary-outline" aria-label="Print" className={HEADER_BTN} leadingIcon={<PrintIcon width={24} height={24} />} onClick={handlePrint} />
-        <Button type="button" iconOnly size="md" variant="secondary-outline" aria-label="Close viewer" className={HEADER_BTN} leadingIcon={<CloseIcon width={24} height={24} />} onClick={onClose} />
-      </div>
-    );
-
-    /* ── Zoom bar — standard (no bg pill) ────────────────────────── */
-    const zoomBar = (
-      <div data-slot="viewer-zoom" className={ZOOM_CONTROLS}>
-        <Button type="button" iconOnly size="sm" variant="subtle" disabled={activeZoom <= minZoom} aria-label="Zoom out" className={ZOOM_BTN} leadingIcon={<MinusIcon />} onClick={zoomOut} />
-        <Button type="button" iconOnly size="sm" variant="subtle" aria-label={`Zoom ${Math.round(activeZoom * 100)}%. Click to reset.`} className={cn(ZOOM_BTN, 'opacity-100')} leadingIcon={<ZoomInIcon />} onClick={resetZoom} />
-        <Button type="button" iconOnly size="sm" variant="subtle" disabled={activeZoom >= maxZoom} aria-label="Zoom in" className={ZOOM_BTN} leadingIcon={<PlusIcon />} onClick={zoomIn} />
-      </div>
-    );
-
-    /* ── Zoom bar — overlay (with dark pill background) ──────────── */
-    const overlayZoomBar = (
-      <div data-slot="viewer-zoom" className={OVERLAY_ZOOM_CONTROLS}>
-        <Button type="button" iconOnly size="sm" variant="subtle" disabled={activeZoom <= minZoom} aria-label="Zoom out" className={ZOOM_BTN} leadingIcon={<MinusIcon />} onClick={zoomOut} />
-        <Button type="button" iconOnly size="sm" variant="subtle" aria-label={`Zoom ${Math.round(activeZoom * 100)}%. Click to reset.`} className={cn(ZOOM_BTN, 'opacity-100')} leadingIcon={<ZoomInIcon />} onClick={resetZoom} />
-        <Button type="button" iconOnly size="sm" variant="subtle" disabled={activeZoom >= maxZoom} aria-label="Zoom in" className={ZOOM_BTN} leadingIcon={<PlusIcon />} onClick={zoomIn} />
-      </div>
-    );
-
-    const viewer = overlay ? (
-      /* ══ OVERLAY layout ══════════════════════════════════════════
-         Figma node 6606:94833.
-         Dark backdrop with px-64px / py-80px frame around the image.
-         Inside the image wrapper: flex-col justify-between so that
-         [header-gradient] [arrow-row] [zoom-gradient] stack top → mid → bottom.
-         The <img> is absolutely positioned as the background layer.
-      ═══════════════════════════════════════════════════════════════ */
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-label={currentImage?.filename ?? 'Image viewer'}
-        dir={rtl ? 'rtl' : 'ltr'}
-        data-slot="media-viewer"
-        className={OVERLAY_BACKDROP}
-        onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
-      >
-        <div
-          ref={ref}
-          data-slot="viewer-content"
-          className={cn(OVERLAY_IMAGE_WRAP, className)}
-          {...rest}
-        >
-          {/* Background image — absolute, fills the wrapper */}
-          {overlayImageEl}
-
-          {/* Top: gradient header with filename, date and action buttons */}
-          <div data-slot="viewer-header" className={OVERLAY_HEADER_GRADIENT}>
-            <div className={HEADER_META}>
-              <span className={HEADER_FILENAME}>{currentImage?.filename ?? ''}</span>
-              {currentImage?.date && <span className={HEADER_DATE}>{currentImage.date}</span>}
-            </div>
-            {headerActions}
-          </div>
-
-          {/* Middle: arrow row — justify-between places arrows at left/right edges */}
-          {/* dir="ltr" keeps arrows in fixed visual positions regardless of RTL parent */}
-          <div dir="ltr" data-slot="viewer-arrows" className={OVERLAY_ARROW_ROW}>
-            <Button type="button" iconOnly size="lg" variant="subtle" disabled={prevDisabled} aria-label="Previous image" className={NAV_ARROW} leadingIcon={<ArrowLeft01Icon width={24} height={24} />} onClick={handlePrev} />
-            <Button type="button" iconOnly size="lg" variant="subtle" disabled={nextDisabled} aria-label="Next image" className={NAV_ARROW} leadingIcon={<ArrowRight01Icon width={24} height={24} />} onClick={handleNext} />
-          </div>
-
-          {/* Bottom: gradient footer with zoom pill */}
-          <div data-slot="viewer-footer" className={OVERLAY_FOOTER_GRADIENT}>
-            {overlayZoomBar}
-          </div>
-        </div>
-      </div>
-    ) : (
-      /* ══ STANDARD layout ═════════════════════════════════════════
-         Figma node 6606:94834.
-         Header above image, zoom below.
-         Nav arrows are flex siblings outside the content column.
-      ═══════════════════════════════════════════════════════════════ */
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-label={currentImage?.filename ?? 'Image viewer'}
-        data-slot="media-viewer"
-        className={BACKDROP}
-        onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
-      >
-        {/* Left nav arrow */}
-        <Button type="button" iconOnly size="lg" variant="subtle" disabled={prevDisabled} aria-label="Previous image" className={NAV_ARROW} leadingIcon={<ArrowLeft01Icon width={24} height={24} />} onClick={handlePrev} />
-
-        {/* Centre content column */}
-        <div
-          ref={ref}
-          dir={rtl ? 'rtl' : 'ltr'}
-          data-slot="viewer-content"
-          className={cn(CONTENT, className)}
-          {...rest}
-        >
-          {/* Header */}
-          <div data-slot="viewer-header" className={HEADER}>
-            <div className={HEADER_META}>
-              <span className={HEADER_FILENAME}>{currentImage?.filename ?? ''}</span>
-              {currentImage?.date && <span className={HEADER_DATE}>{currentImage.date}</span>}
-            </div>
-            {headerActions}
-          </div>
-
-          {/* Image */}
-          <div data-slot="viewer-image-area" className={IMAGE_AREA}>
-            {imageEl}
-          </div>
-
-          {/* Zoom */}
-          {zoomBar}
-        </div>
-
-        {/* Right nav arrow */}
-        <Button type="button" iconOnly size="lg" variant="subtle" disabled={nextDisabled} aria-label="Next image" className={NAV_ARROW} leadingIcon={<ArrowRight01Icon width={24} height={24} />} onClick={handleNext} />
-      </div>
-    );
-
-    if (typeof document !== 'undefined') {
-      return createPortal(viewer, document.body);
-    }
-    return viewer;
-  },
-);