cursedbelt 4.3.0 → 4.5.0

package/src/react/components/DataTable/index.ts

@@ -1,23 +1,23 @@
-export { CardView, type CardViewProps } from './CardView';
+export { CardView, type CardViewProps } from './CardView.js';
 export {
   CellRenderer,
   type CellRendererProps,
   getCellRenderer,
   registerCellRenderer,
   setAssetUrlResolver,
-} from './cells/CellRenderer';
-export { CodeCell, type CodeCellProps } from './cells/CodeCell';
-export { LinkCell, type LinkCellProps } from './cells/LinkCell';
-export { PasswordCell, type PasswordCellProps } from './cells/PasswordCell';
+} from './cells/CellRenderer.js';
+export { CodeCell, type CodeCellProps } from './cells/CodeCell.js';
+export { LinkCell, type LinkCellProps } from './cells/LinkCell.js';
+export { PasswordCell, type PasswordCellProps } from './cells/PasswordCell.js';
 // ONE column checklist with select-all/deselect-all, shared by the column menu
 // and the search-scope control so the two can never drift (unit 45 items 2 + 6).
-export { ColumnChecklist, type ColumnChecklistItem, type ColumnChecklistProps } from './ColumnChecklist';
+export { ColumnChecklist, type ColumnChecklistItem, type ColumnChecklistProps } from './ColumnChecklist.js';
 export {
   DataTable,
   type DataTableControls,
   type DataTableProps,
   nextSortStack,
-} from './DataTable';
+} from './DataTable.js';
 // 🔴 `TableFilterBuilder`, not `FilterBuilder` — see its header. The bare name belonged to
 // two different components in two repos, and a shared basename that is not a shared
 // component is how the next person merges them wrongly.
@@ -25,7 +25,7 @@ export {
   TableFilterBuilder,
   type TableFilterBuilderColumn,
   type TableFilterBuilderProps,
-} from './TableFilterBuilder';
+} from './TableFilterBuilder.js';
 export {
   activeGroups,
   compareValues,
@@ -45,9 +45,9 @@ export {
   newCondition,
   newGroup,
   VALUELESS_OPS,
-} from './filterQuery';
-export { TablePagination, type TablePaginationProps } from './Pagination';
-export { RowActions, type RowActionsProps } from './RowActions';
+} from './filterQuery.js';
+export { TablePagination, type TablePaginationProps } from './Pagination.js';
+export { RowActions, type RowActionsProps } from './RowActions.js';
 // Dragging a row OUT of a table onto something that is not part of it — the
 // protocol FilterRail's drop targets read (unit 45 item 5).
 export {
@@ -58,16 +58,16 @@ export {
   rowDragTypes,
   rowDropTargetProps,
   writeRowDrag,
-} from './rowDrag';
-export { SearchBox, type SearchBoxProps, type SearchScopeColumn } from './SearchBox';
-export { SortHeader, type SortHeaderProps } from './SortHeader';
-export { SortStack, type SortStackProps } from './SortStack';
-export { TableToolbar, type TableToolbarProps } from './Toolbar';
+} from './rowDrag.js';
+export { SearchBox, type SearchBoxProps, type SearchScopeColumn } from './SearchBox.js';
+export { SortHeader, type SortHeaderProps } from './SortHeader.js';
+export { SortStack, type SortStackProps } from './SortStack.js';
+export { TableToolbar, type TableToolbarProps } from './Toolbar.js';
 // Rows ⇄ cards for DataTable's `viewMode` — the ONE switcher, so an app never
 // grows its own (owner, 2026-08-23).
