cursedbelt 4.3.0 → 4.5.0

package/src/react/components/FileDropZone.tsx

@@ -1,8 +1,8 @@
 import { Upload, X } from 'lucide-react';
 import { type DragEvent, type ReactNode, useId, useRef, useState } from 'react';
-import { cn } from '../lib/cn';
-import { Button } from './Button';
-import { Input } from './Input';
+import { cn } from '../lib/cn.js';
+import { Button } from './Button.js';
+import { Input } from './Input.js';
 
 export interface FileDropZoneProps {
   /** Receives the dropped/browsed files (already filtered by `accept`). */

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

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

package/src/react/components/FileLocation.tsx

@@ -1,9 +1,9 @@
 import { FolderOpen, SquareCode } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { CopyButton } from './CopyButton';
-import { IconButton } from './IconButton';
-import { TruncatedText } from './TruncatedText';
+import { cn } from '../lib/cn.js';
+import { CopyButton } from './CopyButton.js';
+import { IconButton } from './IconButton.js';
+import { TruncatedText } from './TruncatedText.js';
 
 /**
  * Which OS file manager a "reveal" jumps to — drives the default reveal label so

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

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

package/src/react/components/FileTypeIcon.tsx

@@ -11,7 +11,7 @@ import {
   FileVideo,
   Image as ImageIcon,
 } from 'lucide-react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 /*
  * FileTypeIcon — what a file IS, at a glance, in a list of files with no extensions.

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

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

package/src/react/components/FindingsList.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { Badge, type BadgeTone } from './Badge';
-import { EmptyState } from './EmptyState';
+import { cn } from '../lib/cn.js';
+import { Badge, type BadgeTone } from './Badge.js';
+import { EmptyState } from './EmptyState.js';
 
 /** Ordered worst-first. The order IS the sort key. */
 export const FINDING_SEVERITIES = ['critical', 'warning', 'info'] as const;

package/src/react/components/Grid.tsx

@@ -1,6 +1,6 @@
 import type { CSSProperties, HTMLAttributes } from 'react';
-import { cn } from '../lib/cn';
-import { GAP, type Gap } from './layout';
+import { cn } from '../lib/cn.js';
+import { GAP, type Gap } from './layout.js';
 
 export interface GridProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/react/components/HoverCard.tsx

@@ -1,13 +1,13 @@
 import * as RHover from '@radix-ui/react-hover-card';
 import type { ReactNode } from 'react';
-import { useHasHover } from '../hooks/useHasHover';
-import { cn } from '../lib/cn';
-import { HOVER_HINT_DELAY_MS } from '../lib/hoverIntent';
+import { useHasHover } from '../hooks/useHasHover.js';
+import { cn } from '../lib/cn.js';
+import { HOVER_HINT_DELAY_MS } from '../lib/hoverIntent.js';
 import {
   FLOATING_ANIMATION,
   FLOATING_COLLISION_PADDING,
   FLOATING_CONTENT_BASE,
-} from '../lib/floatingStyles';
+} from '../lib/floatingStyles.js';
 
 export interface HoverCardProps {
   trigger: ReactNode;

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

@@ -1,8 +1,8 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render } from '@testing-library/react';
 import { ZoomIn } from 'lucide-react';
-import { HudPill } from './HudPill';
-import { IconButton } from './IconButton';
+import { HudPill } from './HudPill.js';
+import { IconButton } from './IconButton.js';
 
 afterEach(cleanup);
 

package/src/react/components/HudPill.tsx

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 export type HudPillProps = HTMLAttributes<HTMLDivElement>;
 

package/src/react/components/IconButton.tsx

@@ -1,5 +1,5 @@
-import { cn } from '../lib/cn';
-import { Button, type ButtonProps, type ButtonSize } from './Button';
+import { cn } from '../lib/cn.js';
+import { Button, type ButtonProps, type ButtonSize } from './Button.js';
 
 /** IconButton's own size scale — same 3-step control-height scale as every other
  *  control-class primitive (Button/Input/Select/…), just without the non-square

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

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

package/src/react/components/ImpactDialog.tsx

@@ -1,10 +1,10 @@
 import { AlertTriangle } from 'lucide-react';
 import { useEffect, useId, useState } from 'react';
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { ActionBar } from './ActionBar';
-import { Button } from './Button';
-import { Modal, type ModalSize } from './Modal';
+import { cn } from '../lib/cn.js';
+import { ActionBar } from './ActionBar.js';
+import { Button } from './Button.js';
+import { Modal, type ModalSize } from './Modal.js';
 
 export interface ImpactChoice<V extends string = string> {
   /** The value handed back to `onConfirm`. */

