cursedbelt 4.4.0 → 4.5.0

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

@@ -69,22 +69,22 @@ import React, {
   useState,
 } from 'react';
 import type { PlayableVideo } from 'cursedbelt-core/media';
-import { CATEGORY_LABEL, FileTypeIcon } from '../components/FileTypeIcon';
-import { DeleteButton } from '../components/DeleteButton';
+import { CATEGORY_LABEL, FileTypeIcon } from '../components/FileTypeIcon.js';
+import { DeleteButton } from '../components/DeleteButton.js';
 import {
   type CheckboxHeaderState,
   useCheckboxSelection,
-} from '../hooks/useCheckboxSelection';
-import { DenseGalleryDetail, DenseGalleryShell } from '../media/DenseGalleryShell';
-import { useHlsSource } from '../media/hlsSource';
+} from '../hooks/useCheckboxSelection.js';
+import { DenseGalleryDetail, DenseGalleryShell } from '../media/DenseGalleryShell.js';
+import { useHlsSource } from '../media/hlsSource.js';
 import {
   isRecoverableFault,
   probeSourceFault,
   type SourceFault,
   sourceFaultMessage,
-} from '../media/sourceFault';
-import { HoverScrubVideoThumb } from '../media/HoverScrubVideoThumb';
-import { isPlayPauseSpace } from '../media/playerSpaceKey';
+} from '../media/sourceFault.js';
+import { HoverScrubVideoThumb } from '../media/HoverScrubVideoThumb.js';
+import { isPlayPauseSpace } from '../media/playerSpaceKey.js';
 import {
   LIGHT_RANGE,
   lightFilter,
@@ -94,10 +94,10 @@ import {
   isLightAdjusted,
   previewTransform,
   swapsAxes,
-} from '../media/pictureEdit';
-import type { PictureEditResult } from '../media/PictureEditor';
-import type { MediaOrientation } from '../media/VideoTurner';
-import type { ChapteredVideo, VideoChapter } from '../media/videoChapters';
+} from '../media/pictureEdit.js';
+import type { PictureEditResult } from '../media/PictureEditor.js';
+import type { MediaOrientation } from '../media/VideoTurner.js';
+import type { ChapteredVideo, VideoChapter } from '../media/videoChapters.js';
 import type { VideoCut } from 'cursedbelt-core/media/video-cuts';
 import {
   GALLERY_ORDER_OPTIONS,
@@ -109,7 +109,7 @@ import {
   playsWithSpace,
   snapsToStage,
   sortGalleryItems,
-} from './mediaGalleryModel';
+} from './mediaGalleryModel.js';
 import {
   IMAGE_DWELL_OPTIONS,
   PLAYBACK_END_LABELS,
@@ -129,15 +129,15 @@ import {
   type GalleryViewMode,
   readViewMode,
   writeViewMode,
-} from './playbackPreferences';
-import type { MediaMetaChange } from './mediaMeta';
-import { GalleryTable, durationLabel } from './GalleryTable';
-import { nextInRun, runAdvances, runRepeatsOne, stepId } from './playbackRun';
-import type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder } from './types';
-import { createdLabel, type MediaCache, ThumbImg, useItemMedia } from './galleryItemMedia';
-import { Tooltip } from '../components/Tooltip';
-
-import { TruncatedText } from '../components/TruncatedText';
+} from './playbackPreferences.js';
+import type { MediaMetaChange } from './mediaMeta.js';
+import { GalleryTable, durationLabel } from './GalleryTable.js';
+import { nextInRun, runAdvances, runRepeatsOne, stepId } from './playbackRun.js';
+import type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder } from './types.js';
+import { createdLabel, type MediaCache, ThumbImg, useItemMedia } from './galleryItemMedia.js';
+import { Tooltip } from '../components/Tooltip.js';
+
+import { TruncatedText } from '../components/TruncatedText.js';
 // The reusable media gallery — the plugin-era mixed gallery generalised to EVERY binary
 // kind the fleet stores. Same design as plugin-media-gallery: a thumbnail-maximal browse
 // grid (hover-scrub video tiles, still photo tiles, type-icon tiles for other binaries)
