create-prisma 0.3.2 → 0.4.0-pr.32.60.1

package/templates/create/svelte/src/routes/+page.svelte.hbs

@@ -60,53 +60,48 @@
 <style>
 	:global(body) {
 		margin: 0;
-		font-family:
-			'Instrument Sans',
-			'Segoe UI',
-			sans-serif;
-		background: #f7f8fb;
-		color: #0f172a;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+		background: #fff;
+		color: #111;
 	}
 
 	.shell {
-		max-width: 64rem;
+		max-width: 40rem;
 		margin: 0 auto;
-		padding: 4rem 1.5rem 5rem;
+		padding: 3rem 1.5rem;
 	}
 
 	.hero {
-		margin-bottom: 2rem;
+		margin-bottom: 1.5rem;
 	}
 
 	.eyebrow {
-		margin: 0 0 0.75rem;
-		color: #10b981;
-		font-size: 0.875rem;
-		font-weight: 700;
-		letter-spacing: 0.14em;
+		margin: 0 0 0.5rem;
+		color: #666;
+		font-size: 0.75rem;
+		font-weight: 600;
+		letter-spacing: 0.06em;
 		text-transform: uppercase;
 	}
 
 	h1 {
 		margin: 0;
-		max-width: 12ch;
-		font-size: clamp(2.75rem, 7vw, 5rem);
-		line-height: 0.95;
+		font-size: 1.25rem;
+		font-weight: 600;
+		line-height: 1.4;
 	}
 
 	.lede {
-		max-width: 42rem;
-		font-size: 1.05rem;
-		line-height: 1.7;
-		color: #475569;
+		margin: 0.5rem 0 0;
+		color: #666;
+		font-size: 0.875rem;
+		line-height: 1.6;
 	}
 
 	.panel {
-		padding: 1.5rem;
-		border: 1px solid #dbe2ea;
-		border-radius: 1.5rem;
-		background: #ffffff;
-		box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
+		border: 1px solid #e5e5e5;
+		border-radius: 0.5rem;
+		padding: 1rem;
 	}
 
 	.panel-header {
@@ -114,22 +109,25 @@
 		align-items: center;
 		justify-content: space-between;
 		gap: 1rem;
-		margin-bottom: 1rem;
+		margin-bottom: 0.75rem;
 	}
 
 	h2 {
 		margin: 0;
-		font-size: 1.125rem;
+		font-size: 0.875rem;
+		font-weight: 600;
 	}
 
 	.panel-header span,
 	.empty,
 	time {
-		color: #64748b;
+		color: #888;
+		font-size: 0.8rem;
 	}
 
 	.panel p {
-		color: #64748b;
+		color: #666;
+		font-size: 0.8rem;
 	}
 
 	.users {
@@ -137,7 +135,7 @@
 		margin: 0;
 		padding: 0;
 		display: grid;
-		gap: 0.75rem;
+		gap: 0.5rem;
 	}
 
 	.users li {
@@ -145,37 +143,29 @@
 		align-items: center;
 		justify-content: space-between;
 		gap: 1rem;
-		padding: 1rem 1.125rem;
-		border-radius: 1rem;
-		background: #f8fafc;
-		border: 1px solid #dbe2ea;
+		padding: 0.625rem 0.75rem;
+		border: 1px solid #eee;
+		border-radius: 0.375rem;
 	}
 
 	.users p {
-		margin: 0.2rem 0 0;
+		margin: 0.125rem 0 0;
 	}
 
 	time {
-		font-size: 0.875rem;
+		font-size: 0.75rem;
 		white-space: nowrap;
 	}
 
 	code {
-		padding: 0.15rem 0.4rem;
-		border-radius: 0.35rem;
-		background: #eef2f7;
-		font-family:
-			SFMono-Regular,
-			Consolas,
-			monospace;
-		font-size: 0.95em;
+		padding: 0.125rem 0.25rem;
+		border-radius: 0.25rem;
+		background: #f5f5f5;
+		font-family: SFMono-Regular, Consolas, monospace;
+		font-size: 0.875em;
 	}
 
 	@media (max-width: 640px) {
-		.shell {
-			padding-top: 3rem;
-		}
-
 		.users li,
 		.panel-header {
 			flex-direction: column;
@@ -230,53 +220,48 @@
 <style>
 	:global(body) {
 		margin: 0;
-		font-family:
-			'Instrument Sans',
-			'Segoe UI',
-			sans-serif;
-		background: #f7f8fb;
-		color: #0f172a;
+		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+		background: #fff;
+		color: #111;
 	}
 
 	.shell {
-		max-width: 64rem;
+		max-width: 40rem;
 		margin: 0 auto;
-		padding: 4rem 1.5rem 5rem;
+		padding: 3rem 1.5rem;
 	}
 
 	.hero {
-		margin-bottom: 2rem;
+		margin-bottom: 1.5rem;
 	}
 
 	.eyebrow {
-		margin: 0 0 0.75rem;
-		color: #10b981;
-		font-size: 0.875rem;
-		font-weight: 700;
-		letter-spacing: 0.14em;
+		margin: 0 0 0.5rem;
+		color: #666;
+		font-size: 0.75rem;
+		font-weight: 600;
+		letter-spacing: 0.06em;
 		text-transform: uppercase;
 	}
 
 	h1 {
 		margin: 0;
-		max-width: 12ch;
-		font-size: clamp(2.75rem, 7vw, 5rem);
-		line-height: 0.95;
+		font-size: 1.25rem;
+		font-weight: 600;
+		line-height: 1.4;
 	}
 
 	.lede {
-		max-width: 42rem;
-		font-size: 1.05rem;
-		line-height: 1.7;
-		color: #475569;
+		margin: 0.5rem 0 0;
+		color: #666;
+		font-size: 0.875rem;
+		line-height: 1.6;
 	}
 
 	.panel {
-		padding: 1.5rem;
-		border: 1px solid #dbe2ea;
-		border-radius: 1.5rem;
-		background: #ffffff;
-		box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
+		border: 1px solid #e5e5e5;
+		border-radius: 0.5rem;
+		padding: 1rem;
 	}
 
 	.panel-header {
@@ -284,21 +269,23 @@
 		align-items: center;
 		justify-content: space-between;
 		gap: 1rem;
-		margin-bottom: 1rem;
+		margin-bottom: 0.75rem;
 	}
 
 	h2 {
 		margin: 0;
-		font-size: 1.125rem;
+		font-size: 0.875rem;
+		font-weight: 600;
 	}
 
-	.panel-header span,
-	time {
-		color: #64748b;
+	.panel-header span {
+		color: #888;
+		font-size: 0.8rem;
 	}
 
 	.panel p {
-		color: #64748b;
+		color: #666;
+		font-size: 0.8rem;
 	}
 
 	.users {
@@ -306,7 +293,7 @@
 		margin: 0;
 		padding: 0;
 		display: grid;
-		gap: 0.75rem;
+		gap: 0.5rem;
 	}
 
 	.users li {
@@ -314,32 +301,24 @@
 		align-items: center;
 		justify-content: space-between;
 		gap: 1rem;
-		padding: 1rem 1.125rem;
-		border-radius: 1rem;
-		background: #f8fafc;
-		border: 1px solid #dbe2ea;
+		padding: 0.625rem 0.75rem;
+		border: 1px solid #eee;
+		border-radius: 0.375rem;
 	}
 
 	.users p {
-		margin: 0.2rem 0 0;
+		margin: 0.125rem 0 0;
 	}
 
 	code {
-		padding: 0.15rem 0.4rem;
-		border-radius: 0.35rem;
-		background: #eef2f7;
-		font-family:
-			SFMono-Regular,
-			Consolas,
-			monospace;
-		font-size: 0.95em;
+		padding: 0.125rem 0.25rem;
+		border-radius: 0.25rem;
+		background: #f5f5f5;
+		font-family: SFMono-Regular, Consolas, monospace;
+		font-size: 0.875em;
 	}
 
 	@media (max-width: 640px) {
-		.shell {
-			padding-top: 3rem;
-		}
-
 		.users li,
 		.panel-header {
 			flex-direction: column;

package/templates/create/tanstack-start/prisma/schema.prisma.hbs

@@ -19,4 +19,3 @@ model User {
   updatedAt DateTime @updatedAt
 }
 {{/if}}
-

package/templates/create/tanstack-start/src/routes/index.tsx.hbs

@@ -50,28 +50,20 @@ function Home() {
 {{/if}}
 
   return (
-    <main className="content">
-      <section className="hero card">
-        <p className="eyebrow">TanStack Start</p>
+    <main className="shell">
+      <div className="hero">
+        <p className="eyebrow">TanStack Start + Prisma 7</p>
 {{#if (eq schemaPreset "basic")}}
-        <h2>Users from your database, loaded through a server function.</h2>
+        <h1>Users from your database, loaded through a server function.</h1>
         <p className="lede">
           This route uses TanStack Start&apos;s server function API and the Prisma client in{" "}
           <code>src/lib/prisma.server.ts</code>.
         </p>
-{{else}}
-        <h2>Your TanStack Start app is ready.</h2>
-        <p className="lede">
-          Edit <code>prisma/schema.prisma</code>, run <code>db:migrate</code>, then query your
-          database from server functions or route loaders.
-        </p>
-{{/if}}
-      </section>
+      </div>
 
-{{#if (eq schemaPreset "basic")}}
-      <section className="card">
-        <div className="sectionHeader">
-          <h3>Seeded users</h3>
+      <section className="panel">
+        <div className="panelHeader">
+          <h2>Seeded users</h2>
           <span>{users?.length ?? 0} total</span>
         </div>
 
@@ -83,9 +75,9 @@ function Home() {
         ) : users.length === 0 ? (
           <p className="empty">No users yet. Run <code>db:seed</code> after your first migration.</p>
         ) : (
-          <ul className="list">
+          <ul className="users">
             {users.map((user) => (
-              <li className="listItem" key={user.id}>
+              <li key={user.id}>
                 <div>
                   <strong>{user.name ?? "Unnamed user"}</strong>
                   <p>{user.email}</p>
@@ -99,26 +91,33 @@ function Home() {
         )}
       </section>
 {{else}}
-      <section className="card">
-        <div className="sectionHeader">
-          <h3>What&apos;s included</h3>
+        <h1>Your TanStack Start app is ready.</h1>
+        <p className="lede">
+          Edit <code>prisma/schema.prisma</code>, run <code>db:migrate</code>, then query your
+          database from server functions or route loaders.
+        </p>
+      </div>
+
+      <section className="panel">
+        <div className="panelHeader">
+          <h2>What&apos;s included</h2>
           <span>Starter kit</span>
         </div>
 
-        <ul className="list">
-          <li className="listItem">
+        <ul className="users">
+          <li>
             <div>
               <strong>File-based routing</strong>
               <p>Add new routes in <code>src/routes</code>.</p>
             </div>
           </li>
-          <li className="listItem">
+          <li>
             <div>
               <strong>Prisma client</strong>
               <p>Use the shared instance from <code>src/lib/prisma.server.ts</code>.</p>
             </div>
           </li>
-          <li className="listItem">
+          <li>
             <div>
               <strong>Seed script</strong>
               <p>Run <code>db:seed</code> after your first migration.</p>
@@ -128,13 +127,12 @@ function Home() {
       </section>
 {{/if}}
 
-      <section className="card">
-        <div className="sectionHeader">
-          <h3>Next steps</h3>
-          <span>Keep building</span>
+      <section className="panel">
+        <div className="panelHeader">
+          <h2>Next steps</h2>
         </div>
 
-        <ul className="checklist">
+        <ul className="steps">
           <li>Run <code>db:generate</code> after schema changes.</li>
           <li>Use TanStack Start server functions for server-only logic.</li>
           <li>Preview production output with <code>preview</code>.</li>

package/templates/create/tanstack-start/src/styles.css

@@ -1,12 +1,5 @@
 :root {
   color-scheme: light;
-  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  background:
-    radial-gradient(circle at top left, rgba(88, 180, 141, 0.18), transparent 28rem),
-    linear-gradient(180deg, #f6fbf8 0%, #eef5f1 100%);
-  color: #153127;
 }
 
 * {
@@ -15,172 +8,138 @@
 
 body {
   margin: 0;
-  min-height: 100vh;
-}
-
-a {
-  color: inherit;
-}
-
-code {
-  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
-  font-size: 0.92em;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  background: #fff;
+  color: #111;
 }
 
 .shell {
+  max-width: 40rem;
   margin: 0 auto;
-  max-width: 72rem;
-  padding: 2rem 1.25rem 3rem;
+  padding: 3rem 1.5rem;
 }
 
-.topbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: end;
-  justify-content: space-between;
-  gap: 1rem;
+.hero {
   margin-bottom: 1.5rem;
 }
 
-.topbar h1,
-.hero h2,
-.sectionHeader h3 {
-  margin: 0;
-}
-
 .eyebrow {
-  margin: 0 0 0.35rem;
-  color: #31795e;
-  font-size: 0.8rem;
-  font-weight: 700;
-  letter-spacing: 0.12em;
+  margin: 0 0 0.5rem;
+  color: #666;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
 }
 
-.nav {
-  display: flex;
-  gap: 0.75rem;
-}
-
-.navLink {
-  border: 1px solid rgba(21, 49, 39, 0.12);
-  border-radius: 999px;
-  padding: 0.55rem 0.95rem;
-  background: rgba(255, 255, 255, 0.72);
-  text-decoration: none;
-}
-
-.content {
-  display: grid;
-  gap: 1rem;
-}
-
-.card {
-  border: 1px solid rgba(21, 49, 39, 0.1);
-  border-radius: 1.5rem;
-  padding: 1.25rem;
-  background: rgba(255, 255, 255, 0.78);
-  backdrop-filter: blur(10px);
-  box-shadow: 0 18px 44px rgba(21, 49, 39, 0.08);
+h1 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.4;
 }
 
-.hero {
-  padding: 1.5rem;
+.lede {
+  margin: 0.5rem 0 0;
+  color: #666;
+  font-size: 0.875rem;
+  line-height: 1.6;
 }
 
-.hero h2 {
-  font-size: clamp(2rem, 5vw, 4rem);
-  line-height: 0.98;
-  max-width: 40rem;
+.panel {
+  border: 1px solid #e5e5e5;
+  border-radius: 0.5rem;
+  padding: 1rem;
 }
 
-.lede {
-  max-width: 42rem;
-  margin: 1rem 0 0;
-  color: #456759;
-  font-size: 1.05rem;
+.panel + .panel {
+  margin-top: 1rem;
 }
 
-.sectionHeader {
+.panelHeader {
   display: flex;
-  align-items: baseline;
+  align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
+}
+
+h2 {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
-.sectionHeader span {
-  color: #5c7a6e;
-  font-size: 0.95rem;
+.panelHeader span,
+.empty,
+time {
+  color: #888;
+  font-size: 0.8rem;
 }
 
-.empty {
-  margin: 0;
-  color: #5c7a6e;
+.panel p {
+  color: #666;
+  font-size: 0.8rem;
 }
 
-.list,
-.checklist {
+.users {
   list-style: none;
   margin: 0;
   padding: 0;
-}
-
-.list {
   display: grid;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
-.listItem {
+.users li {
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
   justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.95rem 1rem;
-  border-radius: 1rem;
-  background: rgba(246, 251, 248, 0.9);
+  gap: 1rem;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid #eee;
+  border-radius: 0.375rem;
+}
+
+.users p {
+  margin: 0.125rem 0 0;
 }
 
-.listItem p {
-  margin: 0.35rem 0 0;
-  color: #5c7a6e;
+time {
+  font-size: 0.75rem;
+  white-space: nowrap;
 }
 
-.listItem time {
-  color: #5c7a6e;
-  font-size: 0.95rem;
+code {
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  background: #f5f5f5;
+  font-family: SFMono-Regular, Consolas, monospace;
+  font-size: 0.875em;
 }
 
-.checklist {
+.steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: grid;
-  gap: 0.6rem;
+  gap: 0.25rem;
 }
 
-.checklist li {
-  position: relative;
-  padding-left: 1.25rem;
-  color: #456759;
+.steps li {
+  color: #444;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  padding: 0.375rem 0;
+  border-bottom: 1px solid #f5f5f5;
 }
 
-.checklist li::before {
-  content: "";
-  position: absolute;
-  top: 0.55rem;
-  left: 0;
-  width: 0.45rem;
-  height: 0.45rem;
-  border-radius: 999px;
-  background: #58b48d;
+.steps li:last-child {
+  border-bottom: none;
 }
 
 @media (max-width: 640px) {
-  .shell {
-    padding-inline: 1rem;
-  }
-
-  .topbar,
-  .sectionHeader,
-  .listItem {
+  .users li,
+  .panelHeader {
     flex-direction: column;
     align-items: flex-start;
   }