create-vista-app 0.2.16 → 0.3.2

package/bin/flash-template/app/index.tsx

@@ -1,86 +1,86 @@
-import Image from 'vista/image';
-import { ThemeToggle } from '../utils/theme-toggle';
-
-export default function Index() {
-  return (
-    <main className="relative flex min-h-[100dvh] items-center overflow-hidden bg-background text-foreground selection:bg-primary/20 selection:text-primary">
-      <div className="pointer-events-none absolute top-0 right-0 h-[380px] w-[380px] translate-x-1/4 -translate-y-1/4 rounded-full bg-primary opacity-20 blur-[110px]" />
-      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/45 to-transparent" />
-
-      <section className="relative z-10 mx-auto w-full max-w-5xl px-6 py-8 md:px-10 lg:px-12">
-        <div className="absolute right-0 top-0">
-          <ThemeToggle compact />
-        </div>
-
-        <div className="grid items-center gap-8 lg:grid-cols-[minmax(0,1.08fr)_minmax(300px,0.92fr)]">
-          <div className="max-w-2xl">
-            <div className="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-2 text-[11px] font-medium uppercase tracking-[0.28em] text-primary">
-              Flashpack starter
-            </div>
-            <h1 className="mt-6 max-w-2xl text-balance text-[clamp(2.9rem,5.8vw,5rem)] font-semibold leading-[0.94] tracking-tight text-foreground">
-              Stay in flow while the app keeps moving.
-            </h1>
-            <p className="mt-5 max-w-xl text-pretty text-base leading-8 text-muted-foreground md:text-lg">
-              Flashpack keeps the Vista workflow familiar, but gives you a tighter edit loop, clearer runtime traces,
-              and a cleaner place to inspect what happened during dev, build, and start.
-            </p>
-
-            <div className="mt-6 flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
-              <span className="rounded-full border border-border bg-panel px-4 py-2">
-                Same <code>vista dev</code> workflow
-              </span>
-              <span className="rounded-full border border-border bg-panel px-4 py-2">
-                Traceable output in <code>.flash/</code>
-              </span>
-              <a
-                href="https://vista.xyz/docs/env"
-                className="rounded-full border border-border bg-panel px-4 py-2 text-foreground transition-colors hover:border-primary/50 hover:text-primary"
-              >
-                Read the env guide
-              </a>
-            </div>
-
-            <p className="mt-5 text-sm text-muted-foreground">
-              Edit <code className="rounded bg-panel px-2 py-1 text-foreground">app/index.tsx</code> to shape this screen.
-            </p>
-          </div>
-
-          <aside className="space-y-4">
-            <div className="rounded-[1.9rem] border border-border bg-panel-elevated/80 p-6 shadow-[0_28px_75px_rgba(0,0,0,0.22)] backdrop-blur-sm">
-              <div className="mb-6 flex items-center justify-between text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
-                <span>Vista</span>
-                <span>Flashpack</span>
-              </div>
-              <div className="flex justify-center">
-                <Image
-                  src="/vista.svg"
-                  alt="Vista Logo"
-                  width={600}
-                  height={600}
-                  priority
-                  unoptimized
-                  className="h-auto w-[210px] opacity-95 dark:invert sm:w-[250px] lg:w-[280px]"
-                />
-              </div>
-            </div>
-
-            <div className="grid gap-4 sm:grid-cols-2">
-              <article className="rounded-[1.6rem] border border-border bg-panel p-5">
-                <p className="text-sm font-medium uppercase tracking-[0.22em] text-primary">Quicker feedback</p>
-                <p className="mt-3 text-sm leading-7 text-muted-foreground">
-                  Keep editing without feeling pushed into long restart cycles every time the route tree shifts.
-                </p>
-              </article>
-              <article className="rounded-[1.6rem] border border-border bg-panel p-5">
-                <p className="text-sm font-medium uppercase tracking-[0.22em] text-primary">Readable artifacts</p>
-                <p className="mt-3 text-sm leading-7 text-muted-foreground">
-                  Open graph, runtime, and log output when you want to understand how the engine moved.
-                </p>
-              </article>
-            </div>
-          </aside>
-        </div>
-      </section>
-    </main>
-  );
-}
+import Image from 'vista/image';
+import { ThemeToggle } from '../components/theme-toggle';
+
+export default function Index() {
+  return (
+    <main className="relative flex min-h-[100dvh] items-center overflow-hidden bg-background text-foreground selection:bg-primary/20 selection:text-primary">
+      <div className="pointer-events-none absolute top-0 right-0 h-[380px] w-[380px] translate-x-1/4 -translate-y-1/4 rounded-full bg-primary opacity-20 blur-[110px]" />
+      <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/45 to-transparent" />
+
+      <section className="relative z-10 mx-auto w-full max-w-5xl px-6 py-8 md:px-10 lg:px-12">
+        <div className="absolute right-0 top-0">
+          <ThemeToggle compact />
+        </div>
+
+        <div className="grid items-center gap-8 lg:grid-cols-[minmax(0,1.08fr)_minmax(300px,0.92fr)]">
+          <div className="max-w-2xl">
+            <div className="inline-flex items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-4 py-2 text-[11px] font-medium uppercase tracking-[0.28em] text-primary">
+              Flashpack starter
+            </div>
+            <h1 className="mt-6 max-w-2xl text-balance text-[clamp(2.9rem,5.8vw,5rem)] font-semibold leading-[0.94] tracking-tight text-foreground">
+              Stay in flow while the app keeps moving.
+            </h1>
+            <p className="mt-5 max-w-xl text-pretty text-base leading-8 text-muted-foreground md:text-lg">
+              Flashpack keeps the Vista workflow familiar, but gives you a tighter edit loop, clearer runtime traces,
+              and a cleaner place to inspect what happened during dev, build, and start.
+            </p>
+
+            <div className="mt-6 flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
+              <span className="rounded-full border border-border bg-panel px-4 py-2">
+                Same <code>vista dev</code> workflow
+              </span>
+              <span className="rounded-full border border-border bg-panel px-4 py-2">
+                Traceable output in <code>.flash/</code>
+              </span>
+              <a
+                href="https://vista.xyz/docs/env"
+                className="rounded-full border border-border bg-panel px-4 py-2 text-foreground transition-colors hover:border-primary/50 hover:text-primary"
+              >
+                Read the env guide
+              </a>
+            </div>
+
+            <p className="mt-5 text-sm text-muted-foreground">
+              Edit <code className="rounded bg-panel px-2 py-1 text-foreground">app/index.tsx</code> to shape this screen.
+            </p>
+          </div>
+
+          <aside className="space-y-4">
+            <div className="rounded-[1.9rem] border border-border bg-panel-elevated/80 p-6 shadow-[0_28px_75px_rgba(0,0,0,0.22)] backdrop-blur-sm">
+              <div className="mb-6 flex items-center justify-between text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
+                <span>Vista</span>
+                <span>Flashpack</span>
+              </div>
+              <div className="flex justify-center">
+                <Image
+                  src="/vista.svg"
+                  alt="Vista Logo"
+                  width={600}
+                  height={600}
+                  priority
+                  unoptimized
+                  className="h-auto w-[210px] opacity-95 dark:invert sm:w-[250px] lg:w-[280px]"
+                />
+              </div>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2">
+              <article className="rounded-[1.6rem] border border-border bg-panel p-5">
+                <p className="text-sm font-medium uppercase tracking-[0.22em] text-primary">Quicker feedback</p>
+                <p className="mt-3 text-sm leading-7 text-muted-foreground">
+                  Keep editing without feeling pushed into long restart cycles every time the route tree shifts.
+                </p>
+              </article>
+              <article className="rounded-[1.6rem] border border-border bg-panel p-5">
+                <p className="text-sm font-medium uppercase tracking-[0.22em] text-primary">Readable artifacts</p>
+                <p className="mt-3 text-sm leading-7 text-muted-foreground">
+                  Open graph, runtime, and log output when you want to understand how the engine moved.
+                </p>
+              </article>
+            </div>
+          </aside>
+        </div>
+      </section>
+    </main>
+  );
+}