@@ -148,29 +148,29 @@ import { TruncatedText } from '../components/TruncatedText';
 
 // Heavy viewers stay off the critical path — each loads only when a matching file opens.
 const LazyVideoPlayer = React.lazy(() =>
-  import('../media/VideoPlayer').then((m) => ({ default: m.VideoPlayer })),
+  import('../media/VideoPlayer.js').then((m) => ({ default: m.VideoPlayer })),
 );
 const LazyPdfViewer = React.lazy(() =>
-  import('../pdf-viewer/PdfViewer').then((m) => ({ default: m.PdfViewer })),
+  import('../pdf-viewer/PdfViewer.js').then((m) => ({ default: m.PdfViewer })),
 );
 const LazyWorkbookViewer = React.lazy(() =>
-  import('../workbook-viewer/WorkbookViewer').then((m) => ({ default: m.WorkbookViewer })),
+  import('../workbook-viewer/WorkbookViewer.js').then((m) => ({ default: m.WorkbookViewer })),
 );
 const LazyMarkdownDoc = React.lazy(() =>
-  import('../markdown/MarkdownDoc').then((m) => ({ default: m.MarkdownDoc })),
+  import('../markdown/MarkdownDoc.js').then((m) => ({ default: m.MarkdownDoc })),
 );
 // The rotate/crop/re-light dialog, and its own stylesheet, only once somebody opens it — so an
 // app that never edits a picture pays nothing for the capability being available.
 const LazyPictureEditor = React.lazy(() =>
-  import('../media/PictureEditor').then((m) => ({ default: m.PictureEditor })),
+  import('../media/PictureEditor.js').then((m) => ({ default: m.PictureEditor })),
 );
 const LazyFrameGrabber = React.lazy(() =>
-  import('../media/FrameGrabber').then((m) => ({ default: m.FrameGrabber })),
+  import('../media/FrameGrabber.js').then((m) => ({ default: m.FrameGrabber })),
 );
 // The same four gestures for FOOTAGE — a separate dialog from the picture editor because a
 // video's turn can only ever be stored, never baked. See `VideoTurner`'s header.
 const LazyVideoTurner = React.lazy(() =>
-  import('../media/VideoTurner').then((m) => ({ default: m.VideoTurner })),
+  import('../media/VideoTurner.js').then((m) => ({ default: m.VideoTurner })),
 );
 /**
  * The turn dialog, over the item's RESOLVED media — never over the raw row.
@@ -268,7 +268,7 @@ function EditPictureDialog({
 // of this — which is what makes "enabled for collections only, for now" a fact about the
 // bundle rather than a feature flag somebody has to remember to check.
 const LazyVideoCutEditor = React.lazy(() =>
-  import('../media/VideoCutEditor').then((m) => ({ default: m.VideoCutEditor })),
+  import('../media/VideoCutEditor.js').then((m) => ({ default: m.VideoCutEditor })),
 );
 /**
  * The trim dialog, over the item's RESOLVED media — never over the raw row. Same defect, same
@@ -312,7 +312,7 @@ function TrimVideoDialog({
 // nowhere to PUT a chapter list never passes `onSaveChapters`, so it never loads a byte of
 // this dialog — the capability and the bundle cost turn on together, with no flag between them.
 const LazyVideoChapterEditor = React.lazy(() =>
-  import('../media/VideoChapterEditor').then((m) => ({ default: m.VideoChapterEditor })),
+  import('../media/VideoChapterEditor.js').then((m) => ({ default: m.VideoChapterEditor })),
 );
 /**
  * The sections dialog, over the item's RESOLVED media — never over the raw row. Same defect,
@@ -397,7 +397,7 @@ function GrabFrameDialog({
 // dialog — and the gallery keeps reading whatever tags and descriptions its items already
 // carry either way, because reading was never the capability that was missing.
 const LazyMediaMetaEditor = React.lazy(() =>
-  import('./MediaMetaEditor').then((m) => ({ default: m.MediaMetaEditor })),
+  import('./MediaMetaEditor.js').then((m) => ({ default: m.MediaMetaEditor })),
 );
 
 /**

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

@@ -1,19 +1,19 @@
 import React from 'react';
-import { ActionBar } from '../components/ActionBar';
-import { AutoGrowTextarea } from '../components/AutoGrowTextarea';
-import { Button } from '../components/Button';
-import { FieldLabel } from '../components/FieldLabel';
-import { InfoHint } from '../components/InfoHint';
-import { Modal } from '../components/Modal';
-import { TagsInput } from '../components/TagsInput';
+import { ActionBar } from '../components/ActionBar.js';
+import { AutoGrowTextarea } from '../components/AutoGrowTextarea.js';
+import { Button } from '../components/Button.js';
+import { FieldLabel } from '../components/FieldLabel.js';
+import { InfoHint } from '../components/InfoHint.js';
+import { Modal } from '../components/Modal.js';
+import { TagsInput } from '../components/TagsInput.js';
 import {
   type MediaMetaChange,
   cleanTags,
   isEmptyMetaChange,
   tagDiff,
   tagsOn,
-} from './mediaMeta';
-import type { MediaGalleryItem } from './types';
+} from './mediaMeta.js';
+import type { MediaGalleryItem } from './types.js';
 
 /**
  * Tag media, and say what it is — the dialog.

package/src/react/media-gallery/galleryDeepLink.spec.tsx

@@ -13,9 +13,9 @@
  */
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
-import { DeepLinkProvider, defineDeepLinks, useDeepLink } from '../deep-link';
-import { GALLERY_ITEM_PARAM, useGalleryDeepLink } from './galleryDeepLink';
-import type { MediaGalleryItem } from './types';
+import { DeepLinkProvider, defineDeepLinks, useDeepLink } from '../deep-link/index.js';
+import { GALLERY_ITEM_PARAM, useGalleryDeepLink } from './galleryDeepLink.js';
+import type { MediaGalleryItem } from './types.js';
 
 afterEach(cleanup);
 

