void 1.2.1 → 1.4.0

package/dist/{info-7VDlhtyy.mjs → info-Yg0-V5Rs.mjs}

@@ -1,8 +1,8 @@
 import { a as join, s as relative } from "./dist-ipQi0Q8y.mjs";
-import { a as deriveWebSocketClassNameFromName, o as inferWebSocketResourceName } from "./plugin-inference-DUjCd55H.mjs";
-import { p as readConfig } from "./config-DHgSEWT7.mjs";
-import { d as deriveDurableResourceIdentity, f as inferDurableResourceName, t as analyzeApplicationSync } from "./application-analysis-fEqoSeMp.mjs";
-import { n as VOID_LOCK_FILE } from "./cloudflare-config-DchHxPTo.mjs";
+import { a as deriveWebSocketClassNameFromName, o as inferWebSocketResourceName } from "./plugin-inference-CeiB6BG5.mjs";
+import { p as readConfig } from "./config-OFOAimzt.mjs";
+import { d as deriveDurableResourceIdentity, f as inferDurableResourceName, t as analyzeApplicationSync } from "./application-analysis-DDOQwiXk.mjs";
+import { n as VOID_LOCK_FILE } from "./cloudflare-config-CH1AylZT.mjs";
 import { existsSync, readFileSync } from "node:fs";
 import { isRecord } from "@void/deploy-core";
 //#region src/cli/info.ts

package/dist/{init-DxYyOs4-.mjs → init-CDiJQycf.mjs}

@@ -1,28 +1,28 @@
 import { a as join, c as resolve, i as isAbsolute, n as dirname, s as relative, t as basename } from "./dist-ipQi0Q8y.mjs";
-import { r as detectFramework } from "./plugin-inference-DUjCd55H.mjs";
+import { r as detectFramework } from "./plugin-inference-CeiB6BG5.mjs";
 import { n as readProjectPaths, o as TYPED_CONFIG_FILE } from "./project-paths-DGu_QZ_Q.mjs";
-import { c as getDatabaseCasing, l as getDatabaseDialect, p as readConfig, s as databaseConfigValue } from "./config-DHgSEWT7.mjs";
+import { c as getDatabaseCasing, l as getDatabaseDialect, p as readConfig, s as databaseConfigValue } from "./config-OFOAimzt.mjs";
 import { t as MagicString } from "./dist-Cegxq8gs.mjs";
 import { c as writeDeploymentPlatform, n as readDeploymentPlatform, r as readProjectConfig, t as attachSelectedPlatform, u as writeProjectConfig } from "./project-rqDnVsJN.mjs";
-import { r as materializeCloudflareConfig } from "./cloudflare-config-DchHxPTo.mjs";
-import { M as writeProvisionedWranglerConfig, i as LATEST_KNOWN_COMPAT_DATE } from "./wrangler-F96NnLyb.mjs";
+import { i as materializeCloudflareConfig } from "./cloudflare-config-CH1AylZT.mjs";
+import { F as canRewriteVoidProjectConfig, L as writeVoidProjectConfig, M as writeProvisionedWranglerConfig, i as LATEST_KNOWN_COMPAT_DATE } from "./wrangler-I-scB_1t.mjs";
 import { i as readPackageJson, n as hasPackageDependency } from "./package-json-BjYqR-So.mjs";
 import { c as getToken } from "./auth-B6iOCjKI.mjs";
-import { n as ensureProjectTsconfig, t as createProjectTsconfig } from "./project-tsconfig-Itv1f4WC.mjs";
+import { n as ensureProjectTsconfig, t as createProjectTsconfig } from "./project-tsconfig-CVvk6Z_e.mjs";
 import { t as parseDotenvFile } from "./dotenv-CNazY3-w.mjs";
-import { r as writeDrizzleConfig, t as PLACEHOLDER_DB_URL } from "./config-BIaXIkkv.mjs";
+import { r as writeDrizzleConfig, t as PLACEHOLDER_DB_URL } from "./config-tqMM6DwY.mjs";
 import { A as confirm, K as select, L as log, O as cancel, X as text, tt as isCancel } from "./dist-Cor9XGoz.mjs";
 import { n as getOwnVersion, r as getPackageDir, t as detectAgents } from "./agents-CuNtT0D_.mjs";
-import { r as PlatformClient } from "./client-BEkdj1kx.mjs";
+import { r as PlatformClient } from "./client-B3LnB_bE.mjs";
 import { l as formatUrl, m as printSuccess, p as note } from "./output-BpgYODYx.mjs";
-import { a as promptProjectSelection, r as promptAndCreateProject } from "./create-project-DV71ol5d.mjs";
+import { a as promptProjectSelection, r as promptAndCreateProject } from "./create-project-Bxd02EHN.mjs";
 import { s as formatProjectCommand } from "./cloudflare-process-8jEYIeim.mjs";
 import { i as hasLocalLockfile, n as drizzleKitBin, r as findInstalledYarnPnpRuntime, t as buildDrizzleKitSpawnEnv } from "./yarn-pnp-DLbEFMT0.mjs";
