cursedbelt 4.4.0 → 4.6.0

package/src/react/chat/index.ts

@@ -1,15 +1,15 @@
-export { Bubble, type BubbleProps, type BubbleVariant } from './Bubble';
-export { DateMarker, type DateMarkerProps } from './DateMarker';
-export { MessageComposer, type MessageComposerProps } from './MessageComposer';
-export { MessageRow, type MessageRowProps } from './MessageRow';
-export { MessageScroller, type MessageScrollerProps } from './MessageScroller';
-export { MessageThread, type MessageThreadProps } from './MessageThread';
-export { PresenceRoster, type PresenceRosterProps } from './PresenceRoster';
-export { StatusMarker, type StatusMarkerProps } from './StatusMarker';
+export { Bubble, type BubbleProps, type BubbleVariant } from './Bubble.js';
+export { DateMarker, type DateMarkerProps } from './DateMarker.js';
+export { MessageComposer, type MessageComposerProps } from './MessageComposer.js';
+export { MessageRow, type MessageRowProps } from './MessageRow.js';
+export { MessageScroller, type MessageScrollerProps } from './MessageScroller.js';
+export { MessageThread, type MessageThreadProps } from './MessageThread.js';
+export { PresenceRoster, type PresenceRosterProps } from './PresenceRoster.js';
+export { StatusMarker, type StatusMarkerProps } from './StatusMarker.js';
 export type {
   ChatAttachment,
   ChatAuthor,
   ChatMessage,
   MessageStatus,
   PresenceUser,
-} from './types';
+} from './types.js';

package/src/react/chat/types.ts

@@ -1,4 +1,4 @@
-import type { ReactionGroup } from '../components/ReactionBar';
+import type { ReactionGroup } from '../components/ReactionBar.js';
 
 // ── Core chat types ──────────────────────────────────────────────────────────
 

package/src/react/clipboard/copyRich.spec.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
-import { copyRich } from './copyRich';
+import { copyRich } from './copyRich.js';
 
 // A copy button has exactly two ways to fail the user: it silently writes the wrong thing, or
 // it throws on a browser that won't grant clipboard access. Both are covered here.

package/src/react/clipboard/domToMarkdown.spec.tsx

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

package/src/react/clipboard/index.ts

@@ -8,9 +8,9 @@
 // Light enough to sit in the flat `cursedbelt/react` barrel (no heavy deps), but exported on a
 // subpath too so a consumer can take just this.
 
-export { copyRich, type CopyRichInput, canCopyRich } from './copyRich';
-export { domToMarkdown } from './domToMarkdown';
+export { copyRich, type CopyRichInput, canCopyRich } from './copyRich.js';
+export { domToMarkdown } from './domToMarkdown.js';
 export {
   useSelectionMarkdown,
   type UseSelectionMarkdownResult,
-} from './useSelectionMarkdown';
+} from './useSelectionMarkdown.js';

package/src/react/clipboard/useSelectionMarkdown.spec.tsx

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

package/src/react/clipboard/useSelectionMarkdown.ts

@@ -1,5 +1,5 @@
 import { type RefObject, useCallback, useEffect, useState } from 'react';
-import { domToMarkdown } from './domToMarkdown';
+import { domToMarkdown } from './domToMarkdown.js';
 
 // "What has the user selected, as markdown?" — the input to both the Copy-as-Markdown action
 // and the extract-selection-into-a-note flow.

package/src/react/code-editor/CodeEditor.spec.tsx

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

package/src/react/code-editor/CodeEditor.tsx

@@ -22,10 +22,10 @@ import type { Extension } from '@codemirror/state';
 import { Compartment, EditorState } from '@codemirror/state';
 import { EditorView, keymap, lineNumbers as lineNumbersExt } from '@codemirror/view';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { cn } from '../lib/cn';
