fix: re-apply .studio.js on each VT navigation; guard delegated targets; clearer [section] error; drop unused standalone prop

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: cevheri

src/components/studio/Explorer.astro

@@ -5,9 +5,8 @@ interface Props {
   active?: string;
   idPrefix?: string; // to keep ids unique between desktop sidebar & mobile drawer
   showConnectionsLabel?: boolean;
-  standalone?: boolean;
 }
-const { active = 'home', idPrefix = 'exp', showConnectionsLabel = true, standalone = false } = Astro.props;
+const { active = 'home', idPrefix = 'exp', showConnectionsLabel = true } = Astro.props;
 ---
 <div data-explorer-root class="flex h-full flex-col text-[13px]">
   <!-- Connections -->

src/components/studio/MobileTopBar.astro

@@ -1,8 +1,8 @@
 ---
 import Explorer from './Explorer.astro';
 
-interface Props { active?: string; standalone?: boolean; }
-const { active = 'home', standalone = false } = Astro.props;
+interface Props { active?: string; }
+const { active = 'home' } = Astro.props;
 const DEMO = 'https://app.libredb.org';
 ---
 <header class="sticky top-0 z-30 flex h-14 items-center justify-between border-b border-edge bg-canvas/95 px-3 backdrop-blur lg:hidden">

src/components/studio/StudioShell.astro

@@ -1,6 +1,6 @@
 ---
 // src/components/studio/StudioShell.astro
-// The shared IDE chrome. index.astro and deploy.astro both render through this.
+// Shared IDE chrome for the home page and every [section] page.
 import TopBar from './TopBar.astro';
 import MobileTopBar from './MobileTopBar.astro';
 import Explorer from './Explorer.astro';
@@ -21,11 +21,11 @@ const { active = 'home', standalone = false } = Astro.props;
   data-standalone={standalone ? '' : undefined}
 >
   <div class="hidden lg:block" transition:persist="topbar"><TopBar /></div>
-  <MobileTopBar active={active} standalone={standalone} transition:persist="mobiletop" />
+  <MobileTopBar active={active} transition:persist="mobiletop" />
 
   <div class="studio-workbench flex min-h-0 flex-1">
     <aside class="hidden w-64 shrink-0 overflow-y-auto border-r border-edge lg:block" transition:persist="sidebar">
-      <Explorer active={active} idPrefix="side" standalone={standalone} />
+      <Explorer active={active} idPrefix="side" />
     </aside>
 
     <main class="studio-pane min-w-0 flex-1 lg:flex lg:flex-col">

src/pages/[section].astro

@@ -35,6 +35,7 @@ const COMPONENTS: Record<string, any> = {
 const { id } = Astro.props as { id: string };
 const meta = sectionById[id];
 const Body = COMPONENTS[id];
+if (!Body) throw new Error(`[section].astro: no component mapped for section id "${id}"`);
 const jsonLd = sectionSeo[id] ?? [];
 ---
 <Layout title={meta.pageTitle} description={meta.pageDescription}>

src/scripts/studio.ts

@@ -303,7 +303,8 @@ function closePalette() {
 
 /* ---- Delegated action click handler ---- */
 function onActionClick(e: Event) {
-  const target = e.target as HTMLElement;
+  const target = e.target;
+  if (!(target instanceof Element)) return;
 
   // Chrome delegations: palette-close, drawer open/close, explorer column toggles
   if (target.closest('[data-palette-close]')) { e.preventDefault(); closePalette(); return; }
@@ -376,7 +377,8 @@ function wireOnce() {
 
   // Delegated input: explorer search filter + palette input
   document.addEventListener('input', (e) => {
-    const target = e.target as HTMLElement;
+    const target = e.target;
+    if (!(target instanceof Element)) return;
     const searchInput = target.closest<HTMLInputElement>('[data-explorer-search]');
     if (searchInput) { filterExplorer(searchInput); return; }
     const paletteInput = target.closest<HTMLInputElement>('[data-palette-input]');
@@ -386,7 +388,9 @@ function wireOnce() {
   // Delegated keydown: explorer search Enter-to-jump
   document.addEventListener('keydown', (e) => {
     if (e.key !== 'Enter') return;
-    const searchInput = (e.target as HTMLElement).closest<HTMLInputElement>('[data-explorer-search]');
+    const target = e.target;
+    if (!(target instanceof Element)) return;
+    const searchInput = target.closest<HTMLInputElement>('[data-explorer-search]');
     if (!searchInput) return;
     const scope = searchInput.closest<HTMLElement>('[data-explorer-root]');
     if (!scope) return;
@@ -401,6 +405,7 @@ function wireOnce() {
 }
 
 function onPage() {
+  document.querySelector('[data-studio]')?.classList.add('js');
   syncActive();
 }