@astryxdesign/cli 0.1.1 → 0.1.2-canary.043f3fd

package/src/codemods/transforms/v0.1.3/migrate-layout-components-to-experimental.mjs

@@ -0,0 +1,260 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Codemod: migrate astryx.config `layout.components` to
+ * `experimental.xle.components`.
+ *
+ * The published 0.1.2 CLI read XLE app-component registration from
+ * `astryx.config.*` under `layout.components`. The next release relocates this
+ * to `experimental.xle.components`, validated by a strict schema that REJECTS
+ * unknown keys — so any consumer that still has `layout.components` would
+ * hard-error on upgrade. This codemod performs the straight relocation.
+ *
+ * The semantics are IDENTICAL between the old and new shapes; this is purely a
+ * MOVE plus a string→object normalization. No meaning is changed:
+ *
+ *   OLD `layout.components` entry forms (from the 0.1.2 shim):
+ *     - string `'X'`  → a NAMED import; the KEY is both the local name and the
+ *       export name.
+ *     - object `{ from, description?, default? }` → `default: true` means a
+ *       default import; otherwise a named import (key = export name).
+ *
+ *   NEW `experimental.xle.components` entry shape (already shipped on the
+ *   branch; unchanged here): `{ from, description?, default? }`, with the same
+ *   semantics.
+ *
+ *   So the migration is:
+ *     - string `'X'`                            → `{ from: 'X' }`
+ *     - object `{ from, description?, default? }` → carried over UNCHANGED
+ *       (from/description/default preserved, key order preserved).
+ *
+ * The transform recognizes the config default export as EITHER a bare object
+ * literal (`export default { ... }`) or a `createConfig({ ... })` call wrapping
+ * an object literal (`export default createConfig({ ... })`). Anything else is
+ * not statically analyzable and the transform THROWS with a clear
+ * migrate-manually message (the unified config-codemod contract has no
+ * structured-error return — `runConfigCodemod` surfaces a thrown `err.message`
+ * as `{file, codemod, error}`).
+ */
+
+export const meta = {
+  title: 'Migrate astryx.config layout.components to experimental.xle.components',
+  description:
+    'Relocates XLE app-component registration from the legacy ' +
+    '`layout.components` config key to `experimental.xle.components`. String ' +
+    'entries (`Name: "@/path"`) are normalized to `{ from: "@/path" }` ' +
+    '(named import, key = export name); object entries are carried over ' +
+    'unchanged (from/description/default preserved). Bails with a clear ' +
+    'migrate-manually error when the config cannot be statically analyzed or ' +
+    'when merging would be unsafe.',
+  codemodType: 'config',
+};
+
+const MANUAL =
+  'migrate layout.components to experimental.xle.components manually';
+
+/**
+ * @param {{source: string, path: string}} file
+ * @param {{jscodeshift: Function}} api
+ * @returns {string|null}
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  const defaultExports = root.find(j.ExportDefaultDeclaration);
+  if (defaultExports.size() === 0) {
+    throw new Error(
+      `could not statically analyze astryx config (no default export); ${MANUAL}`,
+    );
+  }
+
+  const declaration = defaultExports.paths()[0].node.declaration;
+
+  // Resolve the config object literal from either form:
+  //   export default { ... }
+  //   export default createConfig({ ... })
+  const configObject = resolveConfigObject(j, declaration);
+  if (!configObject) {
+    throw new Error(
+      `could not statically analyze astryx config; ${MANUAL}`,
+    );
+  }
+
+  // Locate the top-level `layout` property and its `components` value.
+  const layoutProp = findObjectProperty(j, configObject, 'layout');
+  if (!layoutProp) {
+    return null; // no layout → nothing to migrate
+  }
+  if (!j.ObjectExpression.check(layoutProp.value)) {
+    throw new Error(
+      `astryx config \`layout\` is not an object literal; ${MANUAL}`,
+    );
+  }
+
+  const componentsProp = findObjectProperty(j, layoutProp.value, 'components');
+  if (!componentsProp) {
+    return null; // no layout.components → nothing to migrate
+  }
+  if (!j.ObjectExpression.check(componentsProp.value)) {
+    throw new Error(
+      `astryx config \`layout.components\` is not an object literal; ${MANUAL}`,
+    );
+  }
+
+  // `components` was the only documented `layout` key. Anything else is
+  // unexpected and we cannot safely guess intent.
+  const otherLayoutKeys = layoutProp.value.properties.filter(
+    p => p !== componentsProp,
+  );
+  if (otherLayoutKeys.length > 0) {
+    throw new Error(
+      `astryx config \`layout\` has keys other than \`components\`; ${MANUAL}`,
+    );
+  }
+
+  // Build the migrated `components` object literal entry by entry.
+  const migratedComponents = buildMigratedComponents(j, componentsProp.value);
+
+  // Placement into `experimental.xle.components`.
+  const experimentalProp = findObjectProperty(j, configObject, 'experimental');
+  if (experimentalProp) {
+    if (!j.ObjectExpression.check(experimentalProp.value)) {
+      throw new Error(
+        `astryx config \`experimental\` is not an object literal; ${MANUAL}`,
+      );
+    }
+    const xleProp = findObjectProperty(j, experimentalProp.value, 'xle');
+    if (xleProp) {
+      // Can't safely merge into a pre-existing experimental.xle.
+      throw new Error(
+        `astryx config already defines \`experimental.xle\`; ${MANUAL}`,
+      );
+    }
+    experimentalProp.value.properties.push(
+      j.objectProperty(j.identifier('xle'), buildXleObject(j, migratedComponents)),
+    );
+  } else {
+    configObject.properties.push(
+      j.objectProperty(
+        j.identifier('experimental'),
+        j.objectExpression([
+          j.objectProperty(j.identifier('xle'), buildXleObject(j, migratedComponents)),
+        ]),
+      ),
+    );
+  }
+
+  // Remove the migrated data from `layout`. Since `components` was the only
+  // key (asserted above), remove the entire `layout` property.
+  configObject.properties = configObject.properties.filter(
+    p => p !== layoutProp,
+  );
+
+  return root.toSource();
+}
+
+/**
+ * Resolve the wrapped config object literal from a default-export declaration.
+ * Handles `{ ... }` and `createConfig({ ... })`.
+ * @returns {object|null} the ObjectExpression node, or null if not analyzable
+ */
+function resolveConfigObject(j, declaration) {
+  if (!declaration) return null;
+  if (j.ObjectExpression.check(declaration)) {
+    return declaration;
+  }
+  if (
+    j.CallExpression.check(declaration) &&
+    declaration.arguments.length >= 1 &&
+    j.ObjectExpression.check(declaration.arguments[0])
+  ) {
+    return declaration.arguments[0];
+  }
+  return null;
+}
+
+/**
+ * Find a (non-computed, non-spread) property on an object literal by key name.
+ * Supports Identifier and string-literal keys.
+ * @returns {object|undefined} the property node
+ */
+function findObjectProperty(j, objectExpression, name) {
+  return objectExpression.properties.find(prop => {
+    if (
+      !j.ObjectProperty.check(prop) &&
+      !j.Property.check(prop)
+    ) {
+      return false;
+    }
+    if (prop.computed) return false;
+    const key = prop.key;
+    if (j.Identifier.check(key)) return key.name === name;
+    if (j.StringLiteral.check(key)) return key.value === name;
+    if (j.Literal.check(key)) return key.value === name;
+    return false;
+  });
+}
+
+/**
+ * Build the migrated `components` ObjectExpression from the old one.
+ * @returns {object} ObjectExpression
+ */
+function buildMigratedComponents(j, oldComponents) {
+  const newProps = oldComponents.properties.map(prop => {
+    if (
+      (!j.ObjectProperty.check(prop) && !j.Property.check(prop)) ||
+      prop.computed
+    ) {
+      throw new Error(
+        `astryx config \`layout.components\` has a non-literal entry; ${MANUAL}`,
+      );
+    }
+
+    const value = prop.value;
+
+    // string `'X'` → `{ from: 'X' }`
+    if (j.StringLiteral.check(value) || (j.Literal.check(value) && typeof value.value === 'string')) {
+      return j.objectProperty(
+        cloneKey(j, prop.key),
+        j.objectExpression([
+          j.objectProperty(j.identifier('from'), cloneStringLiteral(j, value)),
+        ]),
+      );
+    }
+
+    // object `{ from, description?, default? }` → carried over UNCHANGED
+    if (j.ObjectExpression.check(value)) {
+      return j.objectProperty(cloneKey(j, prop.key), value);
+    }
+
+    // anything else (identifier, call, ternary, etc.) → cannot safely migrate
+    throw new Error(
+      `astryx config \`layout.components\` entry is neither a string nor an ` +
+        `object literal and cannot be safely migrated; ${MANUAL}`,
+    );
+  });
+
+  return j.objectExpression(newProps);
+}
+
+/** Build `{ components: <obj> }` for `experimental.xle`. */
+function buildXleObject(j, migratedComponents) {
+  return j.objectExpression([
+    j.objectProperty(j.identifier('components'), migratedComponents),
+  ]);
+}
+
+/** Clone a property key node so we don't reuse a node across the tree. */
+function cloneKey(j, key) {
+  if (j.Identifier.check(key)) return j.identifier(key.name);
+  if (j.StringLiteral.check(key)) return j.stringLiteral(key.value);
+  if (j.Literal.check(key)) return j.literal(key.value);
+  return key;
+}
+
+/** Build a fresh string literal preserving the original raw quoting if possible. */
+function cloneStringLiteral(j, value) {
+  if (j.StringLiteral.check(value)) return j.stringLiteral(value.value);
+  return j.literal(value.value);
+}

