eraspace 0.0.0-stage → 0.2.0

package/templates/chat/client/styles.css

@@ -0,0 +1,43 @@
+@layer base {
+  :root { color-scheme: dark; font-family: system-ui, sans-serif; background: #000; color: #fff; }
+  body { margin: 0; }
+  main { max-width: 760px; margin: 0 auto; padding: 28px 20px; }
+  header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #333; padding-bottom: 18px; }
+  h1 { font-family: ui-monospace, monospace; font-size: 24px; letter-spacing: -1px; margin: 0; }
+  h2 { font-size: 20px; margin: 32px 0 16px; }
+  p { line-height: 1.5; }
+  ul { list-style: none; padding: 0; }
+  li { padding: 14px 0; border-bottom: 1px solid #333; display: flex; gap: 12px; align-items: baseline; }
+  li > span { flex: 1; overflow-wrap: anywhere; }
+  form { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
+  input { background: #000; border: 1px solid #666; padding: 10px; color: #fff; min-width: 0; flex: 1; }
+  input[type=checkbox] { flex: none; accent-color: #fff; }
+  button { background: #fff; color: #000; padding: 10px 16px; border: 1px solid #fff; cursor: pointer; }
+  button:disabled { opacity: .5; cursor: default; }
+  button.subtle { background: #000; color: #fff; border-color: #666; }
+  :focus-visible { outline: 2px solid #83b5ff; outline-offset: 3px; }
+  small, time { font-family: ui-monospace, monospace; font-size: 12px; }
+  [role=alert] { color: #ff9a9a; }
+  meter { flex: 1; width: 100%; }
+  meter::-webkit-meter-bar { background: #222; border: 0; border-radius: 0; }
+  meter::-webkit-meter-optimum-value { background: #fff; }
+  meter::-moz-meter-bar { background: #fff; }
+  .done { text-decoration: line-through; }
+  .presence { padding: 12px 0; font-size: 13px; }
+  .attach { flex-basis: 100%; padding: 10px; border: 1px dashed #666; color: #aaa; font-size: 13px; text-align: center; cursor: pointer; position: relative; }
+  .attach[data-dragging], .attach:hover, .attach:focus-within { border-color: #fff; color: #fff; }
+  .attach progress { display: block; width: 100%; margin-top: 6px; accent-color: #fff; }
+  .pending { flex-basis: 100%; display: flex; align-items: center; gap: 12px; font-size: 13px; }
+  .pending > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  li:has(.attachment) { align-items: flex-start; }
+  .attachment { margin: 8px 0 0; }
+  li > span > .attachment:first-child { margin-top: 0; }
+  .attachment img, .attachment video { display: block; max-width: 100%; max-height: 280px; border: 1px solid #333; }
+  .pending .attachment { margin: 0; }
+  .pending .attachment img { max-height: 48px; }
+  .attachment audio { display: block; width: 100%; }
+  .attachment iframe { display: block; width: 100%; height: 160px; border: 1px solid #333; background: #fff; }
+  .attachment a { color: #ccc; display: inline-flex; gap: 8px; }
+  .attachment figcaption { display: flex; gap: 8px; margin-top: 4px; font-size: 12px; color: #888; }
+  @media (max-width: 480px) { main { padding: 20px 12px; } li { flex-wrap: wrap; } }
+}

package/templates/chat/server/index.ts

@@ -0,0 +1,27 @@
+import { capsule, table, query, mutation, endpoint, string, number, object, text } from "eraspace/server";
+type Attachment = { key: string; name: string; contentType: string; size: number };
+const KEY = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
+export default capsule({
+  schema: {
+    messages: table({
+      room: string(), author: string(), body: string(),
+      // A file in app storage, saved from the client's FileUpload.
+      file: object({ key: string(), name: string(), contentType: string(), size: number() }).optional(),
+    }).index("by_room", ["room"]),
+  },
+  queries: {
+    messages: query(async (ctx, room: string) => ctx.db.messages.withIndex("by_room", q => q.eq("room", room)).order("desc").take(100)),
+  },
+  mutations: {
+    send: mutation(async (ctx, room: string, author: string, body: string, file?: Attachment | null) => {
+      const trimmed = body.trim();
+      if (trimmed.length > 2000 || (!trimmed && !file)) throw new Error("Write a message of 1 to 2000 characters.");
+      if (file && (!KEY.test(String(file.key)) || typeof file.name !== "string" || typeof file.contentType !== "string" || !Number.isInteger(file.size) || file.size < 0)) throw new Error("That attachment is not a stored file.");
+      const name = author.trim().slice(0, 40) || "Guest";
+      ctx.log.info("message sent", { room });
+      const attachment = file ? { key: file.key, name: file.name.slice(0, 255) || "file", contentType: file.contentType.slice(0, 256), size: file.size } : undefined;
+      return ctx.db.messages.insert({ room, author: name, body: trimmed, file: attachment });
+    }),
+  },
+  endpoints: { hi: endpoint({ method: "GET", path: "/hi", readOnly: true }, () => text("hello from eraspace")) },
+});

package/templates/poll/client/index.tsx

@@ -0,0 +1,24 @@
+import { createClient } from "eraspace/client";
+import { useState } from "preact/hooks";
+import type app from "../server/index";
+const client = createClient<typeof app>({ reloadOnDeploy: true });
+export default function App() {
+  const options = client.useQuery("results");
+  const add = client.useMutation("addOption");
+  const vote = client.useMutation("vote", { optimistic(store, id) { store.update("results", [], rows => rows.map(row => row.id === id ? { ...row, votes: row.votes + 1 } : row)); } });
+  const [label, setLabel] = useState("");
+  const [error, setError] = useState("");
+  const total = options?.reduce((sum, option) => sum + option.votes, 0) ?? 0;
+  return <main>
+    <header><h1>live poll</h1><small>{total} {total === 1 ? "vote" : "votes"}</small></header>
+    <h2>What should we build next?</h2>
+    {options === undefined ? <p>Loading options…</p> : options.length === 0 ? <p>Add an option to start voting.</p> : <ul>{options.map(option => <li key={option.id}>
+      <span>{option.label}</span><meter min={0} max={Math.max(1, total)} value={option.votes} aria-label={`${option.votes} votes`}/><small>{option.votes}</small>
+      <button onClick={() => { setError(""); void vote(option.id).catch(error => setError(error instanceof Error ? error.message : String(error))); }}>Vote</button>
+    </li>)}</ul>}
+    <form onSubmit={async e => { e.preventDefault(); setError(""); try { await add(label); setLabel(""); } catch (error) { setError(error instanceof Error ? error.message : String(error)); } }}>
+      <input aria-label="New option" placeholder="Add an option" value={label} maxLength={100} onInput={e => setLabel(e.currentTarget.value)} required/><button disabled={!label.trim()}>Add option</button>
+    </form>
+    {error && <p role="alert">{error}</p>}
+  </main>;
+}

package/templates/poll/client/styles.css

@@ -0,0 +1,28 @@
+@layer base {
+  :root { color-scheme: dark; font-family: system-ui, sans-serif; background: #000; color: #fff; }
+  body { margin: 0; }
+  main { max-width: 760px; margin: 0 auto; padding: 28px 20px; }
+  header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #333; padding-bottom: 18px; }
+  h1 { font-family: ui-monospace, monospace; font-size: 24px; letter-spacing: -1px; margin: 0; }
+  h2 { font-size: 20px; margin: 32px 0 16px; }
+  p { line-height: 1.5; }
+  ul { list-style: none; padding: 0; }
+  li { padding: 14px 0; border-bottom: 1px solid #333; display: flex; gap: 12px; align-items: baseline; }
+  li > span { flex: 1; overflow-wrap: anywhere; }
+  form { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
+  input { background: #000; border: 1px solid #666; padding: 10px; color: #fff; min-width: 0; flex: 1; }
+  input[type=checkbox] { flex: none; accent-color: #fff; }
+  button { background: #fff; color: #000; padding: 10px 16px; border: 1px solid #fff; cursor: pointer; }
+  button:disabled { opacity: .5; cursor: default; }
+  button.subtle { background: #000; color: #fff; border-color: #666; }
+  :focus-visible { outline: 2px solid #83b5ff; outline-offset: 3px; }
+  small, time { font-family: ui-monospace, monospace; font-size: 12px; }
+  [role=alert] { color: #ff9a9a; }
+  meter { flex: 1; width: 100%; }
+  meter::-webkit-meter-bar { background: #222; border: 0; border-radius: 0; }
+  meter::-webkit-meter-optimum-value { background: #fff; }
+  meter::-moz-meter-bar { background: #fff; }
+  .done { text-decoration: line-through; }
+  .presence { padding: 12px 0; font-size: 13px; }
+  @media (max-width: 480px) { main { padding: 20px 12px; } li { flex-wrap: wrap; } }
+}

package/templates/poll/server/index.ts

@@ -0,0 +1,17 @@
+import { capsule, table, query, mutation, string, number } from "eraspace/server";
+export default capsule({
+  schema: { options: table({ label: string(), votes: number().default(0) }) },
+  queries: { results: query(async ctx => ctx.db.options.collect()) },
+  mutations: {
+    addOption: mutation(async (ctx, label: string) => {
+      const trimmed = label.trim();
+      if (!trimmed || trimmed.length > 100) throw new Error("Use an option of 1 to 100 characters.");
+      return ctx.db.options.insert({ label: trimmed, votes: 0 });
+    }),
+    vote: mutation(async (ctx, id: string) => {
+      const option = await ctx.db.options.get(id);
+      if (!option) throw new Error("Option no longer exists.");
+      await ctx.db.options.update(id, { votes: option.votes + 1 });
+    }),
+  },
+});

package/templates/todo/client/index.tsx

@@ -0,0 +1,26 @@
+import { createClient } from "eraspace/client";
+import { useState } from "preact/hooks";
+import type app from "../server/index";
+const client = createClient<typeof app>({ reloadOnDeploy: true });
+export default function App() {
+  const todos = client.useQuery("list");
+  const [title, setTitle] = useState("");
+  const [error, setError] = useState("");
+  const [adding, setAdding] = useState(false);
+  const add = client.useMutation("add");
+  const toggle = client.useMutation("toggle", { optimistic(store, id) { store.update("list", [], rows => rows.map(row => row.id === id ? { ...row, done: !row.done } : row)); } });
+  const remove = client.useMutation("remove", { optimistic(store, id) { store.update("list", [], rows => rows.filter(row => row.id !== id)); } });
+  function report(error: unknown) { setError(error instanceof Error ? error.message : String(error)); }
+  return <main>
+    <header><h1>todos</h1><small>{todos?.filter(todo => !todo.done).length ?? 0} remaining</small></header>
+    <form onSubmit={async e => { e.preventDefault(); setError(""); setAdding(true); try { await add(title); setTitle(""); } catch (error) { report(error); } finally { setAdding(false); } }}>
+      <input aria-label="New task" placeholder="What needs doing?" value={title} onInput={e => setTitle(e.currentTarget.value)} maxLength={200} required/><button disabled={adding || !title.trim()}>Add task</button>
+    </form>
+    {todos === undefined ? <p>Loading tasks…</p> : todos.length === 0 ? <p>Add your first task.</p> : <ul>{todos.map(todo => <li key={todo.id}>
+      <input type="checkbox" aria-label={`Complete ${todo.title}`} checked={todo.done} onChange={() => { setError(""); void toggle(todo.id).catch(report); }}/>
+      <span class={todo.done ? "done" : ""}>{todo.title}</span>
+      <button class="subtle" onClick={() => { setError(""); void remove(todo.id).catch(report); }}>Delete</button>
+    </li>)}</ul>}
+    {error && <p role="alert">{error}</p>}
+  </main>;
+}

package/templates/todo/client/styles.css

@@ -0,0 +1,28 @@
+@layer base {
+  :root { color-scheme: dark; font-family: system-ui, sans-serif; background: #000; color: #fff; }
+  body { margin: 0; }
+  main { max-width: 760px; margin: 0 auto; padding: 28px 20px; }
+  header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid #333; padding-bottom: 18px; }
+  h1 { font-family: ui-monospace, monospace; font-size: 24px; letter-spacing: -1px; margin: 0; }
+  h2 { font-size: 20px; margin: 32px 0 16px; }
+  p { line-height: 1.5; }
+  ul { list-style: none; padding: 0; }
+  li { padding: 14px 0; border-bottom: 1px solid #333; display: flex; gap: 12px; align-items: baseline; }
+  li > span { flex: 1; overflow-wrap: anywhere; }
+  form { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
+  input { background: #000; border: 1px solid #666; padding: 10px; color: #fff; min-width: 0; flex: 1; }
+  input[type=checkbox] { flex: none; accent-color: #fff; }
+  button { background: #fff; color: #000; padding: 10px 16px; border: 1px solid #fff; cursor: pointer; }
+  button:disabled { opacity: .5; cursor: default; }
+  button.subtle { background: #000; color: #fff; border-color: #666; }
+  :focus-visible { outline: 2px solid #83b5ff; outline-offset: 3px; }
+  small, time { font-family: ui-monospace, monospace; font-size: 12px; }
+  [role=alert] { color: #ff9a9a; }
+  meter { flex: 1; width: 100%; }
+  meter::-webkit-meter-bar { background: #222; border: 0; border-radius: 0; }
+  meter::-webkit-meter-optimum-value { background: #fff; }
+  meter::-moz-meter-bar { background: #fff; }
+  .done { text-decoration: line-through; }
+  .presence { padding: 12px 0; font-size: 13px; }
+  @media (max-width: 480px) { main { padding: 20px 12px; } li { flex-wrap: wrap; } }
+}

package/templates/todo/server/index.ts

@@ -0,0 +1,18 @@
+import { capsule, table, query, mutation, string, boolean } from "eraspace/server";
+export default capsule({
+  schema: { todos: table({ title: string(), done: boolean().default(false) }) },
+  queries: { list: query(async ctx => ctx.db.todos.order("desc").take(200)) },
+  mutations: {
+    add: mutation(async (ctx, title: string) => {
+      const trimmed = title.trim();
+      if (!trimmed || trimmed.length > 200) throw new Error("Use a title of 1 to 200 characters.");
+      return ctx.db.todos.insert({ title: trimmed, done: false });
+    }),
+    toggle: mutation(async (ctx, id: string) => {
+      const todo = await ctx.db.todos.get(id);
+      if (!todo) throw new Error("Todo no longer exists.");
+      await ctx.db.todos.update(id, { done: !todo.done });
+    }),
+    remove: mutation(async (ctx, id: string) => ctx.db.todos.delete(id)),
+  },
+});