-export { TableViewToggle, type TableViewToggleProps } from './TableViewToggle';
-export { resolveColumnAlign } from './types';
-export type { ColDef, FieldOption, TableViewMode } from './types';
+export { TableViewToggle, type TableViewToggleProps } from './TableViewToggle.js';
+export { resolveColumnAlign } from './types.js';
+export type { ColDef, FieldOption, TableViewMode } from './types.js';
 // Remembers rows-vs-cards per account through the EXISTING deep-link resume —
 // not a second store (unit 45 item 4).
 export {
@@ -75,5 +75,5 @@ export {
   useTableViewMode,
   type UseTableViewModeOptions,
   type UseTableViewModeResult,
-} from './useTableViewMode';
-export { ViewOptionsMenu, type ViewOptionsMenuProps } from './ViewOptionsMenu';
+} from './useTableViewMode.js';
+export { ViewOptionsMenu, type ViewOptionsMenuProps } from './ViewOptionsMenu.js';

package/src/react/components/DataTable/tableSystem.spec.tsx

@@ -9,10 +9,10 @@
 import { describe, expect, mock, test } from 'bun:test';
 import { fireEvent, render, screen, within } from '@testing-library/react';
 import { RESUME_KEY_PATTERN } from 'cursedbelt-server/resume';
-import { DataTable, nextSortStack } from './DataTable';
-import { CB_ROW_MIME, isRowDrag, readRowDrag, rowDropTargetProps, writeRowDrag } from './rowDrag';
-import type { ColDef } from './types';
-import { tableViewResumeKey } from './useTableViewMode';
+import { DataTable, nextSortStack } from './DataTable.js';
+import { CB_ROW_MIME, isRowDrag, readRowDrag, rowDropTargetProps, writeRowDrag } from './rowDrag.js';
+import type { ColDef } from './types.js';
+import { tableViewResumeKey } from './useTableViewMode.js';
 
 interface Track extends Record<string, unknown> {
   id: string;

package/src/react/components/DataTable/types.ts

@@ -1,8 +1,8 @@
-import type { FieldOption } from '../FieldInput';
+import type { FieldOption } from '../FieldInput.js';
 
 // Re-exported so the DataTable subtree (cells, card view) is self-contained — a column's
 // `options` are the same `FieldOption` shape the task-08 field controls consume.
-export type { FieldOption } from '../FieldInput';
+export type { FieldOption } from '../FieldInput.js';
 
 /**
  * One column of a {@link DataTable} — the app-facing, library-agnostic column shape.

package/src/react/components/DataTable/useTableViewMode.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { createResumeClient, type ResumeClient } from '../../deep-link/resume';
-import type { TableViewMode } from './types';
+import { createResumeClient, type ResumeClient } from '../../deep-link/resume.js';
+import type { TableViewMode } from './types.js';
 
 export interface UseTableViewModeOptions {
   /**

package/src/react/components/DataTable/virtualize.spec.tsx

@@ -12,8 +12,8 @@
  */
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render, screen } from '@testing-library/react';
-import { DataTable } from './DataTable';
-import type { ColDef } from './types';
+import { DataTable } from './DataTable.js';
+import type { ColDef } from './types.js';
 
 afterEach(cleanup);
 

package/src/react/components/DatePicker.spec.tsx

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

package/src/react/components/DatePicker.tsx

@@ -1,8 +1,8 @@
 import { DayPicker, type Matcher } from '@daypicker/react';
 import { Calendar } from 'lucide-react';
 import { useState } from 'react';
