create-neutron 0.1.0

package/templates/docs/src/styles/search.css

@@ -0,0 +1,225 @@
+/* Search dialog overlay */
+
+.search-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: min(20vh, 8rem);
+  background: hsla(0, 0%, 0%, 0.6);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+}
+
+.search-overlay.is-open {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Search modal */
+.search-modal {
+  width: 100%;
+  max-width: 640px;
+  margin: 0 1rem;
+  background: var(--nd-bg);
+  border: 1px solid var(--nd-border);
+  border-radius: var(--nd-radius);
+  box-shadow: 0 16px 48px hsla(0, 0%, 0%, 0.25);
+  overflow: hidden;
+  transform: translateY(-0.5rem) scale(0.98);
+  transition: transform 0.15s ease;
+}
+
+.search-overlay.is-open .search-modal {
+  transform: translateY(0) scale(1);
+}
+
+/* Search input area */
+.search-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.875rem 1.25rem;
+  border-bottom: 1px solid var(--nd-border);
+}
+
+.search-input-icon {
+  flex-shrink: 0;
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--nd-muted);
+}
+
+.search-input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  font-family: inherit;
+  font-size: 1rem;
+  color: var(--nd-fg);
+}
+
+.search-input::placeholder {
+  color: var(--nd-muted);
+}
+
+.search-input-kbd {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-family: 'Inter', system-ui, sans-serif;
+  font-size: 0.75rem;
+  color: var(--nd-muted);
+  padding: 0.15rem 0.4rem;
+  border: 1px solid var(--nd-border);
+  border-radius: 0.25rem;
+  background: var(--nd-card-bg);
+}
+
+/* Results list */
+.search-results {
+  max-height: 24rem;
+  overflow-y: auto;
+  padding: 0.5rem;
+  scrollbar-width: thin;
+  scrollbar-color: var(--nd-border) transparent;
+}
+
+.search-results::-webkit-scrollbar {
+  width: 4px;
+}
+
+.search-results::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.search-results::-webkit-scrollbar-thumb {
+  background: var(--nd-border);
+  border-radius: 2px;
+}
+
+.search-results:empty::after {
+  content: '';
+  display: none;
+}
+
+.search-no-results {
+  padding: 2rem 1rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--nd-muted);
+}
+
+.search-result {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0.625rem 0.75rem;
+  border-radius: calc(var(--nd-radius) - 2px);
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+
+.search-result:hover,
+.search-result[aria-selected="true"] {
+  background: var(--nd-card-hover);
+}
+
+.search-result-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--nd-fg);
+}
+
+.search-result-path {
+  font-size: 0.75rem;
+  color: var(--nd-muted);
+}
+
+.search-result mark {
+  background: hsla(250, 80%, 67%, 0.25);
+  color: var(--nd-accent);
+  border-radius: 2px;
+  padding: 0 1px;
+}
+
+/* Search footer */
+.search-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 1.25rem;
+  border-top: 1px solid var(--nd-border);
+  font-size: 0.75rem;
+  color: var(--nd-muted);
+}
+
+.search-footer-keys {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.search-footer-key {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.search-footer-key kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.25rem;
+  font-family: inherit;
+  font-size: 0.625rem;
+  border: 1px solid var(--nd-border);
+  border-radius: 0.2rem;
+  background: var(--nd-card-bg);
+}
+
+/* Trigger button (in header) */
+.search-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--nd-border);
+  border-radius: var(--nd-radius);
+  background: var(--nd-card-bg);
+  color: var(--nd-muted);
+  font-family: inherit;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: border-color 0.15s ease, color 0.15s ease;
+  min-width: 12rem;
+}
+
+.search-trigger:hover {
+  border-color: var(--nd-muted);
+  color: var(--nd-fg);
+}
+
+.search-trigger-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.search-trigger-text {
+  flex: 1;
+  text-align: left;
+}
+
+.search-trigger-kbd {
+  font-size: 0.75rem;
+  opacity: 0.6;
+}

package/templates/docs/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": ["src/**/*"]
+}

