@atom.io/template-spa-astro-ssr 0.0.3 → 0.0.5

package/.reylo.yaml

@@ -1 +1 @@
-direct_url: file:./drafts.sqlite
+direct_url: file:./inventory.sqlite

package/README.md

@@ -1,6 +1,6 @@
 # SPA + Astro SSR
 
-A starter with module-scoped atom definitions, server-rendered Astro islands, and typed database refreshes. It uses atom.io, @atom.io/spa, resumability/astro, Reylo over node:sqlite, and tRPC. Requires Node 24.12 or newer and TypeScript 7.1's content mappers (currently beta).
+A starter with module-scoped atom definitions, server-rendered Astro islands, and an inventory workflow with editable stock counts, persistent saves, and fresh database reads. It uses atom.io, @atom.io/spa, resumability/astro, Reylo over node:sqlite, and tRPC. Requires Node 24.12 or newer and TypeScript 7.1's content mappers (currently beta).
 
 ## Run
 
@@ -26,25 +26,25 @@ pnpm --filter @atom.io/template-spa-astro-ssr dev
 
 ```
 
-The workspace uses local unpublished packages; a packed release replaces workspace dependency ranges with published versions. Development, build, and typecheck commands initialize drafts.sqlite from schema.sql and insert missing example rows without overwriting edits. Reylo checks queries against that schema using .reylo.yaml. The generated database is ignored by Git and excluded from the package.
+The workspace uses local unpublished packages; a packed release replaces workspace dependency ranges with published versions. Development, build, and typecheck commands initialize inventory.sqlite from schema.sql and insert missing example rows without overwriting edits. Reylo checks queries against that schema using .reylo.yaml. The generated database is ignored by Git and excluded from the package.
 
-This is an on-demand Node server application. The Astro Node adapter serves both pages and the tRPC endpoint. Start production from the template directory so it can find drafts.sqlite; supply persistent storage for that file when deploying. Initialize the database before starting a new deployment.
+This is an on-demand Node server application. The Astro Node adapter serves both pages and the tRPC endpoint. Start production from the template directory so it can find inventory.sqlite; supply persistent storage for that file when deploying. Initialize the database before starting a new deployment.
 
 ## Rendering and caching
 
-The starter uses on-demand SSR with Astro’s built-in memoryCache provider. The public drafts page has a 60-second TTL and no stale-while-revalidate window. A cache miss reads SQLite in a request-owned store and caches the complete HTML response, including its resumption sidecar. Hits reuse that snapshot; the first request after expiry renders a new one. There are no prerendered pages. The tRPC endpoint is outside the cached route rule and returns Cache-Control: no-store, so resets always read the database.
+The starter uses on-demand SSR with Astro’s built-in memoryCache provider. The public stock-counting page has a 60-second TTL and no stale-while-revalidate window. A cache miss reads SQLite in a request-owned store and caches the complete HTML response, including its resumption seeds. Hits reuse that snapshot; the first request after expiry renders a new one. There are no prerendered pages. The tRPC endpoint is outside the cached route rule and returns Cache-Control: no-store, so resets always read the database.
 
 The cache belongs to one server process: it is lost on restart and is not shared across replicas. This is a small, self-contained deployment default; choose an infrastructure-backed provider when multiple instances need shared caching or invalidation. Astro disables caching in development. Build and preview the template to exercise the production cache.
 
-This template’s example data is public. When adapting it, cache the complete HTML response together with its resumption sidecar. The markup and initial values must come from the same render. Choose a freshness window and invalidation policy that match the data; do not cache a live atom.io store or reuse it across requests. Cache only responses whose data can be shared by everyone using the cache entry. Personalized snapshots need private caching or a correctly scoped cache key.
+This template’s example data is public. When adapting it, cache the complete HTML response together with its resumption seeds. The markup and initial values must come from the same render. Choose a freshness window and invalidation policy that match the data; do not cache a live atom.io store or reuse it across requests. Cache only responses whose data can be shared by everyone using the cache entry. Personalized snapshots need private caching or a correctly scoped cache key.
 
-The initial browser load consumes that snapshot without immediately refetching it. Expiring or invalidating the server cache affects future page loads, not an already running browser store. Keep the explicit reset/tRPC path fresh so Refresh from database can fetch the current row. ClientRouter navigation continues to preserve live browser state rather than replacing edits with another server snapshot.
+The initial browser load consumes that snapshot without immediately refetching it. Expiring or invalidating the server cache affects future page loads, not an already running browser store. Keep the explicit reset/tRPC path fresh so Reload from database can fetch the current row. ClientRouter navigation continues to preserve live browser state rather than replacing edits with another server snapshot.
 
-SSG is also compatible with resumption: the sidecar is produced during the build and remains that snapshot until the next deployment. Use it for routes whose freshness can follow deployments, while retaining on-demand API routes for resets. Astro's [on-demand rendering](https://docs.astro.build/en/guides/on-demand-rendering/) and [route caching](https://docs.astro.build/en/guides/caching/) documentation describe the route-level controls and cache providers.
+SSG is also compatible with resumption: the seed data is produced during the build and remains that snapshot until the next deployment. Use it for routes whose freshness can follow deployments, while retaining on-demand API routes for resets. Astro's [on-demand rendering](https://docs.astro.build/en/guides/on-demand-rendering/) and [route caching](https://docs.astro.build/en/guides/caching/) documentation describe the route-level controls and cache providers.
 
 ## Try it
 
-Both views use the same two module-scoped document tokens in one browser store and resumption scope. The initial notes come directly from SQLite during SSR. The first island hydrates its existing DOM without making an RPC request. Type into a draft before scrolling to the second view: that delayed island mounts fresh and immediately shows the edit. Typing or refreshing a document updates both views; other documents retain their values. Refresh from database resets the atom, whose client closure calls tRPC for the latest row. The returned revision identifies that read.
+Both views use the same two module-scoped product tokens in one browser store and resumption scope. The initial stock counts come directly from SQLite during SSR. The first island hydrates its existing DOM without making an RPC request. Change a quantity before scrolling to the second view: that delayed island mounts fresh and immediately shows the edit. Editing, saving, or reloading a product updates both views; other products retain their values. Reload from database resets the atom, whose client closure calls tRPC for the latest row. Saving checks the database revision and increments it. If another count has been saved since yours loaded, the mutation rejects the stale write; reload before trying again.
 
 Visit How it works and return. Astro's ClientRouter removes the old DOM and SPA releases the island subscriptions, while the application store and resumption scope stay alive. Returning islands render fresh from those live values, so an incoming server response cannot overwrite your edits. Refresh explicitly to fetch new server data. A full page load starts a new application from SSR again. Shared client requests receive the application scope's AbortSignal; navigation keeps that scope alive, while a full page exit aborts it. Resetting does not cancel earlier requests by itself.
 
@@ -71,29 +71,57 @@ export default defineConfig({
 
 ```
 
