@webjsdev/ui 0.4.0 → 0.5.0

package/README.md

@@ -138,7 +138,7 @@ are registry items too: `theme-<name>` for shadcn's 24 themes and
 
 Copies the component's `.ts` source into `components/ui/<name>.ts` (or your
 configured alias). Resolves transitive deps via `registryDependencies` and
-auto-installs npm deps like `@floating-ui/dom` for popover-style components. For
+installs any npm dependency the app's `package.json` does not already declare. 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 `npx @webjsdev/ui view <name>`, which is what the pointer it

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "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": {
@@ -26,7 +26,7 @@
     "test:e2e:a11y-tree": "node test/e2e/a11y-tree.e2e.mjs"
   },
   "dependencies": {
-    "@webjsdev/core": "^0.8.0",
+    "@webjsdev/core": "^0.9.0",
     "commander": "^14.0.0",
     "kleur": "^4.1.5",
     "prompts": "^2.4.2",

package/packages/registry/blocks/dashboard-01/components/app-sidebar.ts

@@ -53,7 +53,7 @@ const data: AppSidebarData = {
   user: {
     name: 'vivek',
     email: 'vivek@example.com',
-    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+    avatar: 'https://webjs.dev/avatars/vivek.jpg',
   },
   navMain: [
     { title: 'Dashboard', url: '#', icon: LayoutDashboardIcon },

package/packages/registry/blocks/dashboard-01/components/data-table.ts

@@ -23,7 +23,7 @@
  * in place of `dashboardData`. Until then the inline forms submit as a GET
  * back to the page.
  */
-import { WebComponent, html, prop, render, repeat } from '@webjsdev/core';
+import { WebComponent, html, prop, render, repeat, nothing } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import { badgeClass } from '../../../components/badge.ts';
 import { buttonClass } from '../../../components/button.ts';
@@ -115,7 +115,7 @@ function reviewerCell(row: DashboardRow, edit: RowEdit) {
 function row(r: DashboardRow, state: RowState) {
   const { selected, edit, hidden } = state;
   return html`
-    <tr data-slot="table-row" data-row-id=${String(r.id)} data-dragging="false" data-state=${selected ? 'selected' : null} class=${cn(tableRowClass(), 'relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80')}>
+    <tr data-slot="table-row" data-row-id=${String(r.id)} data-dragging="false" data-state=${selected ? 'selected' : nothing} class=${cn(tableRowClass(), 'relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80')}>
       <td data-slot="table-cell" class=${cell()}>
         <button type="button" draggable="true" data-drag-handle data-slot="button" data-variant="ghost" data-size="icon" class=${cn(buttonClass({ variant: 'ghost', size: 'icon' }), 'size-7 cursor-grab text-muted-foreground hover:bg-transparent')}>
           ${GripVerticalIcon('size-3 text-muted-foreground')}
@@ -124,7 +124,14 @@ function row(r: DashboardRow, state: RowState) {
       </td>
       <td data-slot="table-cell" class=${cell()}>
         <div class="flex items-center justify-center">
-          <input type="checkbox" data-slot="checkbox" data-row-select class=${checkboxClass()} aria-label="Select row" .checked=${selected}>
+          ${state === FIRST_PAINT
+            // The first paint is part of the PAGE's template (the page never
+            // hydrates), so it states the checkbox as an attribute; a page
+            // template may not carry a `.prop` binding. The element's own
+            // repaints set the live property, which a box the user has
+            // toggled still follows.
+            ? html`<input type="checkbox" data-slot="checkbox" data-row-select class=${checkboxClass()} aria-label="Select row" ?checked=${selected}>`
+            : html`<input type="checkbox" data-slot="checkbox" data-row-select class=${checkboxClass()} aria-label="Select row" .checked=${selected}>`}
         </div>
       </td>
       <td data-slot="table-cell" class=${cell()}>

package/packages/registry/blocks/login-02/page.ts

@@ -29,7 +29,7 @@ export default function LoginPage() {
         </div>
       </div>
       <div class="relative hidden bg-muted lg:block">
-        <img src="/public/placeholder.svg" alt="" class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale">
+        <img src="/placeholder.svg" alt="" class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale">
       </div>
     </div>
   `;

package/packages/registry/blocks/login-04/components/login-form.ts

@@ -79,7 +79,7 @@ export function loginForm(opts: { class?: string } = {}) {
             </div>
           </form>
           <div class="relative hidden bg-muted md:block">
-            <img src="/public/placeholder.svg" alt="" class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale">
+            <img src="/placeholder.svg" alt="" class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale">
           </div>
         </div>
       </div>

package/packages/registry/blocks/preview/cards/no-team-members.ts

@@ -25,7 +25,7 @@ import {
 } from '../../../components/empty.ts';
 
 const MEMBERS = [
-  { src: 'https://webjs.dev/public/avatars/vivek.jpg', alt: '@vivek', fallback: 'VK' },
+  { src: 'https://webjs.dev/avatars/vivek.jpg', alt: '@vivek', fallback: 'VK' },
   { src: 'https://github.com/maxleiter.png', alt: '@maxleiter', fallback: 'LR' },
   { src: 'https://github.com/evilrabbit.png', alt: '@evilrabbit', fallback: 'ER' },
 ];

package/packages/registry/blocks/preview-02/cards/new-milestone.ts

@@ -7,7 +7,7 @@
  * The `<form>` has no `action` yet. Bind a server action from a
  * `'use server'` file (`<form action=${createGoal}>`) before you ship it.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import { buttonClass } from '../../../components/button.ts';
 import {
   cardClass,
@@ -24,7 +24,7 @@ import { cn } from '../../../lib/utils.ts';
 function field(id: string, name: string, label: string, attrs: { placeholder?: string; value?: string }) {
   return html`<div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
     <label data-slot="field-label" for=${id} class=${fieldLabelClass()}>${label}</label>
-    <input data-slot="input" id=${id} name=${name} placeholder=${attrs.placeholder ?? null} value=${attrs.value ?? null} class=${inputClass()}>
+    <input data-slot="input" id=${id} name=${name} placeholder=${attrs.placeholder ?? nothing} value=${attrs.value ?? nothing} class=${inputClass()}>
   </div>`;
 }
 

package/packages/registry/blocks/preview-02/cards/sidebar-nav.ts

@@ -11,7 +11,7 @@
  * a real route, marked `data-active="true"` and `aria-current="page"` on the
  * current one.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import type { TemplateResult } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import { cardClass } from '../../../components/card.ts';
@@ -37,7 +37,7 @@ function group(label: string, cls: string, entries: Entry[]) {
       <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
         ${entries.map(([icon, text, active]) => html`
           <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
-            <a href="#" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${active ? 'true' : 'false'} aria-current=${active ? 'page' : null} class=${sidebarMenuButtonClass()}>${icon()}${text}</a>
+            <a href="#" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${active ? 'true' : 'false'} aria-current=${active ? 'page' : nothing} class=${sidebarMenuButtonClass()}>${icon()}${text}</a>
           </li>`)}
       </ul>
     </div>

package/packages/registry/blocks/preview-02/cards/social-links.ts

@@ -7,7 +7,7 @@
  * The `<form>` has no `action` yet. Bind a server action from a
  * `'use server'` file (`<form action=${saveSocialLinks}>`) before you ship it.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import type { TemplateResult } from '@webjsdev/core';
 import { buttonClass } from '../../../components/button.ts';
 import {
@@ -41,7 +41,7 @@ export function socialLinks() {
             <div role="group" data-slot="field" data-orientation="vertical" class=${fieldClass()}>
               <label data-slot="field-label" for=${link.id} class=${fieldLabelClass()}>${link.label}</label>
               <div data-slot="input-group" role="group" class=${inputGroupClass()}>
-                <input data-slot="input-group-control" id=${link.id} name=${link.id} value=${link.value ?? null} placeholder=${link.placeholder ?? null} class=${inputGroupInputClass()}>
+                <input data-slot="input-group-control" id=${link.id} name=${link.id} value=${link.value ?? nothing} placeholder=${link.placeholder ?? nothing} class=${inputGroupInputClass()}>
                 <label data-slot="input-group-addon" data-align="inline-start" for=${link.id} class=${inputGroupAddonClass()}>${link.icon()}</label>
               </div>
             </div>

package/packages/registry/blocks/preview-03/components/chat-card.ts

@@ -10,7 +10,7 @@
  * `components/preview-03/chat-card.ts`. Ported from shadcn/ui's preview-03,
  * where each card repeats this frame inline.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import { buttonClass } from '../../../components/button.ts';
 import {
@@ -51,12 +51,12 @@ export function chatItem(opts: {
 }) {
   return html`<ui-message-scroller-item
     hidden
-    message-id=${opts.id ?? null}
+    message-id=${opts.id ?? nothing}
     ?scroll-anchor=${!!opts.anchor}
     data-chat-turn=${opts.turn}
     data-chat-kind=${opts.kind}
-    data-chat-delay=${opts.delay ?? null}
-    data-chat-name=${opts.name ?? null}
+    data-chat-delay=${opts.delay ?? nothing}
+    data-chat-name=${opts.name ?? nothing}
   >${opts.content}</ui-message-scroller-item>`;
 }
 
@@ -71,7 +71,7 @@ export function chatMessage(opts: { role: 'user' | 'assistant'; align: 'start' |
 /** A marker in the transcript, a join or leave notice or a typing line. */
 export function chatMarker(opts: { text: string; variant?: 'default' | 'separator'; status?: boolean; icon?: unknown }) {
   const variant = opts.variant ?? 'default';
-  return html`<div data-slot="marker" data-variant=${variant} role=${opts.status ? 'status' : null} class=${markerClass({ variant })}>
+  return html`<div data-slot="marker" data-variant=${variant} role=${opts.status ? 'status' : nothing} class=${markerClass({ variant })}>
     ${opts.icon ? html`<span data-slot="marker-icon" class=${markerIconClass()}>${opts.icon}</span>` : ''}
     <span data-slot="marker-content" class=${markerContentClass()}>${opts.text}</span>
   </div>`;

package/packages/registry/blocks/preview-03/components/part-reasoning.ts

@@ -6,7 +6,7 @@
  * `components/preview-03/part-reasoning.ts`. Ported from shadcn/ui's
  * preview-03.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 
 const REASONING_LEVEL_LABELS = ['Understanding', 'Analyzing', 'Prioritizing', 'Refining'] as const;
@@ -17,7 +17,7 @@ export function getReasoningLevelLabel(index: number): string {
 }
 
 export function partReasoning(opts: { text: string; label?: string; class?: string }) {
-  return html`<div data-slot="part-reasoning" data-label=${opts.label ?? null} class=${cn('w-full max-w-full min-w-0', opts.class)}>
+  return html`<div data-slot="part-reasoning" data-label=${opts.label ?? nothing} class=${cn('w-full max-w-full min-w-0', opts.class)}>
     <div class="w-full shimmer">
       <span class="whitespace-pre-wrap">${opts.text}</span>
     </div>

package/packages/registry/blocks/sidebar-01/components/app-sidebar.ts

@@ -8,7 +8,7 @@
  * The data below is sample data. Replace it with your own, point each `url`
  * at a real route, and mark the current page with `isActive`.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import {
   sidebarContentClass,
   sidebarGroupClass,
@@ -99,7 +99,7 @@ export function appSidebar() {
               <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
                 ${section.items.map((item) => html`
                   <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
-                    <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : null} class=${sidebarMenuButtonClass()}>${item.title}</a>
+                    <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : nothing} class=${sidebarMenuButtonClass()}>${item.title}</a>
                   </li>
                 `)}
               </ul>

package/packages/registry/blocks/sidebar-01/components/search-form.ts

@@ -8,7 +8,7 @@
  * file (`<form action=${search}>`). Until then a submit reloads the page with
  * `?q=` in the URL.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import { labelClass } from '../../../components/label.ts';
 import {
@@ -20,7 +20,7 @@ import { SearchIcon } from '../../../lib/icons.ts';
 
 export function searchForm(opts: { class?: string } = {}) {
   return html`
-    <form role="search" class=${opts.class ?? null}>
+    <form role="search" class=${opts.class ?? nothing}>
       <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'py-0')}>
         <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${cn(sidebarGroupContentClass(), 'relative')}>
           <label data-slot="label" for="search" class=${cn(labelClass(), 'sr-only')}>Search</label>

package/packages/registry/blocks/sidebar-02/components/app-sidebar.ts

@@ -9,7 +9,7 @@
  * The data below is sample data. Replace it with your own, point each `url`
  * at a real route, and mark the current page with `isActive`.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import { collapsibleClass, collapsibleContentClass } from '../../../components/collapsible.ts';
 import {
@@ -115,7 +115,7 @@ export function appSidebar() {
                   <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
                     ${section.items.map((item) => html`
                       <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
-                        <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : null} class=${sidebarMenuButtonClass()}>${item.title}</a>
+                        <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : nothing} class=${sidebarMenuButtonClass()}>${item.title}</a>
                       </li>
                     `)}
                   </ul>

package/packages/registry/blocks/sidebar-02/components/search-form.ts

@@ -8,7 +8,7 @@
  * file (`<form action=${search}>`). Until then a submit reloads the page with
  * `?q=` in the URL.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import { labelClass } from '../../../components/label.ts';
 import {
@@ -20,7 +20,7 @@ import { SearchIcon } from '../../../lib/icons.ts';
 
 export function searchForm(opts: { class?: string } = {}) {
   return html`
-    <form role="search" class=${opts.class ?? null}>
+    <form role="search" class=${opts.class ?? nothing}>
       <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'py-0')}>
         <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${cn(sidebarGroupContentClass(), 'relative')}>
           <label data-slot="label" for="search" class=${cn(labelClass(), 'sr-only')}>Search</label>

package/packages/registry/blocks/sidebar-03/components/app-sidebar.ts

@@ -7,7 +7,7 @@
  * The data below is sample data. Replace it with your own, point each `url`
  * at a real route, and mark the current page with `isActive`.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import {
   sidebarContentClass,
@@ -118,7 +118,7 @@ export function appSidebar() {
                   <ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${sidebarMenuSubClass()}>
                     ${section.items.map((item) => html`
                       <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
-                        <a href=${item.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : null} class=${sidebarMenuSubButtonClass()}>${item.title}</a>
+                        <a href=${item.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : nothing} class=${sidebarMenuSubButtonClass()}>${item.title}</a>
                       </li>
                     `)}
                   </ul>

package/packages/registry/blocks/sidebar-04/components/app-sidebar.ts

@@ -10,7 +10,7 @@
  * The data below is sample data. Replace it with your own, point each `url`
  * at a real route, and mark the current page with `isActive`.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import {
   sidebarContentClass,
@@ -95,7 +95,7 @@ const data: { navMain: NavSection[] } = {
 
 export function appSidebar(opts: { class?: string } = {}) {
   return html`
-    <ui-sidebar variant="floating" class=${opts.class ?? null}>
+    <ui-sidebar variant="floating" class=${opts.class ?? nothing}>
       <div data-slot="sidebar-header" data-sidebar="header" class=${sidebarHeaderClass()}>
         <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
           <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
@@ -121,7 +121,7 @@ export function appSidebar(opts: { class?: string } = {}) {
                   <ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${cn(sidebarMenuSubClass(), 'ms-0 border-s-0 px-1.5')}>
                     ${section.items.map((item) => html`
                       <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
-                        <a href=${item.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : null} class=${sidebarMenuSubButtonClass()}>${item.title}</a>
+                        <a href=${item.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : nothing} class=${sidebarMenuSubButtonClass()}>${item.title}</a>
                       </li>
                     `)}
                   </ul>

package/packages/registry/blocks/sidebar-05/components/app-sidebar.ts

@@ -9,7 +9,7 @@
  * The data below is sample data. Replace it with your own, point each `url`
  * at a real route, and mark the current page with `isActive`.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import { collapsibleClass, collapsibleContentClass } from '../../../components/collapsible.ts';
 import { searchForm } from './search-form.ts';
@@ -129,7 +129,7 @@ export function appSidebar() {
                       <ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${sidebarMenuSubClass()}>
                         ${section.items.map((item) => html`
                           <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
-                            <a href=${item.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : null} class=${sidebarMenuSubButtonClass()}>${item.title}</a>
+                            <a href=${item.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : nothing} class=${sidebarMenuSubButtonClass()}>${item.title}</a>
                           </li>
                         `)}
                       </ul>

package/packages/registry/blocks/sidebar-05/components/search-form.ts

@@ -8,7 +8,7 @@
  * file (`<form action=${search}>`). Until then a submit reloads the page with
  * `?q=` in the URL.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import { labelClass } from '../../../components/label.ts';
 import {
@@ -20,7 +20,7 @@ import { SearchIcon } from '../../../lib/icons.ts';
 
 export function searchForm(opts: { class?: string } = {}) {
   return html`
-    <form role="search" class=${opts.class ?? null}>
+    <form role="search" class=${opts.class ?? nothing}>
       <div data-slot="sidebar-group" data-sidebar="group" class=${cn(sidebarGroupClass(), 'py-0')}>
         <div data-slot="sidebar-group-content" data-sidebar="group-content" class=${cn(sidebarGroupContentClass(), 'relative')}>
           <label data-slot="label" for="search" class=${cn(labelClass(), 'sr-only')}>Search</label>

package/packages/registry/blocks/sidebar-06/components/nav-main.ts

@@ -6,7 +6,7 @@
  * Each page is a real link inside its menu item, so a click follows it. Give
  * the item for the current page `aria-current="page"` on its link.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import type { TemplateResult } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import '../../../components/dropdown-menu.ts';
@@ -42,7 +42,7 @@ export function navMain({ items }: { items: NavMainItem[] }) {
                 ? html`<ui-dropdown-menu-content class="min-w-56 rounded-lg" side="right" align="start">
                     ${item.items.map((sub) => html`
                       <ui-dropdown-menu-item>
-                        <a href=${sub.url} class="flex-1 text-inherit no-underline" aria-current=${sub.isActive ? 'page' : null}>${sub.title}</a>
+                        <a href=${sub.url} class="flex-1 text-inherit no-underline" aria-current=${sub.isActive ? 'page' : nothing}>${sub.title}</a>
                       </ui-dropdown-menu-item>
                     `)}
                   </ui-dropdown-menu-content>`

package/packages/registry/blocks/sidebar-07/components/app-sidebar.ts

@@ -30,7 +30,7 @@ const data: {
   user: {
     name: 'vivek',
     email: 'vivek@example.com',
-    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+    avatar: 'https://webjs.dev/avatars/vivek.jpg',
   },
   teams: [
     { name: 'Acme Inc', logo: GalleryVerticalEndIcon, plan: 'Enterprise' },

package/packages/registry/blocks/sidebar-08/components/app-sidebar.ts

@@ -33,7 +33,7 @@ const data: {
   user: {
     name: 'vivek',
     email: 'vivek@example.com',
-    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+    avatar: 'https://webjs.dev/avatars/vivek.jpg',
   },
   navMain: [
     {

package/packages/registry/blocks/sidebar-09/components/app-sidebar.ts

@@ -14,7 +14,7 @@
  *
  * The data below is sample data. Replace it with your own.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import type { TemplateResult } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import { labelClass } from '../../../components/label.ts';
@@ -57,7 +57,7 @@ const data: {
   user: {
     name: 'vivek',
     email: 'vivek@example.com',
-    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+    avatar: 'https://webjs.dev/avatars/vivek.jpg',
   },
   navMain: [
     { title: 'Inbox', url: '#', icon: InboxIcon, isActive: true },
@@ -166,7 +166,7 @@ export function appSidebar() {
               <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
                 ${data.navMain.map((item) => html`
                   <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
-                    <a href=${item.url} title=${item.title} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item === active ? 'true' : 'false'} aria-current=${item === active ? 'page' : null} class=${cn(sidebarMenuButtonClass(), 'px-2.5 md:px-2')}>
+                    <a href=${item.url} title=${item.title} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item === active ? 'true' : 'false'} aria-current=${item === active ? 'page' : nothing} class=${cn(sidebarMenuButtonClass(), 'px-2.5 md:px-2')}>
                       ${item.icon()}
                       <span>${item.title}</span>
                     </a>

package/packages/registry/blocks/sidebar-10/components/nav-main.ts

@@ -5,7 +5,7 @@
  * Mark the current page's link `data-active="true"` and `aria-current="page"`
  * (the `isActive` field below does it for the sample).
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import type { TemplateResult } from '@webjsdev/core';
 import {
   sidebarMenuButtonClass,
@@ -26,7 +26,7 @@ export function navMain({ items }: { items: NavMainItem[] }) {
     <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
       ${items.map((item) => html`
         <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
-          <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : null} class=${sidebarMenuButtonClass()}>
+          <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : nothing} class=${sidebarMenuButtonClass()}>
             ${item.icon()}
             <span>${item.title}</span>
           </a>

package/packages/registry/blocks/sidebar-12/components/app-sidebar.ts

@@ -27,7 +27,7 @@ const data = {
   user: {
     name: 'vivek',
     email: 'vivek@example.com',
-    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+    avatar: 'https://webjs.dev/avatars/vivek.jpg',
   },
   calendars: [
     { name: 'My Calendars', items: ['Personal', 'Work', 'Family'] },

package/packages/registry/blocks/sidebar-13/components/settings-dialog.ts

@@ -10,7 +10,7 @@
  * for its trigger. "Messages & media" is the current section. Point each
  * `href` at a real settings route and mark the current one from your router.
  */
-import { html, cspNonce } from '@webjsdev/core';
+import { html, cspNonce, nothing } from '@webjsdev/core';
 import type { TemplateResult } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import {
@@ -69,7 +69,7 @@ export function settingsDialog() {
                       const active = item.name === 'Messages & media';
                       return html`
                         <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
-                          <a href="#" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${active ? 'true' : 'false'} aria-current=${active ? 'page' : null} class=${sidebarMenuButtonClass()}>
+                          <a href="#" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${active ? 'true' : 'false'} aria-current=${active ? 'page' : nothing} class=${sidebarMenuButtonClass()}>
                             ${item.icon()}
                             <span>${item.name}</span>
                           </a>

package/packages/registry/blocks/sidebar-14/components/app-sidebar.ts

@@ -7,7 +7,7 @@
  * The data below is sample data. Replace it with your own, point each `url`
  * at a real route, and mark the current page from your router.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import {
   sidebarContentClass,
@@ -103,7 +103,7 @@ export function appSidebar(opts: { side?: 'left' | 'right' } = {}) {
                     ? html`<ul data-slot="sidebar-menu-sub" data-sidebar="menu-sub" class=${sidebarMenuSubClass()}>
                         ${item.items.map((sub) => html`
                           <li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" class=${sidebarMenuSubItemClass()}>
-                            <a href=${sub.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" data-active=${sub.isActive ? 'true' : 'false'} aria-current=${sub.isActive ? 'page' : null} class=${sidebarMenuSubButtonClass()}>${sub.title}</a>
+                            <a href=${sub.url} data-slot="sidebar-menu-sub-button" data-sidebar="menu-sub-button" data-size="md" data-active=${sub.isActive ? 'true' : 'false'} aria-current=${sub.isActive ? 'page' : nothing} class=${sidebarMenuSubButtonClass()}>${sub.title}</a>
                           </li>
                         `)}
                       </ul>`

package/packages/registry/blocks/sidebar-15/components/nav-main.ts

@@ -3,7 +3,7 @@
  * home, inbox) under the team switcher. A fragment helper. Ported from
  * shadcn/ui's sidebar-15.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import type { TemplateResult } from '@webjsdev/core';
 import {
   sidebarMenuButtonClass,
@@ -24,7 +24,7 @@ export function navMain({ items }: { items: NavMainItem[] }) {
     <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
       ${items.map((item) => html`
         <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
-          <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : null} class=${sidebarMenuButtonClass()}>
+          <a href=${item.url} data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" data-active=${item.isActive ? 'true' : 'false'} aria-current=${item.isActive ? 'page' : nothing} class=${sidebarMenuButtonClass()}>
             ${item.icon()}
             <span>${item.title}</span>
           </a>

package/packages/registry/blocks/sidebar-15/components/sidebar-right.ts

@@ -27,7 +27,7 @@ const data = {
   user: {
     name: 'vivek',
     email: 'vivek@example.com',
-    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+    avatar: 'https://webjs.dev/avatars/vivek.jpg',
   },
   calendars: [
     { name: 'My Calendars', items: ['Personal', 'Work', 'Family'] },

package/packages/registry/blocks/sidebar-16/components/app-sidebar.ts

@@ -33,7 +33,7 @@ const data: {
   user: {
     name: 'vivek',
     email: 'vivek@example.com',
-    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+    avatar: 'https://webjs.dev/avatars/vivek.jpg',
   },
   navMain: [
     {

package/packages/registry/blocks/sidebar-16/components/search-form.ts

@@ -8,7 +8,7 @@
  * file (`<form action=${search}>`). Until then a submit reloads the page with
  * `?q=` in the URL.
  */
-import { html } from '@webjsdev/core';
+import { html, nothing } from '@webjsdev/core';
 import { cn } from '../../../lib/utils.ts';
 import { labelClass } from '../../../components/label.ts';
 import { sidebarInputClass } from '../../../components/sidebar.ts';
@@ -16,7 +16,7 @@ import { SearchIcon } from '../../../lib/icons.ts';
 
 export function searchForm(opts: { class?: string } = {}) {
   return html`
-    <form role="search" class=${opts.class ?? null}>
+    <form role="search" class=${opts.class ?? nothing}>
       <div class="relative">
         <label data-slot="label" for="search" class=${cn(labelClass(), 'sr-only')}>Search</label>
         <input data-slot="sidebar-input" data-sidebar="input" id="search" name="q" placeholder="Type to search..." class=${cn(sidebarInputClass(), 'h-8 pl-7')}>

package/packages/registry/blocks/signup-02/page.ts

@@ -29,7 +29,7 @@ export default function SignupPage() {
         </div>
       </div>
       <div class="relative hidden bg-muted lg:block">
-        <img src="/public/placeholder.svg" alt="" class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale">
+        <img src="/placeholder.svg" alt="" class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale">
       </div>
     </div>
   `;

package/packages/registry/blocks/signup-04/components/signup-form.ts

@@ -88,7 +88,7 @@ export function signupForm(opts: { class?: string } = {}) {
             </div>
           </form>
           <div class="relative hidden bg-muted md:block">
-            <img src="/public/placeholder.svg" alt="" class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale">
+            <img src="/placeholder.svg" alt="" class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale">
           </div>
         </div>
       </div>

package/packages/registry/lib/dom.ts

@@ -1,8 +1,7 @@
 // Client-only DOM helpers. Kept SEPARATE from lib/utils.ts because these
-// reference `document`: any module that references a client global is treated
-// as client-effecting by the elision analyzer, so bundling this with the pure
-// `cn()` would pin every page that imports `cn` to the browser (#819). Import
-// these ONLY from components (which ship anyway), never from a page/layout.
+// reference `document`, while the pure `cn()` is imported by pages and layouts
+// too, which run only on the server (#819). Import these ONLY from components
+// (which ship to the browser), never from a page/layout.
 
 /**
  * Run `reset` just before the webjs client router snapshots the page into its

package/packages/registry/lib/utils.ts

@@ -50,10 +50,9 @@ 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.
-// 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).
+// Built on FIRST USE, not at module load, so a module that imports `cn` does no
+// work at load and a page that never merges a class never builds the table
+// (#1320).
 let _groups: Array<[RegExp, string]> | undefined;
 function GROUPS(): Array<[RegExp, string]> {
   return (_groups ??= [

package/src/commands/add.js

@@ -99,8 +99,13 @@ export const add = new Command()
       // @webjsdev/core is always a runtime dep
       if (!dependencies.includes('@webjsdev/core')) dependencies.push('@webjsdev/core');
 
-      if (dependencies.length) await installDeps(cwd, dependencies, false);
-      if (devDependencies.length) await installDeps(cwd, devDependencies, true);
+      // Install only what the app does not already declare. Most components need
+      // nothing beyond @webjsdev/core, which every WebJs app has, and re-installing
+      // it ran a full install and rewrote the app's version range on every add.
+      const missing = undeclaredDeps(cwd, dependencies);
+      const missingDev = undeclaredDeps(cwd, devDependencies);
+      if (missing.length) await installDeps(cwd, missing, false);
+      if (missingDev.length) await installDeps(cwd, missingDev, true);
     }
 
     logger.success('Done.');
@@ -471,6 +476,29 @@ function ensureDir(d) {
   if (!existsSync(d)) mkdirSync(d, { recursive: true });
 }
 
+/**
+ * The dependency specs (`name` or `name@range`) that the app's package.json does
+ * not already declare in any dependency field. A missing or unreadable
+ * package.json declares nothing, so every spec is returned.
+ * @param {string} cwd
+ * @param {string[]} specs
+ * @returns {string[]}
+ */
+export function undeclaredDeps(cwd, specs) {
+  let pkg = {};
+  try { pkg = JSON.parse(readFileSync(join(cwd, 'package.json'), 'utf8')); } catch {}
+  const declared = new Set();
+  for (const field of ['dependencies', 'devDependencies', 'peerDependencies', 'optionalDependencies']) {
+    for (const name of Object.keys(pkg?.[field] || {})) declared.add(name);
+  }
+  // A scoped name starts with @, so the version separator is the LAST @ past it.
+  const nameOf = (spec) => {
+    const at = spec.lastIndexOf('@');
+    return at > 0 ? spec.slice(0, at) : spec;
+  };
+  return specs.filter((spec) => !declared.has(nameOf(spec)));
+}
+
 async function installDeps(cwd, deps, dev) {
   const manager = detectAddCommand(cwd);
   const flag = dev ? '-D' : '';

package/src/commands/init.js

@@ -280,8 +280,8 @@ async function writeLibUtils(cwd, utilsAlias, registryUrl, overwrite) {
   }
 
   // The onBeforeCache() DOM helper lives in a SEPARATE module (#819) because
-  // it references `document`, so keeping it out of cn()'s file prevents the
-  // elision analyzer pinning every page that imports cn to the browser.
+  // it references `document`, so keeping it out of cn()'s file keeps cn()
+  // free of browser globals for the pages and layouts that import it.
   // Overlay components import it from `../lib/dom.ts`, so write it as a
   // sibling of the utils file, which lands it at lib/utils/dom.ts next to
   // cn.ts. `add` reads that same adjacency when it rewrites the import.

package/src/lint/rules/no-restyle.js

@@ -11,7 +11,7 @@
  * invented: a helper matching neither authored shape yields no value list.
  *
  * `allow` takes category names and class-group ids. The documented starting
- * configuration is `["layout", "rounded"]`, which is what lets the skill's
+ * configuration is `["layout", "rounded"]`, which is what lets the kit's
  * sanctioned one-off (`cn(buttonClass({ size: 'none' }), 'w-9 h-9
  * rounded-full')`) pass: `w-9 h-9` is layout, and `rounded-full` is the plain
  * radius group granted by name without opening the whole `shape` category.

package/src/registry/extract.js

@@ -291,9 +291,8 @@ export function uiComponentFiles(name, opts = {}) {
 
 /**
  * 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
- * the `references/ui-kit.md` skill surface, so an agent reaches for a helper
- * instead of expanding Tailwind by hand.
+ * helper signatures, npm deps). The no-args payload for the MCP `ui` tool, so
+ * an agent reaches for a helper instead of expanding Tailwind by hand.
  *
  * @returns {Array<{ name: string, tier: 1|2, helpers: string[], dependencies: string[] }>}
  */