toiljs 0.0.46 → 0.0.48

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "toiljs",
     "type": "module",
-    "version": "0.0.46",
+    "version": "0.0.48",
     "author": "Dacely",
     "description": "The modern React framework: a file-based React frontend and a ToilScript-compiled WebAssembly backend.",
     "repository": {
@@ -130,7 +130,7 @@
         "nodemailer": "^9.0.0",
         "picocolors": "^1.1.1",
         "sharp": "^0.35.0",
-        "toilscript": "^0.1.25",
+        "toilscript": "^0.1.26",
         "typescript-eslint": "^8.60.0",
         "vite": "^8.0.14",
         "vite-imagetools": "^10.0.0",

package/src/cli/create.ts

@@ -114,7 +114,7 @@ function scaffold(
         '@types/react-dom': '^19.2.3',
         eslint: '^10.2.0',
         prettier: '^3.8.1',
-        toilscript: '^0.1.18',
+        toilscript: '^0.1.26',
         typescript: '^6.0.3',
     };
     for (const dep of requiredPackages(features).sort()) {

package/src/cli/diagnostics.ts

@@ -402,8 +402,8 @@ export function checkWasmBuilt(exists: boolean): Check {
 
 // --- Typed RPC (@data / @remote / @service) -------------------------------------------------------
 
-/** Minimum toilscript: @rest/@route HTTP layer + RPC codegen + hardened decoders + @data editor decls. */
-export const RPC_TOILSCRIPT_MIN = '0.1.15';
+/** Minimum toilscript: @rest/@route HTTP layer + RPC codegen + hardened decoders + correct @data editor decls (TS2395 fix). */
+export const RPC_TOILSCRIPT_MIN = '0.1.26';
 
 /** Whether each piece of the typed-RPC wiring is in place (computed in `doctor.ts`). */
 export interface RpcFacts {

package/src/compiler/email-preview.ts

@@ -122,46 +122,53 @@ export function previewShellHtml(): string {
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>Email preview · toiljs</title>
 <style>
-  :root { color-scheme: dark; }
+  /* Matches the toiljs demo brand (examples/basic/client/styles/main.css). */
+  :root {
+    color-scheme: dark;
+    --bg: #080d11; --surface: #0e1520; --surface2: #131d2e; --border: #1b2330;
+    --text: #f5f6fa; --muted: #8b9ab4; --accent: #2563ff; --accent3: #22e3ab;
+  }
   * { box-sizing: border-box; }
-  body { margin: 0; height: 100vh; display: flex; font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: #0c0c11; color: #e7e9f0; }
-  #side { width: 240px; flex: 0 0 auto; border-right: 1px solid #23232e; display: flex; flex-direction: column; background: #101016; }
-  .brand { padding: 14px 16px; font-weight: 600; border-bottom: 1px solid #23232e; }
-  #list { list-style: none; margin: 0; padding: 6px; overflow: auto; flex: 1; }
-  #list li { padding: 8px 10px; border-radius: 8px; cursor: pointer; color: #c8cee0; }
-  #list li:hover { background: #181820; }
-  #list li.on { background: #1d1d6b33; color: #fff; }
-  #list li.muted { color: #6b7080; cursor: default; }
-  .hint { padding: 10px 16px; font-size: 12px; color: #6b7080; border-top: 1px solid #23232e; }
-  .hint code { color: #9aa1b8; }
+  body { margin: 0; height: 100vh; display: flex; font: 14px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); }
+  #side { width: 248px; flex: 0 0 auto; border-right: 1px solid var(--border); display: flex; flex-direction: column; background: var(--surface); }
+  .brand { display: flex; align-items: center; gap: 10px; padding: 15px 16px; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: -0.01em; border-bottom: 1px solid var(--border); }
+  .brand .mark { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; background: linear-gradient(135deg, var(--accent), #7c3aed 55%, var(--accent3)); }
+  #list { list-style: none; margin: 0; padding: 8px; overflow: auto; flex: 1; }
+  #list li { padding: 8px 11px; border-radius: 8px; cursor: pointer; color: var(--muted); transition: background 150ms, color 150ms; }
+  #list li:hover { background: rgba(255,255,255,0.04); color: var(--text); }
+  #list li.on { background: rgba(37,99,255,0.14); color: #fff; box-shadow: inset 2px 0 0 var(--accent); }
+  #list li.muted, #list li.muted:hover { color: #5d6a82; cursor: default; background: none; }
+  .hint { padding: 12px 16px; font-size: 12px; color: #5d6a82; border-top: 1px solid var(--border); }
+  .hint code { color: var(--muted); }
   #main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-  .empty { margin: auto; color: #6b7080; }
+  .empty { margin: auto; color: #5d6a82; }
   #view { display: flex; flex-direction: column; height: 100%; }
-  .bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #23232e; }
-  .subj { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 8px; }
-  .subj .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7080; }
-  #subject { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
+  .subj { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 9px; }
+  .subj .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #5d6a82; }
+  #subject { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
-  .seg { display: flex; border: 1px solid #2c2c38; border-radius: 8px; overflow: hidden; }
-  .seg-btn { background: #15151c; border: 0; color: #8b90a4; font: inherit; padding: 6px 12px; cursor: pointer; }
-  .seg-btn.on { background: #2563ff; color: #fff; }
-  .btn { background: #15151c; border: 1px solid #2c2c38; color: #c8cee0; font: inherit; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
-  .btn:hover { color: #fff; border-color: #3a3a48; }
+  .seg { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
+  .seg-btn { background: var(--surface); border: 0; color: var(--muted); font: inherit; padding: 6px 14px; cursor: pointer; transition: color 150ms; }
+  .seg-btn:hover { color: var(--text); }
+  .seg-btn.on { background: var(--accent); color: #fff; }
+  .btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); font: inherit; padding: 6px 13px; border-radius: 8px; cursor: pointer; transition: border-color 150ms, background 150ms; }
+  .btn:hover { border-color: var(--accent); background: var(--surface2); }
   .body { display: flex; flex: 1; min-height: 0; }
-  .tokens { width: 240px; flex: 0 0 auto; border-right: 1px solid #23232e; padding: 12px; overflow: auto; }
-  .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
-  .fname { font-size: 12px; color: #9aa1b8; }
-  .field input { background: #0c0c11; border: 1px solid #2c2c38; border-radius: 6px; color: #e7e9f0; font: inherit; padding: 6px 8px; }
-  .field input:focus { outline: none; border-color: #2563ff; }
-  .muted { color: #6b7080; font-size: 12px; }
-  .preview { flex: 1; min-width: 0; background: #f6f7f9; }
-  #frame { width: 100%; height: 100%; border: 0; background: #fff; }
-  #text { width: 100%; height: 100%; margin: 0; padding: 16px; overflow: auto; background: #0c0c11; color: #c8cee0; white-space: pre-wrap; }
+  .tokens { width: 248px; flex: 0 0 auto; border-right: 1px solid var(--border); padding: 14px; overflow: auto; }
+  .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
+  .fname { font-size: 12px; color: var(--muted); }
+  .field input { background: var(--bg); border: 1px solid var(--border); border-radius: 7px; color: var(--text); font: inherit; padding: 7px 9px; }
+  .field input:focus { outline: none; border-color: var(--accent); }
+  .muted { color: #5d6a82; font-size: 12px; }
+  .preview { flex: 1; min-width: 0; display: flex; background: var(--bg); padding: 18px; }
+  #frame { flex: 1; width: 100%; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
+  #text { flex: 1; width: 100%; margin: 0; padding: 18px; overflow: auto; background: var(--surface); color: var(--muted); white-space: pre-wrap; border: 1px solid var(--border); border-radius: 12px; font: 13px/1.6 'SFMono-Regular', Consolas, monospace; }
 </style>
 </head>
 <body>
 <aside id="side">
-  <div class="brand">✉ Emails</div>
+  <div class="brand"><span class="mark">✦</span>Emails</div>
   <ul id="list"></ul>
   <div class="hint">Author in <code>emails/*.tsx</code>; this updates live on save.</div>
 </aside>

package/src/compiler/emails.ts

@@ -21,6 +21,7 @@
 import fs from 'node:fs';
 import path from 'node:path';
 
+import pc from 'picocolors';
 import { createServer, type ViteDevServer } from 'vite';
 
 import type { ResolvedToilConfig } from './config.js';
@@ -371,9 +372,13 @@ export async function renderEmails(cfg: ResolvedToilConfig): Promise<void> {
     fs.mkdirSync(path.dirname(generatedPath), { recursive: true });
     fs.writeFileSync(generatedPath, next);
     process.stdout.write(
-        `  ✓ emails: generated ${String(rendered.length)} template${rendered.length === 1 ? '' : 's'} (${rendered
-            .map((r) => r.name)
-            .join(', ')})\n`,
+        pc.green('  ✓ ') +
+            pc.dim(
+                `emails: generated ${String(rendered.length)} template${rendered.length === 1 ? '' : 's'} (${rendered
+                    .map((r) => r.name)
+                    .join(', ')})`,
+            ) +
+            '\n',
     );
 }
 

package/src/compiler/index.ts

@@ -228,6 +228,33 @@ function watchServer(cfg: ResolvedToilConfig, watcher: ViteDevServer['watcher'])
     });
 }
 
+/**
+ * Make `Ctrl+C` actually kill the dev server. Without this the process can hang
+ * on shutdown (the native uWebSockets listener / Vite's watcher don't always
+ * close promptly), so an old `toiljs dev` is left ORPHANED — still watching and
+ * rebuilding — and the next run races it (parallel double rebuilds), while the
+ * console is left with a hidden cursor. On SIGINT/SIGTERM we restore the cursor,
+ * close the servers, and force-exit after a short grace period no matter what.
+ */
+function installDevShutdown(close: () => Promise<void> | void): void {
+    let closing = false;
+    const shutdown = (): void => {
+        if (closing) return;
+        closing = true;
+        // Restore the cursor (anything that hid it leaves the terminal odd on exit).
+        process.stdout.write('\x1b[?25h');
+        process.stdout.write(pc.dim('\n  shutting down dev server…') + '\n');
+        // Force-exit even if a server hangs on close (the orphan-prevention).
+        const hard = setTimeout(() => process.exit(0), 1500);
+        hard.unref();
+        Promise.resolve()
+            .then(close)
+            .catch(() => {})
+            .finally(() => process.exit(0));
+    };
+    for (const sig of ['SIGINT', 'SIGTERM'] as const) process.once(sig, shutdown);
+}
+
 /** The server wasm artifact path from the toilconfig `release` target (toilscript's output). */
 function serverWasmFile(root: string): string {
     let outFile = 'build/server/release.wasm';
@@ -311,6 +338,7 @@ export async function dev(opts: ToilCommandOptions = {}): Promise<ViteDevServer>
         await server.listen();
         server.printUrls();
         printEmailsUrl(cfg, server.resolvedUrls?.local?.[0]);
+        installDevShutdown(() => server.close());
         return server;
     }
 
@@ -348,6 +376,10 @@ export async function dev(opts: ToilCommandOptions = {}): Promise<ViteDevServer>
     // Rebuild the server on server-file changes; Vite HMRs the regenerated shared/server.ts
     // and the dev server hot-swaps the recompiled wasm module.
     watchServer(cfg, server.watcher);
+    installDevShutdown(async () => {
+        await front.close();
+        await server.close();
+    });
     return server;
 }
 

package/test/email-preview.test.ts

@@ -32,11 +32,11 @@ describe('email preview end-to-end (examples/basic)', () => {
             // tokens discovered from props
             expect(r.tokens).toEqual(['code', 'name']);
             // subject token template
-            expect(r.subject).toBe('Welcome, {{name}}!');
-            // .email-title { color: #111827 } from emails/styles/email.css inlined onto the <h1>
-            expect(r.html).toMatch(/<h1[^>]*style="[^"]*color:\s*#111827/i);
-            // .email-card backgroundColor inlined onto the <table>
-            expect(r.html).toMatch(/<table[^>]*style="[^"]*background-color:\s*#f6f7f9/i);
+            expect(r.subject).toBe('Welcome to toiljs, {{name}}');
+            // .email-title { color: #f5f6fa } from emails/styles/email.css inlined onto the <h1>
+            expect(r.html).toMatch(/<h1[^>]*style="[^"]*color:\s*#f5f6fa/i);
+            // .email-card { background-color: #0e1520 } inlined onto the card <table>
+            expect(r.html).toMatch(/<table[^>]*style="[^"]*background-color:\s*#0e1520/i);
 
             // The `client/*` reuse alias still resolves project CSS (the documented
             // `import 'client/styles/…'` path), independent of where the demo keeps its styles.