create-koppajs 1.2.2 → 1.2.3

package/template-overlays/router/README.md

@@ -1,94 +1,11 @@
-<a id="readme-top"></a>
+# __PROJECT_NAME__
 
-<div align="center">
-  <img src="https://public-assets-1b57ca06-687a-4142-a525-0635f7649a5c.s3.eu-central-1.amazonaws.com/koppajs/koppajs-logo-text-900x226.png" width="500" alt="KoppaJS Logo">
-</div>
-
-<br>
-
-<div align="center">
-  <a href="./LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-blue?style=flat-square" alt="License"></a>
-</div>
-
-<br>
-
-<div align="center">
-  <h1 align="center">__PROJECT_NAME__</h1>
-  <h3 align="center">KoppaJS router starter project</h3>
-  <p align="center">
-    <i>Scaffolded from the official KoppaJS router starter baseline.</i>
-  </p>
-</div>
-
-<br>
-
-<div align="center">
-  <p align="center">
-    <a href="https://github.com/koppajs/koppajs-documentation">Documentation</a>
-    &middot;
-    <a href="https://github.com/koppajs/koppajs-core">KoppaJS Core</a>
-    &middot;
-    <a href="https://github.com/koppajs/koppajs-router">KoppaJS Router</a>
-    &middot;
-    <a href="https://github.com/koppajs/koppajs-vite-plugin">Vite Plugin</a>
-  </p>
-</div>
-
-<br>
-
-<details>
-<summary>Table of Contents</summary>
-  <ol>
-    <li><a href="#what-is-this">What is this?</a></li>
-    <li><a href="#requirements">Requirements</a></li>
-    <li><a href="#getting-started">Getting Started</a></li>
-    <li><a href="#quality-workflow">Quality Workflow</a></li>
-    <li><a href="#routing-overview">Routing Overview</a></li>
-    <li><a href="#project-structure">Project Structure</a></li>
-    <li><a href="#meta-layer">Meta Layer</a></li>
-    <li><a href="#community--contribution">Community & Contribution</a></li>
-    <li><a href="#license">License</a></li>
-  </ol>
-</details>
-
----
-
-## What is this?
-
-This project was scaffolded from the official KoppaJS router starter baseline.
-
-It keeps the application intentionally small while demonstrating one extra
-subsystem beyond the minimal starter:
-
-- one HTML shell
-- one TypeScript bootstrap file
-- one root app shell component
-- one router instance with a visible two-page flow
-- one counter component on the home route
-- one explicit catch-all route for unmatched paths
-
-It also carries the same quality and governance baseline as the minimal starter:
-
-- ESLint for source and tooling files
-- Prettier plus `.editorconfig` for supported text formats
-- Vitest for local unit and integration coverage
-- Playwright for a real-browser smoke test
-- Husky plus lint-staged for fast staged-file checks
-- Conventional Commits enforcement via `commitlint`
-- a tag-driven GitHub release baseline with `CHANGELOG.md` and `RELEASE.md`
-
-Use it when you want to start from a small KoppaJS app that already shows how
-route definitions, `data-route` links, and route-based outlet rendering fit
-together.
-
----
+KoppaJS router starter project scaffolded with `create-koppajs`.
 
 ## Requirements
 
-- Node.js >= 22
-- pnpm >= 10
-
----
+- Node.js >= 22.12.0
+- pnpm >= 10.24.0
 
 ## Getting Started
 
@@ -97,144 +14,52 @@ pnpm install
 pnpm dev
 ```
 
-Install the Playwright browser once if you want to run the browser smoke test locally:
-
-```bash
-pnpm exec playwright install chromium
-```
-
-Useful commands:
+## Scripts
 
 ```bash
-pnpm lint
-pnpm format:check
-pnpm typecheck
-pnpm test:run
-pnpm test:coverage
 pnpm build
+pnpm typecheck
 pnpm serve