package/bin/flash-template/app/root.tsx

@@ -1,35 +1,35 @@
-import type { Metadata } from 'vista';
-import { Geist, Geist_Mono } from 'vista/font/google';
-import { ThemeProvider, ThemeScript } from 'vista/theme';
-import './globals.css';
-
-const geistSans = Geist({
-  variable: '--font-geist-sans',
-  subsets: ['latin'],
-});
-
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
-  subsets: ['latin'],
-});
-
-export const metadata: Metadata = {
-  title: 'My Vista App',
-  description: 'Built with Vista Framework',
-};
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <head>
-        <ThemeScript defaultTheme="dark" />
-      </head>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} min-h-screen overflow-x-hidden bg-background text-foreground antialiased`}
-        suppressHydrationWarning
-      >
-        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
-      </body>
-    </html>
-  );
-}
+import type { Metadata } from 'vista';
+import { Geist, Geist_Mono } from 'vista/font/google';
+import { ThemeProvider, ThemeScript } from 'vista/theme';
+import './globals.css';
+
+const geistSans = Geist({
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
+});
+
+const geistMono = Geist_Mono({
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
+});
+
+export const metadata: Metadata = {
+  title: 'My Vista App',
+  description: 'Built with Vista Framework',
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <ThemeScript defaultTheme="dark" />
+      </head>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} min-h-screen overflow-x-hidden bg-background text-foreground antialiased`}
+        suppressHydrationWarning
+      >
+        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "create-vista-app",
-  "version": "0.2.16",
+  "version": "0.3.2",
   "description": "Create Vista applications with one command",
   "bin": {
     "create-vista-app": "./bin/cli.js"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/vistakit/Vista-Js.git",
+    "url": "https://github.com/Mantitup-Org/vista.git",
     "directory": "packages/create-vista-app"
   },
   "author": "Vista Team",