-SPA compiles the .spa.tsx components. Resumability removes inline server closures before browser import analysis, including their dynamic imports. Reylo compiles SQL imports on the server. The browser imports the tRPC router only as a type: no database module, query, or router implementation reaches executable browser code.
+SPA compiles the .tsx components. Resumability removes inline server closures before browser import analysis, including their dynamic imports. Reylo compiles SQL imports on the server. The browser imports the tRPC router only as a type: no database module, query, or router implementation reaches executable browser code.
 
-## One query, two entry points
+## Read and save inventory
 
 ```sql
-SELECT id, title, body FROM drafts WHERE id = :id;
+SELECT id, sku, name, stock, revision FROM products WHERE id = :id;
 
 ```
 
 ```ts
-import { randomUUID } from "node:crypto"
 import { DatabaseSync } from "node:sqlite"
 
-import readDraftQuery from "./read-draft.sql"
+import { TRPCError } from "@trpc/server"
 
-/** Both SSR and tRPC use this function and its inferred query result. */
-// oxlint-disable-next-line typescript/explicit-module-boundary-types -- Infer the response from Reylo's content-mapped SQL type; tsc verifies the full RPC contract.
-export function readDraft(id: number) {
-	const database = new DatabaseSync(`drafts.sqlite`, { readOnly: true })
+import readProductQuery from "./read-product.sql"
+
+/** SSR and tRPC share the same inferred query result. */
+// oxlint-disable-next-line typescript/explicit-module-boundary-types -- Infer Reylo's SQL result; the type tests verify the transport contract.
+export function readProduct(id: number) {
+	const database = new DatabaseSync(`inventory.sqlite`, { readOnly: true })
+	try {
+		const product = readProductQuery.runSync(database, { id })
+		if (!product)
+			throw new TRPCError({
+				code: `NOT_FOUND`,
+				message: `Product ${id} does not exist`,
+			})
+		return product
+	} finally {
+		database.close()
+	}
+}
+
+// oxlint-disable-next-line typescript/explicit-module-boundary-types -- Preserve the query's inferred return type through the mutation.
+export function saveStock(id: number, stock: number, revision: number) {
+	const database = new DatabaseSync(`inventory.sqlite`)
 	try {
-		const draft = readDraftQuery.runSync(database, { id })
-		if (!draft) throw new Error(`Draft ${id} does not exist`)
-		return { ...draft, revision: randomUUID() }
+		database.exec(`BEGIN IMMEDIATE`)
+		const result = database
+			.prepare(
+				`UPDATE products SET stock = ?, revision = revision + 1 WHERE id = ? AND revision = ?`,
+			)
+			.run(stock, id, revision)
+		if (!result.changes)
+			throw new TRPCError({
+				code: `CONFLICT`,
+				message: `Stock changed since you loaded it. Reload before saving.`,
+			})
+		const product = readProductQuery.runSync(database, { id })!
+		database.exec(`COMMIT`)
+		return product
 	} finally {
 		database.close()
 	}
@@ -101,20 +129,29 @@ export function readDraft(id: number) {
 
 ```
 
