zidane-ui 9.1.1 → 9.1.3

package/src/components/Tooltip.tsx

@@ -1,288 +0,0 @@
-/**
- * Tooltip — a small label that fades in under (or above) its trigger on
- * hover / keyboard focus, with the light menu motion (`menu` in, `menu-exit`
- * out: opacity plus a 2px slide out of the trigger's side; the fade alone
- * under reduced motion) and no layout impact (absolutely or fixed
- * positioned, non-interactive).
- *
- * Used where a native `title=` is too slow / too plain for a primary
- * control (the artifacts chip). Keep `label` short; this is not a popover.
- *
- * Timing is one model for both modes, driven here rather than by CSS hover:
- * the first show waits SHOW_DELAY so a cursor sweeping past never flashes it;
- * once any tooltip has been shown, the next one within WARM_WINDOW opens
- * instantly (moving along a toolbar reads labels one after another); keyboard
- * focus opens immediately, the user already landed on the control.
- *
- * Pressing the trigger suppresses the tooltip until the pointer leaves:
- * the user just acted, the label is noise now, and the focused button must
- * not keep it pinned. Only `:focus-visible` focus opens it, never a click
- * focus. Escape hides it (WCAG 1.4.13) until the pointer and focus leave.
- */
-import { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-
-import { readMenuExitMs, usePresence } from '../motion/presence';
-import { useMotionLevel } from '../motion/reduced';
-
-/** Props for {@link Tooltip}. */
-export interface TooltipProps {
-  /** The tooltip content. Keep it short. */
-  label: ReactNode;
-  /** Where the bubble sits relative to the trigger. */
-  side?: 'bottom' | 'top';
-  /** Horizontal anchor. `end` right-aligns the bubble with the trigger's right edge. */
-  align?: 'center' | 'end';
-  /** The trigger. Hovering it, or keyboard focus on it, shows the tooltip. */
-  children: ReactNode;
-  /** Extra classes on the wrapping element. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-  /**
-   * Render the bubble into `document.body` with fixed positioning instead of
-   * inside the host. Needed when the host sits in an `overflow` container
-   * (a scrolling list) that would otherwise clip the bubble. Position is
-   * measured when it opens; the same enter motion applies.
-   */
-  portal?: boolean;
-  /** Wrap long labels at this width (px) instead of one line. */
-  maxWidth?: number;
-  /** Never opens, while the trigger's own surface is open (a popover over the same spot). */
-  disabled?: boolean;
-}
-
-const BUBBLE =
-  // The floating tone and shadow, at tooltip scale.
-  'zg-tooltip pointer-events-none px-2 py-1 rounded-zg-sm text-zg-meta leading-4 text-[var(--zg-text)] bg-[var(--zg-overlay)] shadow-[var(--zg-shadow-float)]';
-
-const SHOW_DELAY = 400;
-const WARM_WINDOW = 600;
-
-// Shared by every Tooltip on the page: how many are open, and when the last
-// one closed. Together they decide whether a new hover skips the delay.
-let openCount = 0;
-let lastClosedAt = -Infinity;
-const isWarm = () => openCount > 0 || performance.now() - lastClosedAt < WARM_WINDOW;
-// The last tooltip to close, still fading out: the next one to open makes it
-// vanish at once, so two bubbles never show together along a toolbar.
-let fadingOut: (() => void) | null = null;
-
-const FOCUSABLE = 'button, a[href], input, select, textarea, [contenteditable], [tabindex]:not([tabindex="-1"])';
-
-function isFocusVisible(el: Element): boolean {
-  try {
-    return el.matches(':focus-visible');
-  } catch {
-    // Engines without the selector: treat any focus as keyboard focus.
-    return true;
-  }
-}
-
-/**
- * Renders a small label that fades in under or above its trigger on hover or keyboard focus.
- * The first one waits about 400 ms so a passing cursor never flashes it, a following one
- * within 600 ms opens at once, and focus opens it immediately. Pressing the trigger or Esc
- * hides it until the pointer and focus leave. The bubble describes the trigger through
- * `aria-describedby` and is not interactive.
- *
- * @param props - Component props.
- */
-export function Tooltip({
-  label,
-  side = 'bottom',
-  align = 'center',
-  children,
-  className = '',
-  style,
-  portal = false,
-  maxWidth,
-  disabled = false,
-}: TooltipProps) {
-  const y = side === 'bottom' ? 'top-full mt-1.5' : 'bottom-full mb-1.5';
-  const x = align === 'end' ? 'right-0' : 'left-1/2 -translate-x-1/2';
-  const id = useId();
-  const [suppressed, setSuppressed] = useState(false);
-  const [dismissed, setDismissed] = useState(false);
-  const [hovered, setHovered] = useState(false);
-  const [focused, setFocused] = useState(false);
-  const [vanished, setVanished] = useState(false);
-  const hostRef = useRef<HTMLSpanElement>(null);
-  const bubbleRef = useRef<HTMLSpanElement>(null);
-  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  // The pointer is over the host, shown or not yet: `hovered` lags it by the show delay.
-  const pointerInside = useRef(false);
-  const [pos, setPos] = useState<{ left: number; top: number; side: 'bottom' | 'top' } | null>(null);
-  const open = !disabled && (hovered || focused) && !suppressed && !dismissed;
-  // `closing` marks the exit (it fades without sliding back). Portal mode also mounts closed, flips
-  // open once placed (so the enter plays) and stays mounted through the exit.
-  const presence = usePresence(open, { enter: portal, exitMs: readMenuExitMs });
-  const moves = useMotionLevel() === 'full';
-
-  useEffect(() => () => clearTimeout(timer.current), []);
-
-  // Feed the shared warm state, and give way to the next tooltip once closed.
-  useEffect(() => {
-    if (!open) return;
-    openCount += 1;
-    fadingOut?.();
-    fadingOut = null;
-    setVanished(false);
-    return () => {
-      openCount -= 1;
-      lastClosedAt = performance.now();
-      fadingOut = () => setVanished(true);
-    };
-  }, [open]);
-  const gone = vanished && !open;
-
-  // Describe the focusable trigger, not the wrapper: assistive tech reads the
-  // description of the focused element. Only while open, so a hidden bubble
-  // is never announced.
-  useEffect(() => {
-    const host = hostRef.current;
-    if (!open || !host) return;
-    const target = host.querySelector<HTMLElement>(FOCUSABLE) ?? host.firstElementChild;
-    if (!target) return;
-    const prev = target.getAttribute('aria-describedby');
-    target.setAttribute('aria-describedby', prev ? `${prev} ${id}` : id);
-    return () => {
-      if (prev === null) target.removeAttribute('aria-describedby');
-      else target.setAttribute('aria-describedby', prev);
-    };
-  }, [open, id]);
-
-  // Escape hides the bubble wherever focus is (it may be open from hover
-  // alone). Captured on window and stopped so the same press does not also
-  // close the dialog or menu around the trigger; the listener only exists
-  // while the bubble is open, so Escape is untouched otherwise.
-  useEffect(() => {
-    if (!open) return;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key !== 'Escape') return;
-      e.stopPropagation();
-      setDismissed(true);
-    };
-    window.addEventListener('keydown', onKey, true);
-    return () => window.removeEventListener('keydown', onKey, true);
-  }, [open]);
-
-  // Portal placement: measure host + bubble once both exist, clamp to the
-  // viewport so a wide description never runs off-screen.
-  useLayoutEffect(() => {
-    if (!portal || !open) return;
-    const host = hostRef.current?.getBoundingClientRect();
-    const bubble = bubbleRef.current?.getBoundingClientRect();
-    if (!host || !bubble) return;
-    let placed = side;
-    const gap = 6;
-    const margin = 8;
-    let left = align === 'end' ? host.right - bubble.width : host.left + host.width / 2 - bubble.width / 2;
-    left = Math.max(margin, Math.min(left, window.innerWidth - bubble.width - margin));
-    let top = side === 'bottom' ? host.bottom + gap : host.top - gap - bubble.height;
-    if (top < margin) {
-      top = host.bottom + gap;
-      placed = 'bottom';
-    }
-    if (top + bubble.height > window.innerHeight - margin) {
-      top = host.top - gap - bubble.height;
-      placed = 'top';
-    }
-    setPos({ left, top, side: placed });
-  }, [portal, open, align, side, label]);
-
-  const reset = () => {
-    setSuppressed(false);
-    setDismissed(false);
-  };
-
-  // Visibility and motion live inline so both modes share the JS timing; they
-  // are the only source of the tooltip's visibility (primitives.css keeps the hidden default).
-  const shown = portal ? presence.state === 'open' && pos !== null : open;
-  // Hidden before showing: 2px back toward the trigger (above it for a bubble below). Leaving: no slide.
-  const placedSide = (portal && pos?.side) || side;
-  const rise = shown || !moves || presence.state === 'closing' ? '0' : placedSide === 'bottom' ? '-2px' : '2px';
-  const motion: CSSProperties = {
-    opacity: shown ? 1 : 0,
-    transform: !portal && align === 'center' ? `translate(-50%, ${rise})` : `translateY(${rise})`,
-    transition: shown
-      ? 'opacity calc(var(--zg-motion-menu-duration) * 0.7) var(--zg-motion-menu-ease), transform var(--zg-motion-menu)'
-      : gone
-        ? 'none'
-        : 'opacity var(--zg-motion-menu-exit), transform var(--zg-motion-menu-exit)',
-    // The shorthand also resets transition-delay, dropping the CSS hover delay.
-  };
-
-  const bubble = portal ? (
-    presence.mounted &&
-    !gone &&
-    createPortal(
-      <span
-        ref={bubbleRef}
-        role="tooltip"
-        id={id}
-        // Above every floating layer (popovers, modals): a portaled bubble
-        // describes whatever it was hovered on, often a row inside a popover.
-        className={`${BUBBLE} fixed z-zg-tooltip`}
-        data-portal
-        style={{ ...motion, left: pos?.left ?? -9999, top: pos?.top ?? -9999, maxWidth }}
-      >
-        {label}
-      </span>,
-      document.body,
-    )
-  ) : (
-    <span
-      role="tooltip"
-      id={id}
-      // Always in the DOM (invisible when closed): hidden from the tree so it is
-      // never read as page text; `aria-describedby` still reaches it while open.
-      aria-hidden
-      className={`${BUBBLE} absolute z-30 ${maxWidth === undefined ? 'whitespace-nowrap' : 'w-max'} ${y} ${x}`}
-      style={{ ...motion, maxWidth }}
-    >
-      {label}
-    </span>
-  );
-
-  return (
-    // A passive wrapper: the keyboard handling belongs to the focusable child,
-    // these listeners only observe its focus and the pointer around it.
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <span
-      ref={hostRef}
-      className={`relative inline-flex ${className}`}
-      style={style}
-      // Pressing the trigger, by pointer or by its activation keys.
-      onPointerDown={() => setSuppressed(true)}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') setSuppressed(true);
-      }}
-      onMouseEnter={() => {
-        pointerInside.current = true;
-        clearTimeout(timer.current);
-        if (isWarm()) setHovered(true);
-        else timer.current = setTimeout(() => setHovered(true), SHOW_DELAY);
-      }}
-      onMouseLeave={() => {
-        pointerInside.current = false;
-        clearTimeout(timer.current);
-        setHovered(false);
-        if (!focused) reset();
-      }}
-      onFocus={(e) => {
-        if (isFocusVisible(e.target)) setFocused(true);
-      }}
-      onBlur={(e) => {
-        if (hostRef.current?.contains(e.relatedTarget as Node | null)) return;
-        setFocused(false);
-        // A press that moved focus away (it opened a menu) still holds until the pointer leaves.
-        if (!pointerInside.current) reset();
-      }}
-      {...(suppressed ? { 'data-tooltip-suppressed': '' } : {})}
-    >
-      {children}
-      {bubble}
-    </span>
-  );
-}

