@eventmodelers/cli 0.0.1

package/stacks/cratis-csharp/templates/root/CLAUDE.md

@@ -0,0 +1,62 @@
+# CratisApp — agent conventions
+
+This is a **Cratis** application: Cratis Arc (CQRS) + Cratis Chronicle (event sourcing) + MongoDB read
+models on the backend, React + TypeScript (Vite + PrimeReact) on the frontend, with **full-stack type
+safety** via TypeScript proxy generation on `dotnet build`.
+
+Build slices with the kit's skills — `/build-state-change`, `/build-state-view`, `/build-automation` —
+and follow the conventions distilled in
+`.build-kit/.claude/skills/_shared/cratis-conventions.md`. **The shipped example slice
+under `SomeModule/SomeFeature/` is the concrete pattern to copy** — match its structure exactly.
+
+## Structure (learn from `SomeModule/SomeFeature/`)
+
+```
+<Module>/<Feature>/
+├── <Feature>.tsx            ← composition page (buttons, dialogs, tables)
+├── index.ts                 ← barrel: export * from './<Feature>'
+├── <Concept>.cs             ← shared concepts (ConceptAs<T>)
+└── <Slice>/                 ← one slice = one behavior
+    ├── <Slice>.cs           ← ALL backend artifacts for the slice in ONE file
+    ├── <Proxy>.ts           ← GENERATED by dotnet build — never hand-edit
+    ├── <Component>.tsx      ← React component using the generated proxy
+    └── index.ts             ← barrel export
+```
+
+- Top folder is a **module**, then a **feature**, then **slices**. Namespace is
+  `CratisApp.<Module>.<Feature>.<Slice>` (the `RootNamespace` is `CratisApp` — see `CratisApp.csproj`).
+- **Proxies are generated next to the source** (`CratisProxiesUseSourceFileAsOutputFile=true` in the
+  `.csproj`): `Register.ts` sits beside `Registration.cs`. Frontend imports the proxy from the **same
+  folder** (`import { Register } from './Register'`). Files marked `// @generated` are never edited.
+
+## Non-negotiables (full detail in the shared conventions doc)
+
+- ALL backend artifacts for a slice live in ONE `.cs` file.
+- `[Command]` records define `Handle()` directly — never separate handler classes.
+- `[EventType]` takes NO arguments; events are past-tense and never nullable.
+- `ConceptAs<T>` for identity/value types — no raw `Guid` / `string` in the domain.
+- `[ReadModel]` records expose queries as `public static` methods; observable queries return
+  `ISubject<T>` directly (`collection.Observe()`).
+- Reactors implement the marker `IReactor`; dispatch is by the first parameter type. Write new events
+  only via `ICommandPipeline.Execute(...)`, never `IEventLog`. Keep reactors idempotent + stateless.
+- Frontend: `CommandDialog` / `InputTextField` from `@cratis/components/*`; never import `Dialog` from
+  `primereact/dialog`. PrimeReact CSS variables / Tailwind classes for styling; no `any`.
+
+## Build, run, test
+
+```bash
+docker-compose up -d        # Chronicle (+ MongoDB) + Aspire dashboard
+dotnet build                # compiles backend AND regenerates TypeScript proxies
+dotnet test                 # run specs (filter while iterating: --filter "FullyQualifiedName~<Slice>")
+npm install && npm run dev  # frontend dev server (Vite)
+dotnet run                  # backend (http://localhost:5000, Swagger at /swagger)
+```
+
+**Sequencing is strict:** a slice's frontend cannot reference its proxy until the backend compiles, so
+always go Backend → `dotnet build` → Specs → Frontend → Composition page → Routes (`App.tsx`). Backend
+and frontend of the same slice never run in parallel. Build must be zero-warning, zero-error.
+
+## Learn more
+
+- Cratis docs: https://www.cratis.io/docs/
+- Conventions: `.build-kit/.claude/skills/_shared/cratis-conventions.md`

package/stacks/cratis-csharp/templates/root/CratisApp.csproj

