create-feltkit 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Randy Kendel
+
+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/README.md

@@ -1,3 +1,14 @@
-# Temporary Holding Version
+# create-feltkit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+```bash
+npm create feltkit@latest my-app
+cd my-app
+npm install
+npm run dev
+```
+
+Creates a FeltKit application: a small task manager with projects, tasks, notes
+(AppPort Services Files), three roles, live queries, AppPort capabilities, and tests.
+Refuses to write into a non-empty directory. Has no dependencies.
+
+Documentation: https://github.com/rkendel1/concave#readme

package/bin/create.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+// npm create feltkit@latest <dir>
+import { resolve } from "node:path";
+import { scaffold, VERSION } from "../scaffold.js";
+
+const args = process.argv.slice(2);
+const color = process.stdout.isTTY && !process.env.NO_COLOR;
+const bold = (s) => (color ? `\u001b[1m${s}\u001b[22m` : s);
+const dim = (s) => (color ? `\u001b[2m${s}\u001b[22m` : s);
+const green = (s) => (color ? `\u001b[32m${s}\u001b[39m` : s);
+const red = (s) => (color ? `\u001b[31m${s}\u001b[39m` : s);
+
+if (args.includes("--help") || args.includes("-h")) {
+  console.log(`npm create feltkit@latest <directory> [-- --name <app-name>]\n\nCreates a FeltKit application (a small task manager you can run immediately).`);
+  process.exit(0);
+}
+if (args.includes("--version")) {
+  console.log(VERSION);
+  process.exit(0);
+}
+const nameIndex = args.indexOf("--name");
+const name = nameIndex >= 0 ? args[nameIndex + 1] : undefined;
+const dir = args.find((a, i) => !a.startsWith("-") && (nameIndex < 0 || i !== nameIndex + 1)) ?? "my-feltkit-app";
+
+try {
+  const result = scaffold({ target: resolve(process.cwd(), dir), ...(name ? { name } : {}) });
+  console.log(`${green("✓")} Created ${bold(result.name)} in ${result.dir}\n`);
+  console.log(`  cd ${dir}`);
+  console.log("  npm install");
+  console.log("  npm run dev\n");
+  console.log(dim("The dev server prints your app URL and a dashboard link. State lives in .feltkit/development/state."));
+} catch (error) {
+  console.error(`${red("✗")} ${error.message}`);
+  if (error.hint) console.error(`  hint: ${error.hint}`);
+  process.exit(1);
+}

package/package.json

@@ -1,6 +1,36 @@
 {
   "name": "create-feltkit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Create a FeltKit application: npm create feltkit@latest my-app",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rkendel1/concave.git",
+    "directory": "packages/create"
+  },
+  "engines": {
+    "node": ">=20.11"
+  },
+  "bin": {
+    "create-feltkit": "bin/create.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./scaffold.d.ts",
+      "import": "./scaffold.js"
+    }
+  },
+  "files": [
+    "bin",
+    "scaffold.js",
+    "scaffold.d.ts",
+    "template",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node sync-template.mjs",
+    "prepack": "node sync-template.mjs",
+    "test": "node --test test/*.test.mjs"
+  }
+}

package/scaffold.d.ts

@@ -0,0 +1,21 @@
+export interface ScaffoldOptions {
+  /** Directory to create. Must not exist or be empty. */
+  target: string;
+  /** Application name; defaults to the directory name. */
+  name?: string;
+  /** Version spec for feltkit; defaults to this package's version (released in lockstep). */
+  sdkSpec?: string;
+}
+export interface ScaffoldResult {
+  dir: string;
+  name: string;
+  sdkSpec: string;
+}
+export class ScaffoldError extends Error {
+  readonly code: "TARGET_NOT_EMPTY" | "TEMPLATE_MISSING" | "TEMPLATE_OUT_OF_SYNC";
+  readonly hint?: string;
+}
+export declare const VERSION: string;
+export declare function toAppName(input: string): string;
+export declare function templateDir(): string;
+export declare function scaffold(options: ScaffoldOptions): ScaffoldResult;

package/scaffold.js

@@ -0,0 +1,62 @@
+// Scaffold a FeltKit application from the starter template. No dependencies, so `npm create` is fast.
+import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
+import { basename, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const VERSION = JSON.parse(readFileSync(new URL("./package.json", import.meta.url), "utf8")).version;
+
+export class ScaffoldError extends Error {
+  constructor(code, message, hint) {
+    super(message);
+    this.name = "ScaffoldError";
+    this.code = code;
+    this.hint = hint;
+  }
+}
+
+export function templateDir() {
+  const dir = fileURLToPath(new URL("./template/", import.meta.url));
+  if (!existsSync(join(dir, "package.json"))) {
+    throw new ScaffoldError("TEMPLATE_MISSING", "The starter template is missing from this installation of create-feltkit.", "Reinstall it: npm create feltkit@latest");
+  }
+  return dir;
+}
+
+export function toAppName(input) {
+  const name = String(input)
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, "-")
+    .replace(/^[^a-z]+/, "")
+    .replace(/-+/g, "-")
+    .replace(/-$/, "")
+    .slice(0, 63);
+  return name || "my-app";
+}
+
+export function scaffold({ target, name, sdkSpec }) {
+  if (existsSync(target) && readdirSync(target).filter((f) => f !== ".git" && f !== ".DS_Store").length > 0) {
+    throw new ScaffoldError("TARGET_NOT_EMPTY", `${target} already exists and is not empty. FeltKit will not write over existing files.`, "Choose a new directory name.");
+  }
+  const appName = toAppName(name ?? basename(target));
+  const spec = sdkSpec ?? process.env.FELTKIT_SDK_SPEC ?? `^${VERSION}`;
+  const source = templateDir();
+  mkdirSync(target, { recursive: true });
+  cpSync(source, target, { recursive: true });
+  if (existsSync(join(target, "_gitignore"))) renameSync(join(target, "_gitignore"), join(target, ".gitignore"));
+
+  const pkgPath = join(target, "package.json");
+  const pkg = JSON.parse(readFileSync(pkgPath, "utf8"));
+  pkg.name = appName;
+  pkg.private = true;
+  pkg.version = "0.1.0";
+  pkg.dependencies["feltkit"] = spec;
+  writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`);
+
+  const appPath = join(target, "feltkit", "app.ts");
+  const app = readFileSync(appPath, "utf8");
+  if (!app.includes('name: "tasks"')) {
+    throw new ScaffoldError("TEMPLATE_OUT_OF_SYNC", "The starter's feltkit/app.ts no longer declares its name; the template is out of sync.");
+  }
+  writeFileSync(appPath, app.replace('name: "tasks"', `name: ${JSON.stringify(appName)}`));
+  return { dir: target, name: appName, sdkSpec: spec };
+}

package/template/_gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+.feltkit/

package/template/feltkit/_generated/api.ts

@@ -0,0 +1,9 @@
+/* Generated by `feltkit dev` / `feltkit codegen`. Do not edit; it is rewritten when feltkit/ changes. */
+/* eslint-disable */
+import { createApi } from "feltkit/client";
+import type * as app_module from "../app.js";
+import type * as projects_module from "../projects.js";
+import type * as tasks_module from "../tasks.js";
+
+/** Typed references to every query and mutation. Type-only imports: no backend code reaches the browser. */
+export const api = createApi<{ "app": typeof app_module; "projects": typeof projects_module; "tasks": typeof tasks_module }>();

package/template/feltkit/app.ts

@@ -0,0 +1,45 @@
+/**
+ * The application: its name, who may do what, and its data.
+ *
+ * Everything here is stored in one FeltDB instance per environment. In development
+ * that is .feltkit/development/state — run `npx feltkit inspect` to see it.
+ */
+import { feltkit, s } from "feltkit";
+
+export const app = feltkit({
+  name: "tasks",
+  description: "A small task manager that demonstrates the whole FeltKit platform.",
+  // Roles grant AppPort permissions. "tasks.*" grants every tasks.<x> permission.
+  roles: {
+    member: ["projects.*", "tasks.*", "files.*"],
+    viewer: ["projects.read", "tasks.read", "files.read"],
+    // Agents can read, complete tasks, and leave notes. They cannot create or delete.
+    agent: ["projects.read", "tasks.read", "tasks.complete", "tasks.note", "files.read", "files.write"],
+  },
+  // Development-only identities. Sign in as them from the app or the dashboard.
+  dev: {
+    users: [
+      { id: "ada", name: "Ada Lovelace", roles: ["member"] },
+      { id: "grace", name: "Grace Hopper", roles: ["viewer"] },
+    ],
+  },
+  // AppPort Services: Files, stored in this app's FeltDB instance.
+  services: { files: true },
+});
+
+export const projects = app.collection("projects", {
+  name: s.string({ minLength: 1, maxLength: 80 }),
+  createdAt: s.number(),
+  createdBy: s.string(),
+});
+
+export const tasks = app.collection("tasks", {
+  projectId: s.string(),
+  title: s.string({ minLength: 1, maxLength: 200 }),
+  details: s.optional(s.string({ maxLength: 4000 })),
+  done: s.boolean(),
+  createdAt: s.number(),
+  createdBy: s.string(),
+  completedAt: s.optional(s.number()),
+  completedBy: s.optional(s.string()),
+});

package/template/feltkit/projects.ts

@@ -0,0 +1,56 @@
+import { fail, s } from "feltkit";
+import { app, projects, tasks } from "./app.js";
+
+const Project = s.object({
+  id: s.string(),
+  name: s.string(),
+  createdAt: s.number(),
+  createdBy: s.string(),
+  open: s.integer(),
+  done: s.integer(),
+});
+
+/** Every project with its task counts. */
+export const list = app.query({
+  access: "projects.read",
+  returns: s.array(Project),
+  capability: { name: "projects.list", description: "List projects with their open and completed task counts." },
+  handler: async (ctx) => {
+    const [all, allTasks] = await Promise.all([ctx.db.find(projects, {}, { orderBy: [{ field: "createdAt", direction: "asc" }] }), ctx.db.find(tasks)]);
+    return all.map((p) => {
+      const mine = allTasks.filter((t) => t.projectId === p.id);
+      return { id: p.id, name: p.name, createdAt: p.createdAt, createdBy: p.createdBy, open: mine.filter((t) => !t.done).length, done: mine.filter((t) => t.done).length };
+    });
+  },
+});
+
+export const create = app.mutation({
+  access: "projects.write",
+  args: { name: s.string({ minLength: 1, maxLength: 80 }) },
+  returns: s.string(),
+  handler: async (ctx, { name }) => {
+    const trimmed = name.trim();
+    if (!trimmed) fail("INVALID_ARGUMENT", "A project needs a name.");
+    const existing = await ctx.db.find(projects, { name: trimmed });
+    if (existing.length) fail("CONFLICT", `There is already a project called "${trimmed}".`);
+    return ctx.db.insert(projects, { name: trimmed, createdAt: Date.now(), createdBy: ctx.auth.requirePrincipal().id });
+  },
+});
+
+export const rename = app.mutation({
+  access: "projects.write",
+  args: { id: s.string(), name: s.string({ minLength: 1, maxLength: 80 }) },
+  handler: async (ctx, { id, name }) => {
+    await ctx.db.patch(projects, id, { name: name.trim() });
+  },
+});
+
+/** Deletes a project and all of its tasks in one atomic commit. */
+export const remove = app.mutation({
+  access: "projects.write",
+  args: { id: s.string() },
+  handler: async (ctx, { id }) => {
+    for (const task of await ctx.db.find(tasks, { projectId: id })) await ctx.db.delete(tasks, task.id);
+    await ctx.db.delete(projects, id);
+  },
+});

package/template/feltkit/tasks.ts

@@ -0,0 +1,101 @@
+import { fail, s } from "feltkit";
+import { app, projects, tasks } from "./app.js";
+
+const Task = s.object({
+  id: s.string(),
+  projectId: s.string(),
+  title: s.string(),
+  details: s.optional(s.string()),
+  done: s.boolean(),
+  createdAt: s.number(),
+  createdBy: s.string(),
+  completedAt: s.optional(s.number()),
+  completedBy: s.optional(s.string()),
+  __version: s.number(),
+});
+
+/** Tasks in a project: open first, then completed, oldest first. */
+export const list = app.query({
+  access: "tasks.read",
+  args: { projectId: s.string() },
+  returns: s.array(Task),
+  capability: { name: "tasks.list", description: "List the tasks in a project, open ones first." },
+  handler: async (ctx, { projectId }) => {
+    const items = await ctx.db.find(tasks, { projectId }, { orderBy: [{ field: "createdAt", direction: "asc" }] });
+    return [...items.filter((t) => !t.done), ...items.filter((t) => t.done)];
+  },
+});
+
+export const create = app.mutation({
+  access: "tasks.write",
+  args: { projectId: s.string(), title: s.string({ minLength: 1, maxLength: 200 }), details: s.optional(s.string({ maxLength: 4000 })) },
+  returns: s.string(),
+  capability: { name: "tasks.create", description: "Add a task to a project." },
+  handler: async (ctx, { projectId, title, details }) => {
+    if (!(await ctx.db.get(projects, projectId))) fail("NOT_FOUND", "That project does not exist.");
+    return ctx.db.insert(tasks, {
+      projectId,
+      title: title.trim(),
+      ...(details?.trim() ? { details: details.trim() } : {}),
+      done: false,
+      createdAt: Date.now(),
+      createdBy: ctx.auth.requirePrincipal().id,
+    });
+  },
+});
+
+export const update = app.mutation({
+  access: "tasks.write",
+  args: { id: s.string(), title: s.optional(s.string({ minLength: 1, maxLength: 200 })), details: s.optional(s.string({ maxLength: 4000 })) },
+  handler: async (ctx, { id, title, details }) => {
+    await ctx.db.patch(tasks, id, {
+      ...(title !== undefined ? { title: title.trim() } : {}),
+      ...(details !== undefined ? { details: details.trim() || undefined } : {}),
+    });
+  },
+});
+
+export const setDone = app.mutation({
+  access: "tasks.complete",
+  args: { id: s.string(), done: s.boolean() },
+  returns: s.object({ id: s.string(), done: s.boolean() }),
+  capability: { name: "tasks.complete", description: "Mark a task complete (done: true) or reopen it (done: false)." },
+  handler: async (ctx, { id, done }) => {
+    const who = ctx.auth.requirePrincipal().id;
+    const task = await ctx.db.patch(tasks, id, done ? { done: true, completedAt: Date.now(), completedBy: who } : { done: false, completedAt: undefined, completedBy: undefined });
+    return { id: task.id, done: task.done };
+  },
+});
+
+export const remove = app.mutation({
+  access: "tasks.write",
+  args: { id: s.string() },
+  handler: async (ctx, { id }) => {
+    for (const file of await ctx.services.files.list({ metadata: { taskId: id } })) await ctx.services.files.remove(file.id);
+    await ctx.db.delete(tasks, id);
+  },
+});
+
+/** Notes are text files stored by the AppPort Services Files service in this app's FeltDB instance. */
+export const notes = app.query({
+  access: "tasks.read",
+  args: { taskId: s.string() },
+  handler: async (ctx, { taskId }) => {
+    const files = await ctx.services.files.list({ metadata: { taskId } });
+    return Promise.all(
+      files.map(async (file) => ({ id: file.id, author: file.owner, createdAt: file.createdAt, text: (await ctx.services.files.read(file.id)).text() })),
+    );
+  },
+});
+
+export const addNote = app.mutation({
+  access: "tasks.note",
+  args: { taskId: s.string(), text: s.string({ minLength: 1, maxLength: 8000 }) },
+  returns: s.object({ id: s.string() }),
+  capability: { name: "tasks.note", description: "Attach a text note to a task (stored with AppPort Services Files)." },
+  handler: async (ctx, { taskId, text }) => {
+    if (!(await ctx.db.get(tasks, taskId))) fail("NOT_FOUND", "That task does not exist.");
+    const file = await ctx.services.files.upload({ name: "note.txt", contentType: "text/plain", content: text.trim(), metadata: { taskId } });
+    return { id: file.id };
+  },
+});

package/template/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="light dark" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <title>Tasks · FeltKit</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "feltkit-example-tasks",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "feltkit dev",
+    "build": "feltkit build",
+    "start": "feltkit start",
+    "test": "feltkit test",
+    "inspect": "feltkit inspect",
+    "deploy": "feltkit deploy",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "feltkit": "0.1.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.19.1",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "@vitejs/plugin-react": "5.1.0",
+    "typescript": "5.9.3",
+    "vite": "7.3.7"
+  }
+}

package/template/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#14532d"/><path d="M11 7c-4 5-4 13 0 18M21 7c4 5 4 13 0 18" stroke="#ecfdf5" stroke-width="3" fill="none" stroke-linecap="round"/></svg>

package/template/src/App.tsx

@@ -0,0 +1,375 @@
+import { useEffect, useMemo, useRef, useState, type FormEvent } from "react";
+import { useConnectionState, useMutation, useQueryState, useSession, type FeltKitClientError } from "feltkit/react";
+import { api } from "../feltkit/_generated/api";
+
+type Notice = { tone: "error" | "info"; text: string } | null;
+
+/** Same matching rule as AppPort: exact, "ns.*", or "*". */
+function can(granted: string[], permission: string): boolean {
+  return granted.some((g) => g === "*" || g === permission || (g.endsWith(".*") && permission.startsWith(g.slice(0, -1))));
+}
+
+function describe(error: unknown): string {
+  const e = error as FeltKitClientError;
+  if (e?.code === "FORBIDDEN") return `Not allowed: ${e.message}. Switch to a member to make changes.`;
+  if (e?.code === "UNAUTHORIZED") return "Sign in to continue.";
+  if (e?.code === "CONFLICT") return e.message;
+  return e?.message ?? String(error);
+}
+
+export function App() {
+  const { session, signInAsDevUser, signOut } = useSession();
+  const live = useConnectionState();
+  const [notice, setNotice] = useState<Notice>(null);
+  const principal = session?.principal ?? null;
+  // UI hint only. The server enforces access on every call regardless of what the UI shows.
+  const canWrite = can(session?.permissions ?? [], "tasks.write");
+  const canComplete = can(session?.permissions ?? [], "tasks.complete");
+
+  // In development, sign in as the first dev user so the app works on first load.
+  const tried = useRef(false);
+  useEffect(() => {
+    if (session && !principal && session.devUsers.length && !tried.current) {
+      tried.current = true;
+      void signInAsDevUser(session.devUsers[0]!.id);
+    }
+  }, [session, principal, signInAsDevUser]);
+
+  useEffect(() => {
+    if (!notice) return;
+    const timer = setTimeout(() => setNotice(null), 6000);
+    return () => clearTimeout(timer);
+  }, [notice]);
+
+  const report = (error: unknown) => setNotice({ tone: "error", text: describe(error) });
+
+  return (
+    <div className="shell">
+      <header className="topbar">
+        <div className="brand">
+          <span className="mark" aria-hidden>
+            <svg viewBox="0 0 32 32" width="22" height="22">
+              <path d="M11 7c-4 5-4 13 0 18M21 7c4 5 4 13 0 18" stroke="currentColor" strokeWidth="3" fill="none" strokeLinecap="round" />
+            </svg>
+          </span>
+          <span className="brand-name">Tasks</span>
+          {session && <span className={`env ${session.environment.production ? "env-prod" : ""}`}>{session.environment.name}</span>}
+        </div>
+        <div className="topbar-right">
+          <span className={`live ${live ? "on" : ""}`} title={live ? "Live: changes from anyone appear here immediately" : "Connecting to the change stream…"}>
+            <span className="dot" /> {live ? "Live" : "Connecting"}
+          </span>
+          {session && session.devUsers.length > 0 && (
+            <label className="identity">
+              <span className="sr-only">Signed in as</span>
+              <select
+                value={principal?.id ?? ""}
+                onChange={(e) => (e.target.value ? signInAsDevUser(e.target.value).catch(report) : signOut())}
+                aria-label="Signed in as"
+              >
+                <option value="">Signed out</option>
+                {session.devUsers.map((u) => (
+                  <option key={u.id} value={u.id}>
+                    {u.name} · {u.roles.join(", ")}
+                  </option>
+                ))}
+              </select>
+            </label>
+          )}
+          {session?.dashboard && (
+            <a className="dashboard-link" href={session.dashboard} target="_blank" rel="noreferrer">
+              Dashboard ↗
+            </a>
+          )}
+        </div>
+      </header>
+
+      {notice && (
+        <div className={`notice ${notice.tone}`} role="status">
+          {notice.text}
+          <button className="ghost" onClick={() => setNotice(null)} aria-label="Dismiss">
+            ×
+          </button>
+        </div>
+      )}
+
+      {!session ? (
+        <div className="center muted">Connecting…</div>
+      ) : !principal ? (
+        <SignedOut devUsers={session.devUsers} onSignIn={(id) => signInAsDevUser(id).catch(report)} />
+      ) : (
+        <Workspace canWrite={canWrite} canComplete={canComplete} role={principal.roles.join(", ")} onError={report} />
+      )}
+
+      <footer className="footer">
+        Every project, task, and note lives in this app’s single FeltDB instance. Changes made by other people, agents (through AppPort), and services appear here live.
+      </footer>
+    </div>
+  );
+}
+
+function SignedOut({ devUsers, onSignIn }: { devUsers: Array<{ id: string; name: string; roles: string[] }>; onSignIn: (id: string) => void }) {
+  return (
+    <div className="center">
+      <div className="card narrow">
+        <h1>Sign in</h1>
+        {devUsers.length ? (
+          <>
+            <p className="muted">Development identities from feltkit/app.ts:</p>
+            <div className="stack">
+              {devUsers.map((u) => (
+                <button key={u.id} className="secondary wide" onClick={() => onSignIn(u.id)}>
+                  {u.name} <span className="muted">· {u.roles.join(", ")}</span>
+                </button>
+              ))}
+            </div>
+          </>
+        ) : (
+          <p className="muted">This environment has no development sign-in. Configure auth.authenticate in feltkit/app.ts.</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Workspace({ canWrite, canComplete, role, onError }: { canWrite: boolean; canComplete: boolean; role: string; onError: (e: unknown) => void }) {
+  const projects = useQueryState(api.projects.list);
+  const [selected, setSelected] = useState<string | null>(null);
+  const createProject = useMutation(api.projects.create);
+  const [name, setName] = useState("");
+
+  const list = projects.data ?? [];
+  const current = useMemo(() => list.find((p) => p.id === selected) ?? list[0] ?? null, [list, selected]);
+
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!name.trim()) return;
+    try {
+      const id = await createProject({ name });
+      setName("");
+      setSelected(id);
+    } catch (error) {
+      onError(error);
+    }
+  };
+
+  if (projects.isLoading && !projects.data) return <div className="center muted">Loading projects…</div>;
+  if (projects.error && !projects.data) return <div className="center"><div className="card narrow error-text">{describe(projects.error)}</div></div>;
+
+  return (
+    <div className="workspace">
+      <aside className="sidebar" aria-label="Projects">
+        <div className="sidebar-title">Projects</div>
+        <nav>
+          {list.map((p) => (
+            <button key={p.id} className={`project ${current?.id === p.id ? "active" : ""}`} onClick={() => setSelected(p.id)}>
+              <span className="project-name">{p.name}</span>
+              <span className="count" title={`${p.open} open, ${p.done} done`}>
+                {p.open}
+              </span>
+            </button>
+          ))}
+        </nav>
+        {canWrite && (
+          <form onSubmit={submit} className="new-project">
+            <input value={name} onChange={(e) => setName(e.target.value)} placeholder="New project" aria-label="New project name" maxLength={80} />
+          </form>
+        )}
+        {!canWrite && <p className="hint">You’re signed in as a {role}. Viewers can read everything but change nothing.</p>}
+      </aside>
+      <main className="main">
+        {current ? (
+          <ProjectView key={current.id} project={current} canWrite={canWrite} canComplete={canComplete} onError={onError} />
+        ) : (
+          <div className="empty">
+            <h1>Start your first project</h1>
+            <p className="muted">Projects hold tasks. Name one in the sidebar{canWrite ? "" : " (sign in as a member)"} to begin.</p>
+            {canWrite && (
+              <form onSubmit={submit} className="inline-form">
+                <input autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Launch plan" aria-label="Project name" />
+                <button className="primary" type="submit" disabled={!name.trim()}>
+                  Create project
+                </button>
+              </form>
+            )}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
+
+type Project = { id: string; name: string; open: number; done: number };
+
+function ProjectView({ project, canWrite, canComplete, onError }: { project: Project; canWrite: boolean; canComplete: boolean; onError: (e: unknown) => void }) {
+  const tasks = useQueryState(api.tasks.list, { projectId: project.id });
+  const create = useMutation(api.tasks.create);
+  const [title, setTitle] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [openTask, setOpenTask] = useState<string | null>(null);
+
+  const add = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!title.trim()) return;
+    setBusy(true);
+    try {
+      await create({ projectId: project.id, title });
+      setTitle("");
+    } catch (error) {
+      onError(error);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const items = tasks.data ?? [];
+  const open = items.filter((t) => !t.done).length;
+  return (
+    <section aria-label={project.name}>
+      <div className="project-header">
+        <h1>{project.name}</h1>
+        <span className="muted">
+          {open} open · {items.length - open} done
+        </span>
+      </div>
+      {canWrite && (
+        <form onSubmit={add} className="add-task">
+          <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Add a task and press Enter" aria-label="New task" maxLength={200} disabled={busy} />
+        </form>
+      )}
+      {tasks.isLoading && !tasks.data ? (
+        <p className="muted pad">Loading tasks…</p>
+      ) : items.length === 0 ? (
+        <div className="empty small">
+          <p>No tasks yet.</p>
+          <p className="muted">{canWrite ? "Add one above." : "A member can add tasks."}</p>
+        </div>
+      ) : (
+        <ul className="tasks">
+          {items.map((task) => (
+            <TaskRow key={task.id} task={task} canWrite={canWrite} canComplete={canComplete} open={openTask === task.id} onToggleOpen={() => setOpenTask(openTask === task.id ? null : task.id)} onError={onError} />
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}
+
+type Task = { id: string; title: string; details?: string; done: boolean; createdBy: string; completedBy?: string };
+
+function TaskRow({ task, canWrite, canComplete, open, onToggleOpen, onError }: { task: Task; canWrite: boolean; canComplete: boolean; open: boolean; onToggleOpen: () => void; onError: (e: unknown) => void }) {
+  const setDone = useMutation(api.tasks.setDone);
+  const update = useMutation(api.tasks.update);
+  const remove = useMutation(api.tasks.remove);
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState(task.title);
+  const [details, setDetails] = useState(task.details ?? "");
+
+  useEffect(() => setDraft(task.title), [task.title]);
+  useEffect(() => setDetails(task.details ?? ""), [task.details]);
+
+  const save = async () => {
+    setEditing(false);
+    if (draft.trim() && draft.trim() !== task.title) await update({ id: task.id, title: draft }).catch(onError);
+    else setDraft(task.title);
+  };
+
+  return (
+    <li className={`task ${task.done ? "done" : ""} ${open ? "open" : ""}`}>
+      <div className="task-row">
+        <input type="checkbox" checked={task.done} disabled={!canComplete} onChange={(e) => setDone({ id: task.id, done: e.target.checked }).catch(onError)} aria-label={task.done ? "Reopen task" : "Complete task"} />
+        {editing ? (
+          <input
+            className="title-input"
+            value={draft}
+            autoFocus
+            onChange={(e) => setDraft(e.target.value)}
+            onBlur={save}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") void save();
+              if (e.key === "Escape") {
+                setDraft(task.title);
+                setEditing(false);
+              }
+            }}
+            aria-label="Task title"
+          />
+        ) : (
+          <button className="title" onClick={onToggleOpen} onDoubleClick={() => canWrite && setEditing(true)} aria-expanded={open}>
+            {task.title}
+          </button>
+        )}
+        <span className="by muted">{task.done && task.completedBy ? `done by ${task.completedBy}` : task.createdBy}</span>
+        {canWrite && !editing && (
+          <button className="ghost icon" onClick={() => setEditing(true)} aria-label="Rename task" title="Rename">
+            ✎
+          </button>
+        )}
+      </div>
+      {open && (
+        <div className="task-detail">
+          <label className="field">
+            <span>Details</span>
+            <textarea
+              value={details}
+              onChange={(e) => setDetails(e.target.value)}
+              onBlur={() => details !== (task.details ?? "") && update({ id: task.id, details }).catch(onError)}
+              placeholder={canWrite ? "Add details…" : "No details"}
+              readOnly={!canWrite}
+              rows={3}
+              maxLength={4000}
+            />
+          </label>
+          <Notes taskId={task.id} canWrite={canWrite} onError={onError} />
+          {canWrite && (
+            <div className="row-end">
+              <button className="danger-link" onClick={() => remove({ id: task.id }).catch(onError)}>
+                Delete task
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </li>
+  );
+}
+
+function Notes({ taskId, canWrite, onError }: { taskId: string; canWrite: boolean; onError: (e: unknown) => void }) {
+  const notes = useQueryState(api.tasks.notes, { taskId });
+  const addNote = useMutation(api.tasks.addNote);
+  const [text, setText] = useState("");
+  const submit = async (event: FormEvent) => {
+    event.preventDefault();
+    if (!text.trim()) return;
+    try {
+      await addNote({ taskId, text });
+      setText("");
+    } catch (error) {
+      onError(error);
+    }
+  };
+  return (
+    <div className="notes">
+      <div className="notes-title">
+        Notes <span className="muted">· stored by AppPort Services Files</span>
+      </div>
+      {(notes.data ?? []).map((n) => (
+        <div className="note" key={n.id}>
+          <div className="note-meta muted">
+            {n.author} · {new Date(n.createdAt).toLocaleString()}
+          </div>
+          <div className="note-text">{n.text}</div>
+        </div>
+      ))}
+      {notes.data?.length === 0 && <p className="muted small-text">No notes yet.</p>}
+      {canWrite && (
+        <form onSubmit={submit} className="note-form">
+          <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Leave a note" aria-label="New note" maxLength={8000} />
+          <button className="secondary" type="submit" disabled={!text.trim()}>
+            Add
+          </button>
+        </form>
+      )}
+    </div>
+  );
+}

package/template/src/main.tsx

@@ -0,0 +1,17 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { createClient } from "feltkit/client";
+import { FeltKitProvider } from "feltkit/react";
+import { App } from "./App";
+import "./styles.css";
+
+// Same origin as the page: `feltkit dev` serves the app, its functions, and AppPort together.
+const client = createClient();
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <FeltKitProvider client={client}>
+      <App />
+    </FeltKitProvider>
+  </StrictMode>,
+);

package/template/src/styles.css

@@ -0,0 +1,129 @@
+:root {
+  --bg: #f7f7f5;
+  --surface: #ffffff;
+  --ink: #1b1d1c;
+  --muted: #6b706d;
+  --line: #e4e5e1;
+  --accent: #166534;
+  --accent-ink: #ffffff;
+  --accent-soft: #e8f3ec;
+  --danger: #b42318;
+  --warn: #92400e;
+  --radius: 10px;
+  --shadow: 0 1px 2px rgba(16, 24, 20, 0.06), 0 2px 8px rgba(16, 24, 20, 0.04);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  color: var(--ink);
+  background: var(--bg);
+  font-size: 15px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #111312;
+    --surface: #181b1a;
+    --ink: #eceeed;
+    --muted: #9aa19d;
+    --line: #2a2f2c;
+    --accent: #4ade80;
+    --accent-ink: #052e16;
+    --accent-soft: #15301f;
+    --danger: #f97066;
+    --warn: #fbbf24;
+    --shadow: none;
+  }
+}
+* { box-sizing: border-box; }
+body { margin: 0; }
+button, input, select, textarea { font: inherit; color: inherit; }
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
+.muted { color: var(--muted); }
+.shell { min-height: 100vh; display: flex; flex-direction: column; }
+
+.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 2; }
+.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
+.mark { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); }
+.env { font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
+.env-prod { background: #fef3c7; color: var(--warn); }
+.topbar-right { display: flex; align-items: center; gap: 14px; }
+.live { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
+.live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
+.live.on .dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
+.identity select { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
+.dashboard-link { font-size: 13px; color: var(--muted); text-decoration: none; }
+.dashboard-link:hover { color: var(--ink); }
+
+.notice { margin: 12px 20px 0; padding: 10px 14px; border-radius: var(--radius); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
+.notice.error { background: #fef3f2; color: var(--danger); border: 1px solid #fecdca; }
+.notice.info { background: var(--accent-soft); color: var(--accent); }
+@media (prefers-color-scheme: dark) { .notice.error { background: #2a1513; border-color: #55201b; } }
+
+.workspace { flex: 1; display: grid; grid-template-columns: 260px 1fr; min-height: 0; }
+.sidebar { border-right: 1px solid var(--line); padding: 20px 12px; display: flex; flex-direction: column; gap: 6px; }
+.sidebar-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); padding: 0 10px 6px; }
+.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
+.project { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; }
+.project:hover { background: var(--surface); }
+.project.active { background: var(--surface); box-shadow: var(--shadow); font-weight: 600; }
+.project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.new-project input { width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 8px; background: transparent; }
+.new-project input:focus { border-style: solid; outline: 2px solid var(--accent-soft); }
+.hint { font-size: 13px; color: var(--muted); padding: 8px 10px; }
+
+.main { padding: 28px 36px 60px; max-width: 860px; width: 100%; }
+.project-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
+h1 { font-size: 24px; letter-spacing: -0.01em; margin: 0; }
+.add-task input { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
+.add-task input:focus, .title-input:focus, .note-form input:focus, textarea:focus, .inline-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
+
+.tasks { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 6px; }
+.task { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
+.task.open { box-shadow: var(--shadow); }
+.task-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
+.task-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; flex: none; }
+.title { flex: 1; text-align: left; border: 0; background: none; padding: 2px 0; cursor: pointer; }
+.task.done .title { color: var(--muted); text-decoration: line-through; }
+.title-input { flex: 1; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
+.by { font-size: 12px; }
+.task-detail { border-top: 1px solid var(--line); padding: 14px 16px 16px 42px; display: flex; flex-direction: column; gap: 14px; }
+.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
+textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); resize: vertical; color: var(--ink); }
+.notes-title { font-size: 13px; font-weight: 600; }
+.note { padding: 8px 10px; border-left: 2px solid var(--accent); background: var(--bg); border-radius: 0 8px 8px 0; margin-top: 6px; }
+.note-meta { font-size: 12px; }
+.note-text { white-space: pre-wrap; }
+.note-form, .inline-form { display: flex; gap: 8px; margin-top: 8px; }
+.note-form input, .inline-form input { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
+.row-end { display: flex; justify-content: flex-end; }
+.small-text { font-size: 13px; margin: 4px 0; }
+
+button.primary { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
+button.secondary { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; cursor: pointer; }
+button.secondary:hover { border-color: var(--muted); }
+button:disabled { opacity: 0.5; cursor: default; }
+button.ghost { background: none; border: 0; cursor: pointer; color: inherit; font-size: 18px; line-height: 1; }
+button.icon { color: var(--muted); font-size: 14px; opacity: 0; }
+.task-row:hover .icon, .task-row .icon:focus { opacity: 1; }
+.danger-link { background: none; border: 0; color: var(--danger); cursor: pointer; font-size: 13px; }
+.wide { width: 100%; text-align: left; }
+.stack { display: flex; flex-direction: column; gap: 8px; }
+
+.empty { margin-top: 12vh; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
+.empty.small { margin-top: 36px; }
+.empty p { margin: 0; }
+.center { flex: 1; display: grid; place-items: center; padding: 40px; }
+.card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); }
+.narrow { width: min(420px, 100%); }
+.card h1 { margin-bottom: 8px; }
+.error-text { color: var(--danger); }
+.pad { padding: 12px 0; }
+.footer { padding: 14px 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); text-align: center; }
+
+@media (max-width: 720px) {
+  .workspace { grid-template-columns: 1fr; }
+  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
+  .main { padding: 20px 16px 48px; }
+  .topbar { flex-wrap: wrap; }
+  .task-detail { padding-left: 16px; }
+}

package/template/tests/tasks.test.ts

@@ -0,0 +1,101 @@
+/**
+ * Run with `npm test` (`feltkit test`). Each test app gets its own FeltDB instance
+ * in a temporary directory — real storage, nothing shared with development.
+ */
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { createTestApp } from "feltkit/testing";
+import { api } from "../feltkit/_generated/api.js";
+
+test("members manage projects and tasks", async () => {
+  const t = await createTestApp();
+  try {
+    const ada = t.as("ada");
+    const projectId = await ada.mutation(api.projects.create, { name: "Launch" });
+    const taskId = await ada.mutation(api.tasks.create, { projectId, title: "Write the README" });
+    await ada.mutation(api.tasks.update, { id: taskId, details: "Cover the first five minutes." });
+    await ada.mutation(api.tasks.setDone, { id: taskId, done: true });
+
+    const [task] = await ada.query(api.tasks.list, { projectId });
+    assert.equal(task!.title, "Write the README");
+    assert.equal(task!.details, "Cover the first five minutes.");
+    assert.equal(task!.done, true);
+    assert.equal(task!.completedBy, "ada");
+
+    const [project] = await ada.query(api.projects.list);
+    assert.deepEqual({ open: project!.open, done: project!.done }, { open: 0, done: 1 });
+  } finally {
+    await t.close();
+  }
+});
+
+test("viewers can read but not write; anonymous callers can do neither", async () => {
+  const t = await createTestApp();
+  try {
+    const projectId = await t.as("ada").mutation(api.projects.create, { name: "Docs" });
+    const grace = t.as("grace");
+    assert.equal((await grace.query(api.projects.list)).length, 1);
+    await assert.rejects(grace.mutation(api.tasks.create, { projectId, title: "nope" }), { code: "FORBIDDEN" });
+    await assert.rejects(t.query(api.projects.list), { code: "UNAUTHORIZED" });
+  } finally {
+    await t.close();
+  }
+});
+
+test("notes are stored by the Files service and readable by viewers", async () => {
+  const t = await createTestApp();
+  try {
+    const ada = t.as("ada");
+    const projectId = await ada.mutation(api.projects.create, { name: "Research" });
+    const taskId = await ada.mutation(api.tasks.create, { projectId, title: "Read the paper" });
+    await ada.mutation(api.tasks.addNote, { taskId, text: "Section 3 is the important one." });
+    const notes = await t.as("grace").query(api.tasks.notes, { taskId });
+    assert.deepEqual(notes.map((n) => [n.author, n.text]), [["ada", "Section 3 is the important one."]]);
+    await assert.rejects(t.as("grace").mutation(api.tasks.addNote, { taskId, text: "x" }), { code: "FORBIDDEN" });
+  } finally {
+    await t.close();
+  }
+});
+
+test("deleting a project removes its tasks in one atomic commit", async () => {
+  const t = await createTestApp();
+  try {
+    const ada = t.as("ada");
+    const projectId = await ada.mutation(api.projects.create, { name: "Temporary" });
+    await ada.mutation(api.tasks.create, { projectId, title: "a" });
+    await ada.mutation(api.tasks.create, { projectId, title: "b" });
+    await ada.mutation(api.projects.remove, { id: projectId });
+    assert.deepEqual(await ada.query(api.projects.list), []);
+    assert.deepEqual(await ada.query(api.tasks.list, { projectId }), []);
+    const entry = (await t.runtime.activity.list({ name: "projects:remove" }))[0]!;
+    assert.deepEqual(entry.writes!.map((w) => w.op).sort(), ["delete", "delete", "delete"]);
+  } finally {
+    await t.close();
+  }
+});
+
+test("an agent can complete tasks and leave notes, but not create them", async () => {
+  const t = await createTestApp();
+  try {
+    const projectId = await t.as("ada").mutation(api.projects.create, { name: "Ops" });
+    const taskId = await t.as("ada").mutation(api.tasks.create, { projectId, title: "Rotate keys" });
+    const agent = t.as({ id: "ops-bot", type: "agent", roles: ["agent"] });
+    await agent.mutation(api.tasks.setDone, { id: taskId, done: true });
+    await agent.mutation(api.tasks.addNote, { taskId, text: "Rotated." });
+    await assert.rejects(agent.mutation(api.tasks.create, { projectId, title: "x" }), { code: "FORBIDDEN" });
+  } finally {
+    await t.close();
+  }
+});
+
+test("state survives a restart", async () => {
+  const t = await createTestApp();
+  try {
+    const projectId = await t.as("ada").mutation(api.projects.create, { name: "Durable" });
+    await t.restart();
+    const [project] = await t.as("ada").query(api.projects.list);
+    assert.equal(project!.id, projectId);
+  } finally {
+    await t.close();
+  }
+});

package/template/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "types": ["node", "vite/client"]
+  },
+  "include": ["src", "feltkit", "tests", "vite.config.ts"]
+}

package/template/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+});