janela 0.14.0 → 0.14.2

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

@@ -0,0 +1,137 @@
+/* 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. */
+
+: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);
+}
+@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);
+  }
+}
+
+* { 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;
+  -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;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+/* --- 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);
+}
+.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; }
+
+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;
+}
+input { min-width: 0; }
+input[type="number"] { width: 5.5em; text-align: center; }
+input.grow { flex: 1 1 12em; }
+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; }

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

@@ -17,9 +17,29 @@ export type AppCommands = {
   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.
+ */
+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;
@@ -54,6 +74,68 @@ export function setup(app: App): void {
     });
   });
 
+  // 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;

package/templates/svelte/files/index.html

@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>__NAME__</title>
   </head>
   <body>

package/templates/svelte/files/janela.conf.json

@@ -4,8 +4,8 @@
   "version": "0.1.0",
   "window": {
     "title": "__NAME__",
-    "width": 640,
-    "height": 420
+    "width": 820,
+    "height": 700
   },
   "ios": {
     "identifier": "dev.janela.__NAME__",

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

@@ -1,41 +1,130 @@
 <script lang="ts">
+  import { onDestroy, onMount } from "svelte";
   import { createClient } from "janela/api";
-  // Type-only import of the host contract: erased at compile time, so no
-  // host code is bundled into the page.
-  import type { App as Contract } from "../src-host/main";
+  // 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.
+  import type { App } from "../src-host/main";
 
-  const client = createClient<Contract>();
+  const client = createClient<App>();
 
-  let greeting = $state("…");
+  let greeting = $state("booting…");
   let a = $state(2);
   let b = $state(40);
-  let sum = $state<number | null>(null);
+  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("—");
 
-  // Backend→frontend events. The payload arrives as a value, and the generic
-  // says which value.
-  client.on("added", (value) => (events = [`host emitted: ${value}`, ...events]));
+  // 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);
 
-  client.invoke("greet", { name: "__NAME__" }).then((g) => (greeting = g));
+  onMount(async () => {
+    greeting = await client.invoke("greet", { name: "__NAME__" });
+    await client.invoke("log", "page loaded");
+  });
 
   async function add() {
-    sum = await client.invoke("add", { a: Number(a), b: Number(b) });
+    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>
 
-<h1>{greeting}</h1>
-<p>
-  <input type="number" bind:value={a} /> +
-  <input type="number" bind:value={b} />
-  <button onclick={add}>add</button>
-  {#if sum !== null}<span> = {sum}</span>{/if}
-</p>
-<ul>
-  {#each events as e}<li>{e}</li>{/each}
-</ul>
-
-<style>
-  :global(body) { font: 16px -apple-system, system-ui, sans-serif; padding: 2rem; }
-  input { width: 5em; }
-  ul { color: #666; font-size: 13px; }
-</style>
+<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>
+
+    <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>
+      <pre class="result" class:filled={fileOut !== "—"}>{fileOut}</pre>
+    </section>
+  </div>
+
+  <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>
+</main>

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

@@ -1,3 +1,4 @@
+import "./styles.css";
 import { mount } from "svelte";
 import App from "./App.svelte";
 

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

@@ -0,0 +1,137 @@
+/* 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. */
+
+: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);
+}
+@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);
+  }
+}
+
+* { 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;
+  -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;
+  text-align: center;
+  overflow-wrap: anywhere;
+}
+
+/* --- 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);
+}
+.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; }
+
+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;
+}
+input { min-width: 0; }
+input[type="number"] { width: 5.5em; text-align: center; }
+input.grow { flex: 1 1 12em; }
+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; }

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

@@ -17,9 +17,29 @@ export type AppCommands = {
   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.
+ */
+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;
@@ -54,6 +74,68 @@ export function setup(app: App): void {
     });
   });
 
+  // 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;

package/templates/vue/files/index.html

@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>__NAME__</title>
   </head>
   <body>

package/templates/vue/files/janela.conf.json

@@ -4,8 +4,8 @@
   "version": "0.1.0",
   "window": {
     "title": "__NAME__",
-    "width": 640,
-    "height": 420
+    "width": 820,
+    "height": 700
   },
   "ios": {
     "identifier": "dev.janela.__NAME__",