-SSR calls readDraft directly. The tRPC procedure validates its input and calls the same function:
+SSR calls readProduct directly. Saving uses a transaction and a conditional revision update to prevent lost stock counts. The tRPC procedure validates its input and calls the same function:
 
 ```ts
 import { initTRPC } from "@trpc/server"
 import { z } from "zod"
 
-import { readDraft } from "./drafts.ts"
+import { readProduct, saveStock } from "./inventory.ts"
 
 const t = initTRPC.create()
 export const appRouter = t.router({
-	drafts: t.router({
+	inventory: t.router({
 		get: t.procedure
 			.input(z.object({ id: z.number().int().positive() }))
-			.query(({ input }) => readDraft(input.id)),
+			.query(({ input }) => readProduct(input.id)),
+		setStock: t.procedure
+			.input(
+				z.object({
+					id: z.number().int().positive(),
+					stock: z.number().int().nonnegative(),
+					revision: z.number().int().positive(),
+				}),
+			)
+			.mutation(({ input }) => saveStock(input.id, input.stock, input.revision)),
 	}),
 })
 export type AppRouter = typeof appRouter
@@ -129,25 +166,33 @@ Reylo infers the row type from SQL and the database schema. The return type flow
 import { atomFamily, type Loadable } from "atom.io"
 import { resumable } from "resumability"
 
-import { api, type Draft } from "./api.ts"
+import { api, type Product } from "./api.ts"
 
-export const documentIds = [1, 2] as const
+export const productIds = [1, 2] as const
 
-export const draftAtoms = atomFamily<Loadable<Draft>, number, Error>({
-	key: `draft`,
+export const productAtoms = atomFamily<Loadable<Product>, number, Error>({
+	key: `product`,
 	default: (id) =>
 		resumable({
-			key: [`draft`, id],
+			key: [`product`, id],
 			server: async ({ signal }) => {
-				const { readDraft } = await import(`./server/drafts.ts`)
+				const { readProduct } = await import(`./server/inventory.ts`)
 				signal.throwIfAborted()
-				return readDraft(id)
+				return readProduct(id)
 			},
-			client: ({ signal }) => api.drafts.get.query({ id }, { signal }),
+			client: ({ signal }) => api.inventory.get.query({ id }, { signal }),
 		}),
 	catch: [Error],
 })
 
+export const saveStatusAtoms = atomFamily<
+	{ saving: boolean; message: string },
+	number
+>({
+	key: `saveStatus`,
+	default: { saving: false, message: `` },
+})
+
 ```
 
 The family key supplies the query input and resumability key. Atom definitions live on the module graph. All browser views share values; each SSR request has its own store. First browser reads consume the seed. Subsequent defaults use tRPC, with errors available through useLoadable for retry.
