@webjsdev/ui 0.3.11 → 0.3.13

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.13",
   "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/components/native-select.ts

@@ -9,14 +9,16 @@
  *   NativeSelect wrapper     → nativeSelectWrapperClass()
  *   NativeSelect chevron     → nativeSelectIconClass()
  *   NativeSelect option      → bare <option> (or nativeSelectOptionClass()
- *                              for explicit overrides; the installed
+ *                              for explicit overrides, since the theme
  *                              stylesheet sets Canvas / CanvasText on
  *                              every <option> automatically)
  *
- * Importing this module installs a stylesheet that forces Canvas /
- * CanvasText on every <option> inside the wrapper so the dropdown reads
- * in both light and dark themes regardless of OS preference; advanced
- * overrides use `nativeSelectOptionClass()` / `nativeSelectOptGroupClass()`.
+ * The theme stylesheet forces Canvas / CanvasText on every <option> so the
+ * dropdown reads in both light and dark themes regardless of OS preference.
+ * It arrives with the design tokens (`npx @webjsdev/ui init`, or `add`, which
+ * writes the block when it is missing), so it is in the first paint and works
+ * with JavaScript off. Advanced overrides use `nativeSelectOptionClass()` and
+ * `nativeSelectOptGroupClass()`.
  *
  * Design tokens used: --input, --background, --primary, --primary-foreground,
  * --muted-foreground, --ring, --destructive.
@@ -58,61 +60,17 @@ import { cn } from '../lib/utils.ts';
 
 export type NativeSelectSize = 'default' | 'sm';
 
-// Auto-apply Canvas/CanvasText to every <option> on the page. Without
-// this, an <option> with no explicit bg paints transparent on top of
-// the browser-popup background; in dark mode (when color-scheme: dark
-// is set on <html>) Chrome's popup is dark, the option's transparent
-// bg lets the popup colour through, and the inherited text colour
-// from the <select> matches that dark popup: the option disappears,
-// only the focused/selected one stays visible because the browser
-// overlays its own highlight on it.
+// The <option> / <optgroup> colour rule is NOT injected from here. It lives in
+// the theme stylesheet the kit installs, so it is in the first paint, works
+// with JavaScript off, and does not make this module client-effecting (a
+// module-scope call pins every page that imports it, #1320). See the
+// `select option, select optgroup` rule in the theme block.
 //
