@12-apps/ui 6.41.1 → 6.42.0

package/src/components/layout/SettingsLayout/SettingsSectionChips.scroll.ts

@@ -21,6 +21,24 @@ const LANDED_SLACK = 1;
  */
 const QUIET_BEFORE_SETTLED_MS = 250;
 
+/**
+ * How much `scrollLeft` has to move, tick to tick, before a `scroll` event is
+ * even a CANDIDATE for arming (FUT-2775). Below this, a browser's own rounding
+ * or a repeated event carrying no real motion cannot arm anything by itself.
+ *
+ * This alone does not stop the false latch the ticket describes: the strip's
+ * own `scrollTo` produces real per-tick deltas well past this line, same as a
+ * drag would. It only rules out a scroll event that moved nothing.
+ */
+const SCROLL_DELTA_EPSILON = 2;
+
+/**
+ * How far a pointer or touch has to travel from where it went down before it
+ * counts as having MOVED, rather than merely resting (FUT-2775). Below this,
+ * an held-still finger's sub-pixel tremor does not count as a drag.
+ */
+const POINTER_MOVE_EPSILON = 2;
+
 interface VisitorScrollWatch {
   /** True once the visitor has moved the strip themselves. */
   hasScrolled: () => boolean;
@@ -29,10 +47,14 @@ interface VisitorScrollWatch {
    * strip must not scroll itself under it: that would yank a drag in progress.
    */
   isUndecided: () => boolean;
-  /** Where the strip last aimed itself, in its own pixels; `NaN` before it has. */
+  /**
+   * Where the strip last aimed itself, PHYSICAL pixels (see {@link physicalScrollLeft}) —
+   * direction-blind, like every other geometry read in this file. `NaN` before it has.
+   */
   aimedAt: () => number;
   /**
-   * The strip is about to scroll itself to `left`. Records the aim and NOTHING
+   * The strip is about to scroll itself to `left` (physical pixels). Records the
+   * aim and NOTHING
    * else: it used to disarm too, and a re-centre landing between a visitor's key
    * press (or wheel, or pan) and the first tick of the scroll it causes wiped
    * the arming — their scroll went unclaimed, read as the strip's own. Left
@@ -62,13 +84,172 @@ interface WatchState {
   aimed: number;
   quiet: ReturnType<typeof setTimeout> | undefined;
   settled: () => void;
+  /** `scrollLeft` as of the last `scroll` tick, updated every tick regardless of arming. */
+  lastScrollLeft: number;
+  /** Where a `pointerdown` on the strip landed, in viewport `clientX`. `NaN` while up. */
+  pointerDownAt: number;
+  /** True once that pointer has travelled past {@link POINTER_MOVE_EPSILON} from `pointerDownAt`. */
+  pointerMoved: boolean;
+  /** Same pair, for `touchstart`/`touchmove` — a distinct event stream on some engines. */
+  touchDownAt: number;
+  touchMoved: boolean;
+}
+
+type RtlScrollType = 'default' | 'negative' | 'reverse';
+
+let cachedRtlScrollType: RtlScrollType | undefined;
+
+/**
+ * Which of the three incompatible conventions this engine reports an RTL
+ * scroller's `scrollLeft` in, probed once and cached (FUT-2775).
+ *
+ * Per the CSSOM View spec, an RTL scroller's `scrollLeft` is `0` at its
+ * (right-hand) start and goes NEGATIVE toward the end — `'negative'` below,
+ * what every current evergreen engine implements. Older WebKit mirrored that
+ * (`'reverse'`: `0` at the start, growing toward `+max`), and older
+ * Chromium/Safari ignored `dir` altogether and kept the plain left-to-right
+ * numbering (`'default'`). A hidden probe, not a version sniff, tells them
+ * apart — the same technique `@mui/utils`'s `detectScrollType` uses for
+ * `Tabs`; reimplemented here rather than taking a new dependency for one
+ * probe.
+ */
+function detectRtlScrollType(doc: Document): RtlScrollType {
+  if (cachedRtlScrollType) return cachedRtlScrollType;
+  // The exact pixel values below are the probe's mechanism, not a design size:
+  // what matters is only that the INNER box is wider than the OUTER one, so the
+  // outer one has something to scroll — same technique `@mui/utils` uses,
+  // detached and off-screen either way.
+  const probe = doc.createElement('div');
+  const inner = doc.createElement('div');
+  inner.style.width = '10px';
+  probe.appendChild(inner);
+  probe.dir = 'rtl';
+  probe.style.width = '4px';
+  probe.style.position = 'absolute';
+  probe.style.top = '-1000px';
+  probe.style.overflow = 'scroll';
+  doc.body.appendChild(probe);
+  let type: RtlScrollType = 'reverse';
+  if (probe.scrollLeft > 0) {
+    type = 'default';
+  } else {
+    probe.scrollLeft = 1;
+    if (probe.scrollLeft === 0) type = 'negative';
+  }
+  doc.body.removeChild(probe);
+  cachedRtlScrollType = type;
+  return type;
+}
+
+/** True when the strip's own computed direction is right-to-left. */
+export function isRtlStrip(strip: HTMLElement): boolean {
+  const view = strip.ownerDocument.defaultView;
+  const getComputedStyle = view?.getComputedStyle ?? globalThis.getComputedStyle;
+  return getComputedStyle(strip).direction === 'rtl';
+}
+
+/**
+ * `strip.scrollLeft`, renumbered so `0` is always the strip's physical LEFT
+ * edge and larger is always further physically right — whatever `direction`
+ * and whatever convention this engine uses to report it raw (FUT-2775).
+ *
+ * Every geometry read in this file (`getBoundingClientRect`) is already in
+ * that same physical, direction-blind coordinate space, so this is what makes
+ * `scrollLeft` combinable with it at all.
+ */
+export function physicalScrollLeft(strip: HTMLElement): number {
+  const raw = strip.scrollLeft;
+  if (!isRtlStrip(strip)) return raw;
+  const max = strip.scrollWidth - strip.clientWidth;
+  const type = detectRtlScrollType(strip.ownerDocument);
+  if (type === 'negative') return raw + max;
+  if (type === 'reverse') return max - raw;
+  return raw;
+}
+
+/** The inverse of {@link physicalScrollLeft}: a physical offset back to this engine's raw `scrollLeft`. */
+export function toRawScrollLeft(strip: HTMLElement, physical: number): number {
+  if (!isRtlStrip(strip)) return physical;
+  const max = strip.scrollWidth - strip.clientWidth;
+  const type = detectRtlScrollType(strip.ownerDocument);
+  if (type === 'negative') return physical - max;
+  if (type === 'reverse') return max - physical;
+  return physical;
 }
 
 /** Whether the strip came to rest where it last aimed itself — clamped as the browser would. */
 function restsOnAim(strip: HTMLElement, aimed: number): boolean {
   const reachable = Math.min(aimed, strip.scrollWidth - strip.clientWidth);
   // Written so that `NaN` — the strip never aimed — reads as "not on aim".
-  return Math.abs(strip.scrollLeft - reachable) <= LANDED_SLACK;
+  return Math.abs(physicalScrollLeft(strip) - reachable) <= LANDED_SLACK;
+}
+
+/** The pointer/touch/keydown/wheel listeners that arm `state`, split out of `watchVisitorScroll` (line budget). */
+function createGestureListeners(state: WatchState): { onStrip: Listeners; onView: Listeners } {
+  // `MouseEvent`, not `PointerEvent`: a real `PointerEvent` IS one (it extends
+  // `MouseEvent`), so this reads `clientX` off it just the same in a browser —
+  // but jsdom (this file's own test environment) has never implemented
+  // `PointerEvent` at all, and the bare identifier throws a `ReferenceError`
+  // the moment anything evaluates `instanceof PointerEvent`, pointer event or
+  // not. Same reasoning as feature-checking `scrollTo` elsewhere in this file:
+  // nothing in here is worth a crash over which constructor a probe prefers.
+  const onPointerDown = (event: Event): void => {
+    state.pointer = true;
+    state.pointerMoved = false;
+    state.pointerDownAt = event instanceof MouseEvent ? event.clientX : Number.NaN;
+  };
+  const onPointerMove = (event: Event): void => {
+    if (!(event instanceof MouseEvent) || Number.isNaN(state.pointerDownAt)) return;
+    if (Math.abs(event.clientX - state.pointerDownAt) > POINTER_MOVE_EPSILON) state.pointerMoved = true;
+  };
+  const onPointerUp = (): void => {
+    state.pointer = false;
+    state.pointerDownAt = Number.NaN;
+  };
+  const onTouchStart = (event: Event): void => {
+    state.touch = true;
+    state.touchMoved = false;
+    state.touchDownAt = event instanceof TouchEvent ? (event.touches[0]?.clientX ?? Number.NaN) : Number.NaN;
+  };
+  const onTouchMove = (event: Event): void => {
+    if (!(event instanceof TouchEvent) || Number.isNaN(state.touchDownAt)) return;
+    const clientX = event.touches[0]?.clientX;
+    if (clientX !== undefined && Math.abs(clientX - state.touchDownAt) > POINTER_MOVE_EPSILON) {
+      state.touchMoved = true;
+    }
+  };
+  const onTouchEnd = (): void => {
+    state.touch = false;
+    state.touchDownAt = Number.NaN;
+  };
+  const onPointerCancel = (): void => {
+    state.nudged = true;
+    onPointerUp();
+  };
+  const onKeydown = (): void => {
+    state.nudged = true;
+  };
+  const onWheel = (event: Event): void => {
+    if (horizontalDelta(event) !== 0) state.nudged = true;
+  };
+  return {
+    onStrip: [
+      ['pointerdown', onPointerDown],
+      ['pointermove', onPointerMove],
+      ['touchstart', onTouchStart],
+      ['touchmove', onTouchMove],
+      ['pointercancel', onPointerCancel],
+      ['keydown', onKeydown],
+      ['wheel', onWheel],
+    ],
+    // A gesture can END off the strip, so its end is heard on the window.
+    onView: [
+      ['pointerup', onPointerUp],
+      ['pointercancel', onPointerUp],
+      ['touchend', onTouchEnd],
+      ['touchcancel', onTouchEnd],
+    ],
+  };
 }
 
 /**
@@ -115,12 +296,12 @@ export function watchVisitorScroll(strip: HTMLElement): VisitorScrollWatch {
     aimed: Number.NaN,
     quiet: undefined,
     settled: () => undefined,
+    lastScrollLeft: physicalScrollLeft(strip),
+    pointerDownAt: Number.NaN,
+    pointerMoved: false,
+    touchDownAt: Number.NaN,
+    touchMoved: false,
   };
-  const set =
-    (key: 'pointer' | 'touch' | 'nudged', value: boolean) =>
-    (): void => {
-      state[key] = value;
-    };
   const settle = (): void => {
     // Only a scroll that was UNDER JUDGEMENT disarms. Chromium can end the
     // strip's own smooth scroll with a `scrollend` when another scroll cuts it
@@ -132,33 +313,36 @@ export function watchVisitorScroll(strip: HTMLElement): VisitorScrollWatch {
     if (!restsOnAim(strip, state.aimed)) state.scrolled = true;
     state.settled();
   };
-  const onWheel = (event: Event): void => {
-    if (horizontalDelta(event) !== 0) state.nudged = true;
-  };
   const onScroll = (): void => {
-    if (state.pointer || state.touch || state.nudged) state.undecided = true;
+    const now = physicalScrollLeft(strip);
+    const movedFarEnough = Math.abs(now - state.lastScrollLeft) > SCROLL_DELTA_EPSILON;
+    state.lastScrollLeft = now;
+    // Pointer/touch need BOTH signals (FUT-2775): the pointer/finger must have
+    // itself MOVED since going down, AND this tick's delta must be real. Either
+    // alone still latches on the other's shape — a pointer merely resting on
+    // the strip while its OWN `scrollTo` produces real per-tick deltas would
+    // arm under a delta-only check (`pointerMoved`/`touchMoved` rules that out);
+    // a pointer that drifts a sub-epsilon amount while resting would arm under
+    // a moved-only check with no delta floor (`movedFarEnough` rules that out).
+    const pointerDrag = state.pointer && state.pointerMoved && movedFarEnough;
+    const touchDrag = state.touch && state.touchMoved && movedFarEnough;
+    // `nudged` (a keypress, a sideways wheel, the browser taking the pointer
+    // over to pan) is already a discrete, one-shot gesture with no "resting
+    // pointer coincides with an unrelated animation" shape to rule out — unlike
+    // pointer/touch, requiring a delta on the SAME tick that arms it would only
+    // race the strip's own scroll ending before a qualifying tick arrives (seen:
+    // it broke the existing "keeps a wheel/drag scroll" stories against a real
+    // browser's `scrollend` timing). So it arms as it always has.
+    if (pointerDrag || touchDrag || state.nudged) state.undecided = true;
     if (!state.undecided || hasScrollEnd) return;
     // Every tick while undecided, armed or not: a quiet spell that began while
     // the strip was still moving would judge it mid-flight, away from its aim.
     clearTimeout(state.quiet);
     state.quiet = setTimeout(settle, QUIET_BEFORE_SETTLED_MS);
   };
-  const onStrip: Listeners = [
-    ['pointerdown', set('pointer', true)],
-    ['touchstart', set('touch', true)],
-    ['pointercancel', set('nudged', true)],
-    ['keydown', set('nudged', true)],
-    ['wheel', onWheel],
-    ['scroll', onScroll],
-    ['scrollend', settle],
-  ];
-  // A gesture can END off the strip, so its end is heard on the window.
-  const onView: Listeners = [
-    ['pointerup', set('pointer', false)],
-    ['pointercancel', set('pointer', false)],
-    ['touchend', set('touch', false)],
-    ['touchcancel', set('touch', false)],
-  ];
+  const gestures = createGestureListeners(state);
+  const onStrip: Listeners = [...gestures.onStrip, ['scroll', onScroll], ['scrollend', settle]];
+  const onView = gestures.onView;
   for (const [type, listener] of onStrip) strip.addEventListener(type, listener, { passive: true });
   for (const [type, listener] of onView) view?.addEventListener(type, listener, { passive: true });
   return {

package/src/components/layout/SettingsLayout/SettingsSectionChips.tsx

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box/index.js';
 import { alpha, useTheme, type Theme } from '@mui/material/styles/index.js';
 import React, { useEffect, useRef, type RefObject } from 'react';
 
-import { watchVisitorScroll } from './SettingsSectionChips.scroll';
+import { physicalScrollLeft, toRawScrollLeft, watchVisitorScroll } from './SettingsSectionChips.scroll';
 import { SettingsStatusMarker } from './SettingsStatusMarker';
 import { TOUCH_TARGET } from './SettingsLayout.styles';
 import { rem, sxRem } from '../../../tokens/relative';
@@ -48,11 +48,20 @@ function prefersReducedMotion(): boolean {
  * it. The clamp hid that for the last chip; a middle one was simply off-centre.
  * The boxes are both in viewport coordinates, so their difference is the strip's
  * own, whatever the host wraps it in.
+ *
+ * Read and returned in PHYSICAL pixels (`physicalScrollLeft`, FUT-2775): the
+ * bounding-rect arithmetic above is already direction-blind, and an RTL
+ * scroller's raw `scrollLeft` is not — the CSSOM View spec has it `0` at the
+ * strip's right-hand start and NEGATIVE past it, not `0`-to-`scrollWidth` like
+ * an LTR one. `Math.max(0, …)` alone, against that raw value, would clamp every
+ * legitimate RTL target straight back to the start. Physical throughout keeps
+ * this comparable to {@link VisitorScrollWatch.aimedAt}; the caller converts to
+ * this engine's raw `scrollLeft` (`toRawScrollLeft`) only at the `scrollTo` call.
  */
 function centredScrollLeft(strip: HTMLElement, chip: HTMLElement): number {
   const chipBox = chip.getBoundingClientRect();
   const visibleStart = strip.getBoundingClientRect().left + strip.clientLeft;
-  const chipCentre = chipBox.left - visibleStart + strip.scrollLeft + chipBox.width / 2;
+  const chipCentre = chipBox.left - visibleStart + physicalScrollLeft(strip) + chipBox.width / 2;
   const target = chipCentre - strip.clientWidth / 2;
   return Math.max(0, Math.min(target, strip.scrollWidth - strip.clientWidth));
 }
@@ -122,13 +131,16 @@ function useCentreActiveChip(
       // Not while a scroll that may be the visitor's is still moving: a resize
       // mid-drag must not yank the strip. It is re-tried once that scroll rests.
       if (!chip || visitor.hasScrolled() || visitor.isUndecided()) return;
+      // Physical pixels throughout (FUT-2775) — comparable to `aimedAt()` and to
+      // what `beforeOwnScroll` records; converted to this engine's raw
+      // `scrollLeft` only for the actual `scrollTo` call below.
       const left = centredScrollLeft(strip, chip);
       // Only when the target MOVED: a resize that leaves it where it was must not
       // restart a smooth scroll that is already on its way there. The aim is a
       // runtime-computed scroll offset, like the exempt `left` below — not a size.
       if (Math.abs(left - visitor.aimedAt()) < 0.5) return;
       visitor.beforeOwnScroll(left);
-      strip.scrollTo({ left, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
+      strip.scrollTo({ left: toRawScrollLeft(strip, left), behavior: prefersReducedMotion() ? 'auto' : 'smooth' });
     };
     visitor.onSettled(centre);
     centre();
@@ -250,7 +262,15 @@ export function SettingsSectionChips({
         display: 'flex',
         alignItems: 'center',
         gap: 0.75,
-        px: 0.25,
+        // The start side keeps its old, symmetric 0.25 — nothing sits flush
+        // against it once scrolled. The END side is where a scrolled-to-end
+        // chip's own border used to sit almost against the clip boundary
+        // (FUT-2775): sized like the gap BETWEEN chips (`gap` above) rather
+        // than invented fresh, so the last chip clears the edge by the same
+        // margin any two chips clear each other. Logical, not `pr`: the side
+        // that gets clipped is the strip's END, whichever edge that is.
+        paddingInlineStart: 0.25,
+        paddingInlineEnd: 0.75,
         py: 0.25,
         overflowX: 'auto',
         overflowY: 'hidden',

package/src/copy/data-display.ts

@@ -24,6 +24,16 @@ export interface LightboxCopy {
   /** The slideshow toggle, in its two states. */
   play: string;
   pause: string;
+  /** The dialog's own accessible name, read out before its hidden title. */
+  dialogLabel: string;
+  /** The hidden title's item count, when the current item has no `alt`. */
+  itemPosition: (index: number, total: number) => string;
+  /** A `<video>`'s accessible name, when the item has no `alt`. */
+  videoFallback: (index: number, total: number) => string;
+  /** An `<img>`'s `alt`, when the item has no `alt`. */
+  imageFallback: (index: number, total: number) => string;
+  /** A filmstrip thumbnail's `alt`, when the item has no `alt`. */
+  thumbnailFallback: (index: number) => string;
 }
 
 /** The map preview's control bar — same shape, same reason, as the lightbox. */
@@ -42,10 +52,40 @@ export interface CarouselCopy {
   next: string;
 }
 
-/** The request-timing diagram's own two strings. */
+/** The request-timing diagram's own words: its region, its phases, its totals. */
 export interface TimingDiagramCopy {
   regionLabel: string;
   heading: string;
+  /** The five phases a waterfall/stacked/horizontal bar can show. */
+  dns: string;
+  connect: string;
+  ssl: string;
+  request: string;
+  response: string;
+  /** The stacked view's own total sentence, e.g. "Total: 1.20s". */
+  total: (formatted: string) => string;
+  /** The horizontal view's own total sentence, e.g. "Total Time: 1.20s". */
+  totalTime: (formatted: string) => string;
+}
+
+/**
+ * The DataGrid's own words — every one a fallback the caller can still
+ * override: `column.ariaLabel`, `expansion.expandLabel`/`collapseLabel` and
+ * the grid's own `ariaLabel` all win when given. REQUIRED: the fallbacks were
+ * English literals with no way to localise them at all.
+ */
+export interface DataGridCopy {
+  /** A sortable header button's accessible name, unless the column's own `ariaLabel` wins. */
+  sortBy: (header: string) => string;
+  /** A row's selection checkbox, unless `selection` is off. */
+  selectRow: (rowNumber: number) => string;
+  /** The header's select-all checkbox. */
+  selectAllRows: string;
+  /** The expand chevron's two states, unless `expansion.expandLabel`/`collapseLabel` win. */
+  expandRow: string;
+  collapseRow: string;
+  /** The grid's own accessible name, unless the caller's `ariaLabel` wins. */
+  gridLabel: string;
 }
 
 export interface DataStateCopy {

package/src/copy/feedback.ts

@@ -15,12 +15,18 @@
  * table, the grid, the async container, the hover card and the infinite
  * scroller each rendered their own copy of.
  */
-/** The guided tour's four controls, and the toast/modal chrome around it. */
+/** The guided tour's controls, and the toast/modal chrome around it. */
 export interface TutorialCopy {
   skip: string;
   previous: string;
   next: string;
   restart: string;
+  /** The last step's own next button, when it is the tour's only step. */
+  complete: string;
+  /** The last step's own next button, in a tour of more than one step. */
+  finish: string;
+  /** The next/finish button's title while `requiresActionBeforeNext` blocks it. */
+  requiresAction: string;
 }
 
 /** Chrome that carries a glyph and no text, across several small surfaces. */

package/src/en-US.data-display.ts

@@ -5,6 +5,7 @@
 import type { DataViewsCopy } from "./components/data-display/DataViews/data-views-copy";
 import type {
   CarouselCopy,
+  DataGridCopy,
   DataStateCopy,
   LightboxCopy,
   MapPreviewCopy,
@@ -26,6 +27,20 @@ export const EN_US_LIGHTBOX_COPY: LightboxCopy = {
   resetZoom: "Reset zoom",
   play: "Start the slideshow",
   pause: "Pause the slideshow",
+  dialogLabel: "Lightbox",
+  itemPosition: (index, total) => `Item ${index} of ${total}`,
+  videoFallback: (index, total) => `Video ${index} of ${total}`,
+  imageFallback: (index, total) => `Image ${index} of ${total}`,
+  thumbnailFallback: (index) => `Thumbnail ${index}`,
+};
+
+export const EN_US_DATA_GRID_COPY: DataGridCopy = {
+  sortBy: (header) => `Sort by ${header}`,
+  selectRow: (rowNumber) => `Select row ${rowNumber}`,
+  selectAllRows: "Select all rows",
+  expandRow: "Expand row",
+  collapseRow: "Collapse row",
+  gridLabel: "Data grid",
 };
 
 export const EN_US_MAP_PREVIEW_COPY: MapPreviewCopy = {
@@ -45,6 +60,13 @@ export const EN_US_CAROUSEL_COPY: CarouselCopy = {
 export const EN_US_TIMING_DIAGRAM_COPY: TimingDiagramCopy = {
   regionLabel: "Timing diagram",
   heading: "Request timing",
+  dns: "DNS Lookup",
+  connect: "Connection",
+  ssl: "SSL/TLS",
+  request: "Request",
+  response: "Response",
+  total: (formatted) => `Total: ${formatted}`,
+  totalTime: (formatted) => `Total Time: ${formatted}`,
 };
 
 export const EN_US_DATA_STATE_COPY: DataStateCopy = {
@@ -161,6 +183,7 @@ export const EN_US_DATA_VIEWS_COPY: DataViewsCopy = {
   },
   tableFilter: EN_US_TABLE_FILTER_COPY,
   grid: {
+    ...EN_US_DATA_GRID_COPY,
     rowActions: "Actions",
     bulkActions: (selectedCount) => `Actions (${selectedCount}) ▾`,
     emptyFilteredTitle: "No results for these filters",

package/src/en-US.feedback.ts

@@ -13,6 +13,9 @@ export const EN_US_TUTORIAL_COPY: TutorialCopy = {
   previous: "Back",
   next: "Next",
   restart: "Start over",
+  complete: "Complete",
+  finish: "Finish",
+  requiresAction: "Complete the required action first",
 };
 
 export const EN_US_CHROME_COPY: ChromeCopy = {

package/src/locales.ts

@@ -30,6 +30,7 @@ import type {
   CodeEditorCopy,
   CommandPaletteCopy,
   ConfirmActionCopy,
+  DataGridCopy,
   DataStateCopy,
   InstallPromptCopy,
   LightboxCopy,
@@ -69,6 +70,7 @@ export const DATA_STATE_COPY = pack<DataStateCopy>(
   pt.PT_BR_DATA_STATE_COPY,
   en.EN_US_DATA_STATE_COPY,
 );
+export const DATA_GRID_COPY = pack<DataGridCopy>(pt.PT_BR_DATA_GRID_COPY, en.EN_US_DATA_GRID_COPY);
 export const DATA_VIEWS_COPY = pack<DataViewsCopy>(
   pt.PT_BR_DATA_VIEWS_COPY,
   en.EN_US_DATA_VIEWS_COPY,

package/src/pt-BR.data-display.ts

@@ -5,6 +5,7 @@
 import type { DataViewsCopy } from "./components/data-display/DataViews/data-views-copy";
 import type {
   CarouselCopy,
+  DataGridCopy,
   DataStateCopy,
   LightboxCopy,
   MapPreviewCopy,
@@ -26,6 +27,20 @@ export const PT_BR_LIGHTBOX_COPY: LightboxCopy = {
   resetZoom: "Restaurar o zoom",
   play: "Iniciar a apresentação",
   pause: "Pausar a apresentação",
+  dialogLabel: "Galeria de imagens",
+  itemPosition: (index, total) => `Item ${index} de ${total}`,
+  videoFallback: (index, total) => `Vídeo ${index} de ${total}`,
+  imageFallback: (index, total) => `Imagem ${index} de ${total}`,
+  thumbnailFallback: (index) => `Miniatura ${index}`,
+};
+
+export const PT_BR_DATA_GRID_COPY: DataGridCopy = {
+  sortBy: (header) => `Ordenar por ${header}`,
+  selectRow: (rowNumber) => `Selecionar linha ${rowNumber}`,
+  selectAllRows: "Selecionar todas as linhas",
+  expandRow: "Expandir linha",
+  collapseRow: "Recolher linha",
+  gridLabel: "Grade de dados",
 };
 
 export const PT_BR_MAP_PREVIEW_COPY: MapPreviewCopy = {
@@ -45,6 +60,13 @@ export const PT_BR_CAROUSEL_COPY: CarouselCopy = {
 export const PT_BR_TIMING_DIAGRAM_COPY: TimingDiagramCopy = {
   regionLabel: "Diagrama de tempos",
   heading: "Tempo da requisição",
+  dns: "Busca de DNS",
+  connect: "Conexão",
+  ssl: "SSL/TLS",
+  request: "Requisição",
+  response: "Resposta",
+  total: (formatted) => `Total: ${formatted}`,
+  totalTime: (formatted) => `Tempo total: ${formatted}`,
 };
 
 export const PT_BR_DATA_STATE_COPY: DataStateCopy = {
@@ -158,6 +180,7 @@ export const PT_BR_DATA_VIEWS_COPY: DataViewsCopy = {
   },
   tableFilter: PT_BR_TABLE_FILTER_COPY,
   grid: {
+    ...PT_BR_DATA_GRID_COPY,
     rowActions: "Ações",
     bulkActions: (selectedCount) => `Ações (${selectedCount}) ▾`,
     emptyFilteredTitle: "Nenhum resultado para esses filtros",

package/src/pt-BR.feedback.ts

@@ -13,6 +13,9 @@ export const PT_BR_TUTORIAL_COPY: TutorialCopy = {
   previous: "Anterior",
   next: "Próximo",
   restart: "Recomeçar",
+  complete: "Concluir",
+  finish: "Finalizar",
+  requiresAction: "Conclua a ação obrigatória primeiro",
 };
 
 export const PT_BR_CHROME_COPY: ChromeCopy = {

package/dist/chunk-2XHIF3M3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/en-US.data-display.ts"],"sourcesContent":["/**\n * The en-US pack for the data-display family. Split the same way\n * `pt-BR.data-display.ts` is — see `en-US.ts` for why.\n */\nimport type { DataViewsCopy } from \"./components/data-display/DataViews/data-views-copy\";\nimport type {\n  CarouselCopy,\n  DataStateCopy,\n  LightboxCopy,\n  MapPreviewCopy,\n  TimingDiagramCopy,\n} from './copy';\nimport { EN_US_TABLE_FILTER_COPY } from './en-US.layout';\nimport {\n  EN_US_CATEGORY_SELECT_COPY,\n  EN_US_CONFIRM_ACTION_COPY,\n  EN_US_SAVED_VIEWS_LABELS,\n} from './en-US.shared';\n\nexport const EN_US_LIGHTBOX_COPY: LightboxCopy = {\n  close: \"Close\",\n  previous: \"Previous\",\n  next: \"Next\",\n  zoomIn: \"Zoom in\",\n  zoomOut: \"Zoom out\",\n  resetZoom: \"Reset zoom\",\n  play: \"Start the slideshow\",\n  pause: \"Pause the slideshow\",\n};\n\nexport const EN_US_MAP_PREVIEW_COPY: MapPreviewCopy = {\n  zoomIn: \"Zoom in\",\n  zoomOut: \"Zoom out\",\n  center: \"Centre the map\",\n  mapType: \"Change the map type\",\n  fullscreen: \"Full screen\",\n  search: \"Search for an address\",\n};\n\nexport const EN_US_CAROUSEL_COPY: CarouselCopy = {\n  previous: \"Previous\",\n  next: \"Next\",\n};\n\nexport const EN_US_TIMING_DIAGRAM_COPY: TimingDiagramCopy = {\n  regionLabel: \"Timing diagram\",\n  heading: \"Request timing\",\n};\n\nexport const EN_US_DATA_STATE_COPY: DataStateCopy = {\n  empty: \"Nothing here\",\n  loading: \"Loading…\",\n  endOfList: \"No more items to load\",\n  dismissAlert: \"Dismiss\",\n  dismissBanner: \"Dismiss this banner\",\n};\n\nexport const EN_US_DATA_VIEWS_COPY: DataViewsCopy = {\n  savedViewsMenu: EN_US_SAVED_VIEWS_LABELS,\n  confirmAction: EN_US_CONFIRM_ACTION_COPY,\n  categorySelect: EN_US_CATEGORY_SELECT_COPY,\n  board: {\n    countOnPage: (label, count) => `${label}: ${count} on this page`,\n    onThisPage: (count) => `${count} on this page`,\n    pageSum: (sum) => `This page totals ${sum}`,\n    emptyColumn: \"Nothing at this stage\",\n    pageScopeNote: \"The counts and totals below cover only the items on this page.\",\n  },\n  deleteView: {\n    title: \"Delete view\",\n    target: (viewName) => `Delete \"${viewName}\"?`,\n    sharedWarning: \"This view is shared — the team will lose access to it.\",\n    // `entityLabel` is the HOST's word for what the rows are, so the sentence is\n    // built around it rather than naming a noun of its own.\n    rowsUnaffected: (entityLabel) =>\n      `${entityLabel} are not affected; only the saved slice is removed.`,\n    confirm: \"Delete view\",\n    cancel: \"Cancel\",\n  },\n  manageViews: {\n    title: \"Manage views\",\n    empty: \"No saved views.\",\n    edit: \"Edit\",\n    defaultTag: \"Default\",\n    otherUserTag: \"Another user's\",\n    deleteTitle: \"Delete this saved view?\",\n    deleteBody: \"The filters and columns it holds are lost. This cannot be undone.\",\n    deleteConfirm: \"Delete\",\n  },\n  saveView: {\n    sharedDescription: \"Anyone in the store will be able to open and use this view.\",\n    setDefaultTitle: \"Set as default\",\n    setDefaultDescription: \"This screen opens on this view instead of the Main view.\",\n    previewHeading: \"What this view holds\",\n    previewUnchanged: \"Nothing has changed — this view will match the Main view.\",\n    sortRowLabel: \"Sorting\",\n    saveFailed: \"Could not save the view.\",\n    titleEditing: \"Edit view\",\n    titleCreating: \"Save view\",\n    descriptionLabel: \"Description — optional\",\n    descriptionPlaceholder: \"What this view is for\",\n    submitEditing: \"Save changes\",\n    submitCreating: \"Save view\",\n    nameLabel: \"Name\",\n    cancel: \"Cancel\",\n    pinnedTitle: \"Pin to the sidebar\",\n    pinnedDescription: \"Appears as a shortcut in the menu, under this screen.\",\n    sharedTitle: \"Share with the team\",\n    namePlaceholder: \"e.g. Declined card payments this week\",\n    previewFilters: \"Filters\",\n    previewHiddenColumns: \"Hidden columns\",\n  },\n  columns: {\n    visibleCount: (visible, total) => `${visible} of ${total} visible`,\n    reset: \"Default\",\n    showAll: \"Show all\",\n    dragHint: \"Drag to reorder the columns.\",\n    moveUp: (columnLabel) => `Move ${columnLabel} up`,\n    moveDown: (columnLabel) => `Move ${columnLabel} down`,\n  },\n  display: {\n    sortTab: \"Sort\",\n    columnsTab: \"Columns\",\n    panelTab: \"Display\",\n    direction: \"Direction\",\n    layoutHints: {\n      table: \"Comparable columns, good for scanning numbers.\",\n      list: \"One row per item, with the key fields.\",\n      cards: \"Larger blocks, good for a handful of items.\",\n      board: \"A column per stage, for tracking what is where.\",\n    },\n    densityHeadings: {\n      table: \"Row height\",\n      list: \"Row height\",\n      cards: \"Cards per row\",\n      board: \"Column width\",\n    },\n    densityLabels: {\n      table: { compact: \"Low\", cozy: \"Medium\", comfortable: \"High\" },\n      list: { compact: \"Low\", cozy: \"Medium\", comfortable: \"High\" },\n      cards: { compact: \"Many\", cozy: \"Some\", comfortable: \"Few\" },\n      board: { compact: \"Narrow\", cozy: \"Medium\", comfortable: \"Wide\" },\n    },\n    boardUnavailable: \"This screen declares no stages, so it offers no board.\",\n    densityUnavailableNarrow:\n      \"One card per row at this width — density returns on larger screens.\",\n    trigger: \"Display\",\n    fieldHeading: \"Field\",\n    formatHeading: \"Format\",\n    cardZoom: \"Card size\",\n  },\n  export: {\n    formats: {\n      // The extension is the file's, not a word: it stays as it is written on\n      // disk in every language.\n      json: { label: \"JSON (.json)\", hint: \"For integrations\" },\n    },\n    visibleColumns: (columnCount) => `${columnCount} visible columns, in their current order`,\n    trigger: \"Export\",\n    triggerLabel: \"Export\",\n  },\n  tableFilter: EN_US_TABLE_FILTER_COPY,\n  grid: {\n    rowActions: \"Actions\",\n    bulkActions: (selectedCount) => `Actions (${selectedCount}) ▾`,\n    emptyFilteredTitle: \"No results for these filters\",\n    emptyFilteredHint: \"Adjust or remove the filters.\",\n    emptyFilteredAction: \"Clear filters\",\n  },\n  filters: {\n    moreFilters: (count) => `More filters: ${count} did not fit in the bar`,\n    moreFiltersApplied: (count, appliedCount) =>\n      `More filters: ${count} did not fit in the bar, ${appliedCount} applied`,\n    moreTriggerLabel: \"More\",\n    moreHeading: \"More filters\",\n    overflowNote: \"did not fit in the bar\",\n    rangeEnd: \"To\",\n    rangeInvalid: \"The start must be earlier than the end.\",\n    rangeInclusiveNote: \"Both dates are included in the result.\",\n    rangeStart: \"From\",\n    // The mask is what the reader TYPES, so it follows their own date order\n    // rather than being carried over. A translated label above an unchanged\n    // mask is the shape that gets a date entered backwards.\n    dayMask: \"mm/dd/yyyy\",\n    clearAllFilters: \"Clear all filters\",\n    // The KEYS are the package's own preset ids and stay as they are — the\n    // surface matches on them. Only the labels beside them are words.\n    rangePresets: {\n      hoje: \"Today\",\n      ontem: \"Yesterday\",\n      semana: \"This week\",\n      mes: \"This month\",\n      ano: \"This year\",\n    },\n    scopesLabel: \"Status\",\n    panelTitle: \"Filters\",\n    clear: \"Clear\",\n    clearAll: \"Clear filters\",\n    clearRange: (label) => `Clear ${label}`,\n    allOption: \"All\",\n    optionSearchPlaceholder: \"Search…\",\n    optionsEmpty: \"No results\",\n    optionsHeading: \"Options\",\n  },\n  selection: {\n    selectAllOnPage: \"Select all on this page\",\n    clearSelection: \"Clear selection\",\n    selectAll: \"Select all\",\n    onThisPage: (count) => `${count} on this page`,\n    selectRow: \"Select\",\n    expandRow: \"Expand details\",\n    collapseRow: \"Collapse details\",\n  },\n  nav: {\n    mainView: \"Main view\",\n    defaultTag: \"Default\",\n    viewOptions: (viewName) => `${viewName} options`,\n    emptyHint: \"No saved views. Adjust filters, columns or sorting and save below.\",\n    setDefault: \"Set as default\",\n    deleteView: \"Delete view\",\n    unsavedChanges: \"Unsaved changes\",\n    label: \"View\",\n    update: \"Update view\",\n    save: \"Save view\",\n    saveAs: \"Save as new\",\n    reset: \"Reset\",\n    updateFailed: \"Could not update the view\",\n    dismissError: \"Dismiss\",\n    goBack: \"Back\",\n    pageSize: \"Show:\",\n    saveFailed: \"Could not save the change to the view.\",\n    editView: \"Rename and edit\",\n    pinToSidebar: \"Pin to the sidebar\",\n    shareWithTeam: \"Share with the team\",\n  },\n  search: {\n    placeholder: \"Search…\",\n    allColumnsLabel: \"Search every column\",\n    keywordPlaceholder: \"Press Enter to filter\",\n    open: \"Search\",\n    close: \"Close search\",\n    clear: \"Clear search\",\n  },\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-3AQD2EA6.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/TimingDiagram/TimingDiagram.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport Paper from '@mui/material/Paper/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport type { TimingData, TimingDiagramProps } from './TimingDiagram.types';\nimport type { Phase, PhaseKey, TimingViewProps } from './TimingDiagram.views';\nimport {\n  HorizontalView,\n  phaseColors,\n  StackedView,\n  WaterfallView,\n} from './TimingDiagram.views';\nimport { rem } from '../../../tokens/relative';\n\n// Styled components\nconst DiagramContainer = styled(Paper)(({ theme }) => ({\n  padding: theme.spacing(3),\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,\n  backdropFilter: `blur(${rem(theme, 10)})`,\n  WebkitBackdropFilter: `blur(${rem(theme, 10)})`,\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n  borderRadius: theme.shape.borderRadius * 2,\n}));\n\nconst Legend = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: theme.spacing(2),\n  marginTop: theme.spacing(2),\n  paddingTop: theme.spacing(2),\n  borderTop: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n}));\n\nconst LegendItem = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  '& .color': {\n    width: rem(theme, 12),\n    height: rem(theme, 12),\n    borderRadius: rem(theme, 2),\n  },\n  '& .label': {\n    fontSize: rem(theme, 12.8),\n    color: theme.palette.text.secondary,\n  },\n}));\n\n// Helper functions\nconst calculatePercentages = (data: TimingData): Record<string, number> => {\n  const total = data.total || 1;\n  return {\n    dns: ((data.dns || 0) / total) * 100,\n    connect: ((data.connect || 0) / total) * 100,\n    ssl: ((data.ssl || 0) / total) * 100,\n    request: ((data.request || 0) / total) * 100,\n    response: ((data.response || 0) / total) * 100,\n  };\n};\n\n// A phase with no recorded time never happened — an HTTP request has no SSL\n// handshake, for instance — so it gets no bar and no legend entry.\nconst phasesOf = (data: TimingData): Phase[] =>\n  [\n    { key: 'dns', label: 'DNS Lookup', value: data.dns },\n    { key: 'connect', label: 'Connection', value: data.connect },\n    { key: 'ssl', label: 'SSL/TLS', value: data.ssl },\n    { key: 'request', label: 'Request', value: data.request },\n    { key: 'response', label: 'Response', value: data.response },\n  ].filter((phase) => phase.value !== undefined && phase.value > 0);\n\nconst VIEWS: Record<string, FC<TimingViewProps>> = {\n  waterfall: WaterfallView,\n  stacked: StackedView,\n  horizontal: HorizontalView,\n};\n\n// Main component\nexport const TimingDiagram: FC<TimingDiagramProps> = ({\n  copy,\n  data,\n  showLabels = true,\n  height,\n  animated = true,\n  showTooltips = true,\n  variant = 'waterfall',\n}) => {\n  const percentages = useMemo(() => calculatePercentages(data), [data]);\n  const phases = phasesOf(data);\n  const View = VIEWS[variant];\n\n  return (\n    <DiagramContainer elevation={2} role=\"region\" aria-label={copy.regionLabel} tabIndex={0}>\n      <Typography variant=\"h6\" fontWeight=\"bold\" gutterBottom>\n        {copy.heading}\n      </Typography>\n\n      {View && (\n        <View\n          phases={phases}\n          percentages={percentages}\n          data={data}\n          animated={animated}\n          showLabels={showLabels}\n          showTooltips={showTooltips}\n          // The waterfall's plot height, 40 design px unless the caller says otherwise.\n          plotHeightPx={height ?? 40}\n        />\n      )}\n\n      {showLabels && (\n        <Legend>\n          {phases.map((phase) => (\n            <LegendItem key={phase.key}>\n              <Box\n                className=\"color\"\n                sx={(theme) => ({ backgroundColor: phaseColors(theme)[phase.key as PhaseKey] })}\n              />\n              <Typography className=\"label\">{phase.label}</Typography>\n            </LegendItem>\n          ))}\n        </Legend>\n      )}\n    </DiagramContainer>\n  );\n};\n\n// Export default\nexport default TimingDiagram;\n"],"mappings":"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","names":[]}

package/dist/chunk-3MEIGSDK.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/pt-BR.feedback.ts"],"sourcesContent":["/**\n * The pt-BR pack for the feedback family. Split out of `pt-BR.ts`, which is a\n * barrel over this folder — see that file for why.\n */\nimport type {\n  ChromeCopy,\n  NotificationUnblockCopy,\n  TutorialCopy,\n} from './copy';\n\nexport const PT_BR_TUTORIAL_COPY: TutorialCopy = {\n  skip: \"Pular\",\n  previous: \"Anterior\",\n  next: \"Próximo\",\n  restart: \"Recomeçar\",\n};\n\nexport const PT_BR_CHROME_COPY: ChromeCopy = {\n  dismissToast: \"Fechar o aviso\",\n  goBack: \"Voltar\",\n  closePanel: \"Fechar\",\n  closeTab: \"Fechar a aba\",\n  scrollRegion: \"Conteúdo rolável\",\n  scrollToTop: \"Voltar ao topo\",\n  share: \"Compartilhar\",\n};\n\nconst PT_BR_CHROMIUM_DESKTOP = [\n  \"Clique no ícone à esquerda do endereço do site.\",\n  \"Abra \\\"Configurações do site\\\".\",\n  \"Em \\\"Notificações\\\", escolha \\\"Permitir\\\".\",\n  \"Volte a esta página e recarregue.\",\n] as const;\n\nconst PT_BR_CHROMIUM_ANDROID = [\n  \"Toque no ícone à esquerda do endereço do site.\",\n  \"Toque em \\\"Permissões\\\".\",\n  \"Toque em \\\"Notificações\\\" e escolha \\\"Permitir\\\".\",\n  \"Volte a esta página e recarregue.\",\n] as const;\n\nexport const PT_BR_NOTIFICATION_UNBLOCK_COPY: NotificationUnblockCopy = {\n  ios: [\n    \"Abra os Ajustes do iPhone.\",\n    \"Toque em \\\"Notificações\\\".\",\n    \"Encontre este app na lista e ative \\\"Permitir Notificações\\\".\",\n  ],\n  chrome: { desktop: PT_BR_CHROMIUM_DESKTOP, android: PT_BR_CHROMIUM_ANDROID },\n  edge: {\n    desktop: [\n      \"Clique no cadeado à esquerda do endereço do site.\",\n      \"Abra \\\"Permissões para este site\\\".\",\n      \"Em \\\"Notificações\\\", escolha \\\"Permitir\\\".\",\n      \"Volte a esta página e recarregue.\",\n    ],\n    android: PT_BR_CHROMIUM_ANDROID,\n  },\n  firefox: {\n    desktop: [\n      \"Clique no ícone de permissões à esquerda do endereço do site.\",\n      \"Ao lado de \\\"Enviar notificações\\\", clique no X para tirar o bloqueio.\",\n      \"Recarregue a página e ative as notificações de novo.\",\n    ],\n    android: [\n      \"Abra o menu do navegador e toque em \\\"Configurações\\\".\",\n      \"Toque em \\\"Permissões de sites\\\" e depois em \\\"Notificações\\\".\",\n      \"Encontre este site e escolha \\\"Permitir\\\".\",\n      \"Volte a esta página e recarregue.\",\n    ],\n  },\n  opera: { desktop: PT_BR_CHROMIUM_DESKTOP, android: PT_BR_CHROMIUM_ANDROID },\n  safari: {\n    desktop: [\n      \"No menu Safari, abra \\\"Ajustes\\\".\",\n      \"Vá na aba \\\"Sites\\\" e, na lateral, em \\\"Notificações\\\".\",\n      \"Encontre este site e escolha \\\"Permitir\\\".\",\n      \"Volte a esta página e recarregue.\",\n    ],\n  },\n  samsung: {\n    android: [\n      \"Abra o menu do navegador e toque em \\\"Configurações\\\".\",\n      \"Toque em \\\"Sites e downloads\\\" e depois em \\\"Notificações\\\".\",\n      \"Encontre este site e permita as notificações.\",\n      \"Volte a esta página e recarregue.\",\n    ],\n  },\n  other: [\n    \"Abra as configurações do navegador.\",\n    \"Procure as permissões dos sites e depois \\\"Notificações\\\".\",\n    \"Permita as notificações para este site.\",\n    \"Volte a esta página e recarregue.\",\n  ],\n};\n"],"mappings":";AAUO,IAAM,sBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AAAA,EACN,SAAS;AACX;AAEO,IAAM,oBAAgC;AAAA,EAC3C,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,cAAc;AAAA,EACd,aAAa;AAAA,EACb,OAAO;AACT;AAEA,IAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,IAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEO,IAAM,kCAA2D;AAAA,EACtE,KAAK;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,QAAQ,EAAE,SAAS,wBAAwB,SAAS,uBAAuB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,wBAAwB,SAAS,uBAAuB;AAAA,EAC1E,QAAQ;AAAA,IACN,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/dist/chunk-ASCUWG55.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Lightbox/LightboxMedia.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React from 'react';\n\nimport type { LightboxItem } from './Lightbox.types';\n\nexport interface LightboxMediaProps {\n  item: LightboxItem;\n  index: number;\n  total: number;\n  zoomLevel: number;\n  panOffset: { x: number; y: number };\n  zoomable: boolean;\n  isDragging: boolean;\n  testId: (suffix: string) => string;\n  onLoadStart: () => void;\n  onLoaded: () => void;\n  onWheel: (event: React.WheelEvent) => void;\n  onDoubleClick: () => void;\n}\n\nconst cursorFor = (zoomLevel: number, zoomable: boolean): string => {\n  if (zoomLevel > 1) return 'move';\n  return zoomable ? 'zoom-in' : 'default';\n};\n\nexport const LightboxMedia: FC<LightboxMediaProps> = ({\n  item,\n  index,\n  total,\n  zoomLevel,\n  panOffset,\n  zoomable,\n  isDragging,\n  testId,\n  onLoadStart,\n  onLoaded,\n  onWheel,\n  onDoubleClick,\n}) => {\n  if (item.type === 'video') {\n    return (\n      <video\n        src={item.src}\n        controls\n        style={{ maxWidth: '90vw', maxHeight: '80vh', objectFit: 'contain' }}\n        onLoadStart={onLoadStart}\n        onLoadedData={onLoaded}\n        aria-label={item.alt || `Video ${index + 1} of ${total}`}\n        data-testid={testId('video')}\n      />\n    );\n  }\n\n  return (\n    <img\n      src={item.src}\n      alt={item.alt || `Image ${index + 1} of ${total}`}\n      style={{\n        // At 1x the image is bounded by the viewport; once zoomed it is allowed\n        // to overflow so there is something to pan around.\n        maxWidth: zoomLevel === 1 ? '90vw' : 'none',\n        maxHeight: zoomLevel === 1 ? '80vh' : 'none',\n        transform: `scale(${zoomLevel}) translate(${panOffset.x}px, ${panOffset.y}px)`,\n        transformOrigin: 'center',\n        cursor: cursorFor(zoomLevel, zoomable),\n        transition: isDragging ? 'none' : 'transform 0.2s ease',\n        objectFit: 'contain',\n      }}\n      onLoad={onLoaded}\n      onWheel={onWheel}\n      onDoubleClick={onDoubleClick}\n      draggable={false}\n      data-testid={testId('image')}\n    />\n  );\n};\n"],"mappings":";AAyCM;AArBN,IAAM,YAAY,CAAC,WAAmB,aAA8B;AAClE,MAAI,YAAY,EAAG,QAAO;AAC1B,SAAO,WAAW,YAAY;AAChC;AAEO,IAAM,gBAAwC,CAAC;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,KAAK,SAAS,SAAS;AACzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,UAAQ;AAAA,QACR,OAAO,EAAE,UAAU,QAAQ,WAAW,QAAQ,WAAW,UAAU;AAAA,QACnE;AAAA,QACA,cAAc;AAAA,QACd,cAAY,KAAK,OAAO,SAAS,QAAQ,CAAC,OAAO,KAAK;AAAA,QACtD,eAAa,OAAO,OAAO;AAAA;AAAA,IAC7B;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,KAAK;AAAA,MACV,KAAK,KAAK,OAAO,SAAS,QAAQ,CAAC,OAAO,KAAK;AAAA,MAC/C,OAAO;AAAA;AAAA;AAAA,QAGL,UAAU,cAAc,IAAI,SAAS;AAAA,QACrC,WAAW,cAAc,IAAI,SAAS;AAAA,QACtC,WAAW,SAAS,SAAS,eAAe,UAAU,CAAC,OAAO,UAAU,CAAC;AAAA,QACzE,iBAAiB;AAAA,QACjB,QAAQ,UAAU,WAAW,QAAQ;AAAA,QACrC,YAAY,aAAa,SAAS;AAAA,QAClC,WAAW;AAAA,MACb;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,eAAa,OAAO,OAAO;AAAA;AAAA,EAC7B;AAEJ;","names":[]}