package/templates/docs/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import preact from "@preact/preset-vite";
+
+export default defineConfig({
+  plugins: [preact()],
+});

package/templates/full/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.neutron

package/templates/full/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECT_NAME__</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+  </html>

package/templates/full/neutron.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "@neutron-build/core";
+
+export default defineConfig({
+  runtime: "__RUNTIME__",
+});

package/templates/full/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "neutron dev",
+    "build": "neutron build",
+    "build:vercel": "neutron build --preset vercel",
+    "start": "neutron start",
+    "preview": "neutron preview",
+    "release:check": "neutron release-check --preset vercel"
+  },
+  "dependencies": {
+    "@neutron-build/core": "__NEUTRON_VERSION__",
+    "@neutron-build/cli": "__NEUTRON_CLI_VERSION__",
+    "preact": "^10.25.4"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.9.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
+  }
+}

package/templates/full/src/components/Counter.tsx

@@ -0,0 +1,13 @@
+import { useState } from "preact/hooks";
+
+export function Counter(props: { start?: number }) {
+  const [count, setCount] = useState(props.start || 0);
+
+  return (
+    <div style="display: inline-flex; align-items: center; gap: 0.5rem;">
+      <button onClick={() => setCount((value) => value - 1)}>-</button>
+      <span>{count}</span>
+      <button onClick={() => setCount((value) => value + 1)}>+</button>
+    </div>
+  );
+}

package/templates/full/src/main.tsx

@@ -0,0 +1,5 @@
+import { init, registerRoutes } from "@neutron-build/core/client";
+import { routes } from "virtual:neutron/routes";
+
+registerRoutes(routes);
+void init();

package/templates/full/src/routes/(marketing)/pricing.tsx

@@ -0,0 +1,15 @@
+export const config = { mode: "static" };
+
+export default function Pricing() {
+  return (
+    <section>
+      <h2>Pricing</h2>
+      <p>This route lives in a <code>(marketing)</code> route group and renders at <code>/pricing</code>.</p>
+      <ul>
+        <li>Starter: $0</li>
+        <li>Pro: $29</li>
+        <li>Scale: Contact us</li>
+      </ul>
+    </section>
+  );
+}

package/templates/full/src/routes/_layout.tsx

@@ -0,0 +1,17 @@
+export default function Layout(props: { children?: unknown }) {
+  return (
+    <div style="max-width: 900px; margin: 0 auto; padding: 2rem; font-family: system-ui, sans-serif;">
+      <header style="margin-bottom: 1.5rem;">
+        <h1 style="margin: 0;">__PROJECT_NAME__</h1>
+        <p style="color: #666;">Neutron full-stack template</p>
+      </header>
+      <nav style="display: flex; gap: 0.75rem; margin-bottom: 1.5rem;">
+        <a href="/">Home</a>
+        <a href="/pricing">Pricing</a>
+        <a href="/app/dashboard">Dashboard</a>
+        <a href="/app/settings">Settings</a>
+      </nav>
+      <main>{props.children}</main>
+    </div>
+  );
+}

package/templates/full/src/routes/app/dashboard.tsx

@@ -0,0 +1,28 @@
+import type { LoaderArgs } from "@neutron-build/core";
+
+export const config = { mode: "app", cache: { maxAge: 30, loaderMaxAge: 10 } };
+
+export async function loader({ request }: LoaderArgs) {
+  const url = new URL(request.url);
+  const region = url.searchParams.get("region") || "us-east-1";
+  return {
+    region,
+    rps: 1200,
+    p95: 28,
+    loadedAt: new Date().toISOString(),
+  };
+}
+
+export default function Dashboard(props: {
+  data?: { region: string; rps: number; p95: number; loadedAt: string };
+}) {
+  return (
+    <section>
+      <h2>Dashboard</h2>
+      <p>Region: {props.data?.region}</p>
+      <p>RPS: {props.data?.rps}</p>
+      <p>p95: {props.data?.p95} ms</p>
+      <p>Loaded at {props.data?.loadedAt}</p>
+    </section>
+  );
+}

