cursedbelt 4.4.0 → 4.5.0

package/src/react/media/DenseGalleryShell.tsx

@@ -9,11 +9,11 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { VirtualMediaGrid } from './VirtualMediaGrid';
-import { Tooltip } from '../components/Tooltip';
-import { MediaResizeBar, MediaResizeCorner, useMediaResize } from './MediaResize';
-import { STAGE_HEIGHT_KEY } from './stageResize';
-import { isSurfaceControl } from './surfaceGesture';
+import { VirtualMediaGrid } from './VirtualMediaGrid.js';
+import { Tooltip } from '../components/Tooltip.js';
+import { MediaResizeBar, MediaResizeCorner, useMediaResize } from './MediaResize.js';
+import { STAGE_HEIGHT_KEY } from './stageResize.js';
+import { isSurfaceControl } from './surfaceGesture.js';
 
 // The shared dense-gallery layout — extracted from the video gallery so the photo and
 // mixed-media galleries reuse the exact same presentation (thumbnail-maximal browse grid +

package/src/react/media/FocusViewer.tsx

@@ -48,15 +48,15 @@ import "./focusViewer.css";
  * where the geometry lives as pure functions with tests.
  */
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Alert } from "../components/Alert";
-import { Button } from "../components/Button";
-import { NativeSelect } from "../components/NativeSelect";
-import { Tooltip } from "../components/Tooltip";
-import { MediaResizeBar, MediaResizeCorner, useMediaResize } from "./MediaResize";
-import { FOCUS_HEIGHT_KEY } from "./stageResize";
-import { PictureControls } from "./PictureControls";
-import { isPlayPauseSpace } from "./playerSpaceKey";
-import { PLAYBACK_RATES } from "./VideoPlayer";
+import { Alert } from "../components/Alert.js";
+import { Button } from "../components/Button.js";
+import { NativeSelect } from "../components/NativeSelect.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { MediaResizeBar, MediaResizeCorner, useMediaResize } from "./MediaResize.js";
+import { FOCUS_HEIGHT_KEY } from "./stageResize.js";
+import { PictureControls } from "./PictureControls.js";
+import { isPlayPauseSpace } from "./playerSpaceKey.js";
+import { PLAYBACK_RATES } from "./VideoPlayer.js";
 import {
 	FULL_REGION,
 	MAX_ZOOM,
@@ -72,7 +72,7 @@ import {
 	regionZoom,
 	stageAspectFor,
 	zoomRegion,
-} from "./videoRegion";
+} from "./videoRegion.js";
 import {
 	type Enhance,
 	NO_ENHANCE,
@@ -82,7 +82,7 @@ import {
 	readEnhance,
 	snapshotSize,
 	writeEnhance,
-} from "./videoEnhance";
+} from "./videoEnhance.js";
 
 /** `m:ss`, or `h:mm:ss` past the hour. Local so this module has no app dependency. */
 function formatDuration(seconds: number): string {

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

@@ -3,7 +3,7 @@ import { readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 import type React from 'react';
 import { cleanup, fireEvent, render } from '@testing-library/react';
-import { FrameGrabber } from './FrameGrabber';
+import { FrameGrabber } from './FrameGrabber.js';
 
 afterEach(cleanup);
 
@@ -131,7 +131,7 @@ describe('🔴 FrameGrabber — Space toggles the clip you are scrubbing', () =>
     // why `playerSpaceKey.ts` exists. A behavioural test cannot tell a fourth copy that happens
     // to agree today from the shared rule; this can.
     const source = readFileSync(resolve(import.meta.dir, 'FrameGrabber.tsx'), 'utf8');
-    expect(source).toInclude("from './playerSpaceKey'");
+    expect(source).toInclude("from './playerSpaceKey.js'");
     expect(source).toInclude('usePlayPauseSpace(');
     expect(source, 'a hand-rolled Space test means the shared rule was bypassed').not.toInclude(
       "=== ' '",

package/src/react/media/FrameGrabber.tsx

@@ -1,9 +1,9 @@
 import './pictureEditor.css';
 import React from 'react';
-import { ActionBar } from '../components/ActionBar';
-import { Button } from '../components/Button';
-import { Modal } from '../components/Modal';
-import { SegmentedControl } from '../components/SegmentedControl';
+import { ActionBar } from '../components/ActionBar.js';
+import { Button } from '../components/Button.js';
+import { Modal } from '../components/Modal.js';
+import { SegmentedControl } from '../components/SegmentedControl.js';
 import {
   applyAspect,
   CROP_PRESETS,
@@ -15,8 +15,8 @@ import {
   lightFilter,
   NO_LIGHT,
   type PictureLight,
-} from './pictureEdit';
-import { usePlayPauseSpace } from './playerSpaceKey';
+} from './pictureEdit.js';
+import { usePlayPauseSpace } from './playerSpaceKey.js';
 import {
   DEFAULT_FRAMING,
   drawFramedPoster,
@@ -28,7 +28,7 @@ import {
   snapshotBlob,
   zoomedBy,
   ZOOM_RANGE,
-} from './posterFraming';
+} from './posterFraming.js';
 
 export interface FrameGrabberProps {
   /**

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

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import type { PlayableVideo } from 'cursedbelt-core/media';
-import { HoverScrubVideoThumb } from './HoverScrubVideoThumb';
+import { HoverScrubVideoThumb } from './HoverScrubVideoThumb.js';
 
 afterEach(cleanup);
 

package/src/react/media/HoverScrubVideoThumb.tsx

@@ -2,9 +2,9 @@ import { Play } from 'lucide-react';
 import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';
 import type { PlayableVideo } from 'cursedbelt-core/media';
 import { formatTimecode } from 'cursedbelt-core/media';
-import { cn } from '../lib/cn';
-import { NO_EDIT, previewTransform, swapsAxes } from './pictureEdit';
-import type { MediaOrientation } from './VideoTurner';
+import { cn } from '../lib/cn.js';
+import { NO_EDIT, previewTransform, swapsAxes } from './pictureEdit.js';
+import type { MediaOrientation } from './VideoTurner.js';
 
 /**
  * The stored turn, as an inline transform for the tile's poster and preview.

package/src/react/media/ImageEditor.tsx

@@ -1,16 +1,16 @@
 import { lazy, Suspense, useCallback } from 'react';
 import { imageFormatToMime } from 'cursedbelt-core/media';
-import { Modal } from '../components/Modal';
-import { Spinner } from '../components/Spinner';
+import { Modal } from '../components/Modal.js';
+import { Spinner } from '../components/Spinner.js';
 import {
   type FilerobotDesignState,
   type FilerobotSavedImage,
   filerobotDesignToPipelineSpec,
   savedImageToBlob,
   tabsForOperations,
-} from './imageEditorSpec';
-import { MaskPainter } from './MaskPainter';
-import type { ImageEditorProps } from './types';
+} from './imageEditorSpec.js';
+import { MaskPainter } from './MaskPainter.js';
+import type { ImageEditorProps } from './types.js';
 
 // react-filerobot-image-editor is large + browser-only (canvas/konva). Code-split it
 // so it loads only when the editor opens and never enters the base bundle / SSR.

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

@@ -1,8 +1,8 @@
 import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import { createRegionSegmenter } from 'cursedbelt-core/media';
-import { ImageEditor } from './ImageEditor';
-import { MaskPainter } from './MaskPainter';
+import { ImageEditor } from './ImageEditor.js';
+import { MaskPainter } from './MaskPainter.js';
 
 // MaskPainter hosts a keyboard-safe ActionBar (→ useMediaQuery → matchMedia), and Radix
 // Dialog portals to <body>. Stub matchMedia (desktop) and query off document.body — the

package/src/react/media/MaskPainter.tsx

@@ -29,19 +29,19 @@ import {
   sensitivityToTolerance,
   upscaleMask,
 } from 'cursedbelt-core/media';
-import { ActionBar } from '../components/ActionBar';
-import { Button } from '../components/Button';
-import { IconButton } from '../components/IconButton';
-import { Modal } from '../components/Modal';
-import { Spinner } from '../components/Spinner';
-import { useResizeObserver } from '../hooks/useResizeObserver';
-import { cn } from '../lib/cn';
+import { ActionBar } from '../components/ActionBar.js';
+import { Button } from '../components/Button.js';
+import { IconButton } from '../components/IconButton.js';
+import { Modal } from '../components/Modal.js';
+import { Spinner } from '../components/Spinner.js';
+import { useResizeObserver } from '../hooks/useResizeObserver.js';
+import { cn } from '../lib/cn.js';
 import {
   type AutoMaskCombine,
   AutoMaskControls,
   type AutoMaskSensitivity,
-} from './AutoMaskControls';
-import { BrushSizeSlider } from './BrushSizeSlider';
+} from './AutoMaskControls.js';
+import { BrushSizeSlider } from './BrushSizeSlider.js';
 import {
   clampZoom,
   computeMaskView,
@@ -49,7 +49,7 @@ import {
   type MaskView,
   naturalToDisplay,
   type Pan,
-} from './maskGeometry';
+} from './maskGeometry.js';
 import {
   applyRegion,
   canRedo,
@@ -65,13 +65,13 @@ import {
   type StrokeOp,
   toggleInvert,
   undo as undoModel,
-} from './maskModel';
-import { buildMaskImageData, rgbaToAlpha } from './maskRaster';
-import type { MaskPainterProps, MaskRegionResult } from './types';
+} from './maskModel.js';
+import { buildMaskImageData, rgbaToAlpha } from './maskRaster.js';
+import type { MaskPainterProps, MaskRegionResult } from './types.js';
 
 // Re-exported alongside the component so a consumer of `cursedbelt/react/media` gets
 // the prop type from the same module it imports the component from.
-export type { MaskPainterProps, MaskRegionResult } from './types';
+export type { MaskPainterProps, MaskRegionResult } from './types.js';
 
 const DEFAULT_BRUSH = 40;
 const DEFAULT_MIN_BRUSH = 2;

package/src/react/media/MediaCatalogueViewer.tsx

@@ -1,15 +1,15 @@
 import { ImageOff } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import { ColumnsPhotoAlbum, MasonryPhotoAlbum, type RenderPhotoContext } from 'react-photo-album';
-import { EmptyState } from '../components/EmptyState';
-import { Skeleton } from '../components/Skeleton';
-import { cn } from '../lib/cn';
-import { MediaCell } from './MediaCell';
-import { MediaLightbox } from './MediaLightbox';
-import { type MediaPhoto, mediaItemsToPhotos, mediaItemsToSlides } from './mediaPhoto';
-import type { MediaCatalogueViewerProps } from './types';
-import { useIntersectionObserver } from './useIntersectionObserver';
-import { VirtualizedRows } from './VirtualizedRows';
+import { EmptyState } from '../components/EmptyState.js';
+import { Skeleton } from '../components/Skeleton.js';
+import { cn } from '../lib/cn.js';
+import { MediaCell } from './MediaCell.js';
+import { MediaLightbox } from './MediaLightbox.js';
+import { type MediaPhoto, mediaItemsToPhotos, mediaItemsToSlides } from './mediaPhoto.js';
+import type { MediaCatalogueViewerProps } from './types.js';
+import { useIntersectionObserver } from './useIntersectionObserver.js';
+import { VirtualizedRows } from './VirtualizedRows.js';
 
 // Stable keys for the loading skeletons (no array-index keys).
 const SKELETON_KEYS = ['s1', 's2', 's3', 's4', 's5', 's6', 's7', 's8'];

package/src/react/media/MediaCell.tsx

@@ -1,10 +1,10 @@
 import { Pencil, Play, Trash2 } from 'lucide-react';
 import type { CSSProperties } from 'react';
 import { formatTimecode, type MediaItem } from 'cursedbelt-core/media';
-import { Button } from '../components/Button';
-import { IconButton } from '../components/IconButton';
-import { cn } from '../lib/cn';
-import { MediaThumb, thumbFormatFor } from './MediaThumb';
+import { Button } from '../components/Button.js';
+import { IconButton } from '../components/IconButton.js';
+import { cn } from '../lib/cn.js';
+import { MediaThumb, thumbFormatFor } from './MediaThumb.js';
 
 export interface MediaCellProps {
   item: MediaItem;

package/src/react/media/MediaLightbox.tsx

@@ -7,7 +7,7 @@ import Captions from 'yet-another-react-lightbox/plugins/captions';
 import Counter from 'yet-another-react-lightbox/plugins/counter';
 import Thumbnails from 'yet-another-react-lightbox/plugins/thumbnails';
 import Zoom from 'yet-another-react-lightbox/plugins/zoom';
-import { VideoSlideContent } from './VideoSlideContent';
+import { VideoSlideContent } from './VideoSlideContent.js';
 
 export interface MediaLightboxProps {
   open: boolean;

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

@@ -18,8 +18,8 @@ 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 { MediaResizeBar, MediaResizeCorner, useMediaResize } from './MediaResize';
-import { MIN_STAGE_PX, readStageHeight, writeStageHeight } from './stageResize';
+import { MediaResizeBar, MediaResizeCorner, useMediaResize } from './MediaResize.js';
+import { MIN_STAGE_PX, readStageHeight, writeStageHeight } from './stageResize.js';
 
 afterEach(() => {
   cleanup();

package/src/react/media/MediaResize.tsx

@@ -59,7 +59,7 @@
  */
 import type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Tooltip } from '../components/Tooltip';
+import { Tooltip } from '../components/Tooltip.js';
 import './mediaResize.css';
 import {
   MAX_STAGE_PX,
@@ -68,7 +68,7 @@ import {
   readStageHeight,
   stageHeightFromDrag,
   writeStageHeight,
-} from './stageResize';
+} from './stageResize.js';
 
 export interface UseMediaResizeOptions {
   /**

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

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

package/src/react/media/MediaThumb.tsx

@@ -1,6 +1,6 @@
 import { FileText, Film, Image as ImageIcon, Music, Package } from 'lucide-react';
 import { type CSSProperties, type ReactNode, useState } from 'react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 export type MediaThumbKind = 'image' | 'video' | 'audio' | 'document' | 'archive' | 'other';
 

package/src/react/media/MediaUploadControl.tsx

@@ -1,10 +1,10 @@
 import { Upload } from 'lucide-react';
 import { type ReactNode, useMemo, useRef, useState } from 'react';
-import { Button } from '../components/Button';
-import { Checkbox } from '../components/Checkbox';
-import { Input } from '../components/Input';
-import { cn } from '../lib/cn';
-import { createFileUploadClient } from './fileUploadClient';
+import { Button } from '../components/Button.js';
+import { Checkbox } from '../components/Checkbox.js';
+import { Input } from '../components/Input.js';
+import { cn } from '../lib/cn.js';
+import { createFileUploadClient } from './fileUploadClient.js';
 
 // ⚠️ LEGACY `/_files` UPLOAD CONTROL — NOT the engine model's path (03 §1c).
 //

package/src/react/media/PictureControls.tsx

@@ -24,14 +24,14 @@
  * watching is still there when a still is captured from the same clip — which is the whole
  * reason someone reaches for it.
  */
-import { Button } from "../components/Button";
+import { Button } from "../components/Button.js";
 import {
 	ENHANCE_RANGE,
 	type Enhance,
 	NO_ENHANCE,
 	isEnhanced,
 	writeEnhance,
-} from "./videoEnhance";
+} from "./videoEnhance.js";
 
 const FIELDS = [
 	["brightness", "Brightness"],

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

@@ -23,7 +23,7 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import type React from 'react';
 import { cleanup, fireEvent, render } from '@testing-library/react';
-import { PictureEditor } from './PictureEditor';
+import { PictureEditor } from './PictureEditor.js';
 
 afterEach(cleanup);
 

package/src/react/media/PictureEditor.tsx

@@ -1,8 +1,8 @@
 import './pictureEditor.css';
 import React from 'react';
-import { ActionBar } from '../components/ActionBar';
-import { Button } from '../components/Button';
-import { Modal } from '../components/Modal';
+import { ActionBar } from '../components/ActionBar.js';
+import { Button } from '../components/Button.js';
+import { Modal } from '../components/Modal.js';
 import {
   applyAspect,
   bakePicture,
@@ -25,9 +25,9 @@ import {
   previewTransform,
   rotate,
   sharpenPixels,
-} from './pictureEdit';
+} from './pictureEdit.js';
 
-import { Tooltip } from '../components/Tooltip';
+import { Tooltip } from '../components/Tooltip.js';
 /** What the editor hands back. The APP decides what to do with it — see `mode`. */
 export interface PictureEditResult {
   /** The baked bytes. */

package/src/react/media/PlayerStrip.tsx

@@ -48,9 +48,9 @@ import {
 	Volume2,
 	VolumeX,
 } from "lucide-react";
-import { IconButton } from "../components/IconButton";
-import { Tooltip } from "../components/Tooltip";
-import { cn } from "../lib/cn";
+import { IconButton } from "../components/IconButton.js";
+import { Tooltip } from "../components/Tooltip.js";
+import { cn } from "../lib/cn.js";
 import "./playerStrip.css";
 
 export type PlayerStripRepeat = "off" | "one" | "all";

package/src/react/media/PrivateIndexView.tsx

@@ -1,8 +1,8 @@
 import { formatBytes as fmtBytes } from 'cwip/format';
 import React from 'react';
-import { Button } from '../components/Button';
-import { Input } from '../components/Input';
-import type { PrivateIndexRow, PrivateUnlock } from './usePrivateUnlock';
+import { Button } from '../components/Button.js';
+import { Input } from '../components/Input.js';
+import type { PrivateIndexRow, PrivateUnlock } from './usePrivateUnlock.js';
 
 // The locked-index cleanup view: every private item's SIZE + created-date (never its title,
 // thumbnail, or notes), so a user can prune media whose password they've lost. A password field

package/src/react/media/PrivateModeBadge.tsx

@@ -1,5 +1,5 @@
-import { cn } from '../lib/cn';
-import { Tooltip } from '../components/Tooltip';
+import { cn } from '../lib/cn.js';
+import { Tooltip } from '../components/Tooltip.js';
 
 export interface PrivateModeBadgeProps {
   /** How many items are private (shown in the label). */

package/src/react/media/TrimRangeSlider.tsx

@@ -1,6 +1,6 @@
 import { type PointerEvent as ReactPointerEvent, useCallback, useRef } from 'react';
 import { clampTrimRange, formatTimecode } from 'cursedbelt-core/media';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 export interface TrimRangeSliderProps {
   duration: number;

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

@@ -23,8 +23,8 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import type React from 'react';
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
-import { VideoChapterEditor } from './VideoChapterEditor';
-import type { VideoChapter } from './videoChapters';
+import { VideoChapterEditor } from './VideoChapterEditor.js';
+import type { VideoChapter } from './videoChapters.js';
 
 afterEach(cleanup);
 

package/src/react/media/VideoChapterEditor.tsx

@@ -2,17 +2,17 @@ import './videoChapterEditor.css';
 import React from 'react';
 import { Bookmark, Trash2 } from 'lucide-react';
 import { cutTimecode } from 'cursedbelt-core/media/video-cuts';
-import { ActionBar } from '../components/ActionBar';
-import { Button } from '../components/Button';
-import { InfoHint } from '../components/InfoHint';
-import { Input } from '../components/Input';
-import { Modal } from '../components/Modal';
+import { ActionBar } from '../components/ActionBar.js';
+import { Button } from '../components/Button.js';
+import { InfoHint } from '../components/InfoHint.js';
+import { Input } from '../components/Input.js';
+import { Modal } from '../components/Modal.js';
 import {
   chapterProblem,
   chapterSpans,
   normalizeChapters,
   type VideoChapter,
-} from './videoChapters';
+} from './videoChapters.js';
 
 /**
  * Put markers on a video at points in time and NAME them — the dialog.

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

@@ -12,7 +12,7 @@ import { readFileSync } from 'node:fs';
 import { join } from 'node:path';
 import type React from 'react';
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { VideoCutEditor } from './VideoCutEditor';
+import { VideoCutEditor } from './VideoCutEditor.js';
 
 afterEach(cleanup);
 

package/src/react/media/VideoCutEditor.tsx

@@ -1,11 +1,11 @@
 import './videoCutEditor.css';
 import React from 'react';
 import { Scissors, X } from 'lucide-react';
-import { ActionBar } from '../components/ActionBar';
-import { Button } from '../components/Button';
-import { InfoHint } from '../components/InfoHint';
-import { Tooltip } from '../components/Tooltip';
-import { Modal } from '../components/Modal';
+import { ActionBar } from '../components/ActionBar.js';
+import { Button } from '../components/Button.js';
+import { InfoHint } from '../components/InfoHint.js';
+import { Tooltip } from '../components/Tooltip.js';
+import { Modal } from '../components/Modal.js';
 import {
   addSplit,
   type CutPlan,

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

@@ -5,7 +5,7 @@ import { cleanup, render } from '@testing-library/react';
 import type { MediaPlayerInstance } from '@vidstack/react';
 import { useRef } from 'react';
 import type { PlayableVideo } from 'cursedbelt-core/media';
-import { CanvasVideoPlayer } from './CanvasVideoPlayer';
+import { CanvasVideoPlayer } from './CanvasVideoPlayer.js';
 import {
   DEFAULT_VIDEO_ASPECT_RATIO,
   isSmallVideoLayout,
@@ -17,7 +17,7 @@ import {
   stepSlots,
   useLiveScrub,
   VideoPlayer,
-} from './VideoPlayer';
+} from './VideoPlayer.js';
 
 afterEach(cleanup);
 

package/src/react/media/VideoPlayer.tsx

@@ -24,15 +24,15 @@ import {
   readSessionVolume,
   type SessionVolume,
   writeSessionVolume,
-} from '../media-gallery/playbackPreferences';
+} from '../media-gallery/playbackPreferences.js';
 import {
   hlsErrorIsAnswer,
   probeSourceFault,
   type SourceFault,
   SourceFaultOverlay,
-} from './sourceFault';
-import { isSurfaceControl } from './surfaceGesture';
-import { chapterSpans, type ChapteredVideo, type VideoChapter } from './videoChapters';
+} from './sourceFault.js';
+import { isSurfaceControl } from './surfaceGesture.js';
+import { chapterSpans, type ChapteredVideo, type VideoChapter } from './videoChapters.js';
 
 /**
  * The reusable video player primitive. Consumes a {@link PlayableVideo} (URLs already

package/src/react/media/VideoSlideContent.tsx

@@ -6,7 +6,7 @@ import {
   DefaultVideoLayout,
   defaultLayoutIcons,
 } from '@vidstack/react/player/layouts/default';
-import type { MediaVideoSlide } from './mediaPhoto';
+import type { MediaVideoSlide } from './mediaPhoto.js';
 
 /**
  * The Vidstack player rendered inside YARL for a video (or audio) slide. Vidstack is a

package/src/react/media/VideoTrimmer.tsx

@@ -6,15 +6,15 @@ import {
   type VideoFormat,
   type VideoQuality,
 } from 'cursedbelt-core/media';
-import { ActionBar } from '../components/ActionBar';
-import { Button } from '../components/Button';
-import { IconButton } from '../components/IconButton';
-import { Modal } from '../components/Modal';
-import { SegmentedControl } from '../components/SegmentedControl';
-import { Spinner } from '../components/Spinner';
-import { TrimRangeSlider } from './TrimRangeSlider';
-import type { VideoTrimmerProps } from './types';
-import { createVideoThumbnailer } from './videoThumbnailer';
+import { ActionBar } from '../components/ActionBar.js';
+import { Button } from '../components/Button.js';
+import { IconButton } from '../components/IconButton.js';
+import { Modal } from '../components/Modal.js';
+import { SegmentedControl } from '../components/SegmentedControl.js';
+import { Spinner } from '../components/Spinner.js';
+import { TrimRangeSlider } from './TrimRangeSlider.js';
+import type { VideoTrimmerProps } from './types.js';
+import { createVideoThumbnailer } from './videoThumbnailer.js';
 
 const FILMSTRIP_COUNT = 10;
 

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

@@ -11,7 +11,7 @@
 import { describe, expect, test } from 'bun:test';
 import type React from 'react';
 import { fireEvent, render } from '@testing-library/react';
-import { type MediaOrientation, VideoTurner } from './VideoTurner';
+import { type MediaOrientation, VideoTurner } from './VideoTurner.js';
 
 function open(orientation?: MediaOrientation) {
   const saved: (MediaOrientation | undefined)[] = [];

package/src/react/media/VideoTurner.tsx

@@ -1,10 +1,10 @@
 import './pictureEditor.css';
 import React from 'react';
-import { ActionBar } from '../components/ActionBar';
-import { Button } from '../components/Button';
-import { Modal } from '../components/Modal';
-import { flip, NO_EDIT, type PictureEdit, previewTransform, rotate, swapsAxes } from './pictureEdit';
-import { Tooltip } from '../components/Tooltip';
+import { ActionBar } from '../components/ActionBar.js';
+import { Button } from '../components/Button.js';
+import { Modal } from '../components/Modal.js';
+import { flip, NO_EDIT, type PictureEdit, previewTransform, rotate, swapsAxes } from './pictureEdit.js';
+import { Tooltip } from '../components/Tooltip.js';
 
 /** The three integers a turn amounts to — the same shape `MediaGalleryItem.orientation` carries. */
 export interface MediaOrientation {

package/src/react/media/VirtualMediaGrid.tsx

@@ -1,4 +1,4 @@
-import { VirtualCardGrid, type VirtualCardGridProps } from '../VirtualCardGrid';
+import { VirtualCardGrid, type VirtualCardGridProps } from '../VirtualCardGrid.js';
 
 /**
  * 🔴 The exact height of `.cbgd-meta` plus the tile's own borders — NOT an estimate.