@apex-stack/core 0.6.0 → 0.7.1

package/dist/server-2FN6GV3M.js

@@ -0,0 +1,500 @@
+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 renderNoProjectPage(root) {
+  let apps = [];
+  try {
+    apps = readdirSync(root, { withFileTypes: true }).filter((e) => e.isDirectory() && !IGNORE_DIRS.has(e.name) && !e.name.startsWith(".")).filter((e) => existsSync(join(root, e.name, "pages", "index.alpine"))).map((e) => e.name).slice(0, 16);
+  } catch {
+  }
+  const suggest = apps.length ? `<p class="sub">Did you mean to run it inside one of these apps?</p><ul class="routes">${apps.map((a) => `<li>cd ${esc(a)} &amp;&amp; apex dev</li>`).join("")}</ul>` : `<p class="sub">Scaffold a new app:</p><ul class="routes"><li>npm create apexjs@latest my-app</li></ul>`;
+  const body = `
+    <div class="brand">${MARK} Apex JS <span class="pill nf">No app here</span></div>
+    <p class="kind nf">No pages found</p>
+    <h1>This folder isn't an Apex app</h1>
+    <p class="sub"><code>apex dev</code> looks for <code>pages/*.alpine</code> in <code>${esc(root)}</code>, but found none \u2014 run it from inside your app's folder.</p>
+    ${suggest}
+    <p class="foot">Every Apex app has a <code>pages/</code> directory with at least <code>pages/index.alpine</code>.</p>`;
+  return page("No Apex app \u2014 Apex JS", body);
+}
+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));
+        }
+        if (!existsSync2(join2(options.root, matched.pageId))) {
+          setResponseStatus(event, 404);
+          setResponseHeader(event, "Content-Type", "text/html");
+          return await vite.transformIndexHtml(url, renderNoProjectPage(options.root));
+        }
+        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-TBG2TEOE.js → start-7HSIYO6C.js}

@@ -11,7 +11,7 @@ import {
   matchRoute,
   renderIslandsPage,
   renderPage
-} from "./chunk-DVNFDYEO.js";
+} from "./chunk-7CBGVRBB.js";
 import "./chunk-PMLGY6Z3.js";
 
 // src/commands/start.ts

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

@@ -1,6 +1,6 @@
 import {
   offerExtension
-} from "./chunk-CHBSGOB3.js";
+} from "./chunk-P6KQSPAV.js";
 import {
   VERSION,
   banner,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apex-stack/core",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "The full-stack meta-framework for Alpine.js — CLI and runtime",
   "type": "module",
   "license": "MIT",

package/templates/default/layouts/default.alpine

@@ -7,9 +7,11 @@
       <nav
         class="mx-auto flex max-w-5xl items-center gap-2 px-6 py-4"
         x-data="{ dark: false }"
-        x-init="dark = localStorage.getItem('theme') === 'dark'; document.documentElement.classList.toggle('dark', dark)"
+        x-init="dark = localStorage.getItem('theme') ? localStorage.getItem('theme') === 'dark' : (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches); document.documentElement.classList.toggle('dark', dark)"
+        client:load
       >
-        <a href="/" class="mr-auto font-title text-lg font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
+        <a href="/" class="mr-auto flex items-center gap-2 font-title text-lg font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
+          <img src="/favicon.svg" alt="" width="24" height="24" class="size-6" />
           {{name}}
         </a>
         <a href="/" class="rounded-radius px-3 py-1.5 text-sm font-medium hover:bg-surface-alt dark:hover:bg-surface-dark-alt">Home</a>

package/templates/default/pages/index.alpine

@@ -14,12 +14,16 @@
   }
 </script>
 
-<template x-data="{ show: false }">
+<template x-data>
   <!-- Hero -->
-  <section class="py-8 text-center">
-    <h1 class="font-title text-4xl font-extrabold tracking-tight text-on-surface-strong sm:text-5xl dark:text-on-surface-dark-strong" x-text="title"></h1>
+  <section class="flex flex-col items-center py-10 text-center sm:py-16">
+    <img src="/favicon.svg" alt="Apex JS" width="72" height="72" class="size-16 sm:size-20 drop-shadow" />
+    <p class="mt-5 inline-flex items-center gap-2 rounded-full border border-outline px-3 py-1 text-xs font-medium text-on-surface/80 dark:border-outline-dark dark:text-on-surface-dark/80">
+      Built with <span class="font-title font-bold text-on-surface-strong dark:text-on-surface-dark-strong">Apex&nbsp;JS</span>
+    </p>
+    <h1 class="mt-5 font-title text-4xl font-extrabold tracking-tight text-on-surface-strong sm:text-6xl dark:text-on-surface-dark-strong" x-text="title"></h1>
     <p class="mx-auto mt-4 max-w-2xl text-lg" x-text="tagline"></p>
