@apex-stack/core 0.5.0 → 0.7.0

package/dist/server-SSHQHMWY.js

@@ -0,0 +1,479 @@
+import {
+  openInEditor
+} from "./chunk-P6KQSPAV.js";
+import {
+  loadComponents
+} from "./chunk-4VG3CZ6H.js";
+import {
+  createApiHandler,
+  createMcpHandler,
+  loadApiRoutes,
+  loadMiddleware,
+  runMiddleware
+} from "./chunk-HCNNKT4A.js";
+import "./chunk-2C2HRLIY.js";
+import {
+  loadStores,
+  matchRoute,
+  renderIslandsPage,
+  renderPage,
+  resolveApexConfig,
+  scanPages
+} from "./chunk-7CBGVRBB.js";
+import "./chunk-PMLGY6Z3.js";
+
+// src/dev/server.ts
+import { existsSync as existsSync2, readdirSync as readdirSync2, readFileSync as readFileSync2 } from "fs";
+import { createServer as createHttpServer } from "http";
+import { createRequire } from "module";
+import { join as join2, resolve } from "path";
+import { fileURLToPath, pathToFileURL } from "url";
+import { apex } from "@apex-stack/vite";
+import {
+  createApp,
+  defineEventHandler,
+  fromNodeMiddleware,
+  getQuery,
+  getRequestHeaders,
+  setResponseHeader,
+  setResponseStatus,
+  toNodeListener
+} from "h3";
+import { createServer as createViteServer } from "vite";
+
+// src/dev/errorPage.ts
+import { existsSync, readdirSync, readFileSync } from "fs";
+import { join, relative, sep } from "path";
+function esc(s) {
+  return s.replace(
+    /[&<>"]/g,
+    (c) => c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : "&quot;"
+  );
+}
+var escAttr = esc;
+function parseFrames(stack, root) {
+  const frames = [];
+  const re = /^\s*at\s+(?:(.*?)\s+\()?(?:file:\/\/\/?)?((?:[A-Za-z]:[\\/]|\/)[^\s():]+):(\d+):(\d+)\)?\s*$/;
+  for (const line of stack.split("\n")) {
+    const m = line.match(re);
+    if (!m || !m[2]) continue;
+    const file = m[2].replace(/[\\/]/g, sep);
+    if (!existsSync(file)) continue;
+    frames.push({
+      func: m[1]?.trim() || "<anonymous>",
+      file,
+      line: Number(m[3] ?? 0),
+      col: Number(m[4] ?? 0),
+      app: file.startsWith(root) && !file.includes(`${sep}node_modules${sep}`)
+    });
+  }
+  return frames;
+}
+function codeContext(file, line) {
+  let lines;
+  try {
+    lines = readFileSync(file, "utf8").split("\n");
+  } catch {
+    return "";
+  }
+  const start = Math.max(0, line - 5);
+  const end = Math.min(lines.length, line + 4);
+  const rows = [];
+  for (let i = start; i < end; i++) {
+    const n = i + 1;
+    const active = n === line;
+    rows.push(
+      `<div class="cf-row${active ? " active" : ""}"><span class="cf-num">${String(n).padStart(4, " ")}</span><span class="cf-code">${esc(lines[i] || "")}</span></div>`
+    );
+  }
+  return `<pre class="cf">${rows.join("")}</pre>`;
+}
+var OPEN_ICON = '<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M6.5 3H3.5A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-3M9 2h5v5M13.5 2.5 7 9"/></svg>';
+function openAttrs(f) {
+  return `data-file="${escAttr(f.file)}" data-line="${f.line}" data-col="${f.col}"`;
+}
+function frameCard(f, root) {
+  const loc = f.app ? relative(root, f.file).replace(/\\/g, "/") : f.file.replace(/\\/g, "/");
+  const ctx = f.app ? codeContext(f.file, f.line) : "";
+  const openBtn = `<button class="fr-open" ${openAttrs(f)} title="Open in editor">${OPEN_ICON}</button>`;
+  return `<details class="fr${f.app ? " app" : ""}"${f.app ? " open" : ""}>
+    <summary><span class="fr-fn">${esc(f.func)}</span><span class="fr-loc" ${openAttrs(f)}>${esc(loc)}<span class="fr-pos">:${f.line}:${f.col}</span></span>${f.app ? openBtn : ""}</summary>
+    ${ctx}
+  </details>`;
+}
+var IGNORE_DIRS = /* @__PURE__ */ new Set([
+  "node_modules",
+  "dist",
+  "build",
+  "out",
+  "coverage",
+  ".git",
+  ".vite",
+  ".cache",
+  ".turbo",
+  ".next"
+]);
+var FOLDER_ICON = '<svg class="ti" viewBox="0 0 16 16" fill="#f59e0b" aria-hidden="true"><path d="M1.5 3.5A1.5 1.5 0 0 1 3 2h3l1.3 1.5H13A1.5 1.5 0 0 1 14.5 5v7A1.5 1.5 0 0 1 13 13.5H3A1.5 1.5 0 0 1 1.5 12z"/></svg>';
+var EXT_COLOR = {
+  alpine: "#818cf8",
+  ts: "#3b82f6",
+  tsx: "#3b82f6",
+  js: "#eab308",
+  mjs: "#eab308",
+  json: "#eab308",
+  css: "#22d3ee",
+  html: "#f97316",
+  svg: "#22d3ee",
+  md: "#94a3b8"
+};
+function fileIcon(name) {
+  const ext = name.includes(".") ? name.split(".").pop() ?? "" : "";
+  const c = EXT_COLOR[ext] ?? "#8892b0";
+  return `<svg class="ti" viewBox="0 0 16 16" fill="${c}" aria-hidden="true"><path d="M4 1.5h5L12.5 5v9a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5V2a.5.5 0 0 1 .5-.5z" opacity=".92"/></svg>`;
+}
+function fileTree(root, errorFile) {
+  const errRel = errorFile ? relative(root, errorFile).replace(/\\/g, "/") : "";
+  let count = 0;
+  const walk = (dir, rel, depth) => {
+    if (count > 600 || depth > 7) return "";
+    let entries;
+    try {
+      entries = readdirSync(dir, { withFileTypes: true });
+    } catch {
+      return "";
+    }
+    entries = entries.filter((e) => !IGNORE_DIRS.has(e.name) && !e.name.startsWith(".")).sort(
+      (a, b) => a.isDirectory() === b.isDirectory() ? a.name.localeCompare(b.name) : a.isDirectory() ? -1 : 1
+    );
+    const items = [];
+    for (const e of entries) {
+      if (++count > 600) break;
+      const childRel = rel ? `${rel}/${e.name}` : e.name;
+      if (e.isDirectory()) {
+        const onPath = errRel === childRel || errRel.startsWith(`${childRel}/`);
+        items.push(
+          `<details class="tdir"${onPath ? " open" : ""}><summary>${FOLDER_ICON}<span>${esc(e.name)}</span></summary>${walk(join(dir, e.name), childRel, depth + 1)}</details>`
+        );
+      } else {
+        const isErr = childRel === errRel;
+        const label = isErr ? `<button class="tfile-open" ${errorFile ? `data-file="${escAttr(errorFile)}" data-line="1" data-col="1"` : ""}>${esc(e.name)}</button>` : `<span>${esc(e.name)}</span>`;
+        items.push(`<div class="tfile${isErr ? " err" : ""}">${fileIcon(e.name)}${label}</div>`);
+      }
+    }
+    return `<div class="tchildren">${items.join("")}</div>`;
+  };
+  return walk(root, "", 0);
+}
+var SHELL_CSS = `
+:root{color-scheme:dark light}
+*{box-sizing:border-box}
+body{margin:0;min-height:100vh;background:#0a0e1a;color:#f4f7ff;
+  font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:clamp(1.25rem,5vh,3rem) 1.25rem}
+@media(prefers-color-scheme:light){body{background:#f4f7ff;color:#0a0e1a}}
+.wrap{width:100%;max-width:1120px;margin:0 auto}
+.brand{display:flex;align-items:center;gap:.55rem;font-weight:600;margin-bottom:1.4rem}
+.mark{width:20px;height:20px}
+.pill{font-size:.8rem;font-weight:600;padding:.15rem .6rem;border-radius:999px;margin-left:.4rem}
+.pill.err{color:#fb7185;background:rgba(244,63,94,.12);border:1px solid rgba(244,63,94,.35)}
+.pill.nf{color:#818cf8;background:rgba(129,140,248,.12);border:1px solid rgba(129,140,248,.35)}
+.kind{font:600 .95rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fb7185;margin:0 0 .5rem}
+.kind.nf{color:#818cf8}
+h1{font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.25;letter-spacing:-.02em;margin:0 0 .6rem;word-break:break-word}
+.sub{color:#9aa6c4;margin:0 0 1.6rem}
+.sub code{background:rgba(130,140,200,.14);border-radius:.35rem;padding:.05rem .35rem;font-size:.9em}
+.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem}
+@media(min-width:900px){.cols{grid-template-columns:minmax(0,1fr) 19rem}}
+.col-main{min-width:0}
+.tabs{display:flex;gap:.4rem;margin:0 0 .9rem}
+.tabs button{font:inherit;font-size:.82rem;font-weight:600;padding:.35rem .8rem;border-radius:.5rem;cursor:pointer;
+  color:#9aa6c4;background:transparent;border:1px solid rgba(130,140,200,.22)}
+.tabs button.active{color:#0a0e1a;background:#818cf8;border-color:#818cf8}
+.fr{border:1px solid rgba(130,140,200,.18);border-radius:10px;overflow:hidden;margin:0 0 .6rem;background:#11172b}
+@media(prefers-color-scheme:light){.fr{background:#fff}}
+.fr:not(.app){opacity:.62}
+.fr summary{cursor:pointer;display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;font-size:.83rem;list-style:none}
+.fr summary::-webkit-details-marker{display:none}
+.fr-fn{font:600 .82rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#f4f7ff;flex-shrink:0}
+@media(prefers-color-scheme:light){.fr-fn{color:#0a0e1a}}
+.fr-loc{font:.78rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9aa6c4;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
+.fr.app .fr-loc:hover{color:#818cf8;text-decoration:underline}
+.fr-pos{color:#fb7185}
+.fr-open{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;
+  border:1px solid rgba(130,140,200,.25);background:transparent;color:#9aa6c4;cursor:pointer}
+.fr-open:hover{color:#818cf8;border-color:#818cf8}
+.fr-open.ok{color:#22c55e;border-color:#22c55e}
+.cf{margin:0;padding:.5rem 0 .6rem;overflow-x:auto;font:.8rem/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;border-top:1px solid rgba(130,140,200,.14)}
+.cf-row{display:flex;padding:0 .8rem;white-space:pre}
+.cf-row.active{background:rgba(244,63,94,.12);box-shadow:inset 3px 0 0 #f43f5e}
+.cf-num{color:#5b6890;user-select:none;padding-right:1rem;text-align:right}
+.cf-row.active .cf-num{color:#fb7185}
+.cf-code{color:#f4f7ff}
+@media(prefers-color-scheme:light){.cf-code{color:#0a0e1a}}
+.raw{margin:0;padding:.9rem;border:1px solid rgba(130,140,200,.18);border-radius:10px;background:#11172b;
+  font:.78rem/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9aa6c4;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
+@media(prefers-color-scheme:light){.raw{background:#fff}}
+.tree{border:1px solid rgba(130,140,200,.18);border-radius:10px;background:#11172b;padding:.5rem;max-height:70vh;overflow:auto;
+  font:.8rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
+@media(prefers-color-scheme:light){.tree{background:#fff}}
+.tree-head{font:600 .72rem/1 system-ui;letter-spacing:.06em;text-transform:uppercase;color:#5b6890;padding:.2rem .3rem .5rem}
+.ti{width:14px;height:14px;flex-shrink:0;vertical-align:-2px;margin-right:.35rem}
+.tdir>summary{cursor:pointer;display:flex;align-items:center;padding:.12rem .3rem;border-radius:5px;list-style:none;color:#c7d0ea}
+.tdir>summary::-webkit-details-marker{display:none}
+.tdir>summary:hover{background:rgba(130,140,200,.1)}
+@media(prefers-color-scheme:light){.tdir>summary{color:#334}}
+.tchildren{padding-left:.85rem;border-left:1px solid rgba(130,140,200,.14);margin-left:.55rem}
+.tfile{display:flex;align-items:center;padding:.12rem .3rem;border-radius:5px;color:#9aa6c4}
+.tfile.err{color:#fb7185;font-weight:700;background:rgba(244,63,94,.1)}
+.tfile-open{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
+details{border:1px solid rgba(130,140,200,.18);border-radius:12px;background:#11172b}
+@media(prefers-color-scheme:light){details{background:#fff}}
+.routes{list-style:none;padding:0;margin:0 0 1.4rem;display:flex;flex-wrap:wrap;gap:.5rem}
+.routes li{font:.85rem/1 ui-monospace,monospace;color:#818cf8;background:rgba(129,140,248,.1);border:1px solid rgba(129,140,248,.25);border-radius:.45rem;padding:.35rem .6rem}
+.foot{margin-top:1.8rem;color:#5b6890;font-size:.82rem}
+`;
+var OPEN_JS = `
+document.addEventListener('click', function (e) {
+  var el = e.target.closest('[data-file]');
+  if (!el) return;
+  e.preventDefault(); e.stopPropagation();
+  fetch('/__apex_open?file=' + encodeURIComponent(el.dataset.file) + '&line=' + el.dataset.line + '&col=' + el.dataset.col)
+    .then(function (r) { if (r.ok && el.classList.contains('fr-open')) { el.classList.add('ok'); setTimeout(function(){el.classList.remove('ok')},1200); } })
+    .catch(function(){});
+});
+var tabs = document.querySelectorAll('.tabs button');
+tabs.forEach(function (b) {
+  b.addEventListener('click', function () {
+    tabs.forEach(function (x) { x.classList.toggle('active', x === b); });
+    ['frames','raw','tree'].forEach(function (v) {
+      var el = document.getElementById('view-' + v);
+      if (el) el.hidden = v !== b.dataset.view;
+    });
+  });
+});
+`;
+var MARK = `<svg class="mark" viewBox="0 0 64 64" aria-hidden="true"><defs><linearGradient id="g" x1="0" y1="1" x2="1" y2="0"><stop offset="0" stop-color="#22d3ee"/><stop offset="1" stop-color="#6366f1"/></linearGradient></defs><path d="M32 7 L32 35 L20 56 L4 56 Z" fill="url(#g)"/><path d="M32 7 L60 56 L44 56 L32 35 Z" fill="#6366f1"/></svg>`;
+function page(title, bodyInner, script = "") {
+  return `<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>${esc(title)}</title><style>${SHELL_CSS}</style></head><body><div class="wrap">${bodyInner}</div>${script ? `<script>${script}</script>` : ""}</body></html>`;
+}
+function renderErrorPage(error, opts) {
+  const kind = error.name || "Error";
+  const message = error.message || String(error);
+  const stack = error.stack || "";
+  const frames = parseFrames(stack, opts.root);
+  const origin = frames.find((f) => f.app) ?? frames[0];
+  const framesHtml = frames.length ? frames.map((f) => frameCard(f, opts.root)).join("") : '<p class="sub">No stack frames available.</p>';
+  const body = `
+    <div class="brand">${MARK} Apex JS <span class="pill err">Dev error</span></div>
+    <p class="kind">${esc(kind)}</p>
+    <h1>${esc(message)}</h1>
+    <p class="sub">While rendering <code>${esc(opts.url)}</code></p>
+    <div class="cols">
+      <div class="col-main">
+        <div class="tabs">
+          <button class="active" data-view="frames">Frames</button>
+          <button data-view="raw">Raw</button>
+        </div>
+        <div id="view-frames">${framesHtml}</div>
+        <div id="view-raw" hidden><pre class="raw">${esc(stack)}</pre></div>
+      </div>
+      <aside class="col-tree" id="view-tree">
+        <div class="tree"><div class="tree-head">Project \xB7 error origin in red</div>${fileTree(opts.root, origin?.file)}</div>
+      </aside>
+    </div>
+    <p class="foot">Click a frame's \u2197 to open it in your editor \xB7 fix &amp; save to auto-reload.</p>`;
+  return page(`${kind} \u2014 Apex JS`, body, OPEN_JS);
+}
+function renderNotFoundPage(url, routes) {
+  const list = routes.length ? routes.map((r) => `<li>${esc(r.pattern)}</li>`).join("") : "<li>no pages yet \u2014 add pages/index.alpine</li>";
+  const body = `
+    <div class="brand">${MARK} Apex JS <span class="pill nf">404</span></div>
+    <p class="kind nf">404 \u2014 Not found</p>
+    <h1>No route matches <code>${esc(url)}</code></h1>
+    <p class="sub">These routes are available:</p>
+    <ul class="routes">${list}</ul>
+    <p class="foot">Add a file under <code>pages/</code> to create a new route.</p>`;
+  return page("404 \u2014 Apex JS", body);
+}
+
+// src/dev/server.ts
+async function startDevServer(options) {
+  const port = options.port ?? 3e3;
+  const pageId = options.pageId ?? "/pages/index.alpine";
+  const req = createRequire(import.meta.url);
+  const tryResolve = (spec) => {
+    try {
+      return req.resolve(spec);
+    } catch {
+      return void 0;
+    }
+  };
+  const alpine = tryResolve("alpinejs");
+  const kit = tryResolve("@apex-stack/kit");
+  const coreClient = fileURLToPath(new URL("./client.js", import.meta.url));
+  const coreSelf = fileURLToPath(new URL("./index.js", import.meta.url));
+  const alias = {
+    "@apex-stack/core/client": coreClient,
+    "@apex-stack/core": coreSelf
+  };
+  if (alpine) alias.alpinejs = alpine;
+  if (kit) alias["@apex-stack/kit"] = kit;
+  const plugins = [apex({ clientRuntime: "@apex-stack/core/client" })];
+  let hasTailwind = false;
+  try {
+    const reqProj = createRequire(join2(options.root, "package.json"));
+    const twMod = await import(pathToFileURL(reqProj.resolve("@tailwindcss/vite")).href);
+    const tw = twMod.default ?? twMod;
+    plugins.unshift(tw());
+    hasTailwind = true;
+  } catch {
+  }
+  const appCssRel = ["app.css", "styles/app.css", "src/app.css"].find(
+    (p) => existsSync2(join2(options.root, p))
+  );
+  let appCss = appCssRel ? `/${appCssRel}` : void 0;
+  if (appCssRel && !hasTailwind) {
+    const css = readFileSync2(join2(options.root, appCssRel), "utf8");
+    if (/@import\s+['"]tailwindcss['"]|@tailwind\b/.test(css)) {
+      console.warn(
+        `
+  \u26A0 ${appCssRel} imports Tailwind, but it isn't installed \u2014 skipping it (styles won't apply).
+    Fix: npm i -D tailwindcss @tailwindcss/vite
+`
+      );
+      appCss = void 0;
+    }
+  }
+  const vite = await createViteServer({
+    root: options.root,
+    appType: "custom",
+    // Derive the HMR port from the dev port so multiple `apex dev` instances
+    // don't all fight over Vite's default 24678.
+    server: { middlewareMode: true, fs: { strict: false }, hmr: { port: port + 1 } },
+    resolve: { alias },
+    // User apps depend on `@apex-stack/core`, so the client module imports the runtime
+    // from `@apex-stack/core/client` (a re-export) rather than the internal kit package.
+    plugins,
+    optimizeDeps: { include: ["alpinejs"] }
+  });
+  const ssrLoad = (id) => {
+    const resolved = id[0] === "/" && !id.startsWith(options.root) ? join2(options.root, id).replace(/\\/g, "/") : id;
+    return vite.ssrLoadModule(resolved);
+  };
+  const { runtimeConfig, publicConfig } = await resolveApexConfig(
+    options.root,
+    (id) => ssrLoad(id)
+  );
+  const app = createApp();
+  app.use(fromNodeMiddleware(vite.middlewares));
+  app.use(
+    defineEventHandler(async (event) => {
+      const mws = await loadMiddleware(options.root, (id) => ssrLoad(id));
+      if (!mws.length) return;
+      const { redirect, locals } = await runMiddleware(mws, {
+        url: event.path || "/",
+        method: event.method,
+        config: runtimeConfig,
+        headers: getRequestHeaders(event)
+      });
+      event.context.apexLocals = locals;
+      if (redirect) {
+        setResponseStatus(event, redirect.status);
+        setResponseHeader(event, "Location", redirect.to);
+        return "";
+      }
+    })
+  );
+  const loadEntries = () => loadApiRoutes(options.root, (id) => ssrLoad(id));
+  app.use(
+    "/api",
+    defineEventHandler(
+      (event) => loadEntries().then((e) => createApiHandler(e, runtimeConfig)(event))
+    )
+  );
+  app.use(
+    "/mcp",
+    defineEventHandler(
+      (event) => loadEntries().then((e) => createMcpHandler(e, runtimeConfig)(event))
+    )
+  );
+  app.use(
+    "/__apex_open",
+    defineEventHandler((event) => {
+      const q = getQuery(event);
+      const file = String(q.file ?? "");
+      const resolved = resolve(file);
+      if (!file || !resolved.startsWith(options.root)) {
+        setResponseStatus(event, 400);
+        return { ok: false };
+      }
+      const ok = openInEditor(resolved, Number(q.line) || 1, Number(q.col) || 1);
+      setResponseStatus(event, ok ? 200 : 500);
+      return { ok };
+    })
+  );
+  app.use(
+    defineEventHandler(async (event) => {
+      const url = event.path || "/";
+      try {
+        const routes = scanPages(options.root);
+        const matched = routes.length ? matchRoute(routes, url) : { pageId, params: {} };
+        if (!matched) {
+          setResponseStatus(event, 404);
+          setResponseHeader(event, "Content-Type", "text/html");
+          return await vite.transformIndexHtml(url, renderNotFoundPage(url, routes));
+        }
+        const { registry, css: componentCss } = await loadComponents(
+          options.root,
+          (id) => ssrLoad(id)
+        );
+        const stores = await loadStores(options.root, (id) => ssrLoad(id));
+        const layoutsDir = join2(options.root, "layouts");
+        const layouts = existsSync2(layoutsDir) ? readdirSync2(layoutsDir).filter((f) => f.endsWith(".alpine")).map((f) => f.replace(/\.alpine$/, "")) : [];
+        const render = options.islands ? renderIslandsPage : renderPage;
+        const html = await render({
+          loadModule: (id) => ssrLoad(id),
+          pageId: matched.pageId,
+          params: matched.params,
+          url,
+          registry,
+          componentCss,
+          stores,
+          appCss,
+          layouts,
+          runtimeConfig,
+          publicConfig,
+          locals: event.context.apexLocals ?? {},
+          errorPageId: existsSync2(join2(options.root, "pages", "error.alpine")) ? "/pages/error.alpine" : void 0,
+          transformHtml: (u, doc) => vite.transformIndexHtml(u, doc)
+        });
+        setResponseHeader(event, "Content-Type", "text/html");
+        return html;
+      } catch (err) {
+        const error = err;
+        vite.ssrFixStacktrace(error);
+        setResponseStatus(event, 500);
+        setResponseHeader(event, "Content-Type", "text/html");
+        const html = renderErrorPage(error, { url, root: options.root });
+        try {
+          return await vite.transformIndexHtml(url, html);
+        } catch {
+          return html;
+        }
+      }
+    })
+  );
+  const server = createHttpServer(toNodeListener(app));
+  await new Promise((resolve2) => server.listen(port, resolve2));
+  return {
+    vite,
+    server,
+    port,
+    close: async () => {
+      await vite.close();
+      await new Promise((resolve2, reject) => server.close((e) => e ? reject(e) : resolve2()));
+    }
+  };
+}
+export {
+  startDevServer
+};

package/dist/{start-3O3E43PT.js → start-7HSIYO6C.js}

@@ -11,8 +11,8 @@ import {
   matchRoute,
   renderIslandsPage,
   renderPage
-} from "./chunk-XDKJO6ZC.js";
-import "./chunk-JLIAISWM.js";
+} from "./chunk-7CBGVRBB.js";
+import "./chunk-PMLGY6Z3.js";
 
 // src/commands/start.ts
 import { existsSync as existsSync2 } from "fs";

package/dist/{upgrade-WC5F5FKY.js → upgrade-KGUW3C3O.js}

@@ -1,6 +1,6 @@
 import {
   offerExtension
-} from "./chunk-CHBSGOB3.js";
+} from "./chunk-P6KQSPAV.js";
 import {
   VERSION,
   banner,
@@ -9,7 +9,7 @@ import {
 
 // src/commands/upgrade.ts
 import { spawnSync } from "child_process";
-import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "fs";
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "fs";
 import { basename, dirname, join, relative, resolve } from "path";
 import { fileURLToPath } from "url";
 import { defineCommand } from "citty";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apex-stack/core",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "The full-stack meta-framework for Alpine.js — CLI and runtime",
   "type": "module",
   "license": "MIT",
@@ -47,8 +47,8 @@
     "h3": "^1.13.0",
     "vite": "^6.0.7",
     "zod": "^4.4.3",
-    "@apex-stack/kit": "0.2.0",
-    "@apex-stack/vite": "0.1.6",
+    "@apex-stack/kit": "0.3.0",
+    "@apex-stack/vite": "0.1.7",
     "@apex-stack/theme": "0.3.0"
   },
   "peerDependencies": {

package/templates/default/README.md

@@ -2,15 +2,20 @@
 
 An [Apex JS](https://apexjs.site) app — HTML-first, server-rendered, AI-native.
 
+This starter is a small, themed demo: a landing page, a blog (list + dynamic
+`[slug]` detail) served from a sample-data service, an About page with SEO, a
+dark-mode toggle, themeable components, and an API route that's also an MCP tool.
+
 ## Commands
 
 ```bash
-npm run dev          # dev server → http://localhost:3000
-npm run dev:islands  # static-first islands mode (ship ~zero JS)
-npm run build        # production build
-npm start            # run the production server build
-npm test             # run tests (Vitest)
-npm run typecheck    # strict type-check
+npm run dev           # dev server → http://localhost:3000
+npm run dev:islands   # static-first islands mode (ship ~zero JS)
+npm run build         # production build (server target: SSR + dynamic routes + API/MCP)
+npm start             # run the production server build
+npm run build:static  # static build — prerenders static pages (dynamic routes need the server target)
+npm test              # run tests (Vitest)
+npm run typecheck     # strict type-check
 ```
 
 > `apex` is a project command — run it via `npm run dev`, or install it globally
@@ -21,7 +26,7 @@ npm run typecheck    # strict type-check
 ```
 pages/         File-based routes (.alpine) — server-rendered, then hydrated.
 layouts/       Shared page shells; default.alpine wraps every page (<slot/>).
-components/    Reusable <PascalCase/> components with scoped styles.
+components/    Reusable <PascalCase/> components, themed with Apex tokens (Button, Card, Badge, Counter).
 server/api/    Typed routes (defineApexRoute) — each is a REST endpoint AND an MCP tool.
 services/      Business logic as plain OO classes. Keep routes thin; delegate here.
 shared/        Types/interfaces shared by the backend and the frontend.
@@ -38,7 +43,7 @@ public/        Static assets served as-is.
   class in `services/`. Business logic stays testable in isolation and reusable everywhere.
 - **Types live in `shared/`.** One source of truth; strict TypeScript enforces them across
   backend and frontend — no drift.
-- **Tests by default.** `npm test` runs Vitest (see `tests/greeting.test.ts`).
+- **Tests by default.** `npm test` runs Vitest (see `tests/posts.test.ts`).
 
 ## Generators
 
@@ -53,13 +58,16 @@ apex make middleware auth      # → middleware/auth.ts (runs on every request)
 apex make test billing         # → tests/billing.test.ts
 ```
 
-## Styling
+## Styling & theming
 
-- **Scoped by default.** A `<style scoped>` block in an `.alpine` file is scoped to that component.
-- **Global / shared styles.** Create `app.css` (also `styles/app.css` or `src/app.css`) in the
-  project root — Apex auto-loads and processes it (Vite HMR in dev, bundled in build).
-- **Tailwind.** `npm i tailwindcss @tailwindcss/vite`, then `@import "tailwindcss";` at the top of
-  `app.css`. Apex auto-detects `@tailwindcss/vite` — no extra config.
+- **Tailwind + theme, preinstalled.** `app.css` already imports Tailwind and defines the Apex
+  theme tokens (`--color-primary`, `--radius-radius`, fonts, and a `dark` variant). Components use
+  token classes like `bg-primary` / `text-on-surface` / `rounded-radius`, so they all restyle at once.
+- **Restyle everything:** `apex theme --primary "#4f46e5" --radius 0.5rem` rewrites the managed
+  `/* apex-theme */` block in `app.css`. Or design it visually at https://apexjs.site/theme.html.
+- **Add components:** `apex add <name>` copies a themed component into `components/`. Browse them at
+  https://apexjs.site/ui.html.
+- **Scoped styles** still work too: a `<style scoped>` block in an `.alpine` file is scoped to it.
 
 ## Config & environment
 

package/templates/default/components/Badge.alpine

@@ -0,0 +1,6 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template x-data>
+  <span class="inline-flex items-center gap-1 rounded-radius border border-outline bg-surface-alt px-2 py-0.5 text-xs font-medium text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
+    <slot>Badge</slot>
+  </span>
+</template>

package/templates/default/components/Button.alpine

@@ -0,0 +1,10 @@
+<!-- Apex component adapted from Penguin UI (MIT). Styles via theme tokens
+     (bg-primary / rounded-radius / …) — needs Tailwind + @apex-stack/theme. -->
+<template x-data>
+  <button
+    type="button"
+    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-radius bg-primary border border-primary px-4 py-2 text-sm font-medium tracking-wide text-on-primary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-primary-dark dark:border-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark"
+  >
+    <slot>Button</slot>
+  </button>
+</template>

package/templates/default/components/Card.alpine

@@ -0,0 +1,6 @@
+<!-- Apex component adapted from Penguin UI (MIT). -->
+<template>
+  <div class="flex flex-col gap-4 rounded-radius border border-outline bg-surface-alt p-6 text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">
+    <slot></slot>
+  </div>
+</template>

package/templates/default/components/Counter.alpine

@@ -1,15 +1,10 @@
+<!-- A small interactive component, themed with Apex tokens. `start`/`label` are
+     props; the count lives in client state and updates on click (hydrated). -->
 <template x-data="{ count: Number(start) }">
-  <button class="counter" @click="count++" x-text="label + ': ' + count"></button>
+  <button
+    type="button"
+    class="inline-flex items-center gap-2 rounded-radius border border-outline bg-surface-alt px-4 py-2 text-sm font-medium text-on-surface transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:focus-visible:outline-primary-dark"
+    @click="count++"
+    x-text="label + ': ' + count"
+  ></button>
 </template>
-
-<style scoped>
-  .counter {
-    padding: 0.45rem 0.9rem;
-    border: 1px solid #6366f1;
-    border-radius: 0.5rem;
-    background: #eef2ff;
-    color: #3730a3;
-    cursor: pointer;
-    font: inherit;
-  }
-</style>