From 1b4e5f88353180cf999412faa2be9e0326b78361 Mon Sep 17 00:00:00 2001
From: Craig Jennings <c@cjennings.net>
Date: Mon, 15 Jun 2026 19:54:37 -0500
Subject: 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.
---
 scripts/theme-studio/app-core.js | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

(limited to 'scripts/theme-studio/app-core.js')

diff --git a/scripts/theme-studio/app-core.js b/scripts/theme-studio/app-core.js
index d21254e40..96feb89c2 100644
--- a/scripts/theme-studio/app-core.js
+++ b/scripts/theme-studio/app-core.js
@@ -255,6 +255,23 @@ function usedPaletteHexes(palette,syntax,uimap,pkgmap,ground){
   for(const app in (pkgmap||{}))for(const face in pkgmap[app])addFace(pkgmap[app][face]);
   return used;
 }
+// Enumerate where a palette color is used, as "area > element" strings. scopes
+// is [{area, faces:{element: faceObj}}] -- one scope per view area (color/code,
+// ui faces, each package app), element keyed by its display label. A face counts
+// if any of fg / bg / box-color resolves (by hex or palette name) to the target.
+function paletteUsages(hex,scopes,palette){
+  const target=(hex||'').toLowerCase();
+  if(!target)return [];
+  const out=[];
+  for(const {area,faces} of (scopes||[])){
+    for(const element in (faces||{})){
+      const f=faces[element];if(!f)continue;
+      const vals=[f.fg,f.bg,f.box&&f.box.color];
+      if(vals.some(v=>{const h=nameToHex(v,palette);return h&&h.toLowerCase()===target;}))out.push(area+' > '+element);
+    }
+  }
+  return out;
+}
 function columnsFromPalette(palette,ground){
   const bg=ground&&ground.bg,fg=ground&&ground.fg;
   const groundStrip=[];
@@ -367,4 +384,4 @@ function spanNeighborHex(cur,palette,ground,dir){
   return null;
 }
 
-export { nameToHex, normalizePkgFace, buildPkgmap, packagesForExport, mergePackagesInto, effResolve, resolveSyntaxFg, resolveUiAttr, dropdownRowTextColor, paletteOptionList, spanNeighborHex, slugify, fgSetFor, floor, lMax, COVERED_FACES, columnsFromPalette, usedPaletteHexes, regenColumn, rankByLightness, stepRepointPlan, sortColumns, sortColumnMembers, groundRoleOfEntry, groundColumnMembersFromPalette, clearPalettePlan, deletePaletteColumnPlan, areAllLocked, lockToggleLabel, toggleLockSet };
+export { nameToHex, normalizePkgFace, buildPkgmap, packagesForExport, mergePackagesInto, effResolve, resolveSyntaxFg, resolveUiAttr, dropdownRowTextColor, paletteOptionList, spanNeighborHex, slugify, fgSetFor, floor, lMax, COVERED_FACES, columnsFromPalette, usedPaletteHexes, paletteUsages, regenColumn, rankByLightness, stepRepointPlan, sortColumns, sortColumnMembers, groundRoleOfEntry, groundColumnMembersFromPalette, clearPalettePlan, deletePaletteColumnPlan, areAllLocked, lockToggleLabel, toggleLockSet };
-- 
cgit v1.2.3