From b71926c3cffa0e24e731d5396ccbc03fffe43f31 Mon Sep 17 00:00:00 2001
From: digital-garbage <133010426+digital-garbage@users.noreply.github.com>
Date: Sun, 4 Oct 2026 14:50:25 +0300
Subject: [PATCH] style: timeline toolbar wraps, quiet readouts, quieter form
 labels and chips

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 app/ui/composer/elements/polish.css | 13 +++++++++++++
 app/ui/features/timeline/index.js   |  4 ++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/ui/composer/elements/polish.css b/app/ui/composer/elements/polish.css
index e0844829..b8161042 100644
--- a/app/ui/composer/elements/polish.css
+++ b/app/ui/composer/elements/polish.css
@@ -52,3 +52,16 @@ body { -webkit-font-smoothing: antialiased; letter-spacing: -.003em; }
 .cx-nle-clip:hover { border-color: var(--line-hover); }
 .cx-nle-clip.cx-on { border-color: var(--accent); background: linear-gradient(var(--accent-soft), var(--elev-2)); }
 .cx-nle-clip-title { font-weight: var(--fw-medium); }
+
+/* toolbars inside a zone wrap instead of overlapping; readouts never break mid-phrase */
+.cx-zone .cx-toolbar { flex-wrap: wrap; row-gap: var(--sp-2); }
+.cx-zone .cx-toolbar-trailing { flex-wrap: wrap; }
+.cx-zone .cx-toolbar .cx-hint, .cx-zone .cx-toolbar .cx-t { white-space: nowrap; font-variant-numeric: tabular-nums; }
+.cx-zone .cx-toolbar .cx-hint { padding-inline: var(--sp-3); }
+
+/* form fields: the label is the quiet half */
+.cx-field { gap: var(--sp-3); }
+.cx-field > .cx-label, .cx-field > label { color: var(--muted); font-size: var(--fs-5); font-weight: var(--fw-regular); }
+.cx-eyebrow { color: var(--muted); font-weight: var(--fw-semibold); }
+.cx-banner { border-radius: var(--r-4); }
+.cx-chip { border-color: transparent; background: var(--elev-2); }
diff --git a/app/ui/features/timeline/index.js b/app/ui/features/timeline/index.js
index 9bc8f9e4..fa64f130 100644
--- a/app/ui/features/timeline/index.js
+++ b/app/ui/features/timeline/index.js
@@ -75,7 +75,7 @@ const tools = {
     };
     const draw = () => {
       const open = p.project, ids = open ? sel.ids : [];
-      put(c.text.sm({ text: `${clock(head.at)} / ${clock(open ? totalSeconds(open) : 0)}` }).node,
+      put(c.hint.default({ text: `${clock(head.at)} / ${clock(open ? totalSeconds(open) : 0)}` }).node,
         btn("＋ Add", () => { const sc = p.edit((pr) => edits.addScene(pr)); if (sc) p.select(sc.id); }, !open),
         btn("Split", split, !ids.length, "Split the selected clip at the playhead"),
         btn("Remove", () => ids.forEach((id) => p.edit((pr) => edits.removeScene(pr, id))), !ids.length),
@@ -94,7 +94,7 @@ const zoom = {
   needs: ["say"],
   setup({ host, app }) {
     const b = (label, what, title) => c.button.sm({ label, tone: "ghost", title, onClick: () => app.say(what) }).node;
-    host.append(c.text.sm({ text: "J/K/L · S split · I/O in/out · +/- zoom" }).node, c.text.sm({ text: "zoom" }).node,
+    host.append(c.hint.default({ text: "J K L · S split · I O in/out · + − zoom" }).node,
       b("−", "zoom.out", "Zoom out"), b("＋", "zoom.in", "Zoom in"), b("fit", "zoom.fit", "Fit the cut to the window"));
   },
 };