@webjskit/ui 0.1.0 → 0.2.0

package/README.md

@@ -20,9 +20,9 @@ function calls, not for a layered React abstraction over every primitive:
   `<ui-sonner>`, …). Reserved for the behavior the browser still doesn't
   give you for free: hover-with-delay tooltips, roving-focus keyboard nav
   for menus and tabs, toast queue with stack and dismiss. Dialog and
-  alert-dialog use a thin custom element on top of the native
-  `<dialog>.showModal()`, focus trap, Escape, and backdrop overlay all
-  come from the platform. Decorate the host, no shadow DOM.
+  alert-dialog wrap the native `<dialog>.showModal()`, so focus trap,
+  Escape, and backdrop overlay all come from the platform. Light DOM
+  throughout (no shadow DOM); authored children project through `<slot>`.
 
 Works with any project that uses Tailwind CSS v4 and supports custom elements:
 webjs, Next, Astro, Vite, SvelteKit, Lit, vanilla HTML, as long as Tailwind
@@ -30,8 +30,13 @@ is configured, the components render correctly. Variant names, sizes, and
 data-attribute conventions mirror shadcn's so an AI agent's existing
 knowledge of shadcn maps directly.
 
-Tier-2 elements extend `Base` (a Node-safe `HTMLElement` shim) from a small
-shared `lib/utils.ts` the CLI writes into your project.
+Tier-2 elements extend `WebComponent` from `@webjskit/core`, a tiny
+Lit-shaped base class with `static properties` for reactive attributes,
+`render()` returning an `` html`...` `` template, and declarative
+bindings (`@click`, `?attr`, `attr=`). Light DOM throughout, so Tailwind
+utility classes on authored children apply directly. The `webjsui add`
+CLI installs `@webjskit/core` automatically when you add a Tier-2
+component.
 
 ## Install
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjskit/ui",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "An AI-first component library - class-helper functions for visuals, custom elements only where state matters. Source-copied into your repo, you own it. Works with any Tailwind v4 project.",
   "bin": {
@@ -44,8 +44,5 @@
     "tailwind",
     "components",
     "webjs"
-  ],
-  "engines": {
-    "node": ">=24.0.0"
-  }
+  ]
 }

package/src/commands/add.js

@@ -1,6 +1,6 @@
 import { Command } from 'commander';
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
-import { dirname, join, basename } from 'node:path';
+import { dirname, join, basename, relative as relPath } from 'node:path';
 import prompts from 'prompts';
 import { execSync } from 'node:child_process';
 import { getConfig } from '../utils/get-config.js';
@@ -70,10 +70,39 @@ async function writeRegistryFile(cwd, config, item, file, opts) {
     }
   }
 
-  writeFileSync(target, file.content || '', 'utf8');
+  const content = rewriteUtilsImport(file.content || '', target, config);
+  writeFileSync(target, content, 'utf8');
   logger.success(`Wrote ${relative(cwd, target)}`);
 }
 
+/**
+ * Rewrite the registry-relative `'../lib/utils.ts'` import to the path
+ * that resolves correctly from the file's target location to the user's
+ * cn() helper.
+ *
+ * The registry source assumes its own layout (`<registry>/components/<x>.ts`
+ * imports `'../lib/utils.ts'`). When that file lands in the user's
+ * components/ui/<x>.ts, the literal `'../lib/utils.ts'` resolves to
+ * `components/lib/utils.ts`, which doesn't exist. We compute the actual
+ * relative path from the target directory to `config.resolvedPaths.utils`
+ * (an absolute path the user has already configured via components.json's
+ * aliases.utils) and substitute it in.
+ *
+ * @param {string} content raw file content from the registry
+ * @param {string} target absolute path where the file will be written
+ * @param {{ resolvedPaths: { utils: string } }} config parsed components.json
+ */
+export function rewriteUtilsImport(content, target, config) {
+  if (!content.includes('../lib/utils.ts')) return content;
+  const utilsAbs = config?.resolvedPaths?.utils;
+  if (!utilsAbs) return content;
+  let rel = relPath(dirname(target), utilsAbs).split(/[\\/]/).join('/');
+  if (!rel.startsWith('.')) rel = './' + rel;
+  return content
+    .replaceAll("'../lib/utils.ts'", `'${rel}'`)
+    .replaceAll('"../lib/utils.ts"', `"${rel}"`);
+}
+
 function resolveTarget(cwd, config, item, file) {
   // explicit `target` wins
   if (file.target) return join(cwd, file.target);