package/src/react/components/InfoHint.tsx

@@ -14,10 +14,10 @@ import {
 } from '@floating-ui/react';
 import { Info } from 'lucide-react';
 import { type ReactNode, useState } from 'react';
-import { useHasHover } from '../hooks/useHasHover';
-import { cn } from '../lib/cn';
-import { HOVER_HINT_DELAY_MS } from '../lib/hoverIntent';
-import { TAP_TARGET } from '../lib/tapTarget';
+import { useHasHover } from '../hooks/useHasHover.js';
+import { cn } from '../lib/cn.js';
+import { HOVER_HINT_DELAY_MS } from '../lib/hoverIntent.js';
+import { TAP_TARGET } from '../lib/tapTarget.js';
 
 export interface InfoHintProps {
   /** The help body. */

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

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

package/src/react/components/InheritBadge.tsx

@@ -1,10 +1,10 @@
 import { CircleDashed, Pin, RotateCcw } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { Badge, type BadgeTone } from './Badge';
-import { Tooltip } from './Tooltip';
-import { IconButton } from './IconButton';
-import { REVEAL_ON_HOVER } from './revealOnHover';
+import { cn } from '../lib/cn.js';
+import { Badge, type BadgeTone } from './Badge.js';
+import { Tooltip } from './Tooltip.js';
+import { IconButton } from './IconButton.js';
+import { REVEAL_ON_HOVER } from './revealOnHover.js';
 
 /**
  * Where a value CAME FROM, which is a different question from what the value is.

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

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

package/src/react/components/InlineEditableText.tsx

@@ -1,11 +1,11 @@
 import { Pencil } from 'lucide-react';
 import { useCallback, useState } from 'react';
-import { cn } from '../lib/cn';
-import { AutoGrowTextarea } from './AutoGrowTextarea';
-import { IconButton } from './IconButton';
-import { Input } from './Input';
-import { Tooltip } from './Tooltip';
-import { TAP_TARGET_HEIGHT } from '../lib/tapTarget';
+import { cn } from '../lib/cn.js';
+import { AutoGrowTextarea } from './AutoGrowTextarea.js';
+import { IconButton } from './IconButton.js';
+import { Input } from './Input.js';
+import { Tooltip } from './Tooltip.js';
+import { TAP_TARGET_HEIGHT } from '../lib/tapTarget.js';
 
 export interface InlineEditableTextProps {
   value: string;

package/src/react/components/Input.tsx

@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef, KeyboardEvent } from 'react';
-import { cn } from '../lib/cn';
-import { type ControlSize, fieldControlClass } from '../lib/field';
+import { cn } from '../lib/cn.js';
+import { type ControlSize, fieldControlClass } from '../lib/field.js';
 
 export interface InputProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
   /** Called when Enter is pressed while this input is focused (scoped, not global). */

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

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

package/src/react/components/IsolatedFrame.tsx

@@ -1,9 +1,9 @@
 import { type ReactNode, type Ref, useState } from 'react';
-import { cn } from '../lib/cn';
-import { EmptyState } from './EmptyState';
-import { Modal } from './Modal';
-import { ScrollArea } from './ScrollArea';
-import { Skeleton } from './Skeleton';
+import { cn } from '../lib/cn.js';
+import { EmptyState } from './EmptyState.js';
+import { Modal } from './Modal.js';
+import { ScrollArea } from './ScrollArea.js';
+import { Skeleton } from './Skeleton.js';
 
 /**
  * How the framed content is presented:

package/src/react/components/JsonEditor.tsx

@@ -1,8 +1,8 @@
 import { formatJson, type JsonFormatResult, parseLoose } from 'cwip/json';
 import { type CSSProperties, useEffect, useMemo, useRef } from 'react';
-import { FIELD_CLASS } from '../lib/field';
-import { resolveClass, resolveStyle, type StyleableProps } from '../styling';
-import { Button } from './Button';
+import { FIELD_CLASS } from '../lib/field.js';
+import { resolveClass, resolveStyle, type StyleableProps } from '../styling.js';
+import { Button } from './Button.js';
 
 export interface JsonEditorParseResult {
   ok: boolean;

package/src/react/components/Lightbox.tsx

@@ -1,8 +1,8 @@
 import { X } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { Dialog, DialogContent, DialogTitle } from './dialog';
-import { IconButton } from './IconButton';
+import { cn } from '../lib/cn.js';
+import { Dialog, DialogContent, DialogTitle } from './dialog.js';
+import { IconButton } from './IconButton.js';
 
 export interface LightboxProps {
   open: boolean;

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

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

package/src/react/components/ListToolbar.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { ChipFilterStrip, type ChipOption } from './ChipFilterStrip';
-import { Input } from './Input';
+import { cn } from '../lib/cn.js';
+import { ChipFilterStrip, type ChipOption } from './ChipFilterStrip.js';
+import { Input } from './Input.js';
 
 export interface ListToolbarProps {
   /**

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

@@ -1,6 +1,6 @@
 import { describe, expect, test } from 'bun:test';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { LogViewer, severityOf, toLines } from './LogViewer';
+import { LogViewer, severityOf, toLines } from './LogViewer.js';
 
 describe('toLines', () => {
   test('drops one trailing newline, so a log never ends in a blank row', () => {

package/src/react/components/LogViewer.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { cn } from '../lib/cn';
-import { Badge } from './Badge';
-import { Button } from './Button';
-import { Input } from './Input';
-import { ScrollArea } from './ScrollArea';
+import { cn } from '../lib/cn.js';
+import { Badge } from './Badge.js';
+import { Button } from './Button.js';
+import { Input } from './Input.js';
+import { ScrollArea } from './ScrollArea.js';
 
 /**
  * A log output pane — monospace, virtualization-free, and honest about what it

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

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

package/src/react/components/MeterList.tsx

@@ -1,8 +1,8 @@
 import type { KeyboardEvent, ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { Surface } from './Surface';
-import type { StatTileTone } from './StatTile';
-import { TAP_TARGET_ALWAYS } from '../lib/tapTarget';
+import { cn } from '../lib/cn.js';
+import { Surface } from './Surface.js';
+import type { StatTileTone } from './StatTile.js';
+import { TAP_TARGET_ALWAYS } from '../lib/tapTarget.js';
 
 const TONE_DOT: Record<StatTileTone, string> = {
   success: 'bg-success',

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

@@ -1,10 +1,10 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
-import { confirm } from '../confirm';
-import { ConfirmDialog } from './ConfirmDialog';
-import { Drawer } from './Drawer';
-import { Lightbox } from './Lightbox';
-import { Modal } from './Modal';
+import { confirm } from '../confirm.js';
+import { ConfirmDialog } from './ConfirmDialog.js';
+import { Drawer } from './Drawer.js';
+import { Lightbox } from './Lightbox.js';
+import { Modal } from './Modal.js';
 
 afterEach(cleanup);
 

package/src/react/components/Modal.tsx

@@ -1,11 +1,11 @@
 import { X } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { useDiscardGuard } from '../hooks/useDiscardGuard';
-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 { 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 ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 

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

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

package/src/react/components/MultiSelectField.tsx

@@ -1,5 +1,5 @@
-import type { ControlSize } from '../lib/field';
-import { ComboboxField, type ComboboxOption } from './ComboboxField';
+import type { ControlSize } from '../lib/field.js';
+import { ComboboxField, type ComboboxOption } from './ComboboxField.js';
 
 /** Option shape for {@link MultiSelectField} — same contract as the combobox's. */
 export type MultiSelectOption = ComboboxOption;

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

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

package/src/react/components/NativeSelect.tsx

@@ -1,7 +1,7 @@
 import { ChevronDown } from 'lucide-react';
 import { Children, isValidElement, type ComponentPropsWithRef, type ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { type ControlSize, fieldControlClass } from '../lib/field';
+import { cn } from '../lib/cn.js';
+import { type ControlSize, fieldControlClass } from '../lib/field.js';
 
 export interface NativeSelectOption {
   value: string;

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

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

package/src/react/components/OnlineDot.tsx

@@ -1,5 +1,5 @@
-import { cn } from '../lib/cn';
-import { Tooltip } from './Tooltip';
+import { cn } from '../lib/cn.js';
+import { Tooltip } from './Tooltip.js';
 
 export interface OnlineDotProps {
   online: boolean;

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

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

package/src/react/components/OtpInput.tsx

@@ -6,7 +6,7 @@ import {
   useMemo,
   useRef,
 } from 'react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 export interface OtpInputProps {
   /** The concatenated code (controlled). Length ≤ {@link OtpInputProps.length}. */

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

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

package/src/react/components/Page.tsx

@@ -1,6 +1,6 @@
 import type { HTMLAttributes, ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { Split } from './layout';
+import { cn } from '../lib/cn.js';
+import { Split } from './layout.js';
 
 /**
  * The routed content area. Purely structural: a min-height-0 flex column that fills

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

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

package/src/react/components/PanelGrid.tsx

@@ -1,8 +1,8 @@
 import { type ReactNode, useMemo } from 'react';
 import { Group, Panel, useDefaultLayout } from 'react-resizable-panels';
-import { useMediaQuery } from '../hooks/useMediaQuery';
-import { cn } from '../lib/cn';
-import { PanelSeparator, type PanelSeparatorVariant } from './PanelSeparator';
+import { useMediaQuery } from '../hooks/useMediaQuery.js';
+import { cn } from '../lib/cn.js';
+import { PanelSeparator, type PanelSeparatorVariant } from './PanelSeparator.js';
 
 /** A leaf cell — renders content. `type` may be omitted for terseness. */
 export interface PanelGridLeaf {

package/src/react/components/PanelSeparator.tsx

@@ -1,5 +1,5 @@
 import { Separator } from 'react-resizable-panels';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 export type PanelSeparatorVariant = 'line' | 'gutter';
 

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

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

package/src/react/components/PathText.tsx

@@ -1,12 +1,12 @@
 import { FolderOpen, SquareCode } from 'lucide-react';
 import type { JSX, ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { CODE_CHIP_CLASS } from './CodeChip';
-import { CopyButton } from './CopyButton';
-import { type FileManagerKind, REVEAL_LABEL } from './FileLocation';
-import { IconButton } from './IconButton';
-import { Tooltip } from './Tooltip';
-import { TAP_TARGET_ALWAYS } from '../lib/tapTarget';
+import { cn } from '../lib/cn.js';
+import { CODE_CHIP_CLASS } from './CodeChip.js';
+import { CopyButton } from './CopyButton.js';
+import { type FileManagerKind, REVEAL_LABEL } from './FileLocation.js';
+import { IconButton } from './IconButton.js';
+import { Tooltip } from './Tooltip.js';
+import { TAP_TARGET_ALWAYS } from '../lib/tapTarget.js';
 
 export interface PathTextProps {
   /** The full path (file path, module id, URL path). Never pre-truncate it. */

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

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

package/src/react/components/PluginCard.tsx

@@ -1,10 +1,10 @@
 import { type HTMLAttributes, type ReactNode, useEffect, useRef } from 'react';
-import { cn } from '../lib/cn';
-import { devWarnOnce, isDevMode } from '../lib/devWarn';
-import { FooterSlot } from './ActionBar';
-import { ScrollArea } from './ScrollArea';
-import { Surface } from './Surface';
-import { WidgetHeader, type WidgetHeaderProps } from './WidgetHeader';
+import { cn } from '../lib/cn.js';
+import { devWarnOnce, isDevMode } from '../lib/devWarn.js';
+import { FooterSlot } from './ActionBar.js';
+import { ScrollArea } from './ScrollArea.js';
+import { Surface } from './Surface.js';
+import { WidgetHeader, type WidgetHeaderProps } from './WidgetHeader.js';
 
 export interface PluginCardProps
   extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>,

package/src/react/components/Popover.tsx

@@ -1,11 +1,11 @@
 import * as RPopover from '@radix-ui/react-popover';
 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,
-} from '../lib/floatingStyles';
+} from '../lib/floatingStyles.js';
 
 export interface PopoverProps {
   trigger: ReactNode;

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

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