@webjskit/cli 0.1.1 → 0.1.3

package/README.md

@@ -7,20 +7,25 @@ Installing this package gives you the `webjs` command.
 
 ## Install
 
-Most users won't install globally. Scaffold a new app instead:
+Install once, globally:
 
 ```sh
-npx @webjskit/cli create my-app
-cd my-app
-npm install
-npm run dev
+npm i -g @webjskit/cli
 ```
 
-Or globally:
+Then scaffold a new app anywhere:
 
 ```sh
-npm install -g @webjskit/cli
 webjs create my-app
+cd my-app && npm install && npm run dev
+# → http://localhost:3000
+```
+
+One-shot without global install:
+
+```sh
+npx @webjskit/cli create my-app
+cd my-app && npm install && npm run dev
 ```
 
 ## Commands

package/lib/create.js

@@ -433,8 +433,8 @@ export default function Home() {
       \${displayH1(html\`Hello from <span class="text-accent italic">${name}</span>.\`)}
       <p class="text-lede leading-[1.5] text-fg-muted max-w-[56ch] m-0">
         Edit <code class="font-mono text-[0.9em]">app/page.ts</code> to get started.
-        Run \${accentLink('#', 'npx webjs test')} to run tests and
-        \${accentLink('#', 'npx webjs check')} to validate conventions.
+        Run \${accentLink('#', 'webjs test')} to run tests and
+        \${accentLink('#', 'webjs check')} to validate conventions.
       </p>
     </section>
 
@@ -498,18 +498,26 @@ export class ThemeToggle extends WebComponent {
   }
 
   render() {
+    const t = this.state.theme;
+    const label = t === 'system' ? 'AUTO' : t === 'light' ? 'LIGHT' : 'DARK';
+    const icon = t === 'light' ? ICONS.sun : t === 'dark' ? ICONS.moon : ICONS.system;
     return html\`
       <button
-        class="inline-flex items-center px-3 py-1.5 rounded-full border border-border bg-bg-elev text-fg-muted font-mono text-[11px] leading-none tracking-wider uppercase duration-fast hover:text-fg hover:border-border-strong"
+        class="inline-flex items-center justify-center w-9 h-9 p-0 border border-border rounded-full bg-bg-elev text-fg-muted cursor-pointer transition-all duration-150 hover:text-fg hover:border-border-strong active:scale-[0.94] focus-visible:outline-none focus-visible:border-accent focus-visible:ring-[3px] focus-visible:ring-accent-tint"
         @click=\${() => this.cycle()}
-      >
-        \${this.state.theme === 'system' ? 'Auto'
-          : this.state.theme === 'light' ? 'Light' : 'Dark'}
-      </button>
+        aria-label="Cycle theme (currently \${label})"
+        title="Theme: \${label.toLowerCase()}"
+      >\${icon}</button>
     \`;
   }
 }
 
+const ICONS = {
+  sun: html\`<svg class="w-4 h-4 stroke-current fill-none" style="stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M3 12h2M19 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>\`,
+  moon: html\`<svg class="w-4 h-4 stroke-current fill-none" style="stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg>\`,
+  system: html\`<svg class="w-4 h-4 stroke-current fill-none" style="stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round" viewBox="0 0 24 24"><path d="M3 5h18v11H3zM8 20h8M12 16v4"/></svg>\`,
+};
+
 ThemeToggle.register('theme-toggle');
 `);
   } // end if (!isApi)
@@ -564,7 +572,7 @@ ThemeToggle.register('theme-toggle');
   console.log(`Next steps:
   cd ${name}
   npm install${isSaas ? '\n  npx prisma migrate dev --name init' : ''}
-  npx webjs dev
+  webjs dev
 
 AI-driven development (enforced for all AI agents):
   ✓ Tests auto-generated with every feature
@@ -572,6 +580,6 @@ AI-driven development (enforced for all AI agents):
   ✓ Git merges/pushes to main require approval
   ✓ Commits are automatic, small, and meaningful
   ✓ No AI attribution in commit messages
-  ✓ Convention validation via \`npx webjs check\`
+  ✓ Convention validation via \`webjs check\`
 `);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjskit/cli",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "description": "webjs CLI — dev, start, create, db",
   "bin": {

package/templates/.cursorrules

@@ -28,13 +28,13 @@ Quality bar stays the same — just no blocking on questions.
 ## Mandatory workflow (never skip)
 
 1. TESTS: Server tests in test/unit/ (node:test), browser tests in
-   test/browser/ (WTR + Playwright, real Chromium). Run `npx webjs test`
+   test/browser/ (WTR + Playwright, real Chromium). Run `webjs test`
    after every change. Never deliver code without passing tests.
 
 2. DOCS: Update AGENTS.md for API changes. Update docs/ and website/ if
    they exist. The user should never have to ask for tests or docs.
 
-3. CONVENTIONS: Run `npx webjs check` and fix violations before committing.
+3. CONVENTIONS: Run `webjs check` and fix violations before committing.
 
 ## Git rules
 

package/templates/.github/copilot-instructions.md

@@ -27,7 +27,7 @@ Every code change must include:
 2. Server tests in test/unit/*.test.ts (node:test for actions, queries, utilities)
 3. Browser tests in test/browser/*.test.js (WTR + Playwright, real Chromium)
 4. Documentation updates (AGENTS.md for API, docs/ for user guides)
-5. Convention validation: `npx webjs check` must pass
+5. Convention validation: `webjs check` must pass
 
 ## Git rules
 
@@ -38,7 +38,7 @@ Every code change must include:
 - NEVER merge any branch without explicit user permission. Always ask:
   "Ready to merge <branch> into <target>? Delete or keep <branch> after?"
   Wait for approval AND the delete/keep preference. Applies to ALL merges.
-- Run `npx webjs test` before every commit
+- Run `webjs test` before every commit
 
 ## Code patterns
 

package/templates/.github/pull_request_template.md

@@ -4,9 +4,9 @@
 
 ## Test plan
 
-- [ ] Unit tests added/updated (`npx webjs test` passes)
-- [ ] E2E tests added/updated for user-facing changes (`npx webjs test --e2e` passes)
-- [ ] `npx webjs check` passes (no convention violations)
+- [ ] Unit tests added/updated (`webjs test` passes)
+- [ ] E2E tests added/updated for user-facing changes (`webjs test --e2e` passes)
+- [ ] `webjs check` passes (no convention violations)
 
 ## Documentation
 

package/templates/.windsurfrules

@@ -26,7 +26,7 @@ Every code change must include:
 1. Server tests in test/unit/*.test.ts (node:test)
 2. Browser tests in test/browser/*.test.js (WTR + Playwright, real Chromium)
 3. Documentation updates (AGENTS.md, docs/, website/ if they exist)
-4. Convention check: `npx webjs check` must pass
+4. Convention check: `webjs check` must pass
 
 The user should never have to ask for tests or documentation.
 
@@ -41,7 +41,7 @@ The user should never have to ask for tests or documentation.
 - NEVER merge any branch without explicit user permission. Always ask:
   "Ready to merge <branch> into <target>? Delete or keep <branch> after?"
   Wait for approval AND the delete/keep preference. Applies to ALL merges.
-- Run `npx webjs test` before every commit
+- Run `webjs test` before every commit
 
 ## Framework specifics
 

package/templates/AGENTS.md

@@ -186,7 +186,7 @@ absolute URLs from `ctx.url`).
 
 1. Branch before editing — never push to `main` directly.
 2. Every code change comes with: unit test(s), AGENTS.md / docs updates if
-   the feature surface changed, `npx webjs check` passing.
+   the feature surface changed, `webjs check` passing.
 3. Commit and push after each logical unit. No AI attribution trailers.
 4. When unsure how a framework feature works, `grep` or `cat` the
    relevant `node_modules/@webjskit/*/src/` file before asking the user.

package/templates/CLAUDE.md

@@ -32,8 +32,8 @@ This is automatic — the user should never have to ask.
 - **Bug fix** → add regression test proving the fix
 - **Refactor** → run existing tests, ensure they pass
 
-After writing code, ALWAYS run `npx webjs test`. If E2E-relevant,
-also run `npx webjs test --browser`. Never report a task as done with
+After writing code, ALWAYS run `webjs test`. If E2E-relevant,
+also run `webjs test --browser`. Never report a task as done with
 failing tests.
 
 ### 3. Documentation (mandatory, never skip)
@@ -52,18 +52,18 @@ If this project has a **website/** directory, also:
 
 ### 4. Convention validation
 
-After making changes, run `npx webjs check` and fix any violations before
+After making changes, run `webjs check` and fix any violations before
 reporting the task as done.
 
 ## Quick reference
 
 ```sh
-npx webjs dev              # dev server with live reload
-npx webjs test             # run unit tests
-npx webjs test --browser       # run unit + E2E tests
-npx webjs check            # validate conventions
-npx webjs build            # (optional) production bundle
-npx webjs start            # production server
+webjs dev              # dev server with live reload
+webjs test             # run unit tests
+webjs test --browser       # run unit + E2E tests
+webjs check            # validate conventions
+webjs build            # (optional) production bundle
+webjs start            # production server
 ```
 
 All API details, recipes, and feature documentation → see **[AGENTS.md](./AGENTS.md)**.

package/templates/CONVENTIONS.md

@@ -33,7 +33,7 @@ even if the user doesn't explicitly ask.**
 
 2. **Tests** — Unit test for logic, E2E test for user-facing behavior.
    See the "Testing" section below for what type of test each change needs.
-   Run `npx webjs test` after every change. Never mark work as done with
+   Run `webjs test` after every change. Never mark work as done with
    failing tests.
 
 3. **Documentation updates** — When adding or modifying features:
@@ -43,7 +43,7 @@ even if the user doesn't explicitly ask.**
    - If a `website/` directory exists, update the landing page for
      user-facing features.
 
-3. **Convention check** — Run `npx webjs check` after changes and fix
+3. **Convention check** — Run `webjs check` after changes and fix
    any violations before reporting the task as done.
 
 ### Autonomous mode (sandbox / bypass permissions)
@@ -529,8 +529,8 @@ This project enforces a git workflow via agent-specific config files
   `.github/copilot-instructions.md`.
 
 **Pre-commit checks:**
-- `npx webjs test` must pass
-- `npx webjs check` must pass
+- `webjs test` must pass
+- `webjs check` must pass
 - No unrelated files in the commit
 
 ---

package/templates/test/browser/example.test.js

@@ -1,7 +1,7 @@
 /**
  * Example browser test — runs in real Chromium via WTR + Playwright.
  *
- * Run:  npx webjs test --browser
+ * Run:  webjs test --browser
  *       npx wtr
  *
  * Tests here have full access to real browser APIs: Shadow DOM,

package/templates/test/e2e/example.test.ts

@@ -1,7 +1,7 @@
 /**
  * Example E2E test — replace with tests for your user flows.
  *
- * Run:  WEBJS_E2E=1 npx webjs test
+ * Run:  WEBJS_E2E=1 webjs test
  * Or:   WEBJS_E2E=1 node --test test/e2e/*.test.ts
  *
  * Requires: puppeteer-core + chromium installed.

package/templates/test/unit/example.test.ts

@@ -1,7 +1,7 @@
 /**
  * Example unit test — replace with tests for your modules.
  *
- * Run:  npx webjs test
+ * Run:  webjs test
  * Or:   node --test test/unit/*.test.ts
  */
 import { test } from 'node:test';

package/templates/web-test-runner.config.js

@@ -5,9 +5,9 @@
  * Chromium via Playwright. Server tests (actions, queries) use node:test.
  *
  * Run:
- *   npx webjs test              # runs both server + browser tests
- *   npx webjs test --browser    # browser tests only
- *   npx webjs test --server     # server tests only
+ *   webjs test              # runs both server + browser tests
+ *   webjs test --browser    # browser tests only
+ *   webjs test --server     # server tests only
  */
 import { playwrightLauncher } from '@web/test-runner-playwright';