cursedbelt 4.4.0 → 4.6.0

package/src/react/keep-awake/KeepAwake.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
-import type { KeepAwakeStatus } from './keepAwakeEngine';
-import { useKeepAwake, type UseKeepAwakeOptions } from './useKeepAwake';
+import type { KeepAwakeStatus } from './keepAwakeEngine.js';
+import { useKeepAwake, type UseKeepAwakeOptions } from './useKeepAwake.js';
 
 export interface KeepAwakeProps extends UseKeepAwakeOptions {
   /** Observe what actually took hold — for a status chip, a dev overlay, or a test. */

package/src/react/keep-awake/index.ts

@@ -1,4 +1,4 @@
-export { KeepAwake, type KeepAwakeProps } from './KeepAwake';
+export { KeepAwake, type KeepAwakeProps } from './KeepAwake.js';
 export {
   createKeepAwakeEngine,
   type KeepAwakeEngine,
@@ -6,6 +6,6 @@ export {
   type KeepAwakeSource,
   type KeepAwakeStatus,
   type KeepAwakeVideoMode,
-} from './keepAwakeEngine';
-export { createSilentClipUrl, SILENT_CLIP_BASE64, SILENT_CLIP_MIME } from './silentClip';
-export { useKeepAwake, type UseKeepAwakeOptions, type UseKeepAwakeResult } from './useKeepAwake';
+} from './keepAwakeEngine.js';
+export { createSilentClipUrl, SILENT_CLIP_BASE64, SILENT_CLIP_MIME } from './silentClip.js';
+export { useKeepAwake, type UseKeepAwakeOptions, type UseKeepAwakeResult } from './useKeepAwake.js';

package/src/react/keep-awake/keepAwakeEngine.spec.ts

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, mock, test } from 'bun:test';
-import { createKeepAwakeEngine, type KeepAwakeStatus } from './keepAwakeEngine';
+import { createKeepAwakeEngine, type KeepAwakeStatus } from './keepAwakeEngine.js';
 
 /** Let the engine's `await`ed chain (request → play → emit) settle. */
 const flush = async (): Promise<void> => {

package/src/react/keep-awake/keepAwakeEngine.ts

@@ -1,4 +1,4 @@
-import { createSilentClipUrl } from './silentClip';
+import { createSilentClipUrl } from './silentClip.js';
 
 /**
  * Framework-free "stop this machine going to sleep while the page is open" engine.

package/src/react/keep-awake/useKeepAwake.spec.tsx

@@ -1,8 +1,8 @@
 import { afterEach, describe, expect, mock, test } from 'bun:test';
 import { act, render, renderHook } from '@testing-library/react';
-import { KeepAwake } from './KeepAwake';
-import type { KeepAwakeStatus } from './keepAwakeEngine';
-import { useKeepAwake } from './useKeepAwake';
+import { KeepAwake } from './KeepAwake.js';
+import type { KeepAwakeStatus } from './keepAwakeEngine.js';
+import { useKeepAwake } from './useKeepAwake.js';
 
 const sentinel = () => ({
   release: () => Promise.resolve(),

package/src/react/keep-awake/useKeepAwake.ts

@@ -4,7 +4,7 @@ import {
   type KeepAwakeEngine,
   type KeepAwakeStatus,
   type KeepAwakeVideoMode,
-} from './keepAwakeEngine';
+} from './keepAwakeEngine.js';
 
 export interface UseKeepAwakeOptions {
   /** Turn the whole thing off without unmounting the caller. Defaults to true. */

package/src/react/layout/CCResizeBoundary.spec.tsx

@@ -9,7 +9,7 @@ import { render } from '@testing-library/react';
 // 2026-09-15 split (was `VERIFY_EPSILON` in the cc engine's verify/types —
 // importing the engine package for one number would invert the dep graph).
 const VERIFY_EPSILON = 1e-5;
-import { CCResizeBoundary, resizeBoundaryRegistry } from './CCResizeBoundary';
+import { CCResizeBoundary, resizeBoundaryRegistry } from './CCResizeBoundary.js';
 
 describe('CCResizeBoundary (J5-1)', () => {
   it('registers its element and recomputes once per box change', () => {

package/src/react/layoutEngine/LayoutCanvas.tsx

@@ -9,20 +9,20 @@ import {
   type ResolveEnv,
 } from 'cursedbelt-core/layout';
 import { Z_BANDS } from 'cursedbelt-core/slots';
-import { DismissButton } from '../components/DismissButton';
-import { DragHandle } from '../components/DragHandle';
-import { wireTouchDragSource } from '../hooks/pointerDnd';
+import { DismissButton } from '../components/DismissButton.js';
+import { DragHandle } from '../components/DragHandle.js';
+import { wireTouchDragSource } from '../hooks/pointerDnd.js';
 import {
   combine,
   draggable,
   dropTargetForElements,
   monitorForDrags,
   useDropTargetElement,
-} from '../hooks/pragmaticDnd';
-import { cn } from '../lib/cn';
-import type { BindingResolver } from './LayoutRenderer';
-import { widgetDef } from './registry';
-import type { WidgetRegistry } from './types';
+} from '../hooks/pragmaticDnd.js';
+import { cn } from '../lib/cn.js';
+import type { BindingResolver } from './LayoutRenderer.js';
+import { widgetDef } from './registry.js';
+import type { WidgetRegistry } from './types.js';
 
 // The WYSIWYG editing surface. Each node is a live, display-only preview of its
 // widget on a sample row, laid out on the real container-query 12-col grid; a node is

package/src/react/layoutEngine/LayoutConfigDialog.tsx

@@ -7,19 +7,19 @@ import type {
   LayoutSurface,
   LayoutView,
 } from 'cursedbelt-core/layout';
-import { Button } from '../components/Button';
-import { Dialog, DialogClose, DialogContent, DialogTitle } from '../components/dialog';
-import { ScrollArea } from '../components/ScrollArea';
-import { SegmentedControl } from '../components/SegmentedControl';
-import { Switch } from '../components/Switch';
-import { useDiscardGuard } from '../hooks/useDiscardGuard';
-import { LayoutCanvas } from './LayoutCanvas';
-import type { BindingResolver } from './LayoutRenderer';
-import { NodeInspector } from './NodeInspector';
-import { makeElementNode, makeSectionNode, newNodeId } from './registry';
-import { SuggestPanel } from './SuggestPanel';
-import type { LayoutWidgetDef, WidgetRegistry } from './types';
-import { useLayoutEditor } from './useLayoutEditor';
+import { Button } from '../components/Button.js';
+import { Dialog, DialogClose, DialogContent, DialogTitle } from '../components/dialog.js';
+import { ScrollArea } from '../components/ScrollArea.js';
+import { SegmentedControl } from '../components/SegmentedControl.js';
+import { Switch } from '../components/Switch.js';
+import { useDiscardGuard } from '../hooks/useDiscardGuard.js';
+import { LayoutCanvas } from './LayoutCanvas.js';
+import type { BindingResolver } from './LayoutRenderer.js';
+import { NodeInspector } from './NodeInspector.js';
+import { makeElementNode, makeSectionNode, newNodeId } from './registry.js';
+import { SuggestPanel } from './SuggestPanel.js';
+import type { LayoutWidgetDef, WidgetRegistry } from './types.js';
+import { useLayoutEditor } from './useLayoutEditor.js';
 
 // The reimagined, non-technical layout editor. Built on the Modal/overlay family
 // (task 10), but the UX is the point: the user picks blocks from a plain-language

package/src/react/layoutEngine/LayoutRenderer.spec.tsx

@@ -1,9 +1,9 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import type { LayoutField, LayoutNode } from 'cursedbelt-core/layout';
-import { LayoutRenderer } from './LayoutRenderer';
-import { createWidgetRegistry } from './registry';
-import type { LayoutWidgetDef } from './types';
+import { LayoutRenderer } from './LayoutRenderer.js';
+import { createWidgetRegistry } from './registry.js';
+import type { LayoutWidgetDef } from './types.js';
 
 afterEach(cleanup);
 

package/src/react/layoutEngine/LayoutRenderer.tsx

@@ -11,9 +11,9 @@ import {
   type ResolvedBinding,
   type ResolveEnv,
 } from 'cursedbelt-core/layout';
-import { cn } from '../lib/cn';
-import { isContainerType, widgetDef } from './registry';
-import type { WidgetRegistry } from './types';
+import { cn } from '../lib/cn.js';
+import { isContainerType, widgetDef } from './registry.js';
+import type { WidgetRegistry } from './types.js';
 
 // The read-only rendering path. Renders a `LayoutNode` forest onto the responsive,
 // CONTAINER-QUERY 12-col grid (it reflows to its own box, so it's correct inside a

package/src/react/layoutEngine/NodeInspector.spec.tsx

@@ -1,9 +1,9 @@
 import { afterEach, describe, expect, mock, test } from 'bun:test';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import type { LayoutField, LayoutNode } from 'cursedbelt-core/layout';
-import { NodeInspector } from './NodeInspector';
-import { createWidgetRegistry } from './registry';
-import type { LayoutWidgetDef } from './types';
+import { NodeInspector } from './NodeInspector.js';
+import { createWidgetRegistry } from './registry.js';
+import type { LayoutWidgetDef } from './types.js';
 
 afterEach(cleanup);
 

package/src/react/layoutEngine/NodeInspector.tsx

@@ -8,16 +8,16 @@ import {
   type NodeStyle,
   type ResolveEnv,
 } from 'cursedbelt-core/layout';
-import { Button } from '../components/Button';
-import { Collapsible } from '../components/Collapsible';
-import { ConfirmDialog } from '../components/ConfirmDialog';
-import { Input } from '../components/Input';
-import { SelectField } from '../components/SelectField';
-import { Switch } from '../components/Switch';
-import { cn } from '../lib/cn';
-import type { BindingResolver } from './LayoutRenderer';
-import { compatibleWidgets, widgetDef } from './registry';
-import type { WidgetRegistry } from './types';
+import { Button } from '../components/Button.js';
+import { Collapsible } from '../components/Collapsible.js';
+import { ConfirmDialog } from '../components/ConfirmDialog.js';
+import { Input } from '../components/Input.js';
+import { SelectField } from '../components/SelectField.js';
+import { Switch } from '../components/Switch.js';
+import { cn } from '../lib/cn.js';
+import type { BindingResolver } from './LayoutRenderer.js';
+import { compatibleWidgets, widgetDef } from './registry.js';
+import type { WidgetRegistry } from './types.js';
 
 // The property panel for the selected node — rebuilt for NON-TECHNICAL editing. The
 // primary layer answers "what should this block look like?" in plain language: pick a

package/src/react/layoutEngine/SuggestPanel.spec.tsx

@@ -1,8 +1,8 @@
 import { afterEach, describe, expect, mock, test } from 'bun:test';
 import { cleanup, fireEvent, render } from '@testing-library/react';
-import { createWidgetRegistry } from './registry';
-import { SuggestPanel } from './SuggestPanel';
-import type { LayoutWidgetDef } from './types';
+import { createWidgetRegistry } from './registry.js';
+import { SuggestPanel } from './SuggestPanel.js';
+import type { LayoutWidgetDef } from './types.js';
 
 afterEach(cleanup);
 

package/src/react/layoutEngine/SuggestPanel.tsx

@@ -1,8 +1,8 @@
 import type { LayoutField } from 'cursedbelt-core/layout';
-import { Button } from '../components/Button';
-import { cn } from '../lib/cn';
-import { allWidgets } from './registry';
-import type { LayoutWidgetDef, WidgetCategory, WidgetRegistry } from './types';
+import { Button } from '../components/Button.js';
+import { cn } from '../lib/cn.js';
+import { allWidgets } from './registry.js';
+import type { LayoutWidgetDef, WidgetCategory, WidgetRegistry } from './types.js';
 
 // A palette of the widget types an app's registry offers, grouped by category and
 // added with a tap (a tap, not a fiddly drag, is the accessible + mobile-friendly add

package/src/react/layoutEngine/index.ts

@@ -4,11 +4,11 @@
 // widget registry (how each node type renders) + optionally a custom binding
 // resolver. Built on the design-system primitives (Surface/Grid, Modal/Drawer,
 // Collapsible) and @atlaskit/pragmatic-drag-and-drop. Exported as part of `cursedbelt/react`.
-export * from './LayoutCanvas';
-export * from './LayoutConfigDialog';
-export * from './LayoutRenderer';
-export * from './NodeInspector';
-export * from './registry';
-export * from './SuggestPanel';
-export * from './types';
-export * from './useLayoutEditor';
+export * from './LayoutCanvas.js';
+export * from './LayoutConfigDialog.js';
+export * from './LayoutRenderer.js';
+export * from './NodeInspector.js';
+export * from './registry.js';
+export * from './SuggestPanel.js';
+export * from './types.js';
+export * from './useLayoutEditor.js';

package/src/react/layoutEngine/registry.spec.ts

@@ -9,8 +9,8 @@ import {
   makeSectionNode,
   newNodeId,
   widgetDef,
-} from './index';
-import type { LayoutWidgetDef } from './types';
+} from './index.js';
+import type { LayoutWidgetDef } from './types.js';
 
 const def = (type: string, extra: Partial<LayoutWidgetDef> = {}): LayoutWidgetDef => ({
   type,

package/src/react/layoutEngine/registry.ts

@@ -1,5 +1,5 @@
 import type { LayoutField, LayoutNode } from 'cursedbelt-core/layout';
-import type { LayoutWidgetDef, WidgetRegistry } from './types';
+import type { LayoutWidgetDef, WidgetRegistry } from './types.js';
 
 // Build a widget registry from a flat list of definitions, keyed by `type` (last
 // wins on a duplicate type). The canonical way an app assembles its palette:

package/src/react/layoutEngine/useLayoutEditor.spec.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, test } from 'bun:test';
 import { act, renderHook } from '@testing-library/react';
 import type { LayoutNode } from 'cursedbelt-core/layout';
-import { useLayoutEditor } from './useLayoutEditor';
+import { useLayoutEditor } from './useLayoutEditor.js';
 
 const leaf = (id: string): LayoutNode => ({
   id,

package/src/react/lib/cn.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { cn } from './cn';
+import { cn } from './cn.js';
 
 describe('cn', () => {
   test('joins truthy class names, drops falsy ones', () => {

package/src/react/lib/createInstanceStore.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { createInstanceStoreRegistry } from './createInstanceStore';
+import { createInstanceStoreRegistry } from './createInstanceStore.js';
 
 interface Gallery {
   currentId: string;

package/src/react/lib/daypicker.tsx

@@ -2,7 +2,7 @@ import type { DayButtonProps } from '@daypicker/react';
 import { formatDateLocal, formatDateRangeLocal } from 'cwip/date';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import type { SVGProps } from 'react';
-import { cn } from './cn';
+import { cn } from './cn.js';
 
 /**
  * Token-themed classNames for DayPicker v10 — maps UI elements to Tailwind utilities

package/src/react/lib/draftPersistence.spec.ts

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, test } from 'bun:test';
-import { clearDraft, loadDraft, persistDraft } from './draftPersistence';
+import { clearDraft, loadDraft, persistDraft } from './draftPersistence.js';
 
 afterEach(() => localStorage.clear());
 

package/src/react/lib/field.ts

@@ -1,4 +1,4 @@
-import { TAP_TARGET_HEIGHT } from './tapTarget';
+import { TAP_TARGET_HEIGHT } from './tapTarget.js';
 
 /**
  * The single field-control class — driven ENTIRELY by the `--field-*` token layer

package/src/react/lib/floatingStyles.spec.ts

@@ -5,8 +5,8 @@ import {
   FLOATING_COLLISION_PADDING,
   FLOATING_CONTENT_BASE,
   FLOATING_ITEM_BASE,
-} from './floatingStyles';
-import { TAP_TARGET_HEIGHT } from './tapTarget';
+} from './floatingStyles.js';
+import { TAP_TARGET_HEIGHT } from './tapTarget.js';
 
 const REACT_DIR = join(import.meta.dir, '..');
 

package/src/react/lib/floatingStyles.ts

@@ -10,7 +10,7 @@
  * from `tw-animate-css`, which `src/styles.css` imports.
  */
 
-import { TAP_TARGET_HEIGHT } from './tapTarget';
+import { TAP_TARGET_HEIGHT } from './tapTarget.js';
 
 /**
  * The gap a floating panel keeps from every viewport edge, in px.

package/src/react/lib/form.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'bun:test';
 import { z } from 'zod';
-import { makeFormConfig } from './form';
+import { makeFormConfig } from './form.js';
 
 describe('makeFormConfig', () => {
   const schema = z.object({ name: z.string().min(1, 'Name is required') });

package/src/react/lib/textEntryTarget.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { isTextEntryTarget } from './textEntryTarget';
+import { isTextEntryTarget } from './textEntryTarget.js';
 
 describe('isTextEntryTarget — the native-undo guard', () => {
   test('a textarea and a text input are text entry', () => {

package/src/react/markdown/Markdown.spec.tsx

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

package/src/react/markdown/Markdown.tsx

@@ -1,7 +1,7 @@
 import { Fragment, type ReactNode } from 'react';
-import { CopyButton } from '../components/CopyButton';
-import { cn } from '../lib/cn';
-import { type BlockNode, type InlineNode, parseBlocks } from './parse';
+import { CopyButton } from '../components/CopyButton.js';
+import { cn } from '../lib/cn.js';
+import { type BlockNode, type InlineNode, parseBlocks } from './parse.js';
 
 export interface MarkdownProps {
   /** Raw markdown text (e.g. a model reply). Untrusted input is safe — see doc comment. */

package/src/react/markdown/MarkdownDoc.spec.tsx

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

package/src/react/markdown/MarkdownDoc.tsx

@@ -1,8 +1,8 @@
 import { marked, type Token, type Tokens } from 'marked';
 import { Fragment, type ReactNode, useMemo } from 'react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 import './markdownDoc.css';
-import { Tooltip } from '../components/Tooltip';
+import { Tooltip } from '../components/Tooltip.js';
 
 /**
  * Which renderer? Two live in cursedbelt, on purpose:

package/src/react/markdown/index.ts

@@ -1,2 +1,2 @@
-export { Markdown, type MarkdownProps } from './Markdown';
-export type { BlockNode, InlineNode } from './parse';
+export { Markdown, type MarkdownProps } from './Markdown.js';
+export type { BlockNode, InlineNode } from './parse.js';

package/src/react/markdown/parse.spec.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test';
-import { parseBlocks, parseInline } from './parse';
+import { parseBlocks, parseInline } from './parse.js';
 
 describe('parseInline', () => {
   test('plain text stays a single text node', () => {

package/src/react/master-detail/DetailPane.tsx

@@ -16,11 +16,11 @@
  * live in the station.
  */
 import type { ReactNode } from "react";
-import { CopyButton } from "../components/CopyButton";
-import { SecretInput } from "../components/SecretInput";
-import { Tabs } from "../components/Tabs";
+import { CopyButton } from "../components/CopyButton.js";
+import { SecretInput } from "../components/SecretInput.js";
+import { Tabs } from "../components/Tabs.js";
 
-import { TruncatedText } from "../components/TruncatedText";
+import { TruncatedText } from "../components/TruncatedText.js";
 export interface DetailTab {
 	value: string;
 	label: string;

package/src/react/master-detail/MasterDetail.spec.tsx

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render } from '@testing-library/react';
-import { Button } from '../components/Button';
-import { MasterDetail, type MasterDetailItem } from './MasterDetail';
+import { Button } from '../components/Button.js';
+import { MasterDetail, type MasterDetailItem } from './MasterDetail.js';
 
 afterEach(cleanup);
 

package/src/react/master-detail/MasterDetail.tsx

@@ -28,12 +28,12 @@
  */
 import type { ReactNode } from "react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { Button } from "../components/Button";
-import { ChipFilterStrip } from "../components/ChipFilterStrip";
-import { EmptyState } from "../components/EmptyState";
-import { Input } from "../components/Input";
-import { ScrollArea } from "../components/ScrollArea";
-import { SplitPane } from "../components/SplitPane";
+import { Button } from "../components/Button.js";
+import { ChipFilterStrip } from "../components/ChipFilterStrip.js";
+import { EmptyState } from "../components/EmptyState.js";
+import { Input } from "../components/Input.js";
+import { ScrollArea } from "../components/ScrollArea.js";
+import { SplitPane } from "../components/SplitPane.js";
 
 export interface MasterDetailItem {
 	id: string;

package/src/react/master-detail/index.ts

@@ -6,11 +6,11 @@
 // the owner ruling made cursed-core writable from cursed-satellites — it was only
 // parked in satellite-kit because cc was read-only, and the layout belongs to the
 // component library, not to one app's kit.
-export type { DetailPaneProps, DetailTab, Fact } from "./DetailPane";
-export { DetailPane, DetailSection, FactList, SecretFact } from "./DetailPane";
+export type { DetailPaneProps, DetailTab, Fact } from "./DetailPane.js";
+export { DetailPane, DetailSection, FactList, SecretFact } from "./DetailPane.js";
 export type {
 	MasterDetailFilter,
 	MasterDetailItem,
 	MasterDetailProps,
-} from "./MasterDetail";
-export { MasterDetail } from "./MasterDetail";
+} from "./MasterDetail.js";
+export { MasterDetail } from "./MasterDetail.js";

package/src/react/master-lock/MasterLockDialog.tsx

@@ -23,11 +23,11 @@ import {
 	MIN_IDLE_MS,
 	deriveMasterLockVerifier,
 } from "cursedbelt-core/master-lock";
-import { ActionBar } from "../components/ActionBar";
-import { Button } from "../components/Button";
-import { FieldLabel } from "../components/FieldLabel";
-import { Input } from "../components/Input";
-import { Modal } from "../components/Modal";
+import { ActionBar } from "../components/ActionBar.js";
+import { Button } from "../components/Button.js";
+import { FieldLabel } from "../components/FieldLabel.js";
+import { Input } from "../components/Input.js";
+import { Modal } from "../components/Modal.js";
 
 export interface MasterLockDialogProps {
 	open: boolean;

package/src/react/master-lock/MasterLockProvider.spec.tsx

@@ -9,7 +9,7 @@
 import { afterEach, beforeEach, describe, expect, mock, test } from "bun:test";
 import { render, waitFor } from "@testing-library/react";
 import { MASTER_LOCK_PATHS } from "cursedbelt-core/master-lock";
-import { MasterLockProvider } from "./MasterLockProvider";
+import { MasterLockProvider } from "./MasterLockProvider.js";
 
 const IDLE_MS = 2_000;
 

package/src/react/master-lock/MasterLockProvider.tsx

@@ -54,7 +54,7 @@ import {
 	type MasterLockStatus,
 	isSomebodyWatching,
 } from "cursedbelt-core/master-lock";
-import { MasterLockDialog } from "./MasterLockDialog";
+import { MasterLockDialog } from "./MasterLockDialog.js";
 
 /** How often, at most, an interaction becomes a network call. Also bounded by the timeout,
  *  so a short setting still gets pings often enough to matter. */

package/src/react/master-lock/index.ts

@@ -5,11 +5,11 @@
  * this; what is here is the manual lock, the idle watcher and the per-app rotation dialog,
  * i.e. the parts that only exist while the site is open.
  */
-export { MasterLockDialog, type MasterLockDialogProps } from "./MasterLockDialog";
+export { MasterLockDialog, type MasterLockDialogProps } from "./MasterLockDialog.js";
 export {
 	MasterLockMenuItems,
 	type MasterLockMenuItemsProps,
 	MasterLockProvider,
 	type MasterLockProviderProps,
 	useMasterLock,
-} from "./MasterLockProvider";
+} from "./MasterLockProvider.js";

package/src/react/media/AutoMaskControls.tsx

@@ -1,9 +1,9 @@
 import { Search, Sparkles } from 'lucide-react';
-import { Button } from '../components/Button';
-import { Input } from '../components/Input';
-import { SegmentedControl } from '../components/SegmentedControl';
-import { Spinner } from '../components/Spinner';
-import type { MaskTool } from './maskModel';
+import { Button } from '../components/Button.js';
+import { Input } from '../components/Input.js';
+import { SegmentedControl } from '../components/SegmentedControl.js';
+import { Spinner } from '../components/Spinner.js';
+import type { MaskTool } from './maskModel.js';
 
 /** Coarse, jargon-free "how much to grab" preset (owner UX mandate: dead-simple). The painter
  *  maps each onto a concrete growth tolerance via {@link sensitivityToTolerance}. */

package/src/react/media/BrushSizeSlider.tsx

@@ -4,8 +4,8 @@ import {
   useCallback,
   useRef,
 } from 'react';
-import { cn } from '../lib/cn';
-import { clampBrushSize } from './maskGeometry';
+import { cn } from '../lib/cn.js';
+import { clampBrushSize } from './maskGeometry.js';
 
 export interface BrushSizeSliderProps {
   value: number;

package/src/react/media/CanvasVideoPlayer.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Button } from '../components/Button';
-import { IconButton } from '../components/IconButton';
-import { useHlsSource } from './hlsSource';
-import { DEFAULT_VIDEO_ASPECT_RATIO, type PlayerVideo, ProcessingIndicator } from './VideoPlayer';
+import { Button } from '../components/Button.js';
+import { IconButton } from '../components/IconButton.js';
+import { useHlsSource } from './hlsSource.js';
+import { DEFAULT_VIDEO_ASPECT_RATIO, type PlayerVideo, ProcessingIndicator } from './VideoPlayer.js';
 
 // ── The green-frame-immune fallback player ───────────────────────────────────────
 // On some GPUs Chrome composites a hardware-decoded <video> as a solid GREEN frame when it's

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

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