@tanstack/create 0.61.6 → 0.62.1

package/src/frameworks/react/add-ons/shadcn/assets/src/styles.css

@@ -1,24 +1,32 @@
+@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');
 @import 'tailwindcss';
+@plugin '@tailwindcss/typography';
 
 @import 'tw-animate-css';
 
 @custom-variant dark (&:is(.dark *));
 
-body {
-  @apply m-0;
-  font-family:
-    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family:
-    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}
-
 :root {
+  --sea-ink: #173a40;
+  --sea-ink-soft: #416166;
+  --lagoon: #4fb8b2;
+  --lagoon-deep: #328f97;
+  --palm: #2f6a4a;
+  --sand: #e7f0e8;
+  --foam: #f3faf5;
+  --surface: rgba(255, 255, 255, 0.74);
+  --surface-strong: rgba(255, 255, 255, 0.9);
+  --line: rgba(23, 58, 64, 0.14);
+  --inset-glint: rgba(255, 255, 255, 0.82);
+  --kicker: rgba(47, 106, 74, 0.9);
+  --bg-base: #e7f3ec;
+  --header-bg: rgba(251, 255, 248, 0.84);
+  --chip-bg: rgba(255, 255, 255, 0.8);
+  --chip-line: rgba(47, 106, 74, 0.18);
+  --link-bg-hover: rgba(255, 255, 255, 0.9);
+  --hero-a: rgba(79, 184, 178, 0.36);
+  --hero-b: rgba(47, 106, 74, 0.2);
+
   --background: oklch(1 0 0);
   --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
@@ -55,6 +63,26 @@ code {
 }
 
 .dark {
+  --sea-ink: #d7ece8;
+  --sea-ink-soft: #afcdc8;
+  --lagoon: #60d7cf;
+  --lagoon-deep: #8de5db;
+  --palm: #6ec89a;
+  --sand: #0f1a1e;
+  --foam: #101d22;
+  --surface: rgba(16, 30, 34, 0.8);
+  --surface-strong: rgba(15, 27, 31, 0.92);
+  --line: rgba(141, 229, 219, 0.18);
+  --inset-glint: rgba(194, 247, 238, 0.14);
+  --kicker: #b8efe5;
+  --bg-base: #0a1418;
+  --header-bg: rgba(10, 20, 24, 0.8);
+  --chip-bg: rgba(13, 28, 32, 0.9);
+  --chip-line: rgba(141, 229, 219, 0.24);
+  --link-bg-hover: rgba(24, 44, 49, 0.8);
+  --hero-a: rgba(96, 215, 207, 0.18);
+  --hero-b: rgba(110, 200, 154, 0.12);
+
   --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.141 0.005 285.823);
@@ -90,6 +118,7 @@ code {
 }
 
 @theme inline {
+  --font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -128,11 +157,191 @@ code {
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  color: var(--sea-ink);
+  font-family: var(--font-sans);
+  background-color: var(--bg-base);
+  background:
+    radial-gradient(1100px 620px at -8% -10%, var(--hero-a), transparent 58%),
+    radial-gradient(1050px 620px at 112% -12%, var(--hero-b), transparent 62%),
+    radial-gradient(720px 380px at 50% 115%, rgba(79, 184, 178, 0.1), transparent 68%),
+    linear-gradient(180deg, color-mix(in oklab, var(--sand) 68%, white) 0%, var(--foam) 44%, var(--bg-base) 100%);
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+  opacity: 0.28;
+  background:
+    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.8), transparent 34%),
+    radial-gradient(circle at 78% 26%, rgba(79, 184, 178, 0.2), transparent 42%),
+    radial-gradient(circle at 42% 82%, rgba(47, 106, 74, 0.14), transparent 36%);
+}
+
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: -1;
+  opacity: 0.14;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
+  background-size: 28px 28px;
+  mask-image: radial-gradient(circle at 50% 30%, black, transparent 78%);
+}
+
+a {
+  color: var(--lagoon-deep);
+  text-decoration-color: rgba(50, 143, 151, 0.4);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+a:hover {
+  color: #246f76;
+}
+
+code {
+  font-size: 0.9em;
+  border: 1px solid var(--line);
+  background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
+  border-radius: 7px;
+  padding: 2px 7px;
+}
+
+pre code {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+  color: inherit;
+}
+
+.prose pre {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: #1d2e45;
+  color: #e8efff;
+}
+
+.page-wrap {
+  width: min(1080px, calc(100% - 2rem));
+  margin-inline: auto;
+}
+
+.display-title {
+  font-family: 'Fraunces', Georgia, serif;
+}
+
+.island-shell {
+  border: 1px solid var(--line);
+  background: linear-gradient(165deg, var(--surface-strong), var(--surface));
+  box-shadow:
+    0 1px 0 var(--inset-glint) inset,
+    0 22px 44px rgba(30, 90, 72, 0.1),
+    0 6px 18px rgba(23, 58, 64, 0.08);
+  backdrop-filter: blur(4px);
+}
+
+.feature-card {
+  background: linear-gradient(165deg, color-mix(in oklab, var(--surface-strong) 93%, white 7%), var(--surface));
+  box-shadow:
+    0 1px 0 var(--inset-glint) inset,
+    0 18px 34px rgba(30, 90, 72, 0.1),
+    0 4px 14px rgba(23, 58, 64, 0.06);
+}
+
+.feature-card:hover {
+  transform: translateY(-2px);
+  border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
+}
+
+button,
+.island-shell,
+a {
+  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
+    transform 180ms ease;
+}
+
+.island-kicker {
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 0.69rem;
+  color: var(--kicker);
+}
+
+.nav-link {
+  position: relative;
+  text-decoration: none;
+  color: var(--sea-ink-soft);
+}
+
+.nav-link::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -8px;
+  width: 100%;
+  height: 2px;
+  transform: scaleX(0);
+  transform-origin: left;
+  background: linear-gradient(90deg, var(--lagoon), #7ed3bf);
+  transition: transform 170ms ease;
+}
+
+.nav-link:hover,
+.nav-link.is-active {
+  color: var(--sea-ink);
+}
+
+.nav-link:hover::after,
+.nav-link.is-active::after {
+  transform: scaleX(1);
+}
+
+.rise-in {
+  animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes rise-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.site-footer {
+  border-top: 1px solid var(--line);
+  background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    background-color: var(--background);
+    color: var(--foreground);
   }
 }

package/src/frameworks/react/add-ons/store/assets/src/lib/demo-store.ts

@@ -1,13 +1,12 @@
-import { Derived, Store } from '@tanstack/store'
+import { Store } from '@tanstack/store'
 
 export const store = new Store({
   firstName: 'Jane',
   lastName: 'Smith',
 })
 
-export const fullName = new Derived({
-  fn: () => `${store.state.firstName} ${store.state.lastName}`,
-  deps: [store],
-})
+export const fullName = new Store(`${store.state.firstName} ${store.state.lastName}`)
 
-fullName.mount()
+store.subscribe(() => {
+  fullName.setState(() => `${store.state.firstName} ${store.state.lastName}`)
+})

package/src/frameworks/react/add-ons/store/assets/src/routes/demo/store.tsx.ejs

@@ -39,7 +39,7 @@ function LastName() {
 }
 
 function FullName() {
-  const fName = useStore(fullName)
+  const fName = useStore(fullName, (state) => state)
   return (
     <div className="bg-white/10 rounded-lg px-4 py-2 outline-none ">
       {fName}

package/src/frameworks/react/add-ons/store/package.json

@@ -1,7 +1,7 @@
 {
   "dependencies": {
-    "@tanstack/store": "^0.8.0",
-    "@tanstack/react-store": "^0.8.0"
+    "@tanstack/store": "^0.9.1",
+    "@tanstack/react-store": "^0.9.1"
   },
   "devDependencies": {
     "@tanstack/devtools-event-client": "^0.4.0"

package/src/frameworks/react/index.ts

@@ -25,9 +25,9 @@ export function createFrameworkDefinition(): FrameworkDefinition {
   )
 
   return {
-    id: 'react-cra',
+    id: 'react',
     name: 'React',
-    description: 'Templates for React CRA',
+    description: 'Templates for React',
     version: '0.1.0',
     base: files,
     addOns,

package/src/frameworks/react/project/base/content/blog/fifth-post.mdx.ejs

@@ -0,0 +1,54 @@
+---
+title: 'Velvet Runtime Notes'
+description: 'Use color tokens to keep light and dark themes aligned.'
+pubDate: 'Aug 05 2024'
+heroImage: '/images/lagoon-5.svg'
+---
+
+Semantic tokens keep your UI stable while the brand evolves.
+
+Instead of hard-coding one-off colors in components, shape a small set of
+variables and map all surfaces to those variables.
+
+## Why this matters
+
+- You can restyle the app in minutes instead of days
+- Light and dark themes stay behaviorally consistent
+- Add-on pages inherit your visual identity by default
+
+<MdxCallout title="MDX Component Demo">
+  This callout is rendered from JSX inside an MDX post. It is useful for
+  release notes, warnings, and migration tips where you want stronger visual
+  emphasis than plain markdown blocks.
+</MdxCallout>
+
+<MdxMetrics
+  items={[
+    { label: 'Token count', value: '12 core vars' },
+    { label: 'Theme modes', value: 'light + dark + auto' },
+    { label: 'Restyle time', value: '< 30 min' },
+  ]}
+/>
+
+### Token-to-component mapping
+
+| Token | Typical usage |
+| --- | --- |
+| `--surface` | Card backgrounds |
+| `--line` | Borders and separators |
+| `--lagoon-deep` | Links and active nav |
+
+Keep the mapping documented and your team will make fewer ad-hoc styling calls.
+
+### Example: deriving UI from semantic tokens
+
+```tsx
+const button = {
+  color: 'var(--sea-ink)',
+  background: 'var(--surface)',
+  borderColor: 'var(--line)',
+}
+```
+
+MDX is useful here because you can interleave narrative, tables, code blocks,
+and custom JSX components in one authoring surface.

package/src/frameworks/react/project/base/content/blog/first-post.md.ejs

@@ -0,0 +1,47 @@
+---
+title: 'Neon Mango Protocol'
+description: 'A quick walkthrough of the starter foundations.'
+pubDate: 'Jul 08 2024'
+heroImage: '/images/lagoon-3.svg'
+---
+
+This starter ships with routes, SSR, and a calm visual system out of the box.
+
+Start by editing route files, then layer in add-ons as needed.
+
+## What you get on day one
+
+- Full-document SSR using TanStack Start
+- Type-safe file routing with generated route types
+- A reusable design token system for light and dark themes
+
+The goal is simple: let teams ship product pages and APIs without spending the
+first week wiring framework internals.
+
+### Suggested order of operations
+
+1. Make the home route feel like your product
+2. Add one feature route and one API route
+3. Introduce add-ons only after your core UX is clear
+
+> Keep the first commit boring. Reliable defaults beat clever setup code.
+
+## Baseline delivery checklist
+
+Before introducing custom infra, confirm these are green:
+
+- `pnpm dev` starts cleanly
+- one server route returns typed data
+- one API route validates input/output
+- one integration test exercises a full page render
+
+When these are in place, you can iterate quickly without losing confidence.
+
+### Example request flow
+
+1. Client navigation enters route loader
+2. Loader calls server function
+3. Server function reads data source and returns typed payload
+4. Route component renders immediately with stable shape
+
+That flow is simple, predictable, and easy to debug.

package/src/frameworks/react/project/base/content/blog/fourth-post.md.ejs

@@ -0,0 +1,42 @@
+---
+title: 'Static Tide Almanac'
+description: 'Dial in layout polish and image rhythm across cards.'
+pubDate: 'Jul 29 2024'
+heroImage: '/images/lagoon-1.svg'
+---
+
+As your app grows, visual rhythm matters as much as feature scope.
+
+Use larger feature cards to call attention to primary content, then support with
+smaller cards for secondary updates.
+
+## Practical layout pattern
+
+Use one featured card followed by standard cards in a responsive grid:
+
+- `lg:col-span-2` for the featured story
+- regular span for supporting posts
+- consistent card media height below `lg`
+
+That gives you hierarchy without reinventing every breakpoint.
+
+### A quick spacing rule
+
+Pair spacing in steps of 4 (`p-4`, `p-8`, `gap-4`, `gap-8`) and only break that
+rule for hero sections.
+
+## Card hierarchy recipe
+
+For content-heavy indexes, this sequence works well:
+
+1. One featured card with expanded width
+2. Three to six standard cards for breadth
+3. Optional utility card for onboarding links
+
+Keep title sizes mostly consistent and let width + image treatment carry
+hierarchy. That avoids jarring jumps as breakpoints shift.
+
+### Avoiding layout drift
+
+If cards start to look uneven, check image heights first, then paragraph length.
+Consistency there usually fixes 80% of visual noise.

package/src/frameworks/react/project/base/content/blog/second-post.mdx.ejs

@@ -0,0 +1,46 @@
+---
+title: 'Paper Lantern Cache'
+description: 'How to shape navigation and page structure.'
+pubDate: 'Jul 15 2024'
+heroImage: '/images/lagoon-4.svg'
+---
+
+Use file-based routes in `src/routes` to grow the app.
+
+Keep shared UI in `src/components` and tune visual tokens in `src/styles.css`.
+
+## Route design tips
+
+Treat routes like product domains, not technical buckets.
+
+- `routes/settings.*` for account surfaces
+- `routes/billing.*` for payment and plan logic
+- `routes/api.*` for server handlers that belong to the same domain
+
+When route trees map to business intent, onboarding gets faster and refactors
+hurt less.
+
+```tsx
+// src/routes/billing.index.tsx
+export const Route = createFileRoute('/billing/')({
+  component: BillingPage,
+})
+```
+
+<MdxMetrics
+  items={[
+    { label: 'Route setup', value: '~10 min' },
+    { label: 'Type safety', value: 'end-to-end' },
+    { label: 'Refactor risk', value: 'lowered' },
+  ]}
+/>
+
+### Collaboration pattern
+
+Use this lightweight ownership split:
+
+1. Product owns route naming and URL intent
+2. Design owns shared layout primitives and tokens
+3. Engineering owns loaders, actions, and caching
+
+This pattern keeps URL design, data loading, and UI composition in one place.

package/src/frameworks/react/project/base/content/blog/third-post.md.ejs

@@ -0,0 +1,49 @@
+---
+title: 'Midnight Compass Build'
+description: 'Where to customize theme and typography.'
+pubDate: 'Jul 22 2024'
+heroImage: '/images/lagoon-2.svg'
+---
+
+Update CSS variables in `src/styles.css` to fit your brand.
+
+Then adjust header and footer links to match your product.
+
+## Theme alignment checklist
+
+Before adding one-off colors, audit these variables:
+
+- `--sea-ink` and `--sea-ink-soft` for readable body copy
+- `--surface` and `--surface-strong` for cards and shells
+- `--lagoon` / `--lagoon-deep` for links and active UI affordances
+
+If those are correct, most components will look coherent with zero extra work.
+
+### Accessibility reminder
+
+Check contrast on at least three surfaces:
+
+1. page background
+2. primary card
+3. muted card
+
+You can be highly branded and still hit comfortable readability.
+
+## Typography defaults that travel well
+
+Use a high-contrast display face for headlines and a workhorse sans for body
+copy. Then lock in a spacing scale that keeps article rhythm consistent:
+
+- headings: `mt-10 mb-3`
+- paragraphs: `mb-5`
+- lists: `mb-6`
+
+With those defaults set, long-form pages stay readable across both themes.
+
+### Practical review loop
+
+When you tweak tokens, review these pages in order:
+
+1. Blog detail page (most typography states)
+2. Blog index page (cards + metadata)
+3. Home page (hero and CTA emphasis)

package/src/frameworks/react/project/base/content-collections.ts.ejs

@@ -0,0 +1,37 @@
+import { defineCollection, defineConfig } from '@content-collections/core'
+import { compileMarkdown } from '@content-collections/markdown'
+import { compileMDX } from '@content-collections/mdx'
+import remarkGfm from 'remark-gfm'
+import { z } from 'zod'
+
+const blog = defineCollection({
+  name: 'blog',
+  directory: 'content/blog',
+  include: '**/*.{md,mdx}',
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    pubDate: z.string(),
+    content: z.string(),
+    heroImage: z.string().optional(),
+  }),
+  transform: async (document, context) => {
+    const isMdx = document._meta.filePath.endsWith('.mdx')
+
+    return {
+      ...document,
+      slug: document._meta.path,
+      pubDate: new Date(document.pubDate).toISOString(),
+      html: isMdx ? null : await compileMarkdown(context, document),
+      mdx: isMdx
+        ? await compileMDX(context, document, {
+            remarkPlugins: [remarkGfm],
+          })
+        : null,
+    }
+  },
+})
+
+export default defineConfig({
+  collections: [blog],
+})

package/src/frameworks/react/project/base/package.json

@@ -22,6 +22,11 @@
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
+    "@content-collections/core": "^0.13.1",
+    "@content-collections/markdown": "^0.1.4",
+    "@content-collections/mdx": "^0.2.2",
+    "@content-collections/vite": "^0.2.8",
+    "@tailwindcss/typography": "^0.5.16",
     "@tanstack/devtools-vite": "^0.3.11",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
@@ -29,9 +34,11 @@
     "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^5.0.4",
     "jsdom": "^27.0.0",
+    "remark-gfm": "^4.0.1",
     "typescript": "^5.7.2",
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.5"
+    "vitest": "^3.0.5",
+    "zod": "^4.3.5"
   }
 }

package/src/frameworks/react/project/base/public/images/lagoon-1.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 1">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0%" stop-color="#9be2dc"/>
+      <stop offset="55%" stop-color="#65c2c4"/>
+      <stop offset="100%" stop-color="#356f7b"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <circle cx="980" cy="90" r="120" fill="#fff" fill-opacity="0.32"/>
+  <path d="M0 500c160-70 280-70 420 0s260 70 420 0 240-70 360 0v130H0z" fill="#d8f4ec" fill-opacity="0.82"/>
+  <path d="M0 550c160-70 280-70 420 0s260 70 420 0 240-70 360 0v80H0z" fill="#2f6a4a" fill-opacity="0.18"/>
+</svg>

package/src/frameworks/react/project/base/public/images/lagoon-2.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 2">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0%" stop-color="#b1ebe4"/>
+      <stop offset="50%" stop-color="#73c7b3"/>
+      <stop offset="100%" stop-color="#2f6a4a"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <path d="M0 485c180-96 360-96 540 0s360 96 660 0v145H0z" fill="#f1fbf8" fill-opacity="0.72"/>
+  <circle cx="180" cy="140" r="90" fill="#fff" fill-opacity="0.26"/>
+</svg>

package/src/frameworks/react/project/base/public/images/lagoon-3.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 3">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="0" y2="1">
+      <stop offset="0%" stop-color="#8fdcd0"/>
+      <stop offset="60%" stop-color="#4ea7ad"/>
+      <stop offset="100%" stop-color="#1f4f5c"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <path d="M0 520c160-70 320-70 480 0s320 70 720 0v110H0z" fill="#dff6ee" fill-opacity="0.8"/>
+  <path d="M0 560c160-70 320-70 480 0s320 70 720 0v70H0z" fill="#173a40" fill-opacity="0.16"/>
+</svg>

package/src/frameworks/react/project/base/public/images/lagoon-4.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" role="img" aria-label="Lagoon gradient 4">
+  <defs>
+    <linearGradient id="bg" x1="0" x2="1" y1="1" y2="0">
+      <stop offset="0%" stop-color="#81d8c9"/>
+      <stop offset="52%" stop-color="#53a9c8"/>
+      <stop offset="100%" stop-color="#2f6a7b"/>
+    </linearGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <circle cx="1040" cy="140" r="96" fill="#fff" fill-opacity="0.24"/>
+  <path d="M0 500c180-85 350-85 520 0s350 85 680 0v130H0z" fill="#effaf6" fill-opacity="0.74"/>
+</svg>