feat(theme-studio): show view-area > element usages on palette tile hover

I added paletteUsages, which enumerates every place a color is assigned, grouped by view area (the view dropdown's names: color/code assignments, ui faces, each package app) and the element within it. renderPalette builds the per-area scopes once and appends the list to each used tile's hover title, under the existing name/hex/nearest-deltaE line. Node tests and a #usagetest gate cover it.

1 files changed, 17 insertions, 1 deletions

diff --git a/scripts/theme-studio/test-columns.mjs b/scripts/theme-studio/test-columns.mjs
index ba949cea4..a63e5e0e0 100644
--- a/scripts/theme-studio/test-columns.mjs
+++ b/scripts/theme-studio/test-columns.mjs
@@ -5,7 +5,7 @@
 
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
-import { columnsFromPalette, usedPaletteHexes, regenColumn, groundRoleOfEntry, rankByLightness, stepRepointPlan, sortColumns } from './app-core.js';
+import { columnsFromPalette, usedPaletteHexes, paletteUsages, regenColumn, groundRoleOfEntry, rankByLightness, stepRepointPlan, sortColumns } from './app-core.js';
 
 const columnOf = (columns, name) => columns.find(f => f.members.some(m => m.name === name));
 
@@ -237,3 +237,19 @@ test('usedPaletteHexes: Boundary - empty maps leave only the ground endpoints',
   const used = usedPaletteHexes([['#101010','bg','ground'],['#f0f0f0','fg','ground']], {}, {}, {}, { bg: '#101010', fg: '#f0f0f0' });
   assert.deepEqual([...used].sort(), ['#101010', '#f0f0f0']);
 });
+
+// --- paletteUsages (hover "view area > element") ----------------------------
+test('paletteUsages: Normal - lists area > element for every assignment of the color', () => {
+  const palette = [['#67809c','blue','blue']];
+  const scopes = [
+    { area: 'color/code assignments', faces: { keyword: { fg: '#67809c' }, string: { fg: '#aabbcc' } } },
+    { area: 'ui faces', faces: { region: { bg: 'blue' } } },
+    { area: 'magit', faces: { branch: { fg: '#999999', box: { color: '#67809c' } } } },
+  ];
+  assert.deepEqual(paletteUsages('#67809c', scopes, palette).sort(),
+    ['color/code assignments > keyword', 'magit > branch', 'ui faces > region'].sort());
+});
+
+test('paletteUsages: Boundary - a color used nowhere returns an empty list', () => {
+  assert.deepEqual(paletteUsages('#123456', [{ area: 'ui faces', faces: { region: { bg: '#000000' } } }], []), []);
+});