create-koppajs 1.1.0 → 1.2.0

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

@@ -0,0 +1,128 @@
+[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>
+
+      <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>
+      </nav>
+    </header>
+
+    <main id="app-outlet" class="app-outlet" aria-live="polite"></main>
+  </div>
+[/template]
+
+[css]
+  .app-shell {
+    width: min(1080px, 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 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.9rem;
+  }
+
+  .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);
+  }
+
+  .main-nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.8rem;
+  }
+
+  .nav-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.8rem;
+    padding: 0 1.15rem;
+    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.is-active,
+  .nav-link[aria-current="page"] {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #07111e;
+    font-weight: 700;
+  }
+
+  .app-outlet {
+    padding-top: 1.5rem;
+  }
+
+  @media (max-width: 640px) {
+    .app-shell {
+      width: min(100vw - 1rem, 1080px);
+      padding-top: 0.75rem;
+    }
+
+    .hero-panel {
+      padding: 1.15rem;
+      border-radius: 1.25rem;
+    }
+  }
+[/css]

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

@@ -0,0 +1,100 @@
+[template]
+  <section class="page-card">
+    <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>
+
+      <div class="page-actions">
+        <a data-route="/router" href="/router" class="page-link">Open the second page</a>
+      </div>
+    </div>
+
+    <counter-component></counter-component>
+  </section>
+[/template]
+
+[css]
+  .page-card {
+    display: grid;
+    grid-template-columns: minmax(0, 1.1fr) auto;
+    gap: 1.5rem;
+    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;
+    gap: 1rem;
+  }
+
+  .section-label {
+    color: var(--accent);
+    font-size: 0.8rem;
+    letter-spacing: 0.28em;
+    text-transform: uppercase;
+  }
+
+  .page-title {
+    font-size: clamp(1.7rem, 3vw, 2.7rem);
+    line-height: 1.1;
+  }
+
+  .page-text {
+    color: var(--muted);
+    line-height: 1.7;
+    max-width: 54ch;
+  }
+
+  .page-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.8rem;
+  }
+
+  .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);
+  }
+
+  @media (max-width: 840px) {
+    .page-card {
+      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

@@ -0,0 +1,89 @@
+import { Core } from "@koppajs/koppajs-core";
+import {
+  KOPPAJS_ROUTE_CHANGE_EVENT,
+  KoppajsRouter,
+  type RouteDefinition,
+} from "@koppajs/koppajs-router";
+
+import appView from "./app-view.kpa";
+import counterComponent from "./counter-component.kpa";
+import homePage from "./home-page.kpa";
+import notFoundPage from "./not-found-page.kpa";
+import routerPage from "./router-page.kpa";
+
+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[];
+
+let routerStarted = false;
+
+Core.take(appView, "app-view");
+Core.take(counterComponent, "counter-component");
+Core.take(homePage, "home-page");
+Core.take(routerPage, "router-page");
+Core.take(notFoundPage, "not-found-page");
+Core();
+
+bootRouter();
+
+function bootRouter() {
+  if (routerStarted) {
+    return;
+  }
+
+  const outlet = document.querySelector<HTMLElement>("#app-outlet");
+
+  if (!outlet) {
+    window.requestAnimationFrame(bootRouter);
+    return;
+  }
+
+  routerStarted = true;
+
+  const router = new KoppajsRouter({
+    routes,
+    outlet,
+    root: document,
+  });
+
+  const syncRouteLinks = () => {
+    document
+      .querySelectorAll<HTMLAnchorElement>(ROUTE_LINK_SELECTOR)
+      .forEach((link) => {
+        const routeTarget = link.getAttribute("data-route");
+
+        if (!routeTarget) {
+          return;
+        }
+
+        link.setAttribute("href", router.hrefFor(routeTarget));
+      });
+  };
+
+  window.addEventListener(KOPPAJS_ROUTE_CHANGE_EVENT, syncRouteLinks);
+
+  router.init();
+  syncRouteLinks();
+}

package/template-overlays/router/src/not-found-page.kpa

@@ -0,0 +1,69 @@
+[template]
+  <section class="page-card page-card--missing">
+    <p class="section-label">404</p>
+    <h2 class="page-title">Page not found</h2>
+    <p class="page-text">
+      The router starter includes an explicit catch-all route, so unmatched URLs
+      still render a predictable fallback page instead of failing silently.
+    </p>
+
+    <div class="page-actions">
+      <a data-route="/" href="/" class="page-link">Return home</a>
+    </div>
+  </section>
+[/template]
+
+[css]
+  .page-card {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1.5rem;
+    border: 1px solid rgba(248, 113, 113, 0.24);
+    border-radius: 1.75rem;
+    background: linear-gradient(180deg, rgba(61, 12, 22, 0.5), rgba(11, 22, 40, 0.88));
+    box-shadow: var(--shadow);
+  }
+
+  .section-label {
+    color: #fda4af;
+    font-size: 0.8rem;
+    letter-spacing: 0.28em;
+    text-transform: uppercase;
+  }
+
+  .page-title {
+    font-size: clamp(1.7rem, 3vw, 2.5rem);
+    line-height: 1.1;
+  }
+
+  .page-text {
+    color: #fecdd3;
+    line-height: 1.7;
+    max-width: 58ch;
+  }
+
+  .page-actions {
+    display: flex;
+  }
+
+  .page-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.8rem;
+    padding: 0 1.25rem;
+    border-radius: 999px;
+    background: rgba(253, 164, 175, 0.12);
+    border: 1px solid rgba(253, 164, 175, 0.4);
+    color: #fff1f2;
+    text-decoration: none;
+  }
+
+  @media (max-width: 640px) {
+    .page-card {
+      padding: 1.15rem;
+      border-radius: 1.25rem;
+    }
+  }
+[/css]

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

@@ -0,0 +1,102 @@
+[template]
+  <section class="page-card">
+    <div class="page-copy">
+      <p class="section-label">Second page</p>
+      <h2 class="page-title">Router is active</h2>
+      <p class="page-text">
+        This view is rendered into <code>#app-outlet</code> by
+        <code>KoppajsRouter</code>. The active navigation state and the browser
+        URL are both managed by the router runtime.
+      </p>
+
+      <ul class="feature-list">
+        <li>Routes are defined in <code>src/main.ts</code>.</li>
+        <li>Links opt into delegated navigation through <code>data-route</code>.</li>
+        <li>A catch-all route is already wired for unmatched paths.</li>
+      </ul>
+
+      <div class="page-actions">
+        <a data-route="/" href="/" class="page-link">Back to home</a>
+      </div>
+    </div>
+  </section>
+[/template]
+
+[css]
+  .page-card {
+    padding: 1.5rem;
+    border: 1px solid var(--border);
+    border-radius: 1.75rem;
+    background: var(--surface-strong);
+    box-shadow: var(--shadow);
+    backdrop-filter: blur(18px);
+  }
+
+  .page-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .section-label {
+    color: var(--accent);
+    font-size: 0.8rem;
+    letter-spacing: 0.28em;
+    text-transform: uppercase;
+  }
+
+  .page-title {
+    font-size: clamp(1.7rem, 3vw, 2.5rem);
+    line-height: 1.1;
+  }
+
+  .page-text {
+    color: var(--muted);
+    line-height: 1.7;
+    max-width: 58ch;
+  }
+
+  code {
+    color: var(--accent-strong);
+  }
+
+  .feature-list {
+    list-style: none;
+    display: grid;
+    gap: 0.8rem;
+    color: var(--text);
+  }
+
+  .feature-list li {
+    padding: 0.95rem 1rem;
+    border-radius: 1rem;
+    border: 1px solid rgba(100, 220, 232, 0.18);
+    background: rgba(100, 220, 232, 0.06);
+  }
+
+  .page-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.8rem;
+  }
+
+  .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;
+  }
+
+  @media (max-width: 640px) {
+    .page-card {
+      padding: 1.15rem;
+      border-radius: 1.25rem;
+    }
+  }
+[/css]

