create-ramonyx-app 0.7.0 → 1.1.0

package/README.md

@@ -2,7 +2,7 @@
 
 Scaffolder aplikasi Ramonyx — SSR React + hydration, file routing `src/routes`.
 
-> **Alpha (0.7.0)** — butuh **Node.js ≥ 24**.
+> **Alpha (1.1.0)** — butuh **Node.js ≥ 24**.
 
 ## Pemakaian
 

package/dist/cli.js

@@ -4,7 +4,9 @@
 import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
 import { basename, dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
-var templateDir = join(dirname(fileURLToPath(import.meta.url)), "..", "template");
+var packageRoot = join(dirname(fileURLToPath(import.meta.url)), "..");
+var templateDir = join(packageRoot, "template");
+var agentTemplateDir = join(packageRoot, "template-agent");
 var USAGE = `create-ramonyx-app \u2014 buat aplikasi Ramonyx baru
 
 Penggunaan:
@@ -13,8 +15,9 @@ Penggunaan:
   pnpm create:app <dir>              # di dalam repo (workspace)
 
 Opsi:
-  --force, -f   Timpa berkas template walau direktori tujuan tidak kosong
-  --help, -h    Tampilkan bantuan ini
+  --force, -f       Timpa berkas template walau direktori tujuan tidak kosong
+  --with-agent-docs Sertakan AGENTS.md + skill agent opt-in (tidak default)
+  --help, -h        Tampilkan bantuan ini
 `;
 function usage(exitCode) {
   const write = exitCode === 0 ? console.log : console.error;
@@ -23,10 +26,13 @@ function usage(exitCode) {
 }
 var args = process.argv.slice(2);
 var force = false;
+var withAgentDocs = false;
 var target;
 for (const arg of args) {
   if (arg === "--force" || arg === "-f") {
     force = true;
+  } else if (arg === "--with-agent-docs") {
+    withAgentDocs = true;
   } else if (arg === "--help" || arg === "-h") {
     usage(0);
   } else if (arg.startsWith("-")) {
@@ -71,6 +77,9 @@ function copy(source, destination) {
   writeFileSync(join(dirname(destination), name), text);
 }
 copy(templateDir, targetDir);
+if (withAgentDocs) {
+  copy(agentTemplateDir, targetDir);
+}
 console.log(`\u2713 App "${appName}" dibuat di ${targetDir}
 
 Langkah berikutnya:
@@ -78,4 +87,4 @@ Langkah berikutnya:
   cd ${target}
   pnpm install   # atau npm install
   pnpm start     # http://127.0.0.1:3000
-`);
+${withAgentDocs ? "\nAgent docs: AGENTS.md + .opencode/skills/ramonyx/SKILL.md sudah disertakan.\n" : ""}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ramonyx-app",
-  "version": "0.7.0",
+  "version": "1.1.0",
   "description": "Scaffolder aplikasi Ramonyx (SSR React + hydration, file routing src/routes).",
   "license": "MIT",
   "type": "module",
@@ -10,6 +10,7 @@
   "files": [
     "dist",
     "template",
+    "template-agent",
     "README.md",
     "LICENSE"
   ],

package/template/README.md

@@ -7,13 +7,16 @@ Aplikasi [Ramonyx](https://github.com/ramonyx/ramonyx) — framework full-stack
 ## Menjalankan
 
 ```bash
-pnpm install
+pnpm install   # atau: bun install / npm install
 pnpm dev       # Vite + HMR (http://localhost:5173) → SSR :3000
 pnpm build     # bundel klien (wajib sebelum start produksi)
 pnpm start     # http://127.0.0.1:3000 (NODE_ENV=production otomatis)
 ```
 
-Perintah memakai CLI **`ramonyx`** (`@ramonyx/devtools`): `ramonyx dev|build|start|doctor`.
+Dengan Bun: `bun run dev`, `bun run build`, `bun run start`. Perintah memakai CLI **`ramonyx`**
+(`@ramonyx/devtools`) yang terpasang **lokal** di `node_modules/.bin`. Untuk memanggil CLI di luar
+package script, gunakan runner package manager: `bunx ramonyx …`, `pnpm exec ramonyx …`, atau
+`npx ramonyx …`. `ramonyx …` tanpa runner hanya tersedia setelah instalasi global.
 
 ## Struktur
 

package/template/package.json

@@ -11,20 +11,23 @@
     "dev": "ramonyx dev"
   },
   "dependencies": {
-    "@ramonyx/adapter-runtime": "^0.7.0",
-    "@ramonyx/bundler": "^0.7.0",
-    "@ramonyx/compiler": "^0.7.0",
-    "@ramonyx/devtools": "^0.7.0",
-    "@ramonyx/react": "^0.7.0",
-    "@ramonyx/security": "^0.7.0",
-    "@ramonyx/server": "^0.7.0",
-    "@ramonyx/ssr": "^0.7.0",
-    "ramonyx": "^0.7.0",
+    "@ramonyx/adapter-runtime": "^1.1.0",
+    "@ramonyx/bundler": "^1.1.0",
+    "@ramonyx/compiler": "^1.1.0",
+    "@ramonyx/devtools": "^1.1.0",
+    "@ramonyx/react": "^1.1.0",
+    "@ramonyx/security": "^1.1.0",
+    "@ramonyx/server": "^1.1.0",
+    "@ramonyx/ssr": "^1.1.0",
+    "ramonyx": "^1.1.0",
     "react": "19.3.1",
     "react-dom": "19.3.1"
   },
   "devDependencies": {
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0"
+  },
+  "imports": {
+    "#routes": "./.ramonyx/routes.ts"
   }
 }

package/template/src/favicon.ts

@@ -0,0 +1,3 @@
+/** Ikon data-URI agar aplikasi tidak meminta /favicon.ico dan mencatat 404. */
+export const FAVICON =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23151811'/%3E%3Cpath d='M16 5l11 11-11 11L5 16z' fill='%23233fce'/%3E%3C/svg%3E";

package/template/src/routes/[...slug]/page.tsx

@@ -1,18 +1,27 @@
 import type { PageProps } from "@ramonyx/react";
 
-export const metadata = { title: "Tidak ditemukan", status: 404 };
+import { FAVICON } from "../../favicon.ts";
+
+export const metadata = {
+  title: "Tidak ditemukan",
+  status: 404,
+  head: `<link rel="icon" href="${FAVICON}" type="image/svg+xml" />`,
+};
 /** Halaman 404 catch-all — tidak diprerender (rutenya tak terbatas). */
 export const prerender = false;
 
 export default function TidakDitemukan({ params }: PageProps<unknown>) {
   return (
-    <main>
-      <h1>404 — Tidak ditemukan</h1>
+    <main className="rw-main rw-notfound">
+      <p className="rw-kicker">404 · route not found</p>
+      <h1>Halaman tidak ditemukan.</h1>
       <p>
-        Halaman <code>/{params.slug}</code> tidak ada.
+        Tidak ada rute untuk <code>/{params.slug}</code>.
       </p>
       <p>
-        <a href="/">Kembali ke beranda</a>
+        <a className="rw-button" href="/">
+          Kembali ke beranda
+        </a>
       </p>
     </main>
   );

package/template/src/routes/layout.tsx

@@ -1,15 +1,36 @@
 import type { LayoutProps } from "@ramonyx/react";
 
+import { WELCOME_CSS } from "../welcome-css.ts";
+
 export default function RootLayout({ children }: LayoutProps) {
   return (
-    <div className="shell">
-      <header className="topbar">
-        <strong>__APP_NAME__</strong>
-        <span>Ramonyx</span>
+    <div className="rw-shell">
+      <style>{WELCOME_CSS}</style>
+      <header className="rw-top">
+        <a className="rw-brand" href=".">
+          <span className="rw-mark" aria-hidden="true" />
+          __APP_NAME__
+          <small>ramonyx</small>
+        </a>
+        <nav className="rw-nav" aria-label="Project links">
+          <a href="/api/halo/dunia">API</a>
+          <a href="https://ramonyx.devmoon.net/docs/for-agents">For agents</a>
+          <a href="https://github.com/RamonyxJS/ramonyx">GitHub</a>
+          <a className="rw-nav-strong" href="https://ramonyx.devmoon.net/docs/getting-started">
+            Docs
+          </a>
+        </nav>
       </header>
       {children}
-      <footer className="kaki">
-        Dibuat dengan Ramonyx — <code>src/routes</code> berisi halaman & API.
+      <footer className="rw-footer">
+        <span>
+          Built with <a href="https://ramonyx.devmoon.net/">Ramonyx</a> · MIT
+        </span>
+        <nav aria-label="Footer">
+          <a href="https://ramonyx.devmoon.net/docs/cli">CLI</a>
+          <a href="https://ramonyx.devmoon.net/docs/deployment">Deploy</a>
+          <a href="https://ramonyx.devmoon.net/docs/troubleshooting">Troubleshooting</a>
+        </nav>
       </footer>
     </div>
   );

package/template/src/routes/page.tsx

@@ -3,17 +3,19 @@ import { Image } from "@ramonyx/react/assets";
 import type { PageActionContext } from "ramonyx";
 import { useState } from "react";
 
+import { FAVICON } from "../favicon.ts";
+
 export const metadata = {
   title: "__APP_NAME__",
-  description: "Aplikasi Ramonyx — SSR React, file routing, dan server actions.",
+  description: "A Ramonyx app with SSR React, file routing, server actions, and secure defaults.",
+  head: `<link rel="icon" href="${FAVICON}" type="image/svg+xml" />`,
 };
+
 /** Cache data loader 60 dtk (ADR-0066) — hapus atau sesuaikan bila data harus selalu segar. */
 export const revalidate = 60;
 
 export async function loader({ assets }: { assets?: { url(path: string): string | undefined } }) {
   return {
-    pesan: "Halo dari SSR Ramonyx",
-    fitur: ["SSR React", "hydration", "route API"],
     logo: assets?.url("logo.svg"),
   };
 }
@@ -22,50 +24,186 @@ export async function loader({ assets }: { assets?: { url(path: string): string
 export function action({ formData }: PageActionContext) {
   const nama = String(formData.get("nama") ?? "").trim();
   if (nama.length < 2) {
-    return { errors: { nama: "Nama minimal 2 karakter" } };
+    return { errors: { nama: "Enter at least two characters." } };
   }
-  return { message: `Halo, ${nama}!` };
+  return { message: `Hello, ${nama}!` };
 }
 
 /** Komponen interaktif: server merender 0, klik menambah setelah hydration. */
 function Counter() {
   const [hitungan, setHitungan] = useState(0);
   return (
-    <p>
-      <button type="button" onClick={() => setHitungan((nilai) => nilai + 1)}>
-        Klik saya: {hitungan}
-      </button>
-    </p>
+    <button type="button" className="rw-counter" onClick={() => setHitungan((nilai) => nilai + 1)}>
+      Clicks: <strong>{hitungan}</strong>
+    </button>
   );
 }
 
-export default function Beranda({
-  data,
-  action,
-}: PageProps<{ pesan: string; fitur: string[]; logo?: string }>) {
+export default function Welcome({ data, action }: PageProps<{ logo?: string }>) {
   return (
-    <main>
-      <h1>
-        <Image src={data.logo} alt="Logo" width={32} height={32} /> {data.pesan}
-      </h1>
-      <ul>
-        {data.fitur.map((item) => (
-          <li key={item}>{item}</li>
-        ))}
-      </ul>
-      <Counter />
-      <h2>Form dengan action</h2>
-      <form method="post">
-        <label>
-          Nama: <input name="nama" />
-        </label>
-        <button type="submit">Kirim</button>
-      </form>
-      {action?.errors?.nama !== undefined ? <p role="alert">{action.errors.nama}</p> : null}
-      {action?.message !== undefined ? <p role="status">{action.message}</p> : null}
-      <p>
-        Coba API dinamis: <a href="/api/halo/dunia">/api/halo/dunia</a>
-      </p>
+    <main className="rw-main">
+      <section className="rw-hero">
+        <div className="rw-hero-copy">
+          <p className="rw-kicker">
+            <span className="rw-dot" aria-hidden="true" />
+            Development server is running
+          </p>
+          <h1>
+            Your app is live.
+            <br />
+            <span>Now make it yours.</span>
+          </h1>
+          <p className="rw-lede">
+            Ramonyx is a full-stack TypeScript framework with file routing, SSR React, server
+            actions, and secure defaults. Edit one file and the browser updates; ship the same route
+            tree to Node, static hosting, or the edge.
+          </p>
+          <div className="rw-actions">
+            <a className="rw-button" href="#build">
+              Start building <span aria-hidden="true">↓</span>
+            </a>
+            <a
+              className="rw-quiet"
+              href="https://ramonyx.devmoon.net/docs/getting-started"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Read the docs <span aria-hidden="true">↗</span>
+            </a>
+          </div>
+          <ul className="rw-stack" aria-label="Stack">
+            <li>Node 24+</li>
+            <li>React 19</li>
+            <li>TypeScript</li>
+            <li>Edge-ready</li>
+          </ul>
+        </div>
+
+        <aside className="rw-status" aria-label="Project status">
+          <div className="rw-status-head">
+            <span>APP STATUS</span>
+            <span className="rw-live">ready</span>
+          </div>
+          <p className="rw-url">localhost:5173</p>
+          <p className="rw-status-sub">SSR + hydration · Vite HMR</p>
+          <div className="rw-brandline">
+            <Image src={data.logo} alt="__APP_NAME__ logo" width={25} height={25} />
+            <span>__APP_NAME__</span>
+          </div>
+          <pre className="rw-tree">{`src/routes/
+├─ page.tsx             /
+├─ layout.tsx           shell
+├─ api/halo/[nama].ts   GET /api/halo/:nama
+└─ [...slug]/page.tsx   404`}</pre>
+          <div className="rw-status-foot">
+            <span>secure defaults on</span>
+            <span>1 file changed → HMR</span>
+          </div>
+        </aside>
+      </section>
+
+      <section className="rw-section" id="build">
+        <div className="rw-section-head">
+          <span className="rw-index">01</span>
+          <h2>Start here</h2>
+          <p>Three small edits take this from a welcome screen to your application.</p>
+        </div>
+        <div className="rw-steps">
+          <article className="rw-step">
+            <span className="rw-step-index">01</span>
+            <h3>Make this page yours</h3>
+            <p>
+              This route is a normal React component with a server loader. Change the copy first.
+            </p>
+            <code>src/routes/page.tsx</code>
+          </article>
+          <article className="rw-step">
+            <span className="rw-step-index">02</span>
+            <h3>Add a route</h3>
+            <p>Create a folder and a page file. The filename becomes the URL; no route config.</p>
+            <a href="https://ramonyx.devmoon.net/docs/routing">Open routing docs →</a>
+          </article>
+          <article className="rw-step">
+            <span className="rw-step-index">03</span>
+            <h3>Ship it</h3>
+            <p>
+              Build for Node, export static pages, or bundle the same app as an edge fetch handler.
+            </p>
+            <a href="https://ramonyx.devmoon.net/docs/deployment">See deploy targets →</a>
+          </article>
+        </div>
+      </section>
+
+      <section className="rw-section" aria-labelledby="rw-try-title">
+        <div className="rw-section-head">
+          <span className="rw-index">02</span>
+          <h2 id="rw-try-title">Try the framework</h2>
+          <p>Both examples use the real runtime: hydration and a POST action, not a mock.</p>
+        </div>
+        <div className="rw-demo">
+          <div className="rw-demo-panel">
+            <span className="rw-label">HYDRATION</span>
+            <h2>Server first. Then interactive.</h2>
+            <p>
+              The button arrives as static HTML with zero clicks. React hydrates it in place, so the
+              first click is instant and the page stays useful without JavaScript.
+            </p>
+            <Counter />
+          </div>
+          <div className="rw-demo-panel">
+            <span className="rw-label">SERVER ACTION</span>
+            <h2>A form without a client API.</h2>
+            <p>
+              This form posts to the same route. Validation and mutation run on the server, then the
+              page re-renders. Disable JavaScript and it still works.
+            </p>
+            <form method="post" className="rw-form">
+              <label htmlFor="nama">Your name</label>
+              <div className="rw-form-row">
+                <input id="nama" name="nama" placeholder="Rina" autoComplete="name" />
+                <button type="submit">Send</button>
+              </div>
+            </form>
+            {action?.errors?.nama !== undefined ? (
+              <p className="rw-error" role="alert">
+                {action.errors.nama}
+              </p>
+            ) : null}
+            {action?.message !== undefined ? (
+              <p className="rw-success" role="status">
+                {action.message}
+              </p>
+            ) : null}
+            <p className="rw-api-link">
+              API route: <a href="/api/halo/dunia">/api/halo/dunia</a>
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="rw-features" aria-label="Framework features">
+        <article className="rw-feature">
+          <h3>File routing</h3>
+          <p>Folders become URLs. Layouts, error boundaries, and API methods live beside pages.</p>
+        </article>
+        <article className="rw-feature">
+          <h3>SSR + streaming</h3>
+          <p>
+            Render React on the server, hydrate only what the page needs, and opt into streaming.
+          </p>
+        </article>
+        <article className="rw-feature">
+          <h3>Typed actions</h3>
+          <p>Forms validate at the boundary with Standard Schema and work without JavaScript.</p>
+        </article>
+        <article className="rw-feature">
+          <h3>Secure by default</h3>
+          <p>
+            CSP nonces, CSRF, safe cookies, body limits, and SSRF guards are available in the
+            framework.
+          </p>
+        </article>
+      </section>
     </main>
   );
 }

package/template/src/welcome-css.ts

@@ -0,0 +1,448 @@
+// Gaya halaman sambutan template. Sengaja berupa string agar SSR dan bundle klien memakai
+// stylesheet yang sama tanpa bergantung pada konfigurasi CSS global.
+export const WELCOME_CSS = `
+:root {
+  color-scheme: light dark;
+  --rw-bg: #f3f1e8;
+  --rw-surface: #fbfaf5;
+  --rw-ink: #14170f;
+  --rw-muted: #626858;
+  --rw-line: #d5d2c2;
+  --rw-line-strong: #b9b5a2;
+  --rw-blue: #233fce;
+  --rw-blue-soft: #e4e7fb;
+  --rw-orange: #d95a2b;
+  --rw-dark: #151811;
+  --rw-dark-2: #1c2117;
+  --rw-dark-fg: #edf0e2;
+  --rw-dark-muted: #a7ae9a;
+  --rw-dark-line: #30362a;
+  --rw-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
+  --rw-sans: "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
+  --rw-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
+  --rw-max: 1180px;
+  --rw-radius: 4px;
+}
+
+html { scroll-behavior: smooth; }
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  background: var(--rw-bg);
+  color: var(--rw-ink);
+  font: 400 16px/1.6 var(--rw-sans);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+::selection { background: var(--rw-blue); color: #fff; }
+a { color: inherit; text-decoration-color: color-mix(in srgb, var(--rw-blue) 45%, transparent); text-underline-offset: 3px; }
+a:hover { text-decoration-color: var(--rw-blue); }
+:focus-visible { outline: 2px solid var(--rw-blue); outline-offset: 3px; }
+code, pre { font-family: var(--rw-mono); }
+button, input { font: inherit; }
+
+.rw-shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow-x: clip;
+  background-image: linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), var(--rw-line) calc(100% - 1px));
+  background-size: 25% 100%;
+  background-repeat: repeat-x;
+}
+
+.rw-main { width: min(100% - 48px, var(--rw-max)); margin: 0 auto; flex: 1; }
+
+.rw-top {
+  width: min(100% - 48px, var(--rw-max));
+  margin: 0 auto;
+  min-height: 72px;
+  display: flex;
+  align-items: center;
+  gap: 28px;
+  border-bottom: 1px solid var(--rw-line);
+}
+.rw-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 11px;
+  text-decoration: none;
+  font-family: var(--rw-serif);
+  font-size: 25px;
+  line-height: 1;
+  letter-spacing: -0.015em;
+}
+.rw-mark {
+  width: 12px;
+  height: 12px;
+  background: var(--rw-blue);
+  transform: rotate(45deg);
+  flex: 0 0 auto;
+}
+.rw-brand small {
+  font: 500 10px/1 var(--rw-mono);
+  letter-spacing: 0.08em;
+  color: var(--rw-muted);
+  border-left: 1px solid var(--rw-line-strong);
+  padding-left: 11px;
+}
+.rw-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; }
+.rw-nav a {
+  text-decoration: none;
+  color: var(--rw-muted);
+  font-size: 14px;
+  padding: 5px 0;
+  border-bottom: 1px solid transparent;
+}
+.rw-nav a:hover { color: var(--rw-ink); border-bottom-color: var(--rw-blue); }
+.rw-nav .rw-nav-strong {
+  color: var(--rw-ink);
+  border: 1px solid var(--rw-line-strong);
+  border-radius: var(--rw-radius);
+  padding: 7px 12px;
+  background: var(--rw-surface);
+}
+.rw-nav .rw-nav-strong:hover { border-color: var(--rw-ink); }
+
+.rw-hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
+  gap: 64px;
+  align-items: center;
+  padding: 84px 0 78px;
+  border-bottom: 1px solid var(--rw-line);
+}
+.rw-hero-copy { max-width: 650px; }
+.rw-kicker {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0 0 26px;
+  color: var(--rw-muted);
+  font: 500 12px/1.4 var(--rw-mono);
+}
+.rw-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--rw-orange);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rw-orange) 16%, transparent);
+  flex: 0 0 auto;
+}
+.rw-hero h1 {
+  margin: 0 0 24px;
+  font-family: var(--rw-serif);
+  font-weight: 400;
+  font-size: clamp(52px, 7.2vw, 94px);
+  line-height: 0.94;
+  letter-spacing: -0.035em;
+  text-wrap: balance;
+}
+.rw-hero h1 span { color: var(--rw-blue); }
+.rw-lede {
+  max-width: 48ch;
+  margin: 0 0 30px;
+  color: var(--rw-muted);
+  font-size: clamp(17px, 1.5vw, 19px);
+  line-height: 1.55;
+}
+.rw-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
+.rw-button, .rw-quiet {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: var(--rw-radius);
+}
+.rw-button {
+  min-height: 43px;
+  padding: 0 17px;
+  background: var(--rw-blue);
+  color: #fff;
+  border: 1px solid var(--rw-blue);
+}
+.rw-button:hover { background: color-mix(in srgb, var(--rw-blue) 84%, #000); }
+.rw-quiet { color: var(--rw-ink); padding: 8px 0; border-bottom: 1px solid var(--rw-line-strong); border-radius: 0; }
+.rw-quiet:hover { border-bottom-color: var(--rw-blue); }
+.rw-stack {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 20px;
+  margin: 38px 0 0;
+  padding: 0;
+  list-style: none;
+  color: var(--rw-muted);
+  font: 12px/1.4 var(--rw-mono);
+}
+.rw-stack li::before { content: "/"; color: var(--rw-line-strong); margin-right: 7px; }
+
+.rw-status {
+  position: relative;
+  background: var(--rw-dark);
+  color: var(--rw-dark-fg);
+  border: 1px solid var(--rw-dark-line);
+  border-radius: var(--rw-radius);
+  padding: 19px;
+  box-shadow: 12px 12px 0 var(--rw-blue-soft);
+}
+.rw-status::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(135deg, transparent 0 78%, rgba(255,255,255,.035) 78%);
+}
+.rw-status-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding-bottom: 13px;
+  border-bottom: 1px solid var(--rw-dark-line);
+  font: 500 10px/1.4 var(--rw-mono);
+  letter-spacing: 0.09em;
+  color: var(--rw-dark-muted);
+}
+.rw-live { display: inline-flex; align-items: center; gap: 6px; color: #a8dfad; letter-spacing: 0; }
+.rw-live::before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #7bdc85;
+  animation: rw-pulse 2.4s ease-out infinite;
+}
+.rw-url {
+  margin: 16px 0 3px;
+  font: 500 14px/1.4 var(--rw-mono);
+  color: #cbd6ff;
+  overflow-wrap: anywhere;
+}
+.rw-status-sub { margin: 0; color: var(--rw-dark-muted); font-size: 12px; }
+.rw-status .rw-brandline {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 21px 0 14px;
+  padding-top: 17px;
+  border-top: 1px solid var(--rw-dark-line);
+  font-family: var(--rw-serif);
+  font-size: 21px;
+}
+.rw-status .rw-brandline img { width: 25px; height: 25px; display: block; }
+.rw-tree {
+  margin: 0;
+  padding: 15px;
+  background: rgba(0,0,0,.18);
+  border: 1px solid var(--rw-dark-line);
+  border-radius: 2px;
+  color: #c9d2bd;
+  font: 11.5px/1.75 var(--rw-mono);
+  overflow-x: auto;
+}
+.rw-tree b { color: #f0c6a9; font-weight: 500; }
+.rw-tree em { color: #8fa5ff; font-style: normal; }
+.rw-status-foot {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 14px;
+  color: var(--rw-dark-muted);
+  font: 10px/1.4 var(--rw-mono);
+}
+
+.rw-section { padding: 68px 0 0; }
+.rw-section-head {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr) minmax(220px, 0.55fr);
+  gap: 20px;
+  align-items: start;
+  padding-bottom: 23px;
+  border-bottom: 1px solid var(--rw-line);
+}
+.rw-index { color: var(--rw-orange); font: 500 12px/1.4 var(--rw-mono); padding-top: 8px; }
+.rw-section h2 {
+  margin: 0;
+  font-family: var(--rw-serif);
+  font-size: clamp(30px, 3.6vw, 47px);
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: -0.025em;
+}
+.rw-section-head p { margin: 3px 0 0; color: var(--rw-muted); font-size: 14px; line-height: 1.5; }
+
+.rw-steps {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  border-bottom: 1px solid var(--rw-line);
+}
+.rw-step { padding: 25px 24px 28px 0; border-right: 1px solid var(--rw-line); }
+.rw-step + .rw-step { padding-left: 24px; }
+.rw-step:last-child { border-right: 0; }
+.rw-step-index { color: var(--rw-muted); font: 500 11px/1.4 var(--rw-mono); }
+.rw-step h3 { margin: 18px 0 7px; font-family: var(--rw-serif); font-size: 25px; font-weight: 400; line-height: 1.1; }
+.rw-step p { margin: 0 0 16px; color: var(--rw-muted); font-size: 14px; line-height: 1.55; }
+.rw-step code { display: inline-block; padding: 4px 7px; background: var(--rw-blue-soft); color: var(--rw-blue); border-radius: 2px; font-size: 11.5px; }
+.rw-step a { color: var(--rw-blue); font-size: 13px; font-weight: 600; text-decoration: none; }
+.rw-step a:hover { text-decoration: underline; }
+
+.rw-demo {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 0;
+  border-bottom: 1px solid var(--rw-line);
+}
+.rw-demo-panel { padding: 34px 32px 36px 0; }
+.rw-demo-panel + .rw-demo-panel { padding-left: 32px; border-left: 1px solid var(--rw-line); }
+.rw-label { color: var(--rw-orange); font: 500 10px/1.4 var(--rw-mono); letter-spacing: 0.08em; }
+.rw-demo h2 { margin: 12px 0 9px; font-family: var(--rw-serif); font-size: clamp(27px, 3vw, 37px); font-weight: 400; line-height: 1.04; letter-spacing: -0.02em; }
+.rw-demo p { max-width: 52ch; margin: 0 0 20px; color: var(--rw-muted); font-size: 14px; line-height: 1.55; }
+.rw-counter {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid var(--rw-line-strong);
+  border-radius: var(--rw-radius);
+  background: var(--rw-surface);
+  color: var(--rw-ink);
+  padding: 10px 15px;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 14px;
+}
+.rw-counter:hover { border-color: var(--rw-blue); color: var(--rw-blue); }
+.rw-counter strong { font-family: var(--rw-mono); font-size: 13px; color: var(--rw-blue); }
+.rw-form { display: grid; gap: 9px; max-width: 410px; }
+.rw-form label { color: var(--rw-muted); font: 11px/1.4 var(--rw-mono); }
+.rw-form-row { display: flex; gap: 8px; }
+.rw-form input {
+  width: 100%;
+  min-height: 42px;
+  padding: 9px 11px;
+  color: var(--rw-ink);
+  background: var(--rw-surface);
+  border: 1px solid var(--rw-line-strong);
+  border-radius: var(--rw-radius);
+}
+.rw-form input:focus { outline: 2px solid var(--rw-blue); outline-offset: 1px; }
+.rw-form button {
+  flex: 0 0 auto;
+  min-height: 42px;
+  padding: 0 14px;
+  border: 1px solid var(--rw-ink);
+  border-radius: var(--rw-radius);
+  background: var(--rw-ink);
+  color: var(--rw-bg);
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 13px;
+}
+.rw-form button:hover { background: var(--rw-blue); border-color: var(--rw-blue); color: #fff; }
+.rw-error, .rw-success { margin: 10px 0 0; font-size: 13px; }
+.rw-error { color: var(--rw-orange); }
+.rw-success { color: var(--rw-blue); }
+.rw-api-link { margin-top: 16px; font: 12px/1.5 var(--rw-mono); color: var(--rw-muted); }
+.rw-api-link a { color: var(--rw-blue); }
+
+.rw-features {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  border-bottom: 1px solid var(--rw-line);
+}
+.rw-feature { min-height: 150px; padding: 24px 22px 27px 0; border-right: 1px solid var(--rw-line); }
+.rw-feature + .rw-feature { padding-left: 22px; }
+.rw-feature:last-child { border-right: 0; }
+.rw-feature h3 { margin: 0 0 8px; font-family: var(--rw-serif); font-size: 21px; font-weight: 400; }
+.rw-feature p { margin: 0; color: var(--rw-muted); font-size: 13px; line-height: 1.5; }
+
+.rw-notfound {
+  max-width: 760px;
+  padding: 76px 0 90px;
+}
+.rw-notfound h1 {
+  margin: 0 0 16px;
+  font-family: var(--rw-serif);
+  font-size: clamp(42px, 6vw, 72px);
+  font-weight: 400;
+  line-height: 0.98;
+  letter-spacing: -0.03em;
+}
+.rw-notfound p { color: var(--rw-muted); }
+.rw-notfound code { color: var(--rw-blue); font-size: 0.92em; }
+.rw-notfound .rw-button { margin-top: 12px; color: #fff; }
+.rw-footer {
+  width: min(100% - 48px, var(--rw-max));
+  margin: 0 auto;
+  padding: 23px 0 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  color: var(--rw-muted);
+  font-size: 12px;
+}
+.rw-footer nav { display: flex; gap: 16px; }
+.rw-footer a { text-decoration: none; color: var(--rw-ink); }
+.rw-footer a:hover { color: var(--rw-blue); }
+
+@keyframes rw-pulse {
+  0% { box-shadow: 0 0 0 0 rgba(123,220,133,.45); }
+  70% { box-shadow: 0 0 0 7px rgba(123,220,133,0); }
+  100% { box-shadow: 0 0 0 0 rgba(123,220,133,0); }
+}
+
+@media (max-width: 940px) {
+  .rw-hero { grid-template-columns: 1fr; gap: 42px; padding: 60px 0 58px; }
+  .rw-status { max-width: 560px; }
+  .rw-section-head { grid-template-columns: 42px minmax(0, 1fr); }
+  .rw-section-head p { grid-column: 2; margin-top: 10px; }
+  .rw-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .rw-feature:nth-child(2) { border-right: 0; }
+  .rw-feature:nth-child(n+3) { border-top: 1px solid var(--rw-line); }
+}
+
+@media (max-width: 680px) {
+  .rw-main, .rw-top, .rw-footer { width: min(100% - 32px, var(--rw-max)); }
+  .rw-top { min-height: 62px; gap: 14px; }
+  .rw-brand { font-size: 22px; }
+  .rw-brand small { display: none; }
+  .rw-nav { gap: 12px; }
+  .rw-nav a:not(.rw-nav-strong) { display: none; }
+  .rw-hero h1 { font-size: clamp(47px, 14vw, 68px); }
+  .rw-status { padding: 16px; box-shadow: 7px 7px 0 var(--rw-blue-soft); }
+  .rw-steps, .rw-demo, .rw-features { grid-template-columns: 1fr; }
+  .rw-step, .rw-step + .rw-step, .rw-feature, .rw-feature + .rw-feature { padding: 22px 0; border-right: 0; border-left: 0; }
+  .rw-step + .rw-step, .rw-feature + .rw-feature, .rw-demo-panel + .rw-demo-panel { border-top: 1px solid var(--rw-line); }
+  .rw-demo-panel, .rw-demo-panel + .rw-demo-panel { padding: 28px 0; border-left: 0; }
+  .rw-section { padding-top: 50px; }
+  .rw-section-head { grid-template-columns: 32px minmax(0, 1fr); gap: 13px; }
+  .rw-form-row { flex-direction: column; }
+  .rw-footer { align-items: flex-start; flex-direction: column; gap: 10px; }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --rw-bg: #0d100b;
+    --rw-surface: #151a12;
+    --rw-ink: #edf0e2;
+    --rw-muted: #9ba38f;
+    --rw-line: #2a3024;
+    --rw-line-strong: #414a39;
+    --rw-blue: #aebaff;
+    --rw-blue-soft: #20263d;
+    --rw-orange: #f08a5e;
+  }
+  ::selection { color: #0d100b; }
+  .rw-button, .rw-notfound .rw-button { color: #12150e; }
+  .rw-button:hover { color: #fff; }
+  .rw-status { box-shadow: 12px 12px 0 #1b2238; }
+  .rw-status .rw-tree { background: rgba(0,0,0,.24); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  .rw-live::before { animation: none; }
+}
+`;

package/template/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "paths": {
+      "#routes": ["./.ramonyx/routes.ts"]
+    }
+  },
+  "include": ["src", ".ramonyx"]
+}

package/template-agent/.opencode/skills/ramonyx/SKILL.md

@@ -0,0 +1,18 @@
+# Ramonyx skill
+
+Use this skill when working in a Ramonyx application.
+
+## Workflow
+
+1. Read `AGENTS.md` and the relevant page module under `src/routes/`.
+2. Keep reads in `loader` and mutations in `action`; validate at trust boundaries.
+3. Run `pnpm typecheck` and the relevant tests before claiming a change works.
+4. For framework questions, query the Ramonyx docs (MCP `search_docs` / `get_page`) instead of
+   guessing APIs.
+
+## Safety
+
+- Never put secrets in client components, loader payloads, or stateless signed cookies.
+- Preserve CSRF and security-header middleware.
+- Prefer the in-memory dev adapters only for local work; production multi-instance needs shared
+  session/rate-limit/cache adapters.

package/template-agent/AGENTS.md

@@ -0,0 +1,34 @@
+# Agent guide — Ramonyx app
+
+This project uses Ramonyx (SSR React + file routing). Read the framework docs before changing
+routing, data loading, auth, or security-sensitive code.
+
+## Commands
+
+Use the package manager that installed the project (`pnpm`, `bun`, or `npm`):
+
+- `pnpm dev` / `bun run dev` / `npm run dev` — Vite HMR + SSR on the port in `ramonyx.config.ts`.
+- `pnpm build` / `bun run build` / `npm run build` — client bundle + server build.
+- `pnpm start` / `bun run start` / `npm run start` — production server (`NODE_ENV=production`).
+- `pnpm test` / `bun run test` / `npm test` — application tests.
+
+The `ramonyx` binary is local to `node_modules/.bin`, not on the shell `PATH`. For one-off CLI
+commands use `pnpm exec ramonyx …`, `bunx ramonyx …`, or `npx ramonyx …`.
+
+## Project map
+
+- `src/app.ts` — `createApp()`, middleware, security headers.
+- `src/routes/**` — file routes; `page.tsx` for pages, other files for API methods.
+- `src/routes/**/middleware.ts` — per-folder middleware (root → leaf).
+- `ramonyx.config.ts` — server/port and app options.
+
+## Rules
+
+- Loaders/actions run on the server; never trust request JSON at a trust boundary — validate it.
+- Mutations use a page `action` (works without JS); do not add a parallel fetch-only mutation path.
+- Secrets come from env/bindings, never source or client bundles.
+- Keep auth/session cookies `HttpOnly`, `Secure`, `SameSite=Lax` in production; use CSRF protection.
+- Loader data must be JSON-serializable.
+- Do not import server-only modules (`node:*`, database clients) into client components/islands.
+
+For framework details, use the MCP docs server (`@ramonyx/mcp-docs-server`) or the docs site.