diff options
| author | Craig Jennings <c@cjennings.net> | 2026-06-23 19:34:01 -0400 |
|---|---|---|
| committer | Craig Jennings <c@cjennings.net> | 2026-06-23 19:34:01 -0400 |
| commit | cd2f83bf6574510d099c8568d5a4e35797bab15d (patch) | |
| tree | dffc856310fc07e0d5321997560382a2b980acbc /scripts/theme-studio/styles.css | |
| parent | 68028dc85fb65c67c5b95a561c549c4aeb43c55c (diff) | |
| download | dotemacs-cd2f83bf6574510d099c8568d5a4e35797bab15d.tar.gz dotemacs-cd2f83bf6574510d099c8568d5a4e35797bab15d.zip | |
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.
Diffstat (limited to 'scripts/theme-studio/styles.css')
| -rw-r--r-- | scripts/theme-studio/styles.css | 3 |
1 files changed, 3 insertions, 0 deletions
diff --git a/scripts/theme-studio/styles.css b/scripts/theme-studio/styles.css index a2277703..d7735980 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}} |