package/src/components/ZoomableImage.tsx

@@ -1,322 +0,0 @@
-/**
- * An image you can zoom into, pan and copy: the viewer of the lightbox and
- * of the Files editor's media.
- *
- *   viewport  fills its parent, clips, takes the gestures
- *   └ layer   the zoom: translate + scale (the compositor moves it)
- *     └ img   at its fit size, centred; free for its owner's own motion
- *               (the lightbox grows it out of a thumbnail)
- *
- * Gestures: the wheel and a trackpad pinch zoom toward the pointer; a drag
- * pans while zoomed in; a double-click goes from fit to the real size at the
- * pointer and back. From fit up to {@link MAX_REAL_SCALE}× the real size
- * (`zoom.ts`), the image never leaving the view. While zoomed, a chip says
- * the share of the real size and goes back to fit. The owner drives the keys
- * through the handle (`zoomIn`, `zoomOut`, `reset`): the lightbox already
- * owns the keyboard while it is open.
- *
- * Motion: a wheel, a pinch or a drag moves the image as it goes, frame by
- * frame; a double-click, a key or the chip glide there on `settle`, so the
- * Appearance motion setting applies (motion off: they land at once).
- *
- * Right-click on the image: copy it as an image, as Base64 or as a data URL
- * (`image-clipboard.ts`).
- */
-import {
-  forwardRef,
-  lazy,
-  Suspense,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useLayoutEffect,
-  useRef,
-  useState,
-  type CSSProperties,
-  type MouseEvent,
-  type PointerEvent,
-  type SyntheticEvent,
-} from 'react';
-
-import { useLabels } from '../labels';
-import { copyImage, copyImageBase64, copyImageDataUrl } from './image-clipboard';
-import type { RowActionItem } from './RowActionsMenu';
-import { FIT, panZoom, realPercent, stepZoom, toggleZoom, wheelZoom, type ZoomGeometry, type ZoomState } from './zoom';
-
-export { MAX_REAL_SCALE } from './zoom';
-
-/** What the owner of a {@link ZoomableImage} drives it with. */
-export interface ZoomableImageHandle {
-  /** One step in, around the centre. */
-  zoomIn(): void;
-  /** One step out, around the centre. */
-  zoomOut(): void;
-  /** Back to fit. */
-  reset(): void;
-  /** Whether it is zoomed in now. */
-  zoomed(): boolean;
-}
-
-/** Props for {@link ZoomableImage}. */
-export interface ZoomableImageProps {
-  /** The image's address. */
-  src: string;
-  /** The image's alt text. */
-  alt: string;
-  /** Receives the `<img>` element (the lightbox animates it). */
-  imgRef?: (element: HTMLImageElement | null) => void;
-  /** Classes on the `<img>`: its fit size and look. */
-  imgClassName?: string;
-  /** The image's tooltip. */
-  imgTitle?: string;
-  /** Test id on the `<img>`. */
-  imgTestId?: string;
-  /** The image decoded. */
-  onLoad?: (event: SyntheticEvent<HTMLImageElement>) => void;
-  /** The image failed to load. */
-  onError?: () => void;
-  /** A click on the viewport around the image (never the end of a drag). */
-  onBackdropClick?: () => void;
-  /** The right-click menu opened or closed: an owner with keys of its own leaves them to the menu meanwhile. */
-  onMenuOpenChange?: (open: boolean) => void;
-  /** Extra classes on the viewport. */
-  className?: string;
-  /** Inline styles on the viewport. */
-  style?: CSSProperties;
-}
-
-/**
- * The right-click menu, loaded on the first right-click: its floating surface and motion would
- * otherwise ride along with every page that shows an image (a lightbox in a transcript).
- */
-const RowActionsMenu = lazy(() => import('./RowActionsMenu').then((m) => ({ default: m.RowActionsMenu })));
-
-/** Pointer travel, in CSS pixels, past which a press is a drag (and its click is dropped). */
-const DRAG_SLOP = 3;
-/** A wheel in lines (`deltaMode` 1) scrolls about this many pixels a line. */
-const LINE_PX = 16;
-
-/**
- * Renders an image that zooms toward the pointer, pans, and copies from its right-click menu. Fills its parent.
- *
- * @param props - Component props: the `src` and `alt`, the `<img>`'s classes and callbacks, and the backdrop click.
- */
-export const ZoomableImage = forwardRef<ZoomableImageHandle, ZoomableImageProps>(function ZoomableImage(
-  {
-    src,
-    alt,
-    imgRef,
-    imgClassName = '',
-    imgTitle,
-    imgTestId,
-    onLoad,
-    onError,
-    onBackdropClick,
-    onMenuOpenChange,
-    className = '',
-    style,
-  },
-  ref,
-) {
-  const labels = useLabels();
-  const viewportRef = useRef<HTMLDivElement>(null);
-  const layerRef = useRef<HTMLDivElement>(null);
-  const imageRef = useRef<HTMLImageElement | null>(null);
-  // The zoom, the measures it was computed against (for the chip), and whether to glide there.
-  const [view, setView] = useState<{ zoom: ZoomState; geometry: ZoomGeometry | null; glide: boolean }>({
-    zoom: FIT,
-    geometry: null,
-    glide: false,
-  });
-  // The zoom as last rendered, for the handle and the resize observer.
-  const zoomRef = useRef(view.zoom);
-  useLayoutEffect(() => {
-    zoomRef.current = view.zoom;
-  });
-  const [dragging, setDragging] = useState(false);
-  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);
-  // Mounted from the first right-click on: kept for its exit and the next opening.
-  const [menuArmed, setMenuArmed] = useState(false);
-  const drag = useRef<{ id: number; x: number; y: number; moved: boolean } | null>(null);
-  const dropClick = useRef(false);
-
-  /** The frame and the image as laid out now; `null` before the image has a size. */
-  const measure = useCallback((): ZoomGeometry | null => {
-    const frame = viewportRef.current;
-    const image = imageRef.current;
-    if (!frame || !image || image.naturalWidth === 0 || image.offsetWidth === 0) return null;
-    return {
-      frame: { w: frame.clientWidth, h: frame.clientHeight },
-      // Layout sizes: the zoom layer's transform does not change them.
-      base: { w: image.offsetWidth, h: image.offsetHeight },
-      natural: { w: image.naturalWidth, h: image.naturalHeight },
-    };
-  }, []);
-
-  const apply = useCallback(
-    (next: (zoom: ZoomState, geometry: ZoomGeometry) => ZoomState, glide: boolean) => {
-      const geometry = measure();
-      if (!geometry) return;
-      setView((current) => ({ zoom: next(current.zoom, geometry), geometry, glide }));
-    },
-    [measure],
-  );
-
-  /** A point of the viewport, from its centre. */
-  const fromCentre = (clientX: number, clientY: number) => {
-    const rect = viewportRef.current!.getBoundingClientRect();
-    return { x: clientX - rect.left - rect.width / 2, y: clientY - rect.top - rect.height / 2 };
-  };
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      zoomIn: () => apply((zoom, geometry) => stepZoom(zoom, 1, geometry), true),
-      zoomOut: () => apply((zoom, geometry) => stepZoom(zoom, -1, geometry), true),
-      reset: () => apply(() => FIT, true),
-      zoomed: () => zoomRef.current.scale > 1,
-    }),
-    [apply],
-  );
-
-  // The wheel, listened to natively: React's wheel listener is passive, and the page must not scroll.
-  useEffect(() => {
-    const viewport = viewportRef.current;
-    if (!viewport) return undefined;
-    const onWheel = (event: WheelEvent) => {
-      event.preventDefault();
-      const at = fromCentre(event.clientX, event.clientY);
-      const delta = event.deltaMode === 1 ? event.deltaY * LINE_PX : event.deltaY;
-      apply((zoom, geometry) => wheelZoom(zoom, delta, event.ctrlKey, at, geometry), false);
-    };
-    viewport.addEventListener('wheel', onWheel, { passive: false });
-    return () => viewport.removeEventListener('wheel', onWheel);
-  }, [apply]);
-
-  // A resized frame (a window, a pane) keeps the image within it.
-  useEffect(() => {
-    const viewport = viewportRef.current;
-    if (!viewport || typeof ResizeObserver === 'undefined') return undefined;
-    const observer = new ResizeObserver(() => {
-      if (zoomRef.current.scale > 1) apply((zoom, geometry) => panZoom(zoom, 0, 0, geometry), false);
-    });
-    observer.observe(viewport);
-    return () => observer.disconnect();
-  }, [apply]);
-
-  const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {
-    // Only a press on the image's layer pans: the chip and the menu take their own clicks.
-    if (event.button !== 0 || view.zoom.scale === 1 || !layerRef.current?.contains(event.target as Node)) return;
-    drag.current = { id: event.pointerId, x: event.clientX, y: event.clientY, moved: false };
-  };
-  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {
-    const at = drag.current;
-    if (!at || at.id !== event.pointerId) return;
-    const dx = event.clientX - at.x;
-    const dy = event.clientY - at.y;
-    if (!at.moved && Math.hypot(dx, dy) < DRAG_SLOP) return;
-    if (!at.moved) {
-      // A drag from here on: the pointer stays ours even past the viewport's edge.
-      event.currentTarget.setPointerCapture(event.pointerId);
-      setDragging(true);
-    }
-    at.moved = true;
-    at.x = event.clientX;
-    at.y = event.clientY;
-    apply((zoom, geometry) => panZoom(zoom, dx, dy, geometry), false);
-  };
-  const onPointerUp = (event: PointerEvent<HTMLDivElement>) => {
-    const at = drag.current;
-    if (!at || at.id !== event.pointerId) return;
-    dropClick.current = at.moved;
-    drag.current = null;
-    setDragging(false);
-  };
-  const onClick = (event: MouseEvent<HTMLDivElement>) => {
-    if (dropClick.current) {
-      dropClick.current = false;
-      return;
-    }
-    if (event.target !== imageRef.current) onBackdropClick?.();
-  };
-
-  const openMenu = (open: { x: number; y: number } | null) => {
-    if (open) setMenuArmed(true);
-    setMenu(open);
-    onMenuOpenChange?.(open !== null);
-  };
-  const copy = (run: (src: string) => Promise<void>) => () => void run(src).catch(() => {});
-  const items: RowActionItem[] = [
-    { id: 'copy-image', label: labels.copyImage, onSelect: copy(copyImage) },
-    { id: 'copy-base64', label: labels.copyImageBase64, onSelect: copy(copyImageBase64) },
-    { id: 'copy-data-url', label: labels.copyImageDataUrl, onSelect: copy(copyImageDataUrl) },
-  ];
-
-  const zoomed = view.zoom.scale > 1;
-  return (
-    <div
-      ref={viewportRef}
-      className={`zg-zoom ${className}`}
-      style={style}
-      data-zoomed={zoomed ? '' : undefined}
-      data-dragging={dragging ? '' : undefined}
-      onPointerDown={onPointerDown}
-      onPointerMove={onPointerMove}
-      onPointerUp={onPointerUp}
-      onPointerCancel={onPointerUp}
-      onClick={onClick}
-      onDoubleClick={(event) => {
-        const at = fromCentre(event.clientX, event.clientY);
-        apply((zoom, geometry) => toggleZoom(zoom, at, geometry), true);
-      }}
-      role="presentation"
-    >
-      <div
-        ref={layerRef}
-        className="zg-zoom-layer"
-        data-glide={view.glide ? '' : undefined}
-        style={{ transform: `translate(${view.zoom.x}px, ${view.zoom.y}px) scale(${view.zoom.scale})` }}
-      >
-        <img
-          ref={(element) => {
-            imageRef.current = element;
-            imgRef?.(element);
-          }}
-          src={src}
-          alt={alt}
-          title={imgTitle}
-          draggable={false}
-          decoding="async"
-          data-testid={imgTestId}
-          onLoad={onLoad}
-          onError={onError}
-          onContextMenu={(event) => {
-            event.preventDefault();
-            openMenu({ x: event.clientX, y: event.clientY });
-          }}
-          className={imgClassName}
-        />
-      </div>
-      {zoomed && view.geometry && (
-        <button
-          type="button"
-          aria-label={labels.zoomFit}
-          title={labels.zoomFit}
-          data-testid="zoom-chip"
-          onClick={(event) => {
-            event.stopPropagation();
-            apply(() => FIT, true);
-          }}
-          className="zg-zoom-chip zg-raised zg-press-soft zg-meta"
-        >
-          {labels.zoomPercent(realPercent(view.zoom, view.geometry))}
-        </button>
-      )}
-      {menuArmed && (
-        <Suspense fallback={null}>
-          <RowActionsMenu open={menu !== null} position={menu} onClose={() => openMenu(null)} items={items} />
-        </Suspense>
-      )}
-    </div>
-  );
-});