@astryxdesign/core 0.2.0 → 0.3.0

package/src/TopNav/TopNavMenu.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/TopNav/TopNav.doc.mjs
  * - /packages/core/src/TopNav/TopNavMenu.test.tsx
  * - /packages/core/src/TopNav/index.ts
- * - /packages/cli/templates/blocks/components/TopNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 
 import React, {
@@ -28,7 +28,7 @@ import {usePopover} from '../Popover/usePopover';
 import {useMenuHover} from '../hooks/useMenuHover';
 import {useListFocus} from '../hooks/useListFocus';
 import {useTypeahead} from '../hooks/useTypeahead';
-import {getIcon} from '../Icon/globalIconRegistry';
+import {useIcon} from '../Icon';
 import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {navItemStyles} from '../NavItem/navItemStyles.stylex';
@@ -332,6 +332,7 @@ export function TopNavMenu({
   hideDelay = 200,
 }: TopNavMenuProps) {
   const renderMode = useTopNavRenderMode();
+  const chevronDownIcon = useIcon('chevronDown');
   const {closeMobileNav} = useAppShellMobile();
   const LinkComponent = useLinkComponent();
   const [drawerExpanded, setDrawerExpanded] = useState(false);
@@ -445,7 +446,7 @@ export function TopNavMenu({
               drawerStyles.chevron,
               drawerExpanded && drawerStyles.chevronExpanded,
             )}>
-            {getIcon('chevronDown')}
+            {chevronDownIcon}
           </span>
         </button>
         <div
@@ -503,7 +504,7 @@ export function TopNavMenu({
             styles.chevron,
             popover.isOpen && styles.chevronOpen,
           )}>
-          {getIcon('chevronDown')}
+          {chevronDownIcon}
         </span>
       </button>
       {popover.render(

package/src/TreeList/TreeList.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'TreeList',
@@ -94,7 +94,7 @@ export const docs = {
 // See .context/decisions/dense-compression-protocol.md
 // -------------------------------------------------------
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'TreeList',
   displayName: 'Tree List',
@@ -165,7 +165,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Data-driven tree list for hierarchical data w/ expand/collapse, branch lines, interactive items. Flat items array w/ recursive children, no composition, no cloneElement.',

package/src/TreeList/TreeList.test.tsx

@@ -15,8 +15,12 @@ import userEvent from '@testing-library/user-event';
 import {TreeList} from './TreeList';
 import type {TreeListItemData} from './TreeListTypes';
 import {defineTheme} from '../theme/defineTheme';
-import {generateThemeCSSFlat} from '../theme/generateThemeRules';
+import {generateThemeCSS} from '../theme/generateThemeRules';
 
+function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
+  const {prose, component} = generateThemeCSS(theme);
+  return [prose, component].filter(Boolean).join('\n\n');
+}
 const simpleItems: TreeListItemData[] = [
   {id: 'a', label: 'Item A'},
   {id: 'b', label: 'Item B'},
@@ -485,7 +489,7 @@ describe('TreeList', () => {
           },
         },
       });
-      const css = generateThemeCSSFlat(theme);
+      const css = generateThemeTestCSS(theme);
       expect(css).toContain('.astryx-tree-list-guide {');
       expect(css).toContain('background-color: var(--color-accent)');
     });
@@ -501,7 +505,7 @@ describe('TreeList', () => {
           },
         },
       });
-      const css = generateThemeCSSFlat(theme);
+      const css = generateThemeTestCSS(theme);
       expect(css).toContain('.astryx-tree-list-guide {');
       expect(css).toContain('display: none');
     });
@@ -525,7 +529,7 @@ describe('TreeList', () => {
           },
         },
       });
-      const css = generateThemeCSSFlat(theme);
+      const css = generateThemeTestCSS(theme);
       expect(css).toContain('.astryx-tree-list {');
       expect(css).toContain('--tree-list-indent: var(--spacing-5)');
     });
@@ -609,7 +613,7 @@ describe('TreeList', () => {
           },
         },
       });
-      const css = generateThemeCSSFlat(theme);
+      const css = generateThemeTestCSS(theme);
       expect(css).toContain('.astryx-tree-list-chevron {');
       expect(css).toContain('color: var(--color-accent)');
       expect(css).toContain('.astryx-tree-list-chevron.expanded');
@@ -667,7 +671,7 @@ describe('TreeList', () => {
           },
         },
       });
-      const css = generateThemeCSSFlat(theme);
+      const css = generateThemeTestCSS(theme);
       expect(css).toContain('.astryx-tree-list-item-label {');
       expect(css).toContain('color: var(--color-text-primary)');
       expect(css).toContain('.astryx-tree-list-item-label.selected');

