@webjsdev/ui 0.3.17 → 0.4.0

package/src/commands/list.js

@@ -1,25 +1,57 @@
 import { Command } from 'commander';
 import { getRegistryIndex, DEFAULT_REGISTRY_URL } from '../registry/fetcher.js';
+import { uiBlocks, BLOCK_DEFINITION } from '../registry/extract.js';
 import { logger } from '../utils/logger.js';
 
+const TYPES = ['ui', 'block', 'chart', 'all'];
+
+/** The three labelled groups `list` prints, in order. */
+const GROUPS = [
+  ['ui', 'Components'],
+  ['block', `Blocks (${BLOCK_DEFINITION})`],
+  ['chart', 'Charts'],
+];
+
 export const list = new Command()
   .name('list')
   .alias('search')
-  .description('List components available in the registry')
-  .argument('[filter]', 'filter by substring')
+  .description('List the components, blocks and charts in the registry')
+  .argument('[filter]', 'filter by substring of the name')
+  .option('--type <type>', `ui, block, chart or all (${TYPES.join(' | ')})`, 'all')
+  .option('--category <name>', 'only blocks and charts in this category (e.g. login, sidebar, area)')
+  .option('--json', 'print one compact JSON array of { name, type, categories, description }')
   .option('--registry <url>', 'registry base URL', DEFAULT_REGISTRY_URL)
   .action(async (filter, opts) => {
-    const items = await getRegistryIndex(opts.registry);
-    const ui = items.filter((i) => i.type === 'registry:ui');
-    const filtered = filter ? ui.filter((i) => i.name.includes(filter)) : ui;
-    if (!filtered.length) {
+    if (!TYPES.includes(opts.type)) {
+      logger.error(`Unknown --type "${opts.type}". Use one of: ${TYPES.join(', ')}.`);
+      process.exit(1);
+    }
+    const index = await getRegistryIndex(opts.registry);
+    const items = uiBlocks({ type: opts.type, category: opts.category }, index)
+      .filter((i) => !filter || i.name.includes(filter));
+
+    // The JSON form is the whole of stdout, so nothing else is printed.
+    if (opts.json) {
+      console.log(JSON.stringify(items));
+      return;
+    }
+    if (!items.length) {
       logger.info('No matches.');
       return;
     }
-    for (const i of filtered) {
-      const desc = i.description ? logger.dim(': ' + i.description) : '';
-      logger.info(`  ${logger.cyan(i.name)}${desc}`);
+    for (const [type, label] of GROUPS) {
+      const group = items.filter((i) => i.type === type);
+      if (!group.length) continue;
+      logger.info(logger.bold(`${label}:`));
+      for (const i of group) {
+        const desc = i.description ? logger.dim(': ' + i.description) : '';
+        logger.info(`  ${logger.cyan(i.name)}${desc}`);
+      }
+      logger.info('');
     }
-    logger.info('');
-    logger.info(`${filtered.length} component${filtered.length === 1 ? '' : 's'}.`);
+    const count = (type, word) => {
+      const n = items.filter((i) => i.type === type).length;
+      return n ? `${n} ${word}${n === 1 ? '' : 's'}` : null;
+    };
+    logger.info([count('ui', 'component'), count('block', 'block'), count('chart', 'chart')].filter(Boolean).join(', ') + '.');
   });

package/src/commands/view.js

@@ -1,34 +1,62 @@
 import { Command } from 'commander';
 import { getRegistryItem, DEFAULT_REGISTRY_URL, isDefaultRegistry } from '../registry/fetcher.js';
-import { uiComponent, renderComponentText } from '../registry/extract.js';
+import { uiComponent, renderComponentText, itemKind, projectBlock, renderBlockText } from '../registry/extract.js';
 import { logger } from '../utils/logger.js';
+import { getConfig } from '../utils/get-config.js';
+import { bakeForStyle } from '../registry/style-bake.js';
+
+/**
+ * The style to bake with: `--style`, else the project's components.json, else
+ * the default. Outside a project (no components.json) there is no config to
+ * read, which is not an error for `view`.
+ */
+function styleFor(opts) {
+  if (opts.style) return opts.style;
+  try { return getConfig(process.cwd())?.style; } catch { return undefined; }
+}
 
 export const view = new Command()
   .name('view')
   .description("Print a registry item's source (and the paste-ready example) to stdout")
-  .argument('<name>', 'component name')
+  .argument('<name>', 'component, block or chart name')
   .option('--registry <url>', 'registry base URL', DEFAULT_REGISTRY_URL)
   .option('--source', 'print only the raw source, not the projected view')
+  .option('--style <name>', 'the style to bake the source with (default: components.json, else new-york)')
+  .option('--json', 'a block or chart: print the projection as one JSON document')
+  .option('--files-only', 'a block or chart: print the file list and stop before the sources')
   .action(async (name, opts) => {
+    const style = styleFor(opts);
+
+    // A block or chart (D18) prints what it is, how to install it and where
+    // its files land, then the sources, all from the projector the MCP `ui`
+    // tool shares. Resolved first, since a block has no component projection.
+    const item = await getRegistryItem(name, opts.registry);
+    const kind = itemKind(item);
+    if (kind === 'block' || kind === 'chart') {
+      const block = projectBlock(item, { style, source: !opts.filesOnly });
+      console.log(opts.json ? JSON.stringify(block, null, 2) : renderBlockText(block));
+      return;
+    }
     // For a local registry:ui component, lead with the projected view (helper
     // signatures + the paste-ready @example + deps). This is the human /
     // offline path to the example that `add` strips from the copied file, and
     // it shares ONE projector with the MCP `ui` tool (`registry/extract.js`).
     // The projection reads the LOCAL packaged registry, so it only applies to
     // the default registry (a custom --registry gets the raw fetched source).
-    const projected = opts.source || !isDefaultRegistry(opts.registry) ? null : uiComponent(name);
+    const projected = opts.source || !isDefaultRegistry(opts.registry) ? null : uiComponent(name, { style });
     if (projected) {
       console.log(renderComponentText(projected));
       console.log('');
       logger.info(logger.dim('# --- full source ---'));
     }
 
-    const item = await getRegistryItem(name, opts.registry);
     logger.info(logger.dim(`# ${item.name}: ${item.type}`));
     if (item.description) logger.info(logger.dim(`# ${item.description}`));
     for (const f of item.files || []) {
       logger.info('');
       logger.info(logger.dim(`# ${f.path}`));
-      console.log(f.content || '');
+      // Baked, so the printed source is the plain Tailwind `add` would write
+      // (#1666). A custom registry's file with no cn-* name passes unchanged.
+      console.log(bakeForStyle(f.content || '', style));
     }
   });

package/src/registry/extract.js

@@ -19,6 +19,7 @@
  */
 
 import { loadRegistryItem, loadRegistryIndex, isCustomElementSource } from './local.js';
+import { bakeForStyle } from './style-bake.js';
 import { extractExample } from './example.js';
 
 /**
@@ -243,17 +244,23 @@ export function extractDocHeader(src) {
  * Project one registry component into the agent-facing shape. Returns null when
  * the name is not a `registry:ui` component.
  *
+ * The source is BAKED first (#1666): the registry is in base form, and what an
+ * agent copies from this projection must be the plain Tailwind an app gets,
+ * never a `cn-*` name. `style` is the app's `components.json` style, and an
+ * absent one means `new-york`, the kit's default look.
+ *
  * @param {string} name
+ * @param {{ style?: string }} [opts]
  * @returns {{
  *   name: string, tier: 1|2, type: string,
  *   description: string, helpers: string[], example: string,
  *   dependencies: string[], registryDependencies: string[],
  * } | null}
  */
-export function uiComponent(name) {
+export function uiComponent(name, opts = {}) {
   const item = loadRegistryItem(name);
   if (!item || item.type !== 'registry:ui') return null;
-  const src = (item.files || []).map((f) => f.content || '').join('\n');
+  const src = (item.files || []).map((f) => bakeForStyle(f.content || '', opts.style)).join('\n');
   const tier = isCustomElementSource(src) ? 2 : 1;
   return {
     name: item.name,
@@ -267,6 +274,21 @@ export function uiComponent(name) {
   };
 }
 
+/**
+ * A component's files baked for a style, as `webjs ui view` prints them and
+ * `add` writes them (paths are the registry's). The /ui docs' Manual tab
+ * shows these, so the page and the CLI cannot disagree about the source.
+ *
+ * @param {string} name
+ * @param {{ style?: string }} [opts]
+ * @returns {Array<{ path: string, content: string }> | null}
+ */
+export function uiComponentFiles(name, opts = {}) {
+  const item = loadRegistryItem(name);
+  if (!item) return null;
+  return (item.files || []).map((f) => ({ path: f.path, content: bakeForStyle(f.content || '', opts.style) }));
+}
+
 /**
  * The kit inventory: one compact entry per `registry:ui` component (name, tier,
  * helper signatures, npm deps). The no-args payload for the MCP `ui` tool and
@@ -290,6 +312,174 @@ export function uiInventory() {
     .sort((a, b) => a.name.localeCompare(b.name));
 }
 
+/* -------------------- blocks and charts (#1666, D18) -------------------- */
+
+/**
+ * What a block is, in the one phrasing every agent-facing surface uses. A
+ * block and a chart are both `registry:block` items on the wire (shadcn
+ * parity), told apart by a chart's `chart` category.
+ */
+export const BLOCK_DEFINITION = 'a ready-made view you install and then edit';
+
+/** The category that marks a `registry:block` as a chart. */
+export const CHART_CATEGORY = 'chart';
+
+/**
+ * The agent-facing kind of a registry item: `ui` for a component, `chart` for
+ * a block carrying the `chart` category, `block` for any other block, and
+ * null for everything else (a lib, a theme).
+ *
+ * @param {{ type?: string, categories?: string[] }} item
+ * @returns {'ui' | 'block' | 'chart' | null}
+ */
+export function itemKind(item) {
+  if (!item) return null;
+  if (item.type === 'registry:ui') return 'ui';
+  if (item.type !== 'registry:block') return null;
+  return (item.categories || []).includes(CHART_CATEGORY) ? 'chart' : 'block';
+}
+
+/**
+ * The category a block is grouped under in a compact listing: its LAST, most
+ * specific category (`login` for `['authentication', 'login']`, `area` for
+ * `['chart', 'area']`), so each name appears once. A block with none is
+ * grouped under `other`. Filtering by category still matches every one.
+ *
+ * @param {{ categories?: string[] }} item
+ * @returns {string}
+ */
+export function primaryCategory(item) {
+  const cats = (item.categories || []).filter((c) => c !== CHART_CATEGORY);
+  return cats.length ? cats[cats.length - 1] : 'other';
+}
+
+/**
+ * One compact entry per block or chart (and per component when `type` asks
+ * for them): `{ name, type, categories, description }`, sorted by name. The
+ * shape `webjsui list --json` prints and the MCP `ui` tool's filtered
+ * listing returns.
+ *
+ * @param {{ type?: 'ui' | 'block' | 'chart' | 'all', category?: string }} [opts]
+ *   `type` defaults to `block` plus `chart`; `all` adds the components.
+ * @param {any[]} [index] the registry index, the packaged one by default
+ * @returns {Array<{ name: string, type: 'ui' | 'block' | 'chart', categories: string[], description: string }>}
+ */
+export function uiBlocks(opts = {}, index = loadRegistryIndex()) {
+  const want = opts.type || 'blocks';
+  const keep = (/** @type {string|null} */ kind) =>
+    kind !== null && (
+      want === 'all' ? true
+        : want === 'blocks' ? kind === 'block' || kind === 'chart'
+          : kind === want
+    );
+  return index
+    .map((i) => ({ i, kind: itemKind(i) }))
+    .filter(({ i, kind }) => keep(kind) && (!opts.category || (i.categories || []).includes(opts.category)))
+    .map(({ i, kind }) => ({
+      name: i.name,
+      type: /** @type {'ui' | 'block' | 'chart'} */ (kind),
+      categories: i.categories || [],
+      description: i.description || '',
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/**
+ * The blocks and charts as NAME LISTS grouped by {@link primaryCategory}, with
+ * no descriptions: `{ blocks: { login: [...] }, charts: { area: [...] } }`.
+ * The no-argument MCP `ui` payload carries this, so it stays cheap however
+ * many blocks the kit ships.
+ *
+ * @param {any[]} [index]
+ * @returns {{ blocks: Record<string, string[]>, charts: Record<string, string[]> }}
+ */
+export function uiBlockIndex(index = loadRegistryIndex()) {
+  /** @type {{ blocks: Record<string, string[]>, charts: Record<string, string[]> }} */
+  const out = { blocks: {}, charts: {} };
+  for (const b of uiBlocks({}, index)) {
+    const group = b.type === 'chart' ? out.charts : out.blocks;
+    (group[primaryCategory(b)] ??= []).push(b.name);
+  }
+  return out;
+}
+
+/** The command that installs a registry item, as every printed hint spells it (invariant 8). */
+export function installCommand(name) {
+  return `npx @webjsdev/ui add ${name}`;
+}
+
+/**
+ * Project one block (or chart) item into the agent-facing shape: what it is,
+ * how to install it, and the files it writes with their targets. Pure over
+ * the item, so `view` can project an item fetched from a custom registry.
+ * Returns null when the item is not a block.
+ *
+ * The sources are left out unless `source` is true, since the cheap path is
+ * to install the block and read the files on disk. When included they are
+ * BAKED (#1666), so no `cn-*` name reaches an agent, but their imports stay
+ * registry-relative: `add` is what rewrites them to the app's aliases.
+ *
+ * @param {any} item a registry item with its files
+ * @param {{ style?: string, source?: boolean }} [opts]
+ */
+export function projectBlock(item, opts = {}) {
+  const kind = itemKind(item);
+  if (kind !== 'block' && kind !== 'chart') return null;
+  return {
+    name: item.name,
+    type: kind,
+    title: item.title || item.name,
+    description: item.description || '',
+    categories: item.categories || [],
+    install: installCommand(item.name),
+    dependencies: item.dependencies || [],
+    registryDependencies: item.registryDependencies || [],
+    ...(item.cssVars ? { cssVars: item.cssVars } : {}),
+    files: (item.files || []).map((f) => ({
+      path: f.path,
+      type: f.type,
+      target: f.target || f.path,
+      ...(opts.source ? { content: bakeForStyle(f.content || '', opts.style) } : {}),
+    })),
+  };
+}
+
+/**
+ * {@link projectBlock} for a block in the packaged registry, by name. Null
+ * when the name is not a block.
+ *
+ * @param {string} name
+ * @param {{ style?: string, source?: boolean }} [opts]
+ */
+export function uiBlock(name, opts = {}) {
+  const item = loadRegistryItem(name);
+  return item ? projectBlock(item, opts) : null;
+}
+
+/**
+ * Render a block projection as human-readable text for `webjsui view`: the
+ * description, categories, dependencies, the install command and the file
+ * list with targets. The sources, when the projection carries them, follow.
+ *
+ * @param {ReturnType<typeof projectBlock>} b
+ * @returns {string}
+ */
+export function renderBlockText(b) {
+  if (!b) return '';
+  const lines = [`# ${b.name}  (${b.type})`];
+  if (b.description) lines.push('', b.description);
+  if (b.categories.length) lines.push('', `categories: ${b.categories.join(', ')}`);
+  if (b.registryDependencies.length) lines.push(`registry deps: ${b.registryDependencies.join(', ')}`);
+  if (b.dependencies.length) lines.push(`npm: ${b.dependencies.join(', ')}`);
+  lines.push('', `Install: ${b.install}`, '', 'Files:');
+  for (const f of b.files) lines.push(`  ${f.target}`);
+  for (const f of b.files) {
+    if (f.content === undefined) continue;
+    lines.push('', `# --- ${f.target} ---`, f.content.replace(/\n$/, ''));
+  }
+  return lines.join('\n');
+}
+
 /**
  * Render a component projection as human-readable text for `webjsui view`.
  * Shares the SAME {@link uiComponent} data the MCP `ui` tool returns, so the

package/src/registry/icons.js

@@ -0,0 +1,31 @@
+/**
+ * The app's icon library in a resolved install tree (#1666).
+ *
+ * Registry items depend on `lib-icons` (the Lucide file). The other four
+ * libraries export the same function names and land at the same path, so an
+ * app whose `components.json` names one of them gets that library's file in
+ * place of Lucide's, and a block's icons draw in the library the app chose.
+ *
+ * @module registry/icons
+ */
+
+import { getRegistryItem } from './fetcher.js';
+import { getIconLibrary } from '../../packages/registry/themes/preset.js';
+
+/**
+ * Replace `lib-icons` in a resolved tree with the item for `iconLibrary`.
+ * A tree without `lib-icons`, Lucide, or an unknown library name is
+ * returned as it is.
+ *
+ * @param {any[]} tree the items `resolveTree` returned
+ * @param {string | undefined} iconLibrary `components.json` `iconLibrary`
+ * @param {string} [registryUrl]
+ * @returns {Promise<any[]>}
+ */
+export async function withIconLibrary(tree, iconLibrary, registryUrl) {
+  const lib = getIconLibrary(iconLibrary || 'lucide');
+  if (!lib || lib.item === 'lib-icons') return tree;
+  if (!tree.some((it) => it.name === 'lib-icons')) return tree;
+  const chosen = await getRegistryItem(lib.item, registryUrl);
+  return tree.map((it) => (it.name === 'lib-icons' ? chosen : it));
+}

package/src/registry/local.js

@@ -32,6 +32,7 @@ import {
   BASE_OVERRIDES,
   mergeThemeCss,
 } from '../../packages/registry/themes/base-colors.js';
+import { designSystemItem, designSystemItems } from '../../packages/registry/themes/items.js';
 
 /** Absolute path to the packaged registry root (`packages/ui/packages/registry`). */
 export const REGISTRY_ROOT = resolve(
@@ -136,6 +137,14 @@ export function loadRegistryItem(name) {
     }
   }
 
+  // The accent themes and the font items, built from data (#1666).
+  const data = designSystemItem(name);
+  if (data) {
+    const composed = { $schema: SCHEMA, ...data };
+    itemCache.set(name, composed);
+    return composed;
+  }
+
   return null;
 }
 
@@ -147,10 +156,14 @@ export function loadRegistryItem(name) {
  */
 export function loadRegistryIndex() {
   if (indexCache) return indexCache;
+  // `title` and `categories` ride along so a block or chart can be listed and
+  // grouped without loading its files (D18).
   const fromManifest = readManifest().items.map((item) => ({
     name: item.name,
     type: item.type,
+    title: item.title,
     description: item.description,
+    categories: item.categories,
     dependencies: item.dependencies,
     registryDependencies: item.registryDependencies,
   }));
@@ -162,7 +175,8 @@ export function loadRegistryIndex() {
     type: 'registry:theme',
     description: BASE_DESCRIPTIONS[color],
   }));
-  indexCache = [...fromManifest, ...synthesized];
+  const data = designSystemItems().map(({ name, type, title, description }) => ({ name, type, title, description }));
+  indexCache = [...fromManifest, ...synthesized, ...data];
   return indexCache;
 }
 

package/src/registry/schema.js

@@ -62,6 +62,18 @@ const cssValueSchema = z.lazy(() =>
 export const registryItemCssSchema = z.record(z.string(), cssValueSchema);
 export const registryItemEnvVarsSchema = z.record(z.string(), z.string());
 
+/** A `registry:font` item's face (shadcn's `registryItemFontSchema`, #1666). */
+export const registryItemFontSchema = z.object({
+  family: z.string(),
+  provider: z.literal('google'),
+  import: z.string(),
+  variable: z.string(),
+  weight: z.array(z.string()).optional(),
+  subsets: z.array(z.string()).optional(),
+  selector: z.string().optional(),
+  dependency: z.string().optional(),
+});
+
 export const registryItemCommonSchema = z.object({
   $schema: z.string().optional(),
   extends: z.string().optional(),
@@ -80,6 +92,7 @@ export const registryItemCommonSchema = z.object({
   meta: z.record(z.string(), z.any()).optional(),
   docs: z.string().optional(),
   categories: z.array(z.string()).optional(),
+  font: registryItemFontSchema.optional(),
 });
 
 /** A rule's severity. Absent from `lint.rules` means `off`. */