@webjsdev/ui 0.3.11 → 0.3.12

package/README.md

@@ -64,7 +64,9 @@ so on. Follow that block and the markup is fully accessible.
 
 Nothing to install. `@webjsdev/ui` is a hard dependency of `@webjsdev/cli`,
 so a global webjs install already includes it. Apps scaffolded with
-`webjs create` also have it pre-listed in `devDependencies`.
+`webjs create` reach it the same way. The scaffold deliberately does not pin
+it, because the kit copies source into your project rather than being
+imported at runtime, so the CLI resolves it from its own install.
 
 ```sh
 webjs ui init
@@ -105,7 +107,8 @@ configured alias). Resolves transitive deps via `registryDependencies` and
 auto-installs npm deps like `@floating-ui/dom` for popover-style components. For
 a Tier-1 class-helper component it copies the helpers plus a lean header and a
 one-line pointer, and leaves the worked structural example OUT of the file (get
-it on demand with `webjsui view <name>`). It also self-heals the theme tokens if
+it on demand with `npx @webjsdev/ui view <name>`, which is what the pointer it
+leaves behind says too). It also self-heals the theme tokens if
 they are missing.
 
 Resolution is LOCAL-FIRST: `init` / `add` / `list` / `view` read the registry

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/ui",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "type": "module",
   "description": "The AI-first component library for WebJs, a full-stack JavaScript framework built on web components with server-side rendering and no build step. Class-helper functions for visuals, custom elements only where state matters, source-copied into your repo so you own it.",
   "bin": {

package/packages/registry/README.md

@@ -10,8 +10,10 @@ fetches. There is no build step, no generated output, no `prestart` hook.
 
 The composer and the routes moved out of this package with #1099, when the
 gallery merged into the marketing site. The old `ui.webjs.dev/registry/**`
-URLs still resolve, permanently redirecting to the new ones, because
-already-published CLI versions fetch from them.
+URLs now redirect to the gallery page rather than to their new equivalents,
+so they no longer serve registry JSON. That breaks `webjsui add` on the
+published 0.3.1 through 0.3.8, which hardcode them; 0.3.9 onward resolves
+local-first and never fetches them.
 
 ## Layout
 

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:
@@ -60,12 +62,39 @@ const GROUPS: Array<[RegExp, string]> = [
   [/^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'],
+  // 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'],
@@ -76,7 +105,27 @@ const GROUPS: Array<[RegExp, string]> = [
   [/^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'],
   // 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
@@ -165,6 +214,12 @@ const HINTED_GROUPS: Record<string, string> = {
   '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',
 };
 
 /**

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/themes/base-colors.js

@@ -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);
     }
 

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

@@ -15,7 +15,7 @@ export const info = new Command()
 
     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}`);

package/src/commands/init.js

@@ -162,7 +162,7 @@ export const init = new Command()
     logger.break();
     logger.success('Done.');
     logger.info('');
-    logger.info(`Add components with:  ${logger.cyan('npx webjsui add button card dialog')}`);
+    logger.info(`Add components with:  ${logger.cyan('npx @webjsdev/ui add button card dialog')}`);
   });
 
 /**

package/src/registry/example.js

@@ -79,10 +79,13 @@ export function extractExample(src) {
 
 /**
  * The one-line pointer left in place of a stripped example. Uses the EXPLICIT
- * `npx @webjsdev/ui view` form (not the bare `webjsui` bin name, which npx would
- * resolve to an unrelated `webjsui` package when it is not a direct dep, e.g. in
- * a scaffolded app where `@webjsdev/ui` is only transitive). Works in a WebJs
- * app and a standalone project alike.
+ * `npx @webjsdev/ui view` form, not the bare `webjsui` bin name. `webjsui` is a
+ * bin declared INSIDE `@webjsdev/ui` and is not a published package name (the
+ * registry 404s on it), so `npx webjsui` resolves through a local
+ * `node_modules/.bin` link or not at all. This pointer is written into a file
+ * the user keeps, and it cannot know whether the project reading it later has
+ * the kit in its tree. The explicit form resolves either way. See invariant 8
+ * in this package's AGENTS.md for the rule every printed hint follows (#1264).
  */
 export function pointerLine(name) {
   return `Full usage example: npx @webjsdev/ui view ${name}  (or the MCP tool: ui ${name})`;

package/src/registry/fetcher.js

@@ -6,12 +6,12 @@ import { loadRegistryItem, loadRegistryIndex } from './local.js';
  * exact URL: it is the one registry whose sources ship inside the package.
  *
  * This moved from `https://ui.webjs.dev/registry` when the gallery merged into
- * the marketing site (#1099). The OLD URL still works and must keep working
- * forever, because every already-published version of this package carries it
- * and cannot be corrected: `ui.webjs.dev` now permanently redirects here, and
- * `fetch` follows redirects by default (verified against the real published
- * 0.3.1 and 0.3.8 tarballs before the move). Pointing new releases straight at
- * the destination just saves them the hop.
+ * the marketing site (#1099). That old URL no longer serves the registry: it
+ * now redirects to the gallery PAGE, so a fetch of it follows the redirect and
+ * gets HTML. Versions 0.3.1 through 0.3.8 hardcode it and hit the network, so
+ * `webjsui add` is broken on those and cannot be corrected after publish.
+ * Since 0.3.9 the kit resolves LOCAL-first, which is why the break stops
+ * there: `add` / `list` / `view` never reach the network on this URL.
  */
 export const HOSTED_REGISTRY_URL = 'https://webjs.dev/ui/registry';
 
@@ -55,7 +55,7 @@ export async function getRegistryItem(name, registryUrl) {
     const item = loadRegistryItem(name);
     if (!item) {
       throw new Error(
-        `Unknown registry item "${name}". Run \`webjsui list\` to see the available components.`,
+        `Unknown registry item "${name}". Run \`npx @webjsdev/ui list\` to see the available components.`,
       );
     }
     return item;

package/src/registry/local.js

@@ -8,7 +8,7 @@
  * item shape the hosted registry serves, so a local read and a network fetch
  * are interchangeable for every consumer.
  *
- * It is the plain-JS twin of the ui-website composer
+ * It is the plain-JS twin of the website gallery composer
  * (`website/modules/ui/queries/registry.server.ts`): both read
  * `packages/registry/registry.json` + the `components/*.ts` sources and
  * synthesize the 6 non-neutral base-colour themes from `themes/base-colors.js`.