fix(ui): attach keyboard shortcuts during setup, not after auth bootstrap

marketing/README.md

@@ -0,0 +1,43 @@
+# Marketing assets — Git Diff Review
+
+Ready-to-publish pitch posts and branded social cards for launching
+[Git Diff Review](https://github.com/oullin/git-diff).
+
+## Posts
+
+| Platform | File | Tone | Pair with |
+| --- | --- | --- | --- |
+| LinkedIn | [posts/linkedin.md](posts/linkedin.md) | Launch announcement | `cards/hero-og.png` + `cards/screenshot.png` |
+| X / Twitter | [posts/x.md](posts/x.md) | Builder thread (5 tweets) | one card per tweet (hero → screenshot → features → privacy) |
+| Reddit | [posts/reddit.md](posts/reddit.md) | Problem/story, honest maker voice | `cards/screenshot.png` + `cards/features.png` |
+
+## Cards (`cards/*.png`)
+
+Rendered at 2× for retina-sharp output. Built from on-brand HTML/CSS in
+[`cards/src/`](cards/src/) using the app's real colors, Fira Code font, and the
+existing screenshots.
+
+| Card | Size (2×) | Aspect | Use |
+| --- | --- | --- | --- |
+| `hero-og.png` | 2400×1260 | 1.91:1 | Link preview / lead image (LinkedIn, X, OG tag) |
+| `screenshot.png` | 2400×1260 | 1.91:1 | Product proof — `docs/images/hero.png` in a macOS window |
+| `features.png` | 2160×2160 | 1:1 | Feature rundown (square, great for X / IG) |
+| `privacy.png` | 2160×2160 | 1:1 | "Your code never leaves your machine" differentiator |
+
+Raw product screenshots also live in [`../docs/images/`](../docs/images/)
+(`hero`, `file-navigation`, `split-view`, `review-notes`, `walkthrough`) if you
+want an un-styled, "real" look for Reddit.
+
+## Regenerating the cards
+
+Edit the templates in `cards/src/` (shared tokens in `card.css`), then re-render
+each `.html` to a PNG with a headless browser at the exact viewport — e.g. via
+Playwright with `deviceScaleFactor: 2`, waiting for `document.fonts.ready` and
+image load, then `page.screenshot({ path: ... })`. Source paths are relative, so
+the cards reference the repo's logo, screenshots, and fonts directly.
+
+## CTA links used
+
+- Releases: https://github.com/oullin/git-diff/releases
+- Source: https://github.com/oullin/git-diff
+- Homebrew: `brew install --cask oullin/tap/git-diff` _(planned)_

marketing/cards/src/card.css

@@ -0,0 +1,113 @@
+/* Shared brand tokens for Git Diff Review social cards.
+   Colors/fonts mirror the app theme (dunkel.json + style.css). */
+
+@font-face {
+  font-family: "Fira Code";
+  font-weight: 400;
+  font-display: block;
+  src: url("../../../packages/ui/src/fonts/firacode/FiraCode-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Fira Code";
+  font-weight: 600;
+  font-display: block;
+  src: url("../../../packages/ui/src/fonts/firacode/FiraCode-SemiBold.woff2") format("woff2");
+}
+
+:root {
+  --bg: #242424;
+  --bg-2: #1c1c1c;
+  --panel: #2c2c2c;
+  --fg: #fafafa;
+  --muted: #a0a0a0;
+  --faint: #6b6b6b;
+  --accent: #89ddff;
+  --green: #5ad27e;
+  --red: #ff6762;
+  --border: #ffffff14;
+  --radius: 18px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  background: var(--bg);
+}
+
+body {
+  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
+  color: var(--fg);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overflow: hidden;
+}
+
+.mono {
+  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* Card frame: each card sets data-w / data-h via inline width/height. */
+.card {
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(120% 120% at 100% 0%, #2f2f2f 0%, var(--bg) 55%) ,
+    var(--bg);
+}
+
+/* Subtle diff-gutter motif used on several cards. */
+.gutter {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.5;
+}
+.gutter span {
+  position: absolute;
+  left: 0;
+  width: 6px;
+  border-radius: 0 4px 4px 0;
+}
+.add {
+  color: var(--green);
+}
+.del {
+  color: var(--red);
+}
+.cyan {
+  color: var(--accent);
+}
+.muted {
+  color: var(--muted);
+}
+
+.wordmark {
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid var(--border);
+  background: #ffffff0a;
+  border-radius: 999px;
+  color: var(--muted);
+}
+
+.dots {
+  display: inline-flex;
+  gap: 8px;
+}
+.dots i {
+  width: 13px;
+  height: 13px;
+  border-radius: 50%;
+  display: inline-block;
+}

marketing/cards/src/features.html

@@ -0,0 +1,136 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="card.css" />
+    <style>
+      .card {
+        width: 1080px;
+        height: 1080px;
+        padding: 80px 76px;
+        display: flex;
+        flex-direction: column;
+      }
+      .head {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        margin-bottom: 16px;
+      }
+      .head img {
+        width: 72px;
+        height: 72px;
+        border-radius: 18px;
+      }
+      .head .name {
+        font-size: 40px;
+        font-weight: 700;
+        letter-spacing: -0.02em;
+      }
+      h2 {
+        font-size: 58px;
+        line-height: 1.04;
+        font-weight: 700;
+        letter-spacing: -0.03em;
+        margin: 30px 0 44px;
+      }
+      h2 b {
+        color: var(--accent);
+      }
+      .rows {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+      .row {
+        display: flex;
+        align-items: center;
+        gap: 26px;
+        border: 1px solid var(--border);
+        background: #ffffff07;
+        border-radius: 16px;
+        padding: 24px 28px;
+      }
+      .ic {
+        width: 56px;
+        height: 56px;
+        flex: 0 0 56px;
+        border-radius: 13px;
+        background: #ffffff0d;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 28px;
+      }
+      .row .t {
+        font-size: 30px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+      .row .s {
+        font-size: 21px;
+        color: var(--muted);
+        margin-top: 3px;
+      }
+      .row .s .mono {
+        color: #cfcfcf;
+      }
+      .foot {
+        margin-top: auto;
+        padding-top: 36px;
+        font-size: 23px;
+        color: var(--faint);
+      }
+      .foot .mono {
+        color: var(--muted);
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card">
+      <div class="head">
+        <img src="../../../packages/ui/public/icon-512.png" alt="" />
+        <span class="name">Git Diff Review</span>
+      </div>
+      <h2>The pull-request review you already know — <b>locally</b>.</h2>
+      <div class="rows">
+        <div class="row">
+          <div class="ic cyan">⌥</div>
+          <div>
+            <div class="t">A real review surface</div>
+            <div class="s">File list, status badges, +/− counts, jump between hunks.</div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="ic"><span class="add">±</span></div>
+          <div>
+            <div class="t">Split or unified diffs</div>
+            <div class="s">Syntax-highlighted, your choice per session.</div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="ic cyan">✓</div>
+          <div>
+            <div class="t">Viewed-file tracking &amp; inline notes</div>
+            <div class="s">Tick files off (<span class="mono">0/14 viewed</span>), drop comments on lines.</div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="ic mono cyan">⌨</div>
+          <div>
+            <div class="t">Keyboard-driven</div>
+            <div class="s"><span class="mono">j</span>/<span class="mono">k</span> navigate · <span class="mono">v</span> viewed · <span class="mono">c</span> comment · <span class="mono">⌘↵</span> submit</div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="ic cyan">⌂</div>
+          <div>
+            <div class="t">100% local</div>
+            <div class="s">No cloud, no sign-up, no telemetry — stored in local SQLite.</div>
+          </div>
+        </div>
+      </div>
+      <div class="foot"><span class="mono">github.com/oullin/git-diff</span> · MIT · macOS (Apple Silicon)</div>
+    </div>
+  </body>
+</html>