package/templates/full/src/routes/app/settings.tsx

@@ -0,0 +1,42 @@
+import { Form } from "@neutron-build/core/client";
+import type { ActionArgs } from "@neutron-build/core";
+
+export const config = { mode: "app" };
+
+export async function loader() {
+  return { alerts: "all" };
+}
+
+export async function action({ request }: ActionArgs) {
+  const formData = await request.formData();
+  const alerts = String(formData.get("alerts") || "all");
+  return Response.json({ ok: true, alerts, savedAt: new Date().toISOString() });
+}
+
+export default function Settings(props: {
+  data?: { alerts: string };
+  actionData?: { ok: boolean; alerts: string; savedAt: string };
+}) {
+  return (
+    <section>
+      <h2>Settings</h2>
+      <Form method="post" style={{ display: "grid", gap: "0.75rem", maxWidth: "360px" }}>
+        <label>
+          Alerts
+          <select name="alerts" defaultValue={props.data?.alerts || "all"}>
+            <option value="all">All</option>
+            <option value="critical">Critical only</option>
+            <option value="none">None</option>
+          </select>
+        </label>
+        <button type="submit">Save</button>
+      </Form>
+
+      {props.actionData?.ok ? (
+        <p style={{ marginTop: "1rem" }}>
+          Saved <strong>{props.actionData.alerts}</strong> at {props.actionData.savedAt}
+        </p>
+      ) : null}
+    </section>
+  );
+}

package/templates/full/src/routes/index.tsx

@@ -0,0 +1,31 @@
+import { Island } from "@neutron-build/core/client";
+import { Counter } from "../components/Counter";
+
+export const config = { mode: "static" };
+
+export async function loader() {
+  return {
+    title: "__PROJECT_NAME__",
+    generatedAt: new Date().toISOString().slice(0, 19).replace("T", " "),
+  };
+}
+
+export default function Home(props: { data?: { title: string; generatedAt: string } }) {
+  return (
+    <section>
+      <h2>{props.data?.title}</h2>
+      <p>
+        Static landing page with optional islands + app route links.
+      </p>
+      <ul>
+        <li><a href="/pricing">Pricing (route group)</a></li>
+        <li><a href="/app/dashboard">Dashboard (SSR app route)</a></li>
+        <li><a href="/app/settings">Settings (action + Form)</a></li>
+      </ul>
+      <Island component={Counter} client="visible" id="full-counter" start={2} />
+      <p style={{ marginTop: "1rem" }}>
+        Generated at <strong>{props.data?.generatedAt}</strong>.
+      </p>
+    </section>
+  );
+}

package/templates/full/src/routes/users/[id].tsx

@@ -0,0 +1,26 @@
+import type { LoaderArgs } from "@neutron-build/core";
+
+export const config = { mode: "app", cache: { maxAge: 30 } };
+
+export async function loader({ params }: LoaderArgs) {
+  const id = params.id || "1";
+  return {
+    user: {
+      id,
+      name: `User ${id}`,
+      email: `user${id}@example.com`,
+    },
+  };
+}
+
+export default function UserRoute(props: {
+  data?: { user: { id: string; name: string; email: string } };
+}) {
+  return (
+    <section>
+      <h2>{props.data?.user.name}</h2>
+      <p>ID: {props.data?.user.id}</p>
+      <p>Email: {props.data?.user.email}</p>
+    </section>
+  );
+}

package/templates/full/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}

package/templates/full/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import preact from "@preact/preset-vite";
+import { neutronPlugin } from "@neutron-build/core/vite";
+
+export default defineConfig({
+  plugins: [preact(), neutronPlugin()],
+});

package/templates/marketing/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.neutron

package/templates/marketing/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECT_NAME__</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+  </html>

package/templates/marketing/neutron.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "@neutron-build/core";
+
+export default defineConfig({
+  runtime: "__RUNTIME__",
+});

