From c2a6c1557b08206dffeebccf3bef16e5f60fb87b Mon Sep 17 00:00:00 2001
From: Claude <claude@anthropic.com>
Date: Thu, 28 May 2026 11:51:47 -0400
Subject: [PATCH] =?UTF-8?q?ui(uxp):=20v2.1.8=20=E2=80=94=20density=20redes?=
 =?UTF-8?q?ign=20on=20top=20of=20v2.1.7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three changes, surgical so timeline.js / conform / relink / growing
all keep working:

A. Header → 24px status strip + ⋯ menu
   `connected-bar` rule kept as an alias to `.status-strip` so any code
   path that still emits the old class falls through cleanly. Markup
   replaced with .signal-dot + #connected-host + .btn-ghost ⋯ that
   toggles a .menu containing the Disconnect button. Menu auto-closes
   on outside click. Reclaims ~12px of permanent vertical chrome and
   removes the always-visible Disconnect.

B. Compact action footer
   `.action-row .btn` now: 22px tall, 11px font, 0.01em letterspacing.
   `.advanced-section .action-row .btn` goes a step smaller (20px /
   10.5px). Global `.btn` untouched so #connect-btn stays at full
   weight on the connect pane.

D. Token alignment with services/web-ui DESIGN.md
   --bg-0 #0B0D11 (was #0e0f12), --accent #5B7CFA (was #4f7cff),
   plus the full --text-1..4 / --success / --warning / --danger / --live
   palette. Legacy --ok / --warn aliased to --success / --warning so
   existing rules keep resolving.

C (per-card meta) was already in v2.1.7 — no change needed.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 services/premiere-plugin-uxp/index.html    |  12 +-
 services/premiere-plugin-uxp/manifest.json |   2 +-
 services/premiere-plugin-uxp/src/main.js   |  18 +++
 services/premiere-plugin-uxp/styles.css    | 152 +++++++++++++++++----
 4 files changed, 152 insertions(+), 32 deletions(-)

diff --git a/services/premiere-plugin-uxp/index.html b/services/premiere-plugin-uxp/index.html
index 7208b1d..2abb794 100644
--- a/services/premiere-plugin-uxp/index.html
+++ b/services/premiere-plugin-uxp/index.html
@@ -30,11 +30,15 @@
   <!-- ── Library Pane ─────────────────────────────────────────────── -->
   <section id="library-pane" class="pane hidden">
 
-    <!-- Connected bar -->
-    <header class="connected-bar">
-      <span class="dot dot-ok"></span>
+    <!-- Connection status strip (v2.1.8): dot + identity + ⋯ menu.
+         Disconnect lives inside the menu so it's not always visible. -->
+    <header class="status-strip">
+      <span class="signal-dot"></span>
       <span id="connected-host" class="connected-host"></span>
-      <button id="disconnect-btn" class="btn btn-link">Disconnect</button>
+      <button id="menu-btn" class="btn-ghost" title="More" aria-label="More">⋯</button>
+      <div id="status-menu" class="menu hidden" role="menu">
+        <button id="disconnect-btn" class="menu-item" role="menuitem">Disconnect</button>
+      </div>
     </header>
 
     <!-- Tabs -->
