forgeos 0.1.0-alpha.0

package/templates/minimal-web/web/src/App.tsx

@@ -0,0 +1,89 @@
+import { FormEvent, useState } from "react";
+import { api, useCommand, useLiveQuery } from "./lib/forge";
+
+type Note = {
+  id: string;
+  title: string;
+  body?: string;
+  status?: string;
+  createdAt?: string;
+};
+
+export function App() {
+  const notes = useLiveQuery<Note[]>(api.liveQueries.liveNotes, {});
+  const createNote = useCommand<{ title: string; body?: string }, Note>(
+    api.commands.createNote,
+    {
+      onSuccess: () => {
+        setTitle("");
+        setBody("");
+      },
+    },
+  );
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+
+  const submit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const trimmedTitle = title.trim();
+    if (!trimmedTitle) {
+      return;
+    }
+    void createNote.run({
+      title: trimmedTitle,
+      body: body.trim(),
+    });
+  };
+
+  return (
+    <main className="shell">
+      <section className="header">
+        <p className="eyebrow">ForgeOS minimal-web</p>
+        <h1>Notes</h1>
+      </section>
+
+      <form className="composer" onSubmit={submit}>
+        <label>
+          <span>Title</span>
+          <input
+            value={title}
+            onChange={(event) => setTitle(event.target.value)}
+            placeholder="Ship the full-stack loop"
+          />
+        </label>
+        <label>
+          <span>Body</span>
+          <textarea
+            value={body}
+            onChange={(event) => setBody(event.target.value)}
+            placeholder="Optional note"
+          />
+        </label>
+        <button disabled={createNote.loading || !title.trim()} type="submit">
+          {createNote.loading ? "Creating..." : "Create note"}
+        </button>
+        {createNote.error ? <p className="error">{createNote.error.message}</p> : null}
+      </form>
+
+      <section className="notes">
+        <div className="section-heading">
+          <h2>Live notes</h2>
+          <span>{notes.data?.length ?? 0}</span>
+        </div>
+        {notes.loading ? <p className="muted">Loading notes...</p> : null}
+        {notes.error ? <p className="error">{notes.error.message}</p> : null}
+        {!notes.loading && !notes.error && (notes.data?.length ?? 0) === 0 ? (
+          <p className="muted">No notes yet.</p>
+        ) : null}
+        <ul>
+          {notes.data?.map((note) => (
+            <li key={note.id}>
+              <strong>{note.title}</strong>
+              {note.body ? <p>{note.body}</p> : null}
+            </li>
+          ))}
+        </ul>
+      </section>
+    </main>
+  );
+}

package/templates/minimal-web/web/src/lib/forge.ts

@@ -0,0 +1,13 @@
+export const forgeUrl =
+  import.meta.env.VITE_FORGE_URL ?? "http://127.0.0.1:3765";
+
+export { api } from "../../../src/forge/_generated/api";
+export { createForgeClient, ForgeError } from "../../../src/forge/_generated/client";
+export {
+  ForgeProvider,
+  useAuth,
+  useCommand,
+  useForgeClient,
+  useLiveQuery,
+  useQuery,
+} from "../../../src/forge/_generated/react";

package/templates/minimal-web/web/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import { ForgeProvider, forgeUrl } from "./lib/forge";
+import "./styles.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ForgeProvider url={forgeUrl} devAuth>
+      <App />
+    </ForgeProvider>
+  </StrictMode>,
+);

package/templates/minimal-web/web/src/styles.css

@@ -0,0 +1,156 @@
+:root {
+  color: #17211d;
+  background: #f6f5ef;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+}
+
+button,
+input,
+textarea {
+  font: inherit;
+}
+
+.shell {
+  width: min(780px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 48px 0;
+}
+
+.header {
+  margin-bottom: 24px;
+}
+
+.eyebrow {
+  margin: 0 0 6px;
+  color: #58655f;
+  font-size: 0.82rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+h1,
+h2,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  margin-bottom: 0;
+  font-size: 2.4rem;
+}
+
+.composer,
+.notes {
+  border: 1px solid #d9ddd0;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 18px;
+}
+
+.composer {
+  display: grid;
+  gap: 14px;
+  margin-bottom: 18px;
+}
+
+label {
+  display: grid;
+  gap: 6px;
+  color: #39423e;
+  font-size: 0.92rem;
+  font-weight: 700;
+}
+
+input,
+textarea {
+  width: 100%;
+  border: 1px solid #cfd5c6;
+  border-radius: 6px;
+  padding: 10px 12px;
+  color: #17211d;
+  background: #fbfcf8;
+}
+
+textarea {
+  min-height: 96px;
+  resize: vertical;
+}
+
+button {
+  justify-self: start;
+  min-height: 40px;
+  border: 0;
+  border-radius: 6px;
+  padding: 0 14px;
+  color: #ffffff;
+  background: #1f6f54;
+  font-weight: 800;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.section-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.section-heading h2 {
+  margin: 0;
+  font-size: 1.1rem;
+}
+
+.section-heading span {
+  display: inline-grid;
+  min-width: 28px;
+  height: 28px;
+  place-items: center;
+  border-radius: 999px;
+  color: #1f6f54;
+  background: #e4f2ec;
+  font-weight: 800;
+}
+
+ul {
+  display: grid;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+li {
+  border: 1px solid #edf0e7;
+  border-radius: 6px;
+  padding: 12px;
+  background: #fbfcf8;
+}
+
+li p {
+  margin: 5px 0 0;
+  color: #58655f;
+}
+
+.muted {
+  color: #6b746f;
+}
+
+.error {
+  margin-bottom: 0;
+  color: #b3261e;
+}

package/templates/minimal-web/web/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "types": [
+      "vite/client"
+    ]
+  },
+  "include": [
+    "src"
+  ]
+}