-import { useMediaQuery } from '../hooks/useMediaQuery';
-import { cn } from '../lib/cn';
+import { useMediaQuery } from '../hooks/useMediaQuery.js';
+import { cn } from '../lib/cn.js';
 import {
   DAY_PICKER_CLASS_NAMES,
   DayPickerChevron,
@@ -10,10 +10,10 @@ import {
   isoToLocalDate,
   localDateToIso,
   ThemedDayButton,
-} from '../lib/daypicker';
-import { type ControlSize, fieldControlClass } from '../lib/field';
-import { Drawer } from './Drawer';
-import { Popover } from './Popover';
+} from '../lib/daypicker.js';
+import { type ControlSize, fieldControlClass } from '../lib/field.js';
+import { Drawer } from './Drawer.js';
+import { Popover } from './Popover.js';
 
 export interface DatePickerProps {
   /** ISO date string 'YYYY-MM-DD'. Empty string or undefined = no selection. */

package/src/react/components/DateRangePicker.tsx

@@ -1,8 +1,8 @@
 import { type DateRange, DayPicker } from '@daypicker/react';
 import { CalendarRange } from 'lucide-react';
 import { useState } from 'react';
-import { useMediaQuery } from '../hooks/useMediaQuery';
-import { cn } from '../lib/cn';
+import { useMediaQuery } from '../hooks/useMediaQuery.js';
+import { cn } from '../lib/cn.js';
 import {
   DAY_PICKER_CLASS_NAMES,
   DayPickerChevron,
@@ -10,10 +10,10 @@ import {
   isoToLocalDate,
   localDateToIso,
   ThemedDayButton,
-} from '../lib/daypicker';
-import { type ControlSize, fieldControlClass } from '../lib/field';
-import { Drawer } from './Drawer';
-import { Popover } from './Popover';
+} from '../lib/daypicker.js';
+import { type ControlSize, fieldControlClass } from '../lib/field.js';
+import { Drawer } from './Drawer.js';
+import { Popover } from './Popover.js';
 
 /** A date range with optional start and end as ISO 'YYYY-MM-DD' strings. */
 export interface DateRangeValue {

package/src/react/components/DateTimeField.tsx

@@ -1,6 +1,6 @@
-import { cn } from '../lib/cn';
-import { type ControlSize, fieldControlClass } from '../lib/field';
-import { DatePicker } from './DatePicker';
+import { cn } from '../lib/cn.js';
+import { type ControlSize, fieldControlClass } from '../lib/field.js';
+import { DatePicker } from './DatePicker.js';
 
 export interface DateTimeFieldProps {
   /** ISO datetime-local string 'YYYY-MM-DDTHH:mm'. Empty or undefined = no selection. */

package/src/react/components/DeleteButton.spec.tsx

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

package/src/react/components/DeleteButton.tsx

@@ -1,7 +1,7 @@
 import { Trash2 } from 'lucide-react';
 import type { MouseEvent, ReactNode } from 'react';
-import { confirm, type ConfirmOptions } from '../confirm';
-import { Button, type ButtonProps } from './Button';
+import { confirm, type ConfirmOptions } from '../confirm.js';
+import { Button, type ButtonProps } from './Button.js';
 
 export interface DeleteButtonProps
   extends Omit<ButtonProps, 'onClick' | 'onAsyncClick' | 'variant' | 'children'> {

package/src/react/components/DiscardConfirmDialog.spec.tsx

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

package/src/react/components/DiscardConfirmDialog.tsx

@@ -1,7 +1,7 @@
 import { type KeyboardEvent, useEffect, useRef } from 'react';
-import { Button } from './Button';
-import { Stack } from './layout';
-import { Surface } from './Surface';
+import { Button } from './Button.js';
+import { Stack } from './layout.js';
+import { Surface } from './Surface.js';
 
 export interface DiscardConfirmDialogProps {
   /** Throw away the edits and close the host modal. */

package/src/react/components/DisclosureButton.tsx

@@ -4,7 +4,7 @@
 
 import { ChevronDown } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 export interface DisclosureArrowProps {
   open: boolean;

package/src/react/components/DismissButton.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { IconButton, type IconButtonProps } from './IconButton';
+import { cn } from '../lib/cn.js';
+import { IconButton, type IconButtonProps } from './IconButton.js';
 
 export interface DismissButtonProps extends Omit<IconButtonProps, 'label' | 'tooltip'> {
   /** Accessible name for the icon-only control, e.g. "Hide Budgets". */

package/src/react/components/DragHandle.tsx

@@ -1,9 +1,9 @@
 import type { Ref } from 'react';
-import { DragHandleIcon } from '../hooks/DragHandleIcon';
-import { cn } from '../lib/cn';
-import { REVEAL_ON_HOVER } from './revealOnHover';
-import { Tooltip } from './Tooltip';
-import { TAP_TARGET } from '../lib/tapTarget';
+import { DragHandleIcon } from '../hooks/DragHandleIcon.js';
+import { cn } from '../lib/cn.js';
+import { REVEAL_ON_HOVER } from './revealOnHover.js';
+import { Tooltip } from './Tooltip.js';
+import { TAP_TARGET } from '../lib/tapTarget.js';
 
 export interface DragHandleProps {
   /** Spread from a drag hook's `handleProps` — the pointer/keyboard drag wiring. */

package/src/react/components/Drawer.tsx

@@ -1,12 +1,12 @@
 import { X } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { useDiscardGuard } from '../hooks/useDiscardGuard';
-import { type SwipeDismissDirection, useSwipeToDismiss } from '../hooks/useSwipeToDismiss';
-import { cn } from '../lib/cn';
-import { FooterSlot } from './ActionBar';
-import { Dialog, DialogContent, DialogTitle } from './dialog';
-import { IconButton } from './IconButton';
-import { ScrollArea } from './ScrollArea';
+import { useDiscardGuard } from '../hooks/useDiscardGuard.js';
+import { type SwipeDismissDirection, useSwipeToDismiss } from '../hooks/useSwipeToDismiss.js';
+import { cn } from '../lib/cn.js';
+import { FooterSlot } from './ActionBar.js';
+import { Dialog, DialogContent, DialogTitle } from './dialog.js';
+import { IconButton } from './IconButton.js';
+import { ScrollArea } from './ScrollArea.js';
 
 export type DrawerSide = 'left' | 'right' | 'bottom';
 export type DrawerSize = 'sm' | 'md' | 'lg';

package/src/react/components/DropIndicator.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 export interface DropIndicatorProps {
   /** `'horizontal'` = a line across the top/bottom edge (vertical lists). */

package/src/react/components/DropSlot.spec.tsx

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render } from '@testing-library/react';
-import { PaletteDragContext, usePaletteItem } from '../hooks/usePaletteDrag';
-import { DropSlot } from './DropSlot';
+import { PaletteDragContext, usePaletteItem } from '../hooks/usePaletteDrag.js';
+import { DropSlot } from './DropSlot.js';
 
 afterEach(cleanup);
 

package/src/react/components/DropSlot.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, ReactNode } from 'react';
-import { useDropSlot } from '../hooks/usePaletteDrag';
-import { cn } from '../lib/cn';
+import { useDropSlot } from '../hooks/usePaletteDrag.js';
+import { cn } from '../lib/cn.js';
 
 export interface DropSlotProps {
   /** Unique id for this drop slot — matches what `onDrop` receives as `slotId`. */

package/src/react/components/DropdownMenu.tsx

@@ -1,13 +1,13 @@
 import * as RDrop from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 import {
   FLOATING_ANIMATION,
   FLOATING_COLLISION_PADDING,
   FLOATING_CONTENT_BASE,
   FLOATING_ITEM_BASE,
-} from '../lib/floatingStyles';
+} from '../lib/floatingStyles.js';
 
 export interface DropdownMenuAction {
   key: string;

package/src/react/components/ElsewhereNotice.spec.tsx

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

package/src/react/components/ElsewhereNotice.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import { Alert, type AlertTone } from './Alert';
-import { ButtonLink } from './ButtonLink';
+import { Alert, type AlertTone } from './Alert.js';
+import { ButtonLink } from './ButtonLink.js';
 
 /**
  * ElsewhereNotice — "this cannot happen on this host, and HERE is where it can."

package/src/react/components/EmojiField.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { EmojiPicker } from '../emoji/EmojiPicker';
-import { cn } from '../lib/cn';
-import { TAP_TARGET } from '../lib/tapTarget';
+import { EmojiPicker } from '../emoji/EmojiPicker.js';
+import { cn } from '../lib/cn.js';
+import { TAP_TARGET } from '../lib/tapTarget.js';
 
 export interface EmojiFieldProps {
   /** The current emoji (a single grapheme), or '' for none. */

package/src/react/components/EmptyState.spec.tsx

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

package/src/react/components/EmptyState.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 export interface EmptyStateProps {
   /** Large illustrative icon (rendered at size-12 in a soft `muted` circle, or a

package/src/react/components/EnvCompare.tsx

@@ -1,8 +1,8 @@
 import { diffEnvSets, type EnvSource } from 'cwip/env';
 import { type CSSProperties, useMemo, useState } from 'react';
-import { resolveClass, resolveStyle, type StyleableProps } from '../styling';
-import { Button } from './Button';
-import { SecretInput } from './SecretInput';
+import { resolveClass, resolveStyle, type StyleableProps } from '../styling.js';
+import { Button } from './Button.js';
+import { SecretInput } from './SecretInput.js';
 
 export type EnvCompareSlot = 'root' | 'toolbar' | 'table' | 'th' | 'td';
 

package/src/react/components/EnvEditor.tsx

@@ -1,10 +1,10 @@
 import { type EnvEntry, parseEnvFile, serializeEnv, sortEnvEntries } from 'cwip/env';
 import { type CSSProperties, useMemo, useState } from 'react';
-import { resolveClass, resolveStyle, type StyleableProps } from '../styling';
-import { Button } from './Button';
-import { IconButton } from './IconButton';
-import { Input } from './Input';
-import { SecretInput } from './SecretInput';
+import { resolveClass, resolveStyle, type StyleableProps } from '../styling.js';
+import { Button } from './Button.js';
+import { IconButton } from './IconButton.js';
+import { Input } from './Input.js';
+import { SecretInput } from './SecretInput.js';
 
 const Trash = () => (
   <svg

package/src/react/components/ErrorBoundary.spec.tsx

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

package/src/react/components/ErrorBoundary.tsx

@@ -1,7 +1,7 @@
 import { Component, type ErrorInfo, type ReactNode, useEffect, useState } from 'react';
-import { Alert } from './Alert';
-import { Spinner } from './Spinner';
-import { ConnectionHealer, isUnreachableError, type ServerHealOptions } from './ConnectionHealer';
+import { Alert } from './Alert.js';
+import { Spinner } from './Spinner.js';
+import { ConnectionHealer, isUnreachableError, type ServerHealOptions } from './ConnectionHealer.js';
 
 /* ───────────────────────────────────────────────────────────────────────────
  * The stale-deploy healer lives in THIS file rather than its own, deliberately.

package/src/react/components/ErrorCard.tsx

@@ -1,9 +1,9 @@
 import { AlertTriangle } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { CodeChip } from './CodeChip';
-import { CopyButton } from './CopyButton';
-import { Surface } from './Surface';
+import { cn } from '../lib/cn.js';
+import { CodeChip } from './CodeChip.js';
+import { CopyButton } from './CopyButton.js';
+import { Surface } from './Surface.js';
 
 export interface ErrorCardFooterItem {
   /** What the chip is — `file`, `repo`, `commit`, `when`, `app`. */

package/src/react/components/EventTimeline.spec.tsx

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

package/src/react/components/EventTimeline.tsx

@@ -1,6 +1,6 @@
 import { AlertTriangle, Check, Sparkles, X } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 export type EventTimelineTone = 'default' | 'success' | 'error' | 'warning' | 'accent';
 

package/src/react/components/ExternalLink.spec.tsx

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

package/src/react/components/ExternalLink.tsx

@@ -1,7 +1,7 @@
 import { ExternalLink as ExternalLinkGlyph } from 'lucide-react';
 import type { JSX, MouseEvent, ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { Tooltip } from './Tooltip';
+import { cn } from '../lib/cn.js';
+import { Tooltip } from './Tooltip.js';
 
 /**
  * http/https only.

package/src/react/components/Field.spec.tsx

@@ -2,7 +2,7 @@ import { afterEach, describe, expect, test } from 'bun:test';
 import { act, cleanup, render } from '@testing-library/react';
 import type { ReactNode } from 'react';
 import { FormProvider, type UseFormReturn, useForm } from 'react-hook-form';
-import { Field } from './Field';
+import { Field } from './Field.js';
 
 afterEach(cleanup);
 

package/src/react/components/Field.tsx

@@ -1,8 +1,8 @@
 import { AlertCircle } from 'lucide-react';
 import { cloneElement, isValidElement, type ReactElement, type ReactNode } from 'react';
 import { get, useFormContext } from 'react-hook-form';
-import { cn } from '../lib/cn';
-import { InfoHint } from './InfoHint';
+import { cn } from '../lib/cn.js';
+import { InfoHint } from './InfoHint.js';
 
 /** The id + aria a control needs to be wired to its label, description, and error.
  *  Injected into a single child via `cloneElement`, or handed to a render-prop child

package/src/react/components/FieldInput.spec.tsx

@@ -7,7 +7,7 @@ import {
   getFieldType,
   listFieldTypes,
   registerFieldType,
-} from './FieldInput';
+} from './FieldInput.js';
 
 afterEach(cleanup);
 

package/src/react/components/FieldInput.tsx

@@ -17,21 +17,21 @@ import {
   Type,
 } from 'lucide-react';
 import type { ChangeEvent, FC, ReactNode } from 'react';
-import { AutoGrowTextarea } from './AutoGrowTextarea';
-import { CodeFieldInput } from './CodeFieldInput';
-import { ColorField } from './ColorField';
-import { ComboboxField } from './ComboboxField';
-import { DatePicker } from './DatePicker';
-import { DateTimeField } from './DateTimeField';
-import { EmojiField } from './EmojiField';
-import { Input } from './Input';
-import { MultiSelectField } from './MultiSelectField';
-import { RatingField } from './RatingField';
-import { SecretInput } from './SecretInput';
-import { SelectField } from './SelectField';
-import { Slider } from './Slider';
-import { Switch } from './Switch';
-import { TagsInput } from './TagsInput';
+import { AutoGrowTextarea } from './AutoGrowTextarea.js';
+import { CodeFieldInput } from './CodeFieldInput.js';
+import { ColorField } from './ColorField.js';
+import { ComboboxField } from './ComboboxField.js';
+import { DatePicker } from './DatePicker.js';
+import { DateTimeField } from './DateTimeField.js';
+import { EmojiField } from './EmojiField.js';
+import { Input } from './Input.js';
+import { MultiSelectField } from './MultiSelectField.js';
+import { RatingField } from './RatingField.js';
+import { SecretInput } from './SecretInput.js';
+import { SelectField } from './SelectField.js';
+import { Slider } from './Slider.js';
+import { Switch } from './Switch.js';
+import { TagsInput } from './TagsInput.js';
 
 /** A choice for select / multiselect / tags-like types. */
 export interface FieldOption {

package/src/react/components/FieldLabel.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
-import { resolveClass, resolveStyle, type StyleableProps } from '../styling';
-import { InfoHint } from './InfoHint';
+import { resolveClass, resolveStyle, type StyleableProps } from '../styling.js';
+import { InfoHint } from './InfoHint.js';
 
 export type FieldLabelSlot = 'root';
 

package/src/react/components/FileActions.tsx

@@ -1,8 +1,8 @@
 import { Copy, Download } from 'lucide-react';
 import { downloadBlob } from 'cursedbelt-core/download';
-import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
-import { cn } from '../lib/cn';
-import { IconButton } from './IconButton';
+import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js';
+import { cn } from '../lib/cn.js';
+import { IconButton } from './IconButton.js';
 
 export interface FileActionsProps {
   /** Source URL — `http(s)://`, `blob:`, or a `data:` URI (e.g. a base64 artifact). */

package/src/react/components/FileDropZone.spec.tsx

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