janela 0.14.3 → 0.16.0

package/templates/svelte/files/src/App.svelte

@@ -1,130 +1,42 @@
 <script lang="ts">
-  import { onDestroy, onMount } from "svelte";
+  import { onMount } from "svelte";
   import { createClient } from "janela/api";
-  // A type-only import of the host's contract. It is erased at compile time,
-  // so no host code is bundled into the page — this is purely a type edge.
+  // A type-only import of the host's contract: command names, argument shapes
+  // and results are checked against it, with no code generation, because both
+  // sides are TypeScript and this import erases at compile time.
   import type { App } from "../src-host/main";
 
   const client = createClient<App>();
 
-  let greeting = $state("booting…");
-  let a = $state(2);
-  let b = $state(40);
-  let sum = $state("—");
-  let waited = $state("—");
-  let waiting = $state(false);
-  let events = $state<string[]>([]);
-  let path = $state("janela.conf.json");
-  let title = $state("__NAME__ — renamed");
-  let fileOut = $state("—");
+  let name = $state("");
+  let greeting = $state("");
 
-  // The event name is checked against the contract and `value` is inferred.
-  // `on` returns a disposer.
-  const off = client.on("added", (value) => {
-    events = [`host emitted 'added': ${value}`, ...events];
-  });
-  onDestroy(off);
+  // `greet` is a command in src-host/main.ts, compiled to machine code.
+  async function greet() {
+    greeting = await client.invoke("greet", { name: name || "__NAME__" });
+  }
 
+  // Greeted once on load, so the round trip is visible without a click.
   onMount(async () => {
-    greeting = await client.invoke("greet", { name: "__NAME__" });
+    await greet();
     await client.invoke("log", "page loaded");
   });
-
-  async function add() {
-    sum = `add(${a}, ${b}) → ${await client.invoke("add", { a: Number(a), b: Number(b) })}`;
-  }
-
-  async function wait() {
-    waiting = true;
-    waited = "waiting… try add, it still answers";
-    waited = await client.invoke("wait", { ms: 2000 });
-    waiting = false;
-  }
-
-  async function read() {
-    const r = await client.invoke("readFile", { path });
-    fileOut = r.ok ? `${path} — ${r.length} chars\n\n${r.text.slice(0, 400)}` : `error: ${r.error}`;
-  }
-
-  // The native open dialog. The window keeps serving other commands while the
-  // user is deciding.
-  async function pick() {
-    const r = await client.invoke("openFile");
-    if (!r.ok) fileOut = `error: ${r.error}`;
-    else if (r.cancelled) fileOut = "cancelled";
-    else fileOut = `${r.path} — ${r.length} chars\n\n${r.text.slice(0, 400)}`;
-  }
 </script>
 
