cursedbelt 4.3.0 → 4.5.0

package/src/react/media/VirtualizedRows.tsx

@@ -1,9 +1,9 @@
 import { type ReactNode, useCallback, useState } from 'react';
 import { computeRowsLayout, type LayoutModel } from 'react-photo-album';
 import type { MediaItem } from 'cursedbelt-core/media';
-import { VirtualList } from '../VirtualList';
-import { MediaCell } from './MediaCell';
-import type { MediaPhoto } from './mediaPhoto';
+import { VirtualList } from '../VirtualList.js';
+import { MediaCell } from './MediaCell.js';
+import type { MediaPhoto } from './mediaPhoto.js';
 
 export interface VirtualizedRowsProps {
   photos: MediaPhoto[];

package/src/react/media/WaveformStrip.spec.tsx

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render } from '@testing-library/react';
-import { WaveformStrip } from './WaveformStrip';
+import { WaveformStrip } from './WaveformStrip.js';
 
 afterEach(cleanup);
 

package/src/react/media/denseGallery.layout.spec.ts

@@ -35,7 +35,7 @@
 import { describe, expect, test } from 'bun:test';
 import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
-import { CBGD_META_HEIGHT } from './VirtualMediaGrid';
+import { CBGD_META_HEIGHT } from './VirtualMediaGrid.js';
 
 const css = readFileSync(join(import.meta.dir, 'denseGallery.css'), 'utf8');
 

package/src/react/media/fileUploadClient.ts

@@ -1,5 +1,5 @@
 import { DEFAULT_UPLOAD_CHUNK_SIZE } from 'cursedbelt-core/media/upload-limits';
-import { sessionAuthHeaders } from '../sessionAuth';
+import { sessionAuthHeaders } from '../sessionAuth.js';
 
 // ── File-upload client (hook-free) ───────────────────────────────────────────────
 // The one client for mountFileRoutes' upload edge, shared by every consumer (the files