package/src/react/media-gallery/galleryDeepLink.ts

@@ -40,7 +40,7 @@
  * the grid I opened this from* — no matter how far you stepped after that.
  */
 import { useCallback } from 'react';
-import { useDeepLink } from '../deep-link';
+import { useDeepLink } from '../deep-link/index.js';
 
 /**
  * The query key that carries the open file. A single letter because it rides in every link

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

@@ -9,8 +9,8 @@
  * that cannot drift; re-implementing either inside the table is what this file prevents.
  */
 import { type MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';
-import { staticItemMedia } from './mediaGalleryModel';
-import type { MediaGalleryItem, MediaGalleryItemMedia } from './types';
+import { staticItemMedia } from './mediaGalleryModel.js';
+import type { MediaGalleryItem, MediaGalleryItemMedia } from './types.js';
 
 export type MediaCache = MutableRefObject<Map<string, Promise<MediaGalleryItemMedia | null>>>;
 /**

package/src/react/media-gallery/galleryTable.spec.ts

@@ -6,7 +6,7 @@ import {
   durationLabel,
   exactBytesLabel,
   visibleWindow,
-} from './GalleryTable';
+} from './GalleryTable.js';
 
 /**
  * The table's arithmetic, tested where a browser is not needed.

package/src/react/media-gallery/index.ts

@@ -1,17 +1,17 @@
 // cursedbelt/react/media-gallery — the fleet's shared any-binary media gallery.
 // Its own subpath (like pdf-viewer / workbook-viewer) so the heavy viewers it lazy-loads
 // never ride into an app that doesn't open one.
-export { MediaGallery, type MediaGalleryProps } from './MediaGallery';
+export { MediaGallery, type MediaGalleryProps } from './MediaGallery.js';
 // The table VIEW is exported on its own so an app that renders its own shell (the
 // binary-server inspector) gets the same rows rather than writing a third table.
-export { GalleryTable, type GalleryTableProps } from './GalleryTable';
+export { GalleryTable, type GalleryTableProps } from './GalleryTable.js';
 // The action pill the gallery's own controls are drawn with — re-exported here so a
 // consumer filling `detailActions` reaches for the component instead of copying the
 // `cbgd-order-btn` class name into its own repo, where nothing can check it.
 export {
   GalleryActionButton,
   type GalleryActionButtonProps,
-} from '../media/DenseGalleryShell';
+} from '../media/DenseGalleryShell.js';
 export {
   filterGalleryItems,
   galleryDateHaystack,
@@ -22,18 +22,18 @@ export {
   galleryTags,
   isMarkdownFile,
   sortGalleryItems,
-} from './mediaGalleryModel';
-export type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder } from './types';
+} from './mediaGalleryModel.js';
+export type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder } from './types.js';
 // `onSaveMeta`'s contract, and the merge every consumer of it would otherwise write itself.
 // Exported for the same reason `fileTreeSelection.ts`'s rules are: the gallery persists
 // nothing, so the "add these, remove those, keep the spelling" arithmetic happens in the app —
 // and four apps re-deriving it is four chances to mint `Holiday` beside `holiday`.
-export { type MediaMetaChange, applyMetaChange } from './mediaMeta';
+export { type MediaMetaChange, applyMetaChange } from './mediaMeta.js';
 // Re-exported so an app wiring `onTrimVideo` types its handler from the gallery's own subpath
 // rather than reaching into `cursedbelt/react/media` for one interface.
 export type { VideoCut } from 'cursedbelt-core/media/video-cuts';
 // Same reason for `onSaveChapters`: an app types its handler from the gallery's own subpath.
-export type { VideoChapter } from '../media/videoChapters';
+export type { VideoChapter } from '../media/videoChapters.js';
 // The open file, in the URL. A BINDING over `cursedbelt/react/deep-link`, not a second way
 // of writing one — see the header of `galleryDeepLink.ts`.
 export {
@@ -41,7 +41,7 @@ export {
   type GalleryDeepLink,
   type GalleryDeepLinkOptions,
   useGalleryDeepLink,
-} from './galleryDeepLink';
+} from './galleryDeepLink.js';
 export {
   DEFAULT_IMAGE_DWELL,
   IMAGE_DWELL_OPTIONS,
@@ -58,7 +58,7 @@ export {
   writePlaybackEnd,
   writeThumbAutoplay,
   writeViewMode,
-} from './playbackPreferences';
+} from './playbackPreferences.js';
 // The run algebra — pure, so an app that drives its own player (music's queue, roms' reel)
 // can share the shuffle bag and the wrapping stepper without mounting the gallery.
 export {
@@ -68,4 +68,4 @@ export {
   runAdvances,
   runRepeatsOne,
   stepId,
-} from './playbackRun';
+} from './playbackRun.js';

package/src/react/media-gallery/mediaGalleryModel.spec.ts

@@ -9,8 +9,8 @@ import {
   isMarkdownFile,
   sortGalleryItems,
   staticItemMedia,
-} from './mediaGalleryModel';
-import type { MediaGalleryItem, MediaGalleryOrder } from './types';
+} from './mediaGalleryModel.js';
+import type { MediaGalleryItem, MediaGalleryOrder } from './types.js';
 
 const item = (over: Partial<MediaGalleryItem> & { id: string; name: string }): MediaGalleryItem =>
   ({ ...over }) as MediaGalleryItem;

package/src/react/media-gallery/mediaGalleryModel.ts

@@ -1,5 +1,5 @@
 import { type FileCategory, fileCategory } from 'cwip/file-kind';
-import type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder } from './types';
+import type { MediaGalleryItem, MediaGalleryItemMedia, MediaGalleryOrder } from './types.js';
 
 // Pure gallery model — classification, filtering, sorting, chip derivation. Kept
 // framework-free so it's black-box testable and the component file stays presentational.

package/src/react/media-gallery/mediaMeta.spec.ts

@@ -5,7 +5,7 @@ import {
   isEmptyMetaChange,
   tagDiff,
   tagsOn,
-} from './mediaMeta';
+} from './mediaMeta.js';
 
 describe('cleanTags', () => {
   test('trims, drops empties and keeps the first spelling of a case-duplicate', () => {

package/src/react/media-gallery/mediaMeta.ts

@@ -1,4 +1,4 @@
-import type { MediaGalleryItem } from './types';
+import type { MediaGalleryItem } from './types.js';
 
 /**
  * Tags and a description, expressed as a CHANGE rather than as a new value.

package/src/react/media-gallery/playbackPreferences.spec.ts

@@ -6,7 +6,7 @@ import {
   STAGE_VOLUME_KEY,
   writePlaybackEnd,
   writeSessionVolume,
-} from './playbackPreferences';
+} from './playbackPreferences.js';
 
 /**
  * 🔴 The volume he set stays set for the PAGE — and is gone on the next one.

package/src/react/media-gallery/playbackRun.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { nextInRun, runAdvances, runRepeatsOne, stepId } from './playbackRun';
+import { nextInRun, runAdvances, runRepeatsOne, stepId } from './playbackRun.js';
 
 const IDS = ['a', 'b', 'c', 'd'];
 

package/src/react/media-gallery/playbackRun.ts

@@ -1,4 +1,4 @@
-import type { PlaybackEndBehavior } from './playbackPreferences';
+import type { PlaybackEndBehavior } from './playbackPreferences.js';
 
 /**
  * The RUN — what plays after the thing on the stage finishes.

package/src/react/media-gallery/types.ts

@@ -1,6 +1,6 @@
 import type { FileCategory } from 'cwip/file-kind';
 import type { ProcessingStatus } from 'cursedbelt-core/media';
-import type { VideoChapter } from '../media/videoChapters';
+import type { VideoChapter } from '../media/videoChapters.js';
 
 /**
  * Sort orders the gallery header offers.

package/src/react/namespace/NamespaceTargetCapsule.spec.tsx

@@ -5,7 +5,7 @@ import {
   NamespaceTargetCapsule,
   resolveSelectedOption,
   type NamespaceTargetOption,
-} from './NamespaceTargetCapsule';
+} from './NamespaceTargetCapsule.js';
 
 afterEach(cleanup);
 

package/src/react/namespace/NamespaceTargetCapsule.tsx

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 import { ChevronDown } from 'lucide-react';
-import { cn } from '../lib/cn';
-import { Button } from '../components/Button';
-import { DropdownMenu, type DropdownMenuItem } from '../components/DropdownMenu';
+import { cn } from '../lib/cn.js';
+import { Button } from '../components/Button.js';
+import { DropdownMenu, type DropdownMenuItem } from '../components/DropdownMenu.js';
 
 export interface NamespaceTargetOption {
   /** `null` = the General pool (no namespace). */

package/src/react/nav/BreadcrumbMenus.tsx

@@ -29,14 +29,14 @@
  */
 
 import type { ReactNode } from 'react';
-import { DropdownMenu, type DropdownMenuItem } from '../components/DropdownMenu';
+import { DropdownMenu, type DropdownMenuItem } from '../components/DropdownMenu.js';
 import {
   type BreadcrumbActionItem,
   type BreadcrumbTrailNode,
   isAsyncAction,
   nodeText,
-} from './breadcrumbModel';
-import type { NavNavigationProps } from './navShared';
+} from './breadcrumbModel.js';
+import type { NavNavigationProps } from './navShared.js';
 
 interface PanelBase {
   trigger: ReactNode;

package/src/react/nav/BreadcrumbPivot.tsx

@@ -26,12 +26,12 @@
 
 import type { ReactNode } from 'react';
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
-import { Input } from '../components/Input';
-import { Popover } from '../components/Popover';
-import { Skeleton } from '../components/Skeleton';
-import { cn } from '../lib/cn';
-import { FLOATING_ITEM_BASE } from '../lib/floatingStyles';
-import type { AsyncBreadcrumbAction, BreadcrumbActionItem } from './breadcrumbModel';
+import { Input } from '../components/Input.js';
+import { Popover } from '../components/Popover.js';
+import { Skeleton } from '../components/Skeleton.js';
+import { cn } from '../lib/cn.js';
+import { FLOATING_ITEM_BASE } from '../lib/floatingStyles.js';
+import type { AsyncBreadcrumbAction, BreadcrumbActionItem } from './breadcrumbModel.js';
 
 const DEFAULT_DEBOUNCE_MS = 250;
 

package/src/react/nav/BreadcrumbProvider.tsx

@@ -40,8 +40,8 @@ import {
   type BreadcrumbStore,
   createBreadcrumbStore,
   type RegisterOptions,
-} from './breadcrumbStore';
-import type { BreadcrumbTrailNode } from './breadcrumbModel';
+} from './breadcrumbStore.js';
+import type { BreadcrumbTrailNode } from './breadcrumbModel.js';
 
 const BreadcrumbContext = createContext<BreadcrumbStore | null>(null);
 