@@ -156,73 +201,42 @@ The family key supplies the query input and resumability key. Atom definitions l
 
 ```astro
 ---
-import Resumption from "resumability/Resumption.astro"
-import Drafts from "../Drafts.spa.tsx"
+import Inventory from "../Inventory.tsx"
 import Page from "../layouts/Page.astro"
 ---
-<Page title="Your drafts">
-	<Resumption>{() => (
-		<>
-			<header class="intro">
-				<p class="eyebrow">A server head start</p>
-				<h1>Pick up where the server left off.</h1>
-				<p>
-					These notes arrive from SQLite. Edit one, or refresh it from the
-					database. Both views share the same atom.io state.
-				</p>
-			</header>
-			<section class="workspace" aria-labelledby="work-heading">
-				<h2 id="work-heading">Your editor <small>Loads immediately</small></h2>
-				<Drafts id="work" client:load />
-			</section>
-			<section class="workspace" aria-labelledby="personal-heading">
-				<h2 id="personal-heading">
-					Another view <small>Same shared documents · loads when visible</small>
-				</h2><Drafts id="personal" client:visible />
-			</section>
-		</>
-	)}</Resumption>
+<Page title="Stock count">
+	<header class="intro">
+		<p class="eyebrow">Stockroom</p>
+		<h1>Count what’s on the shelf.</h1>
+		<p>
+			Update the count after checking a shelf, then save the new inventory. Both
+			views share your counts, including changes you haven’t saved yet.
+		</p>
+	</header>
+	<section class="workspace" aria-labelledby="work-heading">
+		<h2 id="work-heading">
+			Morning stock count <small>Loads immediately</small>
+		</h2>
+		<Inventory id="work" client:load />
+	</section>
+	<section class="workspace" aria-labelledby="personal-heading">
+		<h2 id="personal-heading">
+			Packing station <small>Same shared inventory · loads when visible</small>
+		</h2><Inventory id="personal" client:visible />
+	</section>
 </Page>
 
 ```
 
-The first workspace uses client:load; the second uses client:visible. Both render their initial data on the server. Deferred child functions keep Astro's eager framework-slot evaluation inside Resumption's async collection scope. One Resumption wrapper covers both views and collects each document once. Its sidecar precedes all the islands, so either can activate first. Keep the wrapper around page content inside the HTML body, not around the document itself.
-
-Drafts.prepareStore initializes the store already selected by SPA:
-
-```ts
-import type { AstroStorePreparation } from "@atom.io/spa/astro"
-import { getFromStore } from "atom.io/internal"
-import { createResumption } from "resumability/client"
-import { documentIds, draftAtoms } from "./model.ts"
-
-export const prepareDrafts: AstroStorePreparation = async (
-	store,
-	_props,
-	{ element, application },
-) => {
-	if (element) {
-		const scope = application.get(createResumption, () => {
-			const created = createResumption()
-			application.onCleanup(created.dispose)
-			store.runDefault = (run) =>
-				created.run(run, { resume: application.canResume })
-			return created
-		})
-		scope.add(element.closest(`astro-resumption`)!)
-	}
-	await Promise.all(documentIds.map((id) => getFromStore(store, draftAtoms, id)))
-}
-
-```
+The first workspace uses client:load; the second uses client:visible. Both render their initial data on the server. Resumability owns the request collection and supplies SPA's renderer with completed values to attach to each island's HTML. A later island can hydrate first even when it reused the earlier island's cached state on the server. No wrapper or deferred child function is needed.
 
-On the server, Resumption's async collection supplies the scope. In the browser, application.get creates one resumption scope and registers its cleanup once. Each preparation adds the surrounding sidecar; consumed keys cannot be reseeded. Store.runDefault activates that scope whenever a default executes, including lazy family members and transactional resets. Application.canResume controls whether unread seeds may initialize client-capable defaults: after an edit or navigation, those defaults use the client path. The callback awaits the initial reads before rendering or hydration. There are no model factories, model props, or store-to-model registries.
+With both integrations installed, SPA automatically waits for async state read by the island on the server. Browser defaults use resumability's host scope without changing the shared store's default evaluator. No component preparation callback or preload list is needed. Each island imports its own seed attributes, and consumed keys cannot be reseeded. After an edit or navigation, unread client-capable defaults use the client producer instead of stale initial data.
 
-SPA owns the request lifetime through the end of streaming and the browser application lifetime across navigation. Individual islands own only their DOM and subscriptions. Shared preparation resources survive an individual island failing or unmounting. Resumability stays independent of SPA, atom.io, Reylo, and tRPC. Treat all sidecar data as public browser-visible data.
+Resumability owns its collection through the end of streaming and the browser resumption scope across navigation. SPA owns request-local stores and the browser application; individual shared islands own only their DOM and subscriptions. Shared data resources survive an individual island failing or unmounting. Private stores bind a private resumption scope so their pending work ends with the island. Resumability stays independent of SPA, atom.io, Reylo, and tRPC, and also supports plain Astro database constants without a state library. Treat all seed data as public browser-visible data.
 
 ## Validation
 