package/src/react/media/hlsSource.answer.spec.ts

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, mock, test } from 'bun:test';
-import { attachHlsSource } from './hlsSource';
+import { attachHlsSource } from './hlsSource.js';
 
 /*
  * *"make a 404 stop the media player spinner so I don't think it's going to eventually load"*

package/src/react/media/hlsSource.recovery.spec.ts

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, mock, test } from 'bun:test';
-import { attachHlsSource, HLS_CONFIG, RECOVERY_BUDGET } from './hlsSource';
+import { attachHlsSource, HLS_CONFIG, RECOVERY_BUDGET } from './hlsSource.js';
 
 /** A `<video>` that reports no native HLS, so every test here takes the hls.js branch. */
 function videoEl(canPlayHls = false): HTMLVideoElement {

package/src/react/media/hlsSource.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { attachHlsSource, canPlayHlsNatively } from './hlsSource';
+import { attachHlsSource, canPlayHlsNatively } from './hlsSource.js';
 
 // 🔴 The RECOVERY specs are a separate file, and the reason is a Bun behaviour rather than a
 // taste: `mock.module('hls.js', …)` is applied at FILE scope no matter where it is called, so

package/src/react/media/hlsSource.ts

@@ -84,7 +84,7 @@
  * below, each with its number's reason on the line.
  */
 import { useEffect, useRef } from 'react';
-import { probeSourceFault, type SourceFault, sourceFaultFromStatus } from './sourceFault';
+import { probeSourceFault, type SourceFault, sourceFaultFromStatus } from './sourceFault.js';
 
 /**
  * The shape of an hls.js `ERROR` payload this module reads.
@@ -362,7 +362,8 @@ export function attachHlsSource(
                 fallBackToProgressive();
               }
             }, delay);
-            pendingRetry.unref?.();
+            // Node's timer has `unref`, a browser's is a number — typed without Node's globals.
+            (pendingRetry as { unref?: () => void }).unref?.();
             return;
           }
           // Anything else fatal (a mux error, an unknown type) is not something a reload

package/src/react/media/imageEditorSpec.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { filerobotDesignToPipelineSpec, tabsForOperations } from './imageEditorSpec';
+import { filerobotDesignToPipelineSpec, tabsForOperations } from './imageEditorSpec.js';
 
 describe('tabsForOperations', () => {
   test('undefined → all default tabs', () => {

package/src/react/media/imageEditorSpec.ts

@@ -5,7 +5,7 @@
 // constants so importing this file never eagerly loads the (large) editor bundle.
 
 import type { ImageOperation, ImageOutputFormat, ImagePipelineSpec } from 'cursedbelt-core/media';
-import type { ImageEditorOperation } from './types';
+import type { ImageEditorOperation } from './types.js';
 
 /** filerobot TABS ids (inlined; see react-filerobot-image-editor's `TABS`). */
 export const FILEROBOT_TABS = {

package/src/react/media/index.ts

@@ -12,9 +12,9 @@ export {
   AutoMaskControls,
   type AutoMaskControlsProps,
   type AutoMaskSensitivity,
-} from './AutoMaskControls';
-export { CanvasVideoPlayer, type CanvasVideoPlayerProps } from './CanvasVideoPlayer';
-export { type CaptureFrameOptions, captureVideoFrame } from './captureVideoFrame';
+} from './AutoMaskControls.js';
+export { CanvasVideoPlayer, type CanvasVideoPlayerProps } from './CanvasVideoPlayer.js';
+export { type CaptureFrameOptions, captureVideoFrame } from './captureVideoFrame.js';
 export {
   DenseGalleryDetail,
   type DenseGalleryDetailProps,
@@ -24,7 +24,7 @@ export {
   type DenseGalleryShellProps,
   GalleryActionButton,
   type GalleryActionButtonProps,
-} from './DenseGalleryShell';
+} from './DenseGalleryShell.js';
 export {
   MediaResizeBar,
   type MediaResizeAffordanceProps,
@@ -33,7 +33,7 @@ export {
   type MediaResizeState,
   useMediaResize,
   type UseMediaResizeOptions,
-} from './MediaResize';
+} from './MediaResize.js';
 export {
   createFfmpegWasmEngine,
   type FfmpegEngineStatus,
@@ -42,19 +42,19 @@ export {
   type RenderProgress,
   type RenderTimelineOptions,
   useFfmpegWasmEngine,
-} from './ffmpegWasm';
+} from './ffmpegWasm.js';
 export {
   createFileUploadClient,
   type FileUploadClient,
   type FileUploadClientConfig,
   type UploadedFile,
   type UploadOutcome,
-} from './fileUploadClient';
+} from './fileUploadClient.js';
 export {
   HoverScrubVideoThumb,
   type HoverScrubVideoThumbProps,
-} from './HoverScrubVideoThumb';
-export { ImageEditor } from './ImageEditor';
+} from './HoverScrubVideoThumb.js';
+export { ImageEditor } from './ImageEditor.js';
 /*
  * The gallery's own rotate / flip / crop / re-light dialog, and its pure geometry.
  *
@@ -64,7 +64,7 @@ export { ImageEditor } from './ImageEditor';
  * browser, which is what lets the media gallery offer it by default to apps whose byte budgets
  * are already spent. See `pictureEdit.ts`'s header.
  */
