create-astrale-domain 0.3.0-beta.4 → 0.3.0-beta.6

package/dist/index.js

@@ -943,19 +943,7 @@ async function materializeGitignores(dir, frontend) {
       throw new Error(`Template is missing packaged Git ignore file ${packagedPath}.`);
     }
   }
-  if (frontend === "react") {
-    const path = join(dir, ".gitignore");
-    const current = await readFile(path, "utf-8");
-    await writeFile(
-      path,
-      `${current.trimEnd()}
-
-# SDK-managed React bootstrap (regenerated before every frontend build)
-/views/app/index.html
-/views/app/astrale.generated.tsx
-`
-    );
-  }
+  void frontend;
 }
 async function materializeFrontend(opts, template) {
   const variant = join(template, ".variants", opts.frontend);
@@ -965,21 +953,31 @@ async function materializeFrontend(opts, template) {
   const pkg = JSON.parse(await readFile(path, "utf-8"));
   pkg.dependencies ??= {};
   pkg.devDependencies ??= {};
+  pkg.scripts ??= {};
   if (opts.frontend === "react") {
     Object.assign(pkg.dependencies, {
       "@astrale-os/shell": ">=0.3.8-beta.2 <1.0.0",
       "@astrale-os/shell-react": ">=0.2.10-beta.2 <1.0.0",
+      "@tanstack/react-router": "~1.131.0",
       react: "^19.2.0",
       "react-dom": "^19.2.0"
     });
     Object.assign(pkg.devDependencies, {
+      "@tailwindcss/vite": "^4.0.6",
+      "@tanstack/router-plugin": "~1.131.0",
       "@types/react": "^19.2.0",
       "@types/react-dom": "^19.2.0",
+      "@vitejs/plugin-react": "^5.0.4",
+      tailwindcss: "^4.0.6",
       vite: "^7.1.7"
     });
   } else if (opts.frontend === "custom") {
     pkg.devDependencies.vite = "^7.1.7";
   }
+  if (opts.frontend !== "none") {
+    pkg.scripts["frontend:dev"] = "vite";
+    pkg.scripts["frontend:build"] = "vite build";
+  }
   pkg.dependencies = sorted(pkg.dependencies);
   pkg.devDependencies = sorted(pkg.devDependencies);
   await writeFile(path, JSON.stringify(pkg, null, 2) + "\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-astrale-domain",
-  "version": "0.3.0-beta.4",
+  "version": "0.3.0-beta.6",
   "description": "Scaffold a standalone Astrale domain — npm create astrale-domain",
   "keywords": [
     "astrale",
@@ -22,8 +22,8 @@
   "type": "module",
   "dependencies": {
     "@clack/prompts": "^0.11.0",
-    "@astrale-os/adapter-astrale": "^0.5.0-beta.4",
-    "@astrale-os/adapter-cloudflare": "^0.5.0-beta.11"
+    "@astrale-os/adapter-astrale": "^0.5.0-beta.6",
+    "@astrale-os/adapter-cloudflare": "^0.5.0-beta.13"
   },
   "devDependencies": {
     "@astrale-os/ox": ">=0.1.0 <1.0.0",
@@ -34,7 +34,7 @@
     "oxlint": "latest",
     "typescript": "~6.0.1-rc",
     "vitest": "^3.0.0",
-    "@astrale-os/sdk": "^0.5.0-beta.8"
+    "@astrale-os/sdk": "^0.5.0-beta.10"
   },
   "engines": {
     "node": ">=22"

package/template/.variants/custom/README.md

@@ -1,7 +1,7 @@
 # Astrale Domain
 
 This project uses the framework-neutral frontend escape hatch. `views/routes.ts` binds declared
-Views to a `frontendArtifact`; `views/app/` is an ordinary Vite root you can replace with any
+Views to a `frontendArtifact`; `vite.config.ts` owns the ordinary Vite root you can replace with any
 framework; `ui/` owns presentation assets. The starter route uses `handshake: 'none'`, so it mounts
 as a plain hosted app. Change that route to `handshake: 'shell'` only after your browser entrypoint
 boots the Shell protocol.

package/template/.variants/custom/views/application/routes.ts

@@ -1,13 +1,12 @@
-import { frontendArtifact, frontendRoute, viteFrontend } from '@astrale-os/sdk/view'
+import { frontendArtifact, viteFrontend } from '@astrale-os/sdk/view'
 
 import { schema } from '#schema'
 
 /** Framework-neutral escape hatch: swap Vite or the browser implementation without changing Views. */
 export const frontend = frontendArtifact({
   schema,
-  source: viteFrontend({ root: './views/app' }),
+  source: viteFrontend(),
   routes: {
-    application: frontendRoute({ path: '/ui/application', handshake: 'none' }),
+    application: { handshake: 'none' },
   },
-  entrypoint: 'application',
 })

package/template/.variants/custom/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  root: 'views/app',
+  build: {
+    outDir: '../../dist/frontend',
+    emptyOutDir: true,
+  },
+})

package/template/.variants/react/README.md

@@ -1,23 +1,23 @@
 # Astrale Domain
 
-This project uses the managed React frontend path. `views/routes.ts` is Worker-safe metadata;
-`views/application/application.view.tsx` owns Domain integration; `ui/` owns pure presentation.
-The adapter generates the shell boot module under `views/app/`, builds it, publishes the declared
-route, and serves the immutable static files beside the callable Worker.
+This project is an ordinary Vite React application. `views/routes.ts` is the small Worker-safe
+delivery artifact; `frontend/` owns TanStack Router and browser composition; `ui/` owns reusable
+presentation. `<Astrale>` supplies the existing Shell session, graph context, error/loading
+boundaries, hooks, and View stage without taking over browser history.
 
 ```text
 schema/             public Domain contract, including View declarations
 implementation.ts   schema, callable handlers, and frontend composition
-views/routes.ts      typed route and browser-module coordinates
-views/application/   Domain-aware React View
-views/app/           managed browser build root
+views/routes.ts      schema-bound delivery metadata
+frontend/            Vite, file-based TanStack Router, and Tailwind entrypoint
 ui/                  styles and pure presentation components
 tests/               cross-layer executable journeys
 ```
 
-Run `pnpm dev` for a local Worker, `pnpm build` to pressure-test Worker and frontend output,
+Run `pnpm dev` for one Worker-facing URL with Vite HMR, `pnpm build` to qualify Worker and frontend output,
 and `pnpm prod` to deploy through the selected adapter. Add semantic `rules/`, `queries/`,
 `mutations/`, and `functions/` modules only when the Domain gains those responsibilities.
 
 Domain projects intentionally own no `.spec` trees. Import authoring contracts through semantic
-`@astrale-os/sdk/*` subpaths; never import Kernel Core or DSL directly.
+`@astrale-os/sdk/*` subpaths; never import Kernel Core or DSL directly. Routing remains a normal
+TanStack Router concern; Astrale hooks remain normal React hooks inside route components.

package/template/.variants/react/frontend/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Astrale Domain</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/.variants/react/frontend/src/main.tsx

@@ -0,0 +1,18 @@
+import { Astrale } from '@astrale-os/shell-react'
+import { RouterProvider } from '@tanstack/react-router'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import { router } from './router.js'
+import './styles.css'
+
+const root = document.querySelector('#root')
+if (root === null) throw new Error('React root #root is missing.')
+
+createRoot(root).render(
+  <StrictMode>
+    <Astrale>
+      <RouterProvider router={router} />
+    </Astrale>
+  </StrictMode>,
+)

package/template/.variants/react/frontend/src/routeTree.gen.ts

@@ -0,0 +1,77 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from './routes/__root'
+import { Route as AboutRouteImport } from './routes/about'
+import { Route as IndexRouteImport } from './routes/index'
+
+const AboutRoute = AboutRouteImport.update({
+  id: '/about',
+  path: '/about',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/about': typeof AboutRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/about': typeof AboutRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/about': typeof AboutRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/about'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/about'
+  id: '__root__' | '/' | '/about'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  AboutRoute: typeof AboutRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/about': {
+      id: '/about'
+      path: '/about'
+      fullPath: '/about'
+      preLoaderRoute: typeof AboutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  AboutRoute: AboutRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

package/template/.variants/react/frontend/src/router.tsx

@@ -0,0 +1,11 @@
+import { createRouter } from '@tanstack/react-router'
+
+import { routeTree } from './routeTree.gen.js'
+
+export const router = createRouter({ routeTree, basepath: '/application' })
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}

package/template/.variants/react/frontend/src/routes/__root.tsx

@@ -0,0 +1,30 @@
+import { createRootRoute, Link, Outlet } from '@tanstack/react-router'
+
+export const Route = createRootRoute({ component: ApplicationLayout })
+
+function ApplicationLayout() {
+  return (
+    <div className="min-h-screen bg-stone-950 text-stone-100">
+      <header className="mx-auto flex max-w-5xl items-center justify-between border-b border-white/10 px-6 py-5">
+        <Link to="/" className="font-medium tracking-tight">
+          Astrale Domain
+        </Link>
+        <nav className="flex gap-1 text-sm text-stone-400" aria-label="Application">
+          <Link
+            to="/"
+            className="rounded-full px-3 py-1.5 [&.active]:bg-white/10 [&.active]:text-white"
+          >
+            Overview
+          </Link>
+          <Link
+            to="/about"
+            className="rounded-full px-3 py-1.5 [&.active]:bg-white/10 [&.active]:text-white"
+          >
+            About
+          </Link>
+        </nav>
+      </header>
+      <Outlet />
+    </div>
+  )
+}

package/template/.variants/react/frontend/src/routes/about.tsx

@@ -0,0 +1,16 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/about')({ component: About })
+
+function About() {
+  return (
+    <main className="mx-auto grid max-w-5xl gap-4 px-6 py-16">
+      <p className="font-mono text-xs uppercase tracking-[0.2em] text-amber-300">Internal route</p>
+      <h1 className="text-4xl font-semibold tracking-tight">TanStack Router owns this history.</h1>
+      <p className="max-w-2xl leading-7 text-stone-400">
+        Add route files here, compose any React stack you want, and use Astrale hooks only where the
+        application needs Shell, graph, target, or host capabilities.
+      </p>
+    </main>
+  )
+}

package/template/.variants/react/frontend/src/routes/index.tsx

@@ -0,0 +1,19 @@
+import { useDomain, useTargetPath } from '@astrale-os/shell-react'
+import { createFileRoute } from '@tanstack/react-router'
+
+import { schema } from '#schema'
+import { ApplicationScreen } from '#ui/application'
+
+export const Route = createFileRoute('/')({ component: Overview })
+
+function Overview() {
+  const domain = useDomain(schema)
+  const target = useTargetPath()
+  return (
+    <ApplicationScreen
+      eyebrow={schema.origin}
+      title="Your application, your router."
+      detail={`Shell connected to ${domain.application.name}; target ${target?.raw ?? 'is the Domain root'}.`}
+    />
+  )
+}

package/template/.variants/react/frontend/src/styles.css

@@ -0,0 +1,19 @@
+@import 'tailwindcss';
+
+:root {
+  color: #f5f5f4;
+  background: #12120f;
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  font-synthesis: none;
+}
+
+body {
+  min-width: 20rem;
+  min-height: 100vh;
+  margin: 0;
+}
+
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}

package/template/.variants/react/frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/.variants/react/ui/application/screen.tsx

@@ -1,5 +1,3 @@
-import './styles.css'
-
 export interface ApplicationScreenProps {
   readonly eyebrow: string
   readonly title: string
@@ -9,10 +7,12 @@ export interface ApplicationScreenProps {
 /** Pure presentation: no graph, routing, credentials, or Domain imports. */
 export function ApplicationScreen({ eyebrow, title, detail }: ApplicationScreenProps) {
   return (
-    <main className="application-shell">
-      <p className="application-eyebrow">{eyebrow}</p>
-      <h1>{title}</h1>
-      <p>{detail}</p>
+    <main className="mx-auto grid min-h-[70vh] max-w-5xl content-center gap-6 px-6 py-16">
+      <p className="font-mono text-xs uppercase tracking-[0.2em] text-amber-300">{eyebrow}</p>
+      <h1 className="max-w-4xl text-5xl font-semibold tracking-[-0.055em] text-stone-50 sm:text-7xl">
+        {title}
+      </h1>
+      <p className="max-w-2xl text-lg leading-8 text-stone-400">{detail}</p>
     </main>
   )
 }

package/template/.variants/react/views/application/routes.ts

@@ -1,16 +1,9 @@
-import { reactFrontend, reactRoute } from '@astrale-os/sdk/react'
+import { frontendArtifact, viteFrontend } from '@astrale-os/sdk/view'
 
 import { schema } from '#schema'
 
-/** Worker-safe route metadata. Browser modules are coordinates, never Worker imports. */
-export const frontend = reactFrontend({
+/** The complete deploy contract; Vite and the browser application stay author-owned. */
+export const frontend = frontendArtifact({
   schema,
-  schemaModule: { module: './schema/index.ts', export: 'schema' },
-  routes: {
-    application: reactRoute({
-      path: '/ui/application',
-      component: { module: './views/application/application.view.tsx' },
-    }),
-  },
-  entrypoint: 'application',
+  source: viteFrontend(),
 })

package/template/.variants/react/vite.config.ts

@@ -0,0 +1,22 @@
+import tailwindcss from '@tailwindcss/vite'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  root: 'frontend',
+  plugins: [
+    tanstackRouter({
+      target: 'react',
+      autoCodeSplitting: true,
+      routesDirectory: './frontend/src/routes',
+      generatedRouteTree: './frontend/src/routeTree.gen.ts',
+    }),
+    react(),
+    tailwindcss(),
+  ],
+  build: {
+    outDir: '../dist/frontend',
+    emptyOutDir: true,
+  },
+})

package/template/pnpm-workspace.yaml

@@ -12,9 +12,7 @@ allowBuilds:
   '@astrale-os/kernel-client': false
   '@astrale-os/kernel-core': false
   '@astrale-os/kernel-dsl': false
-  '@astrale-os/kernel-ports': false
   '@astrale-os/kernel-protocol': false
-  '@astrale-os/kernel-runtime': false
   '@astrale-os/kernel-server': false
   '@astrale-os/sdk': false
   '@astrale-os/shell': false
@@ -31,9 +29,7 @@ ignoredBuiltDependencies:
   - '@astrale-os/kernel-client'
   - '@astrale-os/kernel-core'
   - '@astrale-os/kernel-dsl'
-  - '@astrale-os/kernel-ports'
   - '@astrale-os/kernel-protocol'
-  - '@astrale-os/kernel-runtime'
   - '@astrale-os/kernel-server'
   - '@astrale-os/sdk'
   - '@astrale-os/shell'

package/template/tsconfig.json

@@ -57,6 +57,7 @@
     "capabilities",
     "functions",
     "integrations",
+    "frontend",
     "views",
     "ui",
     "utils",
@@ -64,7 +65,8 @@
     "tests",
     "implementation.ts",
     "index.ts",
-    "astrale.config.ts"
+    "astrale.config.ts",
+    "vite.config.ts"
   ],
   "exclude": ["node_modules", ".dist", ".wrangler", "**/__tests__/**"]
 }

package/template/.variants/react/ui/application/styles.css

@@ -1,34 +0,0 @@
-:root {
-  color: #f5f3ed;
-  background: #171714;
-  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
-}
-
-body {
-  margin: 0;
-}
-
-.application-shell {
-  box-sizing: border-box;
-  display: grid;
-  min-height: 100vh;
-  align-content: center;
-  gap: 1rem;
-  max-width: 64rem;
-  padding: 4rem;
-  margin: 0 auto;
-}
-
-.application-shell h1 {
-  margin: 0;
-  font-size: clamp(3rem, 9vw, 7rem);
-  line-height: 0.92;
-  letter-spacing: -0.06em;
-}
-
-.application-eyebrow {
-  color: #e3b866;
-  font-family: ui-monospace, monospace;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-}

package/template/.variants/react/ui/application/styles.d.ts

@@ -1 +0,0 @@
-declare module '*.css' {}

package/template/.variants/react/views/app/README.md

@@ -1,4 +0,0 @@
-# Managed React entrypoint
-
-The adapter generates `index.html` and `astrale.generated.tsx` here from `views/routes.ts` before
-Vite builds the frontend. Keep browser build configuration here only when the application needs it.

package/template/.variants/react/views/application/application.view.tsx

@@ -1,19 +0,0 @@
-import type { ReactViewProps } from '@astrale-os/sdk/react'
-
-import { Domain } from '@astrale-os/sdk/domain'
-
-import { schema } from '#schema'
-import { ApplicationScreen } from '#ui/application'
-
-const application = Domain.fromSchema(schema).application
-
-/** Domain-aware View integration; Queries, Rules, and named actions belong here. */
-export default function ApplicationView({ target, route }: ReactViewProps<typeof application>) {
-  return (
-    <ApplicationScreen
-      eyebrow={target.origin}
-      title="Ready to build."
-      detail={`Mounted as ${route.name} at ${route.href}`}
-    />
-  )
-}