create-lumiose 0.1.0 → 0.3.0

package/dist/scaffold.js

@@ -151,7 +151,8 @@ ${template.description}. Made with Lumiose (\`create-lumiose --template ${templa
 
 ## Layout
 
-- \`src/routes/\`: pages (\`.stsx\`) and endpoints (\`.ts\`); the file path is the URL.
+- \`src/routes/\`: one folder per URL segment, with a \`page.stsx\` page or a \`route.ts\` endpoint;
+  \`layout.stsx\` wraps the pages below it. Other files there are colocated modules.
 - \`vite.config.ts\`: \`lumiose({ mode: "${template.mode}" })\` sets the default route mode.
 - \`.lumiose/\`: generated types and shadow files (git-ignored).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lumiose",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Create a Lumiose app: `pnpm create lumiose my-app --template ssr`. Every project starts agent-ready (AGENTS.md, CLAUDE.md, the lumiose skill).",
   "license": "MIT",
   "repository": {
@@ -17,11 +17,11 @@
   ],
   "type": "module",
   "dependencies": {
-    "@lumiose/cli": "0.1.0",
-    "lumiose": "0.1.0"
+    "@lumiose/cli": "0.3.0",
+    "lumiose": "0.3.0"
   },
   "devDependencies": {
-    "@lumiose/adapter-node": "0.1.0",
+    "@lumiose/adapter-node": "0.3.0",
     "typescript": "^7.0.2",
     "vite": "^8.3.4"
   },

package/templates/minimal/src/routes/page.stsx

@@ -0,0 +1,24 @@
+import { Title } from "lumiose";
+
+export default function Home() {
+  return (
+    <main>
+      <Title>{{name}}</Title>
+      <h1>{{name}}</h1>
+      <p>
+        Edit <code>src/routes/page.stsx</code>: each folder in <code>src/routes</code> with a{" "}
+        <code>page.stsx</code> is a page.
+      </p>
+    </main>
+  );
+}
+
+// One <style> block at the end of the file styles every component in this file.
+<style>
+  main {
+    max-width: 40rem;
+    margin: 4rem auto;
+    padding: 0 1rem;
+    font-family: system-ui, sans-serif;
+  }
+</style>

package/templates/spa/src/components/Counter.stsx

@@ -6,15 +6,16 @@ export function Counter(props: { start?: number }) {
   return (
     <button class={{ counter: true, hot: count() >= 5 }} onClick={() => count.update((n) => n + 1)}>
       Clicked {count()} times
-      <style>
-        .counter {
-          font: inherit;
-          padding: 0.5rem 1rem;
-        }
-        .hot {
-          color: crimson;
-        }
-      </style>
     </button>
   );
 }
+
+<style>
+  .counter {
+    font: inherit;
+    padding: 0.5rem 1rem;
+  }
+  .hot {
+    color: crimson;
+  }
+</style>

package/templates/spa/src/routes/{about.stsx → about/page.stsx}

@@ -5,7 +5,10 @@ export default function About() {
     <main>
       <Title>About · {{name}}</Title>
       <h1>About</h1>
-      <p>Pages are files in src/routes; the layout in src/routes/_layout.stsx wraps them.</p>
+      <p>
+        Pages are page.stsx files in src/routes folders; the layout in src/routes/layout.stsx wraps
+        them.
+      </p>
     </main>
   );
 }

package/templates/spa/src/routes/layout.stsx

@@ -0,0 +1,34 @@
+// The root layout: in an `spa` app it stays mounted while the pages change.
+import { href, type LayoutProps } from "lumiose";
+
+export default function Layout(props: LayoutProps<"/">) {
+  return (
+    <div class="app">
+      <nav>
+        <a href={href("/")}>Home</a>
+        <a href={href("/about")}>About</a>
+      </nav>
+      {props.children}
+    </div>
+  );
+}
+
+<style>
+  .app {
+    max-width: 42rem;
+    margin: 0 auto;
+    padding: 1.5rem 1rem;
+  }
+  nav {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 2rem;
+  }
+</style>
+
+<style global>
+  body {
+    margin: 0;
+    font-family: system-ui, sans-serif;
+  }
+</style>

package/templates/ssr/src/routes/api/{entries.ts → entries/route.ts}

@@ -1,5 +1,5 @@
 // GET /api/entries: the guestbook as JSON.
 import type { Endpoint } from "lumiose";
-import { listEntries } from "../../server/guestbook.server.ts";
+import { listEntries } from "../../../server/guestbook.server.ts";
 
 export const GET: Endpoint<"/api/entries"> = () => Response.json(listEntries());

package/templates/ssr/src/routes/{guestbook.stsx → guestbook/page.stsx}

@@ -1,7 +1,7 @@
 // A form that works without JavaScript: it posts to the `sign` action, which validates the input
 // and redirects back (or returns the errors, which the page reads with actionData()).
 import { actionData, fail, redirect, Title, type ActionContext } from "lumiose";
-import { addEntry, listEntries } from "../server/guestbook.server.ts";
+import { addEntry, listEntries } from "../../server/guestbook.server.ts";
 
 interface Errors {
   name?: string;
@@ -47,25 +47,25 @@ export default function Guestbook() {
           </li>
         ))}
       </ul>
-
-      <style>
-        form {
-          display: grid;
-          gap: 0.25rem;
-          max-width: 24rem;
-        }
-        label {
-          display: grid;
-        }
-        .error {
-          margin: 0;
-          color: crimson;
-        }
-        .entries {
-          padding: 0;
-          list-style: none;
-        }
-      </style>
     </main>
   );
 }
+
+<style>
+  form {
+    display: grid;
+    gap: 0.25rem;
+    max-width: 24rem;
+  }
+  label {
+    display: grid;
+  }
+  .error {
+    margin: 0;
+    color: crimson;
+  }
+  .entries {
+    padding: 0;
+    list-style: none;
+  }
+</style>

package/templates/ssr/src/routes/layout.stsx

@@ -0,0 +1,42 @@
+// The root layout: wraps every page.
+import { href, type LayoutProps } from "lumiose";
+
+export default function Layout(props: LayoutProps<"/">) {
+  return (
+    <div class="app">
+      <header>
+        <a class="brand" href={href("/")}>
+          {{name}}
+        </a>
+        <nav>
+          <a href={href("/guestbook")}>Guestbook</a>
+        </nav>
+      </header>
+      {props.children}
+    </div>
+  );
+}
+
+<style>
+  .app {
+    max-width: 42rem;
+    margin: 0 auto;
+    padding: 1.5rem 1rem;
+  }
+  header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+  }
+  .brand {
+    font-weight: 700;
+  }
+</style>
+
+<style global>
+  body {
+    margin: 0;
+    font-family: system-ui, sans-serif;
+    line-height: 1.6;
+  }
+</style>

package/templates/ssr/src/routes/{index.stsx → page.stsx}

@@ -16,12 +16,12 @@ export default function Home() {
       <Suspense fallback={<p class="count">Counting entries…</p>}>
         <GuestCount />
       </Suspense>
-
-      <style>
-        .count {
-          color: #555;
-        }
-      </style>
     </main>
   );
 }
+
+<style>
+  .count {
+    color: #555;
+  }
+</style>

package/templates/static/src/routes/blog/{[slug].stsx → [slug]/page.stsx}

@@ -1,5 +1,5 @@
 import { notFound, params, Title } from "lumiose";
-import { findPost, posts } from "../../lib/posts.ts";
+import { findPost, posts } from "../../../lib/posts.ts";
 
 /** The paths `lumiose build` prerenders for this route. */
 export async function staticPaths() {
@@ -16,12 +16,12 @@ export default function BlogPost() {
       <h1>{post.title}</h1>
       <time>{post.date}</time>
       <p>{post.body}</p>
-
-      <style>
-        time {
-          color: #666;
-        }
-      </style>
     </article>
   );
 }
+
+<style>
+  time {
+    color: #666;
+  }
+</style>

package/templates/static/src/routes/layout.stsx

@@ -0,0 +1,50 @@
+// The root layout: wraps every page.
+import { href, type LayoutProps } from "lumiose";
+
+export default function Layout(props: LayoutProps<"/">) {
+  return (
+    <div class="site">
+      <header>
+        <a class="brand" href={href("/")}>
+          {{name}}
+        </a>
+        <nav>
+          <a href={href("/about")}>About</a>
+        </nav>
+      </header>
+      {props.children}
+      <footer>Built with Lumiose.</footer>
+    </div>
+  );
+}
+
+<style>
+  .site {
+    max-width: 42rem;
+    margin: 0 auto;
+    padding: 1.5rem 1rem;
+  }
+  header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+  }
+  .brand {
+    font-weight: 700;
+  }
+  footer {
+    margin-top: 3rem;
+    color: #666;
+  }
+</style>
+
+<style global>
+  body {
+    margin: 0;
+    font-family: system-ui, sans-serif;
+    line-height: 1.6;
+  }
+  a {
+    color: #4338ca;
+  }
+</style>

package/templates/static/src/routes/{index.stsx → page.stsx}

@@ -14,17 +14,17 @@ export default function Home() {
           </li>
         ))}
       </ul>
-
-      <style>
-        .posts {
-          padding: 0;
-          list-style: none;
-        }
-        time {
-          margin-left: 0.5rem;
-          color: #666;
-        }
-      </style>
     </main>
   );
 }
+
+<style>
+  .posts {
+    padding: 0;
+    list-style: none;
+  }
+  time {
+    margin-left: 0.5rem;
+    color: #666;
+  }
+</style>

package/templates/minimal/src/routes/index.stsx

@@ -1,22 +0,0 @@
-import { Title } from "lumiose";
-
-export default function Home() {
-  return (
-    <main>
-      <Title>{{name}}</Title>
-      <h1>{{name}}</h1>
-      <p>
-        Edit <code>src/routes/index.stsx</code>: pages are files in <code>src/routes</code>.
-      </p>
-
-      <style>
-        main {
-          max-width: 40rem;
-          margin: 4rem auto;
-          padding: 0 1rem;
-          font-family: system-ui, sans-serif;
-        }
-      </style>
-    </main>
-  );
-}

package/templates/spa/src/routes/_layout.stsx

@@ -1,33 +0,0 @@
-// The root layout: in an `spa` app it stays mounted while the pages change.
-import { href, type LayoutProps } from "lumiose";
-
-export default function Layout(props: LayoutProps<"/">) {
-  return (
-    <div class="app">
-      <nav>
-        <a href={href("/")}>Home</a>
-        <a href={href("/about")}>About</a>
-      </nav>
-      {props.children}
-
-      <style>
-        .app {
-          max-width: 42rem;
-          margin: 0 auto;
-          padding: 1.5rem 1rem;
-        }
-        nav {
-          display: flex;
-          gap: 1rem;
-          margin-bottom: 2rem;
-        }
-      </style>
-      <style global>
-        body {
-          margin: 0;
-          font-family: system-ui, sans-serif;
-        }
-      </style>
-    </div>
-  );
-}

package/templates/ssr/src/routes/_layout.stsx

@@ -1,41 +0,0 @@
-// The root layout: wraps every page.
-import { href, type LayoutProps } from "lumiose";
-
-export default function Layout(props: LayoutProps<"/">) {
-  return (
-    <div class="app">
-      <header>
-        <a class="brand" href={href("/")}>
-          {{name}}
-        </a>
-        <nav>
-          <a href={href("/guestbook")}>Guestbook</a>
-        </nav>
-      </header>
-      {props.children}
-
-      <style>
-        .app {
-          max-width: 42rem;
-          margin: 0 auto;
-          padding: 1.5rem 1rem;
-        }
-        header {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 2rem;
-        }
-        .brand {
-          font-weight: 700;
-        }
-      </style>
-      <style global>
-        body {
-          margin: 0;
-          font-family: system-ui, sans-serif;
-          line-height: 1.6;
-        }
-      </style>
-    </div>
-  );
-}

package/templates/static/src/routes/_layout.stsx

@@ -1,49 +0,0 @@
-// The root layout: wraps every page.
-import { href, type LayoutProps } from "lumiose";
-
-export default function Layout(props: LayoutProps<"/">) {
-  return (
-    <div class="site">
-      <header>
-        <a class="brand" href={href("/")}>
-          {{name}}
-        </a>
-        <nav>
-          <a href={href("/about")}>About</a>
-        </nav>
-      </header>
-      {props.children}
-      <footer>Built with Lumiose.</footer>
-
-      <style>
-        .site {
-          max-width: 42rem;
-          margin: 0 auto;
-          padding: 1.5rem 1rem;
-        }
-        header {
-          display: flex;
-          justify-content: space-between;
-          margin-bottom: 2rem;
-        }
-        .brand {
-          font-weight: 700;
-        }
-        footer {
-          margin-top: 3rem;
-          color: #666;
-        }
-      </style>
-      <style global>
-        body {
-          margin: 0;
-          font-family: system-ui, sans-serif;
-          line-height: 1.6;
-        }
-        a {
-          color: #4338ca;
-        }
-      </style>
-    </div>
-  );
-}