package/src/react/nav/BreadcrumbTrail.tsx

@@ -46,18 +46,18 @@ import {
   useRef,
   useState,
 } from 'react';
-import { Button } from '../components/Button';
-import { TruncatedText } from '../components/TruncatedText';
-import { cn } from '../lib/cn';
+import { Button } from '../components/Button.js';
+import { TruncatedText } from '../components/TruncatedText.js';
+import { cn } from '../lib/cn.js';
 import {
   type BreadcrumbTrailNode,
   collapseOrder,
   isAsyncAction,
   nodeText,
   planOverflow,
-} from './breadcrumbModel';
-import { NavLink, type NavNavigationProps } from './navShared';
-import { TAP_TARGET } from '../lib/tapTarget';
+} from './breadcrumbModel.js';
+import { NavLink, type NavNavigationProps } from './navShared.js';
+import { TAP_TARGET } from '../lib/tapTarget.js';
 
 /** Fallback width for the `…` trigger before one has ever been rendered. */
 const ESTIMATED_TRIGGER_WIDTH = 36;
@@ -66,8 +66,8 @@ const ESTIMATED_TRIGGER_WIDTH = 36;
 /* The menus, on demand                                                        */
 /* -------------------------------------------------------------------------- */
 
-type MenuModule = typeof import('./BreadcrumbMenus');
-type PivotComponent = typeof import('./BreadcrumbPivot').AsyncPivotPanel;
+type MenuModule = typeof import('./BreadcrumbMenus.js');
+type PivotComponent = typeof import('./BreadcrumbPivot.js').AsyncPivotPanel;
 
 let loadedMenu: MenuModule | null = null;
 let pendingMenu: Promise<MenuModule> | null = null;