-import { t as promptForLoginToken } from "./login-Cttnagmm.mjs";
-import { i as saveDiscoveredPlatform, t as discoverPlatform } from "./platform-cmd-D5I1beUX.mjs";
-import { t as connectCloudflare } from "./cloudflare-connect-CCRTVg-I.mjs";
+import { t as promptForLoginToken } from "./login-PcFy5mlC.mjs";
+import { i as saveDiscoveredPlatform, t as discoverPlatform } from "./platform-cmd-DZK2ixMl.mjs";
+import { t as connectCloudflare } from "./cloudflare-connect-zTJh8UnN.mjs";
 import { n as snapshotDrizzleOutputs } from "./generate-B1m4Cm4n.mjs";
-import { i as writeVoidProjectConfig, o as migrateFrameworkAdapterPaths, r as canRewriteVoidProjectConfig, t as migrateLegacyVoidConfig } from "./migrate-DyT2jJ8y.mjs";
+import { i as migrateFrameworkAdapterPaths, t as migrateLegacyVoidConfig } from "./migrate-B8S2xTcb.mjs";
 import { createRequire } from "node:module";
 import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from "node:fs";
 import { parseSync } from "vite";
@@ -211,6 +211,9 @@ function initialCommitCommand(root) {
 	return `${git} add -A && ${git} commit -m "chore: initial commit"`;
 }
 //#endregion
