fix(ui): rewrite registry '../lib/utils.ts' imports on add

Registry components import cn from '../lib/utils.ts' (matching the
registry's own layout, where components live one level beside the
utils file). When 'webjs ui add <name>' fetches a component over
HTTP and writes it to the user's components/ui/<name>.ts, the
literal '../lib/utils.ts' resolves to components/lib/utils.ts in
the user's project, which doesn't exist.

The fix introduces a small rewriteUtilsImport() helper in
packages/ui/src/commands/add.js. It uses components.json's
config.resolvedPaths.utils (already an absolute path ending in .ts,
resolved by get-config.js from the aliases.utils setting) to compute
the correct relative path from the target file's directory and
substitutes both single- and double-quoted forms of the registry
literal.

Webjs's scaffold (aliases.utils = 'lib/utils/cn') now correctly
gets '../../lib/utils/cn.ts' in fetched components. Other project
shapes (shadcn-style lib/utils, vite-style src/lib/utils) work too.

Seven new tests cover the rewrite:
  - Unit: maps to lib/utils/cn, legacy lib/utils, src/lib, double
    quotes, no-op when no import, no-op when config lacks
    resolvedPaths.utils.
  - Integration: a stubbed registry component with the literal
    '../lib/utils.ts' lands as '../../lib/utils/cn.ts' on disk.

Author: vivek7405

packages/ui/src/commands/add.js

@@ -1,6 +1,6 @@
 import { Command } from 'commander';
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
-import { dirname, join, basename } from 'node:path';
+import { dirname, join, basename, relative as relPath } from 'node:path';
 import prompts from 'prompts';
 import { execSync } from 'node:child_process';
 import { getConfig } from '../utils/get-config.js';
@@ -70,10 +70,39 @@ async function writeRegistryFile(cwd, config, item, file, opts) {
     }
   }
 
-  writeFileSync(target, file.content || '', 'utf8');
+  const content = rewriteUtilsImport(file.content || '', target, config);
+  writeFileSync(target, content, 'utf8');
   logger.success(`Wrote ${relative(cwd, target)}`);
 }
 
+/**
+ * Rewrite the registry-relative `'../lib/utils.ts'` import to the path
+ * that resolves correctly from the file's target location to the user's
+ * cn() helper.
+ *
+ * The registry source assumes its own layout (`<registry>/components/<x>.ts`
+ * imports `'../lib/utils.ts'`). When that file lands in the user's
+ * components/ui/<x>.ts, the literal `'../lib/utils.ts'` resolves to
+ * `components/lib/utils.ts`, which doesn't exist. We compute the actual
+ * relative path from the target directory to `config.resolvedPaths.utils`
+ * (an absolute path the user has already configured via components.json's
+ * aliases.utils) and substitute it in.
+ *
+ * @param {string} content raw file content from the registry
+ * @param {string} target absolute path where the file will be written
+ * @param {{ resolvedPaths: { utils: string } }} config parsed components.json
+ */
+export function rewriteUtilsImport(content, target, config) {
+  if (!content.includes('../lib/utils.ts')) return content;
+  const utilsAbs = config?.resolvedPaths?.utils;
+  if (!utilsAbs) return content;
+  let rel = relPath(dirname(target), utilsAbs).split(/[\\/]/).join('/');
+  if (!rel.startsWith('.')) rel = './' + rel;
+  return content
+    .replaceAll("'../lib/utils.ts'", `'${rel}'`)
+    .replaceAll('"../lib/utils.ts"', `"${rel}"`);
+}
+
 function resolveTarget(cwd, config, item, file) {
   // explicit `target` wins
   if (file.target) return join(cwd, file.target);

packages/ui/test/add-command.test.js

@@ -3,7 +3,7 @@ import assert from 'node:assert/strict';
 import { mkdtempSync, writeFileSync, readFileSync, existsSync, rmSync } from 'node:fs';
 import { join } from 'node:path';
 import { tmpdir } from 'node:os';
-import { add } from '../src/commands/add.js';
+import { add, rewriteUtilsImport } from '../src/commands/add.js';
 
 const origFetch = globalThis.fetch;
 
@@ -166,3 +166,112 @@ test('add: --overwrite replaces existing files without prompt', async () => {
     rmSync(d, { recursive: true });
   }
 });
