cursedbelt 4.4.0 → 4.5.0

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

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

package/src/react/components/ChipFilterStrip.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { ScrollArea } from './ScrollArea';
+import { cn } from '../lib/cn.js';
+import { ScrollArea } from './ScrollArea.js';
 
 export interface ChipOption {
   value: string;

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

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

package/src/react/components/ChoiceMenu.tsx

@@ -1,8 +1,8 @@
 import { ChevronDown, Plus } from 'lucide-react';
 import type { ReactNode } from 'react';
-import type { ControlSize } from '../lib/field';
-import { Button } from './Button';
-import { DropdownMenu, type DropdownMenuItem } from './DropdownMenu';
+import type { ControlSize } from '../lib/field.js';
+import { Button } from './Button.js';
+import { DropdownMenu, type DropdownMenuItem } from './DropdownMenu.js';
 
 export interface ChoiceMenuOption {
   /** The value handed back to {@link ChoiceMenuProps.onChoose}. */

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

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

package/src/react/components/CodeArea.tsx

@@ -1,9 +1,9 @@
 import { type KeyboardEvent, useId } from 'react';
-import { cn } from '../lib/cn';
-import { handleCodeTabIndent } from '../lib/tabIndent';
-import { CopyButton } from './CopyButton';
-import { ScrollArea } from './ScrollArea';
-import { TAP_TARGET_ALWAYS } from '../lib/tapTarget';
+import { cn } from '../lib/cn.js';
+import { handleCodeTabIndent } from '../lib/tabIndent.js';
+import { CopyButton } from './CopyButton.js';
+import { ScrollArea } from './ScrollArea.js';
+import { TAP_TARGET_ALWAYS } from '../lib/tapTarget.js';
 
 export interface CodeAreaProps {
   /** The code text (controlled). */

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

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

package/src/react/components/CodeChip.tsx

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
-import { cn } from '../lib/cn';
-import { CopyButton } from './CopyButton';
+import { cn } from '../lib/cn.js';
+import { CopyButton } from './CopyButton.js';
 
 export interface CodeChipProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
   /** The literal value — a path, an env key, a flag, a command. */

package/src/react/components/CodeFieldInput.tsx

@@ -1,7 +1,7 @@
 import { type KeyboardEvent, useId } from 'react';
-import { cn } from '../lib/cn';
-import { FIELD_CLASS } from '../lib/field';
-import { handleCodeTabIndent } from '../lib/tabIndent';
+import { cn } from '../lib/cn.js';
+import { FIELD_CLASS } from '../lib/field.js';
+import { handleCodeTabIndent } from '../lib/tabIndent.js';
 
 export interface CodeFieldInputProps {
   /** The code text (controlled). */

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

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

package/src/react/components/Collapsible.tsx

@@ -1,8 +1,8 @@
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 import { ChevronDown } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { TAP_TARGET_HEIGHT } from '../lib/tapTarget';
+import { cn } from '../lib/cn.js';
+import { TAP_TARGET_HEIGHT } from '../lib/tapTarget.js';
 
 export interface CollapsibleProps {
   /** The always-visible clickable header content (shown left of the chevron). */

package/src/react/components/ColorField.tsx

@@ -1,5 +1,5 @@
-import { cn } from '../lib/cn';
-import { CONTROL_HEIGHT_CLASS, type ControlSize } from '../lib/field';
+import { cn } from '../lib/cn.js';
+import { CONTROL_HEIGHT_CLASS, type ControlSize } from '../lib/field.js';
 
 export interface ColorFieldProps {
   /** The current color as a hex string (e.g. `#3b82f6`). */

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

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, mock, test } from 'bun:test';
 import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import { useState } from 'react';
-import { ComboboxField, type ComboboxOption } from './ComboboxField';
+import { ComboboxField, type ComboboxOption } from './ComboboxField.js';
 
 afterEach(cleanup);
 

package/src/react/components/ComboboxField.tsx

@@ -3,11 +3,11 @@
 import { Combobox } from '@base-ui/react/combobox';
 import { Check, ChevronDown, Loader2, Plus, X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { cn } from '../lib/cn';
-import { CONTROL_HEIGHT_CLASS, CONTROL_MIN_HEIGHT_CLASS, type ControlSize } from '../lib/field';
+import { cn } from '../lib/cn.js';
+import { CONTROL_HEIGHT_CLASS, CONTROL_MIN_HEIGHT_CLASS, type ControlSize } from '../lib/field.js';
 import { FLOATING_COLLISION_PADDING,
-  FLOATING_CONTENT_BASE, FLOATING_ITEM_BASE } from '../lib/floatingStyles';
-import { TAP_TARGET } from '../lib/tapTarget';
+  FLOATING_CONTENT_BASE, FLOATING_ITEM_BASE } from '../lib/floatingStyles.js';
+import { TAP_TARGET } from '../lib/tapTarget.js';
 
 /** A single option in the combobox list. */
 export interface ComboboxOption {

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

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

package/src/react/components/CommentThread.tsx

@@ -1,12 +1,12 @@
 import { Edit2, Send, Trash2 } from 'lucide-react';
 import { useState } from 'react';
-import { cn } from '../lib/cn';
-import { FIELD_CLASS } from '../lib/field';
-import { AutoGrowTextarea } from './AutoGrowTextarea';
-import { Avatar } from './Avatar';
-import { Button } from './Button';
-import { IconButton } from './IconButton';
-import { ReactionBar, type ReactionGroup } from './ReactionBar';
+import { cn } from '../lib/cn.js';
+import { FIELD_CLASS } from '../lib/field.js';
+import { AutoGrowTextarea } from './AutoGrowTextarea.js';
+import { Avatar } from './Avatar.js';
+import { Button } from './Button.js';
+import { IconButton } from './IconButton.js';
+import { ReactionBar, type ReactionGroup } from './ReactionBar.js';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 

package/src/react/components/ConfirmDialog.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode, useRef } from 'react';
-import { cn } from '../lib/cn';
-import { Button } from './Button';
-import { Dialog, DialogContent, DialogDescription, DialogTitle } from './dialog';
+import { cn } from '../lib/cn.js';
+import { Button } from './Button.js';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from './dialog.js';
 
 export interface ConfirmDialogProps {
   open: boolean;

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

@@ -1,8 +1,8 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render, waitFor } from '@testing-library/react';
-import { ConnectionHealer, isUnreachableError, useServerHeal } from './ConnectionHealer';
-import { ErrorBoundary } from './ErrorBoundary';
-import { QueryBoundary } from './QueryBoundary';
+import { ConnectionHealer, isUnreachableError, useServerHeal } from './ConnectionHealer.js';
+import { ErrorBoundary } from './ErrorBoundary.js';
+import { QueryBoundary } from './QueryBoundary.js';
 import { fakeFetch } from 'cursedbelt-core/testing';
 
 afterEach(() => {

package/src/react/components/ConnectionHealer.tsx

@@ -1,6 +1,6 @@
 import { type ReactNode, useEffect, useRef, useState } from 'react';
-import { Alert } from './Alert';
-import { Spinner } from './Spinner';
+import { Alert } from './Alert.js';
+import { Spinner } from './Spinner.js';
 
 /**
  * Auto-heal for "the server went away" failures — the `Failed to fetch` class of

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

@@ -1,15 +1,15 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render } from '@testing-library/react';
-import { Button } from './Button';
-import { ColorField } from './ColorField';
-import { ComboboxField } from './ComboboxField';
-import { DatePicker } from './DatePicker';
-import { IconButton } from './IconButton';
-import { Input } from './Input';
-import { SecretInput } from './SecretInput';
-import { SegmentedControl } from './SegmentedControl';
-import { SelectField } from './SelectField';
-import { TagsInput } from './TagsInput';
+import { Button } from './Button.js';
+import { ColorField } from './ColorField.js';
+import { ComboboxField } from './ComboboxField.js';
+import { DatePicker } from './DatePicker.js';
+import { IconButton } from './IconButton.js';
+import { Input } from './Input.js';
+import { SecretInput } from './SecretInput.js';
+import { SegmentedControl } from './SegmentedControl.js';
+import { SelectField } from './SelectField.js';
+import { TagsInput } from './TagsInput.js';
 
 afterEach(cleanup);
 

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

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, mock, spyOn, test } from 'bun:test';
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import { toast } from 'sonner';
-import { CopyButton } from './CopyButton';
+import { CopyButton } from './CopyButton.js';
 
 afterEach(cleanup);
 

package/src/react/components/CopyButton.tsx

@@ -1,11 +1,11 @@
 import { Check, Copy } from 'lucide-react';
 import type { MouseEvent, ReactNode } from 'react';
 import { toast } from 'sonner';
-import { useCopyToClipboard } from '../hooks/useCopyToClipboard';
-import { cn } from '../lib/cn';
-import { Button } from './Button';
-import type { TooltipPlacement } from './Tooltip';
-import { TAP_TARGET } from '../lib/tapTarget';
+import { useCopyToClipboard } from '../hooks/useCopyToClipboard.js';
+import { cn } from '../lib/cn.js';
+import { Button } from './Button.js';
+import type { TooltipPlacement } from './Tooltip.js';
+import { TAP_TARGET } from '../lib/tapTarget.js';
 
 export interface CopyButtonProps {
   /** Text written to the clipboard (or a resolver called on click). */

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

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

package/src/react/components/CopyableText.tsx

@@ -1,7 +1,7 @@
 import { truncateMiddle } from 'cwip/string';
-import { cn } from '../lib/cn';
-import { CopyButton } from './CopyButton';
-import { TruncatedText } from './TruncatedText';
+import { cn } from '../lib/cn.js';
+import { CopyButton } from './CopyButton.js';
+import { TruncatedText } from './TruncatedText.js';
 
 export interface CopyableTextProps {
   /** The full value — always what gets copied, even when the display is truncated. */

package/src/react/components/DataTable/CardView.tsx

@@ -1,10 +1,10 @@
 import type { DragEvent } from 'react';
-import { cn } from '../../lib/cn';
-import { Grid } from '../Grid';
-import { Stack } from '../layout';
-import { Surface } from '../Surface';
-import { CellRenderer } from './cells/CellRenderer';
-import type { ColDef } from './types';
+import { cn } from '../../lib/cn.js';
+import { Grid } from '../Grid.js';
+import { Stack } from '../layout.js';
+import { Surface } from '../Surface.js';
+import { CellRenderer } from './cells/CellRenderer.js';
+import type { ColDef } from './types.js';
 
 export interface CardViewProps<TRow extends Record<string, unknown>> {
   columns: ColDef<TRow>[];

package/src/react/components/DataTable/ColumnChecklist.tsx

@@ -1,6 +1,6 @@
 import { Check } from 'lucide-react';
-import { cn } from '../../lib/cn';
-import { TAP_TARGET_HEIGHT } from '../../lib/tapTarget';
+import { cn } from '../../lib/cn.js';
+import { TAP_TARGET_HEIGHT } from '../../lib/tapTarget.js';
 
 export interface ColumnChecklistItem {
   key: string;

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

@@ -1,14 +1,14 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import type { Table } from '@tanstack/react-table';
 import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
-import { CardView } from './CardView';
-import { setAssetUrlResolver } from './cells/CellRenderer';
-import { resolveColumnAlign } from './types';
-import { AUTO_TRACK_FLOOR_PX, DataTable, declaredTrackFloor } from './DataTable';
-import type { ColDef } from './types';
-import { TableViewToggle } from './TableViewToggle';
-import { ViewOptionsMenu } from './ViewOptionsMenu';
-import { hoverHint } from '../../../testing/tooltip';
+import { CardView } from './CardView.js';
+import { setAssetUrlResolver } from './cells/CellRenderer.js';
+import { resolveColumnAlign } from './types.js';
+import { AUTO_TRACK_FLOOR_PX, DataTable, declaredTrackFloor } from './DataTable.js';
+import type { ColDef } from './types.js';
+import { TableViewToggle } from './TableViewToggle.js';
+import { ViewOptionsMenu } from './ViewOptionsMenu.js';
+import { hoverHint } from '../../../testing/tooltip.js';
 
 afterEach(cleanup);
 

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

@@ -17,28 +17,28 @@ import {
 import type { CSSProperties, DragEvent, Dispatch, ReactNode, SetStateAction } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useScrollEdgeFade } from '../../hooks/useScrollEdgeFade';
-import { cn } from '../../lib/cn';
-import { CardTapTarget } from '../CardTapTarget';
-import type { DropdownMenuItem } from '../DropdownMenu';
-import { EmptyState } from '../EmptyState';
-import { Skeleton } from '../Skeleton';
-import { Surface } from '../Surface';
-import { CardView } from './CardView';
-import { CellRenderer } from './cells/CellRenderer';
+import { useScrollEdgeFade } from '../../hooks/useScrollEdgeFade.js';
+import { cn } from '../../lib/cn.js';
+import { CardTapTarget } from '../CardTapTarget.js';
+import type { DropdownMenuItem } from '../DropdownMenu.js';
+import { EmptyState } from '../EmptyState.js';
+import { Skeleton } from '../Skeleton.js';
+import { Surface } from '../Surface.js';
+import { CardView } from './CardView.js';
+import { CellRenderer } from './cells/CellRenderer.js';
 import {
   EMPTY_FILTER_QUERY,
   evaluateFilterQuery,
   filterableText,
   type FilterQuery,
-} from './filterQuery';
-import { TablePagination } from './Pagination';
-import { RowActions } from './RowActions';
-import { type RowDragPayload, writeRowDrag } from './rowDrag';
-import { SortHeader } from './SortHeader';
-import { TableToolbar } from './Toolbar';
-import type { ColDef, TableViewMode } from './types';
-import { resolveColumnAlign } from './types';
+} from './filterQuery.js';
+import { TablePagination } from './Pagination.js';
+import { RowActions } from './RowActions.js';
+import { type RowDragPayload, writeRowDrag } from './rowDrag.js';
+import { SortHeader } from './SortHeader.js';
+import { TableToolbar } from './Toolbar.js';
+import type { ColDef, TableViewMode } from './types.js';
+import { resolveColumnAlign } from './types.js';
 
 // TanStack's header is a render fn (we build a sortable button), so its column has no
 // string header for the ViewOptionsMenu to label a toggle with. Carry the label on
@@ -58,7 +58,7 @@ declare module '@tanstack/react-table' {
   }
 }
 
-export type { ColDef } from './types';
+export type { ColDef } from './types.js';
 
 /**
  * The search box's state: the text AND the columns it covers.

package/src/react/components/DataTable/Pagination.tsx

@@ -1,9 +1,9 @@
 import type { Table } from '@tanstack/react-table';
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
-import { IconButton } from '../IconButton';
-import { Cluster } from '../layout';
-import { SelectField } from '../SelectField';
-import { TAP_TARGET_HEIGHT } from '../../lib/tapTarget';
+import { IconButton } from '../IconButton.js';
+import { Cluster } from '../layout.js';
+import { SelectField } from '../SelectField.js';
+import { TAP_TARGET_HEIGHT } from '../../lib/tapTarget.js';
 
 export interface TablePaginationProps<TRow> {
   table: Table<TRow>;

package/src/react/components/DataTable/RowActions.tsx

@@ -1,6 +1,6 @@
 import { EllipsisVertical, Pencil, Trash2 } from 'lucide-react';
-import { DropdownMenu, type DropdownMenuItem } from '../DropdownMenu';
-import { IconButton } from '../IconButton';
+import { DropdownMenu, type DropdownMenuItem } from '../DropdownMenu.js';
+import { IconButton } from '../IconButton.js';
 
 export interface RowActionsProps<TRow> {
   row: TRow;

package/src/react/components/DataTable/SearchBox.tsx

@@ -1,9 +1,9 @@
 import { ChevronDown, Search } from 'lucide-react';
 import { useState } from 'react';
-import { cn } from '../../lib/cn';
-import { Input } from '../Input';
-import { Popover } from '../Popover';
-import { ColumnChecklist } from './ColumnChecklist';
+import { cn } from '../../lib/cn.js';
+import { Input } from '../Input.js';
+import { Popover } from '../Popover.js';
+import { ColumnChecklist } from './ColumnChecklist.js';
 
 export interface SearchScopeColumn {
   key: string;

package/src/react/components/DataTable/SortHeader.tsx

@@ -1,8 +1,8 @@
 import type { Column } from '@tanstack/react-table';
 import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { Tooltip } from '../Tooltip';
-import { TAP_TARGET_HEIGHT } from '../../lib/tapTarget';
+import { Tooltip } from '../Tooltip.js';
+import { TAP_TARGET_HEIGHT } from '../../lib/tapTarget.js';
 
 /**
  * The full label, one hover away — and it is OURS, not the browser's.

package/src/react/components/DataTable/SortStack.tsx

@@ -1,6 +1,6 @@
 import type { SortingState } from '@tanstack/react-table';
 import { ArrowDown, ArrowUp, X } from 'lucide-react';
-import { cn } from '../../lib/cn';
+import { cn } from '../../lib/cn.js';
 
 export interface SortStackProps {
   sorting: SortingState;

package/src/react/components/DataTable/TableFilterBuilder.tsx

@@ -1,10 +1,10 @@
 import { Filter, Plus, X } from 'lucide-react';
 import { useState } from 'react';
-import { cn } from '../../lib/cn';
-import { Button } from '../Button';
-import { Input } from '../Input';
-import { NativeSelect } from '../NativeSelect';
-import { Popover } from '../Popover';
+import { cn } from '../../lib/cn.js';
+import { Button } from '../Button.js';
+import { Input } from '../Input.js';
+import { NativeSelect } from '../NativeSelect.js';
+import { Popover } from '../Popover.js';
 import {
   countActiveConditions,
   describeFilterQuery,
@@ -16,7 +16,7 @@ import {
   newCondition,
   newGroup,
   VALUELESS_OPS,
-} from './filterQuery';
+} from './filterQuery.js';
 
 export interface TableFilterBuilderColumn {
   key: string;

package/src/react/components/DataTable/TableViewToggle.tsx

@@ -1,6 +1,6 @@
 import { LayoutGrid, Rows3 } from 'lucide-react';
-import { SegmentedControl } from '../SegmentedControl';
-import type { TableViewMode } from './types';
+import { SegmentedControl } from '../SegmentedControl.js';
+import type { TableViewMode } from './types.js';
 
 export interface TableViewToggleProps {
   value: TableViewMode;

package/src/react/components/DataTable/Toolbar.tsx

@@ -1,13 +1,13 @@
 import type { Table } from '@tanstack/react-table';
 import { Download, Plus, Upload } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { Button } from '../Button';
-import { Cluster, Split } from '../layout';
-import { SearchBox } from './SearchBox';
-import { SortStack } from './SortStack';
-import { TableFilterBuilder } from './TableFilterBuilder';
-import { TableViewToggle } from './TableViewToggle';
-import { ViewOptionsMenu } from './ViewOptionsMenu';
+import { Button } from '../Button.js';
+import { Cluster, Split } from '../layout.js';
+import { SearchBox } from './SearchBox.js';
+import { SortStack } from './SortStack.js';
+import { TableFilterBuilder } from './TableFilterBuilder.js';
+import { TableViewToggle } from './TableViewToggle.js';
+import { ViewOptionsMenu } from './ViewOptionsMenu.js';
 
 export interface TableToolbarProps<TRow> {
   table: Table<TRow>;

package/src/react/components/DataTable/ViewOptionsMenu.tsx

@@ -1,9 +1,9 @@
 import type { Table } from '@tanstack/react-table';
 import { Columns3 } from 'lucide-react';
 import { useState } from 'react';
-import { Button } from '../Button';
-import { Popover } from '../Popover';
-import { ColumnChecklist } from './ColumnChecklist';
+import { Button } from '../Button.js';
+import { Popover } from '../Popover.js';
+import { ColumnChecklist } from './ColumnChecklist.js';
 
 export interface ViewOptionsMenuProps<TRow> {
   table: Table<TRow>;

package/src/react/components/DataTable/cells/CellRenderer.spec.tsx

@@ -1,15 +1,15 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import type { FC } from 'react';
-import type { ColDef } from '../types';
+import type { ColDef } from '../types.js';
 import {
   CellRenderer,
   type CellRendererProps,
   getCellRenderer,
   registerCellRenderer,
   setAssetUrlResolver,
-} from './CellRenderer';
-import { PasswordCell } from './PasswordCell';
+} from './CellRenderer.js';
+import { PasswordCell } from './PasswordCell.js';
 
 afterEach(cleanup);
 

package/src/react/components/DataTable/cells/CellRenderer.tsx

@@ -2,17 +2,17 @@ import { formatDateLocalSafe } from 'cwip/date';
 import { truncateMiddle } from 'cwip/string';
 import { Check, Paperclip } from 'lucide-react';
 import type { FC } from 'react';
-import { cn } from '../../../lib/cn';
-import { Badge, type BadgeTone } from '../../Badge';
-import { STATUS_ATTENTION_TONE } from '../../StatusPill';
-import { CopyButton } from '../../CopyButton';
-import { Cluster } from '../../layout';
-import type { ColDef, FieldOption } from '../types';
-import { resolveColumnAlign } from '../types';
-import { CodeCell } from './CodeCell';
-import { LinkCell } from './LinkCell';
-import { PasswordCell } from './PasswordCell';
-import { TruncatedText } from '../../TruncatedText';
+import { cn } from '../../../lib/cn.js';
+import { Badge, type BadgeTone } from '../../Badge.js';
+import { STATUS_ATTENTION_TONE } from '../../StatusPill.js';
+import { CopyButton } from '../../CopyButton.js';
+import { Cluster } from '../../layout.js';
+import type { ColDef, FieldOption } from '../types.js';
+import { resolveColumnAlign } from '../types.js';
+import { CodeCell } from './CodeCell.js';
+import { LinkCell } from './LinkCell.js';
+import { PasswordCell } from './PasswordCell.js';
+import { TruncatedText } from '../../TruncatedText.js';
 
 /**
  * What every cell renderer receives. A renderer is READ-ONLY display — it is the

package/src/react/components/DataTable/cells/CodeCell.tsx

@@ -1,4 +1,4 @@
-import { TruncatedText } from '../../TruncatedText';
+import { TruncatedText } from '../../TruncatedText.js';
 export interface CodeCellProps {
   value: string;
   /** Hint only — the cell shows a truncated read-only snippet; full editing/highlight

package/src/react/components/DataTable/cells/LinkCell.tsx

@@ -1,6 +1,6 @@
 import type { JSX } from 'react';
-import { ExternalLink } from '../../ExternalLink';
-import { TAP_TARGET_HEIGHT } from '../../../lib/tapTarget';
+import { ExternalLink } from '../../ExternalLink.js';
+import { TAP_TARGET_HEIGHT } from '../../../lib/tapTarget.js';
 
 export interface LinkCellProps {
   href: string;