-import type { CodeLanguage } from './languages';
-import { loadLanguageExtension } from './languages';
-import { cbEditorTheme, cbSyntaxHighlighting } from './theme';
+import { cn } from '../lib/cn.js';
+import type { CodeLanguage } from './languages.js';
+import { loadLanguageExtension } from './languages.js';
+import { cbEditorTheme, cbSyntaxHighlighting } from './theme.js';
 
 export interface CodeEditorProps {
   /** Controlled source text. */

package/src/react/code-editor/CodeViewer.tsx

@@ -7,9 +7,9 @@
 //   <CodeViewer value={sqlQuery} language='sql' />
 import { EditorView } from '@codemirror/view';
 import { useMemo } from 'react';
-import { cn } from '../lib/cn';
-import type { CodeEditorProps } from './CodeEditor';
-import { CodeEditor } from './CodeEditor';
+import { cn } from '../lib/cn.js';
+import type { CodeEditorProps } from './CodeEditor.js';
+import { CodeEditor } from './CodeEditor.js';
 
 // Wrap long lines in the viewer so code doesn't overflow the layout.
 const lineWrapping = EditorView.lineWrapping;

package/src/react/code-editor/index.ts

@@ -4,11 +4,11 @@
 //   import { CodeEditor, CodeViewer } from 'cursedbelt/react/code-editor';
 //   <CodeEditor value={code} onChange={setCode} language='typescript' />
 //   <CodeViewer value={sql} language='sql' />
-export { CodeEditor, type CodeEditorProps } from './CodeEditor';
-export { CodeViewer, type CodeViewerProps } from './CodeViewer';
+export { CodeEditor, type CodeEditorProps } from './CodeEditor.js';
+export { CodeViewer, type CodeViewerProps } from './CodeViewer.js';
 export {
   CODE_LANGUAGE_LABELS,
   CODE_LANGUAGES,
   type CodeLanguage,
   guessCodeLanguage,
-} from './languages';
+} from './languages.js';

package/src/react/code-editor/languages.spec.ts

