fix(premiere-plugin-uxp): v2.0.1 — replace unsupported CSS + surface load count

The v2.0.0 grid stayed empty in Premiere 26 because UXP's CSS engine
doesn't support `grid-template-columns: repeat(auto-fill, minmax(...))`
or `aspect-ratio`. Cards rendered with 0 height and the flex column
collapsed, so the actions row stuck to the top of the pane.

Switch to flex-wrap with fixed-width (140px) cards and explicit 80px
thumb heights — both work in UXP's stripped CSS.

Also fix the /auth/me response shape — it returns the user fields
directly, not wrapped in `{ user: ... }`. Header now shows
"display_name @ host" instead of falling back to bare host.

Add a toast on each library load reporting "Loaded N assets (total M)"
so we can tell empty-grid (zero assets) from CSS-broken-grid (cards
exist but invisible) at a glance.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

services/premiere-plugin-uxp/manifest.json

@@ -2,7 +2,7 @@
   "manifestVersion": 5,
   "id": "net.wilddragon.dragonflight.uxp",
   "name": "Dragonflight MAM",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "main": "index.html",
   "host": {
     "app": "premierepro",

services/premiere-plugin-uxp/src/library.js

@@ -92,12 +92,16 @@
       const data = await API.listAssets(query);
       Library.state.assets = (data && (data.assets || data.rows)) || [];
       Library.render();
+      // Surface count via toast so we can tell empty-grid (zero) from
+      // CSS-broken-grid (cards exist but invisible) at a glance.
+      if (UI.toast) UI.toast('Loaded ' + Library.state.assets.length + ' assets (total ' + (data.total || '?') + ')', 'ok');
     } catch (e) {
       grid.innerHTML = '';
       const err = document.createElement('div');
       err.className = 'empty muted';
       err.textContent = 'Error loading assets: ' + e.message;
       grid.appendChild(err);
+      if (UI.toast) UI.toast('Asset load failed: ' + e.message, 'error');
     }
   };
 

services/premiere-plugin-uxp/src/main.js

@@ -16,10 +16,9 @@
     UI.setStatus('#connect-status', 'Connecting…', 'muted');
     try {
       const me = await API.connect(serverUrl, apiToken);
-      UI.$('#connected-host').textContent =
+      // /auth/me returns the user fields directly (no `user:` wrapper).
-        (me.user && (me.user.display_name || me.user.username)) ?
+      const who = (me && (me.display_name || me.username)) || serverUrl;
-          (me.user.display_name || me.user.username) + ' @ ' + serverUrl
+      UI.$('#connected-host').textContent = who + (who === serverUrl ? '' : ' @ ' + serverUrl);
-          : serverUrl;
       UI.setStatus('#connect-status', '', 'muted');
       UI.showPane('library');
       await Library.refresh('');

services/premiere-plugin-uxp/styles.css

@@ -121,17 +121,22 @@ input:focus { border-color: var(--accent); }
 .library-controls input { flex: 1; }
 
 /* ── asset grid ──────────────────────────────────────────────────── */
+/* UXP's CSS engine doesn't support `grid-template-columns: repeat(auto-fill,…)`
+   or `aspect-ratio` reliably. Use flex-wrap with fixed-width cards + explicit
+   thumb height so cards always have visible size. */
 .asset-grid {
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;             /* allow shrinking inside flex column */
   overflow-y: auto;
-  display: grid;
+  display: flex;
-  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  flex-wrap: wrap;
   gap: 6px;
   padding: 2px;
-  align-content: start;
+  align-content: flex-start;
 }
 
 .asset-card {
+  flex: 0 0 140px;
   background: var(--bg-2);
   border: 1px solid var(--border);
   border-radius: 4px;
@@ -145,14 +150,14 @@ input:focus { border-color: var(--accent); }
 
 .asset-thumb {
   width: 100%;
-  aspect-ratio: 16 / 9;
+  height: 80px;
   object-fit: cover;
   background: var(--bg-3);
   display: block;
 }
 .asset-thumb-placeholder {
   width: 100%;
-  aspect-ratio: 16 / 9;
+  height: 80px;
   background: var(--bg-3);
   display: flex;
   align-items: center;