kiln-app 0.1.0

Native desktop apps from real HTML, CSS and TypeScript, rendered without Chromium or a WebView
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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Kiln — native</title>
    <style>
      body {
        margin: 0;
        padding: 24px;
        background: #0b1226;
        color: #f4e7d3;
        font-family: Helvetica, Arial, sans-serif;
      }
      h1 {
        margin: 0 0 16px;
        font-size: 13px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #8fa0c4;
      }
      p { margin: 0 0 14px; font-size: 14px; color: #6c7a9c; max-width: 460px; line-height: 1.6; }
      output {
        display: block;
        margin-top: 8px;
        font-family: Menlo, monospace;
        font-size: 12px;
        color: #f5a93c;
      }
    </style>
  </head>
  <body>
    <h1>Native surfaces</h1>
    <p>
      The menu bar is a real OS menu built from a plain object. The clipboard is
      the real system clipboard. Neither is drawn by Kiln.
    </p>
    <output id="clip">clipboard: (unread)</output>
    <output id="picked">menu: (nothing chosen)</output>

    <script>
      const picked = document.querySelector("#picked");

      kiln.menu.set([
        {
          label: "File",
          items: [
            { id: "new", label: "New Window", accelerator: "CmdOrCtrl+N",
              click: (id) => { picked.textContent = "menu: " + id; } },
            { id: "open", label: "Open…", accelerator: "CmdOrCtrl+O",
              click: (id) => { picked.textContent = "menu: " + id; } },
            "-",
            { id: "close", label: "Close", accelerator: "CmdOrCtrl+W", enabled: false },
          ],
        },
        {
          label: "Edit",
          items: [
            { id: "copy", label: "Copy", accelerator: "CmdOrCtrl+C" },
            { id: "paste", label: "Paste", accelerator: "CmdOrCtrl+V" },
          ],
        },
      ]);

      kiln.tray.set({
        tooltip: "Kiln",
        items: [
          { id: "show", label: "Show Window",
            click: (id) => { picked.textContent = "tray: " + id; } },
          "-",
          { id: "quit", label: "Quit" },
        ],
      });

      kiln.clipboard.writeText("written by kiln");
      document.querySelector("#clip").textContent =
        "clipboard: " + JSON.stringify(kiln.clipboard.readText());
    </script>
  </body>
</html>