@apex-stack/core 0.1.17 → 0.1.18

package/dist/{build-KJF4LJWP.js → build-DXLV2X5C.js}

@@ -5,7 +5,7 @@ import {
   renderIslandsPage,
   renderPage,
   scanPages
-} from "./chunk-7GPCNGGO.js";
+} from "./chunk-VALQEQD3.js";
 import "./chunk-MZVLRU3R.js";
 
 // src/commands/build.ts

package/dist/{chunk-7GPCNGGO.js → chunk-VALQEQD3.js}

@@ -153,7 +153,7 @@ function storesInitialState(stores) {
 }
 
 // src/dev/renderPage.ts
-import { renderComponent, stateIsland } from "@apex-stack/kit";
+import { renderComponent, renderFragment, stateIsland } from "@apex-stack/kit";
 function escAttr(s) {
   return String(s).replace(
     /[&<>"]/g,
@@ -185,10 +185,20 @@ async function renderPage(opts) {
     stores: storesInitialState(stores),
     authoredDefaults: mod.rootData ? mod.rootData() : void 0
   });
+  const available = opts.layouts ?? [];
+  const layoutName = mod.layout === false ? null : typeof mod.layout === "string" ? mod.layout : available.includes("default") ? "default" : null;
+  let body = html;
+  let layoutCss = "";
+  if (layoutName && available.includes(layoutName)) {
+    const layoutMod = await opts.loadModule(`/layouts/${layoutName}.alpine`);
+    const chrome = renderFragment(layoutMod.template, {}, layoutMod.scopeId, opts.registry);
+    body = /<slot\b[^>]*>[\s\S]*?<\/slot>/.test(chrome) ? chrome.replace(/<slot\b[^>]*>[\s\S]*?<\/slot>/, () => html) : chrome + html;
+    layoutCss = layoutMod.css;
+  }
   const doc = shell({
-    body: html,
+    body,
     island: stateIsland(mod.componentId, loaderData),
-    css: mod.css + (opts.componentCss ?? ""),
+    css: mod.css + layoutCss + (opts.componentCss ?? ""),
     pageId: opts.pageId,
     clientHref: opts.clientHref,
     storeIds: stores.map((s) => s.id),

package/dist/cli.js

@@ -109,10 +109,10 @@ var main = defineCommand2({
   },
   subCommands: {
     new: newCommand,
-    dev: () => import("./dev-WS52CGSE.js").then((m) => m.devCommand),
-    build: () => import("./build-KJF4LJWP.js").then((m) => m.buildCommand),
-    start: () => import("./start-XYVCDMPJ.js").then((m) => m.startCommand),
-    make: () => import("./make-62PPHZQY.js").then((m) => m.makeCommand),
+    dev: () => import("./dev-W3D2FCEP.js").then((m) => m.devCommand),
+    build: () => import("./build-DXLV2X5C.js").then((m) => m.buildCommand),
+    start: () => import("./start-254YG2BY.js").then((m) => m.startCommand),
+    make: () => import("./make-JAW22LQZ.js").then((m) => m.makeCommand),
     migrate: () => import("./migrate-NOGFOFV2.js").then((m) => m.migrateCommand),
     mcp: () => import("./mcp-DL4J6JFJ.js").then((m) => m.mcpCommand)
   },

package/dist/{dev-WS52CGSE.js → dev-W3D2FCEP.js}

@@ -20,7 +20,7 @@ var devCommand = defineCommand({
     process.stdout.write(banner());
     const sp = spinner(`Starting dev server${args.islands ? " (islands mode)" : ""}\u2026`);
     try {
-      const { startDevServer } = await import("./server-5QQGUF3R.js");
+      const { startDevServer } = await import("./server-VYF5SRVI.js");
       const { port: actual } = await startDevServer({ root, port, islands: Boolean(args.islands) });
       sp.succeed("Dev server ready");
       ready([

package/dist/{make-62PPHZQY.js → make-JAW22LQZ.js}

@@ -33,6 +33,26 @@ function componentTemplate() {
 </style>
 `;
 }
+function layoutTemplate() {
+  return `<template>
+  <header class="site-header">
+    <nav><a href="/">Home</a></nav>
+  </header>
+  <main>
+    <slot></slot>
+  </main>
+  <footer class="site-footer">
+    <p>Built with Apex JS</p>
+  </footer>
+</template>
+
+<style scoped>
+  .site-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb; }
+  main { max-width: 60rem; margin: 0 auto; padding: 2rem 1.5rem; }
+  .site-footer { padding: 1.5rem; border-top: 1px solid #e5e7eb; color: #6b7280; }
+</style>
+`;
+}
 function storeTemplate(name) {
   return `import { defineStore } from '@apex-stack/core'
 
@@ -69,20 +89,22 @@ function plan(kind, name, root) {
       return { path: join(root, "server", "api", `${name}.ts`), contents: apiTemplate(name) };
     case "store":
       return { path: join(root, "stores", `${name}.ts`), contents: storeTemplate(name) };
+    case "layout":
+      return { path: join(root, "layouts", `${name}.alpine`), contents: layoutTemplate() };
   }
 }
 var makeCommand = defineCommand({
-  meta: { name: "make", description: "Generate a page, component, API route, or store" },
+  meta: { name: "make", description: "Generate a page, component, API route, store, or layout" },
   args: {
-    kind: { type: "positional", required: true, description: "page | component | api | store" },
+    kind: { type: "positional", required: true, description: "page | component | api | store | layout" },
     name: { type: "positional", required: true, description: "Name (about, Counter, todos, \u2026)" },
     root: { type: "string", description: "Project root", default: "." }
   },
   run({ args }) {
     const kind = args.kind;
-    if (kind !== "page" && kind !== "component" && kind !== "api" && kind !== "store") {
+    if (kind !== "page" && kind !== "component" && kind !== "api" && kind !== "store" && kind !== "layout") {
       console.error(`
-  Unknown type "${args.kind}". Use: page | component | api | store
+  Unknown type "${args.kind}". Use: page | component | api | store | layout
 `);
       process.exit(1);
     }

package/dist/{server-5QQGUF3R.js → server-VYF5SRVI.js}

@@ -13,11 +13,11 @@ import {
   renderIslandsPage,
   renderPage,
   scanPages
-} from "./chunk-7GPCNGGO.js";
+} from "./chunk-VALQEQD3.js";
 import "./chunk-MZVLRU3R.js";
 
 // src/dev/server.ts
-import { existsSync as existsSync2 } from "fs";
+import { existsSync as existsSync2, readdirSync } from "fs";
 import { createServer as createHttpServer } from "http";
 import { createRequire } from "module";
 import { join } from "path";
@@ -213,6 +213,8 @@ async function startDevServer(options) {
           (id) => ssrLoad(id)
         );
         const stores = await loadStores(options.root, (id) => ssrLoad(id));
+        const layoutsDir = join(options.root, "layouts");
+        const layouts = existsSync2(layoutsDir) ? readdirSync(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),
@@ -223,6 +225,7 @@ async function startDevServer(options) {
           componentCss,
           stores,
           appCss,
+          layouts,
           transformHtml: (u, doc) => vite.transformIndexHtml(u, doc)
         });
         setResponseHeader(event, "Content-Type", "text/html");

package/dist/{start-XYVCDMPJ.js → start-254YG2BY.js}

@@ -9,7 +9,7 @@ import {
   matchRoute,
   renderIslandsPage,
   renderPage
-} from "./chunk-7GPCNGGO.js";
+} from "./chunk-VALQEQD3.js";
 import "./chunk-MZVLRU3R.js";
 
 // src/commands/start.ts

package/package.json

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