package/src/commands/build-theme.import-path.test.mjs

@@ -77,7 +77,7 @@ afterEach(() => {
 });
 
 describe('theme build install-instructions import path', () => {
-  it('emits ./<name> (no double slash) when out dir equals cwd', () => {
+  it('emits bare ./<name> specifiers (no double slash) when out dir equals cwd', () => {
     // Source theme lives directly in the project root, so the output dir
     // is the cwd and the relative dir is an empty string.
     const project = path.join(tmpDir, 'project');
@@ -97,7 +97,7 @@ describe('theme build install-instructions import path', () => {
     expect(result.stdout).toContain('href="./cwd-theme.css"');
   });
 
-  it('emits ./<sub>/<name> when out dir is a subdirectory of cwd', () => {
+  it('keeps the subdir in the import path for a non-src subdirectory build', () => {
     const project = path.join(tmpDir, 'project');
     const themeFile = writeTheme(path.join(project, 'themes'), 'sub-theme');
 
@@ -112,4 +112,24 @@ describe('theme build install-instructions import path', () => {
     expect(result.stdout).toContain("import './themes/sub-theme.css'");
     expect(result.stdout).toContain('href="./themes/sub-theme.css"');
   });
+
+  it('strips a leading src/ from the import path (relative to a file in src/)', () => {
+    const project = path.join(tmpDir, 'project');
+    const themeFile = writeTheme(
+      path.join(project, 'src', 'themes', 'ocean'),
+      'ocean',
+    );
+
+    const result = runCli(
+      ['theme', 'build', path.relative(project, themeFile)],
+      project,
+    );
+
+    expect(result.code).toBe(0);
+    expect(result.stdout).not.toContain('.//');
+    // The leading src/ is dropped, but themes/ocean/ is kept (people need it).
+    expect(result.stdout).toContain("from './themes/ocean/ocean'");
+    expect(result.stdout).toContain("import './themes/ocean/ocean.css'");
+    expect(result.stdout).not.toContain('./src/');
+  });
 });

package/src/commands/build-theme.mjs

@@ -17,10 +17,15 @@ import * as path from 'node:path';
 import {pathToFileURL, fileURLToPath} from 'node:url';
 import {createJiti} from 'jiti';
 import {getRunPrefix} from '../utils/package-manager.mjs';
-import {sanitizeName, PathSafetyError} from '../utils/path-safety.mjs';
+import {
+  sanitizeName,
+  PathSafetyError,
+  isNonInteractive,
+} from '../utils/path-safety.mjs';
 import {jsonOut, humanLog} from '../lib/json.mjs';
 import {cliError} from '../lib/cli-error.mjs';
 import {ERROR_CODES} from '../lib/error-codes.mjs';
+import {themeAdd, listThemes} from '../api/theme-add.mjs';
 
 // Import shared theme processing from core. `astryx theme build` MUST produce the
 // exact same CSS as the `<Theme>` runtime, so it has exactly one generation
@@ -75,6 +80,18 @@ function toIdentifier(name) {
   return name.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
 }
 
+/**
+ * Import specifier for install/scaffold instructions. Drops a leading `src/`
+ * from the cwd-relative dir (most consumers import from a file under src/) but
+ * keeps the rest of the path (e.g. `themes/gothic`). Callers note the path is
+ * relative to the consumer's file.
+ */
+function importSpecifier(relDir, base) {
+  const normalized = relDir === '.' ? '' : relDir;
+  const withinSrc = normalized.replace(/^src\/?/, '').replace(/\/+$/, '');
+  return withinSrc ? `./${withinSrc}/${base}` : `./${base}`;
+}
+
 /**
  * Convert a kebab-case component name to PascalCase.
  * e.g. 'button' → 'Button', 'progress-bar' → 'ProgressBar', 'avatar-status-dot' → 'AvatarStatusDot'
@@ -443,7 +460,7 @@ const KNOWN_COMPONENTS = {
   breadcrumbs: ['variant'],
   button: ['variant', 'size'],
   calendar: [],
-  card: [],
+  card: ['variant'],
   center: [],
   checkboxinput: [],
   collapsible: [],
@@ -737,10 +754,12 @@ export function registerTheme(program) {
       const sourceRelative = path.relative(process.cwd(), filePath);
       const buildCommand = `astryx theme build ${sourceRelative}${options.out ? ' --out ' + path.relative(process.cwd(), path.resolve(process.cwd(), options.out)) : ''}`;
 
-      // Determine output path
+      // Derive the default CSS name from the theme name so .css/.js/.d.ts
+      // share one scheme; an explicit --out still wins.
+      const baseName = themeDef.name;
       const outPath = options.out
         ? path.resolve(process.cwd(), options.out)
-        : filePath.replace(/\.(ts|tsx|js|jsx|mjs)$/, '.css');
+        : path.join(path.dirname(filePath), `${baseName}.css`);
 
       const displayTheme = resolvedTheme || themeDef;
       const tokenCount = displayTheme.tokens ? Object.keys(displayTheme.tokens).length : 0;
@@ -753,7 +772,6 @@ export function registerTheme(program) {
       // was left as orphaned half-built output. Stage-then-commit avoids
       // that.
       const outDir = path.dirname(outPath);
-      const baseName = themeDef.name;
       const jsPath = path.join(outDir, `${baseName}.js`);
       const dtsPath = path.join(outDir, `${baseName}.d.ts`);
 
@@ -834,18 +852,16 @@ export function registerTheme(program) {
         });
       }
 
-      // Print install instructions
-      const relDir = path.relative(process.cwd(), outDir);
-      // When the output dir is the cwd, relDir is empty — avoid emitting a
-      // double-slash import path like './/<name>'. Build a './<relDir>/'
-      // prefix that collapses to './' when relDir is empty.
-      const importPrefix = relDir ? `./${relDir}/` : './';
+      const relOutDir = path.relative(process.cwd(), outDir) || '.';
+      const cssBase = path.basename(outPath, '.css');
+      const jsImport = importSpecifier(relOutDir, baseName);
+      const cssImport = importSpecifier(relOutDir, cssBase) + '.css';
       const exportName = `${toIdentifier(baseName)}Theme`;
       humanLog(`
-Install in your app:
+Install in your app (paths are relative to a file in src/ — adjust if yours lives elsewhere):
 
-  import { ${exportName} } from '${importPrefix}${baseName}';
-  import '${importPrefix}${baseName}.css';
+  import { ${exportName} } from '${jsImport}';
+  import '${cssImport}';
 
   <Theme theme={${exportName}}>
     <App />
@@ -853,9 +869,9 @@ Install in your app:
 
 Or with a <link> tag:
 
-  import { ${exportName} } from '${importPrefix}${baseName}';
+  import { ${exportName} } from '${jsImport}';
 
-  <link rel="stylesheet" href="${importPrefix}${baseName}.css" />
+  <link rel="stylesheet" href="${cssImport}" />
   <Theme theme={${exportName}}>
     <App />
   </Theme>
@@ -871,4 +887,157 @@ Or with a <link> tag:
         humanLog('');
       }
     });
+
+  theme
+    .command('list')
+    .description('List themes available to add')
+    .action(async () => {
+      const json = program.opts().json || false;
+      let result;
+      try {
+        result = await themeAdd(undefined, {list: true, cwd: process.cwd()});
+      } catch (e) {
+        cliError(e.message, {suggestions: e.suggestions || [], code: e.code});
+        return;
+      }
+
+      if (json) return jsonOut(result.type, result.data);
+
+      const themes = result.data;
+      if (themes.length === 0) {
+        humanLog('\nNo themes are bundled with this CLI build.\n');
+        return;
+      }
+      humanLog('\nThemes:\n');
+      for (const t of themes) {
+        const tag = t.maintained ? ' (maintained)' : '';
+        humanLog(`  ${t.slug}${tag}`);
+        if (t.description) humanLog(`    ${t.description}`);
+      }
+      humanLog('\nUsage:');
+      humanLog('  astryx theme add <slug> [target-path]   Scaffold a theme file you own\n');
+    });
+
+  theme
+    .command('add [slug] [path]')
+    .description('Scaffold a theme into your project as editable source')
+    .option('-f, --overwrite', 'Overwrite existing files without prompting')
+    .option('--list', 'List available themes')
+    .action(async (slug, targetPath, options) => {
+      const json = program.opts().json || false;
+
+      // Only prompt with a real TTY on stdin — a piped/redirected stdin would
+      // make clack hang. Non-interactive callers fall through to the API's
+      // ERR_FILE_EXISTS guard.
+      const interactive =
+        !json && !isNonInteractive({json}) && Boolean(process.stdin.isTTY);
+      if (slug && !options.list && !options.overwrite && interactive) {
+        const collision = await detectThemeCollision(slug, targetPath);
+        if (collision) {
+          const rel = path.relative(process.cwd(), collision) || collision;
+          const p = await import('@clack/prompts');
+          const confirmed = await p.confirm({
+            message: `Overwrite existing file ${rel}?`,
+            initialValue: false,
+          });
+          if (p.isCancel(confirmed)) {
+            p.cancel('Cancelled.');
+            return;
+          }
+          if (!confirmed) {
+            humanLog('Aborted. Re-run with --overwrite to replace the file.');
+            return;
+          }
+          options.overwrite = true;
+        }
+      }
+
+      let result;
+      try {
+        result = await themeAdd(slug, {
+          list: options.list,
+          targetPath,
+          overwrite: options.overwrite,
+          cwd: process.cwd(),
+        });
+      } catch (e) {
+        cliError(e.message, {suggestions: e.suggestions || [], code: e.code});
+        return;
+      }
+
+      if (json) return jsonOut(result.type, result.data);
+
+      if (result.type === 'theme.list') {
+        const themes = result.data;
+        humanLog('\nThemes:\n');
+        for (const t of themes) {
+          const tag = t.maintained ? ' (maintained)' : '';
+          humanLog(`  ${t.slug}${tag}`);
+          if (t.description) humanLog(`    ${t.description}`);
+        }
+        humanLog('\nUsage:');
+        humanLog('  astryx theme add <slug> [target-path]   Scaffold a theme file you own\n');
+        return;
+      }
+
+      // theme.add — print where files landed + how to use the theme.
+      const {displayName, outputDir, entry, exportName, files} = result.data;
+      humanLog(`\n✓ Added ${displayName} theme to ${outputDir}/`);
+      for (const f of files) {
+        humanLog(`  ${outputDir}/${f}`);
+      }
+      const entryModule = importSpecifier(
+        outputDir,
+        entry.replace(/\.tsx?$/, ''),
+      );
+      humanLog(`
+Use it in your app (import path is relative to a file in src/ — adjust if yours lives elsewhere):
+
+  import { ${exportName} } from '${entryModule}';
+
+  <Theme theme={${exportName}}>
+    <App />
+  </Theme>
+
+This is your copy of the ${displayName} theme — edit ${entry} to make it your own.
+`);
+    });
+}
+
+/**
+ * First existing file that scaffolding <slug> into <targetPath> would clobber,
+ * or null. Used to prompt before invoking the API; the API re-validates and
+ * owns any authoritative error.
+ *
+ * @param {string} slug
+ * @param {string} [targetPath]
+ * @returns {Promise<string|null>}
+ */
+async function detectThemeCollision(slug, targetPath) {
+  let themes;
+  try {
+    themes = listThemes();
+  } catch {
+    return null;
+  }
+  const match = themes.find(t => t.slug.toLowerCase() === slug.toLowerCase());
+  if (!match) return null;
+
+  const rawTarget = targetPath || path.join('src', 'themes', match.slug);
+  let resolvedDir;
+  try {
+    // Fail soft (null) on traversal; the API surfaces the real error.
+    const {assertWithin} = await import('../utils/path-safety.mjs');
+    resolvedDir = assertWithin(rawTarget, process.cwd(), {
+      label: 'theme target path',
+    });
+  } catch {
+    return null;
+  }
+
+  for (const name of match.files) {
+    const dest = path.join(resolvedDir, name);
+    if (fs.existsSync(dest)) return dest;
+  }
+  return null;
 }

package/src/commands/component/index.mjs

@@ -24,6 +24,8 @@ import {cliError} from '../../lib/cli-error.mjs';
 import {ERROR_CODES} from '../../lib/error-codes.mjs';
 import {component as componentApi} from '../../api/component.mjs';
 import {findRelatedBlocks} from '../../api/template.mjs';
+import {Project} from '../../lib/project.mjs';
+import {warnOnIntegrationIssues} from '../../lib/integration-warnings.mjs';
 
 export function registerComponent(program) {
   program
@@ -55,6 +57,16 @@ export function registerComponent(program) {
         return;
       }
 
+      // Non-blocking nudge: if any configured integration has validation
+      // issues, print one compact line to stderr pointing at
+      // validate-integration. Best-effort; suppressed in --json mode.
+      try {
+        const project = await Project.load(process.cwd());
+        await warnOnIntegrationIssues(project.loadedIntegrations, {json});
+      } catch {
+        // Never let the nudge break the command.
+      }
+
       let result;
       try {
         result = await componentApi(name, {
@@ -82,27 +94,49 @@ export function registerComponent(program) {
 
       switch (result.type) {
         case 'component.list': {
-          // --detail brief (default for list views) — names with import paths.
+          // --detail brief (default for list views). The API now returns
+          // package-qualified entries ({name, package}); the human view omits
+          // the core package label for readability but ALWAYS shows the package
+          // for integration components (and whenever names collide).
+          const CORE_PKG = '@astryxdesign/core';
+          // Names that appear under more than one package across the whole
+          // listing — these must always be package-qualified to disambiguate.
+          const nameCounts = new Map();
+          for (const items of Object.values(result.data)) {
+            for (const item of items) {
+              const set = nameCounts.get(item.name) ?? new Set();
+              set.add(item.package);
+              nameCounts.set(item.name, set);
+            }
+          }
+          const isCollision = n => (nameCounts.get(n)?.size ?? 0) > 1;
+          const pkgSuffix = item => {
+            if (item.package !== CORE_PKG) return `  [${item.package}]`;
+            if (isCollision(item.name)) return `  [${item.package}]`;
+            return '';
+          };
+
           if (options.category) {
             const [cat, comps] = Object.entries(result.data)[0];
             humanLog(`\n${cat}:`);
-            for (const comp of comps) {
-              const importPath = resolveImportPath(coreDir, comp);
-              humanLog(`  ${comp}  ← ${importPath}`);
+            for (const item of comps) {
+              const importPath = resolveImportPath(coreDir, item.name);
+              humanLog(`  ${item.name}  ← ${importPath}${pkgSuffix(item)}`);
             }
             humanLog('');
           } else {
             humanLog('');
             for (const [key, comps] of Object.entries(result.data)) {
-              const isUngrouped = comps.length === 1 && comps[0] === key;
+              const isUngrouped = comps.length === 1 && comps[0]?.name === key;
               if (isUngrouped) {
-                const importPath = resolveImportPath(coreDir, key);
-                humanLog(`${key}  ← ${importPath}`);
+                const item = comps[0];
+                const importPath = resolveImportPath(coreDir, item.name);
+                humanLog(`${item.name}  ← ${importPath}${pkgSuffix(item)}`);
               } else {
                 humanLog(`${key} (group)`);
-                for (const comp of comps) {
-                  const importPath = resolveImportPath(coreDir, comp);
-                  humanLog(`  ${comp}  ← ${importPath}`);
+                for (const item of comps) {
+                  const importPath = resolveImportPath(coreDir, item.name);
+                  humanLog(`  ${item.name}  ← ${importPath}${pkgSuffix(item)}`);
                 }
               }
             }