@@ -0,0 +1,25 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+    <PropertyGroup>
+        <TargetFramework>net9.0</TargetFramework>
+        <RootNamespace>CratisApp</RootNamespace>
+        <ImplicitUsings>enable</ImplicitUsings>
+        <Nullable>enable</Nullable>
+        <TreatWarningsAsErrors>true</TreatWarningsAsErrors>
+
+        <CratisProxiesOutputPath>$(MSBuildThisFileDirectory)</CratisProxiesOutputPath>
+        <CratisProxiesSegmentsToSkip>1</CratisProxiesSegmentsToSkip>
+        <CratisProxiesSkipOutputDeletion>true</CratisProxiesSkipOutputDeletion>
+        <CratisProxiesSkipCommandNameInRoute>true</CratisProxiesSkipCommandNameInRoute>
+        <CratisProxiesUseSourceFileAsOutputFile>true</CratisProxiesUseSourceFileAsOutputFile>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <Content Remove="package.json" />
+        <None Remove="package.json" />
+    </ItemGroup>
+
+    <ItemGroup>
+        <PackageReference Include="Cratis" Version="*" />
+        <PackageReference Include="Cratis.Arc.MongoDB" Version="*" />
+    </ItemGroup>
+</Project>

package/stacks/cratis-csharp/templates/root/CratisApp.sln

@@ -0,0 +1,18 @@
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.9.34728.123
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "CratisApp", "CratisApp.csproj", "{6F1B2C3D-4E5A-6B7C-8D9E-0F1A2B3C4D5E}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{6F1B2C3D-4E5A-6B7C-8D9E-0F1A2B3C4D5E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{6F1B2C3D-4E5A-6B7C-8D9E-0F1A2B3C4D5E}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{6F1B2C3D-4E5A-6B7C-8D9E-0F1A2B3C4D5E}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{6F1B2C3D-4E5A-6B7C-8D9E-0F1A2B3C4D5E}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+EndGlobal

package/stacks/cratis-csharp/templates/root/GlobalUsings.cs

@@ -0,0 +1,3 @@
+global using System.Reactive.Subjects;
+global using Cratis.Arc.MongoDB;
+global using MongoDB.Driver;

package/stacks/cratis-csharp/templates/root/Home.tsx