-The browser check runs against both the production Node server and the Astro dev server. It inspects real SSR content, verifies that initial hydration preserves textarea nodes and IDs while a delayed island replaces stale DOM, and asserts zero RPC requests during hydration. In production, it verifies byte-identical cached HTML and sidecars after SQLite changes, waits for the real 60-second TTL to expire, and checks that a new snapshot is rendered and cached. Development checks verify fresh SSR instead. Repeated resets fetch changed rows through tRPC with no-store headers, including after resuming an older cached snapshot; resets do not rewrite the page cache. It also checks shared document state, client:load and client:visible scheduling, fresh mounts and preserved edits after navigation, and removal of server modules from browser scripts. Browser exceptions fail the check. Type tests reject invalid RPC input and verify the inferred response fields.
+The browser check runs against both the production Node server and the Astro dev server. It inspects real SSR content, verifies that initial hydration preserves quantity inputs and IDs while a delayed island replaces stale DOM, and asserts zero RPC requests during hydration. A full reload activates the later server island first and verifies that both hydrate their original nodes using their own seeds. In production, it verifies byte-identical cached HTML and seed attributes after SQLite changes, waits for the real 60-second TTL to expire, and checks that a new snapshot is rendered and cached. Development checks verify fresh SSR instead. Repeated resets fetch changed rows through tRPC with no-store headers, including after resuming an older cached snapshot; resets do not rewrite the page cache. It also checks shared product state, client:load and client:visible scheduling, fresh mounts and preserved edits after navigation, successful saves, rejection of competing stock counts, and removal of server modules from browser scripts. Browser exceptions fail the check. Type tests reject invalid RPC input and verify the inferred response fields.
 
 ## License
 

package/README.mdx

@@ -2,15 +2,14 @@ import Workspace from "./exhibits/workspace.sh" with { type: "code" };
 import Run from "./exhibits/run.sh" with { type: "code" };
 import Config from "./astro.config.ts" with { type: "code" };
 import Islands from "./src/pages/index.astro" with { type: "code" };
-import Model from "./src/model.ts" with { type: "code" };
-import Prepare from "./src/prepare-drafts.ts" with { type: "code" };
-import Query from "./src/server/read-draft.sql" with { type: "code" };
-import ReadDraft from "./src/server/drafts.ts" with { type: "code" };
+import State from "./src/state.ts" with { type: "code" };
+import Query from "./src/server/read-product.sql" with { type: "code" };
+import ReadProduct from "./src/server/inventory.ts" with { type: "code" };
 import Router from "./src/server/router.ts" with { type: "code" };
 
 # SPA + Astro SSR
 
-A starter with module-scoped atom definitions, server-rendered Astro islands, and typed database refreshes. It uses atom.io, @atom.io/spa, resumability/astro, Reylo over node:sqlite, and tRPC. Requires Node 24.12 or newer and TypeScript 7.1's content mappers (currently beta).
+A starter with module-scoped atom definitions, server-rendered Astro islands, and an inventory workflow with editable stock counts, persistent saves, and fresh database reads. It uses atom.io, @atom.io/spa, resumability/astro, Reylo over node:sqlite, and tRPC. Requires Node 24.12 or newer and TypeScript 7.1's content mappers (currently beta).
 
 ## Run
 
@@ -20,25 +19,25 @@ Inside the atom.io workspace:
 
 <Workspace />
 
-The workspace uses local unpublished packages; a packed release replaces workspace dependency ranges with published versions. Development, build, and typecheck commands initialize drafts.sqlite from schema.sql and insert missing example rows without overwriting edits. Reylo checks queries against that schema using .reylo.yaml. The generated database is ignored by Git and excluded from the package.
+The workspace uses local unpublished packages; a packed release replaces workspace dependency ranges with published versions. Development, build, and typecheck commands initialize inventory.sqlite from schema.sql and insert missing example rows without overwriting edits. Reylo checks queries against that schema using .reylo.yaml. The generated database is ignored by Git and excluded from the package.
 
-This is an on-demand Node server application. The Astro Node adapter serves both pages and the tRPC endpoint. Start production from the template directory so it can find drafts.sqlite; supply persistent storage for that file when deploying. Initialize the database before starting a new deployment.
+This is an on-demand Node server application. The Astro Node adapter serves both pages and the tRPC endpoint. Start production from the template directory so it can find inventory.sqlite; supply persistent storage for that file when deploying. Initialize the database before starting a new deployment.
 
 ## Rendering and caching
 
-The starter uses on-demand SSR with Astro’s built-in memoryCache provider. The public drafts page has a 60-second TTL and no stale-while-revalidate window. A cache miss reads SQLite in a request-owned store and caches the complete HTML response, including its resumption sidecar. Hits reuse that snapshot; the first request after expiry renders a new one. There are no prerendered pages. The tRPC endpoint is outside the cached route rule and returns Cache-Control: no-store, so resets always read the database.
+The starter uses on-demand SSR with Astro’s built-in memoryCache provider. The public stock-counting page has a 60-second TTL and no stale-while-revalidate window. A cache miss reads SQLite in a request-owned store and caches the complete HTML response, including its resumption seeds. Hits reuse that snapshot; the first request after expiry renders a new one. There are no prerendered pages. The tRPC endpoint is outside the cached route rule and returns Cache-Control: no-store, so resets always read the database.
 
 The cache belongs to one server process: it is lost on restart and is not shared across replicas. This is a small, self-contained deployment default; choose an infrastructure-backed provider when multiple instances need shared caching or invalidation. Astro disables caching in development. Build and preview the template to exercise the production cache.
 