package/template-overlays/router/src/style.css

@@ -0,0 +1,51 @@
+:root {
+  color-scheme: dark;
+  --app-bg: #08111f;
+  --app-bg-accent: #102742;
+  --surface: rgba(9, 16, 31, 0.78);
+  --surface-strong: rgba(11, 22, 40, 0.92);
+  --border: rgba(148, 163, 184, 0.2);
+  --text: #edf6ff;
+  --muted: #a7bfd7;
+  --accent: #64dce8;
+  --accent-strong: #97f3fb;
+  --shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
+  font-family: "Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  min-height: 100%;
+  background:
+    radial-gradient(
+      circle at top left,
+      rgba(100, 220, 232, 0.16),
+      transparent 30%
+    ),
+    radial-gradient(
+      circle at bottom right,
+      rgba(16, 39, 66, 0.55),
+      transparent 32%
+    ),
+    linear-gradient(
+      160deg,
+      var(--app-bg) 0%,
+      #060c18 45%,
+      var(--app-bg-accent) 100%
+    );
+}
+
+body {
+  min-height: 100vh;
+  color: var(--text);
+}
+
+a,
+button {
+  font: inherit;
+}

package/template-overlays/router/tests/e2e/app.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from "@playwright/test";
+
+test("renders the router starter, keeps the counter, and navigates between routes", async ({
+  page,
+}) => {
+  await page.goto("/");
+
+  await expect(page.getByText("Router Starter")).toBeVisible();
+  await expect(
+    page.getByRole("heading", {
+      name: "A small starter, now with real navigation",
+    }),
+  ).toBeVisible();
+
+  const counterValue = page.getByRole("status");
+
+  await expect(counterValue).toHaveText("0");
+
+  await page.getByRole("button", { name: "Increment counter" }).click();
+  await expect(counterValue).toHaveText("1");
+
+  await page.getByRole("link", { name: "Router Page" }).click();
+
+  await expect(page).toHaveURL(/\/router$/);
+  await expect(
+    page.getByRole("heading", { name: "Router is active" }),
+  ).toBeVisible();
+  await expect(page.getByRole("link", { name: "Router Page" })).toHaveAttribute(
+    "aria-current",
+    "page",
+  );
+
+  await page.goto("/missing");
+
+  await expect(
+    page.getByRole("heading", { name: "Page not found" }),
+  ).toBeVisible();
+});