@@ -0,0 +1,102 @@
+
+
+
+export const Home = () => {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '80vh', padding: '2rem', textAlign: 'center' }}>
+            <svg style={{ borderRadius: 0, boxShadow: 'none', height: '120px', marginBottom: '2rem' }} width="600.000000pt" height="328.000000pt" viewBox="0 0 600.000000 328.000000" preserveAspectRatio="xMidYMid meet">
+                <g transform="translate(0.000000,328.000000) scale(0.100000,-0.100000)" fill="white" stroke="none">
+                    <path d="M974 2789 c-319 -182 -592 -343 -607 -358 -16 -14 -34 -35 -40 -46
+        -8 -14 -10 -229 -9 -735 l3 -715 23 -35 c18 -26 74 -64 222 -151 110 -64 374
+        -219 589 -344 214 -126 400 -231 413 -233 13 -3 31 3 42 13 19 17 20 33 20
+        307 0 233 -3 294 -15 317 -10 21 -93 74 -327 211 -172 101 -324 194 -338 207
+        l-25 23 0 401 0 401 27 23 c14 12 161 100 327 194 177 101 310 184 325 202
+        l26 31 0 293 c0 318 -1 325 -55 325 -12 0 -283 -149 -601 -331z"></path>
+                    <path d="M4830 2314 c-62 -23 -90 -58 -90 -115 0 -22 10 -41 34 -65 30 -30 40
+        -34 85 -34 59 0 95 19 117 61 25 49 12 105 -32 134 -25 16 -91 27 -114 19z"></path>
+                    <path d="M4310 2080 l0 -80 -55 0 -55 0 0 -80 0 -80 55 0 55 0 0 -168 c0 -164
+        1 -170 28 -223 22 -44 36 -58 81 -81 45 -24 66 -28 131 -28 77 0 134 12 157
+        34 8 8 5 28 -14 79 -21 55 -29 67 -42 61 -9 -4 -35 -9 -57 -12 -34 -3 -46 1
+        -63 19 -19 21 -21 34 -21 171 l0 148 80 0 80 0 0 80 0 80 -80 0 -80 0 0 80 0
+        80 -100 0 -100 0 0 -80z"></path>
+                    <path d="M1495 2019 c-178 -98 -219 -126 -237 -157 -15 -26 -18 -57 -18 -215
+        0 -175 1 -186 23 -218 30 -45 326 -219 372 -219 34 0 319 157 361 199 24 23
+        24 26 24 230 l0 207 -27 31 c-39 44 -319 203 -358 203 -19 0 -73 -24 -140 -61z"></path>
+                    <path d="M2635 2006 c-110 -35 -200 -116 -230 -207 -22 -64 -22 -180 -1 -238
+        35 -96 124 -178 225 -208 79 -23 231 -15 291 16 53 27 106 75 126 113 l14 27
+        -74 40 c-40 23 -76 41 -79 41 -2 0 -22 -18 -44 -39 -30 -30 -50 -41 -86 -46
+        -135 -20 -230 129 -167 261 49 101 177 119 259 37 l35 -35 69 33 c37 19 72 39
+        78 45 13 15 -41 87 -90 119 -21 15 -60 33 -87 41 -58 17 -184 17 -239 0z"></path>
+                    <path d="M3405 2008 c-16 -6 -47 -22 -67 -35 l-38 -23 0 30 0 30 -100 0 -100
+        0 0 -330 0 -330 99 0 99 0 4 183 c3 159 6 187 24 222 25 49 89 85 151 85 l43
+        0 0 90 0 90 -42 -1 c-24 0 -56 -5 -73 -11z"></path>
+                    <path d="M3705 2007 c-61 -16 -145 -55 -145 -68 0 -7 56 -126 64 -136 1 -1 25
+        9 53 23 61 31 155 42 206 25 43 -14 77 -53 77 -87 0 -24 -1 -24 -108 -24 -173
+        0 -262 -34 -302 -116 -45 -92 -9 -203 83 -255 33 -18 62 -24 128 -27 97 -5
+        144 6 189 45 l30 25 0 -31 0 -31 96 0 96 0 -5 228 c-2 125 -10 243 -16 263
+        -19 63 -65 115 -128 145 -51 25 -70 29 -163 31 -60 1 -127 -3 -155 -10z m255
+        -425 c0 -71 -86 -123 -168 -100 -42 12 -61 33 -62 69 0 25 21 51 50 62 8 3 52
+        6 98 6 l82 1 0 -38z"></path>
+                    <path d="M5207 2006 c-66 -19 -119 -58 -146 -107 -19 -34 -23 -52 -19 -109 3
+        -60 8 -73 33 -101 42 -44 94 -65 210 -84 109 -19 145 -35 145 -66 0 -55 -151
+        -63 -272 -15 -36 14 -67 26 -69 26 -9 0 -73 -140 -67 -146 4 -3 37 -17 75 -31
+        90 -34 269 -44 353 -19 119 35 172 95 172 194 0 124 -50 164 -249 202 -56 10
+        -112 24 -123 30 -31 17 -22 51 20 73 45 23 149 17 216 -12 26 -12 48 -21 51
+        -21 5 0 63 129 63 140 0 5 -26 19 -57 31 -73 28 -261 36 -336 15z"></path>
+                    <path d="M4760 1680 l0 -330 100 0 100 0 0 330 0 330 -100 0 -100 0 0 -330z"></path>
+                </g>
+            </svg>
+
+            <h1 style={{ color: 'white', fontSize: '1.5rem', fontWeight: 300, marginBottom: '1.5rem', opacity: 0.9 }}>
+                Welcome to your Cratis application 🚀
+            </h1>
+
+            <p style={{ color: 'rgba(255,255,255,0.7)', maxWidth: '600px', lineHeight: 1.7, marginBottom: '1rem' }}>
+                <strong style={{ color: 'white' }}>Event sourcing</strong> meets <strong style={{ color: 'white' }}>vertical slices</strong> — powered
+                by <strong style={{ color: 'white' }}>Cratis Arc</strong> and the <strong style={{ color: 'white' }}>Chronicle</strong> event store. 📜✨
+            </p>
+
+            <p style={{ color: 'rgba(255,255,255,0.7)', maxWidth: '600px', lineHeight: 1.7, marginBottom: '2rem' }}>
+                Every feature lives in one folder — events, commands, queries, projections, and React components side by side.
+                Capture intent as events, project read models, and build reactive UIs — all in one slice. 🧩
+            </p>
+
+            <div style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'stretch', marginBottom: '2rem' }}>
+                <InfoCard emoji="📖" title="README.md" description="Setup guide, project structure & getting started" />
+                <InfoCard emoji="🔗" title="cratis.io" description="Documentation, guides & community" link="https://cratis.io" />
+                <InfoCard emoji="🛠️" title="Swagger UI" description="Explore your API endpoints" link="/swagger" />
+                <InfoCard emoji="🎮" title="Demo" description="See it in action with a live example" link="/demo" />
+            </div>
+
+            <p style={{ color: 'rgba(255,255,255,0.4)', fontSize: '0.85rem' }}>
+                Generated with <code style={{ background: 'rgba(255,255,255,0.1)', padding: '2px 6px', borderRadius: '4px' }}>dotnet new cratis</code>
+            </p>
+        </div>
+    );
+};
+
+const InfoCard = ({ emoji, title, description, link }: { emoji: string; title: string; description: string; link?: string }) => {
+    const content = (
+        <div style={{
+            background: 'rgba(255,255,255,0.06)',
+            border: '1px solid rgba(255,255,255,0.1)',
+            borderRadius: '12px',
+            padding: '1.25rem 1.5rem',
+            width: '200px',
+            height: '100%',
+            boxSizing: 'border-box',
+            textAlign: 'left',
+            transition: 'background 0.2s',
+            cursor: link ? 'pointer' : 'default',
+        }}>
+            <div style={{ fontSize: '1.5rem', marginBottom: '0.5rem' }}>{emoji}</div>
+            <div style={{ color: 'white', fontWeight: 600, marginBottom: '0.25rem' }}>{title}</div>
+            <div style={{ color: 'rgba(255,255,255,0.5)', fontSize: '0.85rem', lineHeight: 1.4 }}>{description}</div>
+        </div>
+    );
+
+    if (link) {
+        return <a href={link} target={link.startsWith('http') ? '_blank' : undefined} rel="noopener noreferrer" style={{ textDecoration: 'none' }}>{content}</a>;
+    }
+    return content;
+};