+
+/* -------------------- rewriteUtilsImport (unit tests) -------------------- */
+
+test('rewriteUtilsImport: maps to lib/utils/cn alias for a Tier-1 file', () => {
+  const cwd = '/app';
+  const config = {
+    resolvedPaths: {
+      utils: '/app/lib/utils/cn.ts',
+    },
+  };
+  const target = '/app/components/ui/button.ts';
+  const content =
+    `import { cn } from '../lib/utils.ts';\nexport const buttonClass = () => cn('p-2');`;
+  const out = rewriteUtilsImport(content, target, config);
+  assert.match(out, /from '\.\.\/\.\.\/lib\/utils\/cn\.ts'/);
+  assert.doesNotMatch(out, /from '\.\.\/lib\/utils\.ts'/);
+});
+
+test('rewriteUtilsImport: handles the legacy lib/utils alias (cn at lib/utils.ts)', () => {
+  const config = { resolvedPaths: { utils: '/app/lib/utils.ts' } };
+  const out = rewriteUtilsImport(
+    `import { cn } from '../lib/utils.ts';`,
+    '/app/components/ui/button.ts',
+    config,
+  );
+  assert.match(out, /from '\.\.\/\.\.\/lib\/utils\.ts'/);
+});
+
+test('rewriteUtilsImport: handles src/lib (vite default)', () => {
+  const config = { resolvedPaths: { utils: '/app/src/lib/utils.ts' } };
+  const out = rewriteUtilsImport(
+    `import { cn } from '../lib/utils.ts';`,
+    '/app/src/components/ui/button.ts',
+    config,
+  );
+  assert.match(out, /from '\.\.\/\.\.\/lib\/utils\.ts'/);
+});
+
+test('rewriteUtilsImport: handles double-quoted form', () => {
+  const config = { resolvedPaths: { utils: '/app/lib/utils/cn.ts' } };
+  const out = rewriteUtilsImport(
+    `import { cn } from "../lib/utils.ts";`,
+    '/app/components/ui/button.ts',
+    config,
+  );
+  assert.match(out, /from "\.\.\/\.\.\/lib\/utils\/cn\.ts"/);
+});
+
+test('rewriteUtilsImport: no-op when content has no utils import', () => {
+  const config = { resolvedPaths: { utils: '/app/lib/utils/cn.ts' } };
+  const out = rewriteUtilsImport(
+    `export const x = 1;`,
+    '/app/components/ui/x.ts',
+    config,
+  );
+  assert.equal(out, 'export const x = 1;');
+});
+
+test('rewriteUtilsImport: gracefully no-ops if config lacks resolvedPaths.utils', () => {
+  const out = rewriteUtilsImport(
+    `import { cn } from '../lib/utils.ts';`,
+    '/app/components/ui/button.ts',
+    {},
+  );
+  // Returns content unchanged so we never crash; the file may still be
+  // broken, but that's a configuration error in components.json.
+  assert.match(out, /from '\.\.\/lib\/utils\.ts'/);
+});
+
+/* -------------------- integration: add rewrites the import -------------------- */
+
+test('add: rewrites a registry component\'s ../lib/utils.ts import to the user\'s aliases.utils path', async () => {
+  // Local stub of fetch that returns a button.ts whose body imports
+  // the registry-relative '../lib/utils.ts'. After `add`, the written
+  // file should reference the user's lib/utils/cn.ts instead.
+  const origFetchLocal = globalThis.fetch;
+  globalThis.fetch = async (url) => {
+    const name = String(url).split('/').pop().replace('.json', '');
+    if (name === 'button') {
+      return new Response(JSON.stringify({
+        name: 'button', type: 'registry:ui',
+        files: [{
+          path: 'components/button.ts',
+          type: 'registry:ui',
+          content: `import { cn } from '../lib/utils.ts';\nexport const buttonClass = () => cn('p-2');\n`,
+        }],
+      }), { status: 200 });
+    }
+    return new Response('not found', { status: 404 });
+  };
+  const d = mkdtempSync(join(tmpdir(), 'webjsui-add-rewrite-'));
+  writeFileSync(join(d, 'components.json'), JSON.stringify({
+    $schema: 'https://ui.webjs.dev/schema.json',
+    style: 'default',
+    tailwind: { css: 'app/globals.css', baseColor: 'neutral', cssVariables: true },
+    aliases: { components: 'components', utils: 'lib/utils/cn', ui: 'components/ui', lib: 'lib' },
+  }));
+  try {
+    // Unique --registry URL so the in-memory fetcher cache (keyed by URL)
+    // doesn't return content from an earlier test that reused 'button'.
+    await add.parseAsync(['button', '--yes', '--no-deps', '--cwd', d, '--registry', 'http://test/rewrite'], { from: 'user' });
+    const body = readFileSync(join(d, 'components', 'ui', 'button.ts'), 'utf8');
+    assert.match(body, /from '\.\.\/\.\.\/lib\/utils\/cn\.ts'/);
+    assert.doesNotMatch(body, /from '\.\.\/lib\/utils\.ts'/);
+  } finally {
+    globalThis.fetch = origFetchLocal;
+    rmSync(d, { recursive: true });
+  }
+});