package/templates/marketing/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "neutron dev",
+    "build": "neutron build",
+    "build:static": "neutron build --preset static",
+    "start": "neutron start",
+    "preview": "neutron preview",
+    "release:check": "neutron release-check --preset static"
+  },
+  "dependencies": {
+    "@neutron-build/core": "__NEUTRON_VERSION__",
+    "@neutron-build/cli": "__NEUTRON_CLI_VERSION__",
+    "preact": "^10.25.4"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.9.4",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7"
+  }
+}

package/templates/marketing/src/components/Counter.tsx

@@ -0,0 +1,14 @@
+import { useState } from "preact/hooks";
+
+export function Counter(props: { start?: number }) {
+  const [count, setCount] = useState(props.start || 0);
+
+  return (
+    <div style="margin-top: 1rem; display: inline-flex; gap: 0.5rem; align-items: center;">
+      <strong>Island Counter:</strong>
+      <button onClick={() => setCount((value) => value - 1)}>-</button>
+      <span>{count}</span>
+      <button onClick={() => setCount((value) => value + 1)}>+</button>
+    </div>
+  );
+}

package/templates/marketing/src/main.tsx

@@ -0,0 +1,5 @@
+import { init, registerRoutes } from "@neutron-build/core/client";
+import { routes } from "virtual:neutron/routes";
+
+registerRoutes(routes);
+void init();

package/templates/marketing/src/routes/_layout.tsx

@@ -0,0 +1,16 @@
+export default function Layout(props: { children?: unknown }) {
+  return (
+    <div style="max-width: 920px; margin: 0 auto; padding: 2rem; font-family: system-ui, sans-serif;">
+      <header style="margin-bottom: 1.5rem;">
+        <h1 style="margin: 0;">__PROJECT_NAME__</h1>
+        <p style="color: #666; margin-top: 0.5rem;">Neutron marketing template</p>
+      </header>
+      <nav style="display: flex; gap: 0.75rem; margin-bottom: 1.5rem;">
+        <a href="/">Home</a>
+        <a href="/about">About</a>
+        <a href="/blog">Blog</a>
+      </nav>
+      <main>{props.children}</main>
+    </div>
+  );
+}

package/templates/marketing/src/routes/about.tsx

@@ -0,0 +1,10 @@
+export const config = { mode: "static" };
+
+export default function About() {
+  return (
+    <section>
+      <h2>About</h2>
+      <p>This route ships as static HTML by default.</p>
+    </section>
+  );
+}

package/templates/marketing/src/routes/blog/[slug].tsx

@@ -0,0 +1,34 @@
+const posts = [
+  { slug: "launch", title: "Launch Day", body: "We launched a static-first site." },
+  { slug: "roadmap", title: "Roadmap", body: "Next we add app routes where needed." },
+];
+
+export const config = { mode: "static" };
+
+export async function getStaticPaths() {
+  return {
+    paths: posts.map((post) => ({
+      params: { slug: post.slug },
+      props: { post },
+    })),
+  };
+}
+
+export async function loader({ params }: { params: { slug?: string } }) {
+  const post = posts.find((entry) => entry.slug === params.slug) || posts[0];
+  return { post };
+}
+
+export default function BlogPost(props: {
+  data?: { post: { title: string; body: string } };
+}) {
+  return (
+    <article>
+      <h2>{props.data?.post?.title}</h2>
+      <p>{props.data?.post?.body}</p>
+      <p>
+        <a href="/blog">Back to blog</a>
+      </p>
+    </article>
+  );
+}

package/templates/marketing/src/routes/blog/index.tsx

@@ -0,0 +1,27 @@
+const posts = [
+  { slug: "launch", title: "Launch Day" },
+  { slug: "roadmap", title: "Roadmap" },
+];
+
+export const config = { mode: "static" };
+
+export async function loader() {
+  return { posts };
+}
+
+export default function BlogIndex(props: {
+  data?: { posts: Array<{ slug: string; title: string }> };
+}) {
+  return (
+    <section>
+      <h2>Blog</h2>
+      <ul>
+        {props.data?.posts.map((post) => (
+          <li key={post.slug}>
+            <a href={"/blog/" + post.slug}>{post.title}</a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}