@astryxdesign/core 0.1.9 → 0.2.0-canary.0b7a99e

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.
@@ -230,7 +240,7 @@ const styles = stylex.create({
     outline: 'none',
     backgroundColor: 'transparent',
     border: 'none',
-    textAlign: 'left',
+    textAlign: 'start',
   },
   itemHighlighted: {
     backgroundColor: colorVars['--color-overlay-hover'],
@@ -316,6 +326,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   ariaDescribedBy,
   ariaLabelledBy,
   inputXStyle,
+  inputTabIndex,
   anchorRef,
   onKeyDown: externalOnKeyDown,
   debounceMs = 150,
@@ -431,7 +442,7 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
         resultsGenRef.current = gen;
         const shown = searchResults.slice(0, maxMenuItems);
         setResults(shown);
-        setHighlightedIndex(searchResults.length > 0 ? 0 : -1);
+        setHighlightedIndex(shown.length > 0 ? 0 : -1);
         if (searchResults.length > 0 || searchQuery.length > 0) {
           showLayer();
         }
@@ -469,8 +480,9 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
         return;
       }
       resultsGenRef.current = gen;
-      setResults(bootstrapResults.slice(0, maxMenuItems));
-      setHighlightedIndex(bootstrapResults.length > 0 ? 0 : -1);
+      const shown = bootstrapResults.slice(0, maxMenuItems);
+      setResults(shown);
+      setHighlightedIndex(shown.length > 0 ? 0 : -1);
       if (bootstrapResults.length > 0) {
         showLayer();
       }
@@ -637,15 +649,19 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
       switch (e.key) {
         case 'ArrowDown':
           e.preventDefault();
-          setHighlightedIndex(prev =>
-            prev < results.length - 1 ? prev + 1 : 0,
-          );
+          if (results.length > 0) {
+            setHighlightedIndex(prev =>
+              prev < results.length - 1 ? prev + 1 : 0,
+            );
+          }
           break;
         case 'ArrowUp':
           e.preventDefault();
-          setHighlightedIndex(prev =>
-            prev > 0 ? prev - 1 : results.length - 1,
-          );
+          if (results.length > 0) {
+            setHighlightedIndex(prev =>
+              prev > 0 ? prev - 1 : results.length - 1,
+            );
+          }
           break;
         case 'Enter':
           e.preventDefault();
@@ -660,13 +676,17 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
         case 'Home':
           if (popover.isOpen) {
             e.preventDefault();
-            setHighlightedIndex(0);
+            if (results.length > 0) {
+              setHighlightedIndex(0);
+            }
           }
           break;
         case 'End':
           if (popover.isOpen) {
             e.preventDefault();
-            setHighlightedIndex(results.length - 1);
+            if (results.length > 0) {
+              setHighlightedIndex(results.length - 1);
+            }
           }
           break;
       }
@@ -694,13 +714,17 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
   // cursor walks off-screen once navigation passes the visible window. Mirrors
   // CommandPaletteItem's scrollIntoView({block: 'nearest'}) behavior.
   useEffect(() => {
-    if (!popover.isOpen || highlightedIndex < 0) {
+    if (
+      !popover.isOpen ||
+      highlightedIndex < 0 ||
+      highlightedIndex >= results.length
+    ) {
       return;
     }
     document
       .getElementById(getItemId(highlightedIndex))
       ?.scrollIntoView?.({block: 'nearest'});
-  }, [popover.isOpen, highlightedIndex, getItemId]);
+  }, [popover.isOpen, highlightedIndex, getItemId, results.length]);
 
   const selectedKey =
     value == null ? null : getKey(value.id, () => results.indexOf(value));