-export { PictureEditor, type PictureEditorProps, type PictureEditResult } from './PictureEditor';
+export { PictureEditor, type PictureEditorProps, type PictureEditResult } from './PictureEditor.js';
 /*
  * The transport strip, and the fleet's one Space rule. Both are also reachable as their own
  * subpaths (`cursedbelt/react/media/player-strip`, `…/player-space-key`) so an app with a
@@ -75,14 +75,14 @@ export {
   type PlayerStripAction,
   type PlayerStripProps,
   type PlayerStripRepeat,
-} from './PlayerStrip';
+} from './PlayerStrip.js';
 export {
   isPlayPauseSpace,
   type PlayerKeyEvent,
   type PlayPauseSpaceOptions,
   spaceIsTextEntry,
   usePlayPauseSpace,
-} from './playerSpaceKey';
+} from './playerSpaceKey.js';
 /*
  * The same four gestures for FOOTAGE. Split from `PictureEditor` rather than folded into it
  * because the two differ in what they can honestly offer: a picture is baked in the browser's
@@ -93,7 +93,7 @@ export {
   type MediaOrientation,
   VideoTurner,
   type VideoTurnerProps,
-} from './VideoTurner';
+} from './VideoTurner.js';
 export {
   applyAspect,
   bakePicture,
@@ -116,21 +116,21 @@ export {
   type QuarterTurns,
   rotate,
   swapsAxes,
-} from './pictureEdit';
-export { MaskPainter } from './MaskPainter';
-export { MediaCatalogueViewer } from './MediaCatalogueViewer';
+} from './pictureEdit.js';
+export { MaskPainter } from './MaskPainter.js';
+export { MediaCatalogueViewer } from './MediaCatalogueViewer.js';
 export {
   MediaThumb,
   type MediaThumbKind,
   type MediaThumbProps,
   thumbFormatFor,
   thumbKindFor,
-} from './MediaThumb';
-export { MediaLightbox, type MediaLightboxProps } from './MediaLightbox';
+} from './MediaThumb.js';
+export { MediaLightbox, type MediaLightboxProps } from './MediaLightbox.js';
 export {
   MediaUploadControl,
   type MediaUploadControlProps,
-} from './MediaUploadControl';
+} from './MediaUploadControl.js';
 export {
   type MediaPhoto,
   type MediaVideoSlide,
@@ -138,22 +138,22 @@ export {
   mediaItemsToSlides,
   mediaItemToPhoto,
   mediaItemToSlide,
-} from './mediaPhoto';
+} from './mediaPhoto.js';
 export {
   type MediaProbeResult,
   probeMediaDuration,
   probeMediaDurationFromUrl,
   useMediaDuration,
-} from './mediaProbe';
-export { PrivateIndexView } from './PrivateIndexView';
-export { PrivateModeBadge, type PrivateModeBadgeProps } from './PrivateModeBadge';
+} from './mediaProbe.js';
+export { PrivateIndexView } from './PrivateIndexView.js';
+export { PrivateModeBadge, type PrivateModeBadgeProps } from './PrivateModeBadge.js';
 export {
   type PrivateClientConfig,
   privateFileUrlWithToken,
   privateHlsUrlWithToken,
   revealPrivateWithPassword,
   revealPrivateWithToken,
-} from './privateClient';
+} from './privateClient.js';
 export type {
   ImageEditorMode,
   ImageEditorOperation,
@@ -164,22 +164,22 @@ export type {
   MediaCatalogueLayout,
   MediaCatalogueViewerProps,
   VideoTrimmerProps,
-} from './types';
-export { type UseAudioPeaksOptions, useAudioPeaks } from './useAudioPeaks';
-export { useIntersectionObserver } from './useIntersectionObserver';
-export { useObjectUrl } from './useObjectUrl';
+} from './types.js';
+export { type UseAudioPeaksOptions, useAudioPeaks } from './useAudioPeaks.js';
+export { useIntersectionObserver } from './useIntersectionObserver.js';
+export { useObjectUrl } from './useObjectUrl.js';
 export {
   type PrivateIndexRow,
   type PrivateUnlock,
   type RevealedItem,
   type UsePrivateUnlockOptions,
   usePrivateUnlock,
-} from './usePrivateUnlock';
+} from './usePrivateUnlock.js';
 // Attaching an adaptive ladder to a bare `<video>` — native HLS first, hls.js second, the
 // progressive remux always. Exported because three surfaces in the fleet drive a plain
 // element rather than Vidstack and each was carrying its own copy of the decision.
-export { attachHlsSource, canPlayHlsNatively, type HlsSourceUrls, useHlsSource } from './hlsSource';
-export { PLAYBACK_RATES, preferBundledHls, VideoPlayer, type VideoPlayerProps } from './VideoPlayer';
+export { attachHlsSource, canPlayHlsNatively, type HlsSourceUrls, useHlsSource } from './hlsSource.js';
+export { PLAYBACK_RATES, preferBundledHls, VideoPlayer, type VideoPlayerProps } from './VideoPlayer.js';
 // The focus viewer — look closely at PART of a video, and keep what you find. Lifted out
 // of apps/collections in unit 15 so binary-server's inspector can mount the same one.
 export {
@@ -187,8 +187,8 @@ export {
   type FocusSaveResult,
   type FocusSnapshot,
   type FocusViewerProps,
-} from './FocusViewer';
-export { PictureControls, type PictureControlsProps } from './PictureControls';
+} from './FocusViewer.js';
+export { PictureControls, type PictureControlsProps } from './PictureControls.js';
 export {
   composeSelection,
   FULL_REGION,
@@ -204,7 +204,7 @@ export {
   regionZoom,
   stageAspectFor,
   zoomRegion,
-} from './videoRegion';
+} from './videoRegion.js';
 export {
   ENHANCE_RANGE,
   type Enhance,
@@ -215,18 +215,18 @@ export {
   readEnhance,
   snapshotSize,
   writeEnhance,
-} from './videoEnhance';
-export { VideoTrimmer } from './VideoTrimmer';
+} from './videoEnhance.js';
+export { VideoTrimmer } from './VideoTrimmer.js';
 // Marking sections to CUT OUT — the model and the dialog. Distinct from `VideoTrimmer`, which
 // picks ONE range to keep and hands it to an in-browser encode: this one produces a cut LIST
 // that a server executes, which is the only shape that works on a phone master. See
 // `videoCuts.ts` for the owner's reasoning.
-export { VideoCutEditor, type VideoCutEditorProps } from './VideoCutEditor';
+export { VideoCutEditor, type VideoCutEditorProps } from './VideoCutEditor.js';
 // Naming points in time and KEEPING them — the other half of the same gesture, and a separate
 // model on purpose: a cut list is a request that costs a re-encode, a chapter list is metadata
 // that applies on save. `videoChapters.ts`'s header says why the model is in this package
 // rather than in `cursedbelt-core` beside `videoCuts.ts`.
-export { VideoChapterEditor, type VideoChapterEditorProps } from './VideoChapterEditor';
+export { VideoChapterEditor, type VideoChapterEditorProps } from './VideoChapterEditor.js';
 export {
   type ChapteredVideo,
   type ChapterSpan,
@@ -235,7 +235,7 @@ export {
   MIN_CHAPTER_SECONDS,
   normalizeChapters,
   type VideoChapter,
-} from './videoChapters';
+} from './videoChapters.js';
 // Re-exported from `core/media`, where the model lives so a SERVER can import it without
 // dragging React in — see the header of `videoCuts.ts`.
 export {
@@ -248,7 +248,7 @@ export {
   normalizeCuts,
   type VideoCut,
 } from 'cursedbelt-core/media/video-cuts';
-export { VirtualMediaGrid, type VirtualMediaGridProps } from './VirtualMediaGrid';
+export { VirtualMediaGrid, type VirtualMediaGridProps } from './VirtualMediaGrid.js';
 export {
   type CapturedPoster,
   captureVideoPoster,
@@ -259,7 +259,7 @@ export {
   probeVideo,
   scoreFrame,
   type VideoProbe,
-} from './videoPoster';
+} from './videoPoster.js';
 // `videoPoster` picks WHICH frame; `posterFraming` decides which part of it a tile shows and
 // at what magnification, plus the full-resolution snapshot path. Shared out of
 // apps/collections so apps/family (and the next gallery) get one pipeline rather than a
@@ -275,6 +275,6 @@ export {
   framableSize,
   type FramableSource,
   snapshotBlob,
-} from './posterFraming';
-export { createVideoThumbnailer, type VideoThumbnailer } from './videoThumbnailer';
-export { WaveformStrip, type WaveformStripProps } from './WaveformStrip';
+} from './posterFraming.js';
+export { createVideoThumbnailer, type VideoThumbnailer } from './videoThumbnailer.js';
+export { WaveformStrip, type WaveformStripProps } from './WaveformStrip.js';

package/src/react/media/maskGeometry.spec.ts

@@ -5,7 +5,7 @@ import {
   computeMaskView,
   displayToNatural,
   naturalToDisplay,
-} from './maskGeometry';
+} from './maskGeometry.js';
 
 describe('computeMaskView — contain fit', () => {
   test('letterboxes a wide image into a square container and centers it', () => {

package/src/react/media/maskGeometry.ts

@@ -4,7 +4,7 @@
 // edited region — exactly the failure mode the owner hit with off-tool (Florence2) masks.
 
 import { clamp } from 'cwip/math';
-import type { MaskPoint } from './maskModel';
+import type { MaskPoint } from './maskModel.js';
 
 export interface MaskView {
   /** Display px per natural px (contain-fit × zoom). */

