From c5ca8b7d7ac1aa751c1bf79ad35b178f96b3ba77 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Tue, 23 Jun 2026 19:34:01 -0400 Subject: feat(theme-studio): locate preview elements by hover and click Hovering a data-face preview element shows its section, face, and effective value in the preview-label info line, and the element's title carries the full record: effective fg/bg plus a per-attribute source note (direct, inherited-from-X, default, or cleared-rendering-as-default). Clicking an on-pane element scrolls to and flashes its assignment row. Off-pane and cross-surface elements stay hover-only. A single owner-qualified registry keyed by {owner, face} backs both data-face surfaces, package and UI, so the same face name under two owners never collides. The pure helpers in app-core.js take all state as arguments and return data. The one stateful adapter, previewSpan, lives in previews.js and emits the escaped markup. os() stays a package-owner wrapper over previewSpan, and a unified locateClick dispatcher replaces the per-surface click branches. Covered by test-locate.mjs and four new browser gates. Full harness green. --- scripts/theme-studio/styles.css | 3 +++ 1 file changed, 3 insertions(+) (limited to 'scripts/theme-studio/styles.css') diff --git a/scripts/theme-studio/styles.css b/scripts/theme-studio/styles.css index a22777035..d77359801 100644 --- a/scripts/theme-studio/styles.css +++ b/scripts/theme-studio/styles.css @@ -180,6 +180,9 @@ .mock .fr{width:14px;flex:0 0 auto;border-right:1px solid #ffffff14} .mock .num{width:36px;flex:0 0 auto;text-align:right;padding-right:10px} .mock .cd{flex:1;padding-left:8px} .mock .bar,.mock .echo{padding:4px 10px;white-space:pre} #codepre [data-k],.mock [data-k],.mock [data-face]{cursor:pointer} + /* preview-locate: an on-pane element clicks to its assignment row, so it shows a + pointer; off-pane / unassigned elements are hover-only and keep the default cursor. */ + .locate-onpane{cursor:pointer} @keyframes flashcell{0%,55%{background:#e8bd3066}100%{background:transparent}} tr.flash td{animation:flashcell 1.1s ease-out} @keyframes flashtok{0%,55%{background:#e8bd30aa;color:#000}100%{background:transparent}} -- cgit v1.2.3