ui: compact, denser layout so message + transcript fit together

- Message box is now a single line (was 3-row textarea); long text scrolls.
- Removed the Speed control from Compose (lives in Settings; brisk was
unreliable). Kept 'Who sends it?' and the Morse preview.
- Tighter spacing everywhere: smaller uppercase section headers, reduced
gaps/paddings, shorter scope, height-capped scrolling transcript.
- Fix el() parser: '.class#id' (class-before-id) order silently failed, so the
three view roots never got their .view class. Now any order works.

lib/version.js

@@ -1,3 +1,3 @@
 // Deployment version label, shown in Settings so you can verify which build
 // is actually loaded after a push. Format: "YYYY-MM-DD rN", bumped on push.
-export const APP_VERSION = "2026-06-01 r4 antenna-fix + one-page";
+export const APP_VERSION = "2026-06-01 r5 compact layout";

style.css

@@ -60,8 +60,8 @@ html, body {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 14px 18px calc(14px + env(safe-area-inset-top));
-    padding-top: max(14px, env(safe-area-inset-top));
+    padding: 10px 16px;
+    padding-top: max(10px, env(safe-area-inset-top));
     background: color-mix(in srgb, var(--bg) 88%, transparent);
     backdrop-filter: blur(12px);
     border-bottom: 1px solid var(--line);
@@ -82,11 +82,11 @@ html, body {
 .icon-btn:active { transform: scale(0.95); }
 
 /* ─── Scrolling single page ───────────────────────────────── */
-.scroller { flex: 1; padding: 16px 16px 48px; display: flex; flex-direction: column; gap: 22px; }
-.divider { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 2px 0; }
+.scroller { flex: 1; padding: 12px 14px 40px; display: flex; flex-direction: column; gap: 12px; }
+.divider { width: 100%; border: 0; border-top: 1px solid var(--line); margin: 0; }
 .view-host { flex: 1; padding: 16px 16px 96px; }
-.view { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 72px; }
-.view h2 { margin: 4px 0 0; font-size: 24px; letter-spacing: -0.02em; }
+.view { display: flex; flex-direction: column; gap: 9px; scroll-margin-top: 64px; }
+.view h2 { margin: 0; font-size: 17px; letter-spacing: -0.01em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
 .view h3 { margin: 6px 0; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
 .muted { color: var(--muted); }
 
@@ -123,7 +123,7 @@ html, body {
 .tab.active { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
 
 /* ─── Fields & controls ───────────────────────────────────── */
-.field { display: flex; flex-direction: column; gap: 8px; }
+.field { display: flex; flex-direction: column; gap: 6px; }
 .field-label { font-size: 13px; font-weight: 600; color: var(--muted); }
 .row { display: flex; gap: 10px; align-items: center; }
 .row.between { justify-content: space-between; }
@@ -131,15 +131,13 @@ html, body {
 
 .compose-input {
     width: 100%;
-    resize: vertical;
-    min-height: 84px;
-    padding: 14px;
-    font-size: 18px;
+    padding: 12px 14px;
+    font-size: 17px;
     font-family: inherit;
     color: var(--text);
     background: var(--panel);
     border: 1px solid var(--line);
-    border-radius: var(--radius);
+    border-radius: 12px;
     outline: none;
 }
 .compose-input:focus { border-color: var(--accent); }
@@ -162,15 +160,15 @@ html, body {
 .btn.big { flex: 1; padding: 16px; font-size: 17px; }
 .btn.listening { background: linear-gradient(135deg, var(--danger), #ff9a5a); }
 
-.segmented { display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 5px; }
+.segmented { display: flex; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
 .seg {
     flex: 1;
     appearance: none;
     background: transparent;
     border: 0;
     color: var(--muted);
-    padding: 10px 8px;
-    border-radius: 10px;
+    padding: 8px 6px;
+    border-radius: 9px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
@@ -180,20 +178,21 @@ html, body {
 .range { width: 100%; accent-color: var(--accent); }
 .range-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text); }
 
-.status { font-size: 13px; min-height: 18px; }
+.status { font-size: 13px; min-height: 16px; }
+.send-row { margin-top: 0; }
 .warn { color: var(--danger); font-size: 14px; font-weight: 600; }
 
 /* ─── Morse chips ─────────────────────────────────────────── */
 .morse-out {
-    min-height: 48px;
+    min-height: 34px;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 6px 12px;
-    padding: 14px;
+    gap: 5px 10px;
+    padding: 10px 12px;
     background: var(--panel);
     border: 1px solid var(--line);
-    border-radius: var(--radius);
+    border-radius: 12px;
 }
 .pattern { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; }
 .pattern .dot, .pattern .dash {
@@ -209,28 +208,28 @@ html, body {
 /* ─── Listen ──────────────────────────────────────────────── */
 .scope {
     width: 100%;
-    height: 130px;
+    height: 84px;
     background: var(--panel);
     border: 1px solid var(--line);
-    border-radius: var(--radius);
+    border-radius: 12px;
     display: block;
 }
 .decoded-text {
     font-family: "JetBrains Mono", ui-monospace, monospace;
-    font-size: 26px;
+    font-size: 21px;
     font-weight: 700;
     letter-spacing: 0.04em;
-    min-height: 34px;
+    min-height: 26px;
     word-break: break-word;
 }
-.decoded-morse { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px; word-break: break-all; }
-.transcript { display: flex; flex-direction: column; gap: 8px; }
+.decoded-morse { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 13px; word-break: break-all; color: var(--muted); }
+.transcript { display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow-y: auto; }
 .line {
-    display: flex; flex-direction: column; gap: 2px;
-    padding: 10px 12px;
+    display: flex; flex-direction: column; gap: 1px;
+    padding: 7px 10px;
     background: var(--panel);
     border: 1px solid var(--line);
-    border-radius: 12px;
+    border-radius: 10px;
 }
 .line-text { font-family: "JetBrains Mono", monospace; font-weight: 700; font-size: 16px; }
 .line-morse { font-family: "JetBrains Mono", monospace; font-size: 12px; }

views/compose.js

@@ -9,9 +9,9 @@ import { tokensToOnsets } from "../lib/wire.js";
 export function createCompose(ctx) {
     const root = el("section.view#view-compose");
 
-    const input = el("textarea.compose-input", {
+    const input = el("input.compose-input", {
+        type: "text",
         placeholder: "Type a message… e.g. SOS",
-        rows: 3,
         value: "SOS",
         oninput: refresh,
     });
@@ -30,17 +30,6 @@ export function createCompose(ctx) {
         (v) => { ctx.state.emitter = v; refresh(); },
     );
 
-    const speed = segmented(
-        "Speed",
-        [
-            { value: "relaxed", label: "Relaxed" },
-            { value: "normal", label: "Normal" },
-            { value: "brisk", label: "Brisk" },
-        ],
-        ctx.state.speed,
-        (v) => { ctx.setSpeed(v); refresh(); },
-    );
-
     const sendBtn = el("button.btn.primary.big", { onclick: send }, "Send ▶");
     const stopBtn = el("button.btn.ghost", { onclick: stop, hidden: true }, "Stop ◼");
     const status = el("div.status muted");
@@ -72,8 +61,6 @@ export function createCompose(ctx) {
         }
         const secs = onsets.length ? (onsets[onsets.length - 1] / 1000 + 0.3) : 0;
         duration.textContent = onsets.length ? `${onsets.length} taps · ~${secs.toFixed(1)}s` : "";
-        // reflect speed selection if changed elsewhere
-        speed.setValue(ctx.state.speed);
         emitter.setValue(ctx.state.emitter);
     }
 
@@ -127,13 +114,11 @@ export function createCompose(ctx) {
 
     root.append(
         el("h2", {}, "Compose"),
-        el("label.field-label", {}, "Message"),
         input,
         el("div.row.between", {}, [el("span.muted", {}, "Morse preview"), duration]),
         morseOut,
         warn,
         emitter.node,
-        speed.node,
         el("div.row.send-row", {}, [sendBtn, stopBtn]),
         status,
     );

views/dom.js

@@ -1,12 +1,19 @@
 /** Tiny DOM helpers (no framework). */
 
-/** el("button.cls#id", {onclick, ...attrs}, [children|string]) */
+/**
+ * el("button.cls#id", {onclick, ...attrs}, [children|string])
+ * Tag is optional (defaults to div); `.class` and `#id` tokens may appear in
+ * any order and any count after it (e.g. "section.view#view-compose").
+ */
 export function el(spec, attrs = {}, children = []) {
-    const m = spec.match(/^([a-z0-9]+)?(#[\w-]+)?((?:\.[\w-]+)*)$/i) || [];
-    const tag = m[1] || "div";
+    const tagMatch = spec.match(/^[a-z][a-z0-9]*/i);
+    const tag = tagMatch ? tagMatch[0] : "div";
     const node = document.createElement(tag);
-    if (m[2]) node.id = m[2].slice(1);
-    if (m[3]) node.className = m[3].split(".").filter(Boolean).join(" ");
+    const rest = spec.slice(tagMatch ? tagMatch[0].length : 0);
+    const idMatch = rest.match(/#([\w-]+)/);
+    if (idMatch) node.id = idMatch[1];
+    const classes = [...rest.matchAll(/\.([\w-]+)/g)].map((x) => x[1]);
+    if (classes.length) node.className = classes.join(" ");
     for (const [k, v] of Object.entries(attrs)) {
         if (v == null || v === false) continue;
         if (k.startsWith("on") && typeof v === "function") {

views/listen.js

@@ -117,7 +117,6 @@ export function createListen(ctx) {
         canvas,
         el("div.row.between", {}, [startBtn, clearBtn]),
         hint,
-        el("label.field-label", {}, "Decoding now"),
         liveText,
         liveMorse,
         el("label.field-label", {}, "Transcript"),