@stone-js/starters 0.8.12 → 0.8.14

package/full-service-declarative/package.json

@@ -22,14 +22,14 @@
   },
   "dependencies": {
     "@libsql/client": "^0.14.0",
-    "@stone-js/core": "^0.8.12",
-    "@stone-js/env": "^0.8.12",
-    "@stone-js/filesystem": "^0.8.12",
-    "@stone-js/http-core": "^0.8.12",
-    "@stone-js/node-cli-adapter": "^0.8.12",
-    "@stone-js/node-http-adapter": "^0.8.12",
-    "@stone-js/pipeline": "^0.8.12",
-    "@stone-js/router": "^0.8.12",
+    "@stone-js/core": "^0.8.14",
+    "@stone-js/env": "^0.8.14",
+    "@stone-js/filesystem": "^0.8.14",
+    "@stone-js/http-core": "^0.8.14",
+    "@stone-js/node-cli-adapter": "^0.8.14",
+    "@stone-js/node-http-adapter": "^0.8.14",
+    "@stone-js/pipeline": "^0.8.14",
+    "@stone-js/router": "^0.8.14",
     "bcryptjs": "^3.0.2",
     "drizzle-orm": "^0.45.2",
     "jsonwebtoken": "^9.0.2"
@@ -38,8 +38,8 @@
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.27.0",
-    "@stone-js/cli": "^0.8.12",
-    "@stone-js/testing": "^0.8.12",
+    "@stone-js/cli": "^0.8.14",
+    "@stone-js/testing": "^0.8.14",
     "@types/jsonwebtoken": "^9.0.8",
     "@types/node": "^24.0.3",
     "@vitest/coverage-v8": "^3.0.9",

package/full-service-declarative/tests/application.spec.ts

@@ -1,4 +1,5 @@
-import { createTestApp, makeIncomingHttpEvent } from '@stone-js/testing'
+import { createTestApp } from '@stone-js/testing'
+import { makeIncomingHttpEvent } from '@stone-js/testing/http'
 
 /**
  * The whole application, booted in memory and asked a real question.

package/full-service-imperative/package.json

@@ -22,14 +22,14 @@
   },
   "dependencies": {
     "@libsql/client": "^0.14.0",
-    "@stone-js/core": "^0.8.12",
-    "@stone-js/env": "^0.8.12",
-    "@stone-js/filesystem": "^0.8.12",
-    "@stone-js/http-core": "^0.8.12",
-    "@stone-js/node-cli-adapter": "^0.8.12",
-    "@stone-js/node-http-adapter": "^0.8.12",
-    "@stone-js/pipeline": "^0.8.12",
-    "@stone-js/router": "^0.8.12",
+    "@stone-js/core": "^0.8.14",
+    "@stone-js/env": "^0.8.14",
+    "@stone-js/filesystem": "^0.8.14",
+    "@stone-js/http-core": "^0.8.14",
+    "@stone-js/node-cli-adapter": "^0.8.14",
+    "@stone-js/node-http-adapter": "^0.8.14",
+    "@stone-js/pipeline": "^0.8.14",
+    "@stone-js/router": "^0.8.14",
     "bcryptjs": "^3.0.2",
     "drizzle-orm": "^0.45.2",
     "jsonwebtoken": "^9.0.2"
@@ -38,8 +38,8 @@
     "@babel/plugin-proposal-decorators": "^7.25.9",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-typescript": "^7.27.0",
-    "@stone-js/cli": "^0.8.12",
-    "@stone-js/testing": "^0.8.12",
+    "@stone-js/cli": "^0.8.14",
+    "@stone-js/testing": "^0.8.14",
     "@types/jsonwebtoken": "^9.0.8",
     "@types/node": "^24.0.3",
     "@vitest/coverage-v8": "^3.0.9",

package/full-service-imperative/tests/application.spec.ts

@@ -1,4 +1,5 @@
-import { createTestApp, makeIncomingHttpEvent } from '@stone-js/testing'
+import { createTestApp } from '@stone-js/testing'
+import { makeIncomingHttpEvent } from '@stone-js/testing/http'
 
 /**
  * The whole application, booted in memory and asked a real question.

package/monorepo-declarative/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright © 2026 Stone Foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/monorepo-declarative/README.md

@@ -0,0 +1,91 @@
+# Stone.js - One domain, two applications
+
+A monorepo where the interesting file is the one that runs everywhere.
+
+```
+acme/
+├── packages/domain/     @acme/domain   the entities and the behaviour
+├── apps/web/            @acme/web      a browser application
+└── apps/mobile/         @acme/mobile   a React Native application
+```
+
+`packages/domain` imports `@stone-js/core` and nothing else about a platform: no `Request`, no
+`Response`, no `window`, no `View`. Both applications depend on it, and neither has a copy of it.
+
+## The two applications, side by side
+
+Open both and read them together. This is the whole demonstration:
+
+| | `apps/web/app/Application.ts` | `apps/mobile/app/Application.ts` |
+|---|---|---|
+| Router | `@Routing()` | `@Routing()` |
+| Where events come from | `@Browser()` | `@ReactNative()` |
+| What a route becomes | `@UseReact()` | `@UseReactNative()` |
+| The domain | `[domainBlueprint]` | `[domainBlueprint]` |
+
+Two decorators differ. Everything else is the same file.
+
+Then open `apps/web/app/TaskListPage.tsx` next to `apps/mobile/app/TaskListScreen.tsx`. `handle` and
+`head` are identical, line for line, because answering a route is not a platform question. Only
+`render` differs, and only in what it draws with: `div` and `ul` on one side, `View` and `ScrollView`
+on the other.
+
+## Setup
+
+```sh
+pnpm install
+pnpm --filter @acme/domain build
+```
+
+The domain is built first because both applications consume its `dist`. `pnpm run build` does both in
+order.
+
+## Run them
+
+```sh
+pnpm run dev:web        # http://localhost:8080
+pnpm run dev:mobile     # Expo: press i for iOS, a for Android
+```
+
+## Test them
+
+```sh
+pnpm run test           # every package
+pnpm --filter @acme/domain test    # the domain alone, in milliseconds
+```
+
+Three suites, three levels, and the cheapest one is the one that matters most:
+
+- **`packages/domain`** boots nothing. Plain objects in, plain objects out. This is where the
+  behaviour is tested, because this is where the behaviour is.
+- **`apps/web`** boots the real kernel through `createTestApp()` and reads the HTML that came back.
+- **`apps/mobile`** boots the real kernel, adapter and renderer under Node, sends a deep link, and
+  asserts what landed on the navigation stack. No device, no simulator.
+
+The web and mobile suites assert the same domain behaviour through two different contexts, which is
+the claim this repository exists to make.
+
+## Why React is pinned at the root
+
+```json
+"pnpm": { "overrides": { "react": "19.2.3", "react-dom": "19.2.3" } }
+```
+
+Expo pins React to an exact version, and a workspace with one React and a different React DOM fails
+at run time with "Incompatible React versions". Pinning both at the root is the one piece of
+configuration a web-and-mobile monorepo genuinely needs; without it the two applications drift apart
+the first time either one updates.
+
+## Adding to the domain
+
+Put it in `packages/domain/src`, export it from `src/index.ts`, and register it in `domainBlueprint`
+if an application should resolve it from the container. Both applications see it on the next build,
+and neither one changes.
+
+Relative imports inside the domain carry their `.js` extension, because it is published as ESM with
+`moduleResolution: NodeNext`. That is what a consumer on modern Node needs in order to resolve them.
+
+## Learn more
+
+- [Stone.js documentation](https://stonejs.dev/docs)
+- [The Continuum Architecture](https://evens-stone.github.io/continuum-manifesto/manifesto)

package/monorepo-declarative/apps/mobile/App.tsx

@@ -0,0 +1,26 @@
+import { JSX } from 'react'
+import { View } from 'react-native'
+import { StatusBar } from 'expo-status-bar'
+import { useStoneTheme } from './app/theme'
+import { StoneNativeApp } from '@stone-js/use-react-native'
+
+/**
+ * The root component.
+ *
+ * `StoneNativeApp` shows the screen on top of the stack, which is all a first run needs, and it
+ * needs nothing installed to do it. When the application grows a real navigator, this is the
+ * component it replaces: the stack is public state, so `@react-navigation/native-stack` drives
+ * itself from the same object through `useScreens()`. The README shows that wiring.
+ *
+ * @returns The application.
+ */
+export default function App (): JSX.Element {
+  const theme = useStoneTheme()
+
+  return (
+    <View style={{ flex: 1, backgroundColor: theme.ink }}>
+      <StatusBar style='auto' />
+      <StoneNativeApp />
+    </View>
+  )
+}

package/monorepo-declarative/apps/mobile/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015-present 650 Industries, Inc. (aka Expo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/monorepo-declarative/apps/mobile/app/Application.ts

@@ -0,0 +1,24 @@
+import { Routing } from '@stone-js/router'
+import { LogLevel, StoneApp } from '@stone-js/core'
+import { domainBlueprint } from '@acme/domain'
+import { ReactNative } from '@stone-js/react-native-adapter'
+import { UseReactNative } from '@stone-js/use-react-native'
+
+/**
+ * The mobile application.
+ *
+ * Four decorators and one blueprint. `@ReactNative()` says where events come from, deep links
+ * included, `@UseReactNative()` says what a resolved route becomes, and `domainBlueprint` brings in
+ * the shared domain, which is the only line here that has anything to do with what the application
+ * is *about*.
+ *
+ * Compare with `apps/web/app/Application.ts`: the same file with two decorators swapped. That is the
+ * whole difference between a website and a native application in this repository.
+ *
+ * Screens live in their own files, one route each. See `app/TaskListScreen.tsx`.
+ */
+@Routing()
+@ReactNative()
+@UseReactNative()
+@StoneApp({ name: 'acme-mobile', logger: { level: LogLevel.INFO } }, [domainBlueprint])
+export class Application {}

package/monorepo-declarative/apps/mobile/app/PortalMark.tsx

@@ -0,0 +1,32 @@
+import { JSX } from 'react'
+import { Image, useColorScheme } from 'react-native'
+
+/**
+ * Le Portail, the Stone.js mark.
+ *
+ * The same three arcs as `public/logo.svg` in the web starters: two stone segments rising, and the
+ * keystone lit in ember. Two files rather than one, because the segments have to contrast with the
+ * ground the screen paints, exactly as the brand ships a dark-ground and a light-ground Portal.
+ *
+ * Shipped as an image on purpose. Drawing it would mean `react-native-svg`, a native module, and
+ * a starter's first job is to run on a device the moment it is installed, with nothing to link
+ * and no version to match against Expo Go's.
+ *
+ * @param props.size - Side length in points.
+ * @returns The mark.
+ */
+export function PortalMark ({ size = 104 }: { size?: number }): JSX.Element {
+  const scheme = useColorScheme()
+
+  return (
+    <Image
+      accessibilityRole='image'
+      accessibilityLabel='Stone.js'
+      source={scheme === 'light'
+        ? require('../assets/logo-light.png')
+        : require('../assets/logo-dark.png')}
+      style={{ width: size, height: size }}
+      resizeMode='contain'
+    />
+  )
+}

package/monorepo-declarative/apps/mobile/app/TaskListScreen.tsx

@@ -0,0 +1,67 @@
+import { JSX } from 'react'
+import { Promiseable } from '@stone-js/core'
+import { TaskListView } from './TaskListView'
+import { Task, TaskService } from '@acme/domain'
+import { HeadContext, IPage, Page, PageHeadContext, PageRenderContext, ReactIncomingEvent } from '@stone-js/use-react-native'
+
+/**
+ * The task list, as a native screen.
+ *
+ * Read `handle` and `head` next to `apps/web/app/TaskListPage.tsx`: they are the same, line for line,
+ * because answering a route is not a platform question. Only `render` differs, and only because a
+ * browser draws with `div` and a phone draws with `View`.
+ */
+@Page('/')
+export class TaskListScreen implements IPage<ReactIncomingEvent> {
+  private readonly tasks: TaskService
+
+  /**
+   * @param tasks - The shared domain service, under the alias its blueprint registered.
+   */
+  constructor ({ tasks }: { tasks: TaskService }) {
+    this.tasks = tasks
+  }
+
+  /**
+   * Answer the route.
+   *
+   * @param event - The incoming event.
+   * @returns The screen's data.
+   */
+  handle (event: ReactIncomingEvent): TaskListData {
+    const toggle = event.get<string>('toggle')
+
+    if (toggle !== undefined) { this.tasks.toggle(toggle) }
+
+    return { tasks: this.tasks.all(), remaining: this.tasks.remaining() }
+  }
+
+  /**
+   * Name the screen.
+   *
+   * @returns The head context.
+   */
+  head ({ data }: PageHeadContext<TaskListData>): Promiseable<HeadContext> {
+    return {
+      title: `${data?.remaining ?? 0} left · Acme tasks`,
+      description: 'One domain, two applications. This is the native one.'
+    }
+  }
+
+  /**
+   * Draw the screen.
+   *
+   * @returns The rendered screen.
+   */
+  render ({ data }: PageRenderContext<TaskListData>): JSX.Element {
+    return <TaskListView tasks={data?.tasks ?? []} remaining={data?.remaining ?? 0} />
+  }
+}
+
+/**
+ * What the screen hands to its renderer.
+ */
+export interface TaskListData {
+  tasks: Task[]
+  remaining: number
+}

package/monorepo-declarative/apps/mobile/app/TaskListView.tsx

@@ -0,0 +1,98 @@
+import { JSX } from 'react'
+import { Task } from '@acme/domain'
+import { PortalMark } from './PortalMark'
+import { useStoneTheme } from './theme'
+import { useNavigate } from '@stone-js/use-react-native'
+import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
+
+/**
+ * What the task list looks like on a phone.
+ *
+ * The web application's page draws the same data with `div`, `ul` and `a`. This one uses `View`,
+ * `ScrollView` and `Pressable`, and goes through `useNavigate` instead of an `href`: navigation is
+ * the router's business either way, so a screen never renders another screen itself.
+ *
+ * @param props.tasks - The tasks to show.
+ * @param props.remaining - How many are left.
+ * @returns The screen.
+ */
+export function TaskListView ({ tasks, remaining }: { tasks: Task[], remaining: number }): JSX.Element {
+  const theme = useStoneTheme()
+  const navigate = useNavigate()
+
+  return (
+    <View style={[styles.screen, { backgroundColor: theme.ink }]}>
+      <View style={[styles.glow, { backgroundColor: theme.inkGlow }]} pointerEvents='none' />
+
+      <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
+        <PortalMark size={88} />
+
+        <Text style={[styles.eyebrow, { color: theme.creamDim }]}>ONE DOMAIN, TWO APPS</Text>
+        <Text style={[styles.title, { color: theme.ember2 }]}>Acme tasks</Text>
+        <Text style={[styles.lead, { color: theme.cream }]}>{remaining} left to do</Text>
+
+        <View style={styles.tasks}>
+          {tasks.map((task) => (
+            <Pressable
+              key={task.id}
+              accessibilityRole='button'
+              accessibilityState={{ checked: task.done }}
+              onPress={() => navigate(`/?toggle=${task.id}`, 'replace')}
+              style={[styles.task, { borderColor: theme.line, backgroundColor: theme.card }]}
+            >
+              <Text style={[styles.box, { color: task.done ? theme.creamDim : theme.ember2 }]}>
+                {task.done ? '●' : '○'}
+              </Text>
+              <Text style={[styles.taskTitle, { color: task.done ? theme.creamDim : theme.cream }]}>
+                {task.title}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+
+        <Text style={[styles.brand, { color: theme.creamDim }]}>
+          <Text style={{ color: theme.ember2 }}>●</Text> the same{' '}
+          <Text style={[styles.strong, { color: theme.ember1 }]}>@acme/domain</Text> runs the web app
+        </Text>
+      </ScrollView>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  screen: { flex: 1, overflow: 'hidden' },
+  // The web app's ember glow, as the only shape a phone can draw it with.
+  glow: {
+    position: 'absolute',
+    top: '2%',
+    alignSelf: 'center',
+    width: 380,
+    height: 380,
+    borderRadius: 190,
+    opacity: 0.5
+  },
+  content: {
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+    paddingVertical: 72
+  },
+  eyebrow: { marginTop: 20, fontSize: 11, fontWeight: '600', letterSpacing: 3 },
+  title: { marginTop: 6, fontSize: 44, fontWeight: '800', letterSpacing: -1.4 },
+  lead: { marginTop: 12, fontSize: 18, fontWeight: '600' },
+  tasks: { marginTop: 26, width: '100%', maxWidth: 420, gap: 8 },
+  task: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingVertical: 14,
+    paddingHorizontal: 16
+  },
+  box: { fontSize: 13 },
+  taskTitle: { flex: 1, fontSize: 16, fontWeight: '600' },
+  strong: { fontWeight: '700' },
+  brand: { marginTop: 32, fontSize: 13, textAlign: 'center' }
+})

package/monorepo-declarative/apps/mobile/app/theme.ts

@@ -0,0 +1,66 @@
+import { useColorScheme } from 'react-native'
+
+/**
+ * The Stone.js brand, "Obsidienne & Braise", as values a StyleSheet can use.
+ *
+ * The same palette the web starters paint in CSS custom properties. A native application has no
+ * cascade, so the tokens are plain values and the screen reads them through `useStoneTheme`.
+ */
+export interface StoneTheme {
+  /** The page ground. */
+  ink: string
+  /** The glow at the top of the ground, behind the mark. */
+  inkGlow: string
+  /** Primary text. */
+  cream: string
+  /** Secondary text. */
+  creamDim: string
+  /** The ember gradient, light end. Also the accent for small text. */
+  ember1: string
+  /** The ember gradient, dark end. */
+  ember2: string
+  /** Hairlines and card borders. */
+  line: string
+  /** Card and pill surfaces. */
+  card: string
+  /** The mark's two arcs. */
+  mark: string
+}
+
+const dark: StoneTheme = {
+  ink: '#14110F',
+  inkGlow: '#241C17',
+  cream: '#F4EFE6',
+  creamDim: '#A69A8C',
+  ember1: '#FFC46B',
+  ember2: '#FF5A1F',
+  line: 'rgba(244, 239, 230, 0.10)',
+  card: 'rgba(244, 239, 230, 0.05)',
+  mark: '#E2D9CC'
+}
+
+const light: StoneTheme = {
+  ink: '#F4EFE6',
+  inkGlow: '#FFFFFF',
+  cream: '#1B1613',
+  creamDim: '#6B6154',
+  // On a light ground the ember needs the darker end to stay readable, per the brand's
+  // contrast notes: `braise.clair` for large elements, `braise.texte` for small text.
+  ember1: '#E04E10',
+  ember2: '#A83A08',
+  line: 'rgba(27, 22, 19, 0.12)',
+  card: 'rgba(27, 22, 19, 0.04)',
+  mark: '#1B1613'
+}
+
+/**
+ * The palette matching the device's appearance.
+ *
+ * Dark is the default, as in the web starters: `useColorScheme` returns `null` when the platform
+ * expresses no preference, and the brand's ground is obsidian.
+ *
+ * @returns The active theme.
+ */
+export function useStoneTheme (): StoneTheme {
+  return useColorScheme() === 'light' ? light : dark
+}

package/monorepo-declarative/apps/mobile/app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "Acme tasks",
+    "slug": "acme-mobile",
+    "scheme": "acme",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "automatic",
+    "backgroundColor": "#14110F",
+    "splash": {
+      "image": "./assets/splash-icon.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#14110F"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "backgroundColor": "#14110F",
+        "foregroundImage": "./assets/android-icon-foreground.png",
+        "backgroundImage": "./assets/android-icon-background.png",
+        "monochromeImage": "./assets/android-icon-monochrome.png"
+      },
+      "predictiveBackGestureEnabled": false
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

package/monorepo-declarative/apps/mobile/babel.config.js

@@ -0,0 +1,16 @@
+/**
+ * Stone.js runs on TC39 stage-3 decorators (2023-11) with `Symbol.metadata`.
+ *
+ * `babel-preset-expo` applies `@babel/plugin-proposal-decorators` itself (in
+ * legacy mode by default): the decorator semantics are configured through the
+ * preset's `decorators` option, never by adding the plugin separately, so the
+ * preset keeps its ordering guarantees against the class-field transforms.
+ */
+module.exports = function (api) {
+  api.cache(true)
+  return {
+    presets: [
+      ['babel-preset-expo', { decorators: { version: '2023-11' } }]
+    ]
+  }
+}

package/monorepo-declarative/apps/mobile/index.ts

@@ -0,0 +1,30 @@
+/**
+ * Platform polyfills come first, before anything from Stone.js loads.
+ *
+ * - React Native's built-in `URL` is a stub (no `pathname`, no `searchParams`), and the router
+ *   reads `pathname` on every event, so the polyfill is required rather than nice to have.
+ * - `TextEncoder` is installed only when the engine does not provide it (older Hermes).
+ */
+import 'react-native-url-polyfill/auto'
+
+if (typeof globalThis.TextEncoder === 'undefined') {
+  require('fast-text-encoding')
+}
+
+import { stoneApp } from '@stone-js/core'
+import { registerRootComponent } from 'expo'
+import App from './App'
+
+/**
+ * Every module under `app/`, collected at build time.
+ *
+ * Generated by `withStone` in `metro.config.js`, because collecting modules is a bundler question
+ * and Metro has no `import.meta.glob`. Never edit it, never commit it.
+ */
+import { modules } from './.stone/modules'
+
+// Boot the framework, then hand the root component to Expo. `registerRootComponent` works the same
+// in Expo Go and in a native build.
+void stoneApp({ modules }).run()
+
+registerRootComponent(App)

package/monorepo-declarative/apps/mobile/metro.config.js

@@ -0,0 +1,13 @@
+const { getDefaultConfig } = require('expo/metro-config')
+const { withStone } = require('@stone-js/use-react-native/metro')
+
+/**
+ * `withStone` collects every module under `app/` and writes `.stone/modules.ts` before Metro
+ * bundles, because Metro resolves imports statically and has no `import.meta.glob`. It hooks in
+ * here rather than in a command on purpose: Metro loads this file whatever started it, so
+ * `expo start`, `expo run:ios` and an EAS build all get the generation without anyone asking.
+ *
+ * Pinning the project root also keeps Metro scoped to this starter, even when it lives inside a
+ * larger workspace, as it does in the Stone.js monorepo.
+ */
+module.exports = withStone(getDefaultConfig(__dirname), __dirname)