@astryxdesign/core 0.2.0-canary.fc53ff7 → 0.2.0-canary.fce8b64

package/src/TopNav/TopNavItem.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: 'TopNavItem',

package/src/TopNav/TopNavItem.tsx

@@ -13,7 +13,7 @@
  * - /packages/core/src/TopNav/TopNav.test.tsx
  * - /packages/core/src/TopNav/index.ts
  * - /apps/storybook/stories/TopNav.stories.tsx
- * - /packages/cli/templates/blocks/components/TopNav/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/TopNav/ (showcase blocks)
  */
 
 import type {ReactNode} from 'react';

package/src/TopNav/TopNavMegaMenu.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: 'TopNavMegaMenu',

package/src/TopNav/TopNavMegaMenu.tsx

@@ -20,7 +20,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TopNav/TopNav.doc.mjs
  * - /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, {
@@ -44,7 +44,7 @@ import {
 } from '../theme/tokens.stylex';
 import {usePopover} from '../Popover/usePopover';
 import {Grid} from '../Grid/Grid';
-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';
@@ -364,6 +364,7 @@ function DefaultMegaMenu({
   onOpenChange,
 }: TopNavMegaMenuProps) {
   const slot = useTopNavSlot();
+  const chevronDownIcon = useIcon('chevronDown');
   const showTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const triggerButtonRef = useRef<HTMLButtonElement | null>(null);
@@ -476,7 +477,7 @@ function DefaultMegaMenu({
             styles.chevron,
             popover.isOpen && styles.chevronOpen,
           )}>
-          {getIcon('chevronDown')}
+          {chevronDownIcon}
         </span>
       </button>
       {popover.render(
@@ -525,6 +526,7 @@ function DrawerMegaMenu({
   featured,
 }: Pick<TopNavMegaMenuProps, 'label' | 'items' | 'featured'>) {
   const [isExpanded, setIsExpanded] = useState(false);
+  const chevronDownIcon = useIcon('chevronDown');
   const menuId = `mega-menu-${label.toLowerCase().replace(/\s+/g, '-')}`;
 
   return (
@@ -545,7 +547,7 @@ function DrawerMegaMenu({
             styles.drawerChevron,
             isExpanded && styles.drawerChevronExpanded,
           )}>
-          {getIcon('chevronDown')}
+          {chevronDownIcon}
         </span>
       </button>
 

package/src/TopNav/TopNavMegaMenuFeaturedCard.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: 'TopNavMegaMenuFeaturedCard',

package/src/TopNav/TopNavMegaMenuFeaturedCard.tsx

@@ -15,7 +15,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TopNav/TopNav.doc.mjs
  * - /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, {type ReactNode} from 'react';

package/src/TopNav/TopNavMegaMenuItem.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: 'TopNavMegaMenuItem',

package/src/TopNav/TopNavMegaMenuItem.tsx

@@ -12,7 +12,7 @@
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/TopNav/TopNav.doc.mjs
  * - /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, {type ReactNode} from 'react';

package/src/TopNav/TopNavMenu.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: 'TopNavMenu',

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.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, {

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.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, {

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

package/src/__tests__/inputWidthContract.test.tsx

@@ -43,7 +43,14 @@ const inputDocsSuite = [
 describe('Input Family width Prop Contract (#4163)', () => {
   inputDocsSuite.forEach(({name, docs}) => {
     it(`documents the width prop for ${name}`, () => {
-      const propsList = (docs.props || docs.components?.[0]?.props) as {
+      // `docs` is the ComponentDoc union (single vs multi component); narrow it
+      // for structural access to either the top-level props or the first
+      // sub-component's props.
+      const doc = docs as {
+        props?: {name: string; type: string}[];
+        components?: {props?: {name: string; type: string}[]}[];
+      };
+      const propsList = (doc.props || doc.components?.[0]?.props) as {
         name: string;
         type: string;
       }[];

package/src/doc-mjs.d.ts

@@ -11,9 +11,12 @@
  */
 
 declare module '*.doc.mjs' {
-  import type {ComponentDoc, TranslationDoc} from './docs-types';
+  import type {
+    ComponentDoc,
+    ComponentTranslationDoc,
+  } from '@astryxdesign/cli/authoring';
 
   export const docs: ComponentDoc;
   export const docsZh: ComponentDoc;
-  export const docsDense: TranslationDoc;
+  export const docsDense: ComponentTranslationDoc;
 }