@forgeailab/create-spark 0.1.1 → 0.1.2

package/templates/nextjs/app/(app)/home/posts-panel.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import { useState, type FormEvent } from 'react';
+import { usePosts } from '@/lib/posts-placeholder';
+
+export function PostsPanel() {
+  const { posts, createPost } = usePosts();
+  const [title, setTitle] = useState('');
+  const [body, setBody] = useState('');
+  const [pending, setPending] = useState(false);
+
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!title.trim()) return;
+    setPending(true);
+    try {
+      await createPost({ title: title.trim(), body: body.trim() });
+      setTitle('');
+      setBody('');
+    } finally {
+      setPending(false);
+    }
+  }
+
+  return (
+    <div className="mt-3 space-y-4">
+      <form
+        onSubmit={onSubmit}
+        className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm"
+      >
+        <input
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="Post title"
+          className="block w-full rounded-md border border-slate-300 px-3 py-2 text-sm placeholder:text-slate-400 focus:border-slate-900 focus:outline-none focus:ring-1 focus:ring-slate-900"
+        />
+        <textarea
+          value={body}
+          onChange={(e) => setBody(e.target.value)}
+          placeholder="Write something…"
+          rows={2}
+          className="mt-2 block w-full rounded-md border border-slate-300 px-3 py-2 text-sm placeholder:text-slate-400 focus:border-slate-900 focus:outline-none focus:ring-1 focus:ring-slate-900"
+        />
+        <div className="mt-3 flex items-center justify-end">
+          <button
+            type="submit"
+            disabled={pending || !title.trim()}
+            className="inline-flex items-center justify-center rounded-md bg-slate-900 px-4 py-1.5 text-sm font-medium text-white shadow-sm transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {pending ? 'Posting…' : 'Post'}
+          </button>
+        </div>
+      </form>
+
+      {posts.length === 0 ? (
+        <div className="rounded-xl border border-dashed border-slate-300 bg-white/60 px-4 py-8 text-center text-sm text-slate-500">
+          No posts yet. Install the{' '}
+          <code className="rounded bg-slate-100 px-1">sync-zero</code> pack to
+          persist and sync posts in real time.
+        </div>
+      ) : (
+        <ul className="space-y-2">
+          {posts.map((post) => (
+            <li
+              key={post.id}
+              className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm"
+            >
+              <h3 className="text-sm font-semibold text-slate-900">
+                {post.title}
+              </h3>
+              {post.body && (
+                <p className="mt-1 text-sm text-slate-600">{post.body}</p>
+              )}
+              <p className="mt-2 text-xs text-slate-400">
+                {post.createdAt.toLocaleString()}
+              </p>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

package/templates/nextjs/app/(app)/layout.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+
+// Placeholder authed-route layout.
+//
+// The `auth-better-auth` pack will replace this with a server-side guard that
+// calls `getSessionUser()` and `redirect('/login')` when there is no session.
+// Until then this just renders children so the scaffold compiles and runs.
+export default function AppLayout({ children }: { children: ReactNode }) {
+  return (
+    <div className="min-h-screen bg-slate-50 text-slate-900">{children}</div>
+  );
+}

package/templates/nextjs/app/(auth)/login/page.tsx

@@ -0,0 +1,97 @@
+import Link from 'next/link';
+
+// NOTE: no auth wired yet. The `action` and the GitHub button are placeholders.
+// The `auth-better-auth` pack will:
+//   - replace `action="/api/auth/sign-in"` with the real route handler path
+//   - replace the GitHub button's form with a real OAuth start endpoint
+//   - add `app/api/auth/[...all]/route.ts` and `lib/auth.ts`
+export default function LoginPage() {
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-slate-50 px-6 py-16">
+      <div className="w-full max-w-sm">
+        <div className="mb-8 text-center">
+          <h1 className="text-2xl font-semibold tracking-tight text-slate-900">
+            Welcome back
+          </h1>
+          <p className="mt-1 text-sm text-slate-600">
+            Sign in to continue to your workspace.
+          </p>
+        </div>
+        <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
+          <form action="/api/auth/sign-in" method="post" className="space-y-4">
+            <div>
+              <label
+                htmlFor="email"
+                className="block text-xs font-medium text-slate-700"
+              >
+                Email
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                className="mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-slate-900 focus:outline-none focus:ring-1 focus:ring-slate-900"
+                placeholder="you@example.com"
+              />
+            </div>
+            <div>
+              <label
+                htmlFor="password"
+                className="block text-xs font-medium text-slate-700"
+              >
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autoComplete="current-password"
+                required
+                className="mt-1 block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-slate-900 focus:outline-none focus:ring-1 focus:ring-slate-900"
+                placeholder="••••••••"
+              />
+            </div>
+            <button
+              type="submit"
+              className="w-full rounded-md bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:ring-offset-2"
+            >
+              Sign in
+            </button>
+          </form>
+          <div className="relative my-5">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-slate-200" />
+            </div>
+            <div className="relative flex justify-center text-xs uppercase">
+              <span className="bg-white px-2 text-slate-500">or</span>
+            </div>
+          </div>
+          <form action="/api/auth/sign-in/github" method="post">
+            <button
+              type="submit"
+              className="inline-flex w-full items-center justify-center gap-2 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-800 shadow-sm transition hover:bg-slate-50"
+            >
+              <svg
+                aria-hidden="true"
+                viewBox="0 0 24 24"
+                className="h-4 w-4"
+                fill="currentColor"
+              >
+                <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56v-2c-3.2.7-3.87-1.37-3.87-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.7 0-1.26.45-2.29 1.19-3.1-.12-.29-.52-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11 11 0 015.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.58.23 2.75.12 3.04.74.81 1.19 1.84 1.19 3.1 0 4.43-2.69 5.41-5.25 5.69.41.36.78 1.06.78 2.14v3.17c0 .31.21.68.8.56 4.57-1.52 7.86-5.83 7.86-10.91C23.5 5.65 18.35.5 12 .5z" />
+              </svg>
+              Continue with GitHub
+            </button>
+          </form>
+        </div>
+        <p className="mt-6 text-center text-xs text-slate-500">
+          Don&apos;t have an account?{' '}
+          <Link href="/" className="font-medium text-slate-900 hover:underline">
+            Back home
+          </Link>
+        </p>
+      </div>
+    </main>
+  );
+}

package/templates/nextjs/app/globals.css

@@ -0,0 +1,23 @@
+@import "tailwindcss";
+
+:root {
+  color-scheme: light;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  background-color: #f8fafc;
+  color: #0f172a;
+  line-height: 1.5;
+}

package/templates/nextjs/app/layout.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from 'next';
+import type { ReactNode } from 'react';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'Spark App',
+  description: 'Minimal Next.js scaffold for spark projects.',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

package/templates/nextjs/app/page.tsx

@@ -0,0 +1,39 @@
+import Link from 'next/link';
+
+export default function PublicLanding() {
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-gradient-to-b from-slate-50 to-slate-100 px-6 py-16">
+      <section className="w-full max-w-xl text-center">
+        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-500">
+          Spark
+        </p>
+        <h1 className="mt-3 text-4xl font-semibold tracking-tight text-slate-900 sm:text-5xl">
+          {'{{appName}}'}
+        </h1>
+        <p className="mt-4 text-base leading-relaxed text-slate-600">
+          A board-driven Next.js scaffold. Plan the work in{' '}
+          <code className="rounded bg-slate-200/70 px-1.5 py-0.5 text-sm text-slate-800">
+            .ai/board.md
+          </code>{' '}
+          and add capabilities with packs.
+        </p>
+        <div className="mt-8 flex items-center justify-center gap-3">
+          <Link
+            href="/login"
+            className="inline-flex items-center justify-center rounded-md bg-slate-900 px-5 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:ring-offset-2"
+          >
+            Sign in
+          </Link>
+          <a
+            href="https://nextjs.org/docs/app"
+            target="_blank"
+            rel="noreferrer"
+            className="inline-flex items-center justify-center rounded-md border border-slate-300 bg-white px-5 py-2.5 text-sm font-medium text-slate-700 shadow-sm transition hover:bg-slate-50"
+          >
+            Docs
+          </a>
+        </div>
+      </section>
+    </main>
+  );
+}

package/templates/nextjs/lib/auth-placeholder.ts

@@ -0,0 +1,21 @@
+/**
+ * Placeholder session lookup.
+ *
+ * Returns `null` until an auth pack (e.g. `auth-better-auth`) replaces this
+ * module with a real `getSessionUser` that reads cookies / headers and
+ * resolves the active user.
+ *
+ * The shape returned here is the contract auth packs must honor: they should
+ * export the same `getSessionUser` signature so consumers in `app/(app)/**`
+ * keep working without further edits.
+ */
+export interface SessionUser {
+  id: string;
+  name: string;
+  email: string;
+}
+
+export async function getSessionUser(): Promise<SessionUser | null> {
+  // TODO: replaced by `auth-better-auth` (or another auth pack).
+  return null;
+}

package/templates/nextjs/lib/posts-placeholder.ts

@@ -0,0 +1,30 @@
+'use client';
+
+import { useMemo } from 'react';
+import type { Post } from '@/types/post';
+
+/**
+ * Placeholder posts hook.
+ *
+ * Returns an empty list and a no-op `createPost` until a sync pack
+ * (e.g. `sync-zero`) replaces this module with a real Zero client query.
+ *
+ * Sync packs should export the same `usePosts` signature so the UI in
+ * `app/(app)/page.tsx` keeps working without further edits.
+ */
+export interface UsePostsResult {
+  posts: Post[];
+  createPost: (input: { title: string; body: string }) => Promise<void>;
+}
+
+export function usePosts(): UsePostsResult {
+  return useMemo<UsePostsResult>(
+    () => ({
+      posts: [],
+      createPost: async () => {
+        // TODO: replaced by `sync-zero` (or another sync pack).
+      },
+    }),
+    [],
+  );
+}

package/templates/nextjs/next.config.ts

@@ -0,0 +1,5 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {};
+
+export default nextConfig;

package/templates/nextjs/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "spark-nextjs-template",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "packageManager": "bun@1.3.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^15",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "postcss": "^8",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

package/templates/nextjs/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

package/templates/nextjs/template.toml

@@ -0,0 +1,4 @@
+name = "nextjs"
+status = "stable"
+provides = ["server", "static", "react"]
+description = "Next.js 15 App Router scaffold for TypeScript web apps."

package/templates/nextjs/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/nextjs/types/post.ts

@@ -0,0 +1,13 @@
+/**
+ * Post entity shape.
+ *
+ * Kept stable so packs that wire real data (e.g. `sync-zero`) can reuse the
+ * same type without diverging field names.
+ */
+export interface Post {
+  id: string;
+  userId: string;
+  title: string;
+  body: string;
+  createdAt: Date;
+}

package/templates/one/README.md

@@ -0,0 +1,5 @@
+# One Template
+
+This template is registered for pack compatibility planning, but it is not implemented yet. The planned scope is a full-stack web and native scaffold using the One framework: https://onestack.dev/
+
+Implementation should follow the Bun workspace and CLI shape proven in the takeout2 reference project while keeping the generated scaffold minimal and ready for pack-based composition.

package/templates/one/template.toml

@@ -0,0 +1,4 @@
+name = "one"
+status = "planned"
+provides = ["server", "static", "react", "native"]
+description = "Planned One framework scaffold for full-stack web and native apps."

package/templates/vite-react/README.md

@@ -0,0 +1,3 @@
+# Vite React Template
+
+This template is registered for pack compatibility planning, but it is not implemented yet. The planned scope is a Vite-powered React scaffold for SPAs and internal tools, with no server runtime by default and the same AI workflow artifacts as the stable Next.js template.

package/templates/vite-react/template.toml

@@ -0,0 +1,4 @@
+name = "vite-react"
+status = "planned"
+provides = ["static", "react"]
+description = "Planned Vite React scaffold for client-side web apps."