@@ -5,7 +5,7 @@ import {
   type CodeLanguage,
   guessCodeLanguage,
   loadLanguageExtension,
-} from './languages';
+} from './languages.js';
 
 describe('the language roster', () => {
   test('every offered identifier has a label and every label an identifier', () => {

package/src/react/colorScheme/ThemeToggle.spec.tsx

@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import { COLOR_SCHEME_STORAGE_KEY, setColorSchemeMode } from 'cursedbelt-core/color-scheme';
-import { ThemeToggle } from './ThemeToggle';
+import { ThemeToggle } from './ThemeToggle.js';
 
 afterEach(() => {
   cleanup();

package/src/react/colorScheme/ThemeToggle.tsx

@@ -1,6 +1,6 @@
 import { Moon, Sun } from 'lucide-react';
-import { IconButton, type IconButtonProps } from '../components/IconButton';
-import { useColorScheme } from './useColorScheme';
+import { IconButton, type IconButtonProps } from '../components/IconButton.js';
+import { useColorScheme } from './useColorScheme.js';
 
 export interface ThemeToggleProps
   extends Omit<IconButtonProps, 'label' | 'tooltip' | 'onClick' | 'children'> {

package/src/react/companion-link/CompanionLinkBar.tsx

@@ -1,7 +1,7 @@
-import { cn } from '../lib/cn';
-import { CompanionLinkStatus } from './CompanionLinkStatus';
-import { StaleMirrorBanner } from './StaleMirrorBanner';
-import { useCompanionLink, type UseCompanionLinkOptions } from './useCompanionLink';
+import { cn } from '../lib/cn.js';
+import { CompanionLinkStatus } from './CompanionLinkStatus.js';
+import { StaleMirrorBanner } from './StaleMirrorBanner.js';
+import { useCompanionLink, type UseCompanionLinkOptions } from './useCompanionLink.js';
 
 export interface CompanionLinkBarProps extends UseCompanionLinkOptions {
   className?: string;

package/src/react/companion-link/CompanionLinkStatus.spec.tsx

@@ -1,10 +1,10 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render } from '@testing-library/react';
 import { createElement } from 'react';
-import { CompanionLinkStatus } from './CompanionLinkStatus';
-import { deriveLinkView } from './logic';
-import { StaleMirrorBanner } from './StaleMirrorBanner';
-import type { CompanionLinkSnapshot, PendingCommand } from './types';
+import { CompanionLinkStatus } from './CompanionLinkStatus.js';
+import { deriveLinkView } from './logic.js';
+import { StaleMirrorBanner } from './StaleMirrorBanner.js';
+import type { CompanionLinkSnapshot, PendingCommand } from './types.js';
 
 const snapshot = (over: Partial<CompanionLinkSnapshot> = {}): CompanionLinkSnapshot => ({
   primaryId: 'primary',

package/src/react/companion-link/CompanionLinkStatus.tsx

@@ -1,11 +1,11 @@
 import { formatTimeAgo } from 'cwip/format';
-import { Accordion } from '../components/Accordion';
-import { Badge } from '../components/Badge';
-import { Skeleton } from '../components/Skeleton';
-import { StatusPill } from '../components/StatusPill';
-import { cn } from '../lib/cn';
-import { connectionPillStatus } from './logic';
-import type { CompanionLinkView, PendingCommand } from './types';
+import { Accordion } from '../components/Accordion.js';
+import { Badge } from '../components/Badge.js';
+import { Skeleton } from '../components/Skeleton.js';
+import { StatusPill } from '../components/StatusPill.js';
+import { cn } from '../lib/cn.js';
+import { connectionPillStatus } from './logic.js';
+import type { CompanionLinkView, PendingCommand } from './types.js';
 
 export interface CompanionLinkStatusProps {
   view: CompanionLinkView;

package/src/react/companion-link/StaleMirrorBanner.tsx

@@ -1,6 +1,6 @@
 import { formatTimeAgo } from 'cwip/format';
-import { Alert } from '../components/Alert';
-import type { CompanionLinkView } from './types';
+import { Alert } from '../components/Alert.js';
+import type { CompanionLinkView } from './types.js';
 
 export interface StaleMirrorBannerProps {
   view: CompanionLinkView;

package/src/react/companion-link/index.ts

@@ -7,16 +7,16 @@
  * peer-link/cursedshell import): the wire DTO is defined here and the companion
  * server projects onto it.
  */
-export * from './types';
-export * from './logic';
+export * from './types.js';
+export * from './logic.js';
 export {
   companionLinkStore,
   useCompanionLinkStore,
   trackPendingFromResponse,
   RESOLVED_LINGER_MS,
   type CompanionLinkState,
-} from './store';
-export { useCompanionLink, type UseCompanionLinkOptions, type CompanionLinkHook } from './useCompanionLink';
-export { CompanionLinkStatus, type CompanionLinkStatusProps } from './CompanionLinkStatus';
-export { StaleMirrorBanner, type StaleMirrorBannerProps } from './StaleMirrorBanner';
-export { CompanionLinkBar, type CompanionLinkBarProps } from './CompanionLinkBar';
+} from './store.js';
+export { useCompanionLink, type UseCompanionLinkOptions, type CompanionLinkHook } from './useCompanionLink.js';
+export { CompanionLinkStatus, type CompanionLinkStatusProps } from './CompanionLinkStatus.js';
+export { StaleMirrorBanner, type StaleMirrorBannerProps } from './StaleMirrorBanner.js';
+export { CompanionLinkBar, type CompanionLinkBarProps } from './CompanionLinkBar.js';

package/src/react/companion-link/logic.spec.ts

@@ -5,8 +5,8 @@ import {
   DEFAULT_STALE_THRESHOLD_MS,
   deriveLinkView,
   resolvePending,
-} from './logic';
-import type { CompanionLinkSnapshot, PendingCommand } from './types';
+} from './logic.js';
+import type { CompanionLinkSnapshot, PendingCommand } from './types.js';
 
 const pending = (id: string, over: Partial<PendingCommand> = {}): PendingCommand => ({
   id,

package/src/react/companion-link/logic.ts

@@ -9,7 +9,7 @@ import type {
   CompanionLinkSnapshot,
   CompanionLinkView,
   PendingCommand,
-} from './types';
+} from './types.js';
 
 /** Default: banner the mirror stale once no frame has arrived for 60s. A live link
  *  heartbeats well inside this, so crossing it means the primary really went quiet. */

package/src/react/companion-link/store.spec.ts

@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, test } from 'bun:test';
-import { companionLinkStore, RESOLVED_LINGER_MS, trackPendingFromResponse } from './store';
-import type { CompanionLinkSnapshot } from './types';
+import { companionLinkStore, RESOLVED_LINGER_MS, trackPendingFromResponse } from './store.js';
+import type { CompanionLinkSnapshot } from './types.js';
 
 const st = () => companionLinkStore.getState();
 

package/src/react/companion-link/store.ts

@@ -6,8 +6,8 @@
  * something to rehydrate from a previous tab.
  */
 import { createStore, useStore } from 'zustand';
-import { resolvePending } from './logic';
-import type { CompanionLinkSnapshot, PendingCommand } from './types';
+import { resolvePending } from './logic.js';
+import type { CompanionLinkSnapshot, PendingCommand } from './types.js';
 
 /** How long a resolved (accepted/failed) command lingers in the list before it is
  *  auto-pruned — long enough for the owner to SEE the verdict, short enough that a

package/src/react/companion-link/useCompanionLink.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
-import { DEFAULT_STALE_THRESHOLD_MS, deriveLinkView } from './logic';
-import { companionLinkStore, RESOLVED_LINGER_MS, useCompanionLinkStore } from './store';
-import type { CompanionLinkSnapshot, CompanionLinkView } from './types';
+import { DEFAULT_STALE_THRESHOLD_MS, deriveLinkView } from './logic.js';
+import { companionLinkStore, RESOLVED_LINGER_MS, useCompanionLinkStore } from './store.js';
+import type { CompanionLinkSnapshot, CompanionLinkView } from './types.js';
 
 export interface UseCompanionLinkOptions {
   /** The companion status endpoint (default `/companion/status`). */

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

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

package/src/react/components/Accordion.tsx

@@ -1,7 +1,7 @@
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import { ChevronDown } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 export interface AccordionItem {
   value: string;

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

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, test } from 'bun:test';
 import { cleanup, render } from '@testing-library/react';
-import { ActionBar, FooterSlot } from './ActionBar';
-import { Button } from './Button';
+import { ActionBar, FooterSlot } from './ActionBar.js';
+import { Button } from './Button.js';
 
 // useMediaQuery reads window.matchMedia; stub it so the breakpoint is deterministic
 // (happy-dom doesn't evaluate a real viewport against `(max-width: 639px)`).

package/src/react/components/ActionBar.tsx

@@ -1,6 +1,6 @@
 import { Children, Fragment, isValidElement, type ReactNode } from 'react';
-import { useMediaQuery } from '../hooks/useMediaQuery';
-import { cn } from '../lib/cn';
+import { useMediaQuery } from '../hooks/useMediaQuery.js';
+import { cn } from '../lib/cn.js';
 
 export interface FooterChromeProps {
   children?: ReactNode;

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

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

package/src/react/components/ActionGroup.tsx

@@ -1,9 +1,9 @@
 import type { MouseEvent, ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import type { ControlSize } from '../lib/field';
-import { Button } from './Button';
-import { ButtonGroup } from './ButtonGroup';
-import { IconButton } from './IconButton';
+import { cn } from '../lib/cn.js';
+import type { ControlSize } from '../lib/field.js';
+import { Button } from './Button.js';
+import { ButtonGroup } from './ButtonGroup.js';
+import { IconButton } from './IconButton.js';
 
 export interface ActionGroupItem {
   /** Stable identity (React key). */

package/src/react/components/AddItemsMenu.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode, useState } from 'react';
-import { cn } from '../lib/cn';
-import { Button, type ButtonSize, type ButtonVariant } from './Button';
-import { Popover } from './Popover';
+import { cn } from '../lib/cn.js';
+import { Button, type ButtonSize, type ButtonVariant } from './Button.js';
+import { Popover } from './Popover.js';
 
 export interface AddItemsGroup<T> {
   /** Section heading; omit for an ungrouped flat list. */

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

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

package/src/react/components/Alert.tsx

@@ -1,7 +1,7 @@
 import { AlertTriangle, CheckCircle, Info, X, XCircle } from 'lucide-react';
 import type { ReactNode } from 'react';
-import { cn } from '../lib/cn';
-import { IconButton } from './IconButton';
+import { cn } from '../lib/cn.js';
+import { IconButton } from './IconButton.js';
 
 /*
  * Alert — a tonal status banner / callout. Color + an icon + text (never color

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

@@ -1,9 +1,9 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render } from '@testing-library/react';
-import { AuthCard } from './auth/AuthCard';
-import { AmbientBackdrop } from './AmbientBackdrop';
-import { AppShell } from './AppShell';
-import { Surface } from './Surface';
+import { AuthCard } from './auth/AuthCard.js';
+import { AmbientBackdrop } from './AmbientBackdrop.js';
+import { AppShell } from './AppShell.js';
+import { Surface } from './Surface.js';
 
 afterEach(cleanup);
 

package/src/react/components/AmbientBackdrop.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 /** How much light the field throws. Writes `--ambient-strength`, which every blob's
  *  alpha is derived from — so the whole atmosphere tunes on one number and the three

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

@@ -2,7 +2,7 @@ import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, fireEvent, render } from '@testing-library/react';
 import { createRef } from 'react';
 import type { NavigationModel } from 'cursedbelt-core/navigation';
-import { AppShell } from './AppShell';
+import { AppShell } from './AppShell.js';
 
 afterEach(cleanup);
 

package/src/react/components/AppShell.tsx

@@ -1,13 +1,13 @@
 import type { ElementType, ReactNode, Ref } from 'react';
 import type { GateFn, NavigationModel, NavPreferences } from 'cursedbelt-core/navigation';
-import { useKeyboardInset } from '../hooks/useKeyboardInset';
-import { cn } from '../lib/cn';
-import { CommandBar } from '../nav/CommandBar';
-import type { IconResolver, NavBadgeTone } from '../nav/navShared';
-import { PlaceBar } from '../nav/PlaceBar';
-import { SideNav } from '../nav/SideNav';
-import { AmbientBackdrop, type AmbientBackdropProps } from './AmbientBackdrop';
-import { ScrollArea, type ScrollAreaSpace } from './ScrollArea';
+import { useKeyboardInset } from '../hooks/useKeyboardInset.js';
+import { cn } from '../lib/cn.js';
+import { CommandBar } from '../nav/CommandBar.js';
+import type { IconResolver, NavBadgeTone } from '../nav/navShared.js';
+import { PlaceBar } from '../nav/PlaceBar.js';
+import { SideNav } from '../nav/SideNav.js';
+import { AmbientBackdrop, type AmbientBackdropProps } from './AmbientBackdrop.js';
+import { ScrollArea, type ScrollAreaSpace } from './ScrollArea.js';
 
 export interface AppShellProps {
   /** Routed page content. Scrolls inside the single keyboard-safe `ScrollArea`. */

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

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

package/src/react/components/AsyncPanel.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
-import { Alert } from './Alert';
-import { EmptyState } from './EmptyState';
-import { SkeletonList } from './Skeleton';
+import { Alert } from './Alert.js';
+import { EmptyState } from './EmptyState.js';
+import { SkeletonList } from './Skeleton.js';
 
 export interface AsyncPanelProps {
   loading?: boolean;

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

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

package/src/react/components/AutoGrowTextarea.tsx

@@ -1,6 +1,6 @@
 import { type ComponentPropsWithRef, useLayoutEffect, useRef } from 'react';
-import { cn } from '../lib/cn';
-import { FIELD_CLASS } from '../lib/field';
+import { cn } from '../lib/cn.js';
+import { FIELD_CLASS } from '../lib/field.js';
 
 export interface AutoGrowTextareaProps extends ComponentPropsWithRef<'textarea'> {
   /** Cap growth at this many px; past the cap the textarea scrolls internally. */

package/src/react/components/Autocomplete.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 { AutocompleteField } from './Autocomplete';
+import { AutocompleteField } from './Autocomplete.js';
 
 afterEach(cleanup);
 

package/src/react/components/Autocomplete.tsx

@@ -3,11 +3,11 @@
 import { Autocomplete } from '@base-ui/react/autocomplete';
 import { ChevronDown, Loader2 } from 'lucide-react';
 import { type ReactNode, useCallback, useEffect, useState } from 'react';
-import { useDebouncedCallback } from '../hooks/useDebouncedCallback';
-import { cn } from '../lib/cn';
-import { type ControlSize, fieldControlClass } from '../lib/field';
+import { useDebouncedCallback } from '../hooks/useDebouncedCallback.js';
+import { cn } from '../lib/cn.js';
+import { type ControlSize, fieldControlClass } from '../lib/field.js';
 import { FLOATING_COLLISION_PADDING,
-  FLOATING_CONTENT_BASE, FLOATING_ITEM_BASE } from '../lib/floatingStyles';
+  FLOATING_CONTENT_BASE, FLOATING_ITEM_BASE } from '../lib/floatingStyles.js';
 
 export interface AutocompleteProps<S = string> {
   /** The current text value (controlled). */

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

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

package/src/react/components/Avatar.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { cn } from '../lib/cn';
+import { cn } from '../lib/cn.js';
 
 const SIZES = {
   // guardrails-ignore micro-typography-floor: INITIALS inside a 24px circle — a glyph

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

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

package/src/react/components/AvatarStack.tsx

@@ -1,5 +1,5 @@
-import { cn } from '../lib/cn';
-import { Avatar, type AvatarProps } from './Avatar';
+import { cn } from '../lib/cn.js';
+import { Avatar, type AvatarProps } from './Avatar.js';
 
 export interface AvatarUser {
   name?: string;

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

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

package/src/react/components/Badge.tsx

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react';
-import { cn } from '../lib/cn';
-import { Tooltip } from './Tooltip';
+import { cn } from '../lib/cn.js';
+import { Tooltip } from './Tooltip.js';
 
 /*
  * Badge — the single small status/category pill. This is the ONE source of truth

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

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test } from 'bun:test';
 import { cleanup, render, screen, waitFor } from '@testing-library/react';
-import { BuildFreshnessNotice } from './BuildFreshness';
+import { BuildFreshnessNotice } from './BuildFreshness.js';
 
 /**
  * 🔴 The failure path is the one that matters, so it is tested first and hardest.

package/src/react/components/BuildFreshness.tsx

@@ -34,8 +34,8 @@ import type { JSX } from 'react';
 import { X } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import './buildFreshness.css';
-import { Button } from './Button';
-import { IconButton } from './IconButton';
+import { Button } from './Button.js';
+import { IconButton } from './IconButton.js';
 
 /** How often a VISIBLE tab re-reads the serving stamp. */
 const POLL_MS = 5 * 60_000;