create-vista-app 0.2.14 → 0.2.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/bin/flash-template/app/index.tsx +25 -30
- package/bin/flash-template/app/root.tsx +6 -3
- package/package.json +39 -39
- package/template/README.md +4 -4
- package/template/app/globals.css +24 -1
- package/template/app/index.tsx +19 -14
- package/template/app/root.tsx +5 -2
- package/template/utils/theme-toggle.tsx +49 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Vista.js contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -1,51 +1,53 @@
|
|
|
1
1
|
import Image from 'vista/image';
|
|
2
|
+
import { ThemeToggle } from '../utils/theme-toggle';
|
|
2
3
|
|
|
3
4
|
export default function Index() {
|
|
4
5
|
return (
|
|
5
|
-
<main className="relative flex min-h-[100dvh] items-center overflow-hidden bg-
|
|
6
|
+
<main className="relative flex min-h-[100dvh] items-center overflow-hidden bg-background text-foreground selection:bg-primary/20 selection:text-primary">
|
|
6
7
|
<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]" />
|
|
7
8
|
<div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/45 to-transparent" />
|
|
8
9
|
|
|
9
|
-
<section className="relative z-10 mx-auto w-full max-w-5xl px-6 py-
|
|
10
|
-
<div className="
|
|
10
|
+
<section className="relative z-10 mx-auto w-full max-w-5xl px-6 py-8 md:px-10 lg:px-12">
|
|
11
|
+
<div className="absolute right-0 top-0">
|
|
12
|
+
<ThemeToggle compact />
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<div className="grid items-center gap-8 lg:grid-cols-[minmax(0,1.08fr)_minmax(300px,0.92fr)]">
|
|
11
16
|
<div className="max-w-2xl">
|
|
12
17
|
<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">
|
|
13
18
|
Flashpack starter
|
|
14
19
|
</div>
|
|
15
|
-
<h1 className="mt-6 max-w-2xl text-balance text-[clamp(2.9rem,5.8vw,5rem)] font-semibold leading-[0.94] tracking-tight text-
|
|
20
|
+
<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">
|
|
16
21
|
Stay in flow while the app keeps moving.
|
|
17
22
|
</h1>
|
|
18
|
-
<p className="mt-5 max-w-xl text-pretty text-base leading-8 text-
|
|
23
|
+
<p className="mt-5 max-w-xl text-pretty text-base leading-8 text-muted-foreground md:text-lg">
|
|
19
24
|
Flashpack keeps the Vista workflow familiar, but gives you a tighter edit loop, clearer runtime traces,
|
|
20
25
|
and a cleaner place to inspect what happened during dev, build, and start.
|
|
21
26
|
</p>
|
|
22
27
|
|
|
23
|
-
<div className="mt-6 flex flex-wrap items-center gap-3 text-sm text-
|
|
24
|
-
<span className="rounded-full border border-
|
|
28
|
+
<div className="mt-6 flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
|
|
29
|
+
<span className="rounded-full border border-border bg-panel px-4 py-2">
|
|
25
30
|
Same <code>vista dev</code> workflow
|
|
26
31
|
</span>
|
|
27
|
-
<span className="rounded-full border border-
|
|
32
|
+
<span className="rounded-full border border-border bg-panel px-4 py-2">
|
|
28
33
|
Traceable output in <code>.flash/</code>
|
|
29
34
|
</span>
|
|
30
|
-
</div>
|
|
31
|
-
|
|
32
|
-
<div className="mt-7 flex flex-wrap items-center gap-3 text-sm text-zinc-400">
|
|
33
|
-
<span>
|
|
34
|
-
Edit <code className="rounded bg-zinc-900 px-2 py-1 text-zinc-200">app/index.tsx</code> to shape this
|
|
35
|
-
screen.
|
|
36
|
-
</span>
|
|
37
35
|
<a
|
|
38
36
|
href="https://vista.xyz/docs/env"
|
|
39
|
-
className="rounded-full border border-
|
|
37
|
+
className="rounded-full border border-border bg-panel px-4 py-2 text-foreground transition-colors hover:border-primary/50 hover:text-primary"
|
|
40
38
|
>
|
|
41
39
|
Read the env guide
|
|
42
40
|
</a>
|
|
43
41
|
</div>
|
|
42
|
+
|
|
43
|
+
<p className="mt-5 text-sm text-muted-foreground">
|
|
44
|
+
Edit <code className="rounded bg-panel px-2 py-1 text-foreground">app/index.tsx</code> to shape this screen.
|
|
45
|
+
</p>
|
|
44
46
|
</div>
|
|
45
47
|
|
|
46
48
|
<aside className="space-y-4">
|
|
47
|
-
<div className="rounded-[1.9rem] border border-
|
|
48
|
-
<div className="mb-6 flex items-center justify-between text-[11px] uppercase tracking-[0.24em] text-
|
|
49
|
+
<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">
|
|
50
|
+
<div className="mb-6 flex items-center justify-between text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
|
|
49
51
|
<span>Vista</span>
|
|
50
52
|
<span>Flashpack</span>
|
|
51
53
|
</div>
|
|
@@ -57,32 +59,25 @@ export default function Index() {
|
|
|
57
59
|
height={600}
|
|
58
60
|
priority
|
|
59
61
|
unoptimized
|
|
60
|
-
className="h-auto w-[210px]
|
|
62
|
+
className="h-auto w-[210px] opacity-95 dark:invert sm:w-[250px] lg:w-[280px]"
|
|
61
63
|
/>
|
|
62
64
|
</div>
|
|
63
65
|
</div>
|
|
64
66
|
|
|
65
67
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
66
|
-
<article className="rounded-[1.6rem] border border-
|
|
68
|
+
<article className="rounded-[1.6rem] border border-border bg-panel p-5">
|
|
67
69
|
<p className="text-sm font-medium uppercase tracking-[0.22em] text-primary">Quicker feedback</p>
|
|
68
|
-
<p className="mt-3 text-sm leading-7 text-
|
|
70
|
+
<p className="mt-3 text-sm leading-7 text-muted-foreground">
|
|
69
71
|
Keep editing without feeling pushed into long restart cycles every time the route tree shifts.
|
|
70
72
|
</p>
|
|
71
73
|
</article>
|
|
72
|
-
<article className="rounded-[1.6rem] border border-
|
|
74
|
+
<article className="rounded-[1.6rem] border border-border bg-panel p-5">
|
|
73
75
|
<p className="text-sm font-medium uppercase tracking-[0.22em] text-primary">Readable artifacts</p>
|
|
74
|
-
<p className="mt-3 text-sm leading-7 text-
|
|
76
|
+
<p className="mt-3 text-sm leading-7 text-muted-foreground">
|
|
75
77
|
Open graph, runtime, and log output when you want to understand how the engine moved.
|
|
76
78
|
</p>
|
|
77
79
|
</article>
|
|
78
80
|
</div>
|
|
79
|
-
|
|
80
|
-
<div className="rounded-[1.6rem] border border-zinc-800/80 bg-zinc-950/45 p-5">
|
|
81
|
-
<p className="text-sm font-medium uppercase tracking-[0.22em] text-primary">Why teams pick it</p>
|
|
82
|
-
<p className="mt-3 text-sm leading-7 text-zinc-400">
|
|
83
|
-
Flashpack keeps the command surface stable while making build artifacts and dev behavior easier to read.
|
|
84
|
-
</p>
|
|
85
|
-
</div>
|
|
86
81
|
</aside>
|
|
87
82
|
</div>
|
|
88
83
|
</section>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Metadata } from 'vista';
|
|
2
2
|
import { Geist, Geist_Mono } from 'vista/font/google';
|
|
3
|
+
import { ThemeProvider, ThemeScript } from 'vista/theme';
|
|
3
4
|
import './globals.css';
|
|
4
5
|
|
|
5
6
|
const geistSans = Geist({
|
|
@@ -20,12 +21,14 @@ export const metadata: Metadata = {
|
|
|
20
21
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
21
22
|
return (
|
|
22
23
|
<html lang="en" suppressHydrationWarning>
|
|
23
|
-
<head
|
|
24
|
+
<head>
|
|
25
|
+
<ThemeScript defaultTheme="dark" />
|
|
26
|
+
</head>
|
|
24
27
|
<body
|
|
25
|
-
className={`${geistSans.variable} ${geistMono.variable} min-h-screen overflow-x-hidden bg-
|
|
28
|
+
className={`${geistSans.variable} ${geistMono.variable} min-h-screen overflow-x-hidden bg-background text-foreground antialiased`}
|
|
26
29
|
suppressHydrationWarning
|
|
27
30
|
>
|
|
28
|
-
{children}
|
|
31
|
+
<ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
|
|
29
32
|
</body>
|
|
30
33
|
</html>
|
|
31
34
|
);
|
package/package.json
CHANGED
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "create-vista-app",
|
|
3
|
-
"version": "0.2.
|
|
4
|
-
"description": "Create Vista applications with one command",
|
|
5
|
-
"bin": {
|
|
6
|
-
"create-vista-app": "./bin/cli.js"
|
|
7
|
-
},
|
|
8
|
-
"repository": {
|
|
9
|
-
"type": "git",
|
|
10
|
-
"url": "https://github.com/vistakit/Vista-Js.git",
|
|
11
|
-
"directory": "packages/create-vista-app"
|
|
12
|
-
},
|
|
13
|
-
"author": "Vista Team",
|
|
14
|
-
"license": "MIT",
|
|
15
|
-
"keywords": [
|
|
16
|
-
"create",
|
|
17
|
-
"vista",
|
|
18
|
-
"react",
|
|
19
|
-
"scaffold",
|
|
20
|
-
"cli"
|
|
21
|
-
],
|
|
22
|
-
"files": [
|
|
23
|
-
"bin",
|
|
24
|
-
"template",
|
|
25
|
-
"template-typed"
|
|
26
|
-
],
|
|
27
|
-
"dependencies": {
|
|
28
|
-
"fs-extra": "^11.1.1",
|
|
29
|
-
"picocolors": "^1.0.0",
|
|
30
|
-
"prompts": "^2.4.2"
|
|
31
|
-
},
|
|
32
|
-
"devDependencies": {
|
|
33
|
-
"@types/react": "^19.0.0",
|
|
34
|
-
"@types/react-dom": "^19.0.0",
|
|
35
|
-
"react": "^19.0.0",
|
|
36
|
-
"react-dom": "^19.0.0"
|
|
37
|
-
},
|
|
38
|
-
"gitHead": "
|
|
39
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "create-vista-app",
|
|
3
|
+
"version": "0.2.16",
|
|
4
|
+
"description": "Create Vista applications with one command",
|
|
5
|
+
"bin": {
|
|
6
|
+
"create-vista-app": "./bin/cli.js"
|
|
7
|
+
},
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "https://github.com/vistakit/Vista-Js.git",
|
|
11
|
+
"directory": "packages/create-vista-app"
|
|
12
|
+
},
|
|
13
|
+
"author": "Vista Team",
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"keywords": [
|
|
16
|
+
"create",
|
|
17
|
+
"vista",
|
|
18
|
+
"react",
|
|
19
|
+
"scaffold",
|
|
20
|
+
"cli"
|
|
21
|
+
],
|
|
22
|
+
"files": [
|
|
23
|
+
"bin",
|
|
24
|
+
"template",
|
|
25
|
+
"template-typed"
|
|
26
|
+
],
|
|
27
|
+
"dependencies": {
|
|
28
|
+
"fs-extra": "^11.1.1",
|
|
29
|
+
"picocolors": "^1.0.0",
|
|
30
|
+
"prompts": "^2.4.2"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@types/react": "^19.0.0",
|
|
34
|
+
"@types/react-dom": "^19.0.0",
|
|
35
|
+
"react": "^19.0.0",
|
|
36
|
+
"react-dom": "^19.0.0"
|
|
37
|
+
},
|
|
38
|
+
"gitHead": "18251c9e418c2b86bf42cab3d3318fda7be51a5d"
|
|
39
|
+
}
|
package/template/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# My Vista App
|
|
2
2
|
|
|
3
|
-
Built with [Vista.js](https://github.com/
|
|
3
|
+
Built with [Vista.js](https://github.com/vistakit/Vista-Js) — the React framework for visionaries.
|
|
4
4
|
|
|
5
5
|
Selected engine for this app: `__VISTA_ENGINE__`
|
|
6
6
|
|
|
@@ -93,8 +93,8 @@ experimental: {
|
|
|
93
93
|
}
|
|
94
94
|
```
|
|
95
95
|
|
|
96
|
-
## Learn More
|
|
97
|
-
|
|
98
|
-
- [Vista.js GitHub](https://github.com/
|
|
96
|
+
## Learn More
|
|
97
|
+
|
|
98
|
+
- [Vista.js GitHub](https://github.com/vistakit/Vista-Js)
|
|
99
99
|
- [React Server Components](https://react.dev/reference/rsc/server-components)
|
|
100
100
|
- [Tailwind CSS v4](https://tailwindcss.com)
|
package/template/app/globals.css
CHANGED
|
@@ -6,6 +6,11 @@
|
|
|
6
6
|
--color-background: var(--background);
|
|
7
7
|
--color-foreground: var(--foreground);
|
|
8
8
|
--color-primary: var(--primary);
|
|
9
|
+
--color-muted: var(--muted);
|
|
10
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
11
|
+
--color-border: var(--border);
|
|
12
|
+
--color-panel: var(--panel);
|
|
13
|
+
--color-panel-elevated: var(--panel-elevated);
|
|
9
14
|
--font-sans: var(--font-geist-sans);
|
|
10
15
|
--font-mono: var(--font-geist-mono);
|
|
11
16
|
}
|
|
@@ -20,13 +25,23 @@ html {
|
|
|
20
25
|
--background: #f3e8d8;
|
|
21
26
|
--foreground: #171717;
|
|
22
27
|
--primary: #ff4c30;
|
|
28
|
+
--muted: #ebe4d9;
|
|
29
|
+
--muted-foreground: #5f6570;
|
|
30
|
+
--border: #ddd4c8;
|
|
31
|
+
--panel: rgba(255, 255, 255, 0.76);
|
|
32
|
+
--panel-elevated: rgba(255, 255, 255, 0.92);
|
|
23
33
|
color-scheme: light;
|
|
24
34
|
}
|
|
25
35
|
|
|
26
36
|
:root.light {
|
|
27
|
-
--background: #
|
|
37
|
+
--background: #f3e8d8;
|
|
28
38
|
--foreground: #171717;
|
|
29
39
|
--primary: #ff4c30;
|
|
40
|
+
--muted: #ebe4d9;
|
|
41
|
+
--muted-foreground: #5f6570;
|
|
42
|
+
--border: #ddd4c8;
|
|
43
|
+
--panel: rgba(255, 255, 255, 0.76);
|
|
44
|
+
--panel-elevated: rgba(255, 255, 255, 0.92);
|
|
30
45
|
color-scheme: light;
|
|
31
46
|
}
|
|
32
47
|
|
|
@@ -34,6 +49,11 @@ html {
|
|
|
34
49
|
--background: #0a0a0a;
|
|
35
50
|
--foreground: #ededed;
|
|
36
51
|
--primary: #ff4c30;
|
|
52
|
+
--muted: #11141b;
|
|
53
|
+
--muted-foreground: #97a0af;
|
|
54
|
+
--border: #1f2632;
|
|
55
|
+
--panel: rgba(15, 20, 30, 0.76);
|
|
56
|
+
--panel-elevated: rgba(11, 16, 24, 0.9);
|
|
37
57
|
color-scheme: dark;
|
|
38
58
|
}
|
|
39
59
|
|
|
@@ -44,4 +64,7 @@ body {
|
|
|
44
64
|
color: var(--foreground);
|
|
45
65
|
font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
|
|
46
66
|
overflow-x: hidden;
|
|
67
|
+
transition:
|
|
68
|
+
background-color 180ms ease,
|
|
69
|
+
color 180ms ease;
|
|
47
70
|
}
|
package/template/app/index.tsx
CHANGED
|
@@ -1,18 +1,23 @@
|
|
|
1
1
|
import Image from 'vista/image';
|
|
2
|
+
import { ThemeToggle } from '../utils/theme-toggle';
|
|
2
3
|
|
|
3
4
|
export default function Index() {
|
|
4
5
|
return (
|
|
5
|
-
<main className="flex min-h-[100dvh] items-center justify-center bg-
|
|
6
|
-
<section className="w-full max-w-
|
|
6
|
+
<main className="flex min-h-[100dvh] items-center justify-center bg-background px-6 py-8 text-foreground selection:bg-primary/15 selection:text-primary md:px-10">
|
|
7
|
+
<section className="relative w-full max-w-5xl rounded-[2rem] border border-border bg-panel-elevated/90 p-7 shadow-[0_24px_80px_rgba(27,18,7,0.08)] backdrop-blur-sm md:p-10">
|
|
8
|
+
<div className="absolute right-5 top-5">
|
|
9
|
+
<ThemeToggle compact />
|
|
10
|
+
</div>
|
|
11
|
+
|
|
7
12
|
<div className="grid items-center gap-10 lg:grid-cols-[minmax(0,1.05fr)_minmax(300px,0.95fr)]">
|
|
8
13
|
<div className="max-w-xl">
|
|
9
|
-
<div className="inline-flex items-center gap-2 rounded-full border border-
|
|
14
|
+
<div className="inline-flex items-center gap-2 rounded-full border border-border bg-background/70 px-4 py-2 text-[11px] font-medium uppercase tracking-[0.28em] text-primary">
|
|
10
15
|
Vista starter
|
|
11
16
|
</div>
|
|
12
|
-
<h1 className="mt-6 max-w-xl text-balance text-[clamp(2.6rem,5vw,4.6rem)] font-semibold tracking-tight text-
|
|
17
|
+
<h1 className="mt-6 max-w-xl text-balance text-[clamp(2.6rem,5vw,4.6rem)] font-semibold tracking-tight text-foreground">
|
|
13
18
|
Start by editing <code className="font-mono text-[0.82em]">app/index.tsx</code>.
|
|
14
19
|
</h1>
|
|
15
|
-
<p className="mt-5 max-w-lg text-pretty text-base leading-8 text-
|
|
20
|
+
<p className="mt-5 max-w-lg text-pretty text-base leading-8 text-muted-foreground md:text-lg">
|
|
16
21
|
The default starter keeps the first screen calm: one route, a clean app shell, and the core Vista flow
|
|
17
22
|
already wired so you can start building instead of cleaning up scaffolding.
|
|
18
23
|
</p>
|
|
@@ -20,18 +25,18 @@ export default function Index() {
|
|
|
20
25
|
<div className="mt-7 flex flex-wrap items-center gap-3">
|
|
21
26
|
<a
|
|
22
27
|
href="https://vista.xyz/docs/env"
|
|
23
|
-
className="inline-flex items-center justify-center rounded-full bg-
|
|
28
|
+
className="inline-flex items-center justify-center rounded-full bg-foreground px-5 py-3 text-sm font-medium text-background transition-colors hover:opacity-90"
|
|
24
29
|
>
|
|
25
30
|
Open env guide
|
|
26
31
|
</a>
|
|
27
|
-
<span className="rounded-full border border-
|
|
32
|
+
<span className="rounded-full border border-border bg-background/70 px-4 py-3 text-sm text-muted-foreground">
|
|
28
33
|
Engine lives in <code>vista.config.ts</code>
|
|
29
34
|
</span>
|
|
30
35
|
</div>
|
|
31
36
|
</div>
|
|
32
37
|
|
|
33
|
-
<aside className="rounded-[1.7rem] border border-
|
|
34
|
-
<div className="flex items-center justify-between text-[11px] uppercase tracking-[0.24em] text-
|
|
38
|
+
<aside className="rounded-[1.7rem] border border-border bg-background/70 p-6">
|
|
39
|
+
<div className="flex items-center justify-between text-[11px] uppercase tracking-[0.24em] text-muted-foreground">
|
|
35
40
|
<span>Default engine</span>
|
|
36
41
|
<span>Vista</span>
|
|
37
42
|
</div>
|
|
@@ -48,13 +53,13 @@ export default function Index() {
|
|
|
48
53
|
/>
|
|
49
54
|
</div>
|
|
50
55
|
|
|
51
|
-
<div className="mt-7 space-y-3 text-sm text-
|
|
52
|
-
<div className="rounded-2xl border border-
|
|
53
|
-
<p className="font-medium text-
|
|
56
|
+
<div className="mt-7 space-y-3 text-sm text-muted-foreground">
|
|
57
|
+
<div className="rounded-2xl border border-border bg-panel p-4">
|
|
58
|
+
<p className="font-medium text-foreground">Stable default path</p>
|
|
54
59
|
<p className="mt-2 leading-7">Use the familiar <code>vista dev</code>, <code>vista build</code>, and <code>vista start</code> flow from day one.</p>
|
|
55
60
|
</div>
|
|
56
|
-
<div className="rounded-2xl border border-
|
|
57
|
-
<p className="font-medium text-
|
|
61
|
+
<div className="rounded-2xl border border-border bg-panel p-4">
|
|
62
|
+
<p className="font-medium text-foreground">Config-first workflow</p>
|
|
58
63
|
<p className="mt-2 leading-7">Adjust engine and framework behavior in <code>vista.config.ts</code> instead of rewriting scripts.</p>
|
|
59
64
|
</div>
|
|
60
65
|
</div>
|
package/template/app/root.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Metadata } from 'vista';
|
|
2
2
|
import { Geist, Geist_Mono } from 'vista/font/google';
|
|
3
|
+
import { ThemeProvider, ThemeScript } from 'vista/theme';
|
|
3
4
|
import './globals.css';
|
|
4
5
|
|
|
5
6
|
const geistSans = Geist({
|
|
@@ -20,12 +21,14 @@ export const metadata: Metadata = {
|
|
|
20
21
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
21
22
|
return (
|
|
22
23
|
<html lang="en" suppressHydrationWarning>
|
|
23
|
-
<head
|
|
24
|
+
<head>
|
|
25
|
+
<ThemeScript defaultTheme="system" />
|
|
26
|
+
</head>
|
|
24
27
|
<body
|
|
25
28
|
className={`${geistSans.variable} ${geistMono.variable} min-h-screen overflow-x-hidden antialiased bg-background text-foreground`}
|
|
26
29
|
suppressHydrationWarning
|
|
27
30
|
>
|
|
28
|
-
{children}
|
|
31
|
+
<ThemeProvider defaultTheme="system">{children}</ThemeProvider>
|
|
29
32
|
</body>
|
|
30
33
|
</html>
|
|
31
34
|
);
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
|
|
3
|
+
import { Laptop2, MoonStar, SunMedium } from 'lucide-react';
|
|
4
|
+
import { useTheme, type ThemeMode } from 'vista/theme';
|
|
5
|
+
|
|
6
|
+
const OPTIONS: Array<{
|
|
7
|
+
value: ThemeMode;
|
|
8
|
+
label: string;
|
|
9
|
+
icon: typeof Laptop2;
|
|
10
|
+
}> = [
|
|
11
|
+
{ value: 'system', label: 'System', icon: Laptop2 },
|
|
12
|
+
{ value: 'light', label: 'Light', icon: SunMedium },
|
|
13
|
+
{ value: 'dark', label: 'Dark', icon: MoonStar },
|
|
14
|
+
];
|
|
15
|
+
|
|
16
|
+
interface ThemeToggleProps {
|
|
17
|
+
compact?: boolean;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export function ThemeToggle({ compact = false }: ThemeToggleProps) {
|
|
21
|
+
const { mounted, theme, setTheme } = useTheme();
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<div className="inline-flex items-center gap-1 rounded-full border border-border/80 bg-panel-elevated/90 p-1 shadow-[0_10px_30px_rgba(15,23,42,0.08)] backdrop-blur">
|
|
25
|
+
{OPTIONS.map((option) => {
|
|
26
|
+
const Icon = option.icon;
|
|
27
|
+
const isActive = theme === option.value;
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<button
|
|
31
|
+
key={option.value}
|
|
32
|
+
type="button"
|
|
33
|
+
onClick={() => setTheme(option.value)}
|
|
34
|
+
className={`inline-flex items-center justify-center gap-2 rounded-full px-3 py-2 text-xs font-medium transition-colors ${
|
|
35
|
+
isActive
|
|
36
|
+
? 'bg-foreground text-background'
|
|
37
|
+
: 'text-muted-foreground hover:bg-background/80 hover:text-foreground'
|
|
38
|
+
} ${compact ? 'px-2.5' : ''}`}
|
|
39
|
+
aria-pressed={isActive}
|
|
40
|
+
title={mounted ? option.label : undefined}
|
|
41
|
+
>
|
|
42
|
+
<Icon className="h-3.5 w-3.5" />
|
|
43
|
+
{!compact ? <span>{option.label}</span> : null}
|
|
44
|
+
</button>
|
|
45
|
+
);
|
|
46
|
+
})}
|
|
47
|
+
</div>
|
|
48
|
+
);
|
|
49
|
+
}
|