-<main>
-  <header>
-    <div class="mark" aria-hidden="true">
-      <div class="bar"><i></i><i></i><i></i></div>
-      <div class="pane"></div>
-    </div>
-    <h1>__NAME__</h1>
-    <p class="sub">TypeScript, compiled to a native binary. No Rust, no Node, no Electron.</p>
-  </header>
-
-  <p class="greeting">{greeting}</p>
-
-  <div class="grid">
-    <section class="card">
-      <h2>Typed commands</h2>
-      <p class="why">
-        The name, the arguments and the result are all checked at compile time — no codegen,
-        because both sides are TypeScript.
-      </p>
-      <div class="row">
-        <input type="number" bind:value={a} aria-label="first number" />
-        <span aria-hidden="true">+</span>
-        <input type="number" bind:value={b} aria-label="second number" />
-        <button class="primary" onclick={add}>add</button>
-      </div>
-      <p class="result" class:filled={sum !== "—"}>{sum}</p>
-      <h3>Events from the host</h3>
-      <ul class="events">
-        {#each events as e, i (i)}
-          <li>{e}</li>
-        {/each}
-      </ul>
-    </section>
-
-    <section class="card">
-      <h2>Async without blocking</h2>
-      <p class="why">
-        The window keeps answering while this is pending: the dot keeps moving and
-        <strong>add</strong> still works.
-      </p>
-      <div class="row">
-        <button disabled={waiting} onclick={wait}>wait 2s</button>
-        {#if waiting}<span><span class="pulse"></span></span>{/if}
-      </div>
-      <p class="result" class:filled={waited !== "—"}>{waited}</p>
-    </section>
+<main class="container">
+  <h1>Welcome to janela + Svelte</h1>
+  <p class="hint">TypeScript, compiled to a native binary. No Rust, no Node, no Electron.</p>
 
-    <section class="card wide">
-      <h2>Files and the window</h2>
-      <p class="why">
-        Reads run on a worker thread, so a large file never freezes the window. The dialog is the
-        real native one.
-      </p>
-      <div class="row">
-        <input class="grow" type="text" bind:value={path} aria-label="file to read" />
-        <button onclick={read}>read</button>
-        <button onclick={pick}>pick a file…</button>
-        <input class="grow" type="text" bind:value={title} aria-label="window title" />
-        <button onclick={() => client.invoke("setTitle", { title })}>set title</button>
+  <div class="row logos">
+        <a href="https://vite.dev" target="_blank" rel="noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="iconify iconify--logos logo vite" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg></a>
+        <a href="https://mmamedel.github.io/janela/" target="_blank" rel="noreferrer"><svg class="logo janela" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 970.64 970.64" role="img" aria-label="janela"><path fill="currentColor" d="M970.64,485.32c0,268.03-217.28,485.32-485.32,485.32S0,753.35,0,485.32,217.28,0,485.32,0s485.32,217.28,485.32,485.32ZM938.11,485.34c0-250.08-202.73-452.8-452.8-452.8S32.51,235.26,32.51,485.34s202.73,452.8,452.8,452.8,452.8-202.73,452.8-452.8Z"/><path fill="currentColor" d="M892.79,485.25c0,225.05-182.44,407.49-407.49,407.49S77.82,710.3,77.82,485.25,260.26,77.77,485.31,77.77s407.49,182.44,407.49,407.49ZM470.27,112.09v335.5c0,1.05,13.11,12.99,15.36,14.43,1.65-2.06,14.64-13.4,14.64-14.43V112.59c0-1.1-2.44-1.43-3.45-1.55-8.42-.99-18.1.83-26.55,1.05ZM858.27,438.09c-20.14-166.94-158.46-303.59-325-324v324h325ZM437.27,115.09c-21.65,1.62-44.22,7.07-65,13.5-137.62,42.61-242.41,165.92-260,309.5h325V115.09ZM109.27,500.09h338.5c1,0,12.36-12.44,13.54-14.5,0-1-12.54-14.5-13.54-14.5H109.27c-1.81,9.94-.24,19.09,0,29ZM861.27,471.09h-338.5c-1,0-13.53,13.5-13.54,14.5.52,2.76,3.61,3.57,5.57,5.47,1.64,1.59,7.37,9.03,7.97,9.03h338.5c.9-9.78.9-19.22,0-29ZM500.27,860.09v-336.5c0-1.03-12.98-12.37-14.64-14.43-2.26,1.44-15.36,13.37-15.36,14.43v336.5h30ZM437.27,533.09H112.27c19.95,166.03,159.46,303.1,325,323v-323ZM858.27,533.09h-325v324c165.97-22.51,304.48-156.63,325-324Z"/><path fill="var(--accent, #1c6fd4)" d="M858.27,438.09h-325V114.09c166.54,20.41,304.86,157.06,325,324Z"/><path fill="var(--accent, #1c6fd4)" d="M858.27,533.09c-20.52,167.37-159.03,301.49-325,324v-324h325Z"/><path fill="var(--accent, #1c6fd4)" d="M437.27,533.09v323c-165.54-19.9-305.05-156.97-325-323h325Z"/><path fill="var(--accent, #1c6fd4)" d="M437.27,115.09v323H112.27c17.6-143.57,122.38-266.89,260-309.5,20.78-6.43,43.34-11.88,65-13.5ZM324.93,239.42c-5.22-5.22-14.48-5.8-20.62-1.79-23.51,27.2-56.28,50.77-79.07,77.93-3.21,3.83-6.62,7.81-7,13.05-.97,13.35,13.8,21.88,24.98,14.93,28.09-28.84,58.16-56.14,84.78-86.22,2.71-5.58,1.25-13.58-3.07-17.9ZM375.06,280.3c-4.15.41-7.65,2.76-10.8,5.27-2.42,1.93-17.06,17.64-18.19,19.81-7.64,14.76,7.17,29.85,21.55,22.56,2.83-1.44,19.3-18.18,21.64-21.36,8.21-11.17-.52-27.62-14.2-26.28ZM310.03,344.3c-2.88.42-6.45,2.49-8.78,4.26-4.52,3.45-32.55,31.28-34.83,35.17-8.84,15.07,8.47,31.23,23.59,21.59,4.35-2.77,34.16-32.7,36.28-36.72,6.36-12.04-2.95-26.26-16.27-24.31Z"/><path fill="var(--card, var(--bg, #f6f6f7))" d="M500.27,860.09h-30v-336.5c0-1.05,13.11-12.99,15.36-14.43,1.65,2.06,14.64,13.4,14.64,14.43v336.5Z"/><path fill="var(--card, var(--bg, #f6f6f7))" d="M470.27,112.09c8.45-.22,18.13-2.04,26.55-1.05,1.01.12,3.45.46,3.45,1.55v335c0,1.03-12.98,12.37-14.64,14.43-2.26-1.44-15.36-13.37-15.36-14.43V112.09Z"/><path fill="var(--card, var(--bg, #f6f6f7))" d="M109.27,500.09c-.24-9.91-1.81-19.06,0-29h338.5c1,0,13.54,13.5,13.54,14.5-1.17,2.06-12.54,14.5-13.54,14.5H109.27Z"/><path fill="var(--card, var(--bg, #f6f6f7))" d="M861.27,471.09c.9,9.78.9,19.22,0,29h-338.5c-.6,0-6.34-7.44-7.97-9.03-1.96-1.9-5.04-2.72-5.57-5.47,0-1,12.54-14.5,13.54-14.5h338.5Z"/><path fill="currentColor" d="M324.93,239.42c4.32,4.32,5.78,12.32,3.07,17.9-26.62,30.07-56.7,57.37-84.78,86.22-11.18,6.94-25.95-1.58-24.98-14.93.38-5.24,3.79-9.22,7-13.05,22.8-27.16,55.56-50.73,79.07-77.93,6.13-4.01,15.39-3.43,20.62,1.79Z"/><path fill="currentColor" d="M310.03,344.3c13.33-1.95,22.63,12.27,16.27,24.31-2.12,4.02-31.93,33.94-36.28,36.72-15.12,9.64-32.44-6.52-23.59-21.59,2.28-3.89,30.31-31.72,34.83-35.17,2.33-1.78,5.9-3.84,8.78-4.26Z"/><path fill="currentColor" d="M375.06,280.3c13.69-1.35,22.42,15.11,14.2,26.28-2.34,3.18-18.81,19.93-21.64,21.36-14.39,7.3-29.19-7.8-21.55-22.56,1.13-2.18,15.76-17.88,18.19-19.81,3.16-2.51,6.65-4.86,10.8-5.27Z"/></svg></a>
+        <a href="https://svelte.dev" target="_blank" rel="noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" class="iconify iconify--logos logo svelte" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg></a>
       </div>
-      <pre class="result" class:filled={fileOut !== "—"}>{fileOut}</pre>
-    </section>
-  </div>
+      <p class="hint">Click on the janela, Vite, and Svelte logos to learn more.</p>
 
-  <footer>
-    <span>
-      Edit <code>src/App.svelte</code> for the page and <code>src-host/main.ts</code> for the
-      commands.
-    </span>
-    <button onclick={() => client.invoke("quit")}>Quit</button>
-  </footer>
+  <form class="row" onsubmit={(e) => { e.preventDefault(); greet(); }}>
+    <input id="greet-input" bind:value={name} placeholder="Enter a name..." aria-label="a name to greet" />
+    <button type="submit">Greet</button>
+  </form>
+  <p class="greeting">{greeting}</p>
 </main>

package/templates/svelte/files/src/styles.css

@@ -1,137 +1,91 @@
-/* The janela starter's look. Shared by every template so a project scaffolded
-   with --template vue looks the same as one scaffolded without a framework.
-   All of it is yours to replace.
-
-   The window mark in App is drawn in CSS rather than shipped as an image: a
-   janela frontend is embedded in the binary, so every asset has to be inlined
-   anyway, and a window needs no artwork. */
+/* The look of create-tauri-app's starter, in janela's own tokens: a centred
+   column, the logos with a hover glow in each project's colour, and one round
+   trip you can drive. Shared by every template, so a project scaffolded with
+   --template vue looks the same as one scaffolded without a framework. All of
+   it is yours to replace. */
 
 :root {
   color-scheme: light dark;
   --bg: #f6f6f7;
-  --card: #ffffff;
-  --text: #18181b;
-  --muted: #71717a;
-  --line: #e4e4e7;
-  --accent: #2563eb;
-  --accent-soft: #eff4ff;
-  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.12);
+  --ink: #18181b;
+  --ink-dim: #71717a;
+  --field: #ffffff;
+  --accent: #1c6fd4;
+  --shadow: 0 2px 2px rgb(0 0 0 / 0.08);
 }
 @media (prefers-color-scheme: dark) {
   :root {
     --bg: #17171a;
-    --card: #202024;
-    --text: #fafafa;
-    --muted: #a1a1aa;
-    --line: #2e2e34;
-    --accent: #60a5fa;
-    --accent-soft: #1d2433;
-    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
+    --ink: #fafafa;
+    --ink-dim: #a1a1aa;
+    --field: #0f0f11;
+    --accent: #58a6ff;
+    --shadow: 0 2px 2px rgb(0 0 0 / 0.3);
   }
 }
 
 * { box-sizing: border-box; }
 body {
   margin: 0;
-  min-height: 100vh;
-  display: flex;
-  justify-content: center;
   background: var(--bg);
-  color: var(--text);
-  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  color: var(--ink);
+  font: 16px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
 }
-main { width: 100%; max-width: 760px; padding: 26px 22px 32px; }
-
-/* --- header ------------------------------------------------------- */
-header { text-align: center; margin-bottom: 20px; }
-.mark {
-  width: 56px; height: 44px; margin: 0 auto 14px;
-  border: 2px solid var(--text); border-radius: 8px;
-  display: flex; flex-direction: column; overflow: hidden;
-}
-.mark .bar {
-  height: 13px; flex: none;
-  border-bottom: 2px solid var(--text);
-  display: flex; align-items: center; gap: 3px; padding: 0 4px;
-}
-.mark .bar i { width: 3px; height: 3px; border-radius: 50%; background: var(--text); }
-.mark .pane { flex: 1; background: linear-gradient(135deg, var(--accent), transparent 70%); opacity: 0.85; }
-h1 { margin: 0; font-size: 26px; letter-spacing: -0.02em; font-weight: 650; }
-.sub { margin: 5px 0 0; color: var(--muted); font-size: 13.5px; }
 
-/* The one line that proves the whole stack: this string was produced by
-   TypeScript compiled to machine code, and handed to the page. */
-.greeting {
-  margin: 0 0 20px;
-  padding: 11px 16px;
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  background: var(--accent-soft);
-  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
+.container {
+  padding: 10vh 20px 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
-  overflow-wrap: anywhere;
 }
+h1 { margin: 0; font-size: 2em; letter-spacing: -0.02em; }
+.hint { color: var(--ink-dim); margin: 4px 0 18px; }
 
-/* --- cards -------------------------------------------------------- */
-/* auto-fit rather than a fixed column count: the same page is the iOS and
-   Android frontend, where it must read as a single column. */
-.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 13px; }
-.card {
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 15px 17px;
-  box-shadow: var(--shadow);
-}
-.card h2 {
-  margin: 0 0 2px;
-  font-size: 13px; font-weight: 600;
-  letter-spacing: 0.04em; text-transform: uppercase;
-  color: var(--muted);
+.row { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
+.logos { margin: 26px 0 8px; }
+.logos a { display: block; }
+.logo {
+  /* content-box on purpose: the page sets border-box globally, which
+     would make 6em include the padding and shrink the mark by half. */
+  box-sizing: content-box;
+  height: 6em; padding: 1.5em;
+  will-change: filter; transition: filter 0.75s;
 }
-.card.wide { grid-column: 1 / -1; }
-.card p.why { margin: 0 0 11px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
-.card h3 {
-  margin: 16px 0 6px; font-size: 11px; font-weight: 600;
-  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
-}
-.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+/* Each glow is the project's own colour — the same idea as Tauri's
+   starter, which is where the shape of this page comes from. */
+/* The mark's frame is currentColor by design, so it follows the text.
+   Inside the link it would follow the LINK colour instead — hence the
+   explicit ink here. */
+.logo.janela { color: var(--ink); }
+.logo.janela:hover { filter: drop-shadow(0 0 2em var(--accent)); }
+.logo.vite:hover   { filter: drop-shadow(0 0 2em #747bff); }
+.logo.vue:hover    { filter: drop-shadow(0 0 2em #42b883); }
+.logo.react:hover  { filter: drop-shadow(0 0 2em #61dafb); }
+.logo.svelte:hover { filter: drop-shadow(0 0 2em #ff3e00); }
+.logo.solid:hover  { filter: drop-shadow(0 0 2em #4f88c6); }
+@media (prefers-reduced-motion: reduce) { .logo { transition: none; } }
+
+a { color: var(--accent); text-decoration: none; font-weight: 500; }
+a:hover { text-decoration: underline; }
 
 input, button {
-  font: inherit;
   border-radius: 8px;
-  border: 1px solid var(--line);
-  padding: 8px 12px;
-  background: var(--card);
-  color: var(--text);
-  transition: border-color 0.15s, background 0.15s;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font: inherit;
+  font-weight: 500;
+  color: var(--ink);
+  background: var(--field);
+  box-shadow: var(--shadow);
+  transition: border-color 0.25s;
 }
-input { min-width: 0; }
-input[type="number"] { width: 5.5em; text-align: center; }
-input.grow { flex: 1 1 12em; }
+button { cursor: pointer; }
+button:hover { border-color: var(--accent); }
+button:active { border-color: var(--accent); filter: brightness(0.97); }
 input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
-button { cursor: pointer; font-weight: 500; }
-button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
-button:disabled { opacity: 0.5; cursor: default; }
-button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
-button.primary:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }
-
-.result { margin: 12px 0 0; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted); }
-.result.filled { color: var(--text); }
-pre.result { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 11em; overflow: auto; margin-top: 12px; }
-
-/* A dot that keeps moving while a 2s command is pending. If it stalls,
-   the host has blocked the UI thread — which is the bug this proves is
-   absent. */
-.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1s ease-in-out infinite; }
-@keyframes pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
-@media (prefers-reduced-motion: reduce) { .pulse { animation: none; opacity: 1; } }
-
-ul.events { list-style: none; margin: 0; padding: 0; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
-ul.events li { padding: 3px 0; border-bottom: 1px dashed var(--line); }
-ul.events li:last-child { border-bottom: 0; }
-ul.events:empty::after { content: "nothing yet — press add"; color: var(--muted); font-family: inherit; }
 
-footer { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
-footer code { background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 12px; }
+/* Reserved so the layout does not jump when the answer arrives. */
+.greeting { min-height: 1.5em; margin: 20px 0 0; }

package/templates/svelte/files/src-host/main.ts

@@ -1,10 +1,10 @@
 // src-host/main.ts — your app's backend, compiled to native code by scriptc.
 //
-// The two tables below are the single declaration of what this app exposes,
-// and `App` names an app that carries them. The frontend imports `App` with
+// The table below is the single declaration of what this app exposes, and
+// `App` names an app that carries it. The frontend imports `App` with
 // `import type`, so the page is checked against these exact types — command
-// names, argument shapes, results and event payloads — with no code
-// generation and nothing to keep in sync.
+// names, argument shapes and results — with no code generation and nothing to
+// keep in sync.
 //
 // A command that returns nothing is declared `() => void` and its handler
 // returns `null`; every command answers the page's promise with a value.
@@ -13,131 +13,30 @@ import type { JanelaApp } from "janela/host";
 
 /** Every command this app answers. Declared once; the page checks against it. */
 export type AppCommands = {
-  add: (args: { a: number; b: number }) => number;
   greet: (args: { name: string }) => string;
   log: (args: string) => void;
-  wait: (args: { ms: number }) => string;
-  readFile: (args: { path: string }) => ReadResult;
-  openFile: () => PickResult;
-  setTitle: (args: { title: string }) => void;
-  quit: () => void;
 };
 
 /**
- * Results are declared as TOTAL records rather than unions of shapes: every
- * field is always present, and `error` is null on success. A discriminated
- * union would read better in isolation, but the page would then have to narrow
- * before touching `text` — and the point of this template is to show the type
- * edge working, not to teach narrowing.
+ * Every event this app emits, and what each one carries. Empty to start with —
+ * add one and `app.emit` is checked against it, as is `client.on` in the page.
  */
-export type ReadResult = { ok: boolean; error: string | null; length: number; text: string };
-export type PickResult = {
-  ok: boolean;
-  error: string | null;
-  cancelled: boolean;
-  path: string;
-  length: number;
-  text: string;
-};
-
-/** Every event this app emits, and what each one carries. */
-export type AppEvents = {
-  added: number;
-};
+export type AppEvents = {};
 
 /** The contract the page imports with `import type { App } from "../src-host/main"`. */
 export type App = JanelaApp<AppCommands, AppEvents>;
 
 // Typing the app with the contract is what makes `app.command` checked: the
 // name must be one of the declared ones, `args` is inferred from it, and the
-// return value has to match. Same for `app.emit`.
+// return value has to match.
 export function setup(app: App): void {
-  app.command("add", (args) => {
-    const sum = args.a + args.b;
-    app.emit("added", sum);
-    return sum;
-  });
-
   app.command("greet", (args) => {
-    return "Hello, " + args.name + " — from the native TS binary";
+    return "Hello, " + args.name + "! You've been greeted from a native TypeScript binary.";
   });
 
+  // Anything the host logs goes to the terminal that `janela dev` runs in.
   app.command("log", (args) => {
     console.log("[host] page says:", args);
     return null;
   });
-
-  // An async command: answers later, without freezing the window.
-  app.commandAsync("wait", (args, resolve) => {
-    app.sleep(args.ms, () => {
-      resolve("waited " + args.ms + "ms without blocking the UI");
-    });
-  });
-
-  // File I/O without freezing the window: the read happens on a worker thread
-  // in the shim. Use this instead of node:fs readFileSync, which blocks the
-  // host loop — and with it the whole UI — until the syscall returns.
-  app.commandAsync("readFile", (args, resolve) => {
-    app.readFileAsync(args.path, (err, text) => {
-      // Annotated, not inferred: a bare `null` in a returned literal infers as
-      // `null | undefined`, which does not lift into the declared
-      // `string | null` (scriptc SC2002).
-      const answer: ReadResult =
-        err !== null
-          ? { ok: false, error: err, length: 0, text: "" }
-          : { ok: true, error: null, length: text.length, text: text };
-      resolve(answer);
-    });
-  });
-
-  // The native "open" dialog, paired with the reader above — picking a file is
-  // what makes readFileAsync useful. commandAsync is the right shape here: the
-  // page's promise stays parked while the user takes as long as they like, and
-  // the window carries on serving other calls meanwhile.
-  app.commandAsync("openFile", (_args, resolve) => {
-    app.openFileDialog(
-      { title: "Pick a file", filters: [{ name: "Text", extensions: ["txt", "md"] }] },
-      (paths, err) => {
-        if (err !== undefined) {
-          const failed: PickResult = {
-            ok: false, error: err, cancelled: false, path: "", length: 0, text: "",
-          };
-          resolve(failed);
-          return;
-        }
-        if (paths === null) {
-          const cancelled: PickResult = {
-            ok: true, error: null, cancelled: true, path: "", length: 0, text: "",
-          };
-          resolve(cancelled);
-          return;
-        }
-        app.readFileAsync(paths[0], (rerr, text) => {
-          const answer: PickResult =
-            rerr !== null
-              ? { ok: false, error: rerr, cancelled: false, path: paths[0], length: 0, text: "" }
-              : {
-                  ok: true,
-                  error: null,
-                  cancelled: false,
-                  path: paths[0],
-                  length: text.length,
-                  text: text,
-                };
-          resolve(answer);
-        });
-      },
-    );
-  });
-
-  // The window is yours to change at runtime, not just at startup.
-  app.command("setTitle", (args) => {
-    app.setTitle(args.title);
-    return null;
-  });
-
-  app.command("quit", (_args) => {
-    app.quit();
-    return null;
-  });
 }