@ammduncan/easel 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/LICENCE +21 -0
  2. package/README.md +121 -0
  3. package/bin/easel +2 -0
  4. package/dist/cli.js +368 -0
  5. package/dist/client/index.css +441 -0
  6. package/dist/client/index.html +74 -0
  7. package/dist/client/index.js +236 -0
  8. package/dist/client/viewer.css +717 -0
  9. package/dist/client/viewer.html +100 -0
  10. package/dist/client/viewer.js +1215 -0
  11. package/dist/config-store.js +36 -0
  12. package/dist/http-entry.js +2 -0
  13. package/dist/http-server.js +202 -0
  14. package/dist/mcp.js +235 -0
  15. package/dist/paths.js +45 -0
  16. package/dist/server-manager.js +94 -0
  17. package/dist/session-id.js +78 -0
  18. package/dist/session-store.js +185 -0
  19. package/package.json +60 -0
  20. package/scripts/easel-session-id.mjs +140 -0
  21. package/skills/using-easel/SKILL.md +315 -0
package/dist/client/viewer.html ADDED
@@ -0,0 +1,100 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
6
+ <title>easel · __SESSION_ID__</title>
7
+ <link rel="preconnect" href="https://rsms.me/" />
8
+ <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
9
+ <link rel="stylesheet" href="/static/viewer.css" />
10
+ <link rel="stylesheet" href="/static/index.css" />
11
+ <script>
12
+ // Bootstrap theme before paint to avoid flash.
13
+ (function () {
14
+ try {
15
+ // One-time migration from the project's prior name.
16
+ if (!localStorage.getItem("easel:config")) {
17
+ var legacy = localStorage.getItem("claude-display:config");
18
+ if (legacy) localStorage.setItem("easel:config", legacy);
19
+ }
20
+ var stored = JSON.parse(localStorage.getItem("easel:config") || "null");
21
+ var preset = stored && stored.preset ? stored.preset : "paper";
22
+ var theme = stored && stored.theme ? stored.theme : "dark";
23
+ var density = stored && stored.density ? stored.density : "carded";
24
+ document.documentElement.setAttribute("data-preset", preset);
25
+ document.documentElement.setAttribute("data-theme", theme);
26
+ document.documentElement.setAttribute("data-density", density);
27
+ } catch (e) {
28
+ document.documentElement.setAttribute("data-preset", "paper");
29
+ document.documentElement.setAttribute("data-theme", "dark");
30
+ document.documentElement.setAttribute("data-density", "carded");
31
+ }
32
+ })();
33
+ </script>
34
+ </head>
35
+ <body>
36
+ <header class="topbar">
37
+ <div class="topbar-left">
38
+ <a href="/" class="back-link" title="All sessions"><span>← all sessions</span></a>
39
+ <div class="brand">
40
+ <span class="brand-mark" aria-hidden="true"></span>
41
+ <span id="project-label">easel</span>
42
+ </div>
43
+ <div class="session-pill" id="session-pill">s/__SESSION_ID__</div>
44
+ <div class="count" id="push-count">0 pushes</div>
45
+ </div>
46
+ <div class="topbar-right">
47
+ <div class="live">
48
+ <span class="live-dot" id="live-dot" aria-hidden="true"></span>
49
+ <span id="live-label">connecting…</span>
50
+ </div>
51
+ <div class="switcher">
52
+ <button id="switcher-btn" class="switcher-btn" type="button" aria-haspopup="true" aria-expanded="false">
53
+ switch <span class="chev">▾</span>
54
+ </button>
55
+ <div id="switcher-menu" class="switcher-menu" role="menu" hidden></div>
56
+ </div>
57
+ <div class="preset-group" role="group" aria-label="Theme preset">
58
+ <button class="preset-btn" data-preset="paper" type="button" aria-label="Paper preset" title="Paper · warm cream, amber accent"><span class="preset-swatch swatch-paper"></span></button>
59
+ <button class="preset-btn" data-preset="aurora" type="button" aria-label="Aurora preset" title="Aurora · violet glow"><span class="preset-swatch swatch-aurora"></span></button>
60
+ <button class="preset-btn" data-preset="slate" type="button" aria-label="Slate preset" title="Slate · cool neutral, cyan accent"><span class="preset-swatch swatch-slate"></span></button>
61
+ </div>
62
+ <div class="density-group" role="group" aria-label="Density">
63
+ <button class="density-btn" data-density="carded" type="button" aria-label="Carded" title="Carded · bordered cards">
64
+ <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.6"><rect x="2" y="3.5" width="12" height="3.5" rx="1"/><rect x="2" y="9" width="12" height="3.5" rx="1"/></svg>
65
+ </button>
66
+ <button class="density-btn" data-density="flat" type="button" aria-label="Flat" title="Flat · no chrome, whitespace only">
67
+ <svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M3 4.5h10M3 11.5h10"/></svg>
68
+ </button>
69
+ </div>
70
+ <button id="theme-toggle" class="theme-toggle" type="button" aria-label="Toggle theme" title="Toggle light / dark">
71
+ <svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
72
+ <svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
73
+ </button>
74
+ </div>
75
+ </header>
76
+
77
+ <main id="feed" class="feed">
78
+ <div id="pruned-marker" class="pruned-marker" hidden></div>
79
+ <div id="cards"></div>
80
+ <div id="empty-state" class="empty-state">
81
+ <h2>No pushes yet</h2>
82
+ <p>Anything Claude pushes from this session will appear here, newest at the bottom.</p>
83
+ </div>
84
+ </main>
85
+
86
+ <button id="new-pill" class="new-pill" hidden>
87
+ <span class="pulse" aria-hidden="true"></span>
88
+ <span id="new-pill-text">1 new</span>
89
+ <span class="arrow" aria-hidden="true">↓</span>
90
+ </button>
91
+
92
+ <script>
93
+ window.__EASEL__ = {
94
+ sessionId: "__SESSION_ID__",
95
+ port: "__PORT__",
96
+ };
97
+ </script>
98
+ <script src="/static/viewer.js"></script>
99
+ </body>
100
+ </html>