koan-server 0.36.4

GraphQL, Subsonic REST, and MCP server for koan music player.
Documentation 
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

:root { --bg: #101214; --panel: #181b1f; --line: #262a30; --text: #e6e6e6; --dim: #8b9099; --accent: #7dd3a7; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-text-size-adjust: 100%; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; padding-top: max(24px, env(safe-area-inset-top)); }
.hero { display: flex; gap: 20px; align-items: flex-end; margin-bottom: 20px; }
.cover { width: 200px; height: 200px; flex: 0 0 auto; object-fit: cover; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.info { min-width: 0; flex: 1; }
.kicker { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
h1 { font-size: 26px; line-height: 1.2; margin: 4px 0; overflow-wrap: anywhere; }
.sub { margin: 0 0 14px; color: var(--dim); }
.controls { display: flex; gap: 8px; align-items: center; }
button { font: inherit; color: var(--text); background: var(--line); border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px; cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: #0b1a12; font-weight: 600; min-width: 96px; }
button.quiet { background: transparent; color: var(--dim); }
button:disabled { opacity: .5; cursor: default; }
.scrub { display: flex; gap: 10px; align-items: center; margin-top: 12px; color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.scrub input { flex: 1; accent-color: var(--accent); min-width: 0; }
ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
li { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
li:hover { border-color: #353a42; }
li.playing { border-left: 3px solid var(--accent); }
li.playing .t { color: var(--accent); }
.n { width: 1.5em; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t small { display: block; color: var(--dim); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.d { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
noscript a { color: var(--accent); }
.note { margin: -6px 0 14px; color: var(--text); font-style: italic; overflow-wrap: anywhere; }
.album { margin-top: 28px; }
.album header { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.album .art { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: 6px; background: var(--panel); border: 1px solid var(--line); }
.album .art.missing { visibility: hidden; }
.album h2 { font-size: 17px; margin: 0; overflow-wrap: anywhere; }
.album .sub { margin: 2px 0 0; font-size: 13px; }
@media (max-width: 560px) {
  .hero { flex-direction: column; align-items: stretch; }
  .cover { width: 100%; height: auto; aspect-ratio: 1; }
  h1 { font-size: 22px; }
}