@@ -725,7 +749,9 @@ export const BaseTypeahead = function BaseTypeahead<T extends SearchableItem>({
         aria-expanded={popover.isOpen}
         aria-controls={listboxId}
         aria-activedescendant={
-          popover.isOpen && highlightedIndex >= 0
+          popover.isOpen &&
+          highlightedIndex >= 0 &&
+          highlightedIndex < results.length
             ? getItemId(highlightedIndex)
             : undefined
         }
@@ -733,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',
@@ -89,6 +89,13 @@ export const docs = {
       description:
         'Validation status object with type and message for error/warning/success states.',
     },
+    {
+      name: 'statusVariant',
+      type: "'attached' | 'detached'",
+      description:
+        'How the status message is placed relative to the input. attached overlaps directly below the input (bordered treatment); detached floats below as a separate element with spacing.',
+      default: "'attached'",
+    },
     {
       name: 'renderItem',
       type: '(item: T) => ReactNode',
@@ -158,6 +165,12 @@ export const docs = {
       type: '(isOpen: boolean) => void',
       description: 'Callback when the dropdown opens or closes.',
     },
+    {
+      name: 'width',
+      type: 'SizeValue',
+      description:
+        'Width of the field (number = pixels, string used as-is, e.g. "100%"). Sizes the whole field (label, control, and status) so they stay aligned.',
+    },
     {
       name: 'xstyle',
       type: 'StyleXStyles',
@@ -220,7 +233,7 @@ export const docs = {
   },
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsZh = {
   usage: {
     description:
@@ -264,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

@@ -171,6 +171,33 @@ describe('BaseTypeahead', () => {
     });
   });
 
+  describe('empty results active descendant (#4059)', () => {
+    it('does not set aria-activedescendant when search has 0 results', async () => {
+      render(
+        <BaseTypeahead
+          searchSource={fruitSource}
+          value={null}
+          onChange={() => {}}
+          debounceMs={0}
+        />,
+      );
+      const input = screen.getByRole('combobox');
+      fireEvent.change(input, {target: {value: 'zzzzz'}});
+
+      await waitFor(() => {
+        expect(input).not.toHaveAttribute('aria-activedescendant');
+      });
+
+      // Press ArrowDown — should NOT set aria-activedescendant to option-0
+      fireEvent.keyDown(input, {key: 'ArrowDown'});
+      expect(input).not.toHaveAttribute('aria-activedescendant');
+
+      // Press Home — should NOT set aria-activedescendant
+      fireEvent.keyDown(input, {key: 'Home'});
+      expect(input).not.toHaveAttribute('aria-activedescendant');
+    });
+  });
+
   it('disables input when isDisabled', () => {
     render(
       <BaseTypeahead
@@ -710,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();
@@ -948,3 +1037,26 @@ describe('Typeahead disabledMessage', () => {
     expect(input).not.toHaveAttribute('aria-disabled');
   });
 });
+
+
+describe('Typeahead statusVariant forwarding', () => {
+  it('defaults to attached (status renders with data-variant="attached")', () => {
+    const {container} = render(
+      <Typeahead label="Fruit" searchSource={fruitSource} value={null} onChange={() => {}} status={{type: 'error', message: 'Required'}} />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'attached',
+    );
+  });
+
+  it('forwards statusVariant="detached" to the underlying Field status', () => {
+    const {container} = render(
+      <Typeahead label="Fruit" searchSource={fruitSource} value={null} onChange={() => {}} status={{type: 'error', message: 'Required'}} statusVariant="detached" />,
+    );
+    expect(container.querySelector('.astryx-field-status')).toHaveAttribute(
+      'data-variant',
+      'detached',
+    );
+  });
+});

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, {
@@ -36,6 +36,7 @@ import {
   inputStatusBorderStyles,
   inputStatusHoverShadowStyles,
   inputStatusFocusWithinStyles,
+  type FieldStatusVariant,
 } from '../Field';
 import {Token} from '../Token';
 import {useTooltip} from '../Tooltip';
@@ -75,6 +76,13 @@ export interface TypeaheadProps<T extends SearchableItem> extends Omit<
   isOptional?: boolean;
   /** Validation status. */
   status?: InputStatus;
+  /**
+   * How the status message is placed relative to the input.
+   * - 'attached': message overlaps directly below the input (bordered treatment)
+   * - 'detached': message floats below as a separate element with spacing
+   * @default 'attached'
+   */
+  statusVariant?: FieldStatusVariant;
   /**
    * Icon to display at the start of the input.
    * Accepts a ReactNode (e.g. `<Icon icon={SearchIcon} />`) or an SVG icon component directly.
@@ -226,6 +234,7 @@ export function Typeahead<T extends SearchableItem>({
   isRequired = false,
   isOptional = false,
   status,
+  statusVariant = 'attached',
   startIcon,
   labelTooltip,
   searchSource,
@@ -412,7 +421,7 @@ export function Typeahead<T extends SearchableItem>({
             styles.wrapper,
             sizeStyle,
             status && inputStatusBorderStyles[status.type],
-            status && inputStatusHoverShadowStyles[status.type],
+            status && !isDisabled && inputStatusHoverShadowStyles[status.type],
             status && inputStatusFocusWithinStyles[status.type],
             isDisabled && inputWrapperStyles.disabled,
             inputGroup && groupStyles.inGroup,
@@ -458,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 && (
@@ -500,6 +515,7 @@ export function Typeahead<T extends SearchableItem>({
             }
           : undefined
       }
+      statusVariant={statusVariant}
       labelTooltip={labelTooltip}
       width={width}
       xstyle={xstyle}

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';
@@ -132,6 +132,7 @@ export function TypeaheadItem<T extends SearchableItem>({
   icon,
   description,
   isDisabled = false,
+  xstyle,
 }: TypeaheadItemProps<T>) {
   // If item has a pre-rendered element, use it
   if (item.element) {
@@ -143,7 +144,7 @@ export function TypeaheadItem<T extends SearchableItem>({
       ref={ref}
       {...mergeProps(
         themeProps('typeahead-item'),
-        stylex.props(styles.container, isDisabled && styles.disabled),
+        stylex.props(styles.container, isDisabled && styles.disabled, xstyle),
       )}>
       {icon}
       <div {...stylex.props(styles.content)}>

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;');
+    });
+  });
+});