-pnpm release:check
 ```
 
----
-
-## Quality Workflow
-
-Fast local baseline:
-
-```bash
-pnpm check
-```
-
-Full validation, including Playwright:
-
-```bash
-pnpm validate
-```
-
-Standalone browser smoke test:
-
-```bash
-pnpm test:e2e
-```
-
----
-
-## Routing Overview
+## Routing
 
 The starter wires `@koppajs/koppajs-router` in `src/main.ts`.
 
-The route table currently contains:
+The route table contains:
 
 - `/` -> `home-page`
 - `/router` -> `router-page`
 - `*` -> `not-found-page`
 
-The router renders into `#app-outlet`, updates active navigation state for
-links that use `data-route`, and keeps the browser URL aligned with the current
-page.
-
----
-
 ## Project Structure
 
 ```text
 __PROJECT_NAME__/
-├── .editorconfig
-├── .github/
+├── .gitattributes
 ├── .gitignore
-├── .husky/
 ├── .npmrc
-├── .prettierignore
-├── CHANGELOG.md
-├── commitlint.config.mjs
-├── AI_CONSTITUTION.md
-├── ARCHITECTURE.md
-├── CONTRIBUTING.md
-├── DECISION_HIERARCHY.md
-├── DEVELOPMENT_RULES.md
-├── RELEASE.md
-├── ROADMAP.md
-├── TESTING_STRATEGY.md
-├── eslint.config.mjs
+├── README.md
 ├── index.html
 ├── package.json
-├── playwright.config.ts
-├── pnpm-lock.yaml
-├── prettier.config.mjs
 ├── tsconfig.json
 ├── vite.config.mjs
-├── vitest.config.mjs
-├── docs/
-│   ├── adr/
-│   ├── architecture/
-│   ├── meta/
-│   ├── quality/
-│   └── specs/
 ├── public/
-│   └── favicon.svg
-├── src/
-│   ├── main.ts
-│   ├── style.css
-│   ├── app-view.kpa
-│   ├── counter-component.kpa
-│   ├── home-page.kpa
-│   ├── router-page.kpa
-│   └── not-found-page.kpa
-└── tests/
-    ├── e2e/
-    ├── integration/
-    └── unit/
+│   ├── favicon.png
+│   └── koppajs-logo.png
+└── src/
+    ├── app-view.kpa
+    ├── counter-component.kpa
+    ├── home-page.kpa
+    ├── main.ts
+    ├── not-found-page.kpa
+    ├── router-page.kpa
+    └── style.css
 ```
 
----
-
-## Meta Layer
-
-The repository includes an explicit meta layer so architecture, testing, and
-contributor rules evolve together with the codebase.
-
-Start here:
-
-- `DECISION_HIERARCHY.md`
-- `AI_CONSTITUTION.md`
-- `ARCHITECTURE.md`
-- `DEVELOPMENT_RULES.md`
-- `TESTING_STRATEGY.md`
-- `CHANGELOG.md`
-- `RELEASE.md`
-- `docs/quality/quality-gates.md`
-- `docs/adr/`
-- `docs/specs/`
-
----
-
-## Community & Contribution
-
-Contribution workflow details live in `CONTRIBUTING.md`.
-Update this section with your own repository links once the project has a
-canonical home.
-
----
+## Useful Links
 