-This template’s example data is public. When adapting it, cache the complete HTML response together with its resumption sidecar. The markup and initial values must come from the same render. Choose a freshness window and invalidation policy that match the data; do not cache a live atom.io store or reuse it across requests. Cache only responses whose data can be shared by everyone using the cache entry. Personalized snapshots need private caching or a correctly scoped cache key.
+This template’s example data is public. When adapting it, cache the complete HTML response together with its resumption seeds. The markup and initial values must come from the same render. Choose a freshness window and invalidation policy that match the data; do not cache a live atom.io store or reuse it across requests. Cache only responses whose data can be shared by everyone using the cache entry. Personalized snapshots need private caching or a correctly scoped cache key.
 
-The initial browser load consumes that snapshot without immediately refetching it. Expiring or invalidating the server cache affects future page loads, not an already running browser store. Keep the explicit reset/tRPC path fresh so Refresh from database can fetch the current row. ClientRouter navigation continues to preserve live browser state rather than replacing edits with another server snapshot.
+The initial browser load consumes that snapshot without immediately refetching it. Expiring or invalidating the server cache affects future page loads, not an already running browser store. Keep the explicit reset/tRPC path fresh so Reload from database can fetch the current row. ClientRouter navigation continues to preserve live browser state rather than replacing edits with another server snapshot.
 
-SSG is also compatible with resumption: the sidecar is produced during the build and remains that snapshot until the next deployment. Use it for routes whose freshness can follow deployments, while retaining on-demand API routes for resets. Astro's [on-demand rendering](https://docs.astro.build/en/guides/on-demand-rendering/) and [route caching](https://docs.astro.build/en/guides/caching/) documentation describe the route-level controls and cache providers.
+SSG is also compatible with resumption: the seed data is produced during the build and remains that snapshot until the next deployment. Use it for routes whose freshness can follow deployments, while retaining on-demand API routes for resets. Astro's [on-demand rendering](https://docs.astro.build/en/guides/on-demand-rendering/) and [route caching](https://docs.astro.build/en/guides/caching/) documentation describe the route-level controls and cache providers.
 
 ## Try it
 
-Both views use the same two module-scoped document tokens in one browser store and resumption scope. The initial notes come directly from SQLite during SSR. The first island hydrates its existing DOM without making an RPC request. Type into a draft before scrolling to the second view: that delayed island mounts fresh and immediately shows the edit. Typing or refreshing a document updates both views; other documents retain their values. Refresh from database resets the atom, whose client closure calls tRPC for the latest row. The returned revision identifies that read.
+Both views use the same two module-scoped product tokens in one browser store and resumption scope. The initial stock counts come directly from SQLite during SSR. The first island hydrates its existing DOM without making an RPC request. Change a quantity before scrolling to the second view: that delayed island mounts fresh and immediately shows the edit. Editing, saving, or reloading a product updates both views; other products retain their values. Reload from database resets the atom, whose client closure calls tRPC for the latest row. Saving checks the database revision and increments it. If another count has been saved since yours loaded, the mutation rejects the stale write; reload before trying again.
 
 Visit How it works and return. Astro's ClientRouter removes the old DOM and SPA releases the island subscriptions, while the application store and resumption scope stay alive. Returning islands render fresh from those live values, so an incoming server response cannot overwrite your edits. Refresh explicitly to fetch new server data. A full page load starts a new application from SSR again. Shared client requests receive the application scope's AbortSignal; navigation keeps that scope alive, while a full page exit aborts it. Resetting does not cancel earlier requests by itself.
 
@@ -46,15 +45,15 @@ Visit How it works and return. Astro's ClientRouter removes the old DOM and SPA
 
 <Config />
 
-SPA compiles the .spa.tsx components. Resumability removes inline server closures before browser import analysis, including their dynamic imports. Reylo compiles SQL imports on the server. The browser imports the tRPC router only as a type: no database module, query, or router implementation reaches executable browser code.
+SPA compiles the .tsx components. Resumability removes inline server closures before browser import analysis, including their dynamic imports. Reylo compiles SQL imports on the server. The browser imports the tRPC router only as a type: no database module, query, or router implementation reaches executable browser code.
 