+//#region src/cli/starter-ui.css?raw
+var starter_ui_default = ":root {\n  --text: rgb(22 23 29 / 70%);\n  --text-h: #16171d;\n  --bg: #fff;\n  --border: #e5e4e7;\n  --code-bg: #f2f1f4;\n  --accent: #6c3bff;\n  --error: #b42318;\n  --social-bg: #f2f1f4;\n  --radius-inner: 4px;\n  --radius-element: 6px;\n  --shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;\n\n  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;\n  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;\n  --mono: ui-monospace, Consolas, monospace;\n\n  font: 18px/145% var(--sans);\n  letter-spacing: 0.18px;\n  color-scheme: light dark;\n  color: var(--text);\n  background: var(--bg);\n  font-synthesis: none;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  @media (max-width: 1024px) {\n    font-size: 16px;\n  }\n}\n\n@supports (corner-shape: squircle) {\n  :root {\n    /* Squircle curves need about twice the radius to read as rounded. */\n    --radius-inner: 8px;\n    --radius-element: 12px;\n  }\n\n  :where(.starter, .starter *),\n  .starter *::before,\n  .starter *::after {\n    corner-shape: squircle;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --text: rgb(255 255 255 / 70%);\n    --text-h: #fff;\n    --bg: #16171d;\n    --border: #3b3440;\n    --code-bg: #3b3440;\n    --accent: #b39aff;\n    --error: #fda29b;\n    --social-bg: #3b3440;\n    --shadow: rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;\n  }\n}\n\n.starter {\n  width: 1126px;\n  max-width: 100%;\n  margin: 0 auto;\n  text-align: center;\n  border-inline: 1px solid var(--border);\n  min-height: 100svh;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n}\n\nh1,\nh2 {\n  font-family: var(--heading);\n  font-weight: 500;\n  color: var(--text-h);\n}\n\nh1 {\n  font-size: 56px;\n  letter-spacing: -1.68px;\n  margin: 32px 0;\n  @media (max-width: 1024px) {\n    font-size: 36px;\n    margin: 20px 0;\n  }\n}\nh2 {\n  font-size: 24px;\n  line-height: 118%;\n  letter-spacing: -0.24px;\n  margin: 0 0 8px;\n  @media (max-width: 1024px) {\n    font-size: 20px;\n  }\n}\np {\n  margin: 0;\n}\n\ncode {\n  font-family: var(--mono);\n  display: inline-flex;\n  border-radius: var(--radius-inner);\n  color: var(--text-h);\n  font-size: 15px;\n  line-height: 135%;\n  padding: 4px 8px;\n  background: var(--code-bg);\n}\n\n.hero {\n  position: relative;\n\n  .base,\n  .framework,\n  .void {\n    inset-inline: 0;\n    margin: 0 auto;\n  }\n\n  .base {\n    width: 170px;\n    position: relative;\n    z-index: 0;\n  }\n\n  .framework,\n  .void {\n    position: absolute;\n  }\n\n  .framework {\n    z-index: 1;\n    top: 34px;\n    height: 28px;\n    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) scale(1.4);\n  }\n\n  .void {\n    z-index: 0;\n    top: 107px;\n    height: 22px;\n    width: auto;\n    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) scale(0.8);\n  }\n}\n\n#center {\n  display: flex;\n  flex-direction: column;\n  gap: 25px;\n  padding-bottom: 24px;\n  place-content: center;\n  place-items: center;\n  flex-grow: 1;\n\n  @media (max-width: 1024px) {\n    padding: 32px 20px 24px;\n    gap: 18px;\n  }\n}\n\n.starter-intro {\n  width: min(720px, 100%);\n  padding-inline: 20px;\n  box-sizing: border-box;\n\n  a {\n    color: var(--accent);\n  }\n\n  @media (max-width: 1024px) {\n    padding-inline: 0;\n  }\n}\n\n.starter-description {\n  display: grid;\n  gap: 12px;\n\n  > p:nth-child(2) {\n    text-wrap: balance;\n  }\n}\n\n.starter-demo {\n  border-top: 1px solid var(--border);\n  padding: 32px;\n  text-align: left;\n\n  @media (max-width: 1024px) {\n    padding: 24px 20px;\n  }\n}\n\n.demo-content {\n  max-width: 640px;\n  margin: 0 auto;\n  display: grid;\n  gap: 24px;\n\n  h2 {\n    margin: 0;\n  }\n}\n\n.messages {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: grid;\n  gap: 12px;\n\n  li {\n    padding: 12px 16px;\n    border: 1px solid var(--border);\n    border-radius: var(--radius-element);\n    overflow-wrap: anywhere;\n  }\n\n  strong {\n    display: block;\n    color: var(--text-h);\n    font-weight: 500;\n  }\n\n  small {\n    font-size: 14px;\n  }\n}\n\n.message-form {\n  display: grid;\n  gap: 12px;\n\n  label {\n    color: var(--text-h);\n  }\n\n  input,\n  button {\n    font: inherit;\n    color: var(--text-h);\n    background: var(--social-bg);\n    border: 1px solid var(--border);\n    border-radius: var(--radius-element);\n    padding: 10px 12px;\n\n    &:focus-visible {\n      outline: 2px solid var(--accent);\n      outline-offset: 2px;\n    }\n  }\n\n  input {\n    flex: 1;\n    min-width: 0;\n  }\n\n  button {\n    cursor: pointer;\n\n    &:hover {\n      border-color: var(--accent);\n    }\n\n    &:disabled {\n      cursor: wait;\n      opacity: 0.6;\n    }\n  }\n}\n\n.message-fields {\n  display: flex;\n  gap: 8px;\n\n  @media (max-width: 480px) {\n    flex-direction: column;\n  }\n}\n\n.message-form [data-void-form-error] {\n  color: var(--error);\n  font-size: 14px;\n}\n\n#next-steps {\n  display: flex;\n  border-top: 1px solid var(--border);\n  text-align: left;\n\n  & > div {\n    flex: 1 1 0;\n    padding: 32px;\n    @media (max-width: 1024px) {\n      padding: 24px 20px;\n    }\n  }\n\n  .icon {\n    color: var(--accent);\n    margin-bottom: 16px;\n    width: 22px;\n    height: 22px;\n  }\n\n  @media (max-width: 1024px) {\n    flex-direction: column;\n    text-align: center;\n  }\n}\n\n#docs {\n  border-right: 1px solid var(--border);\n\n  @media (max-width: 1024px) {\n    border-right: none;\n    border-bottom: 1px solid var(--border);\n  }\n}\n\n#next-steps ul {\n  list-style: none;\n  padding: 0;\n  display: flex;\n  gap: 8px;\n  margin: 32px 0 0;\n\n  a {\n    color: var(--text-h);\n    font-size: 16px;\n    border-radius: var(--radius-element);\n    background: var(--social-bg);\n    display: flex;\n    padding: 6px 12px;\n    align-items: center;\n    gap: 8px;\n    text-decoration: none;\n    transition: box-shadow 0.3s;\n\n    &:hover {\n      box-shadow: var(--shadow);\n    }\n    .button-icon {\n      height: 18px;\n      width: 18px;\n    }\n  }\n\n  @media (max-width: 1024px) {\n    margin-top: 20px;\n    flex-wrap: wrap;\n    justify-content: center;\n\n    li {\n      flex: 1 1 calc(50% - 8px);\n    }\n\n    a {\n      width: 100%;\n      justify-content: center;\n      box-sizing: border-box;\n    }\n  }\n}\n\n#spacer {\n  height: 88px;\n  border-top: 1px solid var(--border);\n  @media (max-width: 1024px) {\n    height: 48px;\n  }\n}\n\n.ticks {\n  position: relative;\n  width: 100%;\n\n  &::before,\n  &::after {\n    content: '';\n    position: absolute;\n    top: -4.5px;\n    border: 5px solid transparent;\n  }\n\n  &::before {\n    left: 0;\n    border-left-color: var(--border);\n  }\n  &::after {\n    right: 0;\n    border-right-color: var(--border);\n  }\n}\n";
+//#endregion
 //#region src/cli/template.ts
 const SCAFFOLD_GITIGNORE_LINES = [
 	"node_modules",
@@ -242,7 +245,7 @@ const SCAFFOLD_TOOLCHAIN_OPTIONS = [{
 	label: "Vite",
 	hint: "Uses plain Vite commands without Vite+."
 }];
-const REACT_SCAFFOLD_COMPILER_DEV_DEPENDENCIES = { "oxc-transform-react": "^0.149.0" };
+const REACT_SCAFFOLD_COMPILER_DEV_DEPENDENCIES = { "oxc-transform-react": "^0.152.0" };
 const SCAFFOLD_FRAMEWORK_OPTIONS = [
 	{
 		value: "react",
@@ -268,6 +271,7 @@ const SCAFFOLD_FRAMEWORK_OPTIONS = [
 const SCAFFOLD_FRAMEWORKS = {
 	react: {
 		label: "React",
+		docsUrl: "https://react.dev/",
 		adapterPackage: "@void/react",
 		adapterImport: "voidReact",
 		adapterPlugin: "@void/react/plugin",
@@ -285,6 +289,7 @@ const SCAFFOLD_FRAMEWORKS = {
 	},
 	vue: {
 		label: "Vue",
+		docsUrl: "https://vuejs.org/",
 		adapterPackage: "@void/vue",
 		adapterImport: "voidVue",
 		adapterPlugin: "@void/vue/plugin",
@@ -295,6 +300,7 @@ const SCAFFOLD_FRAMEWORKS = {
 	},
 	svelte: {
 		label: "Svelte",
+		docsUrl: "https://svelte.dev/",
 		adapterPackage: "@void/svelte",
 		adapterImport: "voidSvelte",
 		adapterPlugin: "@void/svelte/plugin",
@@ -305,6 +311,7 @@ const SCAFFOLD_FRAMEWORKS = {
 	},
 	solid: {
 		label: "Solid",
+		docsUrl: "https://www.solidjs.com/",
 		adapterPackage: "@void/solid",
 		adapterImport: "voidSolid",
 		adapterPlugin: "@void/solid/plugin",
@@ -326,9 +333,16 @@ function getScaffoldTsconfigCompilerOptions(framework) {
 function createPagesStarterTemplate(options) {
 	const { framework, starterMode, toolchain = "vite", voidPackageSpec, adapterPackageSpec } = options;
 	const config = SCAFFOLD_FRAMEWORKS[framework];
+	const assets = join(getPackageDir(), "templates", "assets");
 	const files = {
 		"vite.config.ts": getViteConfig(framework, config),
-		[`pages/index.${config.pageExtension}`]: getIndexPage(framework, starterMode)
+		[`pages/index.${config.pageExtension}`]: getIndexPage(framework, starterMode),
+		"pages/style.css": starter_ui_default,
+		"pages/vite-env.d.ts": "/// <reference types=\"vite/client\" />\n",
+		"public/stack.svg": readFileSync(join(assets, "stack.svg"), "utf8"),
+		"public/void.svg": readFileSync(join(assets, "void.svg"), "utf8"),
+		[`public/${framework}.svg`]: readFileSync(join(assets, `${framework}.svg`), "utf8"),
+		"public/icons.svg": readFileSync(join(assets, "icons.svg"), "utf8")
 	};
 	if (starterMode !== "static") {
 		files["pages/index.server.ts"] = getIndexServer();
@@ -452,210 +466,216 @@ export default defineSeed<typeof import("./schema")>(async ({ db, schema }) => {
 `;
 }
 function getIndexPage(framework, starterMode) {
-	if (starterMode === "static") switch (framework) {
-		case "react": return `export default function HomePage() {
-  return (
-    <main>
-      <h1>Welcome to Void</h1>
-      <p>This starter is running in Pages mode with no database or server code yet.</p>
-      <p>
-        Add <code>pages/*.server.ts</code>, <code>routes/</code>, or <code>void/db</code> when
-        you want to grow into full-stack features.
-      </p>
-    </main>
-  );
-}
-`;
-		case "vue": return `<template>
-  <main>
-    <h1>Welcome to Void</h1>
-    <p>This starter is running in Pages mode with no database or server code yet.</p>
-    <p>
-      Add <code>pages/*.server.ts</code>, <code>routes/</code>, or <code>void/db</code> when you
-      want to grow into full-stack features.
-    </p>
-  </main>
-</template>
-`;
-		case "svelte": return `<main>
-  <h1>Welcome to Void</h1>
-  <p>This starter is running in Pages mode with no database or server code yet.</p>
-  <p>
-    Add <code>pages/*.server.ts</code>, <code>routes/</code>, or <code>void/db</code> when you
-    want to grow into full-stack features.
-  </p>
-</main>
-`;
-		case "solid": return `export default function HomePage() {
-  return (
-    <main>
-      <h1>Welcome to Void</h1>
-      <p>This starter is running in Pages mode with no database or server code yet.</p>
-      <p>
-        Add <code>pages/*.server.ts</code>, <code>routes/</code>, or <code>void/db</code> when
-        you want to grow into full-stack features.
-      </p>
-    </main>
-  );
-}
-`;
-	}
+	const { label, docsUrl } = SCAFFOLD_FRAMEWORKS[framework];
+	const hasDatabase = starterMode !== "static";
+	const body = `<main class="starter">
+  <section id="center" aria-labelledby="welcome-title">
+    <div class="hero">
+      <img class="base" src="/stack.svg" width="170" height="179" alt="" />
+      <img class="framework" src="/${framework}.svg" alt="${label} logo" />
+      <img class="void" src="/void.svg" alt="Void logo" />
+    </div>
+    <div class="starter-intro">
+      <h1 id="welcome-title">Welcome to Void</h1>
+      <div class="starter-description">
+${indent(starterMode === "static" ? `<p>This starter is running in Pages mode with no database or server code yet.</p>
+<p>
+  Add <code>pages/*.server.ts</code>, <code>routes/</code>, or <code>void/db</code> when
+  you want to grow into full-stack features.
+</p>` : `<p>
+  This starter is running in Pages mode. The list below is loaded from your database in <code>pages/index.server.ts</code>.
+</p>
+<p>API example: <a href="/api/hello">/api/hello</a></p>`, 8)}
+      </div>
+    </div>
+  </section>${hasDatabase ? `\n  <div class="ticks" aria-hidden="true"></div>\n${indent(getMessagesDemo(framework), 2)}` : ""}
+  <div class="ticks" aria-hidden="true"></div>
+  <section id="next-steps" aria-label="Resources">
+    <div id="docs">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#documentation-icon"></use>
+      </svg>
+      <h2>Documentation</h2>
+      <p>Your questions, answered</p>
+      <ul>
+        <li>
+          <a href="https://void.cloud/guide/quickstart" target="_blank" rel="noreferrer">
+            Quickstart
+          </a>
+        </li>
+        <li>
+          <a href="${docsUrl}" target="_blank" rel="noreferrer">
+            <img class="button-icon" src="/${framework}.svg" alt="" />
+            Learn more
+          </a>
+        </li>
+      </ul>
+    </div>
+    <div id="social">
+      <svg class="icon" role="presentation" aria-hidden="true">
+        <use href="/icons.svg#social-icon"></use>
+      </svg>
+      <h2>Connect with us</h2>
+      <p>Join the Void community</p>
+      <ul>
+        <li>
+          <a href="https://github.com/voidzero-dev/void" target="_blank" rel="noreferrer">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#github-icon"></use>
+            </svg>
+            GitHub
+          </a>
+        </li>
+        <li>
+          <a href="https://discord.gg/cC6TEVFKSx" target="_blank" rel="noreferrer">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#discord-icon"></use>
+            </svg>
+            Discord
+          </a>
+        </li>
+        <li>
+          <a href="https://x.com/deploytovoid" target="_blank" rel="noreferrer">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#x-icon"></use>
+            </svg>
+            X.com
+          </a>
+        </li>
+        <li>
+          <a href="https://bsky.app/profile/voidzero.dev" target="_blank" rel="noreferrer">
+            <svg class="button-icon" role="presentation" aria-hidden="true">
+              <use href="/icons.svg#bluesky-icon"></use>
+            </svg>
+            Bluesky
+          </a>
+        </li>
+      </ul>
+    </div>
+  </section>
+  <div class="ticks" aria-hidden="true"></div>
+  <div id="spacer" aria-hidden="true"></div>
+</main>`;
 	switch (framework) {
-		case "react": return `import { Form, useForm } from "${SCAFFOLD_FRAMEWORKS[framework].adapterPackage}";
+		case "react":
+		case "solid": {
+			const jsx = framework === "react" ? body.replaceAll("class=", "className=") : body;
+			return `${hasDatabase ? `${framework === "solid" ? "import { For, Show } from \"solid-js\";\n" : ""}import { Form, useForm } from "${SCAFFOLD_FRAMEWORKS[framework].adapterPackage}";
 import type { Props } from "./index.server";
+` : ""}import "./style.css";
 
-export default function HomePage({ messages }: Props) {
-  const form = useForm("/", { text: "" });
-  return (
-    <main>
-      <h1>Welcome to Void</h1>
-      <p>
-        This starter is running in Pages mode. The list below is loaded from your database in
-        <code> pages/index.server.ts</code>.
-      </p>
-      <p>
-        API example: <a href="/api/hello">/api/hello</a>
-      </p>
-      {messages.length === 0 ? (
-        <p>
-          No messages yet. Run <code>void db seed</code> to load the sample row from
-          <code> db/seed.ts</code>.
-        </p>
-      ) : (
-        <ul>
-          {messages.map((message) => (
-            <li key={message.id}>
-              <strong>{message.text}</strong>
-              <br />
-              <small>{String(message.createdAt)}</small>
-            </li>
-          ))}
-        </ul>
-      )}
-      <Form form={form}>
-        <label>Message <input value={form.data.text} onChange={event => form.setData("text", event.target.value)} /></label>
-        <button disabled={form.pending}>Add message</button>
-      </Form>
-    </main>
+export default function HomePage(${hasDatabase ? framework === "react" ? "{ messages }: Props" : "props: Props" : ""}) {
+${hasDatabase ? "  const form = useForm(\"/\", { text: \"\" });\n\n" : ""}  return (
+${indent(jsx, 4)}
   );
 }
 `;
+		}
 		case "vue": return `<script setup lang="ts">
-import type { Props } from "./index.server";
-import { Form, useForm } from "@void/vue";
-
-defineProps<Props>();
-const form = useForm("/", { text: "" });
-<\/script>
+${hasDatabase ? "import { Form, useForm } from \"@void/vue\";\nimport type { Props } from \"./index.server\";\n" : ""}import "./style.css";
+${hasDatabase ? "\ndefineProps<Props>();\nconst form = useForm(\"/\", { text: \"\" });\n" : ""}<\/script>
 
 <template>
-  <main>
-    <h1>Welcome to Void</h1>
-    <p>
-      This starter is running in Pages mode. The list below is loaded from your database in
-      <code>pages/index.server.ts</code>.
-    </p>
-    <p>
-      API example: <a href="/api/hello">/api/hello</a>
-    </p>
-    <p v-if="messages.length === 0">
-      No messages yet. Run <code>void db seed</code> to load the sample row from
-      <code>db/seed.ts</code>.
-    </p>
-    <ul v-else>
-      <li v-for="message in messages" :key="message.id">
-        <strong>{{ message.text }}</strong>
-        <br />
-        <small>{{ String(message.createdAt) }}</small>
-      </li>
-    </ul>
-    <Form :form="form">
-      <label>Message <input v-model="form.data.text" /></label>
-      <button :disabled="form.pending">Add message</button>
-    </Form>
-  </main>
+${indent(body, 2)}
 </template>
 `;
 		case "svelte": return `<script lang="ts">
-  import type { Props } from "./index.server";
-  import { Form, useForm } from "@void/svelte";
-  const form = useForm("/", { text: "" });
-
-  let { messages }: Props = $props();
-<\/script>
-
-<main>
-  <h1>Welcome to Void</h1>
-  <p>
-    This starter is running in Pages mode. The list below is loaded from your database in
-    <code>pages/index.server.ts</code>.
-  </p>
-  <p>
-    API example: <a href="/api/hello">/api/hello</a>
-  </p>
-  {#if messages.length === 0}
-    <p>
-      No messages yet. Run <code>void db seed</code> to load the sample row from
-      <code>db/seed.ts</code>.
-    </p>
-  {:else}
-    <ul>
-      {#each messages as message (message.id)}
-        <li>
-          <strong>{message.text}</strong>
-          <br />
-          <small>{String(message.createdAt)}</small>
-        </li>
-      {/each}
-    </ul>
-  {/if}
-  <Form {form}>
-    <label>Message <input bind:value={form.data.text} /></label>
-    <button disabled={form.pending}>Add message</button>
-  </Form>
-</main>
-`;
-		case "solid": return `import { Form, useForm } from "${SCAFFOLD_FRAMEWORKS[framework].adapterPackage}";
-import type { Props } from "./index.server";
+${hasDatabase ? "  import { Form, useForm } from \"@void/svelte\";\n  import type { Props } from \"./index.server\";\n" : ""}  import "./style.css";
+${hasDatabase ? "\n  let { messages }: Props = $props();\n  const form = useForm(\"/\", { text: \"\" });\n" : ""}<\/script>
 
-export default function HomePage(props: Props) {
-  const form = useForm("/", { text: "" });
-  return (
-    <main>
-      <h1>Welcome to Void</h1>
-      <p>
-        This starter is running in Pages mode. The list below is loaded from your database in
-        <code> pages/index.server.ts</code>.
-      </p>
-      <p>
-        API example: <a href="/api/hello">/api/hello</a>
-      </p>
-      {props.messages.length === 0 ? (
-        <p>
-          No messages yet. Run <code>void db seed</code> to load the sample row from
-          <code> db/seed.ts</code>.
-        </p>
-      ) : (
-        <ul>
-          {props.messages.map((message) => (
-            <li>
-              <strong>{message.text}</strong>
-              <br />
-              <small>{String(message.createdAt)}</small>
-            </li>
-          ))}
-        </ul>
-      )}
-      <Form form={form}>
-        <label>Message <input value={form.data.text} onInput={event => form.setData("text", event.target.value)} /></label>
-        <button disabled={form.pending}>Add message</button>
-      </Form>
-    </main>
-  );
-}
+${body}
 `;
 	}
 }
+function getMessagesDemo(framework) {
+	const empty = `<p class="empty-state">
+  No messages yet. Run <code>void db seed</code> to load the sample row from <code>db/seed.ts</code>.
+</p>`;
+	const content = {
+		react: `{messages.length === 0 ? (
+${indent(empty, 2)}
+) : (
+  <ul class="messages">
+    {messages.map((message) => (
+      <li key={message.id}>
+        <strong>{message.text}</strong>
+        <small>{String(message.createdAt)}</small>
+      </li>
+    ))}
+  </ul>
+)}
+<Form form={form} className="message-form">
+  <label htmlFor="message-text">Message</label>
+  <div class="message-fields">
+    <input id="message-text" name="text" value={form.data.text} onChange={(event) => form.setData("text", event.target.value)} required maxLength={1000} />
+    <button type="submit" disabled={form.pending}>Add message</button>
+  </div>
+</Form>`,
+		vue: `<template v-if="messages.length === 0">
+${indent(empty, 2)}
+</template>
+<ul v-else class="messages">
+  <li v-for="message in messages" :key="message.id">
+    <strong>{{ message.text }}</strong>
+    <small>{{ String(message.createdAt) }}</small>
+  </li>
+</ul>
+<Form :form="form" class="message-form">
+  <label for="message-text">Message</label>
+  <div class="message-fields">
+    <input id="message-text" name="text" v-model="form.data.text" required maxlength="1000" />
+    <button type="submit" :disabled="form.pending">Add message</button>
+  </div>
+</Form>`,
+		svelte: `{#if messages.length === 0}
+${indent(empty, 2)}
+{:else}
+  <ul class="messages">
+    {#each messages as message (message.id)}
+      <li>
+        <strong>{message.text}</strong>
+        <small>{String(message.createdAt)}</small>
+      </li>
+    {/each}
+  </ul>
+{/if}
+<Form {form} class="message-form">
+  <label for="message-text">Message</label>
+  <div class="message-fields">
+    <input id="message-text" name="text" bind:value={form.data.text} required maxlength={1000} />
+    <button type="submit" disabled={form.pending}>Add message</button>
+  </div>
+</Form>`,
+		solid: `<Show when={props.messages.length > 0} fallback={
+${indent(empty, 2)}
+}>
+  <ul class="messages">
+    <For each={props.messages}>{(message) => (
+      <li>
+        <strong>{message.text}</strong>
+        <small>{String(message.createdAt)}</small>
+      </li>
+    )}</For>
+  </ul>
+</Show>
+<Form form={form} class="message-form">
+  <label for="message-text">Message</label>
+  <div class="message-fields">
+    <input id="message-text" name="text" value={form.data.text} onInput={(event) => form.setData("text", event.currentTarget.value)} required maxLength={1000} />
+    <button type="submit" disabled={form.pending}>Add message</button>
+  </div>
+</Form>`
+	}[framework];
+	return `<section class="starter-demo" aria-labelledby="messages-title">
+  <div class="demo-content">
+    <h2 id="messages-title">Messages</h2>
+${indent(content, 4)}
+  </div>
+</section>`;
+}
+function indent(source, spaces) {
+	return source.split("\n").map((line) => " ".repeat(spaces) + line).join("\n");
+}
 //#endregion
 //#region src/cli/init-vite-plus.ts
 /** Keep every Vite consumer on the core used by the selected Vite+ toolchain. */
@@ -2408,18 +2428,28 @@ export const posts = sqliteTable("posts", {
 });
 `;
 }
+function demoFiles(root) {
+	const paths = readProjectPaths(root);
+	return {
+		schema: paths.schemaFile,
+		route: join(paths.routesDir, "api", "posts.ts"),
+		client: join(paths.ssrDir, "demo.ts")
+	};
+}
 /**
 * Scaffolds the "SQL → types → handler → fetch" demo into an existing project.
 * `setupExistingProject` has already declared `void` in `package.json`.
+* The caller skips the demo when any of its files exists, so these writes never replace user code.
 */
 function scaffoldDemo(root, dialect) {
 	const devCommand = getDevCommand(root);
 	const paths = readProjectPaths(root);
+	const files = demoFiles(root);
 	mkdirSync(paths.dbDir, { recursive: true });
-	writeFileSync(paths.schemaFile, demoSchemaSource(dialect));
+	writeFileSync(files.schema, demoSchemaSource(dialect));
 	log.step("Created db/schema.ts");
 	mkdirSync(join(paths.routesDir, "api"), { recursive: true });
-	writeFileSync(join(paths.routesDir, "api", "posts.ts"), `import { defineHandler } from "void";
+	writeFileSync(files.route, `import { defineHandler } from "void";
 import { db } from "void/db";
 import { posts } from "@schema";
 
@@ -2431,7 +2461,7 @@ export const GET = defineHandler(async () => {
 	log.step("Created routes/api/posts.ts");
 	ensureProjectTsconfig(root, void 0, true, true, { paths });
 	mkdirSync(paths.ssrDir, { recursive: true });
-	writeFileSync(join(paths.ssrDir, "demo.ts"), `import { fetch } from "void/client";
+	writeFileSync(files.client, `import { fetch } from "void/client";
 
 // Fully typed: response type is inferred from the GET handler's return type,
 // which is derived from the migration schema. No manual types needed.
@@ -2569,8 +2599,13 @@ async function runInitCommand(root, initArgs) {
 		linkSkillsForSpecificAgents(root, agents);
 	} else log.info("Bundled Void docs: node_modules/void/docs/");
 	if (!targeted && !framework) {
+		const existingDemoFiles = Object.values(demoFiles(root)).filter((file) => existsSync(file));
 		if (didScaffoldStarter || state.hasRoutes || state.hasMigrations || state.hasPages) log.info("Project already has pages, routes, or migrations, skipping demo");
-		else {
+		else if (hasDrizzleSchema(root)) log.info("Project already has a database schema, skipping demo");
+		else if (existingDemoFiles.length > 0) {
+			const names = existingDemoFiles.map((file) => relative(root, file)).join(", ");
+			log.info(`Project already has ${names}, skipping demo`);
+		} else {
 			const scaffold = await confirm({ message: "Scaffold demo code? (migration + API route + frontend fetch)" });
 			if (isCancel(scaffold)) {
 				cancel("Setup cancelled.");

package/dist/{link-Ddmod1dZ.mjs → link-Dllip08S.mjs}

@@ -1,9 +1,9 @@
 import { r as readProjectConfig, t as attachSelectedPlatform, u as writeProjectConfig } from "./project-rqDnVsJN.mjs";
 import { c as getToken, s as getSiteDomain } from "./auth-B6iOCjKI.mjs";
 import { H as outro, L as log, O as cancel } from "./dist-Cor9XGoz.mjs";
-import { r as PlatformClient } from "./client-BEkdj1kx.mjs";
+import { r as PlatformClient } from "./client-B3LnB_bE.mjs";
 import { f as import_picocolors, m as printSuccess } from "./output-BpgYODYx.mjs";
-import { a as promptProjectSelection, r as promptAndCreateProject } from "./create-project-DV71ol5d.mjs";
+import { a as promptProjectSelection, r as promptAndCreateProject } from "./create-project-Bxd02EHN.mjs";
 import { a as resolveProjectBySlug } from "./resolve-project-Xoi6eTWY.mjs";
 //#region src/cli/link.ts
 function projectLabel(slug, root, url) {

package/dist/{list-MogaugiO.mjs → list-BYRP6am0.mjs}

@@ -1,7 +1,7 @@
 import { n as readDeploymentPlatform, r as readProjectConfig } from "./project-rqDnVsJN.mjs";
 import { c as getToken } from "./auth-B6iOCjKI.mjs";
 import { H as outro, L as log } from "./dist-Cor9XGoz.mjs";
-import { r as PlatformClient } from "./client-BEkdj1kx.mjs";
+import { r as PlatformClient } from "./client-B3LnB_bE.mjs";
 import { _ as tablePrefix, c as formatRelativeTime, f as import_picocolors, h as sanitizeTerminalText, i as dim, o as formatCount } from "./output-BpgYODYx.mjs";
 import { a as resolveProjectBySlug } from "./resolve-project-Xoi6eTWY.mjs";
 //#region src/cli/list.ts
@@ -42,7 +42,7 @@ async function runListCommand(root, slug) {
 }
 async function showCloudflareDeployments(root, slug) {
 	if (slug) throw new Error("project: A project name selects a Void platform project and is not used for direct Cloudflare apps.");
-	const { readCloudflareWorkerStatus, resolveCloudflareOperationContext } = await import("./cloudflare-operations-DsSaw2BT.mjs");
+	const { readCloudflareWorkerStatus, resolveCloudflareOperationContext } = await import("./cloudflare-operations-BtulCNOg.mjs");
 	const status = await readCloudflareWorkerStatus(resolveCloudflareOperationContext(root));
 	if (status.versions.length === 0) {
 		outro(`No deployments for ${status.workerName}.`);

package/dist/{live-Bt8Y_0bg.d.mts → live-BllfDuzA.d.mts}

@@ -1,5 +1,5 @@
-import { r as AuthUser } from "./auth-DkcFflXV.mjs";
-import { a as CloudEnv, r as CloudContext } from "./handler-BbkSPzGF.mjs";
+import { r as AuthUser } from "./auth-g2TQbDLD.mjs";
+import { a as CloudEnv, r as CloudContext } from "./handler-BHktmuTL.mjs";
 //#region src/runtime/live.d.ts
 type MaybePromise<T> = T | Promise<T>;
 type LiveControlRequest = {

package/dist/{local-d1-BHBnKWRb.mjs → local-d1-CAwAs9GH.mjs}

@@ -1,5 +1,5 @@
 import { a as join, c as resolve, i as isAbsolute } from "./dist-ipQi0Q8y.mjs";
-import { b as readRootWranglerConfig } from "./wrangler-F96NnLyb.mjs";
+import { b as readRootWranglerConfig } from "./wrangler-I-scB_1t.mjs";
 import { r as getMiniflareDatabasePath } from "./runner-3uGC-oLF.mjs";
 import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
 import { createHash } from "node:crypto";

package/dist/login-BAPmYnb7.mjs

@@ -0,0 +1 @@
+export { r as selectPlatformLoginMethod } from "./login-PcFy5mlC.mjs";