create-prisma 0.3.0 → 0.3.1-pr.30.46.1

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.
Files changed (10) hide show
  1. package/dist/cli.mjs +1 -1
  2. package/dist/{create--wGG0UNz.mjs → create-DVzexktt.mjs} +13 -25
  3. package/dist/index.mjs +2 -2
  4. package/package.json +2 -2
  5. package/templates/create/astro/src/pages/index.astro.hbs +39 -49
  6. package/templates/create/next/src/app/globals.css +38 -46
  7. package/templates/create/nuxt/app/pages/index.vue.hbs +45 -55
  8. package/templates/create/svelte/src/routes/+page.svelte.hbs +78 -99
  9. package/templates/create/tanstack-start/src/routes/index.tsx.hbs +28 -30
  10. package/templates/create/tanstack-start/src/styles.css +80 -121
package/dist/cli.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  #!/usr/bin/env node
2
- import "./create--wGG0UNz.mjs";
2
+ import "./create-DVzexktt.mjs";
3
3
  import { createCreatePrismaCli } from "./index.mjs";
4
4
 
5
5
  //#region src/cli.ts
package/dist/{create--wGG0UNz.mjs → create-DVzexktt.mjs} RENAMED
@@ -1500,23 +1500,12 @@ async function executeCreateAddonSetupContext(params) {
1500
1500
 
1501
1501
  //#endregion
1502
1502
  //#region src/telemetry/client.ts
1503
- const TELEMETRY_API_KEY = "phc_cmc85avbWyuJ2JyKdGPdv7dxXli8xLdWDBPbvIXWJfs";
1503
+ const TELEMETRY_API_KEY = "";
1504
1504
  const TELEMETRY_HOST = "https://us.i.posthog.com";
1505
1505
  const TELEMETRY_CONFIG_FILE = "telemetry.json";
1506
- const TELEMETRY_REQUEST_TIMEOUT_MS = 800;
1507
- const TELEMETRY_SHUTDOWN_TIMEOUT_MS = 800;
1508
1506
  const UUID_V4_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
1509
- function isTruthyEnvValue(value) {
1510
- return [
1511
- "1",
1512
- "true",
1513
- "yes",
1514
- "on"
1515
- ].includes(String(value ?? "").trim().toLowerCase());
1516
- }
1517
1507
  function shouldDisableTelemetry() {
1518
- if (isTruthyEnvValue(process.env.CI) || isTruthyEnvValue(process.env.GITHUB_ACTIONS)) return true;
1519
- return process.env.CREATE_PRISMA_DISABLE_TELEMETRY !== void 0 || process.env.CREATE_PRISMA_TELEMETRY_DISABLED !== void 0 || process.env.DO_NOT_TRACK !== void 0;
1508
+ return true;
1520
1509
  }
1521
1510
  function getTelemetryConfigDir() {
1522
1511
  if (process.platform === "darwin") return path.join(os.homedir(), "Library", "Application Support", "create-prisma");
@@ -1538,7 +1527,7 @@ async function getAnonymousId() {
1538
1527
  }
1539
1528
  function getCommonProperties() {
1540
1529
  return {
1541
- "cli-version": "0.3.0",
1530
+ "cli-version": "0.3.1-pr.30.46.1",
1542
1531
  "node-version": process.version,
1543
1532
  platform: process.platform,
1544
1533
  arch: process.arch
@@ -1551,27 +1540,26 @@ async function trackCliTelemetry(event, properties) {
1551
1540
  if (shouldDisableTelemetry()) return;
1552
1541
  let client;
1553
1542
  try {
1543
+ const distinctId = await getAnonymousId();
1544
+ const sanitizedProperties = sanitizeProperties({
1545
+ ...getCommonProperties(),
1546
+ ...properties,
1547
+ $process_person_profile: false
1548
+ });
1554
1549
  client = new PostHog(TELEMETRY_API_KEY, {
1555
1550
  host: TELEMETRY_HOST,
1556
- captureMode: "json",
1557
1551
  disableGeoip: true,
1558
1552
  flushAt: 1,
1559
- flushInterval: 0,
1560
- persistence: "memory",
1561
- requestTimeout: TELEMETRY_REQUEST_TIMEOUT_MS
1553
+ flushInterval: 0
1562
1554
  });
1563
1555
  await client.captureImmediate({
1564
- distinctId: await getAnonymousId(),
1556
+ distinctId,
1565
1557
  event,
1566
- properties: sanitizeProperties({
1567
- ...getCommonProperties(),
1568
- ...properties,
1569
- $process_person_profile: false
1570
- }),
1558
+ properties: sanitizedProperties,
1571
1559
  disableGeoip: true
1572
1560
  });
1573
1561
  } catch {} finally {
1574
- if (client) await client.shutdown(TELEMETRY_SHUTDOWN_TIMEOUT_MS).catch(() => {});
1562
+ if (client) await client.shutdown().catch(() => {});
1575
1563
  }
1576
1564
  }
1577
1565
 
package/dist/index.mjs CHANGED
@@ -1,10 +1,10 @@
1
1
  #!/usr/bin/env node
2
- import { a as DatabaseUrlSchema, i as DatabaseProviderSchema, n as CreateCommandInputSchema, o as PackageManagerSchema, r as CreateTemplateSchema, s as SchemaPresetSchema, t as runCreateCommand } from "./create--wGG0UNz.mjs";
2
+ import { a as DatabaseUrlSchema, i as DatabaseProviderSchema, n as CreateCommandInputSchema, o as PackageManagerSchema, r as CreateTemplateSchema, s as SchemaPresetSchema, t as runCreateCommand } from "./create-DVzexktt.mjs";
3
3
  import { os } from "@orpc/server";
4
4
  import { createCli } from "trpc-cli";
5
5
 
6
6
  //#region src/index.ts
7
- const CLI_VERSION = "0.3.0";
7
+ const CLI_VERSION = "0.3.1-pr.30.46.1";
8
8
  const router = os.router({ create: os.meta({
9
9
  description: "Create a new project with Prisma setup",
10
10
  default: true,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-prisma",
3
- "version": "0.3.0",
3
+ "version": "0.3.1-pr.30.46.1",
4
4
  "private": false,
5
5
  "description": "Create Prisma 7 projects with first-party templates and great DX.",
6
6
  "homepage": "https://github.com/prisma/create-prisma",
@@ -52,7 +52,7 @@
52
52
  "execa": "^9.6.1",
53
53
  "fs-extra": "^11.3.3",
54
54
  "handlebars": "^4.7.8",
55
- "posthog-node": "4.18.0",
55
+ "posthog-node": "^5.28.2",
56
56
  "trpc-cli": "^0.12.4",
57
57
  "zod": "^4.3.6"
58
58
  },
package/templates/create/astro/src/pages/index.astro.hbs CHANGED
@@ -111,53 +111,48 @@ const users = await prisma.user
111
111
  <style>
112
112
  :global(body) {
113
113
  margin: 0;
114
- font-family:
115
- "Instrument Sans",
116
- "Segoe UI",
117
- sans-serif;
118
- background: #f7f8fb;
119
- color: #0f172a;
114
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
115
+ background: #fff;
116
+ color: #111;
120
117
  }
121
118
 
122
119
  .shell {
123
- width: min(64rem, 100%);
120
+ max-width: 40rem;
124
121
  margin: 0 auto;
125
- padding: 4rem 1.5rem 5rem;
122
+ padding: 3rem 1.5rem;
126
123
  }
127
124
 
128
125
  .hero {
129
- margin-bottom: 2rem;
126
+ margin-bottom: 1.5rem;
130
127
  }
131
128
 
132
129
  .eyebrow {
133
- margin: 0 0 0.75rem;
134
- color: #10b981;
135
- font-size: 0.875rem;
136
- font-weight: 700;
137
- letter-spacing: 0.14em;
130
+ margin: 0 0 0.5rem;
131
+ color: #666;
132
+ font-size: 0.75rem;
133
+ font-weight: 600;
134
+ letter-spacing: 0.06em;
138
135
  text-transform: uppercase;
139
136
  }
140
137
 
141
138
  h1 {
142
139
  margin: 0;
143
- max-width: 12ch;
144
- font-size: clamp(2.75rem, 7vw, 5rem);
145
- line-height: 0.95;
140
+ font-size: 1.25rem;
141
+ font-weight: 600;
142
+ line-height: 1.4;
146
143
  }
147
144
 
148
145
  .lede {
149
- max-width: 42rem;
150
- font-size: 1.05rem;
151
- line-height: 1.7;
152
- color: #475569;
146
+ margin: 0.5rem 0 0;
147
+ color: #666;
148
+ font-size: 0.875rem;
149
+ line-height: 1.6;
153
150
  }
154
151
 
155
152
  .panel {
156
- padding: 1.5rem;
157
- border: 1px solid #dbe2ea;
158
- border-radius: 1.5rem;
159
- background: #ffffff;
160
- box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
153
+ border: 1px solid #e5e5e5;
154
+ border-radius: 0.5rem;
155
+ padding: 1rem;
161
156
  }
162
157
 
163
158
  .panel-header {
@@ -165,22 +160,25 @@ const users = await prisma.user
165
160
  align-items: center;
166
161
  justify-content: space-between;
167
162
  gap: 1rem;
168
- margin-bottom: 1rem;
163
+ margin-bottom: 0.75rem;
169
164
  }
170
165
 
171
166
  h2 {
172
167
  margin: 0;
173
- font-size: 1.125rem;
168
+ font-size: 0.875rem;
169
+ font-weight: 600;
174
170
  }
175
171
 
176
172
  .panel-header span,
177
173
  .empty,
178
174
  time {
179
- color: #64748b;
175
+ color: #888;
176
+ font-size: 0.8rem;
180
177
  }
181
178
 
182
179
  .panel p {
183
- color: #64748b;
180
+ color: #666;
181
+ font-size: 0.8rem;
184
182
  }
185
183
 
186
184
  .users {
@@ -188,7 +186,7 @@ const users = await prisma.user
188
186
  margin: 0;
189
187
  padding: 0;
190
188
  display: grid;
191
- gap: 0.75rem;
189
+ gap: 0.5rem;
192
190
  }
193
191
 
194
192
  .users li {
@@ -196,37 +194,29 @@ const users = await prisma.user
196
194
  align-items: center;
197
195
  justify-content: space-between;
198
196
  gap: 1rem;
199
- padding: 1rem 1.125rem;
200
- border-radius: 1rem;
201
- background: #f8fafc;
202
- border: 1px solid #dbe2ea;
197
+ padding: 0.625rem 0.75rem;
198
+ border: 1px solid #eee;
199
+ border-radius: 0.375rem;
203
200
  }
204
201
 
205
202
  .users p {
206
- margin: 0.2rem 0 0;
203
+ margin: 0.125rem 0 0;
207
204
  }
208
205
 
209
206
  time {
210
- font-size: 0.875rem;
207
+ font-size: 0.75rem;
211
208
  white-space: nowrap;
212
209
  }
213
210
 
214
211
  code {
215
- padding: 0.15rem 0.4rem;
216
- border-radius: 0.35rem;
217
- background: #eef2f7;
218
- font-family:
219
- SFMono-Regular,
220
- Consolas,
221
- monospace;
222
- font-size: 0.95em;
212
+ padding: 0.125rem 0.25rem;
213
+ border-radius: 0.25rem;
214
+ background: #f5f5f5;
215
+ font-family: SFMono-Regular, Consolas, monospace;
216
+ font-size: 0.875em;
223
217
  }
224
218
 
225
219
  @media (max-width: 640px) {
226
- .shell {
227
- padding-top: 3rem;
228
- }
229
-
230
220
  .users li,
231
221
  .panel-header {
232
222
  flex-direction: column;
package/templates/create/next/src/app/globals.css CHANGED
@@ -6,56 +6,50 @@
6
6
  box-sizing: border-box;
7
7
  }
8
8
 
9
- html {
10
- font-size: 16px;
11
- }
12
-
13
9
  body {
14
10
  margin: 0;
15
- font-family: "Instrument Sans", "Segoe UI", sans-serif;
16
- background: #f7f8fb;
17
- color: #0f172a;
11
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
12
+ background: #fff;
13
+ color: #111;
18
14
  }
19
15
 
20
16
  .shell {
21
- width: min(64rem, 100%);
17
+ max-width: 40rem;
22
18
  margin: 0 auto;
23
- padding: 4rem 1.5rem 5rem;
19
+ padding: 3rem 1.5rem;
24
20
  }
25
21
 
26
22
  .hero {
27
- margin-bottom: 2rem;
23
+ margin-bottom: 1.5rem;
28
24
  }
29
25
 
30
26
  .eyebrow {
31
- margin: 0 0 0.75rem;
32
- color: #10b981;
33
- font-size: 0.875rem;
34
- font-weight: 700;
35
- letter-spacing: 0.14em;
27
+ margin: 0 0 0.5rem;
28
+ color: #666;
29
+ font-size: 0.75rem;
30
+ font-weight: 600;
31
+ letter-spacing: 0.06em;
36
32
  text-transform: uppercase;
37
33
  }
38
34
 
39
35
  h1 {
40
36
  margin: 0;
41
- max-width: 12ch;
42
- font-size: clamp(2.75rem, 7vw, 5rem);
43
- line-height: 0.95;
37
+ font-size: 1.25rem;
38
+ font-weight: 600;
39
+ line-height: 1.4;
44
40
  }
45
41
 
46
42
  .lede {
47
- max-width: 42rem;
48
- font-size: 1.05rem;
49
- line-height: 1.7;
50
- color: #475569;
43
+ margin: 0.5rem 0 0;
44
+ color: #666;
45
+ font-size: 0.875rem;
46
+ line-height: 1.6;
51
47
  }
52
48
 
53
49
  .panel {
54
- padding: 1.5rem;
55
- border: 1px solid #dbe2ea;
56
- border-radius: 1.5rem;
57
- background: #ffffff;
58
- box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
50
+ border: 1px solid #e5e5e5;
51
+ border-radius: 0.5rem;
52
+ padding: 1rem;
59
53
  }
60
54
 
61
55
  .panelHeader {
@@ -63,22 +57,25 @@ h1 {
63
57
  align-items: center;
64
58
  justify-content: space-between;
65
59
  gap: 1rem;
66
- margin-bottom: 1rem;
60
+ margin-bottom: 0.75rem;
67
61
  }
68
62
 
69
63
  h2 {
70
64
  margin: 0;
71
- font-size: 1.125rem;
65
+ font-size: 0.875rem;
66
+ font-weight: 600;
72
67
  }
73
68
 
74
69
  .panelHeader span,
75
70
  .empty,
76
71
  time {
77
- color: #64748b;
72
+ color: #888;
73
+ font-size: 0.8rem;
78
74
  }
79
75
 
80
76
  .panel p {
81
- color: #64748b;
77
+ color: #666;
78
+ font-size: 0.8rem;
82
79
  }
83
80
 
84
81
  .users {
@@ -86,7 +83,7 @@ time {
86
83
  margin: 0;
87
84
  padding: 0;
88
85
  display: grid;
89
- gap: 0.75rem;
86
+ gap: 0.5rem;
90
87
  }
91
88
 
92
89
  .users li {
@@ -94,34 +91,29 @@ time {
94
91
  align-items: center;
95
92
  justify-content: space-between;
96
93
  gap: 1rem;
97
- padding: 1rem 1.125rem;
98
- border-radius: 1rem;
99
- background: #f8fafc;
100
- border: 1px solid #dbe2ea;
94
+ padding: 0.625rem 0.75rem;
95
+ border: 1px solid #eee;
96
+ border-radius: 0.375rem;
101
97
  }
102
98
 
103
99
  .users p {
104
- margin: 0.2rem 0 0;
100
+ margin: 0.125rem 0 0;
105
101
  }
106
102
 
107
103
  time {
108
- font-size: 0.875rem;
104
+ font-size: 0.75rem;
109
105
  white-space: nowrap;
110
106
  }
111
107
 
112
108
  code {
113
- padding: 0.15rem 0.4rem;
114
- border-radius: 0.35rem;
115
- background: #eef2f7;
109
+ padding: 0.125rem 0.25rem;
110
+ border-radius: 0.25rem;
111
+ background: #f5f5f5;
116
112
  font-family: SFMono-Regular, Consolas, monospace;
117
- font-size: 0.95em;
113
+ font-size: 0.875em;
118
114
  }
119
115
 
120
116
  @media (max-width: 640px) {
121
- .shell {
122
- padding-top: 3rem;
123
- }
124
-
125
117
  .users li,
126
118
  .panelHeader {
127
119
  flex-direction: column;
package/templates/create/nuxt/app/pages/index.vue.hbs CHANGED
@@ -90,13 +90,13 @@ function formatCreatedAt(value: string): string {
90
90
  <p>Start from <code>server/api/users.get.ts</code> for server-side data access.</p>
91
91
  </div>
92
92
  </li>
93
- <li>
94
- <div>
95
- <strong>Generated client output</strong>
93
+ <li>
94
+ <div>
95
+ <strong>Generated client output</strong>
96
96
  <p>Prisma Client is generated into <code>server/generated/prisma</code>.</p>
97
- </div>
98
- </li>
99
- </ul>
97
+ </div>
98
+ </li>
99
+ </ul>
100
100
  </section>
101
101
  {{/if}}
102
102
  </main>
@@ -105,53 +105,48 @@ function formatCreatedAt(value: string): string {
105
105
  <style>
106
106
  body {
107
107
  margin: 0;
108
- font-family:
109
- "Instrument Sans",
110
- "Segoe UI",
111
- sans-serif;
112
- background: #f7f8fb;
113
- color: #0f172a;
108
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
109
+ background: #fff;
110
+ color: #111;
114
111
  }
115
112
 
116
113
  .shell {
117
- width: min(64rem, 100%);
114
+ max-width: 40rem;
118
115
  margin: 0 auto;
119
- padding: 4rem 1.5rem 5rem;
116
+ padding: 3rem 1.5rem;
120
117
  }
121
118
 
122
119
  .hero {
123
- margin-bottom: 2rem;
120
+ margin-bottom: 1.5rem;
124
121
  }
125
122
 
126
123
  .eyebrow {
127
- margin: 0 0 0.75rem;
128
- color: #10b981;
129
- font-size: 0.875rem;
130
- font-weight: 700;
131
- letter-spacing: 0.14em;
124
+ margin: 0 0 0.5rem;
125
+ color: #666;
126
+ font-size: 0.75rem;
127
+ font-weight: 600;
128
+ letter-spacing: 0.06em;
132
129
  text-transform: uppercase;
133
130
  }
134
131
 
135
132
  h1 {
136
133
  margin: 0;
137
- max-width: 12ch;
138
- font-size: clamp(2.75rem, 7vw, 5rem);
139
- line-height: 0.95;
134
+ font-size: 1.25rem;
135
+ font-weight: 600;
136
+ line-height: 1.4;
140
137
  }
141
138
 
142
139
  .lede {
143
- max-width: 42rem;
144
- font-size: 1.05rem;
145
- line-height: 1.7;
146
- color: #475569;
140
+ margin: 0.5rem 0 0;
141
+ color: #666;
142
+ font-size: 0.875rem;
143
+ line-height: 1.6;
147
144
  }
148
145
 
149
146
  .panel {
150
- padding: 1.5rem;
151
- border: 1px solid #dbe2ea;
152
- border-radius: 1.5rem;
153
- background: #ffffff;
154
- box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
147
+ border: 1px solid #e5e5e5;
148
+ border-radius: 0.5rem;
149
+ padding: 1rem;
155
150
  }
156
151
 
157
152
  .panel-header {
@@ -159,22 +154,25 @@ h1 {
159
154
  align-items: center;
160
155
  justify-content: space-between;
161
156
  gap: 1rem;
162
- margin-bottom: 1rem;
157
+ margin-bottom: 0.75rem;
163
158
  }
164
159
 
165
160
  h2 {
166
161
  margin: 0;
167
- font-size: 1.125rem;
162
+ font-size: 0.875rem;
163
+ font-weight: 600;
168
164
  }
169
165
 
170
166
  .panel-header span,
171
167
  .empty,
172
168
  time {
173
- color: #64748b;
169
+ color: #888;
170
+ font-size: 0.8rem;
174
171
  }
175
172
 
176
173
  .panel p {
177
- color: #64748b;
174
+ color: #666;
175
+ font-size: 0.8rem;
178
176
  }
179
177
 
180
178
  .users {
@@ -182,7 +180,7 @@ time {
182
180
  margin: 0;
183
181
  padding: 0;
184
182
  display: grid;
185
- gap: 0.75rem;
183
+ gap: 0.5rem;
186
184
  }
187
185
 
188
186
  .users li {
@@ -190,37 +188,29 @@ time {
190
188
  align-items: center;
191
189
  justify-content: space-between;
192
190
  gap: 1rem;
193
- padding: 1rem 1.125rem;
194
- border-radius: 1rem;
195
- background: #f8fafc;
196
- border: 1px solid #dbe2ea;
191
+ padding: 0.625rem 0.75rem;
192
+ border: 1px solid #eee;
193
+ border-radius: 0.375rem;
197
194
  }
198
195
 
199
196
  .users p {
200
- margin: 0.2rem 0 0;
197
+ margin: 0.125rem 0 0;
201
198
  }
202
199
 
203
200
  time {
204
- font-size: 0.875rem;
201
+ font-size: 0.75rem;
205
202
  white-space: nowrap;
206
203
  }
207
204
 
208
205
  code {
209
- padding: 0.15rem 0.4rem;
210
- border-radius: 0.35rem;
211
- background: #eef2f7;
212
- font-family:
213
- SFMono-Regular,
214
- Consolas,
215
- monospace;
216
- font-size: 0.95em;
206
+ padding: 0.125rem 0.25rem;
207
+ border-radius: 0.25rem;
208
+ background: #f5f5f5;
209
+ font-family: SFMono-Regular, Consolas, monospace;
210
+ font-size: 0.875em;
217
211
  }
218
212
 
219
213
  @media (max-width: 640px) {
220
- .shell {
221
- padding-top: 3rem;
222
- }
223
-
224
214
  .users li,
225
215
  .panel-header {
226
216
  flex-direction: column;
package/templates/create/svelte/src/routes/+page.svelte.hbs CHANGED
@@ -60,53 +60,48 @@
60
60
  <style>
61
61
  :global(body) {
62
62
  margin: 0;
63
- font-family:
64
- 'Instrument Sans',
65
- 'Segoe UI',
66
- sans-serif;
67
- background: #f7f8fb;
68
- color: #0f172a;
63
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
64
+ background: #fff;
65
+ color: #111;
69
66
  }
70
67
 
71
68
  .shell {
72
- max-width: 64rem;
69
+ max-width: 40rem;
73
70
  margin: 0 auto;
74
- padding: 4rem 1.5rem 5rem;
71
+ padding: 3rem 1.5rem;
75
72
  }
76
73
 
77
74
  .hero {
78
- margin-bottom: 2rem;
75
+ margin-bottom: 1.5rem;
79
76
  }
80
77
 
81
78
  .eyebrow {
82
- margin: 0 0 0.75rem;
83
- color: #10b981;
84
- font-size: 0.875rem;
85
- font-weight: 700;
86
- letter-spacing: 0.14em;
79
+ margin: 0 0 0.5rem;
80
+ color: #666;
81
+ font-size: 0.75rem;
82
+ font-weight: 600;
83
+ letter-spacing: 0.06em;
87
84
  text-transform: uppercase;
88
85
  }
89
86
 
90
87
  h1 {
91
88
  margin: 0;
92
- max-width: 12ch;
93
- font-size: clamp(2.75rem, 7vw, 5rem);
94
- line-height: 0.95;
89
+ font-size: 1.25rem;
90
+ font-weight: 600;
91
+ line-height: 1.4;
95
92
  }
96
93
 
97
94
  .lede {
98
- max-width: 42rem;
99
- font-size: 1.05rem;
100
- line-height: 1.7;
101
- color: #475569;
95
+ margin: 0.5rem 0 0;
96
+ color: #666;
97
+ font-size: 0.875rem;
98
+ line-height: 1.6;
102
99
  }
103
100
 
104
101
  .panel {
105
- padding: 1.5rem;
106
- border: 1px solid #dbe2ea;
107
- border-radius: 1.5rem;
108
- background: #ffffff;
109
- box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
102
+ border: 1px solid #e5e5e5;
103
+ border-radius: 0.5rem;
104
+ padding: 1rem;
110
105
  }
111
106
 
112
107
  .panel-header {
@@ -114,22 +109,25 @@
114
109
  align-items: center;
115
110
  justify-content: space-between;
116
111
  gap: 1rem;
117
- margin-bottom: 1rem;
112
+ margin-bottom: 0.75rem;
118
113
  }
119
114
 
120
115
  h2 {
121
116
  margin: 0;
122
- font-size: 1.125rem;
117
+ font-size: 0.875rem;
118
+ font-weight: 600;
123
119
  }
124
120
 
125
121
  .panel-header span,
126
122
  .empty,
127
123
  time {
128
- color: #64748b;
124
+ color: #888;
125
+ font-size: 0.8rem;
129
126
  }
130
127
 
131
128
  .panel p {
132
- color: #64748b;
129
+ color: #666;
130
+ font-size: 0.8rem;
133
131
  }
134
132
 
135
133
  .users {
@@ -137,7 +135,7 @@
137
135
  margin: 0;
138
136
  padding: 0;
139
137
  display: grid;
140
- gap: 0.75rem;
138
+ gap: 0.5rem;
141
139
  }
142
140
 
143
141
  .users li {
@@ -145,37 +143,29 @@
145
143
  align-items: center;
146
144
  justify-content: space-between;
147
145
  gap: 1rem;
148
- padding: 1rem 1.125rem;
149
- border-radius: 1rem;
150
- background: #f8fafc;
151
- border: 1px solid #dbe2ea;
146
+ padding: 0.625rem 0.75rem;
147
+ border: 1px solid #eee;
148
+ border-radius: 0.375rem;
152
149
  }
153
150
 
154
151
  .users p {
155
- margin: 0.2rem 0 0;
152
+ margin: 0.125rem 0 0;
156
153
  }
157
154
 
158
155
  time {
159
- font-size: 0.875rem;
156
+ font-size: 0.75rem;
160
157
  white-space: nowrap;
161
158
  }
162
159
 
163
160
  code {
164
- padding: 0.15rem 0.4rem;
165
- border-radius: 0.35rem;
166
- background: #eef2f7;
167
- font-family:
168
- SFMono-Regular,
169
- Consolas,
170
- monospace;
171
- font-size: 0.95em;
161
+ padding: 0.125rem 0.25rem;
162
+ border-radius: 0.25rem;
163
+ background: #f5f5f5;
164
+ font-family: SFMono-Regular, Consolas, monospace;
165
+ font-size: 0.875em;
172
166
  }
173
167
 
174
168
  @media (max-width: 640px) {
175
- .shell {
176
- padding-top: 3rem;
177
- }
178
-
179
169
  .users li,
180
170
  .panel-header {
181
171
  flex-direction: column;
@@ -230,53 +220,48 @@
230
220
  <style>
231
221
  :global(body) {
232
222
  margin: 0;
233
- font-family:
234
- 'Instrument Sans',
235
- 'Segoe UI',
236
- sans-serif;
237
- background: #f7f8fb;
238
- color: #0f172a;
223
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
224
+ background: #fff;
225
+ color: #111;
239
226
  }
240
227
 
241
228
  .shell {
242
- max-width: 64rem;
229
+ max-width: 40rem;
243
230
  margin: 0 auto;
244
- padding: 4rem 1.5rem 5rem;
231
+ padding: 3rem 1.5rem;
245
232
  }
246
233
 
247
234
  .hero {
248
- margin-bottom: 2rem;
235
+ margin-bottom: 1.5rem;
249
236
  }
250
237
 
251
238
  .eyebrow {
252
- margin: 0 0 0.75rem;
253
- color: #10b981;
254
- font-size: 0.875rem;
255
- font-weight: 700;
256
- letter-spacing: 0.14em;
239
+ margin: 0 0 0.5rem;
240
+ color: #666;
241
+ font-size: 0.75rem;
242
+ font-weight: 600;
243
+ letter-spacing: 0.06em;
257
244
  text-transform: uppercase;
258
245
  }
259
246
 
260
247
  h1 {
261
248
  margin: 0;
262
- max-width: 12ch;
263
- font-size: clamp(2.75rem, 7vw, 5rem);
264
- line-height: 0.95;
249
+ font-size: 1.25rem;
250
+ font-weight: 600;
251
+ line-height: 1.4;
265
252
  }
266
253
 
267
254
  .lede {
268
- max-width: 42rem;
269
- font-size: 1.05rem;
270
- line-height: 1.7;
271
- color: #475569;
255
+ margin: 0.5rem 0 0;
256
+ color: #666;
257
+ font-size: 0.875rem;
258
+ line-height: 1.6;
272
259
  }
273
260
 
274
261
  .panel {
275
- padding: 1.5rem;
276
- border: 1px solid #dbe2ea;
277
- border-radius: 1.5rem;
278
- background: #ffffff;
279
- box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
262
+ border: 1px solid #e5e5e5;
263
+ border-radius: 0.5rem;
264
+ padding: 1rem;
280
265
  }
281
266
 
282
267
  .panel-header {
@@ -284,21 +269,23 @@
284
269
  align-items: center;
285
270
  justify-content: space-between;
286
271
  gap: 1rem;
287
- margin-bottom: 1rem;
272
+ margin-bottom: 0.75rem;
288
273
  }
289
274
 
290
275
  h2 {
291
276
  margin: 0;
292
- font-size: 1.125rem;
277
+ font-size: 0.875rem;
278
+ font-weight: 600;
293
279
  }
294
280
 
295
- .panel-header span,
296
- time {
297
- color: #64748b;
281
+ .panel-header span {
282
+ color: #888;
283
+ font-size: 0.8rem;
298
284
  }
299
285
 
300
286
  .panel p {
301
- color: #64748b;
287
+ color: #666;
288
+ font-size: 0.8rem;
302
289
  }
303
290
 
304
291
  .users {
@@ -306,7 +293,7 @@
306
293
  margin: 0;
307
294
  padding: 0;
308
295
  display: grid;
309
- gap: 0.75rem;
296
+ gap: 0.5rem;
310
297
  }
311
298
 
312
299
  .users li {
@@ -314,32 +301,24 @@
314
301
  align-items: center;
315
302
  justify-content: space-between;
316
303
  gap: 1rem;
317
- padding: 1rem 1.125rem;
318
- border-radius: 1rem;
319
- background: #f8fafc;
320
- border: 1px solid #dbe2ea;
304
+ padding: 0.625rem 0.75rem;
305
+ border: 1px solid #eee;
306
+ border-radius: 0.375rem;
321
307
  }
322
308
 
323
309
  .users p {
324
- margin: 0.2rem 0 0;
310
+ margin: 0.125rem 0 0;
325
311
  }
326
312
 
327
313
  code {
328
- padding: 0.15rem 0.4rem;
329
- border-radius: 0.35rem;
330
- background: #eef2f7;
331
- font-family:
332
- SFMono-Regular,
333
- Consolas,
334
- monospace;
335
- font-size: 0.95em;
314
+ padding: 0.125rem 0.25rem;
315
+ border-radius: 0.25rem;
316
+ background: #f5f5f5;
317
+ font-family: SFMono-Regular, Consolas, monospace;
318
+ font-size: 0.875em;
336
319
  }
337
320
 
338
321
  @media (max-width: 640px) {
339
- .shell {
340
- padding-top: 3rem;
341
- }
342
-
343
322
  .users li,
344
323
  .panel-header {
345
324
  flex-direction: column;
package/templates/create/tanstack-start/src/routes/index.tsx.hbs CHANGED
@@ -50,28 +50,20 @@ function Home() {
50
50
  {{/if}}
51
51
 
52
52
  return (
53
- <main className="content">
54
- <section className="hero card">
55
- <p className="eyebrow">TanStack Start</p>
53
+ <main className="shell">
54
+ <div className="hero">
55
+ <p className="eyebrow">TanStack Start + Prisma 7</p>
56
56
  {{#if (eq schemaPreset "basic")}}
57
- <h2>Users from your database, loaded through a server function.</h2>
57
+ <h1>Users from your database, loaded through a server function.</h1>
58
58
  <p className="lede">
59
59
  This route uses TanStack Start&apos;s server function API and the Prisma client in{" "}
60
60
  <code>src/lib/prisma.server.ts</code>.
61
61
  </p>
62
- {{else}}
63
- <h2>Your TanStack Start app is ready.</h2>
64
- <p className="lede">
65
- Edit <code>prisma/schema.prisma</code>, run <code>db:migrate</code>, then query your
66
- database from server functions or route loaders.
67
- </p>
68
- {{/if}}
69
- </section>
62
+ </div>
70
63
 
71
- {{#if (eq schemaPreset "basic")}}
72
- <section className="card">
73
- <div className="sectionHeader">
74
- <h3>Seeded users</h3>
64
+ <section className="panel">
65
+ <div className="panelHeader">
66
+ <h2>Seeded users</h2>
75
67
  <span>{users?.length ?? 0} total</span>
76
68
  </div>
77
69
 
@@ -83,9 +75,9 @@ function Home() {
83
75
  ) : users.length === 0 ? (
84
76
  <p className="empty">No users yet. Run <code>db:seed</code> after your first migration.</p>
85
77
  ) : (
86
- <ul className="list">
78
+ <ul className="users">
87
79
  {users.map((user) => (
88
- <li className="listItem" key={user.id}>
80
+ <li key={user.id}>
89
81
  <div>
90
82
  <strong>{user.name ?? "Unnamed user"}</strong>
91
83
  <p>{user.email}</p>
@@ -99,26 +91,33 @@ function Home() {
99
91
  )}
100
92
  </section>
101
93
  {{else}}
102
- <section className="card">
103
- <div className="sectionHeader">
104
- <h3>What&apos;s included</h3>
94
+ <h1>Your TanStack Start app is ready.</h1>
95
+ <p className="lede">
96
+ Edit <code>prisma/schema.prisma</code>, run <code>db:migrate</code>, then query your
97
+ database from server functions or route loaders.
98
+ </p>
99
+ </div>
100
+
101
+ <section className="panel">
102
+ <div className="panelHeader">
103
+ <h2>What&apos;s included</h2>
105
104
  <span>Starter kit</span>
106
105
  </div>
107
106
 
108
- <ul className="list">
109
- <li className="listItem">
107
+ <ul className="users">
108
+ <li>
110
109
  <div>
111
110
  <strong>File-based routing</strong>
112
111
  <p>Add new routes in <code>src/routes</code>.</p>
113
112
  </div>
114
113
  </li>
115
- <li className="listItem">
114
+ <li>
116
115
  <div>
117
116
  <strong>Prisma client</strong>
118
117
  <p>Use the shared instance from <code>src/lib/prisma.server.ts</code>.</p>
119
118
  </div>
120
119
  </li>
121
- <li className="listItem">
120
+ <li>
122
121
  <div>
123
122
  <strong>Seed script</strong>
124
123
  <p>Run <code>db:seed</code> after your first migration.</p>
@@ -128,13 +127,12 @@ function Home() {
128
127
  </section>
129
128
  {{/if}}
130
129
 
131
- <section className="card">
132
- <div className="sectionHeader">
133
- <h3>Next steps</h3>
134
- <span>Keep building</span>
130
+ <section className="panel">
131
+ <div className="panelHeader">
132
+ <h2>Next steps</h2>
135
133
  </div>
136
134
 
137
- <ul className="checklist">
135
+ <ul className="steps">
138
136
  <li>Run <code>db:generate</code> after schema changes.</li>
139
137
  <li>Use TanStack Start server functions for server-only logic.</li>
140
138
  <li>Preview production output with <code>preview</code>.</li>
package/templates/create/tanstack-start/src/styles.css CHANGED
@@ -1,12 +1,5 @@
1
1
  :root {
2
2
  color-scheme: light;
3
- font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
4
- line-height: 1.5;
5
- font-weight: 400;
6
- background:
7
- radial-gradient(circle at top left, rgba(88, 180, 141, 0.18), transparent 28rem),
8
- linear-gradient(180deg, #f6fbf8 0%, #eef5f1 100%);
9
- color: #153127;
10
3
  }
11
4
 
12
5
  * {
@@ -15,172 +8,138 @@
15
8
 
16
9
  body {
17
10
  margin: 0;
18
- min-height: 100vh;
19
- }
20
-
21
- a {
22
- color: inherit;
23
- }
24
-
25
- code {
26
- font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
27
- font-size: 0.92em;
11
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
12
+ background: #fff;
13
+ color: #111;
28
14
  }
29
15
 
30
16
  .shell {
17
+ max-width: 40rem;
31
18
  margin: 0 auto;
32
- max-width: 72rem;
33
- padding: 2rem 1.25rem 3rem;
19
+ padding: 3rem 1.5rem;
34
20
  }
35
21
 
36
- .topbar {
37
- display: flex;
38
- flex-wrap: wrap;
39
- align-items: end;
40
- justify-content: space-between;
41
- gap: 1rem;
22
+ .hero {
42
23
  margin-bottom: 1.5rem;
43
24
  }
44
25
 
45
- .topbar h1,
46
- .hero h2,
47
- .sectionHeader h3 {
48
- margin: 0;
49
- }
50
-
51
26
  .eyebrow {
52
- margin: 0 0 0.35rem;
53
- color: #31795e;
54
- font-size: 0.8rem;
55
- font-weight: 700;
56
- letter-spacing: 0.12em;
27
+ margin: 0 0 0.5rem;
28
+ color: #666;
29
+ font-size: 0.75rem;
30
+ font-weight: 600;
31
+ letter-spacing: 0.06em;
57
32
  text-transform: uppercase;
58
33
  }
59
34
 
60
- .nav {
61
- display: flex;
62
- gap: 0.75rem;
63
- }
64
-
65
- .navLink {
66
- border: 1px solid rgba(21, 49, 39, 0.12);
67
- border-radius: 999px;
68
- padding: 0.55rem 0.95rem;
69
- background: rgba(255, 255, 255, 0.72);
70
- text-decoration: none;
71
- }
72
-
73
- .content {
74
- display: grid;
75
- gap: 1rem;
76
- }
77
-
78
- .card {
79
- border: 1px solid rgba(21, 49, 39, 0.1);
80
- border-radius: 1.5rem;
81
- padding: 1.25rem;
82
- background: rgba(255, 255, 255, 0.78);
83
- backdrop-filter: blur(10px);
84
- box-shadow: 0 18px 44px rgba(21, 49, 39, 0.08);
35
+ h1 {
36
+ margin: 0;
37
+ font-size: 1.25rem;
38
+ font-weight: 600;
39
+ line-height: 1.4;
85
40
  }
86
41
 
87
- .hero {
88
- padding: 1.5rem;
42
+ .lede {
43
+ margin: 0.5rem 0 0;
44
+ color: #666;
45
+ font-size: 0.875rem;
46
+ line-height: 1.6;
89
47
  }
90
48
 
91
- .hero h2 {
92
- font-size: clamp(2rem, 5vw, 4rem);
93
- line-height: 0.98;
94
- max-width: 40rem;
49
+ .panel {
50
+ border: 1px solid #e5e5e5;
51
+ border-radius: 0.5rem;
52
+ padding: 1rem;
95
53
  }
96
54
 
97
- .lede {
98
- max-width: 42rem;
99
- margin: 1rem 0 0;
100
- color: #456759;
101
- font-size: 1.05rem;
55
+ .panel + .panel {
56
+ margin-top: 1rem;
102
57
  }
103
58
 
104
- .sectionHeader {
59
+ .panelHeader {
105
60
  display: flex;
106
- align-items: baseline;
61
+ align-items: center;
107
62
  justify-content: space-between;
108
63
  gap: 1rem;
109
- margin-bottom: 1rem;
64
+ margin-bottom: 0.75rem;
65
+ }
66
+
67
+ h2 {
68
+ margin: 0;
69
+ font-size: 0.875rem;
70
+ font-weight: 600;
110
71
  }
111
72
 
112
- .sectionHeader span {
113
- color: #5c7a6e;
114
- font-size: 0.95rem;
73
+ .panelHeader span,
74
+ .empty,
75
+ time {
76
+ color: #888;
77
+ font-size: 0.8rem;
115
78
  }
116
79
 
117
- .empty {
118
- margin: 0;
119
- color: #5c7a6e;
80
+ .panel p {
81
+ color: #666;
82
+ font-size: 0.8rem;
120
83
  }
121
84
 
122
- .list,
123
- .checklist {
85
+ .users {
124
86
  list-style: none;
125
87
  margin: 0;
126
88
  padding: 0;
127
- }
128
-
129
- .list {
130
89
  display: grid;
131
- gap: 0.75rem;
90
+ gap: 0.5rem;
132
91
  }
133
92
 
134
- .listItem {
93
+ .users li {
135
94
  display: flex;
136
- flex-wrap: wrap;
95
+ align-items: center;
137
96
  justify-content: space-between;
138
- gap: 0.75rem;
139
- padding: 0.95rem 1rem;
140
- border-radius: 1rem;
141
- background: rgba(246, 251, 248, 0.9);
97
+ gap: 1rem;
98
+ padding: 0.625rem 0.75rem;
99
+ border: 1px solid #eee;
100
+ border-radius: 0.375rem;
101
+ }
102
+
103
+ .users p {
104
+ margin: 0.125rem 0 0;
142
105
  }
143
106
 
144
- .listItem p {
145
- margin: 0.35rem 0 0;
146
- color: #5c7a6e;
107
+ time {
108
+ font-size: 0.75rem;
109
+ white-space: nowrap;
147
110
  }
148
111
 
149
- .listItem time {
150
- color: #5c7a6e;
151
- font-size: 0.95rem;
112
+ code {
113
+ padding: 0.125rem 0.25rem;
114
+ border-radius: 0.25rem;
115
+ background: #f5f5f5;
116
+ font-family: SFMono-Regular, Consolas, monospace;
117
+ font-size: 0.875em;
152
118
  }
153
119
 
154
- .checklist {
120
+ .steps {
121
+ list-style: none;
122
+ margin: 0;
123
+ padding: 0;
155
124
  display: grid;
156
- gap: 0.6rem;
125
+ gap: 0.25rem;
157
126
  }
158
127
 
159
- .checklist li {
160
- position: relative;
161
- padding-left: 1.25rem;
162
- color: #456759;
128
+ .steps li {
129
+ color: #444;
130
+ font-size: 0.8rem;
131
+ line-height: 1.5;
132
+ padding: 0.375rem 0;
133
+ border-bottom: 1px solid #f5f5f5;
163
134
  }
164
135
 
165
- .checklist li::before {
166
- content: "";
167
- position: absolute;
168
- top: 0.55rem;
169
- left: 0;
170
- width: 0.45rem;
171
- height: 0.45rem;
172
- border-radius: 999px;
173
- background: #58b48d;
136
+ .steps li:last-child {
137
+ border-bottom: none;
174
138
  }
175
139
 
176
140
  @media (max-width: 640px) {
177
- .shell {
178
- padding-inline: 1rem;
179
- }
180
-
181
- .topbar,
182
- .sectionHeader,
183
- .listItem {
141
+ .users li,
142
+ .panelHeader {
184
143
  flex-direction: column;
185
144
  align-items: flex-start;
186
145
  }