@webjsdev/ui 0.3.10 → 0.3.12

package/packages/registry/lib/utils.ts

@@ -5,8 +5,10 @@
  * - Concatenates truthy arguments separated by spaces.
  * - Later Tailwind utilities win when they target the same property, mimicking
  *   `tailwind-merge`'s behaviour for the cases components actually hit
- *   (background colour, text colour, padding, margin, width, height, border,
- *   rounded, opacity, display).
+ *   (background colour, image, clip, origin, blend mode, position, size,
+ *   repeat, attachment; text colour, size, alignment, wrapping, overflow;
+ *   box-shadow and text-shadow, each split into size and colour; padding,
+ *   margin, width, height, border, rounded, opacity, display).
  *
  * For projects that want the full tailwind-merge behaviour, install
  * `clsx` + `tailwind-merge` and replace this file:
@@ -52,27 +54,194 @@ const GROUPS: Array<[RegExp, string]> = [
   [/^p-/, 'p'], [/^px-/, 'px'], [/^py-/, 'py'], [/^pt-/, 'pt'], [/^pr-/, 'pr'], [/^pb-/, 'pb'], [/^pl-/, 'pl'],
   [/^m-/, 'm'], [/^mx-/, 'mx'], [/^my-/, 'my'], [/^mt-/, 'mt'], [/^mr-/, 'mr'], [/^mb-/, 'mb'], [/^ml-/, 'ml'],
   [/^w-/, 'w'], [/^h-/, 'h'], [/^size-/, 'size'],
+  // A `bg-[url(…)]` / `bg-[linear-gradient(…)]` background image is classified
+  // by its FUNCTION, since it carries no type hint to classify it by. The
+  // hinted forms are handled centrally, in `hintedGroup`.
+  [/^bg-\[(url\(|linear-gradient|radial-gradient|conic-gradient)/, 'bg-image'],
   [/^bg-(linear|gradient|conic|radial|none)/, 'bg-image'],
   [/^bg-(no-repeat|repeat|repeat-x|repeat-y|repeat-round|repeat-space)$/, 'bg-repeat'],
   [/^bg-(fixed|local|scroll)$/, 'bg-attach'],
   [/^bg-(auto|cover|contain)$/, 'bg-size'],
-  [/^bg-(bottom|center|left|right|top)$/, 'bg-position'],
+  [/^bg-size-/, 'bg-size'],
+  // Two entries rather than one alternation: the first covers the live v4
+  // compounds (`bg-top-left`), the second the bare keywords plus the v4.1
+  // deprecated reversed compounds (`bg-left-top`), which tailwind-merge still
+  // carries. An unmatched `bg-*` token falls into the colour catch-all below and
+  // evicts a real colour, so admitting a dead spelling is the safe direction.
+  [/^bg-(top|bottom)(-(left|right))?$/, 'bg-position'],
+  [/^bg-(left|right|center)(-(top|bottom))?$/, 'bg-position'],
+  [/^bg-position-/, 'bg-position'],
+  // Clip, origin, and blend mode are three more properties under the same
+  // prefix. Each sat in `bg-color` before, so `bg-clip-text` evicted a real
+  // background colour (the gradient-text idiom lost its clip silently).
+  [/^bg-clip-(border|padding|content|text)$/, 'bg-clip'],
+  [/^bg-origin-(border|padding|content)$/, 'bg-origin'],
+  [/^bg-blend-(normal|multiply|screen|overlay|darken|lighten|color-dodge|color-burn|hard-light|soft-light|difference|exclusion|hue|saturation|color|luminosity)$/, 'bg-blend'],
   [/^bg-/, 'bg-color'],
+  // text-shadow is its own property, and its size scale and its colour are two
+  // properties again. All three entries precede the text- patterns below, which
+  // is what keeps a `text-shadow-*` token out of `text-size` and `text-color`.
+  [/^text-shadow(-(2xs|xs|sm|md|lg|none))?(\/([\d.]+|\[[^\]]*\]))?$/, 'text-shadow'],
+  [/^text-shadow-(\[(inset|-|\.|\d|var\()|\(--)/, 'text-shadow'],
+  [/^text-shadow-/, 'text-shadow-color'],
   // Font size: explicit list of Tailwind size scale.
   [/^text-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)$/, 'text-size'],
-  // Text color: anything else starting with text- that isn't alignment / wrap / overflow.
-  [/^text-(?!align-|left$|right$|center$|justify$|start$|end$|wrap$|nowrap$|balance$|pretty$|clip$|ellipsis$|xs$|sm$|base$|lg$|xl$|\d?xl$)/, 'text-color'],
-  [/^border(-[trblxy])?-?\d/, 'border-w'],
+  // Alignment, wrapping, and overflow are three more properties under the same
+  // prefix. Each was previously excluded from text-color by a lookahead and then
+  // matched nothing at all, so two alignments never collapsed.
+  [/^text-(left|center|right|justify|start|end)$/, 'text-align'],
+  [/^text-(wrap|nowrap|balance|pretty)$/, 'text-wrap'],
+  [/^text-(ellipsis|clip)$/, 'text-overflow'],
+  // Text color: anything else under the prefix. The specific groups above are
+  // the whole carve-out, so no negative lookahead is needed here as well.
+  [/^text-/, 'text-color'],
+  // Border sub-properties that are neither a width nor a colour. These come
+  // FIRST so the width / colour classifier below never sees them.
+  [/^border-(collapse|separate)$/, 'border-collapse'],
+  [/^border-spacing(-[xy])?-/, 'border-spacing'],
+  [/^border-(solid|dashed|dotted|double|hidden|none)$/, 'border-style'],
+  ...borderGroups(),
   [/^rounded(-[a-z]+)?$/, 'rounded'],
   [/^rounded-/, 'rounded'],
   [/^opacity-/, 'opacity'],
   [/^font-(thin|light|normal|medium|semibold|bold|black|extralight|extrabold)$/, 'font-weight'],
-  [/^shadow(-|$)/, 'shadow'],
+  // Box-shadow SIZE and box-shadow COLOUR are two properties (`box-shadow` and
+  // `--tw-shadow-color`), so they need two groups. `shadow-none` is a size,
+  // `shadow-inherit` / `shadow-initial` are colours, and Tailwind accepts an
+  // alpha modifier on a size as well as on a colour, so `shadow-lg/25` has to
+  // stay on the size side. An unhinted arbitrary value is a SIZE when it opens
+  // with `inset`, a sign, a dot, or a digit (a shadow offset list) and also
+  // when it is a bare `var()` or the `(--x)` variable shorthand: Tailwind
+  // itself resolves an ambiguous arbitrary shadow to `box-shadow` unless the
+  // value is provably a colour, and `shadow-[var(--shadow-glow)]` is the normal
+  // way to write a design-token shadow. This is the one place the
+  // `borderGroups()` convention inverts, because a bare `border-[var(--x)]` is
+  // far more often a colour while a bare `shadow-[var(--x)]` is far more often
+  // a shadow. The size entries must precede the colour catch-all, or every
+  // size lands in the colour group and the bug inverts rather than being fixed.
+  [/^shadow(-(2xs|xs|sm|md|lg|xl|2xl|inner|none))?(\/([\d.]+|\[[^\]]*\]))?$/, 'shadow'],
+  [/^shadow-(\[(inset|-|\.|\d|var\()|\(--)/, 'shadow'],
+  // A bare name the size scale does not list reads as a colour, because
+  // `shadow-primary` is overwhelmingly more common than a `@theme`-extended
+  // `--shadow-card`. A project that adds a custom shadow NAME is the residual
+  // gap, and the docs say so rather than claiming the split is total.
+  [/^shadow-/, 'shadow-color'],
   [/^z-/, 'z'],
-  [/^flex(-|$)/, 'flex'],
-  [/^grid(-|$)/, 'grid'],
+  // A bare `flex` / `grid` is a DISPLAY value, not a member of the flex / grid
+  // sub-property groups below, so it must never dedupe against them: an element
+  // can be both a flex container and a flex child (`class="flex flex-1"`), and
+  // collapsing the two silently drops `display:flex`. It still belongs to a
+  // group of its own, alongside every other display keyword, so a repeated one
+  // collapses and `cn('hidden', open && 'flex')` resolves to one display.
+  [/^(inline-block|inline-flex|inline-grid|inline-table|inline|block|flex|grid|flow-root|contents|hidden|list-item|table-caption|table-cell|table-column-group|table-column|table-footer-group|table-header-group|table-row-group|table-row|table)$/, 'display'],
+  // Each sub-utility below gets the group of the real CSS property it sets, so
+  // none of them collapses against the display value or against each other.
+  [/^flex-(row|row-reverse|col|col-reverse)$/, 'flex-direction'],
+  [/^flex-(wrap|wrap-reverse|nowrap)$/, 'flex-wrap'],
+  [/^flex-(\d+|auto|initial|none|\[[^\]]*\])$/, 'flex'],
+  [/^grid-cols-/, 'grid-cols'],
+  [/^grid-rows-/, 'grid-rows'],
+  [/^grid-flow-/, 'grid-flow'],
 ];
 
+/**
+ * Border WIDTH and border COLOUR share the `border-` prefix but are different
+ * CSS properties, so they need different groups: `cn('border-2',
+ * 'border-primary')` must keep BOTH, while `cn('border-border',
+ * 'border-accent')` must keep only the later colour (today the winner is
+ * decided by compiled stylesheet order, which silently loses whenever the
+ * override sorts alphabetically earlier).
+ *
+ * Classification, after an optional side / axis segment: a bare or numeric
+ * value is a width (`border`, `border-2`, `border-t-4`), an arbitrary value
+ * that opens with a digit, a dot, or `length:` is a width (`border-[3px]`,
+ * `border-[length:var(--w)]`), and everything else is a colour
+ * (`border-primary`, `border-red-500/50`, `border-[#fff]`). An ambiguous
+ * `border-[var(--x)]` falls to colour, which is the far more common intent.
+ *
+ * Each side is its own group so a per-side utility only overrides its own side,
+ * and the shorthand / axis subsumption is declared in CONFLICTS below, exactly
+ * like padding and margin. The logical inline sides (`border-s-*`,
+ * `border-e-*`) get their own groups but are subsumed only by the all-sides
+ * shorthand, never by `border-x-*`: which physical side they land on depends on
+ * the writing direction, so an axis override there would be a guess.
+ */
+function borderGroups(): Array<[RegExp, string]> {
+  const width = '(\\d+(\\.\\d+)?|\\[(length:|\\d|\\.)[^\\]]*\\])';
+  const out: Array<[RegExp, string]> = [];
+  // Sides before the bare form: `border-t-primary` must match the `t` colour
+  // group, not be swallowed by the side-less `^border-` colour pattern.
+  const sides = ['x', 'y', 't', 'r', 'b', 'l', 's', 'e', ''];
+  for (const side of sides) {
+    const seg = side ? `-${side}` : '';
+    out.push([new RegExp(`^border${seg}(-${width})?$`), `border-w${seg}`]);
+  }
+  for (const side of sides) {
+    const seg = side ? `-${side}` : '';
+    out.push([new RegExp(`^border${seg}-`), `border-color${seg}`]);
+  }
+  return out;
+}
+
+/**
+ * An arbitrary value may carry a Tailwind TYPE HINT: `bg-[image:var(--g)]`,
+ * `text-[length:14px]`, `shadow-[color:red]`. The hint exists precisely because
+ * the utility prefix is ambiguous, so the PREFIX cannot decide the group and
+ * the hint must. Letting a hinted value fall into the prefix's default group
+ * evicts a class that sets an entirely different property (`shadow-[color:red]`
+ * would eat `shadow-lg`).
+ *
+ * Every `<prefix>:<hint>` pair listed here names the group it belongs to; an
+ * empty string means the hint names the prefix's OWN default property, so the
+ * GROUPS table above is already right for it and matching falls through. A pair
+ * that is NOT listed gets a group of its own, so it can only ever collide with
+ * the identical hint under the identical prefix, never with the prefix's
+ * default. That is the safe direction to fail: an extra class renders, a
+ * dropped one does not.
+ *
+ * This is central rather than per-prefix on purpose. Handling only the prefixes
+ * that came to mind is how `shadow-[color:red]` was left evicting `shadow-lg`
+ * while `bg-` and `text-` were correct.
+ *
+ * These reach the matcher at all only because `variantPrefix` splits on the
+ * last colon OUTSIDE brackets; see the comment there.
+ */
+const HINTED_GROUPS: Record<string, string> = {
+  'bg:color': '',
+  'bg:image': 'bg-image',
+  'bg:position': 'bg-position',
+  'bg:size': 'bg-size',
+  'bg:length': 'bg-size',
+  'text:color': '',
+  'text:length': 'text-size',
+  // Both shadow prefixes carry a colour that is a DIFFERENT property from the
+  // prefix's own default (the size), so the hint has a named group to point at
+  // and must, or `shadow-[color:red]` keeps an isolated bucket and stops
+  // deduping against `shadow-red-500`, which sets the identical property.
+  'shadow:color': 'shadow-color',
+  'text-shadow:color': 'text-shadow-color',
+};
+
+/**
+ * The group for a hinted arbitrary value, `null` when the normal GROUPS table
+ * should decide it, `undefined` when the token carries no hint at all.
+ */
+function hintedGroup(bare: string): string | null | undefined {
+  const m = /^([a-z][a-z-]*)-\[([a-z][a-z-]*):/.exec(bare);
+  if (!m) return undefined;
+  const prefix = m[1];
+  const hint = m[2];
+  const key = `${prefix}:${hint}`;
+  if (key in HINTED_GROUPS) return HINTED_GROUPS[key] || null;
+  // A border width or colour hint is read by `borderGroups()`'s value parser,
+  // which already classifies `border-[length:2px]` as a width and everything
+  // else after `border-` as a colour. The side list MUST match the one
+  // `borderGroups()` enumerates, logical inline sides included, or the hinted
+  // and plain spellings of one utility land in different groups.
+  if (/^border(-[xytrbles])?$/.test(prefix) && (hint === 'length' || hint === 'color')) return null;
+  return `hint:${key}`;
+}
+
 // Directional shorthand conflicts (the tailwind-merge model). A shorthand
 // utility invalidates the axis / side utilities it SUBSUMES, because Tailwind's
 // cascade makes the shorthand win: `p-0` after `px-4 py-2` drops both, but
@@ -88,6 +257,12 @@ const CONFLICTS: Record<string, string[]> = {
   mx: ['ml', 'mr'],
   my: ['mt', 'mb'],
   size: ['w', 'h'],
+  'border-w': ['border-w-x', 'border-w-y', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l', 'border-w-s', 'border-w-e'],
+  'border-w-x': ['border-w-l', 'border-w-r'],
+  'border-w-y': ['border-w-t', 'border-w-b'],
+  'border-color': ['border-color-x', 'border-color-y', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l', 'border-color-s', 'border-color-e'],
+  'border-color-x': ['border-color-l', 'border-color-r'],
+  'border-color-y': ['border-color-t', 'border-color-b'],
 };
 
 function dedupeUtilities(input: string): string {
@@ -102,9 +277,15 @@ function dedupeUtilities(input: string): string {
     // only apply WITHIN the same variant (`px-4 hover:p-0` keeps both).
     const prefix = variantPrefix(token);
     const bare = prefix ? token.slice(prefix.length) : token;
-    let gk: string | null = null;
-    for (const [re, g] of GROUPS) {
-      if (re.test(bare)) { gk = g; break; }
+    // A type-hinted arbitrary value is classified by its HINT, which overrides
+    // the prefix-keyed table below (`hintedGroup` returns null when the hint
+    // names the prefix's own default property and the table is already right).
+    const hinted = hintedGroup(bare);
+    let gk: string | null = hinted ?? null;
+    if (hinted === undefined || hinted === null) {
+      for (const [re, g] of GROUPS) {
+        if (re.test(bare)) { gk = g; break; }
+      }
     }
     if (gk) {
       // Remove earlier survivors in this group AND in every group it subsumes.
@@ -121,8 +302,21 @@ function dedupeUtilities(input: string): string {
 }
 
 function variantPrefix(token: string): string {
-  // capture leading variants like `hover:`, `dark:`, `md:`: overrides only conflict within the same variant set
-  const i = token.lastIndexOf(':');
+  // Capture leading variants like `hover:`, `dark:`, `md:`: overrides only
+  // conflict within the same variant set. The split is the last colon OUTSIDE
+  // square brackets, because an arbitrary value can contain one of its own
+  // (`border-[length:2px]`, `bg-[url(https://x/y.png)]`, `text-[color:var(--c)]`).
+  // Splitting on the last colon anywhere hands the group matcher a fragment
+  // like `2px]`, which matches nothing, so the utility silently stops
+  // deduping against its own property.
+  let depth = 0;
+  let i = -1;
+  for (let n = 0; n < token.length; n += 1) {
+    const c = token[n];
+    if (c === '[') depth += 1;
+    else if (c === ']') depth -= 1;
+    else if (c === ':' && depth === 0) i = n;
+  }
   return i === -1 ? '' : token.slice(0, i + 1);
 }
 

package/packages/registry/package.json

@@ -3,5 +3,5 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
-  "description": "Source registry for @webjsdev/ui - component sources, themes, lib. Read on demand by @webjsdev/ui-website to compose registry JSON at request time."
+  "description": "Source registry for @webjsdev/ui, holding component sources, themes, and lib. Read on demand by the website gallery to compose registry JSON at request time."
 }

package/packages/registry/registry.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.webjs.dev/schema/registry.json",
   "name": "@webjsdev/ui",
-  "homepage": "https://ui.webjs.dev",
+  "homepage": "https://webjs.dev/ui",
   "items": [
     {
       "name": "lib-utils",

package/packages/registry/themes/base-colors.js

@@ -5,7 +5,7 @@
  * preserved; only hue / chroma shift.
  *
  * Pure ESM data module: imported at request time by the website's registry
- * composer (`app/_lib/registry.server.ts`) to synthesize `theme-<color>` items
+ * composer (`website/modules/ui/queries/registry.server.ts`) to synthesize `theme-<color>` items
  * on demand. No build step, no committed output. Numbers match the values
  * shadcn emits in `apps/v4/public/r/themes/*.json`.
  */
@@ -165,7 +165,7 @@ export const BASE_OVERRIDES = {
  * the original file's formatting + comments verbatim: only the values
  * change.
  *
- * @param {string} neutralCss - verbatim contents of `themes/index.css`
+ * @param {string} neutralCss Verbatim contents of `themes/index.css`
  * @param {{ light: Record<string,string>, dark: Record<string,string> }} overrides
  */
 export function mergeThemeCss(neutralCss, overrides) {

package/src/commands/add.js

@@ -25,13 +25,13 @@ export const add = new Command()
     const config = getConfig(cwd);
     if (!config) {
       logger.error(`No ${logger.cyan('components.json')} found in ${cwd}.`);
-      logger.info(`Run ${logger.cyan('npx webjsui init')} first.`);
+      logger.info(`Run ${logger.cyan('npx @webjsdev/ui init')} first.`);
       process.exit(1);
     }
 
     if (!components || components.length === 0) {
       logger.error('No components specified.');
-      logger.info(`Try ${logger.cyan('npx webjsui add button')} or ${logger.cyan('npx webjsui list')}.`);
+      logger.info(`Try ${logger.cyan('npx @webjsdev/ui add button')} or ${logger.cyan('npx @webjsdev/ui list')}.`);
       process.exit(1);
     }
 
@@ -74,6 +74,16 @@ async function writeRegistryFile(cwd, config, item, file, opts) {
   const target = resolveTarget(cwd, config, item, file);
   ensureDir(dirname(target));
 
+  // The shared helpers are yours to edit, and since #1129 they live at the
+  // `utils` alias, which is the file `webjs create` generates and the one the
+  // docs tell you to retune. `--yes` means "do not ask me about overwrites",
+  // which is the normal non-interactive invocation, so honouring it here would
+  // replace edited source on every `add`. Only an explicit `--overwrite` may.
+  if (existsSync(target) && !opts.overwrite && helperTarget(config, item, file)) {
+    logger.info(`${relative(cwd, target)} already exists: keeping it.`);
+    return;
+  }
+
   if (existsSync(target) && !opts.overwrite && !opts.yes) {
     const r = await prompts({
       type: 'confirm',
@@ -168,6 +178,17 @@ function replaceImportSpecifier(content, spec, destAbs, target) {
 }
 
 function resolveTarget(cwd, config, item, file) {
+  // The two shared helpers are pinned to `lib/utils.ts` / `lib/dom.ts` by the
+  // registry manifest, but where they actually BELONG is wherever the project's
+  // `utils` alias points, because that is the path `rewriteUtilsImport` writes
+  // into every component's import. Honour the alias for them, ahead of the
+  // manifest target, or `add` writes a second copy at the pinned path that
+  // nothing imports while the components resolve to the aliased one.
+  // The dom helper is the utils file's SIBLING, the same relationship the
+  // rewrite assumes, so the two cannot disagree.
+  const helper = helperTarget(config, item, file);
+  if (helper) return helper;
+
   // explicit `target` wins
   if (file.target) return join(cwd, file.target);
 
@@ -188,6 +209,35 @@ function resolveTarget(cwd, config, item, file) {
   }
 }
 
+/**
+ * Absolute target for the `lib-utils` / `lib-dom` registry items, derived from
+ * the project's configured `utils` alias, or null for anything else.
+ *
+ * Kept as the single place that answers "where do the shared helpers live",
+ * so `add`'s WRITE and {@link rewriteUtilsImport}'s REWRITE read the same
+ * answer. `init` writes the same two paths (see `init.js` `writeLibUtils`).
+ *
+ * @param {{ resolvedPaths?: { utils?: string } }} config parsed components.json
+ * @param {{ name?: string }} [item] the registry item
+ * @param {{ path?: string }} [file] the file within that item
+ * @returns {string | null}
+ */
+function helperTarget(config, item, file) {
+  const utilsAbs = config?.resolvedPaths?.utils;
+  if (!utilsAbs || !item) return null;
+  // Matched per FILE, not per item. `rewriteUtilsImport` always retargets
+  // component imports to `resolvedPaths.utils`, so the ONE file those imports
+  // resolve to has to be written there or it is an orphan. Any other file a
+  // custom registry ships under the same item is not that file, so it keeps
+  // its manifest target: routing them all here would collapse them onto one
+  // path and lose every file but the last.
+  if (!file) return null;
+  const name = basename(file.path || '');
+  if (item.name === 'lib-utils' && name === 'utils.ts') return utilsAbs;
+  if (item.name === 'lib-dom' && name === 'dom.ts') return join(dirname(utilsAbs), 'dom.ts');
+  return null;
+}
+
 function relative(cwd, p) {
   return p.startsWith(cwd) ? p.slice(cwd.length + 1) : p;
 }

package/src/commands/diff.js

@@ -15,7 +15,7 @@ export const diff = new Command()
   .action(async (name, opts) => {
     const config = getConfig(opts.cwd);
     if (!config) {
-      logger.error('No components.json. Run `webjsui init` first.');
+      logger.error('No components.json. Run `npx @webjsdev/ui init` first.');
       process.exit(1);
     }
 
@@ -52,5 +52,5 @@ export const diff = new Command()
     }
 
     if (changed === 0) logger.success('All local components match the registry.');
-    else logger.info(`\n${changed} file${changed === 1 ? '' : 's'} differ. Re-add with ${logger.cyan('webjsui add <name> -o')} to overwrite.`);
+    else logger.info(`\n${changed} file${changed === 1 ? '' : 's'} differ. Re-add with ${logger.cyan('npx @webjsdev/ui add <name> -o')} to overwrite.`);
   });

package/src/commands/info.js

@@ -2,23 +2,20 @@ import { Command } from 'commander';
 import { existsSync } from 'node:fs';
 import { join } from 'node:path';
 import { getConfig } from '../utils/get-config.js';
-import { detectProject } from '../utils/detect-project.js';
 import { DEFAULT_REGISTRY_URL } from '../registry/fetcher.js';
 import { logger } from '../utils/logger.js';
 
 export const info = new Command()
   .name('info')
-  .description('Print project diagnostics (config, project type, registry)')
+  .description('Print project diagnostics (config, registry)')
   .option('-c, --cwd <cwd>', 'the working directory', process.cwd())
   .action((opts) => {
     const cwd = opts.cwd;
-    const { type } = detectProject(cwd);
     const config = getConfig(cwd);
 
-    logger.info(`${logger.bold('Project')}      ${type}`);
     logger.info(`${logger.bold('cwd')}          ${cwd}`);
     logger.info(`${logger.bold('Registry')}     ${DEFAULT_REGISTRY_URL}`);
-    logger.info(`${logger.bold('Config')}       ${config ? 'components.json ✔' : 'components.json ✖ (run `webjsui init`)'}`);
+    logger.info(`${logger.bold('Config')}       ${config ? 'components.json ✔' : 'components.json ✖ (run `npx @webjsdev/ui init`)'}`);
     if (config) {
       logger.info(`${logger.bold('Base color')}   ${config.tailwind.baseColor}`);
       logger.info(`${logger.bold('Tailwind CSS')} ${config.tailwind.css}`);