package/src/TreeList/TreeList.tsx

@@ -12,7 +12,7 @@
  * - /packages/core/src/TreeList/TreeList.doc.mjs
  * - /packages/core/src/TreeList/index.ts
  * - /apps/storybook/stories/TreeList.stories.tsx
- * - /packages/cli/templates/blocks/components/TreeList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 
 import {useId, useState, useMemo, useCallback, type ReactNode} from 'react';

package/src/TreeList/TreeListBranches.tsx

@@ -10,7 +10,7 @@
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TreeList/TreeListItem.tsx
- * - /packages/cli/templates/blocks/components/TreeList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 
 import * as stylex from '@stylexjs/stylex';

package/src/TreeList/TreeListItem.tsx

@@ -11,7 +11,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TreeList/TreeList.doc.mjs
  * - /packages/core/src/TreeList/TreeList.tsx
- * - /packages/cli/templates/blocks/components/TreeList/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TreeList/ (showcase blocks)
  */
 
 import {useId, useMemo, type ReactNode} from 'react';
@@ -24,7 +24,7 @@ import {
   easeVars,
   typeScaleVars,
 } from '../theme/tokens.stylex';
-import {getIcon} from '../Icon/globalIconRegistry';
+import {useIcon} from '../Icon';
 import {mergeProps, rtlStyles} from '../utils';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import {TreeListBranches} from './TreeListBranches';
@@ -328,6 +328,7 @@ export function TreeListItem({
   isTabbable,
 }: TreeListItemInternalProps) {
   const t = useTranslator();
+  const chevronRightIcon = useIcon('chevronRight');
   const labelId = useId();
   const descriptionId = useId();
   const LinkComponent = useLinkComponent();
@@ -412,7 +413,7 @@ export function TreeListItem({
           styles.chevronSvg,
           isExpanded ? styles.chevronExpanded : styles.chevronCollapsed,
         )}>
-        {getIcon('chevronRight')}
+        {chevronRightIcon}
       </span>
     </span>
   );

package/src/TreeList/TreeListTypes.ts

@@ -12,28 +12,11 @@
  */
 
 import type {ReactNode} from 'react';
+import type {TreeListVariantMap} from './index';
 
 /** Spacing density for tree list items. */
 export type TreeListDensity = 'compact' | 'balanced' | 'spacious';
 
-/**
- * Extensible variant map for TreeList.
- *
- * Theme packages can add custom variants via TypeScript module augmentation:
- * @example
- * ```
- * declare module '@astryxdesign/core/TreeList' {
- *   interface TreeListVariantMap {
- *     'dotted': true;
- *   }
- * }
- * ```
- */
-export interface TreeListVariantMap {
-  lineGuides: true;
-  noGuides: true;
-}
-
 /**
  * Visual treatment of the hierarchy guide (connector) lines. Extensible via
  * module augmentation of TreeListVariantMap.

package/src/TreeList/index.ts

@@ -11,6 +11,24 @@
  * SYNC: When modified, update /packages/core/src/TreeList/TreeList.doc.mjs
  */
 
+/**
+ * Extensible variant map for TreeList.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/TreeList' {
+ *   interface TreeListVariantMap {
+ *     'dotted': true;
+ *   }
+ * }
+ * ```
+ */
+export interface TreeListVariantMap {
+  lineGuides: true;
+  noGuides: true;
+}
+
 export {TreeList} from './TreeList';
 export type {TreeListProps, TreeListDensity, TreeListVariant} from './TreeList';
-export type {TreeListItemData, TreeListVariantMap} from './TreeListTypes';
+export type {TreeListItemData} from './TreeListTypes';

package/src/Typeahead/BaseTypeahead.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'BaseTypeahead',

package/src/Typeahead/BaseTypeahead.tsx