package/src/react/media/maskModel.spec.ts

@@ -11,7 +11,7 @@ import {
   type StrokeOp,
   toggleInvert,
   undo,
-} from './maskModel';
+} from './maskModel.js';
 
 const stroke = (over: Partial<Omit<StrokeOp, 'kind'>> = {}): Omit<StrokeOp, 'kind'> => ({
   mode: 'paint',

package/src/react/media/maskRaster.spec.ts

@@ -1,12 +1,12 @@
 import { describe, expect, test } from 'bun:test';
-import type { MaskOp, StrokeOp } from './maskModel';
+import type { MaskOp, StrokeOp } from './maskModel.js';
 import {
   binarizeAlpha,
   buildMaskImageData,
   paintDisc,
   rasterizeOps,
   rgbaToAlpha,
-} from './maskRaster';
+} from './maskRaster.js';
 
 const at = (data: Uint8ClampedArray, w: number, x: number, y: number) => data[y * w + x];
 const rgbaAt = (data: Uint8ClampedArray, w: number, x: number, y: number) => {

package/src/react/media/maskRaster.ts

@@ -8,7 +8,7 @@
 //     (task-47 mask_expand/blend), so the mask stays predictable,
 //   • the whole pipeline is testable with no canvas (happy-dom has no 2D context).
 
-import type { MaskOp, MaskPoint } from './maskModel';
+import type { MaskOp, MaskPoint } from './maskModel.js';
 
 /** Stamp a filled disc of `value` into the alpha plane (clipped to bounds). */
 export function paintDisc(

package/src/react/media/mediaPhoto.spec.ts

@@ -5,7 +5,7 @@ import {
   mediaItemsToSlides,
   mediaItemToPhoto,
   mediaItemToSlide,
-} from './mediaPhoto';
+} from './mediaPhoto.js';
 
 const item = (over: Partial<MediaItem> = {}): MediaItem => ({
   id: 'a',

package/src/react/media/pictureEdit.spec.ts

@@ -16,7 +16,7 @@ import {
   rotate,
   sharpenPixels,
   swapsAxes,
-} from './pictureEdit';
+} from './pictureEdit.js';
 
 /** A grey field with one brighter pixel in the middle — the smallest thing with an edge. */
 function spot(width: number, height: number, level = 128, peak = 200): Pixels {

package/src/react/media/playerSpaceKey.spec.ts

@@ -7,7 +7,7 @@
  * returning from another tab and hearing the next song start.
  */
 import { describe, expect, test } from "bun:test";
-import { isPlayPauseSpace, spaceIsTextEntry } from "./playerSpaceKey";
+import { isPlayPauseSpace, spaceIsTextEntry } from "./playerSpaceKey.js";
 
 /** A keyboard event shaped just enough for the rule, with sane defaults. */
 function press(over: Partial<Parameters<typeof isPlayPauseSpace>[0]> = {}) {

package/src/react/media/playerStrip.spec.tsx

@@ -11,7 +11,7 @@ import { afterEach, describe, expect, test } from "bun:test";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 import { cleanup, fireEvent, render, screen } from "@testing-library/react";
-import { PlayerStrip } from "./PlayerStrip";
+import { PlayerStrip } from "./PlayerStrip.js";
 
 afterEach(cleanup);
 

package/src/react/media/poster.ts

@@ -26,7 +26,7 @@ export {
   probeVideo,
   scoreFrame,
   type VideoProbe,
-} from './videoPoster';
+} from './videoPoster.js';
 export {
   DEFAULT_FRAMING,
   drawFramedPoster,
@@ -42,4 +42,4 @@ export {
   snapshotBlob,
   ZOOM_RANGE,
   zoomedBy,
-} from './posterFraming';
+} from './posterFraming.js';

package/src/react/media/posterFraming.spec.ts

@@ -23,7 +23,7 @@ import {
   POSTER_MAX_WIDTH,
   zoomedBy,
   ZOOM_RANGE,
-} from './posterFraming';
+} from './posterFraming.js';
 
 /** The stored poster box, in the proportions a tile is. */
 const BOX = { width: 1600, height: Math.round(1600 / POSTER_ASPECT) };

package/src/react/media/privateClient.spec.ts

@@ -4,8 +4,8 @@ import {
   privateHlsUrlWithToken,
   revealPrivateWithPassword,
   revealPrivateWithToken,
-} from './privateClient';
-import { usePrivateUnlock } from './usePrivateUnlock';
+} from './privateClient.js';
+import { usePrivateUnlock } from './usePrivateUnlock.js';
 
 // Mock fetch — the helpers are pure client plumbing; assert the request they build and the
 // response shape they return.

package/src/react/media/sourceFault.spec.tsx

@@ -7,7 +7,7 @@ import {
   sourceFaultFromStatus,
   SourceFaultOverlay,
   sourceFaultMessage,
-} from './sourceFault';
+} from './sourceFault.js';
 
 afterEach(cleanup);
 

package/src/react/media/stageResize.spec.ts

@@ -17,7 +17,7 @@ import {
   STAGE_HEIGHT_KEY,
   stageHeightFromDrag,
   writeStageHeight,
-} from './stageResize';
+} from './stageResize.js';
 
 describe('stageHeightFromDrag', () => {
   test('dragging down makes the viewer bigger, one pixel per pixel', () => {

package/src/react/media/surfaceGesture.spec.ts

@@ -15,8 +15,8 @@
  * breaks if it is dropped, so each gets a case.
  */
 import { describe, expect, test } from 'bun:test';
-import { isSurfaceControl, SURFACE_CONTROL_SELECTOR } from './surfaceGesture';
-import { toggleFullscreenOnSurfaceDoubleClick } from './VideoPlayer';
+import { isSurfaceControl, SURFACE_CONTROL_SELECTOR } from './surfaceGesture.js';
+import { toggleFullscreenOnSurfaceDoubleClick } from './VideoPlayer.js';
 
 /** Build `outer > inner` and hand back the inner element, which is what a press reports. */
 function nest(outerHtml: string, innerTag = 'span'): Element {

package/src/react/media/usePrivateUnlock.ts

@@ -7,7 +7,7 @@ import {
   type RevealedItem,
   revealPrivateWithPassword,
   revealPrivateWithToken,
-} from './privateClient';
+} from './privateClient.js';
 
 // ── usePrivateUnlock ────────────────────────────────────────────────────────────
 // The client state machine for encrypted private media. It drives the cursedbelt-server
@@ -17,7 +17,7 @@ import {
 // shapes live in ./privateClient (hook-free) so a component holding a PASSED-IN token (via a
 // cross-plugin port) can call the same endpoints without this hook's state.
 
-export type { PrivateIndexRow, RevealedItem } from './privateClient';
+export type { PrivateIndexRow, RevealedItem } from './privateClient.js';
 
 export type UsePrivateUnlockOptions = PrivateClientConfig;
 

package/src/react/media/videoChapters.spec.ts

@@ -13,7 +13,7 @@ import {
   MIN_CHAPTER_SECONDS,
   normalizeChapters,
   type VideoChapter,
-} from './videoChapters';
+} from './videoChapters.js';
 
 const at = (startSeconds: number, title: string): VideoChapter => ({ startSeconds, title });
 const shape = (chapters: readonly VideoChapter[]): string =>

package/src/react/media/videoEnhance.spec.ts

@@ -11,7 +11,7 @@ import {
 	isEnhanced,
 	readEnhance,
 	snapshotSize,
-} from "./videoEnhance";
+} from "./videoEnhance.js";
 
 describe("filterString", () => {
 	test("an untouched picture is 'none', never an empty string", () => {

package/src/react/media/videoPoster.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { pickBestFrame, posterCandidateTimes, scoreFrame } from './videoPoster';
+import { pickBestFrame, posterCandidateTimes, scoreFrame } from './videoPoster.js';
 
 /** A solid block of one colour, as RGBA — the fades and flat frames real footage opens on. */
 const flat = (r: number, g: number, b: number, pixels = 64): Uint8ClampedArray => {

package/src/react/media/videoRegion.spec.ts

@@ -18,7 +18,7 @@ import {
 	regionZoom,
 	stageAspectFor,
 	zoomRegion,
-} from "./videoRegion";
+} from "./videoRegion.js";
 
 describe("zoomRegion", () => {
 	test("keeps the centre fixed — the subject does not slide out of view", () => {

package/src/react/media-gallery/GalleryTable.tsx

@@ -34,12 +34,12 @@
 import { formatBytes } from 'cwip/format';
 import type { DragEvent } from 'react';
 import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
-import { CATEGORY_LABEL } from '../components/FileTypeIcon';
-import { useResizeObserver } from '../hooks/useResizeObserver';
-import { useCanHover, useScrubPreview } from '../media/HoverScrubVideoThumb';
-import { createdLabel, type MediaCache, ThumbImg, useItemMedia } from './galleryItemMedia';
-import { galleryItemCategory } from './mediaGalleryModel';
-import type { MediaGalleryItem, MediaGalleryOrder } from './types';
+import { CATEGORY_LABEL } from '../components/FileTypeIcon.js';
+import { useResizeObserver } from '../hooks/useResizeObserver.js';
+import { useCanHover, useScrubPreview } from '../media/HoverScrubVideoThumb.js';
+import { createdLabel, type MediaCache, ThumbImg, useItemMedia } from './galleryItemMedia.js';
+import { galleryItemCategory } from './mediaGalleryModel.js';
+import type { MediaGalleryItem, MediaGalleryOrder } from './types.js';
 
 /**
  * Row height in px. It is a CONSTANT rather than a measurement because the spacer-row