janela 0.14.2 → 0.15.0

package/README.md

@@ -1,3 +1,8 @@
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/mmamedel/janela/main/packages/janela/brand/janela-mark-dark.svg">
+  <img src="https://raw.githubusercontent.com/mmamedel/janela/main/packages/janela/brand/janela-mark-light.svg" alt="" width="88" align="right">
+</picture>
+
 # janela
 
 > *janela* — Portuguese for **window**.
@@ -6,9 +11,9 @@ Desktop and mobile apps in pure TypeScript, compiled to native. No Rust, no
 Node, no Electron. The backend is TypeScript compiled to a native binary by
 [scriptc](https://scriptc.dev); the window is the OS webview via
 [webview/webview](https://github.com/webview/webview). A desktop binary comes
-out around 225–420 KB — 225 KB for the smallest template — with no bundled
+out around 240–420 KB — 241 KB for the smallest template — with no bundled
 browser and no bundled runtime; iOS and Android bundles land around
-228–421 KB. Those are the *starter's* figures, and about 35 KB of each is the
+244–421 KB. Those are the *starter's* figures, and about 35 KB of each is the
 native file dialog and worker-thread reader it demonstrates: delete the "Files
 and the window" card and its two commands and the smallest binary is 212 KB. Per-template figures are in
 [docs/frontend.md](../../docs/frontend.md).
@@ -31,7 +36,11 @@ desktop-only for now; on mobile they report clearly when called.
 ## Quick start
 
 ```bash
-npm install -g janela     # or: npx janela init my-app
+pnpm create janela        # the front door: prompts, scaffolds, installs
+                          # (npm create janela@latest / yarn / bun also work)
+
+# or drive the CLI yourself:
+npm install -g janela
 janela --version          # which janela you actually have
 janela init my-app        # (or `jn init my-app`)
 cd my-app
@@ -43,10 +52,15 @@ Or start from a frontend framework:
 
 ```bash
 janela init my-app --template vue     # or react | svelte | solid | vanilla
-cd my-app && npm install
+cd my-app                             # deps are already installed
 janela dev                            # Vite dev server + HMR, in a native window
 ```
 
+`init` installs the template's dependencies with whichever package manager
+ran it — `pnpm janela init` uses pnpm — so `janela dev` works straight
+afterwards. Pass `--no-install` to skip that, and if the install fails the
+project is still written; the message names the one command to retry.
+
 A `--template` a globally installed CLI has never heard of is now an error
 rather than a silent fallback, and `janela --version` says which one you are
 running — worth checking first if a scaffolded project comes out looking

package/bin/janela.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 // janela — the CLI (the tauri-cli analogue).
 //
-//   janela init <name>   scaffold a new project
+//   janela init <name>   scaffold a new project (and install its dependencies)
 //   janela build         compile the project to a native binary (+ .app on macOS)
 //   janela dev           build, then run the binary with logs in the terminal
 //   janela --version     which janela this is
@@ -21,8 +21,8 @@ import { dirname, join, relative, resolve, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 import {
   ANDROID_ABI, ANDROID_TARGET_SDK, androidConf, ffiManifest, iosConf,
-  libraryProfile, mimeFor, NAME_RE, patchPeSubsystem, PeError,
-  rewriteHostSpecifier, suggestName,
+  installCommand, libraryProfile, mimeFor, NAME_RE, packageManager as pmFor,
+  patchPeSubsystem, PeError, rewriteHostSpecifier, suggestName,
 } from "./lib.mjs";
 
 const KIT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
@@ -107,8 +107,9 @@ function viteCommand(root) {
   if (existsSync(shim)) return { argv: [shim], shell: process.platform === "win32" };
 
   fail(
-    "this project has a vite config but no local vite — run your package manager's " +
-      "install first (npm install / pnpm install)",
+    "this project has a vite config but no local vite — its dependencies are not " +
+      `installed yet:\n    ${installCommand(pmFor(process.env)).join(" ")}\n` +
+      "  (janela init installs them for you unless you pass --no-install)",
   );
 }
 
@@ -1160,7 +1161,29 @@ function copyTemplate(from, to, name) {
 
 // Best-effort repair of a rejected name, so the error can suggest something
 // that would have worked instead of only stating the rule.
-function init(name, template) {
+/**
+ * Install a scaffolded project's dependencies.
+ *
+ * Returns true on success. A failure is NOT fatal: the project is already
+ * written, and the useful thing to do is name the one command to retry rather
+ * than exit non-zero on a tree that is fine. Offline, an unreachable registry
+ * and missing auth all land here.
+ *
+ * Windows needs a shell: npm/pnpm/yarn are .cmd shims, and Node has refused to
+ * spawn those directly since the CVE-2024-27980 fix.
+ */
+function installDeps(dir, pm) {
+  const cmd = installCommand(pm);
+  console.log(`janela: installing dependencies with ${pm}…`);
+  const r = spawnSync(cmd[0], cmd.slice(1), {
+    stdio: "inherit",
+    cwd: dir,
+    shell: process.platform === "win32",
+  });
+  return r.status === 0;
+}
+
+function init(name, template, { install = true } = {}) {
   if (!name) {
     fail(
       "no project name given.\n" +
@@ -1216,8 +1239,27 @@ function init(name, template) {
   writeFileSync(join(dir, ".gitignore"), ".janela/\nnode_modules/\ndist/\n");
   writeFileSync(join(dir, "package.json"), JSON.stringify(pkg, null, 2) + "\n");
 
-  const install = template === "vanilla" ? "" : "npm install && ";
-  console.log(`janela: created ${name}/ (${template}) — next: cd ${name} && ${install}janela dev`);
+  // The no-framework template has no dependencies to install: it needs no
+  // frontend toolchain, and `janela dev` works on it straight out of init.
+  const hasDeps = template !== "vanilla";
+  if (!hasDeps || !install) {
+    // Only a skipped install on a template that HAS dependencies leaves the
+    // caller something to run.
+    const manual = hasDeps ? `${installCommand(pmFor(process.env)).join(" ")} && ` : "";
+    console.log(`janela: created ${name}/ (${template}) — next: cd ${name} && ${manual}janela dev`);
+    return;
+  }
+
+  const pm = pmFor(process.env);
+  if (installDeps(dir, pm)) {
+    console.log(`janela: created ${name}/ (${template}) — next: cd ${name} && janela dev`);
+  } else {
+    console.log(
+      `janela: created ${name}/ (${template}), but installing its dependencies failed.\n` +
+        `  The project is written and fine — retry the install and you are set:\n` +
+        `    cd ${name} && ${installCommand(pm).join(" ")} && janela dev`,
+    );
+  }
 }
 
 // ---- dev --------------------------------------------------------------------
@@ -1349,9 +1391,11 @@ function assertPositionals(max) {
 
 switch (cmd) {
   case "init":
-    assertKnownFlags(["template"]);
+    assertKnownFlags(["template", "no-install"]);
     assertPositionals(1);
-    init(positionals()[0], flag("template", "vanilla"));
+    init(positionals()[0], flag("template", "vanilla"), {
+      install: !argv.includes("--no-install"),
+    });
     break;
   case "build":
     assertKnownFlags(["target"]);
@@ -1371,7 +1415,7 @@ switch (cmd) {
   default:
     console.log(
       `janela ${VERSION}\n\n` +
-        "usage: janela init <name> [--template vanilla|vue|react|svelte|solid]\n" +
+        "usage: janela init <name> [--template vanilla|vue|react|svelte|solid] [--no-install]\n" +
         "       janela build [--target desktop|ios|android]\n" +
         "       janela dev   [--target desktop|ios|android]\n" +
         "       janela --version",

package/bin/lib.mjs

@@ -345,3 +345,30 @@ export function patchPeSubsystem(input) {
   buf.writeUInt16LE(IMAGE_SUBSYSTEM_WINDOWS_GUI, subOff);
   return { patched: true, buf };
 }
+
+/**
+ * Which package manager to install a scaffolded project with.
+ *
+ * `npm_config_user_agent` is set by whichever manager ran janela, so
+ * `pnpm janela init` installs with pnpm. Run as a plain global binary it is
+ * unset, and npm is the only manager guaranteed to exist alongside node.
+ *
+ * Takes the environment rather than reading process.env, so it is testable.
+ */
+export function packageManager(env = {}) {
+  const ua = env.npm_config_user_agent ?? "";
+  for (const pm of ["pnpm", "yarn", "bun"]) if (ua.startsWith(`${pm}/`)) return pm;
+  return "npm";
+}
+
+/**
+ * The install invocation for a manager.
+ *
+ * yarn's is the bare command. npm gets --no-fund --no-audit: neither is useful
+ * on a freshly scaffolded tree, and the audit is the slowest part of it.
+ */
+export function installCommand(pm) {
+  if (pm === "yarn") return ["yarn"];
+  if (pm === "npm") return ["npm", "install", "--no-fund", "--no-audit"];
+  return [pm, "install"];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "janela",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "description": "Desktop, iOS and Android apps in pure TypeScript, compiled to native. No Rust, no Node, no Electron.",
   "type": "module",
   "bin": {

package/templates/index.html

@@ -7,9 +7,7 @@
     <style>
       /* Everything here is yours to replace. It is deliberately one file with
          no dependencies: this template has no bundler, so what you see is what
-         runs. The mark below 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. */
+         runs. */
       :root {
         color-scheme: light dark;
         --bg: #f6f6f7;
@@ -17,7 +15,7 @@
         --text: #18181b;
         --muted: #71717a;
         --line: #e4e4e7;
-        --accent: #2563eb;
+        --accent: #1c6fd4;
         --accent-soft: #eff4ff;
         --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.12);
       }
@@ -28,7 +26,7 @@
           --text: #fafafa;
           --muted: #a1a1aa;
           --line: #2e2e34;
-          --accent: #60a5fa;
+          --accent: #58a6ff;
           --accent-soft: #1d2433;
           --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
         }
@@ -49,18 +47,14 @@
 
       /* --- 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; }
+      /* The mark: a round window, which is what janela means. Inlined rather
+         than linked, because a janela frontend is embedded in the binary and
+         every asset has to be inlined anyway — and inline rather than a CSS
+         data URI so ONE copy serves both themes: the frame follows the text
+         colour, the glass follows the accent. Percent-encoding a data URI
+         would also have cost 4x the bytes. Delete it and the header still
+         works. */
+      .mark { display: block; width: 56px; height: 56px; margin: 0 auto 14px; }
       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; }
 
@@ -145,10 +139,7 @@
   <body>
     <main>
       <header>
-        <div class="mark" aria-hidden="true">
-          <div class="bar"><i></i><i></i><i></i></div>
-          <div class="pane"></div>
-        </div>
+        <svg class="mark" 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)" d="M858.27,438.09h-325V114.09c166.54,20.41,304.86,157.06,325,324Z"/><path fill="var(--accent)" d="M858.27,533.09c-20.52,167.37-159.03,301.49-325,324v-324h325Z"/><path fill="var(--accent)" d="M437.27,533.09v323c-165.54-19.9-305.05-156.97-325-323h325Z"/><path fill="var(--accent)" 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)" 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)" 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)" 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)" 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>
         <h1>__NAME__</h1>
         <p class="sub">TypeScript, compiled to a native binary. No Rust, no Node, no Electron.</p>
       </header>

package/templates/react/files/src/App.tsx

@@ -64,14 +64,7 @@ export default function App() {
   return (
     <main>
       <header>
-        <div className="mark" aria-hidden="true">
-          <div className="bar">
-            <i />
-            <i />
-            <i />
-          </div>
-          <div className="pane" />
-        </div>
+        <svg class="mark" 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)" d="M858.27,438.09h-325V114.09c166.54,20.41,304.86,157.06,325,324Z" /><path fill="var(--accent)" d="M858.27,533.09c-20.52,167.37-159.03,301.49-325,324v-324h325Z" /><path fill="var(--accent)" d="M437.27,533.09v323c-165.54-19.9-305.05-156.97-325-323h325Z" /><path fill="var(--accent)" 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)" 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)" 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)" 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)" 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>
         <h1>__NAME__</h1>
         <p className="sub">TypeScript, compiled to a native binary. No Rust, no Node, no Electron.</p>
       </header>

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

@@ -1,10 +1,6 @@
 /* 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. */
+   All of it is yours to replace. */
 
 :root {
   color-scheme: light dark;
@@ -13,7 +9,7 @@
   --text: #18181b;
   --muted: #71717a;
   --line: #e4e4e7;
-  --accent: #2563eb;
+  --accent: #1c6fd4;
   --accent-soft: #eff4ff;
   --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.12);
 }
@@ -24,7 +20,7 @@
     --text: #fafafa;
     --muted: #a1a1aa;
     --line: #2e2e34;
-    --accent: #60a5fa;
+    --accent: #58a6ff;
     --accent-soft: #1d2433;
     --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
   }
@@ -45,18 +41,14 @@ 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; }
+/* The mark: a round window, which is what janela means. Inlined rather
+   than linked, because a janela frontend is embedded in the binary and
+   every asset has to be inlined anyway — and inline rather than a CSS
+   data URI so ONE copy serves both themes: the frame follows the text
+   colour, the glass follows the accent. Percent-encoding a data URI
+   would also have cost 4x the bytes. Delete it and the header still
+   works. */
+.mark { display: block; width: 56px; height: 56px; margin: 0 auto 14px; }
 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; }
 

package/templates/solid/files/src/App.tsx

@@ -59,14 +59,7 @@ export default function App() {
   return (
     <main>
       <header>
-        <div class="mark" aria-hidden="true">
-          <div class="bar">
-            <i />
-            <i />
-            <i />
-          </div>
-          <div class="pane" />
-        </div>
+        <svg class="mark" 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)" d="M858.27,438.09h-325V114.09c166.54,20.41,304.86,157.06,325,324Z"/><path fill="var(--accent)" d="M858.27,533.09c-20.52,167.37-159.03,301.49-325,324v-324h325Z"/><path fill="var(--accent)" d="M437.27,533.09v323c-165.54-19.9-305.05-156.97-325-323h325Z"/><path fill="var(--accent)" 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)" 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)" 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)" 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)" 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>
         <h1>__NAME__</h1>
         <p class="sub">TypeScript, compiled to a native binary. No Rust, no Node, no Electron.</p>
       </header>

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

@@ -1,10 +1,6 @@
 /* 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. */
+   All of it is yours to replace. */
 
 :root {
   color-scheme: light dark;
@@ -13,7 +9,7 @@
   --text: #18181b;
   --muted: #71717a;
   --line: #e4e4e7;
-  --accent: #2563eb;
+  --accent: #1c6fd4;
   --accent-soft: #eff4ff;
   --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.12);
 }
@@ -24,7 +20,7 @@
     --text: #fafafa;
     --muted: #a1a1aa;
     --line: #2e2e34;
-    --accent: #60a5fa;
+    --accent: #58a6ff;
     --accent-soft: #1d2433;
     --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
   }
@@ -45,18 +41,14 @@ 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; }
+/* The mark: a round window, which is what janela means. Inlined rather
+   than linked, because a janela frontend is embedded in the binary and
+   every asset has to be inlined anyway — and inline rather than a CSS
+   data URI so ONE copy serves both themes: the frame follows the text
+   colour, the glass follows the accent. Percent-encoding a data URI
+   would also have cost 4x the bytes. Delete it and the header still
+   works. */
+.mark { display: block; width: 56px; height: 56px; margin: 0 auto 14px; }
 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; }
 

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

@@ -58,10 +58,7 @@
 
 <main>
   <header>
-    <div class="mark" aria-hidden="true">
-      <div class="bar"><i></i><i></i><i></i></div>
-      <div class="pane"></div>
-    </div>
+    <svg class="mark" 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)" d="M858.27,438.09h-325V114.09c166.54,20.41,304.86,157.06,325,324Z"/><path fill="var(--accent)" d="M858.27,533.09c-20.52,167.37-159.03,301.49-325,324v-324h325Z"/><path fill="var(--accent)" d="M437.27,533.09v323c-165.54-19.9-305.05-156.97-325-323h325Z"/><path fill="var(--accent)" 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)" 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)" 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)" 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)" 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>
     <h1>__NAME__</h1>
     <p class="sub">TypeScript, compiled to a native binary. No Rust, no Node, no Electron.</p>
   </header>

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

@@ -1,10 +1,6 @@
 /* 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. */
+   All of it is yours to replace. */
 
 :root {
   color-scheme: light dark;
@@ -13,7 +9,7 @@
   --text: #18181b;
   --muted: #71717a;
   --line: #e4e4e7;
-  --accent: #2563eb;
+  --accent: #1c6fd4;
   --accent-soft: #eff4ff;
   --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.12);
 }
@@ -24,7 +20,7 @@
     --text: #fafafa;
     --muted: #a1a1aa;
     --line: #2e2e34;
-    --accent: #60a5fa;
+    --accent: #58a6ff;
     --accent-soft: #1d2433;
     --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
   }
@@ -45,18 +41,14 @@ 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; }
+/* The mark: a round window, which is what janela means. Inlined rather
+   than linked, because a janela frontend is embedded in the binary and
+   every asset has to be inlined anyway — and inline rather than a CSS
+   data URI so ONE copy serves both themes: the frame follows the text
+   colour, the glass follows the accent. Percent-encoding a data URI
+   would also have cost 4x the bytes. Delete it and the header still
+   works. */
+.mark { display: block; width: 56px; height: 56px; margin: 0 auto 14px; }
 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; }
 

package/templates/vue/files/src/App.vue

@@ -58,10 +58,7 @@ async function pick() {
 <template>
   <main>
     <header>
-      <div class="mark" aria-hidden="true">
-        <div class="bar"><i /><i /><i /></div>
-        <div class="pane" />
-      </div>
+      <svg class="mark" 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)" d="M858.27,438.09h-325V114.09c166.54,20.41,304.86,157.06,325,324Z"/><path fill="var(--accent)" d="M858.27,533.09c-20.52,167.37-159.03,301.49-325,324v-324h325Z"/><path fill="var(--accent)" d="M437.27,533.09v323c-165.54-19.9-305.05-156.97-325-323h325Z"/><path fill="var(--accent)" 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)" 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)" 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)" 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)" 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>
       <h1>__NAME__</h1>
       <p class="sub">TypeScript, compiled to a native binary. No Rust, no Node, no Electron.</p>
     </header>

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

@@ -1,10 +1,6 @@
 /* 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. */
+   All of it is yours to replace. */
 
 :root {
   color-scheme: light dark;
@@ -13,7 +9,7 @@
   --text: #18181b;
   --muted: #71717a;
   --line: #e4e4e7;
-  --accent: #2563eb;
+  --accent: #1c6fd4;
   --accent-soft: #eff4ff;
   --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.12);
 }
@@ -24,7 +20,7 @@
     --text: #fafafa;
     --muted: #a1a1aa;
     --line: #2e2e34;
-    --accent: #60a5fa;
+    --accent: #58a6ff;
     --accent-soft: #1d2433;
     --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
   }
@@ -45,18 +41,14 @@ 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; }
+/* The mark: a round window, which is what janela means. Inlined rather
+   than linked, because a janela frontend is embedded in the binary and
+   every asset has to be inlined anyway — and inline rather than a CSS
+   data URI so ONE copy serves both themes: the frame follows the text
+   colour, the glass follows the accent. Percent-encoding a data URI
+   would also have cost 4x the bytes. Delete it and the header still
+   works. */
+.mark { display: block; width: 56px; height: 56px; margin: 0 auto 14px; }
 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; }