@@ -14,7 +14,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
- * - /packages/cli/templates/blocks/components/Typeahead/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 
 import React, {
@@ -157,6 +157,16 @@ export interface BaseTypeaheadProps<T extends SearchableItem> extends Omit<
    */
   inputXStyle?: StyleXStyles;
 
+  /**
+   * Tab-order override for the input element. Typeahead passes `-1` while
+   * its selected-value token is shown: the input is visually collapsed
+   * (width 0 / opacity 0) but must stay programmatically focusable for
+   * token edit/clear interactions, so removing it from the Tab order is
+   * what prevents an invisible tab stop (WCAG 2.4.3 / 2.4.7). The input
+   * remains focusable via `.focus()` regardless of this value.
+   */
+  inputTabIndex?: number;
+
   /**
    * Ref to the anchor element for dropdown positioning.
    * The dropdown will be positioned relative to this element.
@@ -316,6 +326,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   ariaDescribedBy,
   ariaLabelledBy,
   inputXStyle,
+  inputTabIndex,
   anchorRef,
   onKeyDown: externalOnKeyDown,
   debounceMs = 150,
@@ -748,6 +759,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
         aria-describedby={ariaDescribedBy}
         aria-labelledby={ariaLabelledBy}
         aria-disabled={isFocusableDisabled ? 'true' : undefined}
+        tabIndex={inputTabIndex}
         value={query}
         onChange={handleInputChange}
         onPointerDown={() => {

package/src/Typeahead/Typeahead.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Typeahead',
@@ -233,7 +233,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -277,7 +277,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description:
     'Searchable dropdown for single-item selection w/ keyboard navigation. Supports async+sync search via searchSource interface.',

package/src/Typeahead/Typeahead.test.tsx

@@ -737,6 +737,68 @@ describe('Typeahead edit mode', () => {
   });
 });
 
+describe('Typeahead collapsed input tab order', () => {
+  it('removes the invisible input from the Tab order while a token is shown', () => {
+    render(
+      <Typeahead
+        label="Fruit"
+        searchSource={fruitSource}
+        value={fruits[0]}
+        onChange={() => {}}
+      />,
+    );
+    // While the token is shown the input is collapsed (width 0 / opacity 0);
+    // it must stay programmatically focusable for token interactions but must
+    // not be an invisible Tab stop (WCAG 2.4.3 / 2.4.7).
+    expect(screen.getByRole('combobox')).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('Tab from the token skips the invisible input', async () => {
+    const user = userEvent.setup();
+    render(
+      <Typeahead
+        label="Fruit"
+        searchSource={fruitSource}
+        value={fruits[0]}
+        onChange={() => {}}
+      />,
+    );
+    // Focus the token's internal button, then Tab away — focus must not land
+    // on the visually hidden combobox input.
+    const tokenButton = screen.getByRole('button', {name: fruits[0].label});
+    tokenButton.focus();
+    await user.tab();
+    expect(screen.getByRole('combobox')).not.toHaveFocus();
+  });
+
+  it('keeps the input in the Tab order when no token is shown', () => {
+    render(
+      <Typeahead
+        label="Fruit"
+        searchSource={fruitSource}
+        value={null}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByRole('combobox')).not.toHaveAttribute('tabindex');
+  });
+
+  it('restores the input to the Tab order in edit mode', () => {
+    render(
+      <Typeahead
+        label="Fruit"
+        searchSource={fruitSource}
+        value={fruits[0]}
+        onChange={() => {}}
+      />,
+    );
+    // Entering edit mode removes the token and uncollapses the input
+    const tokenText = screen.getByText(fruits[0].label);
+    fireEvent.click(tokenText.closest('div')!);
+    expect(screen.getByRole('combobox')).not.toHaveAttribute('tabindex');
+  });
+});
+
 describe('BaseTypeahead paste behavior', () => {
   it('pasting text triggers search results like typing', async () => {
     const user = userEvent.setup();

package/src/Typeahead/Typeahead.tsx

@@ -15,7 +15,7 @@
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
  * - /apps/storybook/stories/Typeahead.stories.tsx
- * - /packages/cli/templates/blocks/components/Typeahead/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 
 import React, {
@@ -467,6 +467,12 @@ export function Typeahead<T extends SearchableItem>({
           anchorRef={wrapperRef}
           onKeyDown={handleKeyDown}
           inputXStyle={showToken ? styles.inputHidden : undefined}
+          // While the token is shown the input is collapsed (width 0 /
+          // opacity 0) — take it out of the Tab order so keyboard users
+          // don't hit an invisible stop (WCAG 2.4.3 / 2.4.7). It stays
+          // programmatically focusable: entering edit mode and clearing
+          // both refocus it after it uncollapses.
+          inputTabIndex={showToken ? -1 : undefined}
           size={size}
         />
         {hasClear && value && !isDisabled && (

package/src/Typeahead/TypeaheadItem.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'TypeaheadItem',

package/src/Typeahead/TypeaheadItem.tsx

@@ -8,7 +8,7 @@
  *
  * SYNC: When modified, update:
  * - /packages/core/src/Typeahead/index.ts
- * - /packages/cli/templates/blocks/components/Typeahead/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
  */
 
 import React, {type ReactNode} from 'react';

package/src/VStack/VStack.tsx

@@ -9,7 +9,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/Stack/Stack.doc.mjs
  * - /packages/core/src/VStack/VStack.test.tsx
- * - /packages/cli/templates/blocks/components/VStack/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/VStack/ (showcase blocks)
  */
 
 import {Stack, type StackProps} from '../Stack/Stack';

package/src/VisuallyHidden/VisuallyHidden.doc.mjs

@@ -2,7 +2,7 @@
 
 
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'VisuallyHidden',
@@ -33,7 +33,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 export const docsZh = {
   name: 'VisuallyHidden',
   displayName: 'VisuallyHidden',
@@ -61,7 +61,7 @@ export const docsZh = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   description: 'renders content in the a11y tree while hiding it visually (sr-only)',
   usage: {

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/VisuallyHidden/VisuallyHidden.doc.mjs
  * - /packages/core/src/VisuallyHidden/VisuallyHidden.test.tsx
  * - /apps/storybook/stories/VisuallyHidden.stories.tsx
- * - /packages/cli/templates/blocks/components/VisuallyHidden/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/VisuallyHidden/ (showcase blocks)
  */
 
 import {createElement, type ElementType, type ReactNode, type Ref} from 'react';

package/src/__tests__/babelPluginAddExtensions.test.ts

@@ -0,0 +1,190 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * Guards the build-time babel plugin that rewrites extensionless relative
+ * specifiers to fully-specified ESM paths in dist (issue #4569: dynamic
+ * `import()` specifiers were passed through untouched, so the published
+ * "type": "module" dist broke strict-ESM consumers like Rspack and Node).
+ *
+ * The plugin resolves specifiers against the importing file's real directory
+ * (fs.existsSync on .ts/.tsx/index siblings), so the file/directory cases run
+ * against a temp fixture tree, and one case pins the exact in-repo bug site
+ * (Text.tsx lazily importing ../Tooltip/Tooltip).
+ */
+import fs from 'node:fs';
+import os from 'node:os';
+import {createRequire} from 'node:module';
+import path from 'node:path';
+import {describe, it, expect, beforeAll, afterAll} from 'vitest';
+
+const require = createRequire(__filename);
+const babel = require('@babel/core');
+const addExtensions = require('../../babel-plugin-add-extensions.cjs');
+
+/** Transform a snippet exactly as build:esm does for `filename`. */
+function transform(
+  code: string,
+  filename: string,
+  parserOpts?: Record<string, unknown>,
+): string {
+  const result = babel.transformSync(code, {
+    filename,
+    configFile: false,
+    babelrc: false,
+    plugins: [addExtensions],
+    ...(parserOpts ? {parserOpts} : {}),
+  });
+  return result?.code ?? '';
+}
+
+const textTsx = path.resolve(__dirname, '../Text/Text.tsx');
+
+let fixtureDir: string;
+let entry: string;
+
+beforeAll(() => {
+  fixtureDir = fs.mkdtempSync(path.join(os.tmpdir(), 'add-extensions-'));
+  fs.writeFileSync(path.join(fixtureDir, 'mod.ts'), 'export const x = 1;\n');
+  fs.mkdirSync(path.join(fixtureDir, 'dir'));
+  fs.writeFileSync(
+    path.join(fixtureDir, 'dir', 'index.ts'),
+    'export const y = 2;\n',
+  );
+  // `both` exists as a file AND a directory-with-index — the file must win.
+  fs.writeFileSync(path.join(fixtureDir, 'both.ts'), 'export const b = 3;\n');
+  fs.mkdirSync(path.join(fixtureDir, 'both'));
+  fs.writeFileSync(
+    path.join(fixtureDir, 'both', 'index.ts'),
+    'export const bi = 4;\n',
+  );
+  // The importing file itself never needs to exist — the plugin only uses
+  // its dirname as the resolution base.
+  entry = path.join(fixtureDir, 'entry.ts');
+});
+
+afterAll(() => {
+  fs.rmSync(fixtureDir, {recursive: true, force: true});
+});
+
+describe('babel-plugin-add-extensions', () => {
+  describe('dynamic import()', () => {
+    it('appends .js to a dynamic import() of a relative file', () => {
+      // The exact shape of the LazyXDSTooltip sites in Text/Heading/Timestamp.
+      const code = transform(
+        "const LazyXDSTooltip = lazy(async () => import('../Tooltip/Tooltip').then(mod => ({default: mod.Tooltip})));",
+        textTsx,
+      );
+      expect(code).toMatch(/import\(['"]\.\.\/Tooltip\/Tooltip\.js['"]\)/);
+    });
+
+    it('rewrites a dynamic import() of a directory to its index.js', () => {
+      const code = transform("const p = import('./dir');", entry);
+      expect(code).toMatch(/import\(['"]\.\/dir\/index\.js['"]\)/);
+    });
+
+    it('leaves a dynamic import() that already has an extension alone', () => {
+      const code = transform("const p = import('./mod.js');", entry);
+      expect(code).toMatch(/import\(['"]\.\/mod\.js['"]\)/);
+    });
+
+    it('leaves a dynamic import() of a bare specifier alone', () => {
+      const code = transform("const p = import('react');", entry);
+      expect(code).toMatch(/import\(['"]react['"]\)/);
+    });
+
+    it('leaves a dynamic import() of a non-literal specifier alone', () => {
+      const code = transform('const p = (s) => import(s);', entry);
+      expect(code).toContain('import(s)');
+    });
+
+    it('leaves a dynamic import() of a template literal alone', () => {
+      const code = transform(
+        'const p = (n) => import(`./locales/${n}`);',
+        entry,
+      );
+      expect(code).toContain('import(`./locales/${n}`)');
+    });
+
+    it('rewrites ImportExpression nodes (Babel 8 / createImportExpressions parse)', () => {
+      const code = transform("const p = import('./mod');", entry, {
+        createImportExpressions: true,
+      });
+      expect(code).toMatch(/import\(['"]\.\/mod\.js['"]\)/);
+    });
+
+    it('prefers the file over a same-named directory index', () => {
+      const code = transform("const p = import('./both');", entry);
+      expect(code).toMatch(/import\(['"]\.\/both\.js['"]\)/);
+    });
+
+    it("rewrites a dynamic import of '.' to './index.js'", () => {
+      const code = transform("const p = import('.');", entry);
+      expect(code).toMatch(/import\(['"]\.\/index\.js['"]\)/);
+    });
+
+    it('rewrites every dynamic import in a file', () => {
+      const code = transform(
+        "const a = import('./mod');\nconst b = import('./dir');",
+        entry,
+      );
+      expect(code).toMatch(/import\(['"]\.\/mod\.js['"]\)/);
+      expect(code).toMatch(/import\(['"]\.\/dir\/index\.js['"]\)/);
+    });
+
+    it('leaves a dynamic import() of a skipped extension alone', () => {
+      const code = transform("const p = import('./data.json');", entry);
+      expect(code).toMatch(/import\(['"]\.\/data\.json['"]\)/);
+    });
+
+    it('does not touch call expressions that are not import()', () => {
+      const code = transform(
+        "myImport('./mod');\nregistry.import('./mod');",
+        entry,
+      );
+      expect(code).toContain("myImport('./mod')");
+      expect(code).toContain("registry.import('./mod')");
+    });
+  });
+
+  describe('static declarations (pre-existing behavior)', () => {
+    it('appends .js to a static import of a relative file', () => {
+      const code = transform("import {x} from './mod';", entry);
+      expect(code).toMatch(/from ['"]\.\/mod\.js['"]/);
+    });
+
+    it('rewrites a static import of a directory to its index.js', () => {
+      const code = transform("import {y} from './dir';", entry);
+      expect(code).toMatch(/from ['"]\.\/dir\/index\.js['"]/);
+    });
+
+    it('appends .js to a re-export specifier', () => {
+      const code = transform("export {x} from './mod';", entry);
+      expect(code).toMatch(/from ['"]\.\/mod\.js['"]/);
+    });
+
+    it('appends .js to an export * specifier', () => {
+      const code = transform("export * from './mod';", entry);
+      expect(code).toMatch(/from ['"]\.\/mod\.js['"]/);
+    });
+
+    it("rewrites the '.' self-reference to './index.js'", () => {
+      const code = transform("export * from '.';", entry);
+      expect(code).toMatch(/from ['"]\.\/index\.js['"]/);
+    });
+
+    it('leaves bare specifiers alone', () => {
+      const code = transform("import {lazy} from 'react';", entry);
+      expect(code).toMatch(/from ['"]react['"]/);
+    });
+
+    it('appends .js even when no source sibling exists (fallback branch)', () => {
+      const code = transform("import {z} from './does-not-exist';", entry);
+      expect(code).toMatch(/from ['"]\.\/does-not-exist\.js['"]/);
+    });
+
+    it('leaves declarations without a source untouched', () => {
+      const code = transform('export const a = 1;', entry);
+      expect(code).toContain('export const a = 1;');
+    });
+  });
+});