package/stacks/cratis-csharp/templates/root/Program.cs

@@ -0,0 +1,26 @@
+var builder = WebApplication.CreateBuilder(args);
+builder.AddCratis(
+    configureChronicleBuilder: chronicleBuilder => chronicleBuilder.WithCamelCaseNamingPolicy(),
+    configureArcBuilder: arcBuilder => arcBuilder.WithMongoDB(configureMongoDB: builder => builder.WithCamelCaseNamingPolicy()));
+    
+builder.Services.AddControllers();
+builder.Services.AddMvc();
+builder.Services.AddEndpointsApiExplorer();
+builder.Services.AddSwaggerGen(options => options.AddConcepts());
+
+var app = builder.Build();
+
+app.UseRouting();
+
+app.UseDefaultFiles();
+app.UseStaticFiles();
+
+app.UseWebSockets();
+app.MapControllers();
+app.UseCratis();
+ 
+app.UseSwagger();
+app.UseSwaggerUI();
+app.MapFallbackToFile("/index.html");
+
+await app.RunAsync();

package/stacks/cratis-csharp/templates/root/README.md

@@ -0,0 +1,192 @@
+# CratisApp
+
+A web application built with Cratis Arc and Chronicle.
+
+## Prerequisites
+
+- .NET 9.0 or later
+- Docker and Docker Compose (for running Chronicle and Aspire Dashboard)
+- Node.js 20 or later
+- A package manager (yarn, pnpm, or npm)
+
+## Getting Started
+
+1. Start the infrastructure:
+
+```bash
+docker-compose up -d
+```
+
+This will start:
+
+- Chronicle (with MongoDB on port 27017)
+- Aspire Dashboard (on port 18888)
+
+2. Install frontend dependencies:
+
+```bash
+npm install
+```
+
+3. Start the frontend development server:
+
+```bash
+npm run dev
+```
+
+4. Run the application:
+
+```bash
+dotnet run
+```
+
+The application will be available at:
+
+- Backend API: http://localhost:5000
+- Swagger UI: http://localhost:5000/swagger
+- Frontend: http://localhost:5173 (Vite dev server)
+- Aspire Dashboard: http://localhost:18888
+
+## Project Structure
+
+```shell
+CratisApp.csproj          - .NET project file
+Program.cs                - Application entry point
+GlobalUsings.cs           - Global using directives
+appsettings.json          - Configuration
+package.json              - Node.js dependencies
+tsconfig.json             - TypeScript configuration
+docker-compose.yml        - Infrastructure services
+.frontend/                - Frontend application shell
+  index.html              - HTML entry point
+  main.tsx                - React entry point
+  App.tsx                 - Root React component
+  index.css               - Global styles
+  vite.config.ts          - Vite configuration
+<Module>/                 - A domain module
+  <Feature>/              - A vertical slice
+    <Feature>.tsx         - React composition page
+    <Feature>.cs          - Backend C# code
+    index.ts              - TypeScript barrel export
+    <Slice>/              - Sub-slice
+      ...
+```
+
+## Vertical Slices
+
+This template follows a **vertical slice architecture** where backend and frontend code live side by side in the same folder. Each feature folder holds all the artifacts needed for that slice — C# commands, queries, events, and React components — rather than separating them by layer (e.g. `Controllers/`, `Services/`, `Components/`).
+
+This makes it easy to reason about a feature, evolve it independently, and keep related code together.
+
+- Each slice is a self-contained unit of functionality from UI to backend.
+- C# and TypeScript files coexist in the same directory.
+- Run `dotnet build` after backend changes to regenerate the TypeScript proxies used by the frontend.
+
+## Cratis Build Tool (Proxy Generation)
+
+This template is designed to work with `Cratis.Arc.ProxyGenerator.Build`, which generates TypeScript command/query proxies during `dotnet build`.
+
+### Add package reference
+
+If not already present, add the build package to your `.csproj`:
+
+```xml
+<ItemGroup>
+  <PackageReference Include="Cratis.Arc.ProxyGenerator.Build" Version="<version>" />
+</ItemGroup>
+```
+
+### Required setting
+
+`CratisProxiesOutputPath` tells the build tool where generated TypeScript proxies should be written.
+
+```xml
+<PropertyGroup>
+  <CratisProxiesOutputPath>$(MSBuildThisFileDirectory)Features</CratisProxiesOutputPath>
+</PropertyGroup>
+```
+
+### Common configuration
+
+```xml
+<PropertyGroup>
+  <CratisProxiesOutputPath>$(MSBuildThisFileDirectory)Features</CratisProxiesOutputPath>
+  <CratisProxiesSegmentsToSkip>1</CratisProxiesSegmentsToSkip>
+  <CratisProxiesSkipOutputDeletion>true</CratisProxiesSkipOutputDeletion>
+  <CratisProxiesSkipCommandNameInRoute>true</CratisProxiesSkipCommandNameInRoute>
+  <CratisProxiesSkipQueryNameInRoute>false</CratisProxiesSkipQueryNameInRoute>
+  <CratisProxiesApiPrefix>api</CratisProxiesApiPrefix>
+  <CratisProxiesSkipFileIndexTracking>false</CratisProxiesSkipFileIndexTracking>
+  <CratisProxiesSkipIndexGeneration>false</CratisProxiesSkipIndexGeneration>
+</PropertyGroup>
+```
+
+### What each setting does
+
+- `CratisProxiesOutputPath`: Output directory for generated proxies.
+- `CratisProxiesSegmentsToSkip`: Skips namespace segments when creating folder paths.
+- `CratisProxiesSkipOutputDeletion`: When `false` (default), output folder is deleted on each build; set `true` for incremental generation.
+- `CratisProxiesSkipCommandNameInRoute`: Excludes command names from generated routes when possible.
+- `CratisProxiesSkipQueryNameInRoute`: Excludes query names from generated routes when possible.
+- `CratisProxiesApiPrefix`: API prefix used in generated routes (default `api`).
+- `CratisProxiesSkipFileIndexTracking`: Disables orphan-file tracking when `true`.
+- `CratisProxiesSkipIndexGeneration`: Disables `index.ts` generation when `true`.
+
+### Automatic routes and proxy generation
+
+Arc automatically maps model-bound commands and queries to HTTP routes based on namespace conventions.
+
+Keep runtime (`appsettings.json`) and proxy generation (`.csproj`) settings aligned:
+
+- `Cratis:Arc:GeneratedApis:RoutePrefix` <-> `CratisProxiesApiPrefix`
+- `Cratis:Arc:GeneratedApis:SegmentsToSkipForRoute` <-> `CratisProxiesSegmentsToSkip`
+- `Cratis:Arc:GeneratedApis:IncludeCommandNameInRoute` <-> inverse of `CratisProxiesSkipCommandNameInRoute`
+- `Cratis:Arc:GeneratedApis:IncludeQueryNameInRoute` <-> inverse of `CratisProxiesSkipQueryNameInRoute`
+
+If these are out of sync, generated TypeScript proxies can call routes that do not match mapped backend endpoints.
+
+In this template, both segment-skip settings are set to `1`:
+
+```json
+{
+  "Cratis": {
+    "Arc": {
+      "GeneratedApis": {
+        "RoutePrefix": "api",
+        "IncludeCommandNameInRoute": false,
+        "SegmentsToSkipForRoute": 1
+      }
+    }
+  }
+}
+```
+
+```xml
+<PropertyGroup>
+  <CratisProxiesSegmentsToSkip>1</CratisProxiesSegmentsToSkip>
+  <CratisProxiesSkipCommandNameInRoute>true</CratisProxiesSkipCommandNameInRoute>
+</PropertyGroup>
+```
+
+`IncludeQueryNameInRoute` is not explicitly set in this template, so the Arc default (`true`) applies. This matches proxy generation default `CratisProxiesSkipQueryNameInRoute=false`.
+
+When command/query names are excluded, both runtime mapping and proxy generation automatically re-include names when needed to avoid route collisions.
+
+### Verify generation
+
+Run:
+
+```bash
+dotnet build
+```
+
+Then inspect your configured `CratisProxiesOutputPath` directory for generated proxies.
+
+## Learn More
+
+- [Cratis Arc Documentation](https://www.cratis.io/docs/Arc/)
+- [Cratis Arc ASP.NET Core Configuration](https://www.cratis.io/docs/Arc/backend/asp-net-core/configuration.html)
+- [Cratis Arc Proxy Generation Configuration](https://www.cratis.io/docs/Arc/backend/proxy-generation/index.html)
+- [Cratis Arc Model Bound Commands](https://www.cratis.io/docs/Arc/backend/commands/model-bound/index.html)
+- [Cratis Arc Model Bound Queries](https://www.cratis.io/docs/Arc/backend/queries/model-bound/index.html)
+- [Chronicle Documentation](https://www.cratis.io/docs/Chronicle/)

package/stacks/cratis-csharp/templates/root/SomeModule/SomeFeature/Listing/AllListings.ts

@@ -0,0 +1,47 @@
+// @generated - This file is automatically generated by the Cratis proxy generator. Do not edit manually.
+
+/* eslint-disable sort-imports */
+import { ObservableQueryFor, QueryResultWithState, Sorting, Paging } from '@cratis/arc/queries';
+import { useObservableQuery, useObservableQueryWithPaging, SetSorting, SetPage, SetPageSize } from '@cratis/arc.react/queries';
+import { ParameterDescriptor } from '@cratis/arc/reflection';
+import { Listing } from './Listing';
+
+class AllListingsSortBy {
+    constructor(readonly query: AllListings) {}
+}
+
+class AllListingsSortByWithoutQuery {}
+
+export class AllListings extends ObservableQueryFor<Listing[]> {
+    readonly route: string = '/api/some-module/some-feature/listing/all-listings';
+    readonly defaultValue: Listing[] = [];
+    private readonly _sortBy: AllListingsSortBy;
+    private static readonly _sortBy: AllListingsSortByWithoutQuery = new AllListingsSortByWithoutQuery();
+
+    constructor() {
+        super(Listing, true);
+        this._sortBy = new AllListingsSortBy(this);
+    }
+
+    get requiredRequestParameters(): string[] {
+        return [];
+    }
+
+    readonly parameterDescriptors: ParameterDescriptor[] = [];
+
+    get sortBy(): AllListingsSortBy {
+        return this._sortBy;
+    }
+
+    static get sortBy(): AllListingsSortByWithoutQuery {
+        return this._sortBy;
+    }
+
+    static use(sorting?: Sorting): [QueryResultWithState<Listing[]>, SetSorting] {
+        return useObservableQuery<Listing[], AllListings>(AllListings, undefined, sorting);
+    }
+
+    static useWithPaging(pageSize: number, sorting?: Sorting): [QueryResultWithState<Listing[]>, SetSorting, SetPage, SetPageSize] {
+        return useObservableQueryWithPaging<Listing[], AllListings>(AllListings, new Paging(0, pageSize), undefined, sorting);
+    }
+}

package/stacks/cratis-csharp/templates/root/SomeModule/SomeFeature/Listing/Listing.cs

@@ -0,0 +1,11 @@
+using CratisApp.SomeModule.SomeFeature.Registration;
+
+namespace CratisApp.SomeModule.SomeFeature.Listing;
+
+[ReadModel]
+[FromEvent<Registered>]
+public record Listing(Guid Id, SomeName Name, EventSourceId EventSourceId)
+{
+    public static ISubject<IEnumerable<Listing>> AllListings(IMongoCollection<Listing> collection) =>
+        collection.Observe();
+}

package/stacks/cratis-csharp/templates/root/SomeModule/SomeFeature/Listing/Listing.ts

@@ -0,0 +1,12 @@
+// @generated - This file is automatically generated by the Cratis proxy generator. Do not edit manually.
+
+/* eslint-disable sort-imports */
+import { field } from '@cratis/fundamentals';
+
+export class Listing {
+    @field(String)
+    name!: string;
+
+    @field(String)
+    eventSourceId!: string;
+}

package/stacks/cratis-csharp/templates/root/SomeModule/SomeFeature/Listing/ListingDataTable.tsx

@@ -0,0 +1,17 @@
+import { DataTableForObservableQuery } from '@cratis/components/DataTables';
+import { AllListings } from './AllListings';
+import { Column } from 'primereact/column';
+
+export const ListingDataTable = () => {
+    return (
+        <>
+            <DataTableForObservableQuery
+                query={AllListings}
+                dataKey='eventSourceId'
+                emptyMessage='No items registered yet.'>
+                <Column field='name' header='Name' />
+                <Column field='eventSourceId' header='Id' />
+            </DataTableForObservableQuery>
+        </>
+    );
+}

package/stacks/cratis-csharp/templates/root/SomeModule/SomeFeature/Listing/index.ts

@@ -0,0 +1 @@
+export * from './ListingDataTable';

package/stacks/cratis-csharp/templates/root/SomeModule/SomeFeature/Registration/Register.ts

@@ -0,0 +1,51 @@
+// @generated - This file is automatically generated by the Cratis proxy generator. Do not edit manually.
+
+/* eslint-disable sort-imports */
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import { Command, CommandValidator } from '@cratis/arc/commands';
+import { useCommand, SetCommandValues, ClearCommandValues } from '@cratis/arc.react/commands';
+import { PropertyDescriptor } from '@cratis/arc/reflection';
+import { Guid } from '@cratis/fundamentals';
+
+export interface IRegister {
+    name?: string;
+}
+
+export class RegisterValidator extends CommandValidator<IRegister> {
+    constructor() {
+        super();
+    }
+}
+
+export class Register extends Command<IRegister, Guid> implements IRegister {
+    readonly route: string = '/api/some-module/some-feature/registration';
+    readonly validation: CommandValidator = new RegisterValidator();
+    readonly propertyDescriptors: PropertyDescriptor[] = [
+        new PropertyDescriptor('name', String, false),
+    ];
+
+    private _name!: string;
+
+    constructor() {
+        super(Guid, false);
+    }
+
+    get requestParameters(): string[] {
+        return [];
+    }
+
+    get name(): string {
+        return this._name;
+    }
+
+    set name(value: string) {
+        this._name = value;
+        this.propertyChanged('name');
+    }
+
+    static use(initialValues?: IRegister): [Register, SetCommandValues<IRegister>, ClearCommandValues] {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return useCommand<Register, IRegister>(Register, initialValues);
+    }
+}

package/stacks/cratis-csharp/templates/root/SomeModule/SomeFeature/Registration/RegisterDialog.tsx

@@ -0,0 +1,18 @@
+import { CommandDialog } from '@cratis/components/CommandDialog';
+import { InputTextField } from '@cratis/components/CommandForm';
+import { Register } from './Register';
+
+export const RegisterDialog = () => {
+    return (
+        <CommandDialog
+            command={Register}
+            title='Register'
+            okLabel='Register'
+            cancelLabel='Cancel'>
+            <InputTextField<Register>
+                value={c => c.name}
+                title='Name'
+                icon={<i className='pi pi-pencil' />} />
+        </CommandDialog>
+    );
+}

package/stacks/cratis-csharp/templates/root/SomeModule/SomeFeature/Registration/Registration.cs

@@ -0,0 +1,27 @@
+namespace CratisApp.SomeModule.SomeFeature.Registration;
+
+[Command]
+public record Register(SomeName Name)
+{
+    public (Guid, Registered) Handle()
+    {
+        var eventSourceId = Guid.NewGuid();
+
+        return (eventSourceId, new(Name));
+    }
+}
+
+[EventType]
+public record Registered(SomeName Name);
+
+public partial class RegistrationReactor(ILogger<RegistrationReactor> logger) : IReactor
+{
+    public Task Handle(Registered evt)
+    {
+        LogRegistered(evt.Name);
+        return Task.CompletedTask;
+    }
+
+    [LoggerMessage(LogLevel.Information, "Registered: {Name}")]
+    partial void LogRegistered(string name);
+}

package/stacks/cratis-csharp/templates/root/SomeModule/SomeFeature/Registration/index.ts

@@ -0,0 +1 @@
+export * from './RegisterDialog';

package/stacks/cratis-csharp/templates/root/SomeModule/SomeFeature/SomeFeature.tsx

@@ -0,0 +1,22 @@
+import { Button } from 'primereact/button';
+import { RegisterDialog } from './Registration';
+import { ListingDataTable } from './Listing';
+import { useDialog } from '@cratis/arc.react/dialogs';
+
+export const SomeFeature = () => {
+    const [RegistrationDialog, showRegistrationDialog] = useDialog(RegisterDialog);
+
+    return (
+        <div className='p-4'>
+            <div className='flex justify-between items-center mb-4'>
+                <h1 className='text-2xl font-bold'>SomeFeature</h1>
+                <Button
+                    label='Register'
+                    icon='pi pi-plus'
+                    onClick={() => showRegistrationDialog()} />
+            </div>
+            <ListingDataTable />
+            <RegistrationDialog />
+        </div>
+    );
+};

package/stacks/cratis-csharp/templates/root/SomeModule/SomeFeature/SomeName.cs

@@ -0,0 +1,3 @@
+namespace CratisApp.SomeModule.SomeFeature;
+
+public record SomeName(string Value) : ConceptAs<string>(Value);

package/stacks/cratis-csharp/templates/root/SomeModule/SomeFeature/index.ts

@@ -0,0 +1 @@
+export * from './SomeFeature';