-## License
+- [KoppaJS documentation](https://github.com/koppajs/koppajs-documentation)
+- [KoppaJS core](https://github.com/koppajs/koppajs-core)
+- [KoppaJS router](https://github.com/koppajs/koppajs-router)
+- [KoppaJS Vite plugin](https://github.com/koppajs/koppajs-vite-plugin)

package/template-overlays/router/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>KoppaJS Router Starter</title>
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="stylesheet" href="/src/style.css" />
   </head>
   <body>

package/template-overlays/router/package.json

@@ -3,8 +3,6 @@
   "version": "1.0.0",
   "private": true,
   "description": "KoppaJS router application scaffolded with create-koppajs.",
-  "author": "Bastian Bensch",
-  "license": "Apache-2.0",
   "keywords": [
     "koppajs",
     "koppa",
@@ -15,60 +13,25 @@
     "web-components",
     "router"
   ],
-  "packageManager": "pnpm@10.12.1",
+  "packageManager": "pnpm@10.33.2",
   "engines": {
-    "node": ">=22",
-    "pnpm": ">=10"
+    "node": ">=22.12.0",
+    "pnpm": ">=10.24.0"
   },
   "scripts": {
     "dev": "vite --host",
     "build": "tsc --noEmit && vite build",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "format": "prettier . --write --ignore-unknown",
-    "format:check": "prettier . --check --ignore-unknown",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "test:e2e": "pnpm build && playwright test",
-    "test:e2e:headed": "pnpm build && playwright test --headed",
-    "test:e2e:ui": "pnpm build && playwright test --ui",
-    "check": "pnpm lint && pnpm format:check && pnpm typecheck && pnpm test:run && pnpm build",
-    "validate": "pnpm check && playwright test",
-    "release:check": "pnpm validate",
     "typecheck": "tsc --noEmit",
-    "serve": "vite preview",
-    "serve:e2e": "vite preview --host 127.0.0.1 --strictPort --port 4173",
-    "prepare": "husky"
+    "serve": "vite preview"
   },
   "dependencies": {
-    "@koppajs/koppajs-core": "^3.0.7",
-    "@koppajs/koppajs-router": "^0.1.2"
+    "@koppajs/koppajs-core": "3.0.7",
+    "@koppajs/koppajs-router": "0.1.2"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.1.0",
-    "@commitlint/config-conventional": "^20.0.0",
-    "@eslint/js": "^10.0.1",
-    "@koppajs/koppajs-vite-plugin": "^1.0.4",
-    "@playwright/test": "^1.58.2",
-    "@types/node": "^25.4.0",
-    "@vitest/coverage-v8": "^4.0.18",
-    "eslint": "^10.0.3",
-    "globals": "^17.4.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.3.3",
-    "prettier": "^3.8.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.57.0",
-    "vite": "7.2.6",
-    "vitest": "^4.0.18"
-  },
-  "lint-staged": {
-    "*.{js,mjs,cjs,ts,mts,cts}": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.{css,html,json,md,yml,yaml}": "prettier --write"
+    "@koppajs/koppajs-vite-plugin": "1.0.4",
+    "@types/node": "25.6.0",
+    "typescript": "5.9.3",
+    "vite": "7.3.2"
   }
 }

package/template-overlays/router/src/app-view.kpa

@@ -1,20 +1,11 @@
 [template]
   <div class="app-shell">
-    <header class="hero-panel">
-      <div class="hero-copy">
-        <img src="https://public-assets-1b57ca06-687a-4142-a525-0635f7649a5c.s3.eu-central-1.amazonaws.com/koppajs/koppajs-logo-text-900x226.png" width="320" alt="KoppaJS Logo" class="logo">
-        <p class="eyebrow">Router Starter</p>
-        <h1 class="title">Optional routing for new KoppaJS projects</h1>
-        <p class="lead">
-          This starter keeps the original lightweight baseline, adds
-          <code>@koppajs/koppajs-router</code>, and shows how route-based rendering
-          fits into a small app shell.
-        </p>
-      </div>
+    <header class="app-header">
+      <img src="/koppajs-logo.png" width="280" alt="KoppaJS Logo" class="logo">
 
       <nav class="main-nav" aria-label="Primary">
         <a data-route="/" href="/" class="nav-link">Home</a>
-        <a data-route="/router" href="/router" class="nav-link">Router Page</a>
+        <a data-route="/router" href="/router" class="nav-link">Router</a>
       </nav>
     </header>
 
@@ -24,105 +15,57 @@
 
 [css]
   .app-shell {
-    width: min(1080px, calc(100vw - 2rem));
+    width: min(920px, calc(100vw - 2rem));
     margin: 0 auto;
     padding: 2rem 0 3rem;
   }
 
-  .hero-panel {
-    display: grid;
-    gap: 1.5rem;
-    padding: 1.5rem;
-    border: 1px solid var(--border);
-    border-radius: 1.75rem;
-    background: linear-gradient(180deg, rgba(8, 17, 31, 0.88), rgba(8, 17, 31, 0.72));
-    box-shadow: var(--shadow);
-    backdrop-filter: blur(18px);
-  }
-
-  .hero-copy {
+  .app-header {
     display: flex;
-    flex-direction: column;
-    gap: 0.9rem;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 0 1.5rem;
+    border-bottom: 1px solid var(--border);
   }
 
   .logo {
-    width: min(320px, 72vw);
-  }
-
-  .eyebrow {
-    font-size: 0.82rem;
-    letter-spacing: 0.3em;
-    text-transform: uppercase;
-    color: var(--accent);
-  }
-
-  .title {
-    font-size: clamp(2.1rem, 5vw, 3.6rem);
-    line-height: 1.05;
-    max-width: 14ch;
-  }
-
-  .lead {
-    max-width: 58ch;
-    color: var(--muted);
-    line-height: 1.65;
-  }
-
-  .lead code {
-    color: var(--accent-strong);
+    width: min(280px, 56vw);
   }
 
   .main-nav {
     display: flex;
     flex-wrap: wrap;
-    gap: 0.8rem;
+    gap: 0.6rem;
   }
 
   .nav-link {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-height: 2.8rem;
-    padding: 0 1.15rem;
+    min-height: 2.5rem;
+    padding: 0 1rem;
+    border: 1px solid var(--border);
     border-radius: 999px;
-    border: 1px solid rgba(100, 220, 232, 0.24);
-    background: rgba(100, 220, 232, 0.06);
     color: var(--text);
     text-decoration: none;
-    transition: background 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
-  }
-
-  .nav-link:hover {
-    background: rgba(100, 220, 232, 0.12);
-    border-color: rgba(100, 220, 232, 0.4);
-  }
-
-  .nav-link:active {
-    transform: translateY(1px);
   }
 
+  .nav-link:hover,
   .nav-link.is-active,
   .nav-link[aria-current="page"] {
-    background: var(--accent);
     border-color: var(--accent);
-    color: #07111e;
-    font-weight: 700;
+    color: var(--accent);
   }
 
   .app-outlet {
-    padding-top: 1.5rem;
+    padding-top: 2rem;
   }
 
   @media (max-width: 640px) {
-    .app-shell {
-      width: min(100vw - 1rem, 1080px);
-      padding-top: 0.75rem;
-    }
-
-    .hero-panel {
-      padding: 1.15rem;
-      border-radius: 1.25rem;
+    .app-header {
+      align-items: flex-start;
+      flex-direction: column;
     }
   }
 [/css]

package/template-overlays/router/src/home-page.kpa

@@ -1,17 +1,14 @@
 [template]
-  <section class="page-card">
+  <section class="page">
     <div class="page-copy">
-      <p class="section-label">Home route</p>
-      <h2 class="page-title">A small starter, now with real navigation</h2>
-      <p class="page-text">
-        The home page keeps the original interactive counter so the starter still
-        shows local state, while the navigation above now switches routes through
-        the published KoppaJS router.
+      <p class="eyebrow">Home route</p>
+      <h1>KoppaJS router starter</h1>
+      <p>
+        This page is rendered for <code>/</code>. The counter stays here so the
+        starter shows component state and route rendering in the same small app.
       </p>
 
-      <div class="page-actions">
-        <a data-route="/router" href="/router" class="page-link">Open the second page</a>
-      </div>
+      <a data-route="/router" href="/router" class="page-link">Open router page</a>
     </div>
 
     <counter-component></counter-component>
@@ -19,82 +16,48 @@
 [/template]
 
 [css]
-  .page-card {
+  .page {
     display: grid;
-    grid-template-columns: minmax(0, 1.1fr) auto;
-    gap: 1.5rem;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 2rem;
     align-items: start;
-    padding: 1.5rem;
-    border: 1px solid var(--border);
-    border-radius: 1.75rem;
-    background: var(--surface);
-    box-shadow: var(--shadow);
-    backdrop-filter: blur(18px);
   }
 
   .page-copy {
-    display: flex;
-    flex-direction: column;
+    display: grid;
     gap: 1rem;
   }
 
-  .section-label {
+  .eyebrow {
     color: var(--accent);
     font-size: 0.8rem;
-    letter-spacing: 0.28em;
+    letter-spacing: 0.2em;
     text-transform: uppercase;
   }
 
-  .page-title {
-    font-size: clamp(1.7rem, 3vw, 2.7rem);
+  h1 {
+    font-size: clamp(2rem, 4vw, 3rem);
     line-height: 1.1;
   }
 
-  .page-text {
+  p {
+    max-width: 58ch;
     color: var(--muted);
     line-height: 1.7;
-    max-width: 54ch;
   }
 
-  .page-actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.8rem;
+  code {
+    color: var(--accent);
   }
 
   .page-link {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-height: 2.8rem;
-    padding: 0 1.25rem;
-    border-radius: 999px;
-    background: rgba(100, 220, 232, 0.1);
-    border: 1px solid rgba(100, 220, 232, 0.3);
-    color: var(--accent-strong);
-    text-decoration: none;
-    transition: background 0.25s ease, transform 0.15s ease;
-  }
-
-  .page-link:hover {
-    background: rgba(100, 220, 232, 0.18);
-  }
-
-  .page-link:active {
-    transform: translateY(1px);
+    width: fit-content;
+    color: var(--accent);
   }
 
-  @media (max-width: 840px) {
-    .page-card {
+  @media (max-width: 760px) {
+    .page {
       grid-template-columns: 1fr;
-      justify-items: start;
-    }
-  }
-
-  @media (max-width: 640px) {
-    .page-card {
-      padding: 1.15rem;
-      border-radius: 1.25rem;
     }
   }
 [/css]

package/template-overlays/router/src/main.ts

@@ -16,23 +16,14 @@ const ROUTE_LINK_SELECTOR = "a[data-route]";
 const routes = [
   {
     path: "/",
-    name: "home",
-    title: "Home",
-    description: "Landing page for the KoppaJS router starter.",
     componentTag: "home-page",
   },
   {
     path: "/router",
-    name: "router",
-    title: "Router",
-    description: "Second page showing how the KoppaJS router starter works.",
     componentTag: "router-page",
   },
   {
     path: "*",
-    name: "not-found",
-    title: "Not found",
-    description: "Fallback page for unmatched routes in the router starter.",
     componentTag: "not-found-page",
   },
 ] satisfies readonly RouteDefinition[];