create-cocoframe 0.0.1 → 0.0.2

package/README.md

@@ -2,27 +2,29 @@
 
 Dependency-free project creator for [CocoFrame](https://github.com/wiryosaputraofficial/cocoframe).
 
-After the public CocoFrame runtime packages are released:
-
-~~~bash
+```bash
 npm create cocoframe@latest my-app
-cd my-app
-npm run dev
-~~~
-
-For development from the CocoFrame repository:
+npm create cocoframe@latest my-dashboard -- --template dashboard
+```
 
-~~~bash
-npm run create -- examples/my-app --skip-install
-npm install
-npm run dev --workspace=my-app
-~~~
+Available templates: `starter`, `marketing`, `dashboard`, and `documentation`.
+Every template uses official `@cocoframe/ui` components and tree-shakeable
+`@cocoframe/icons` imports.
 
 ## Options
 
-- --package-manager npm|pnpm|yarn|bun selects the installer.
-- --skip-install or --no-install only writes the starter files.
-- --help prints usage.
-- --version prints the creator version.
+- `--template starter|marketing|dashboard|documentation` selects the starter.
+- `--package-manager npm|pnpm|yarn|bun` selects the installer.
+- `--skip-install` or `--no-install` only writes the starter files.
+- `--help` prints usage.
+- `--version` prints the creator version.
+
+The creator refuses filesystem roots and non-empty target directories. Each
+starter includes a server-rendered page, typed health API, responsive CSS,
+TypeScript configuration, and production scripts.
+
+For development from the CocoFrame repository:
 
-The creator refuses filesystem roots and non-empty target directories. The starter includes a server-rendered page, a typed API route, an opt-in counter island, responsive CSS, TypeScript configuration, and production scripts.
+```bash
+npm run create -- examples/my-app --template marketing --skip-install
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cocoframe",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Dependency-free project creator for CocoFrame applications.",
   "keywords": [
     "cocoframe",
@@ -37,6 +37,7 @@
   "files": [
     "src",
     "template",
+    "templates",
     "README.md",
     "LICENSE"
   ]

package/src/index.d.ts

@@ -1,10 +1,12 @@
 import type { spawn } from "node:child_process";
 
 export type PackageManager = "npm" | "pnpm" | "yarn" | "bun";
+export type TemplateName = "starter" | "marketing" | "dashboard" | "documentation";
 
 export interface CreatorArguments {
   projectDirectory?: string;
   packageManager: PackageManager;
+  template: TemplateName;
   install: boolean;
   help: boolean;
   version: boolean;
@@ -13,6 +15,7 @@ export interface CreatorArguments {
 export interface ScaffoldOptions {
   projectDirectory: string;
   packageManager?: PackageManager;
+  template?: TemplateName;
   install?: boolean;
   cwd?: string;
   templateDirectory?: string;
@@ -23,6 +26,7 @@ export interface ScaffoldResult {
   targetDirectory: string;
   packageName: string;
   packageManager: PackageManager;
+  template: TemplateName;
   installed: boolean;
 }
 
@@ -32,6 +36,7 @@ export interface CreatorOptions extends Omit<ScaffoldOptions, "projectDirectory"
 }
 
 export const helpText: string;
+export const availableTemplates: readonly TemplateName[];
 export function parseArguments(args: string[], userAgent?: string): CreatorArguments;
 export function scaffoldProject(options: ScaffoldOptions): Promise<ScaffoldResult>;
 export function runCreator(args: string[], options?: CreatorOptions): Promise<ScaffoldResult | undefined>;

package/src/index.js

@@ -5,7 +5,9 @@ import { fileURLToPath } from "node:url";
 
 const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
 const defaultTemplate = path.join(packageRoot, "template");
+const templatesRoot = path.join(packageRoot, "templates");
 const supportedPackageManagers = new Set(["npm", "pnpm", "yarn", "bun"]);
+export const availableTemplates = Object.freeze(["starter", "marketing", "dashboard", "documentation"]);
 
 export const helpText = [
   "Create a CocoFrame application",
@@ -14,6 +16,8 @@ export const helpText = [
   "  npm create cocoframe@latest <project-directory> [options]",
   "",
   "Options:",
+  "  --template <starter|marketing|dashboard|documentation>",
+  "                                      Select a project template",
   "  --package-manager <npm|pnpm|yarn|bun>  Select the package manager",
   "  --skip-install, --no-install           Generate files without installing",
   "  --help, -h                             Show this help",
@@ -23,6 +27,7 @@ export const helpText = [
 export function parseArguments(args, userAgent = process.env.npm_config_user_agent) {
   let projectDirectory;
   let packageManager = packageManagerFromUserAgent(userAgent);
+  let template = "starter";
   let install = true;
   let help = false;
   let version = false;
@@ -32,7 +37,13 @@ export function parseArguments(args, userAgent = process.env.npm_config_user_age
     if (argument === "--help" || argument === "-h") help = true;
     else if (argument === "--version" || argument === "-v") version = true;
     else if (argument === "--skip-install" || argument === "--no-install") install = false;
-    else if (argument === "--package-manager") {
+    else if (argument === "--template") {
+      const value = args[++index];
+      if (!value) throw new Error("--template requires a value.");
+      template = validateTemplate(value);
+    } else if (argument?.startsWith("--template=")) {
+      template = validateTemplate(argument.slice("--template=".length));
+    } else if (argument === "--package-manager") {
       const value = args[++index];
       if (!value) throw new Error("--package-manager requires a value.");
       packageManager = validatePackageManager(value);
@@ -44,7 +55,7 @@ export function parseArguments(args, userAgent = process.env.npm_config_user_age
   }
 
   if (!help && !version && !projectDirectory) throw new Error("A project directory is required.");
-  return { projectDirectory, packageManager, install, help, version };
+  return { projectDirectory, packageManager, template, install, help, version };
 }
 
 export async function scaffoldProject(options) {
@@ -52,7 +63,8 @@ export async function scaffoldProject(options) {
   const targetDirectory = resolveTargetDirectory(options.projectDirectory, cwd);
   const packageName = normalizePackageName(path.basename(targetDirectory));
   const packageManager = validatePackageManager(options.packageManager ?? "npm");
-  const templateDirectory = path.resolve(options.templateDirectory ?? defaultTemplate);
+  const template = validateTemplate(options.template ?? "starter");
+  const templateDirectory = path.resolve(options.templateDirectory ?? templatePath(template));
   const entries = await directoryEntries(targetDirectory);
   if (entries.length > 0) throw new Error("Target directory is not empty: " + targetDirectory);
 
@@ -65,7 +77,7 @@ export async function scaffoldProject(options) {
     await installDependencies(targetDirectory, packageManager, options.spawnCommand);
   }
 
-  return { targetDirectory, packageName, packageManager, installed: options.install !== false };
+  return { targetDirectory, packageName, packageManager, template, installed: options.install !== false };
 }
 
 export async function runCreator(args, options = {}) {
@@ -84,6 +96,7 @@ export async function runCreator(args, options = {}) {
   const result = await scaffoldProject({
     projectDirectory: parsed.projectDirectory,
     packageManager: parsed.packageManager,
+    template: parsed.template,
     install: parsed.install,
     cwd: options.cwd,
     templateDirectory: options.templateDirectory,
@@ -111,6 +124,17 @@ function validatePackageManager(value) {
   return value;
 }
 
+function validateTemplate(value) {
+  if (!availableTemplates.includes(value)) {
+    throw new Error("Unknown template: " + value + ". Use " + availableTemplates.join(", ") + ".");
+  }
+  return value;
+}
+
+function templatePath(template) {
+  return template === "starter" ? defaultTemplate : path.join(templatesRoot, template);
+}
+
 function resolveTargetDirectory(input, cwd) {
   if (!input?.trim()) throw new Error("A project directory is required.");
   const target = path.resolve(cwd, input);

package/template/app/routes/_layout.tsx

@@ -1,9 +1,10 @@
 import { defineLayout } from "@cocoframe/core";
+import BoxMinimalisticIcon from "@cocoframe/icons/linear/box-minimalistic";
 
 export default defineLayout(({ children }) => (
   <>
     <header class="site-header">
-      <a href="/" class="brand">CocoFrame</a>
+      <a href="/" class="brand"><BoxMinimalisticIcon size={24} label="CocoFrame" /> <span>CocoFrame</span></a>
       <nav aria-label="Primary navigation">
         <a href="/">Home</a>
         <a href="/api/health">API</a>

package/template/app/routes/index.page.tsx

@@ -1,4 +1,6 @@
 import { definePage } from "@cocoframe/core";
+import CodeSquareIcon from "@cocoframe/icons/linear/code-square";
+import { Badge, Card, Heading, Stack, Text } from "@cocoframe/ui";
 import Counter from "../islands/counter.island.tsx";
 
 export default definePage({
@@ -8,11 +10,12 @@ export default definePage({
   },
   view: () => (
     <main class="hero">
-      <p class="eyebrow">SERVER-FIRST · AI-FRIENDLY</p>
-      <h1>Your CocoFrame project is ready.</h1>
-      <p>Useful HTML is rendered on the server. Browser JavaScript is isolated to the counter below.</p>
-      <Counter initial={0} />
-      <small>Edit <code>app/routes/index.page.tsx</code> to get started.</small>
+      <Stack gap="large">
+        <Badge variant="success"><CodeSquareIcon size={15} /> Server-first · AI-friendly</Badge>
+        <Heading level={1} size="xlarge">Your CocoFrame project is ready.</Heading>
+        <Text size="large" tone="muted">Useful HTML is rendered on the server. Browser JavaScript is isolated to the counter below.</Text>
+        <Card class="starter-card"><Counter initial={0} /><small>Edit <code>app/routes/index.page.tsx</code> to get started.</small></Card>
+      </Stack>
     </main>
   ),
 });

package/template/app/styles/app.css

@@ -1,29 +1,14 @@
-:root {
-  color: #15231c;
-  background: #f6faf8;
-  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
-}
-
+:root { color: #15231c; background: #f6faf8; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
 * { box-sizing: border-box; }
 body { margin: 0; }
 a { color: inherit; }
-
-.site-header {
-  min-height: 68px;
-  padding: 0 clamp(20px, 5vw, 72px);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #dce9e1;
-  background: rgba(255, 255, 255, .9);
-}
-
-.brand { color: #187a55; font-weight: 800; text-decoration: none; }
+.site-header { min-height: 68px; padding: 0 clamp(20px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dce9e1; background: rgba(255, 255, 255, .9); }
+.brand { display: inline-flex; align-items: center; gap: 9px; color: #187a55; font-weight: 800; text-decoration: none; }
 .site-header nav { display: flex; gap: 20px; font-size: 14px; }
 .hero { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: clamp(72px, 14vw, 150px) 0; }
-.eyebrow { color: #187a55; font-size: 12px; font-weight: 800; letter-spacing: .12em; }
-h1 { max-width: 680px; margin: 14px 0; font-size: clamp(40px, 8vw, 76px); line-height: 1; letter-spacing: -.055em; }
-.hero > p:not(.eyebrow) { max-width: 620px; color: #587064; font-size: 18px; line-height: 1.7; }
-.hero button { margin: 20px 0; }
-.hero small { display: block; color: #587064; }
-code { padding: 2px 6px; border-radius: 5px; background: #e8f3ed; }
+.hero .coco-heading { max-width: 680px; margin: 0; letter-spacing: -.045em; }
+.hero .coco-text { max-width: 620px; line-height: 1.7; }
+.starter-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; }
+.starter-card small { color: #587064; }
+code { padding: 2px 6px; border-radius: 5px; background: #e8f3ed; }
+@media (max-width: 540px) { .site-header nav { gap: 12px; } .starter-card { align-items: flex-start; flex-direction: column; } }

package/template/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@cocoframe/client": "0.0.1",
     "@cocoframe/core": "0.0.1",
+    "@cocoframe/icons": "0.0.1",
     "@cocoframe/jsx": "0.0.1",
     "@cocoframe/schema": "0.0.1",
     "@cocoframe/ui": "0.0.1"

package/templates/catalog.json

@@ -0,0 +1,41 @@
+{
+  "version": 1,
+  "templates": [
+    {
+      "id": "starter",
+      "name": "CocoFrame Starter",
+      "description": "Fondasi minimal server-first dengan typed API dan counter island.",
+      "category": "Starter Kits",
+      "technology": ["TypeScript", "CocoFrame"],
+      "components": ["Badge", "Button", "Card", "Heading", "Stack", "Text"],
+      "icons": ["box-minimalistic", "code-square"]
+    },
+    {
+      "id": "marketing",
+      "name": "Marketing Launch",
+      "description": "Landing page SEO-ready dengan hero, feature cards, metrics, dan CTA.",
+      "category": "Web Applications",
+      "technology": ["TypeScript", "CocoFrame", "CSS"],
+      "components": ["Badge", "Card", "Container", "Heading", "Inline", "Stack", "Stat", "Text"],
+      "icons": ["arrow-right", "bolt", "graph-up", "shield-check", "stars-minimalistic"]
+    },
+    {
+      "id": "dashboard",
+      "name": "Orbit Dashboard",
+      "description": "Dashboard admin responsif dengan sidebar, analytics, data table, dan status.",
+      "category": "Dashboards",
+      "technology": ["TypeScript", "CocoFrame", "Charts"],
+      "components": ["Badge", "Card", "Chart", "DataTable", "Heading", "Inline", "Sidebar", "Stat", "Text"],
+      "icons": ["bell", "calendar", "graph-up", "home", "magnifier", "settings", "users-group-rounded", "widget-4"]
+    },
+    {
+      "id": "documentation",
+      "name": "Atlas Documentation",
+      "description": "Dokumentasi server-first dengan sidebar, code samples, alert, dan route table.",
+      "category": "Documentation",
+      "technology": ["TypeScript", "CocoFrame"],
+      "components": ["Alert", "Badge", "Card", "Heading", "Sidebar", "SyntaxHighlighter", "Table", "Text"],
+      "icons": ["arrow-right", "book-2", "check-circle", "code-square", "document-text", "magnifier", "routing-2", "settings"]
+    }
+  ]
+}

package/templates/dashboard/README.md

@@ -0,0 +1,10 @@
+# {{PROJECT_NAME}}
+
+Responsive admin dashboard built with CocoFrame `Sidebar`, `Stat`, `Chart`, `DataTable`, `Badge`, and Solar Linear icons.
+
+```bash
+npm install
+npm run dev
+```
+
+Use `npm run inspect` to see the components and icons discovered by CocoFrame.

package/templates/dashboard/_gitignore

@@ -0,0 +1,8 @@
+node_modules/
+.cocoframe/
+dist/
+coverage/
+*.log
+.env
+.env.*
+!.env.example

package/templates/dashboard/app/routes/_layout.tsx

@@ -0,0 +1,23 @@
+import { defineLayout } from "@cocoframe/core";
+import ChartIcon from "@cocoframe/icons/linear/graph-up";
+import HomeIcon from "@cocoframe/icons/linear/home";
+import SettingsIcon from "@cocoframe/icons/linear/settings";
+import UsersIcon from "@cocoframe/icons/linear/users-group-rounded";
+import WidgetIcon from "@cocoframe/icons/linear/widget-4";
+import { Badge, Sidebar } from "@cocoframe/ui";
+
+export default defineLayout(({ children }) => (
+  <div class="dashboard-shell">
+    <Sidebar
+      brand={<a class="dashboard-brand" href="/"><WidgetIcon size={24} /> <span>Orbit Admin</span></a>}
+      groups={[{ label: "Workspace", items: [
+        { label: "Overview", href: "/", current: true, icon: <HomeIcon size={18} /> },
+        { label: "Analytics", href: "#analytics", icon: <ChartIcon size={18} /> },
+        { label: "Customers", href: "#customers", icon: <UsersIcon size={18} />, badge: <Badge variant="success">24</Badge> },
+        { label: "Settings", href: "#settings", icon: <SettingsIcon size={18} /> },
+      ] }]}
+      footer={<small>Server-rendered with CocoFrame</small>}
+    />
+    <div class="dashboard-main">{children}</div>
+  </div>
+));

package/templates/dashboard/app/routes/api/health.route.ts

@@ -0,0 +1,12 @@
+import { defineApi } from "@cocoframe/core";
+import { schema } from "@cocoframe/schema";
+
+export default defineApi({
+  id: "health",
+  method: "GET",
+  output: schema.object({
+    ok: schema.literal(true),
+    framework: schema.string(),
+  }),
+  handle: () => ({ ok: true, framework: "cocoframe" }),
+});

package/templates/dashboard/app/routes/index.page.tsx

@@ -0,0 +1,29 @@
+import { definePage } from "@cocoframe/core";
+import BellIcon from "@cocoframe/icons/linear/bell";
+import CalendarIcon from "@cocoframe/icons/linear/calendar";
+import GraphUpIcon from "@cocoframe/icons/linear/graph-up";
+import MagnifierIcon from "@cocoframe/icons/linear/magnifier";
+import { Badge, Card, Chart, DataTable, Heading, Inline, Stat, Text } from "@cocoframe/ui";
+
+const rows = [
+  { customer: "Acme Studio", plan: "Growth", status: <Badge variant="success">Active</Badge>, revenue: "$4,800" },
+  { customer: "Northwind", plan: "Starter", status: <Badge variant="warning">Trial</Badge>, revenue: "$1,260" },
+  { customer: "Vertex Labs", plan: "Scale", status: <Badge variant="success">Active</Badge>, revenue: "$8,940" },
+  { customer: "Lumen Works", plan: "Growth", status: <Badge variant="neutral">Paused</Badge>, revenue: "$3,120" },
+];
+
+export default definePage({
+  meta: { title: "{{PROJECT_NAME}} — Dashboard", description: "Accessible CocoFrame dashboard template with charts, stats, table, and official icons." },
+  view: () => <main class="dashboard-page">
+    <header class="dashboard-topbar"><div><Text tone="muted" size="small">Tuesday, 22 August</Text><Heading level={1}>Good morning, Alex</Heading></div><Inline gap="small"><button class="icon-action" type="button" aria-label="Search"><MagnifierIcon size={19} /></button><button class="icon-action" type="button" aria-label="Notifications"><BellIcon size={19} /></button><span class="avatar">AX</span></Inline></header>
+
+    <section class="stats-grid" aria-label="Key metrics"><Stat label="Monthly revenue" value="$42,860" trend="+12.4% this month" tone="positive" /><Stat label="Active customers" value="1,284" trend="+86 this week" tone="positive" /><Stat label="Conversion" value="8.42%" trend="+1.2 percentage points" tone="positive" /><Stat label="Open tickets" value="18" trend="4 need attention" tone="negative" /></section>
+
+    <section class="dashboard-grid" id="analytics">
+      <Card class="chart-card"><div class="card-heading"><div><Badge variant="primary"><GraphUpIcon size={14} /> Analytics</Badge><Heading level={2} size="medium">Revenue overview</Heading></div><button class="period-button" type="button"><CalendarIcon size={16} /> Last 6 months</button></div><Chart type="area" label="Monthly revenue" description="Revenue increased from 24 to 43 thousand dollars." labels={["Mar","Apr","May","Jun","Jul","Aug"]} datasets={[{ label: "Revenue", data: [24,28,27,34,38,43], tone: "primary", fill: true }]} formatValue={(value) => `$${value}k`} /></Card>
+      <Card class="goal-card"><Badge variant="success">On track</Badge><Heading level={2} size="medium">Quarter goal</Heading><strong>78%</strong><div class="goal-ring" aria-label="78 percent complete"><span>78%</span></div><Text tone="muted">$31,200 remaining to reach the quarterly target.</Text></Card>
+    </section>
+
+    <section id="customers"><Card class="customers-card"><div class="card-heading"><div><Heading level={2} size="medium">Recent customers</Heading><Text tone="muted" size="small">Latest account activity across the workspace.</Text></div><a href="#customers">View all</a></div><DataTable caption="Recent customers" columns={[{ key: "customer", label: "Customer", sortable: true }, { key: "plan", label: "Plan", sortable: true }, { key: "status", label: "Status" }, { key: "revenue", label: "Revenue", sortable: true }]} rows={rows} sortKey="customer" sortPath="/" /></Card></section>
+  </main>,
+});

package/templates/dashboard/app/styles/app.css

@@ -0,0 +1,33 @@
+:root { color: #14221b; background: #f4f7f5; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+* { box-sizing: border-box; }
+body { margin: 0; }
+a { color: inherit; }
+.dashboard-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0,1fr); }
+.dashboard-shell > .coco-sidebar { min-height: 100vh; border-right: 1px solid #dce6e0; background: #fff; position: sticky; top: 0; }
+.dashboard-brand { display: flex; align-items: center; gap: 10px; color: #187a55; font-weight: 850; text-decoration: none; }
+.dashboard-main { min-width: 0; }
+.dashboard-page { width: min(1440px,100%); margin: auto; padding: clamp(22px,4vw,54px); }
+.dashboard-topbar, .card-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
+.dashboard-topbar { margin-bottom: 32px; }
+.dashboard-topbar .coco-heading { margin: 4px 0 0; }
+.icon-action, .period-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1px solid #d8e4dd; border-radius: 10px; color: #365548; background: white; }
+.icon-action { width: 42px; padding: 0; }
+.period-button { padding: 0 13px; }
+.avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: white; background: #187a55; font-size: 13px; font-weight: 800; }
+.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
+.stats-grid .coco-stat { padding: 22px; border: 1px solid #dce6e0; border-radius: 14px; background: white; }
+.dashboard-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(260px,.75fr); gap: 18px; margin-bottom: 18px; }
+.chart-card, .goal-card, .customers-card { padding: 24px; }
+.card-heading { margin-bottom: 18px; }
+.card-heading .coco-heading { margin: 8px 0 0; }
+.chart-card .coco-chart { border: 0; padding: 0; box-shadow: none; }
+.goal-card { display: flex; flex-direction: column; align-items: flex-start; }
+.goal-card > strong { margin: 20px 0 6px; font-size: 52px; letter-spacing: -.05em; }
+.goal-ring { width: 150px; height: 150px; display: grid; place-items: center; margin: 18px auto; border-radius: 50%; background: conic-gradient(#187a55 0 78%,#dcebe3 78%); position: relative; }
+.goal-ring::after { content: ""; position: absolute; inset: 15px; border-radius: inherit; background: white; }
+.goal-ring span { position: relative; z-index: 1; font-weight: 800; }
+.customers-card .coco-data-table { border: 0; }
+.customers-card a { color: #187a55; font-weight: 750; }
+@media (max-width: 1080px) { .stats-grid { grid-template-columns: repeat(2,1fr); } .dashboard-grid { grid-template-columns: 1fr; } }
+@media (max-width: 760px) { .dashboard-shell { grid-template-columns: 1fr; } .dashboard-shell > .coco-sidebar { min-height: auto; position: static; } .dashboard-page { padding: 20px 14px 40px; } .dashboard-topbar { align-items: flex-start; } }
+@media (max-width: 520px) { .stats-grid { grid-template-columns: 1fr; } .dashboard-topbar > .coco-inline .icon-action { display: none; } .card-heading { align-items: flex-start; flex-direction: column; } }

package/templates/dashboard/cocoframe.config.ts

@@ -0,0 +1,2 @@
+import { defineConfig } from "@cocoframe/core";
+export default defineConfig({ language: "en", siteName: "{{PROJECT_NAME}}", stylesheets: ["/styles/app.css"], openapi: { title: "{{PROJECT_NAME}} API", version: "1.0.0" } });

package/templates/dashboard/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "cocoframe dev .",
+    "build": "cocoframe build .",
+    "start": "cocoframe start .",
+    "check": "tsc --noEmit",
+    "inspect": "cocoframe inspect .",
+    "generate": "cocoframe generate ."
+  },
+  "dependencies": {
+    "@cocoframe/core": "0.0.1",
+    "@cocoframe/icons": "0.0.1",
+    "@cocoframe/jsx": "0.0.1",
+    "@cocoframe/schema": "0.0.1",
+    "@cocoframe/ui": "0.0.1"
+  },
+  "devDependencies": {
+    "@cocoframe/cli": "0.0.1",
+    "@types/node": "^24.0.0",
+    "typescript": "^5.9.0"
+  }
+}

package/templates/dashboard/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@cocoframe/jsx",
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["app/**/*.ts", "app/**/*.tsx", "cocoframe.config.ts"]
+}

package/templates/documentation/README.md

@@ -0,0 +1,10 @@
+# {{PROJECT_NAME}}
+
+Documentation template built with CocoFrame `Sidebar`, `SyntaxHighlighter`, `Alert`, `Table`, `Card`, and Solar Linear icons.
+
+```bash
+npm install
+npm run dev
+```
+
+Add new guides as route sections or split them into dedicated `.page.tsx` files.

package/templates/documentation/_gitignore

@@ -0,0 +1,8 @@
+node_modules/
+.cocoframe/
+dist/
+coverage/
+*.log
+.env
+.env.*
+!.env.example

package/templates/documentation/app/routes/_layout.tsx

@@ -0,0 +1,17 @@
+import { defineLayout } from "@cocoframe/core";
+import BookIcon from "@cocoframe/icons/linear/book-2";
+import CodeIcon from "@cocoframe/icons/linear/code-square";
+import DocumentIcon from "@cocoframe/icons/linear/document-text";
+import RouteIcon from "@cocoframe/icons/linear/routing-2";
+import SettingsIcon from "@cocoframe/icons/linear/settings";
+import { Badge, Sidebar } from "@cocoframe/ui";
+
+export default defineLayout(({ children }) => (
+  <div class="docs-shell">
+    <Sidebar brand={<a class="docs-brand" href="/"><BookIcon size={24} /> <span>Atlas Docs</span></a>} groups={[
+      { label: "Getting started", items: [{ label: "Introduction", href: "#introduction", current: true, icon: <DocumentIcon size={17} /> }, { label: "Installation", href: "#installation", icon: <CodeIcon size={17} /> }] },
+      { label: "Core concepts", items: [{ label: "Routing", href: "#routing", icon: <RouteIcon size={17} /> }, { label: "Configuration", href: "#configuration", icon: <SettingsIcon size={17} />, badge: <Badge variant="success">New</Badge> }] },
+    ]} footer={<a href="/api/health">API status</a>} />
+    <div class="docs-main">{children}</div>
+  </div>
+));

package/templates/documentation/app/routes/api/health.route.ts

@@ -0,0 +1,12 @@
+import { defineApi } from "@cocoframe/core";
+import { schema } from "@cocoframe/schema";
+
+export default defineApi({
+  id: "health",
+  method: "GET",
+  output: schema.object({
+    ok: schema.literal(true),
+    framework: schema.string(),
+  }),
+  handle: () => ({ ok: true, framework: "cocoframe" }),
+});

package/templates/documentation/app/routes/index.page.tsx

@@ -0,0 +1,25 @@
+import { definePage } from "@cocoframe/core";
+import ArrowRightIcon from "@cocoframe/icons/linear/arrow-right";
+import CheckIcon from "@cocoframe/icons/linear/check-circle";
+import CodeIcon from "@cocoframe/icons/linear/code-square";
+import MagnifierIcon from "@cocoframe/icons/linear/magnifier";
+import { Alert, Badge, Card, Heading, SyntaxHighlighter, Table, Text } from "@cocoframe/ui";
+
+const installCode = `npm create cocoframe@latest my-app\ncd my-app\nnpm run dev`;
+const pageCode = `import { definePage } from "@cocoframe/core";\n\nexport default definePage({\n  meta: { title: "Hello" },\n  view: () => <h1>Hello from CocoFrame</h1>,\n});`;
+
+export default definePage({
+  meta: { title: "{{PROJECT_NAME}} — Documentation", description: "A searchable, server-first documentation template using official CocoFrame components and icons." },
+  view: () => <main class="docs-page">
+    <header class="docs-topbar"><a class="mobile-brand" href="/"><CodeIcon size={21} /> Atlas Docs</a><label class="docs-search"><MagnifierIcon size={17} /><span class="coco-visually-hidden">Search documentation</span><input type="search" placeholder="Search documentation…" /></label><a href="https://github.com/wiryosaputraofficial/cocoframe">GitHub</a></header>
+    <article class="docs-article">
+      <section id="introduction"><Badge variant="success"><CheckIcon size={14} /> Server-first documentation</Badge><Heading level={1} size="xlarge">Build documentation people can actually navigate.</Heading><Text size="large" tone="muted">Atlas Docs combines semantic navigation, accessible code samples, and a content layout that stays useful without browser JavaScript.</Text><div class="docs-actions"><a class="primary-link" href="#installation">Get started <ArrowRightIcon size={16} /></a><a class="secondary-link" href="#routing">Explore routing</a></div></section>
+
+      <section id="installation"><Heading level={2}>Installation</Heading><Text tone="muted">Create a project from the public registry and start the local development server.</Text><Card class="code-card"><SyntaxHighlighter code={installCode} language="bash" label="Install CocoFrame" showLineNumbers /></Card><Alert variant="info"><strong>Tip:</strong> Run <code>npm run inspect</code> to give developers and AI assistants a compact project manifest.</Alert></section>
+
+      <section id="routing"><Heading level={2}>File-based routing</Heading><Text tone="muted">A page owns its loader, metadata, and view. File names remain predictable and easy to scan.</Text><Card class="code-card"><SyntaxHighlighter code={pageCode} language="tsx" label="CocoFrame page" showLineNumbers /></Card><Table caption="Route conventions" headers={["File", "URL", "Purpose"]} rows={[["index.page.tsx", "/", "Static page"],["blog/[slug].page.tsx", "/blog/:slug", "Dynamic page"],["api/health.route.ts", "/api/health", "Typed API route"]]} striped /></section>
+
+      <section id="configuration"><Heading level={2}>Configuration</Heading><Text tone="muted">Keep cross-cutting behavior explicit in <code>cocoframe.config.ts</code>.</Text><div class="concept-grid"><Card><CodeIcon size={22} /><Heading level={3} size="medium">Typed config</Heading><Text tone="muted">Editors validate middleware, metadata, health checks, and asset options.</Text></Card><Card><CheckIcon size={22} /><Heading level={3} size="medium">Secure defaults</Heading><Text tone="muted">Security behavior stays outside render code and remains easy to inspect.</Text></Card></div></section>
+    </article>
+  </main>,
+});

package/templates/documentation/app/styles/app.css

@@ -0,0 +1,31 @@
+:root { color: #15231c; background: #fff; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body { margin: 0; }
+a { color: inherit; }
+.docs-shell { min-height: 100vh; display: grid; grid-template-columns: 270px minmax(0,1fr); }
+.docs-shell > .coco-sidebar { height: 100vh; border-right: 1px solid #dde7e1; background: #fbfdfc; position: sticky; top: 0; }
+.docs-brand, .mobile-brand { display: flex; align-items: center; gap: 9px; color: #187a55; font-weight: 850; text-decoration: none; }
+.docs-main { min-width: 0; }
+.docs-topbar { min-height: 68px; padding: 0 clamp(20px,4vw,52px); display: flex; align-items: center; justify-content: flex-end; gap: 22px; border-bottom: 1px solid #e2eae5; position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
+.mobile-brand { display: none; margin-right: auto; }
+.docs-search { width: min(380px,50vw); min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #d7e2dc; border-radius: 10px; color: #658074; background: #f8fbf9; }
+.docs-search input { width: 100%; border: 0; outline: 0; background: transparent; font: inherit; }
+.docs-topbar > a:last-child { color: #187a55; font-weight: 750; }
+.docs-article { width: min(850px,calc(100% - 40px)); margin: 0 auto; padding: 70px 0 120px; }
+.docs-article section { padding: 42px 0; scroll-margin-top: 80px; border-bottom: 1px solid #e4ece7; }
+.docs-article section:first-child { padding-top: 20px; }
+.docs-article .coco-heading { max-width: 780px; margin: 16px 0; letter-spacing: -.035em; }
+.docs-article .coco-text { max-width: 720px; line-height: 1.75; }
+.docs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
+.primary-link, .secondary-link { min-height: 44px; padding: 0 17px; display: inline-flex; align-items: center; gap: 8px; border-radius: 9px; font-weight: 750; text-decoration: none; }
+.primary-link { color: white; background: #187a55; }.secondary-link { border: 1px solid #cfded6; }
+.code-card { padding: 0; margin: 22px 0; overflow: hidden; }
+.code-card .coco-syntax { border: 0; }
+.docs-article .coco-alert { margin-block: 18px; }
+.docs-article .coco-table-wrap { margin-top: 20px; }
+.concept-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
+.concept-grid .coco-card { padding: 24px; }
+.concept-grid svg { color: #187a55; }
+@media (max-width: 820px) { .docs-shell { grid-template-columns: 1fr; } .docs-shell > .coco-sidebar { display: none; } .mobile-brand { display: flex; } .docs-topbar { padding-inline: 16px; } .docs-search { width: min(300px,45vw); } }
+@media (max-width: 520px) { .docs-topbar > a:last-child { display: none; } .docs-search { width: 44px; } .docs-search input { display: none; } .docs-article { width: min(100% - 28px,850px); padding-top: 40px; } .concept-grid { grid-template-columns: 1fr; } }

package/templates/documentation/cocoframe.config.ts

@@ -0,0 +1,2 @@
+import { defineConfig } from "@cocoframe/core";
+export default defineConfig({ language: "en", siteName: "{{PROJECT_NAME}}", stylesheets: ["/styles/app.css"], openapi: { title: "{{PROJECT_NAME}} API", version: "1.0.0" } });

package/templates/documentation/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "cocoframe dev .",
+    "build": "cocoframe build .",
+    "start": "cocoframe start .",
+    "check": "tsc --noEmit",
+    "inspect": "cocoframe inspect .",
+    "generate": "cocoframe generate ."
+  },
+  "dependencies": {
+    "@cocoframe/core": "0.0.1",
+    "@cocoframe/icons": "0.0.1",
+    "@cocoframe/jsx": "0.0.1",
+    "@cocoframe/schema": "0.0.1",
+    "@cocoframe/ui": "0.0.1"
+  },
+  "devDependencies": {
+    "@cocoframe/cli": "0.0.1",
+    "@types/node": "^24.0.0",
+    "typescript": "^5.9.0"
+  }
+}

package/templates/documentation/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@cocoframe/jsx",
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["app/**/*.ts", "app/**/*.tsx", "cocoframe.config.ts"]
+}

package/templates/marketing/README.md

@@ -0,0 +1,10 @@
+# {{PROJECT_NAME}}
+
+SEO-ready marketing template created with CocoFrame components and Solar Linear icons.
+
+```bash
+npm install
+npm run dev
+```
+
+Customize `app/routes/index.page.tsx`, then run `npm run check` and `npm run build`.

package/templates/marketing/_gitignore

@@ -0,0 +1,8 @@
+node_modules/
+.cocoframe/
+dist/
+coverage/
+*.log
+.env
+.env.*
+!.env.example

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

@@ -0,0 +1,13 @@
+import { defineLayout } from "@cocoframe/core";
+import StarsMinimalisticIcon from "@cocoframe/icons/linear/stars-minimalistic";
+
+export default defineLayout(({ children }) => (
+  <>
+    <header class="marketing-header">
+      <a class="marketing-brand" href="/"><StarsMinimalisticIcon size={25} label="Northstar" /> <span>Northstar</span></a>
+      <nav aria-label="Primary navigation"><a href="#features">Features</a><a href="#results">Results</a><a href="#contact">Contact</a></nav>
+      <a class="header-cta" href="#contact">Start free</a>
+    </header>
+    {children}
+  </>
+));

package/templates/marketing/app/routes/api/health.route.ts

@@ -0,0 +1,12 @@
+import { defineApi } from "@cocoframe/core";
+import { schema } from "@cocoframe/schema";
+
+export default defineApi({
+  id: "health",
+  method: "GET",
+  output: schema.object({
+    ok: schema.literal(true),
+    framework: schema.string(),
+  }),
+  handle: () => ({ ok: true, framework: "cocoframe" }),
+});

package/templates/marketing/app/routes/index.page.tsx

@@ -0,0 +1,39 @@
+import { definePage } from "@cocoframe/core";
+import ArrowRightIcon from "@cocoframe/icons/linear/arrow-right";
+import BoltIcon from "@cocoframe/icons/linear/bolt";
+import GraphUpIcon from "@cocoframe/icons/linear/graph-up";
+import ShieldCheckIcon from "@cocoframe/icons/linear/shield-check";
+import { Badge, Card, Container, Heading, Inline, Stack, Stat, Text } from "@cocoframe/ui";
+
+const features = [
+  { icon: <BoltIcon size={22} />, title: "Launch faster", copy: "Ship a polished product page with server-rendered HTML and a tiny browser footprint." },
+  { icon: <GraphUpIcon size={22} />, title: "Convert clearly", copy: "Guide visitors with focused sections, measurable proof, and accessible calls to action." },
+  { icon: <ShieldCheckIcon size={22} />, title: "Stay reliable", copy: "Typed routes, secure defaults, and predictable files keep the project easy to maintain." },
+];
+
+export default definePage({
+  meta: {
+    title: "{{PROJECT_NAME}} — Marketing template",
+    description: "A responsive, SEO-ready marketing template built with CocoFrame components.",
+  },
+  view: () => <main>
+    <Container as="section" size="large" class="marketing-hero">
+      <Stack gap="large" class="hero-copy">
+        <Badge variant="success"><BoltIcon size={14} /> Built with CocoFrame</Badge>
+        <Heading level={1} size="xlarge">Turn your next idea into a clear, fast product story.</Heading>
+        <Text size="large" tone="muted">Northstar gives modern teams an SEO-ready foundation made from official CocoFrame components and Solar Linear icons.</Text>
+        <Inline gap="medium"><a class="primary-link" href="#contact">Start building <ArrowRightIcon size={17} /></a><a class="secondary-link" href="#features">Explore features</a></Inline>
+      </Stack>
+      <Card class="hero-panel"><span class="panel-label">Weekly momentum</span><strong>+38%</strong><div class="spark-bars" aria-label="Growth chart"><i></i><i></i><i></i><i></i><i></i><i></i></div><small>More qualified product conversations</small></Card>
+    </Container>
+
+    <section id="features"><Container as="div" size="large" class="feature-section">
+      <Stack gap="small" class="section-heading"><Badge variant="primary">Product foundation</Badge><Heading level={2}>Everything needed for a confident launch</Heading><Text tone="muted">Composable sections stay readable for developers, search engines, and AI coding assistants.</Text></Stack>
+      <div class="feature-grid">{features.map((feature) => <Card class="feature-card"><span class="feature-icon">{feature.icon}</span><Heading level={3} size="medium">{feature.title}</Heading><Text tone="muted">{feature.copy}</Text></Card>)}</div>
+    </Container></section>
+
+    <section id="results"><Container as="div" size="large" class="results"><Stat label="Lighthouse-ready" value="100" trend="Semantic server HTML" tone="positive" /><Stat label="Browser runtime" value="Opt-in" trend="Islands only when needed" tone="positive" /><Stat label="Shared UI" value="80+" trend="Official primitives" tone="positive" /></Container></section>
+
+    <section id="contact"><Container as="div" size="large" class="final-cta"><Stack gap="medium"><Badge variant="success">Ready when you are</Badge><Heading level={2}>Build the next version of your product today.</Heading><Text tone="muted">Replace this copy with your offer, connect the typed API, and deploy.</Text><a class="primary-link" href="mailto:hello@example.com">Talk to the team <ArrowRightIcon size={17} /></a></Stack></Container></section>
+  </main>,
+});

package/templates/marketing/app/styles/app.css

@@ -0,0 +1,32 @@
+:root { color: #10231b; background: #fbfdfc; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body { margin: 0; }
+a { color: inherit; }
+.marketing-header { min-height: 72px; padding: 0 clamp(20px, 5vw, 72px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; border-bottom: 1px solid #dce9e1; background: rgba(255,255,255,.92); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(16px); }
+.marketing-brand { display: inline-flex; align-items: center; gap: 10px; color: #187a55; font-weight: 850; text-decoration: none; }
+.marketing-header nav { display: flex; gap: 28px; font-size: 14px; }
+.marketing-header nav a { text-decoration: none; }
+.header-cta, .primary-link, .secondary-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: max-content; min-height: 44px; padding: 0 18px; border-radius: 10px; font-weight: 750; text-decoration: none; }
+.header-cta { justify-self: end; color: white; background: #187a55; }
+.primary-link { color: white; background: #187a55; box-shadow: 0 10px 24px rgba(24,122,85,.18); }
+.secondary-link { border: 1px solid #cddfd5; background: white; }
+.marketing-hero { min-height: 690px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); align-items: center; gap: clamp(40px,7vw,100px); padding-block: clamp(72px,10vw,130px); }
+.hero-copy .coco-heading { max-width: 760px; margin: 0; letter-spacing: -.045em; }
+.hero-copy .coco-text { max-width: 650px; line-height: 1.75; }
+.hero-panel { min-height: 410px; padding: 34px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: white; background: linear-gradient(145deg,#0d2d22,#187a55); box-shadow: 0 28px 70px rgba(16,52,40,.22); }
+.hero-panel strong { margin: 12px 0 24px; font-size: clamp(58px,8vw,92px); letter-spacing: -.06em; }
+.panel-label, .hero-panel small { color: #c6ead9; }
+.spark-bars { height: 120px; display: flex; align-items: end; gap: 10px; margin-bottom: 20px; }
+.spark-bars i { flex: 1; height: 38%; border-radius: 7px 7px 2px 2px; background: rgba(255,255,255,.76); }
+.spark-bars i:nth-child(2) { height: 48%; }.spark-bars i:nth-child(3) { height: 43%; }.spark-bars i:nth-child(4) { height: 66%; }.spark-bars i:nth-child(5) { height: 76%; }.spark-bars i:nth-child(6) { height: 92%; }
+.feature-section { padding-block: 90px; }
+.section-heading { max-width: 690px; margin-bottom: 36px; }
+.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
+.feature-card { padding: 28px; }
+.feature-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 28px; border-radius: 12px; color: #187a55; background: #e8f5ee; }
+.results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding-block: 40px 90px; }
+.final-cta { margin-bottom: 80px; padding-block: 70px; text-align: center; border: 1px solid #d7e8df; border-radius: 24px; background: linear-gradient(135deg,#f2faf6,#e4f4eb); }
+.final-cta .coco-stack { align-items: center; max-width: 720px; margin: auto; }
+@media (max-width: 820px) { .marketing-header { grid-template-columns: 1fr auto; } .marketing-header nav { display: none; } .marketing-hero { min-height: auto; grid-template-columns: 1fr; } .feature-grid, .results { grid-template-columns: 1fr; } .hero-panel { min-height: 340px; } }
+@media (max-width: 420px) { .marketing-header { padding-inline: 16px; } .header-cta { padding-inline: 12px; } .marketing-hero { padding-block: 54px; } }

package/templates/marketing/cocoframe.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "@cocoframe/core";
+
+export default defineConfig({
+  language: "en",
+  siteName: "{{PROJECT_NAME}}",
+  stylesheets: ["/styles/app.css"],
+  openapi: { title: "{{PROJECT_NAME}} API", version: "1.0.0" },
+});

package/templates/marketing/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "cocoframe dev .",
+    "build": "cocoframe build .",
+    "start": "cocoframe start .",
+    "check": "tsc --noEmit",
+    "inspect": "cocoframe inspect .",
+    "generate": "cocoframe generate ."
+  },
+  "dependencies": {
+    "@cocoframe/core": "0.0.1",
+    "@cocoframe/icons": "0.0.1",
+    "@cocoframe/jsx": "0.0.1",
+    "@cocoframe/schema": "0.0.1",
+    "@cocoframe/ui": "0.0.1"
+  },
+  "devDependencies": {
+    "@cocoframe/cli": "0.0.1",
+    "@types/node": "^24.0.0",
+    "typescript": "^5.9.0"
+  }
+}

package/templates/marketing/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "verbatimModuleSyntax": true,
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@cocoframe/jsx",
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["app/**/*.ts", "app/**/*.tsx", "cocoframe.config.ts"]
+}