fix: palette focus trap, Results scroll-to-top action, namespaced rerun keyframe

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: cevheri

src/components/studio/QueryChrome.astro

@@ -60,7 +60,7 @@ const { section, class: className = '' } = Astro.props;
   <!-- Results tabs -->
   <div class="flex items-center justify-between gap-3 border-t border-edge px-4 text-[12px]">
     <div class="flex items-center gap-4 overflow-x-auto py-2.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-      <span class="whitespace-nowrap font-semibold text-fg shadow-[inset_0_-2px_0_var(--color-primary)] pb-0.5">▦ Results</span>
+      <button type="button" class="whitespace-nowrap font-semibold text-fg shadow-[inset_0_-2px_0_var(--color-primary)] pb-0.5" data-action="results"><span aria-hidden="true">▦</span> Results</button>
       <button type="button" class="whitespace-nowrap text-faint hover:text-fg" data-action="explain" aria-expanded="false" aria-controls={`explain-${section.id}`}><span aria-hidden="true">⚡</span> Explain</button>
       <button type="button" class="whitespace-nowrap text-faint hover:text-fg" data-action="notice" data-notice="history"><span aria-hidden="true">↺</span> History</button>
       <button type="button" class="whitespace-nowrap text-faint hover:text-fg" data-action="notice" data-notice="saved"><span aria-hidden="true">⭐</span> Saved</button>

src/scripts/studio.ts

@@ -370,6 +370,10 @@ function init() {
     if (action === 'copy-link') { e.preventDefault(); copyLink(); }
     if (action === 'export') { e.preventDefault(); exportSection(); }
     if (action === 'palette') { e.preventDefault(); openPalette(); }
+    if (action === 'results') {
+      e.preventDefault();
+      document.querySelector(`[data-section="${currentHash()}"] .studio-results`)?.scrollTo({ top: 0, behavior: 'smooth' });
+    }
   });
 
   // Hash routing — hashchange covers in-page link nav; popstate covers
@@ -390,6 +394,7 @@ function init() {
     const root = document.querySelector('[data-palette-root]');
     if (!root || root.hasAttribute('hidden')) return;
     if (e.key === 'Escape') { e.preventDefault(); closePalette(); }
+    else if (e.key === 'Tab') { e.preventDefault(); (document.querySelector('[data-palette-input]') as HTMLElement | null)?.focus(); }
     else if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(Math.min(paletteHighlight + 1, paletteFiltered.length - 1)); }
     else if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(Math.max(paletteHighlight - 1, 0)); }
     else if (e.key === 'Enter') { e.preventDefault(); paletteFiltered[paletteHighlight]?.run(); closePalette(); }

src/styles/global.css

@@ -112,8 +112,8 @@
 }
 
 /* RUN re-run shimmer on the active result pane */
-@keyframes rerun-fade { 0% { opacity: 0.35; } 100% { opacity: 1; } }
-.studio-results.is-rerunning { animation: rerun-fade 0.5s ease; }
+@keyframes studio-rerun-fade { 0% { opacity: 0.35; } 100% { opacity: 1; } }
+.studio-results.is-rerunning { animation: studio-rerun-fade 0.5s ease; }
 @media (prefers-reduced-motion: reduce) {
   .studio-results.is-rerunning { animation: none; }
 }