-// Original selector required the option to be inside a
-// `.group/native-select` wrapper, on the assumption every user would
-// follow the documented Usage block above. But it's easy to write a
-// bare <select class=${nativeSelectClass()}> without the wrapper
-// (legitimate when you don't need the chevron icon: the popover and
-// hover-card docs examples both do this), in which case the rule
-// never matched and the dropdown reverted to invisible-options.
-// Broadening to `select option, select optgroup` makes the fix work
-// everywhere the user has imported native-select, with no required
-// wrapper. The Canvas/CanvasText pair is a safe default: they ARE
-// the system colours the browser would have painted anyway when no
-// rule applied; we just stop relying on inheritance to pull through.
-// Selector specificity is 0,0,2 (two elements), so any user who
-// genuinely needs custom <option> colours can override with a single
-// class anywhere in their cascade (e.g. `.my-select option { ... }`
-// at 0,1,2 wins).
-//
-// `nativeSelectOptionClass()` and `nativeSelectOptGroupClass()` stay
-// exported for users who want to opt into the same colours via the
-// class helper instead of the global rule. They emit the same
-// `bg-[Canvas] text-[CanvasText]` Tailwind utilities: redundant if
-// this stylesheet is installed, but harmless and matches the broader
-// shadcn convention of "every part has a class helper".
-const STYLES = `
-select option,
-select optgroup {
-  background-color: Canvas;
-  color: CanvasText;
-}
-`;
-
-let installed = false;
-export function installNativeSelectStyles(): void {
-  if (installed || typeof document === 'undefined') return;
-  if (document.getElementById('ui-native-select-styles')) {
-    installed = true;
-    return;
-  }
-  const style = document.createElement('style');
-  style.id = 'ui-native-select-styles';
-  style.textContent = STYLES;
-  document.head.appendChild(style);
-  installed = true;
-}
-
-if (typeof document !== 'undefined') installNativeSelectStyles();
+// `nativeSelectOptionClass()` and `nativeSelectOptGroupClass()` stay exported
+// for users who want to opt into the same colours via a class helper. They
+// emit the same `bg-[Canvas] text-[CanvasText]` utilities: redundant when the
+// theme block is present, harmless, and they match the broader shadcn
+// convention that every part has a class helper.
 
 export const nativeSelectWrapperClass = (): string =>
   'group/native-select relative w-fit has-[select:disabled]:opacity-50';

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:
@@ -48,52 +50,106 @@ function walk(value: ClassValue, out: string[]): void {
 // IMPORTANT: text-size (text-sm, text-xs, text-base, text-lg, …) and
 // text-color (text-primary, text-foreground, …) are DIFFERENT properties
 // and must be in different groups. Same for bg-size vs bg-color etc.
-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-/, 'bg-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 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'],
-  [/^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
-  // 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'],
-];
+// Built on FIRST USE, not at module load. A module-scope `...borderGroups()`
+// spread is a real top-level call, so the elision analyser reads this module as
+// client-effecting and every page that reaches `cn` on a component-free path
+// ships whole instead of being elided (#1320).
+let _groups: Array<[RegExp, string]> | undefined;
+function GROUPS(): Array<[RegExp, string]> {
+  return (_groups ??= [
+    [/^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-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'],
+    // 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'],
+    // 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
+    // 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
@@ -106,9 +162,11 @@ const GROUPS: Array<[RegExp, string]> = [
  * 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-[length:var(--w)]`, and the v4 paren spelling
+ * `border-(length:--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.
+ * `border-[var(--x)]`, or its paren spelling `border-(--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
@@ -118,7 +176,7 @@ const GROUPS: Array<[RegExp, string]> = [
  * the writing direction, so an axis override there would be a guess.
  */
 function borderGroups(): Array<[RegExp, string]> {
-  const width = '(\\d+(\\.\\d+)?|\\[(length:|\\d|\\.)[^\\]]*\\])';
+  const width = '(\\d+(\\.\\d+)?|\\[(length:|\\d|\\.)[^\\]]*\\]|\\(length:[^)]*\\))';
   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.
@@ -136,7 +194,8 @@ function borderGroups(): Array<[RegExp, string]> {
 
 /**
  * An arbitrary value may carry a Tailwind TYPE HINT: `bg-[image:var(--g)]`,
- * `text-[length:14px]`, `shadow-[color:red]`. The hint exists precisely because
+ * `text-[length:14px]`, `shadow-[color:red]`, and in the v4 paren shorthand
+ * `bg-(image:--g)`, `shadow-(color:--x)`. 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]`
@@ -155,7 +214,13 @@ function borderGroups(): Array<[RegExp, string]> {
  * 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.
+ * last colon OUTSIDE brackets AND parentheses; see the comment there.
+ *
+ * Both spellings of one hint produce the identical `<prefix>:<hint>` key, so
+ * the map needs no paren-specific entries. The closing delimiter is
+ * deliberately not validated: the hint names the CSS property, and how the
+ * value terminates cannot change which property that is (the bracket branch
+ * has never validated its own close either).
  */
 const HINTED_GROUPS: Record<string, string> = {
   'bg:color': '',
@@ -165,6 +230,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',
 };
 
 /**
@@ -172,7 +243,7 @@ const HINTED_GROUPS: Record<string, string> = {
  * 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);
+  const m = /^([a-z][a-z-]*)-[\[(]([a-z][a-z-]*):/.exec(bare);
   if (!m) return undefined;
   const prefix = m[1];
   const hint = m[2];
@@ -228,7 +299,7 @@ function dedupeUtilities(input: string): string {
     const hinted = hintedGroup(bare);
     let gk: string | null = hinted ?? null;
     if (hinted === undefined || hinted === null) {
-      for (const [re, g] of GROUPS) {
+      for (const [re, g] of GROUPS()) {
         if (re.test(bare)) { gk = g; break; }
       }
     }
@@ -248,19 +319,32 @@ 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. 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)]`).
+  // conflict within the same variant set. The split is the last colon at top
+  // level, meaning outside BOTH square brackets and parentheses, because an
+  // arbitrary value can contain a colon of its own in either delimiter
+  // (`border-[length:2px]`, `bg-[url(https://x/y.png)]`, `text-[color:var(--c)]`,
+  // and the v4 paren spelling `shadow-(color:--x)`, `bg-(image:--g)`).
   // 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;
+  // like `2px]` or `--x)`, which matches nothing, so the utility silently
+  // stops deduping against its own property.
+  //
+  // TWO counters, both required to be zero, rather than one shared counter.
+  // Tailwind's own top-level splitter (`segment()`, in the upstream
+  // tailwindlabs/tailwindcss repo at packages/tailwindcss/src/utils/segment.ts,
+  // NOT a path in this repo) is a MATCHED-PAIR stack, so a
+  // stray closer never cancels a live opener of the other kind. A single
+  // shared counter would let `)` cancel `[` and read `x-[y)-z:w` as having a
+  // top-level colon, which is the fragment bug above wearing a different hat.
+  let bracketDepth = 0;
+  let parenDepth = 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;
+    if (c === '[') bracketDepth += 1;
+    else if (c === ']') bracketDepth -= 1;
+    else if (c === '(') parenDepth += 1;
+    else if (c === ')') parenDepth -= 1;
+    else if (c === ':' && bracketDepth === 0 && parenDepth === 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/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/packages/registry/themes/index.css

@@ -149,4 +149,17 @@
     outline: 2px solid color-mix(in oklab, var(--color-ring) 50%, transparent);
     outline-offset: 2px;
   }
+  /* Native <select> options paint transparent over the browser popup when no
+     rule applies, so in dark mode Chrome's dark popup plus the inherited text
+     colour makes every unselected option disappear. Canvas / CanvasText are
+     the system colours the browser would have painted anyway, so this stops
+     relying on inheritance to pull them through. Two ELEMENT selectors
+     (specificity 0,0,2) and no wrapper requirement on purpose: a bare
+     <select class=${nativeSelectClass()}> with no wrapper is legitimate, and
+     any single class overrides this. */
+  select option,
+  select optgroup {
+    background-color: Canvas;
+    color: CanvasText;
+  }
 }

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`.