@@ -35,5 +35,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "18251c9e418c2b86bf42cab3d3318fda7be51a5d"
+  "gitHead": "d1b9f715d6365d8e1f553e96b752fbce8d98df7c"
 }

package/template/README.md

@@ -1,100 +1,60 @@
-# My Vista App
-
-Built with [Vista.js](https://github.com/vistakit/Vista-Js) — the React framework for visionaries.
-
-Selected engine for this app: `__VISTA_ENGINE__`
-
-Typed API starter: `__VISTA_TYPED_API__`
+# My Vista App
 
-## Getting Started
+Built with [Vista.js](https://github.com/Mantitup-Org/vista).
 
-Run the development server:
+Selected engine: `__VISTA_ENGINE__` · Typed API starter: `__VISTA_TYPED_API__`
+
+## Run
 
 ```bash
 npm run dev
-# or
-pnpm dev
 ```
 
-Open [http://localhost:3003](http://localhost:3003) in your browser.
-
-If you want typed API starter files in a fresh app:
-
-```bash
-npx create-vista-app@latest my-vista-app --typed-api
-```
+Open [http://localhost:3003](http://localhost:3003).
+
+## What can you build?
+
+| Goal | How |
+| --- | --- |
+| Normal React UI | Add pages under `app/`. Use `'use client'` for interactive components. |
+| Fullstack APIs | Add `app/api/**/route.ts`, or run `vista g api-init` for typed procedures. |
+| Auth | `vista g auth` then set `AUTH_SECRET`. Opens `/signin` (POST credentials + OAuth) and gates `/account`. |
+| AI chat agent | `vista g agent support` → edit `app/agents/support/agent.ts`. |
+| RAG over your docs | Use `InMemoryVectorStore` + `createRetrieverTool` + optional `embedText` from `vista/ai`. |
 
-## Project Structure
+## Project structure
 
 ```
 app/
-├── root.tsx        # Root layout (<html>, <body>, fonts)
-├── index.tsx       # Home page
-├── globals.css     # Global styles (Tailwind CSS v4)
-└── about/
-    └── page.tsx    # Example nested route → /about
+├── root.tsx        # Root layout
+├── index.tsx       # Home → /
+├── globals.css
+└── about/page.tsx  # → /about
+components/
 public/
-├── vista.svg       # Static assets
-vista.config.ts     # Framework configuration
+vista.config.ts
 ```
 
-## Key Concepts
-
-- **`app/root.tsx`** — Root layout that wraps every page. Defines `<html>`, fonts, and metadata.
-- **`app/index.tsx`** or **`app/page.tsx`** — Page components. Each folder = a route.
-- **`'use client'`** — Add this directive to make a component interactive (client-side).
-- **Server Components** — All components are server components by default (zero JS sent to browser).
-
-## Available Commands
-
-| Command       | Description                       |
-| ------------- | --------------------------------- |
-| `vista dev`   | Start dev server with the engine selected in `vista.config.ts` |
-| `vista build` | Create production build with the engine selected in `vista.config.ts` |
-| `vista start` | Start production server with the engine selected in `vista.config.ts` |
-| `vista g api-init` | Generate typed API starter files |
-| `vista g router <name>` | Generate a typed router file |
-| `vista g procedure <name> [get\|post]` | Generate a typed procedure file |
-
-## Engine Selection
-
-`create-vista-app` supports both engine variants:
-
-- `default` (webpack path)
-- `flashpack` (Rust-first path)
-
-You can choose at scaffold time, but the generated app still uses the same `npm run dev`, `npm run build`, and `npm run start` scripts. Vista reads the selected engine from `vista.config.ts`.
-
-Example:
-
-```bash
-npx create-vista-app@latest my-vista-app --engine flashpack
-```
-
-The generated config looks like:
-
-```ts
-engine: {
-  variant: 'flashpack'
-}
-```
-
-Flashpack engine runtime/cache artifacts are stored in `.flash/`.
-
-## Typed API Rollback
-
-Typed API is experimental and can be disabled anytime from `vista.config.ts`:
-
-```ts
-experimental: {
-  typedApi: {
-    enabled: false
-  }
-}
-```
-
-## Learn More
-
-- [Vista.js GitHub](https://github.com/vistakit/Vista-Js)
-- [React Server Components](https://react.dev/reference/rsc/server-components)
-- [Tailwind CSS v4](https://tailwindcss.com)
+## Commands
+
+| Command | Description |
+| --- | --- |
+| `npm run dev` / `build` / `start` | Develop, build (`.vista/`), serve |
+| `vista g api-init` | Typed API starter |
+| `vista g auth` | Auth config, `/signin`, `/account`, middleware, SessionProvider |
+| `vista g agent <name>` | Agent + streaming route + `app/AGENTS.md` |
+| `npm run deploy` | Deploy helpers (Render, Vercel, Cloudflare, …) |
+
+## Models (AI)
+
+Set `VISTA_AI_MODEL`, for example:
+
+- `openai:gpt-4o` · `groq:llama-3.1-8b-instant` · `nvidia:meta/llama-3.1-8b-instruct` · `ollama:llama3`
+
+## Learn more
+
+- [React app guide](https://vista-js.vercel.app/docs/getting-started/react-app)
+- [Fullstack guide](https://vista-js.vercel.app/docs/getting-started/fullstack-app)
+- [AI overview](https://vista-js.vercel.app/docs/ai/overview)
+- [RAG guide](https://vista-js.vercel.app/docs/ai/rag)
+- [GitHub](https://github.com/Mantitup-Org/vista)

package/template/app/globals.css

@@ -1,70 +1,70 @@
-@import "tailwindcss";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-primary: var(--primary);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-border: var(--border);
-  --color-panel: var(--panel);
-  --color-panel-elevated: var(--panel-elevated);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-html {
-  min-height: 100%;
-  overflow-x: hidden;
-  scrollbar-gutter: stable;
-}
-
-:root {
-  --background: #f3e8d8;
-  --foreground: #171717;
-  --primary: #ff4c30;
-  --muted: #ebe4d9;
-  --muted-foreground: #5f6570;
-  --border: #ddd4c8;
-  --panel: rgba(255, 255, 255, 0.76);
-  --panel-elevated: rgba(255, 255, 255, 0.92);
-  color-scheme: light;
-}
-
-:root.light {
-  --background: #f3e8d8;
-  --foreground: #171717;
-  --primary: #ff4c30;
-  --muted: #ebe4d9;
-  --muted-foreground: #5f6570;
-  --border: #ddd4c8;
-  --panel: rgba(255, 255, 255, 0.76);
-  --panel-elevated: rgba(255, 255, 255, 0.92);
-  color-scheme: light;
-}
-
-:root.dark {
-  --background: #0a0a0a;
-  --foreground: #ededed;
-  --primary: #ff4c30;
-  --muted: #11141b;
-  --muted-foreground: #97a0af;
-  --border: #1f2632;
-  --panel: rgba(15, 20, 30, 0.76);
-  --panel-elevated: rgba(11, 16, 24, 0.9);
-  color-scheme: dark;
-}
-
-body {
-  min-height: 100vh;
-  margin: 0;
-  background: var(--background);
-  color: var(--foreground);
-  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
-  overflow-x: hidden;
-  transition:
-    background-color 180ms ease,
-    color 180ms ease;
-}
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-panel: var(--panel);
+  --color-panel-elevated: var(--panel-elevated);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+html {
+  min-height: 100%;
+  overflow-x: hidden;
+  scrollbar-gutter: stable;
+}
+
+:root {
+  --background: #f3e8d8;
+  --foreground: #171717;
+  --primary: #ff4c30;
+  --muted: #ebe4d9;
+  --muted-foreground: #5f6570;
+  --border: #ddd4c8;
+  --panel: rgba(255, 255, 255, 0.76);
+  --panel-elevated: rgba(255, 255, 255, 0.92);
+  color-scheme: light;
+}
+
+:root.light {
+  --background: #f3e8d8;
+  --foreground: #171717;
+  --primary: #ff4c30;
+  --muted: #ebe4d9;
+  --muted-foreground: #5f6570;
+  --border: #ddd4c8;
+  --panel: rgba(255, 255, 255, 0.76);
+  --panel-elevated: rgba(255, 255, 255, 0.92);
+  color-scheme: light;
+}
+
+:root.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
+  --primary: #ff4c30;
+  --muted: #11141b;
+  --muted-foreground: #97a0af;
+  --border: #1f2632;
+  --panel: rgba(15, 20, 30, 0.76);
+  --panel-elevated: rgba(11, 16, 24, 0.9);
+  color-scheme: dark;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+  overflow-x: hidden;
+  transition:
+    background-color 180ms ease,
+    color 180ms ease;
+}