diff --git a/services/premiere-plugin-uxp/manifest.json b/services/premiere-plugin-uxp/manifest.json
index 348341d..e8b4162 100644
--- a/services/premiere-plugin-uxp/manifest.json
+++ b/services/premiere-plugin-uxp/manifest.json
@@ -2,7 +2,7 @@
   "manifestVersion": 5,
   "id": "net.wilddragon.dragonflight.uxp",
   "name": "Dragonflight MAM",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "main": "index.html",
   "host": {
     "app": "premierepro",
diff --git a/services/premiere-plugin-uxp/src/main.js b/services/premiere-plugin-uxp/src/main.js
index 0148310..7a5f033 100644
--- a/services/premiere-plugin-uxp/src/main.js
+++ b/services/premiere-plugin-uxp/src/main.js
@@ -43,7 +43,25 @@
   }
 
   function wireLibraryPane() {
+    // Overflow menu toggle (v2.1.8). Click ⋯ to open; click elsewhere closes.
+    const menuBtn = $('menu-btn');
+    const menu    = $('status-menu');
+    if (menuBtn && menu) {
+      menuBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        menu.classList.toggle('hidden');
+      });
+      document.addEventListener('click', (e) => {
+        if (!menu.classList.contains('hidden')
+            && !menu.contains(e.target)
+            && e.target !== menuBtn) {
+          menu.classList.add('hidden');
+        }
+      });
+    }
+
     $('disconnect-btn').addEventListener('click', () => {
+      if (menu) menu.classList.add('hidden');
       API.disconnect();
       Library.stopGrowingPoll();
       $('server-url').value = '';
diff --git a/services/premiere-plugin-uxp/styles.css b/services/premiere-plugin-uxp/styles.css
index ccf4479..d3b964f 100644
--- a/services/premiere-plugin-uxp/styles.css
+++ b/services/premiere-plugin-uxp/styles.css
@@ -1,22 +1,52 @@
-/* Dragonflight UXP panel — v2.1.0 */
-/* Design tokens mirror web UI dark theme */
+/* Dragonflight UXP panel — v2.1.8 */
+/* Tokens mirror services/web-ui DESIGN.md (canonical) */
 
 :root {
-  --bg-0:   #0e0f12;
-  --bg-1:   #16181d;
-  --bg-2:   #1c1f25;
-  --bg-3:   #232730;
-  --border: #2a2f3a;
-  --text-1: #e6e8ec;
-  --text-2: #b6bac3;
-  --text-3: #7e848f;
-  --accent: #4f7cff;
-  --accent-h: #6a91ff;
-  --danger: #e25c5c;
-  --danger-soft: #3a1d20;
-  --ok:     #4ec07a;
-  --warn:   #e2a45c;
-  --live:   #e25c5c;
+  /* Surfaces */
+  --bg-0:   #0B0D11;
+  --bg-1:   #14171E;
+  --bg-2:   #1B1F27;
+  --bg-3:   #232833;
+  --bg-4:   #2D3340;
+
+  /* Borders + hover overlays */
+  --border:          rgba(255, 255, 255, 0.06);
+  --border-strong:   rgba(255, 255, 255, 0.10);
+  --border-stronger: rgba(255, 255, 255, 0.14);
+  --hover:           rgba(255, 255, 255, 0.04);
+  --hover-strong:    rgba(255, 255, 255, 0.07);
+
+  /* Text */
+  --text-1: #F2F3F6;
+  --text-2: #A8AEBC;
+  --text-3: #6B7280;
+  --text-4: #4B5260;
+
+  /* Accent + status (canonical from DESIGN.md) */
+  --accent:        #5B7CFA;
+  --accent-h:      #6B89FB;
+  --accent-soft:   rgba(91, 124, 250, 0.14);
+  --accent-soft-2: rgba(91, 124, 250, 0.22);
+  --accent-text:   #B4C3FF;
+
+  --success: #2DD4A8;
+  --warning: #F5A623;
+  --danger:  #FF5B5B;
+  --live:    #FF3B30;
+
+  --danger-soft:  rgba(255, 91, 91, 0.14);
+  --success-soft: rgba(45, 212, 168, 0.14);
+
+  /* Legacy aliases — keep so v2.1.x rules using them still resolve */
+  --ok:   var(--success);
+  --warn: var(--warning);
+
+  /* Type */
+  --font-sans: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
+
+  --t-fast: 80ms;
+  --t-med:  120ms;
 }
 
 * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -135,27 +165,80 @@ input[type="search"]::-webkit-search-cancel-button { display: none; }
 .dot-bad { background: var(--danger); }
 .dot-warn { background: var(--warn); }
 
-/* ── connected bar ───────────────────────────────────────────────── */
-.connected-bar {
+/* ── status strip + overflow menu (v2.1.8 redesign) ──────────────── */
+/* 24px-tall identity bar. Disconnect lives behind ⋯ — out of the way
+   but discoverable. Legacy `.connected-bar` rule is kept as an alias
+   so any markup that still uses the old class falls through cleanly. */
+.connected-bar,
+.status-strip {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 5px 8px;
+  gap: 8px;
+  padding: 0 8px;
+  height: 24px;
   background: var(--bg-1);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  margin-bottom: 8px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 6px;
+  flex-shrink: 0;
+  position: relative;
+}
+.signal-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
   flex-shrink: 0;
 }
 .connected-host {
-  font-family: ui-monospace, Menlo, monospace;
-  font-size: 10.5px;
+  font-family: var(--font-mono);
+  font-size: 11px;
   color: var(--text-2);
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.btn-ghost {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--text-3);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background var(--t-fast), color var(--t-fast);
+}
+.btn-ghost:hover { background: var(--hover); color: var(--text-1); }
+.menu {
+  position: absolute;
+  top: 24px;
+  right: 4px;
+  min-width: 130px;
+  background: var(--bg-2);
+  border: 1px solid var(--border-strong);
+  border-radius: 6px;
+  padding: 4px;
+  z-index: 50;
+}
+.menu-item {
+  display: block;
+  width: 100%;
+  text-align: left;
+  padding: 6px 10px;
+  font-size: 11.5px;
+  font-family: inherit;
+  background: transparent;
+  border: none;
+  color: var(--text-1);
+  border-radius: 3px;
+  cursor: pointer;
+}
+.menu-item:hover { background: var(--hover-strong); }
 
 /* ── tabs ────────────────────────────────────────────────────────── */
 .tab-nav {
@@ -359,7 +442,22 @@ input[type="search"]::-webkit-search-cancel-button { display: none; }
   gap: 4px;
 }
 .action-row { display: flex; gap: 4px; }
-.action-row .btn { flex: 1; }
+/* Compact action buttons (v2.1.8 density): 22px tall, smaller type, less
+   padding. Operators have many actions visible at once — shrink the chrome
+   per DESIGN.md "density over whitespace". */
+.action-row .btn {
+  flex: 1;
+  height: 22px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+}
+.advanced-section .action-row .btn {
+  height: 20px;
+  font-size: 10.5px;
+}
 
 /* ── advanced section ────────────────────────────────────────────── */
 .advanced-section {