-## One query, two entry points
+## Read and save inventory
 
 <Query />
 
-<ReadDraft />
+<ReadProduct />
 
-SSR calls readDraft directly. The tRPC procedure validates its input and calls the same function:
+SSR calls readProduct directly. Saving uses a transaction and a conditional revision update to prevent lost stock counts. The tRPC procedure validates its input and calls the same function:
 
 <Router />
 
@@ -62,7 +61,7 @@ Reylo infers the row type from SQL and the database schema. The return type flow
 
 ## Module-scoped atom defaults
 
-<Model />
+<State />
 
 The family key supplies the query input and resumability key. Atom definitions live on the module graph. All browser views share values; each SSR request has its own store. First browser reads consume the seed. Subsequent defaults use tRPC, with errors available through useLoadable for retry.
 
@@ -70,19 +69,15 @@ The family key supplies the query input and resumability key. Atom definitions l
 
 <Islands />
 
-The first workspace uses client:load; the second uses client:visible. Both render their initial data on the server. Deferred child functions keep Astro's eager framework-slot evaluation inside Resumption's async collection scope. One Resumption wrapper covers both views and collects each document once. Its sidecar precedes all the islands, so either can activate first. Keep the wrapper around page content inside the HTML body, not around the document itself.
+The first workspace uses client:load; the second uses client:visible. Both render their initial data on the server. Resumability owns the request collection and supplies SPA's renderer with completed values to attach to each island's HTML. A later island can hydrate first even when it reused the earlier island's cached state on the server. No wrapper or deferred child function is needed.
 
-Drafts.prepareStore initializes the store already selected by SPA:
+With both integrations installed, SPA automatically waits for async state read by the island on the server. Browser defaults use resumability's host scope without changing the shared store's default evaluator. No component preparation callback or preload list is needed. Each island imports its own seed attributes, and consumed keys cannot be reseeded. After an edit or navigation, unread client-capable defaults use the client producer instead of stale initial data.
 
-<Prepare />
-
-On the server, Resumption's async collection supplies the scope. In the browser, application.get creates one resumption scope and registers its cleanup once. Each preparation adds the surrounding sidecar; consumed keys cannot be reseeded. Store.runDefault activates that scope whenever a default executes, including lazy family members and transactional resets. Application.canResume controls whether unread seeds may initialize client-capable defaults: after an edit or navigation, those defaults use the client path. The callback awaits the initial reads before rendering or hydration. There are no model factories, model props, or store-to-model registries.
-
-SPA owns the request lifetime through the end of streaming and the browser application lifetime across navigation. Individual islands own only their DOM and subscriptions. Shared preparation resources survive an individual island failing or unmounting. Resumability stays independent of SPA, atom.io, Reylo, and tRPC. Treat all sidecar data as public browser-visible data.
+Resumability owns its collection through the end of streaming and the browser resumption scope across navigation. SPA owns request-local stores and the browser application; individual shared islands own only their DOM and subscriptions. Shared data resources survive an individual island failing or unmounting. Private stores bind a private resumption scope so their pending work ends with the island. Resumability stays independent of SPA, atom.io, Reylo, and tRPC, and also supports plain Astro database constants without a state library. Treat all seed data as public browser-visible data.
 
 ## Validation
 
-The browser check runs against both the production Node server and the Astro dev server. It inspects real SSR content, verifies that initial hydration preserves textarea nodes and IDs while a delayed island replaces stale DOM, and asserts zero RPC requests during hydration. In production, it verifies byte-identical cached HTML and sidecars after SQLite changes, waits for the real 60-second TTL to expire, and checks that a new snapshot is rendered and cached. Development checks verify fresh SSR instead. Repeated resets fetch changed rows through tRPC with no-store headers, including after resuming an older cached snapshot; resets do not rewrite the page cache. It also checks shared document state, client:load and client:visible scheduling, fresh mounts and preserved edits after navigation, and removal of server modules from browser scripts. Browser exceptions fail the check. Type tests reject invalid RPC input and verify the inferred response fields.
+The browser check runs against both the production Node server and the Astro dev server. It inspects real SSR content, verifies that initial hydration preserves quantity inputs and IDs while a delayed island replaces stale DOM, and asserts zero RPC requests during hydration. A full reload activates the later server island first and verifies that both hydrate their original nodes using their own seeds. In production, it verifies byte-identical cached HTML and seed attributes after SQLite changes, waits for the real 60-second TTL to expire, and checks that a new snapshot is rendered and cached. Development checks verify fresh SSR instead. Repeated resets fetch changed rows through tRPC with no-store headers, including after resuming an older cached snapshot; resets do not rewrite the page cache. It also checks shared product state, client:load and client:visible scheduling, fresh mounts and preserved edits after navigation, successful saves, rejection of competing stock counts, and removal of server modules from browser scripts. Browser exceptions fail the check. Type tests reject invalid RPC input and verify the inferred response fields.
 
 ## License
 