-    <div class="mt-6 flex flex-wrap justify-center gap-3">
+    <div class="mt-7 flex flex-wrap justify-center gap-3">
       <a href="/blog"><Button>Read the blog</Button></a>
       <a href="https://apexjs.site" class="inline-flex items-center justify-center rounded-radius border border-outline px-4 py-2 text-sm font-medium text-on-surface transition hover:opacity-75 dark:border-outline-dark dark:text-on-surface-dark">Docs</a>
     </div>
@@ -54,8 +58,9 @@
     </ul>
   </section>
 
-  <!-- A hydrated, interactive component -->
-  <section class="mt-10 flex flex-col items-start gap-3">
+  <!-- A hydrated, interactive island. `client:load` hydrates it immediately in
+       islands mode; in default mode the whole page hydrates anyway. -->
+  <section class="mt-10 flex flex-col items-start gap-3" x-data="{ show: false }" client:load>
     <p class="text-sm text-on-surface/80 dark:text-on-surface-dark/80">Hydrated in the browser — click it:</p>
     <Counter start="0" label="Clicks" />
     <button type="button" class="text-sm text-primary hover:opacity-75 dark:text-primary-dark" @click="show = !show" x-text="show ? 'Hide details' : 'How does this work?'"></button>

package/templates/default/public/favicon.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Apex">
+  <defs>
+    <linearGradient id="apexLit" x1="0" y1="1" x2="1" y2="0">
+      <stop offset="0" stop-color="#22d3ee"/>
+      <stop offset="1" stop-color="#6366f1"/>
+    </linearGradient>
+  </defs>
+  <!-- Apex mark: an "A" that is also a summit. Left face lit, right face in shadow. -->
+  <path d="M32 7 L32 35 L20 56 L4 56 Z" fill="url(#apexLit)"/>
+  <path d="M32 7 L60 56 L44 56 L32 35 Z" fill="#6366f1"/>
+</svg>

package/vscode/version.txt

@@ -0,0 +1 @@
+0.1.3

package/dist/chunk-CHBSGOB3.js

@@ -1,42 +0,0 @@
-// src/vscode.ts
-import { spawnSync } from "child_process";
-import { existsSync } from "fs";
-import { createInterface } from "readline";
-import { fileURLToPath } from "url";
-var VSIX = fileURLToPath(new URL("../vscode/apex-alpine.vsix", import.meta.url));
-var WIN = process.platform === "win32";
-function extensionBundled() {
-  return existsSync(VSIX);
-}
-function hasCodeCli() {
-  try {
-    return spawnSync("code", ["--version"], { stdio: "ignore", shell: WIN }).status === 0;
-  } catch {
-    return false;
-  }
-}
-function installExtension() {
-  if (!existsSync(VSIX)) return false;
-  return spawnSync("code", ["--install-extension", VSIX, "--force"], { stdio: "inherit", shell: WIN }).status === 0;
-}
-function promptYesNo(question, def = true) {
-  if (!process.stdin.isTTY) return Promise.resolve(def);
-  const rl = createInterface({ input: process.stdin, output: process.stdout });
-  return new Promise((resolve) => {
-    rl.question(`${question} ${def ? "(Y/n) " : "(y/N) "}`, (answer) => {
-      rl.close();
-      const a = answer.trim().toLowerCase();
-      resolve(a === "" ? def : a === "y" || a === "yes");
-    });
-  });
-}
-async function offerExtension(choice) {
-  if (!extensionBundled() || !hasCodeCli()) return null;
-  const yes = choice ?? await promptYesNo("Install the Apex .alpine VS Code extension (syntax highlighting)?");
-  if (!yes) return null;
-  return installExtension() ? "VS Code extension installed" : "VS Code extension install failed";
-}
-
-export {
-  offerExtension
-};