buffr-cef 0.1.1

CEF integration and browser host for buffr.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New Tab</title>
  <style>
    :root { color-scheme: dark light; }
    html, body {
      margin: 0; padding: 0; min-height: 100vh;
      font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
      background: #1a1b26; color: #c0caf5;
    }
    main {
      max-width: 56rem; margin: 0 auto;
      padding: 4rem 2rem 6rem;
    }
    header { text-align: center; margin-bottom: 3rem; }
    header p { font-size: 1rem; opacity: 0.6; margin: 0; }
    /* Splash wordmark. The buffr host pushes the current animation
       frame's HTML into `#buffr-splash` on every splash tick (~8 Hz)
       via execute_javascript; we just need the cell to exist and be
       styled. Plain art chars inherit the dim color; cursor/trail
       cells are wrapped in `<span class="hl">…</span>` and lit up
       with the accent. Initial textContent below shows frame 0 so
       the wordmark is visible before the first JS push lands. */
    /* Splash wordmark. Two stacked grid layers — static art (dim) and
       a cursor overlay (accent) that the host updates per tick via
       execute_javascript. Each layer is a 5×41 grid where filled cells
       are CSS-painted rectangles (`background: currentColor`); empty
       cells are bare spans. This sidesteps font shaping entirely —
       earlier `<pre>`-based layouts had the `█` (U+2588) glyph render
       with cumulative width drift across long runs, mis-aligning the
       top/middle crossbars of `f`/`F` letters from their spines. */
    .splash-wrap { text-align: center; margin: 0 0 2.5rem; }
    .splash-stack {
      display: inline-block; position: relative;
      --splash-cell-w: 0.55em;
      --splash-cell-h: 1em;
      font-size: 1.5rem; line-height: 1;
    }
    .splash-art, .splash-overlay {
      display: grid;
      grid-template-columns: repeat(41, var(--splash-cell-w));
      grid-template-rows: repeat(5, var(--splash-cell-h));
    }
    .splash-overlay {
      position: absolute; inset: 0; pointer-events: none;
    }
    .splash-art > span, .splash-overlay > span { display: block; }
    .splash-art > span.b, .splash-overlay > span.b {
      background: currentColor;
    }
    .splash-art { color: rgba(192, 202, 245, 0.35); }
    .splash-overlay { color: #7dcfff; }
    section h2 {
      font-size: 0.85rem; text-transform: uppercase;
      letter-spacing: 0.1em; opacity: 0.55;
      margin: 0 0 0.75rem; font-weight: 600;
    }
    table {
      width: 100%; border-collapse: collapse;
      font-size: 0.9rem;
    }
    td {
      padding: 0.35rem 0.5rem;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    td.k {
      width: 12rem; white-space: nowrap;
      font-family: ui-monospace, monospace;
    }
    td.a {
      opacity: 0.85;
      font-family: ui-monospace, monospace;
    }
    kbd {
      font-family: ui-monospace, monospace;
      background: rgba(255,255,255,0.08);
      padding: 0.15em 0.4em; border-radius: 4px;
      font-size: 0.85em;
    }
    .empty {
      opacity: 0.5; font-style: italic; padding: 1rem 0;
    }
  </style>
</head>
<body>
  <main>
    <div class="splash-wrap"><div class="splash-stack"><div class="splash-art"><!--SPLASH-ART--></div><div class="splash-overlay" id="buffr-splash"></div></div></div>
    <header>
      <p>Press <kbd>e</kbd> to open the omnibar.</p>
    </header>
    <section>
      <h2>Keybindings</h2>
      <table>
        <tbody>
        <!--KEYBINDS-->
        </tbody>
      </table>
    </section>
  </main>
</body>
</html>