package/_gitignore

@@ -3,4 +3,4 @@ dist/
 .astro/
 .env
 test-results/
-drafts.sqlite*
+*.sqlite*

package/exhibits/PrivateInventory.tsx

@@ -0,0 +1,8 @@
+import type { SpaElement } from "@atom.io/spa"
+
+import Inventory from "../src/Inventory.tsx"
+
+export default function PrivateInventory(props: { id: string }): SpaElement {
+	return <Inventory id={props.id} />
+}
+PrivateInventory.isolate = true

package/exhibits/inventory-page.astro

@@ -0,0 +1,5 @@
+---
+import Inventory from "../src/Inventory.tsx"
+---
+
+<Inventory id="stock-count" client:load />

package/exhibits/private-inventory-page.astro

@@ -0,0 +1,5 @@
+---
+import PrivateInventory from "./PrivateInventory.tsx"
+---
+
+<PrivateInventory id="station-count" client:load />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atom.io/template-spa-astro-ssr",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Astro, SPA, and resumable atom defaults with SQLite server data.",
   "repository": {
     "type": "git",
@@ -22,13 +22,13 @@
     ".reylo.yaml"
   ],
   "dependencies": {
-    "@astrojs/node": "11.1.9",
-    "@atom.io/spa": "0.0.3",
-    "@trpc/client": "11.23.0",
-    "@trpc/server": "11.24.0",
-    "astro": "7.4.5",
-    "atom.io": "0.54.4",
-    "resumability": "0.0.1",
+    "@astrojs/node": "11.1.11",
+    "@atom.io/spa": "0.0.5",
+    "@trpc/client": "11.25.0",
+    "@trpc/server": "11.25.0",
+    "astro": "7.4.7",
+    "atom.io": "0.54.6",
+    "resumability": "0.0.2",
     "reylo": "0.7.0",
     "zod": "4.6.7"
   },
@@ -36,11 +36,11 @@
     "@reylosql/sqlite": "0.6.0",
     "@types/node": "26.6.6",
     "galley.md": "0.3.1",
-    "oxlint": "1.91.0",
-    "oxlint-tsgolint": "7.0.2005",
-    "playwright": "1.64.1",
-    "typescript": "7.1.0-dev.20261103.1",
-    "vite": "8.3.5"
+    "oxlint": "1.92.0",
+    "oxlint-tsgolint": "7.0.2006",
+    "playwright": "1.65.0",
+    "typescript": "7.1.0-dev.20261106.1",
+    "vite": "8.3.6"
   },
   "engines": {
     "node": ">=24.12.0"

package/schema.sql

@@ -1,5 +1,7 @@
-CREATE TABLE IF NOT EXISTS drafts (
+CREATE TABLE IF NOT EXISTS products (
  id INTEGER PRIMARY KEY,
- title TEXT NOT NULL,
- body TEXT NOT NULL
+ sku TEXT NOT NULL UNIQUE,
+ name TEXT NOT NULL,
+ stock INTEGER NOT NULL CHECK (stock >= 0),
+ revision INTEGER NOT NULL DEFAULT 1
 ) STRICT;

package/scripts/seed.ts

@@ -1,14 +1,14 @@
 import { readFileSync } from "node:fs"
 import { DatabaseSync } from "node:sqlite"
 
-const database = new DatabaseSync(`drafts.sqlite`)
+const database = new DatabaseSync(`inventory.sqlite`)
 try {
 	database.exec(readFileSync(new URL(`../schema.sql`, import.meta.url), `utf8`))
 	const insert = database.prepare(
-		`INSERT OR IGNORE INTO drafts (id, title, body) VALUES (?, ?, ?)`,
+		`INSERT OR IGNORE INTO products (id, sku, name, stock) VALUES (?, ?, ?, ?)`,
 	)
-	for (const id of [1, 2])
-		insert.run(id, `Draft ${id}`, `A note from SQLite for document ${id}.`)
+	insert.run(1, `COF-250`, `House blend · 250 g`, 24)
+	insert.run(2, `TEA-100`, `Breakfast tea · 100 g`, 18)
 } finally {
 	database.close()
 }