@@ -81,7 +81,7 @@ let pendingPivot: Promise<PivotComponent> | null = null;
  */
 export function preloadBreadcrumbMenus(): Promise<MenuModule> {
   if (!pendingMenu) {
-    pendingMenu = import('./BreadcrumbMenus').then((module) => {
+    pendingMenu = import('./BreadcrumbMenus.js').then((module) => {
       loadedMenu = module;
       return module;
     });
@@ -98,7 +98,7 @@ export function preloadBreadcrumbMenus(): Promise<MenuModule> {
  */
 export function preloadBreadcrumbPivot(): Promise<PivotComponent> {
   if (!pendingPivot) {
-    pendingPivot = import('./BreadcrumbPivot').then((module) => {
+    pendingPivot = import('./BreadcrumbPivot.js').then((module) => {
       loadedPivot = module.AsyncPivotPanel;
       return module.AsyncPivotPanel;
     });

package/src/react/nav/Breadcrumbs.tsx

@@ -7,10 +7,10 @@ import {
   type NavCrumb,
   type NavigationModel,
 } from 'cursedbelt-core/navigation';
-import { useBreadcrumbs, useOptionalBreadcrumbNodes } from './BreadcrumbProvider';
-import { BreadcrumbTrail, type BreadcrumbTrailProps } from './BreadcrumbTrail';
-import type { BreadcrumbAction, BreadcrumbTrailNode } from './breadcrumbModel';
-import { type NavNavigationProps, renderIcon } from './navShared';
+import { useBreadcrumbs, useOptionalBreadcrumbNodes } from './BreadcrumbProvider.js';
+import { BreadcrumbTrail, type BreadcrumbTrailProps } from './BreadcrumbTrail.js';
+import type { BreadcrumbAction, BreadcrumbTrailNode } from './breadcrumbModel.js';
+import { type NavNavigationProps, renderIcon } from './navShared.js';
 
 /** Options every trail entry point shares — the opt-in half of the system. */
 interface TrailOptions {

package/src/react/nav/ColorSwatchGrid.tsx

@@ -1,8 +1,8 @@
 import { RotateCcw } from 'lucide-react';
-import { Button } from '../components/Button';
-import { SwatchPicker } from '../components/SwatchPicker';
-import { cn } from '../lib/cn';
-import { NAV_COLORS } from './colors';
+import { Button } from '../components/Button.js';
+import { SwatchPicker } from '../components/SwatchPicker.js';
+import { cn } from '../lib/cn.js';
+import { NAV_COLORS } from './colors.js';
 
 export interface ColorSwatchGridProps {
   /** Current accent (hex), or undefined for the theme default. */

package/src/react/nav/CommandBar.spec.tsx

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

package/src/react/nav/CommandBar.tsx

@@ -1,7 +1,7 @@
 import { Plus, Search } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { Button } from '../components/Button';
-import { cn } from '../lib/cn';
+import { Button } from '../components/Button.js';
+import { cn } from '../lib/cn.js';
 
 export interface CommandBarProps {
   /**

package/src/react/nav/HeaderSearch.tsx

@@ -11,17 +11,17 @@ import {
 import { Search, X } from 'lucide-react';
 import { type ReactNode, useId, useMemo, useState } from 'react';
 import { groupCatalogueHits, type SearchCatalogueEntry } from 'cursedbelt-core/navigation';
-import { IconButton } from '../components/IconButton';
-import { Input } from '../components/Input';
-import { ScrollArea } from '../components/ScrollArea';
-import { cn } from '../lib/cn';
-import type { NavNavigationProps } from './navShared';
+import { IconButton } from '../components/IconButton.js';
+import { Input } from '../components/Input.js';
+import { ScrollArea } from '../components/ScrollArea.js';
+import { cn } from '../lib/cn.js';
+import type { NavNavigationProps } from './navShared.js';
 import {
   type SearchResultGroup,
   type SearchResultRow,
   SearchResults,
   searchOptionId,
-} from './SearchResults';
+} from './SearchResults.js';
 
 export interface HeaderSearchProps extends NavNavigationProps {
   /** The instant client-side pages catalogue (from `deriveSearchCatalogue`). */

package/src/react/nav/HubTileGrid.tsx

@@ -8,14 +8,14 @@ import {
   type NavItem,
   type NavTilePrefs,
 } from 'cursedbelt-core/navigation';
-import { Button } from '../components/Button';
-import { EmptyState } from '../components/EmptyState';
-import { Grid } from '../components/Grid';
-import { Popover } from '../components/Popover';
-import type { DragItemApi } from '../hooks/dragShared';
-import { useDragReorder } from '../hooks/useDragReorder';
-import { cn } from '../lib/cn';
-import { NavItemMenu } from './NavItemMenu';
+import { Button } from '../components/Button.js';
+import { EmptyState } from '../components/EmptyState.js';
+import { Grid } from '../components/Grid.js';
+import { Popover } from '../components/Popover.js';
+import type { DragItemApi } from '../hooks/dragShared.js';
+import { useDragReorder } from '../hooks/useDragReorder.js';
+import { cn } from '../lib/cn.js';
+import { NavItemMenu } from './NavItemMenu.js';
 import {
   type IconResolver,
   isPathWithin,
@@ -24,10 +24,10 @@ import {
   navAccent,
   rankBySavedOrder,
   renderIcon,
-} from './navShared';
+} from './navShared.js';
 
-import { Tooltip } from '../components/Tooltip';
-import { TAP_TARGET } from '../lib/tapTarget';
+import { Tooltip } from '../components/Tooltip.js';
+import { TAP_TARGET } from '../lib/tapTarget.js';
 export interface HubTileGridProps extends NavNavigationProps {
   /** The domain whose items become tiles. */
   domain: NavDomain;

package/src/react/nav/NavColorPicker.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import { IconButton } from '../components/IconButton';
-import { Popover } from '../components/Popover';
-import { cn } from '../lib/cn';
-import { ColorSwatchGrid } from './ColorSwatchGrid';
+import { IconButton } from '../components/IconButton.js';
+import { Popover } from '../components/Popover.js';
+import { cn } from '../lib/cn.js';
+import { ColorSwatchGrid } from './ColorSwatchGrid.js';
 
 export interface NavColorPickerProps {
   /** Current accent (hex), or undefined for the theme default. */

package/src/react/nav/NavItemMenu.tsx

@@ -1,10 +1,10 @@
 import { EyeOff, MoreVertical } from 'lucide-react';
 import { type ReactNode, useState } from 'react';
-import { Button } from '../components/Button';
-import { IconButton } from '../components/IconButton';
-import { Popover } from '../components/Popover';
-import { cn } from '../lib/cn';
-import { ColorSwatchGrid } from './ColorSwatchGrid';
+import { Button } from '../components/Button.js';
+import { IconButton } from '../components/IconButton.js';
+import { Popover } from '../components/Popover.js';
+import { cn } from '../lib/cn.js';
+import { ColorSwatchGrid } from './ColorSwatchGrid.js';
 
 export interface NavItemMenuProps {
   /** Row label, shown as the menu header. */