fix: address PR #98 review feedback (a11y, timer, tab separation)

.agents/tasks/task-admin-panel-full-api-cheatsheet/features/FEAT-003.json

@@ -24,5 +24,5 @@
     "Run `cd integrations/bricks/admin-app && npm run build` and confirm exit code 0"
   ],
   "blocked_reason": null,
-  "findings": "All steps implemented successfully. Created cheatsheet-data.js with variableGroups (14 categories), classGroups (5 categories), and miscTokens. Created CheatsheetTab.svelte with search, view mode toggle (All/Variables/Classes), collapsible details sections, and total counts display. Updated App.svelte to import CheatsheetTab, hide SaveBar on read-only tabs (cheatsheet, hooks, variables, classes). Added cheatsheet tab to PHP class-admin-page.php and index.html dev harness. Build passes (vite build exits 0). Bundle grew from ~62KB to ~84KB due to the static cheatsheet data."
+  "findings": "All steps implemented successfully. Created cheatsheet-data.js with variableGroups (14 categories) plus miscTokens (displayed as a 15th Misc group), classGroups (5 categories). Created CheatsheetTab.svelte with search, view mode toggle (All/Variables/Classes), collapsible details sections, and total counts display. Updated App.svelte to import CheatsheetTab, hide SaveBar on read-only tabs (cheatsheet, hooks, variables, classes). Added cheatsheet tab to PHP class-admin-page.php and index.html dev harness. Build passes (vite build exits 0). Bundle grew from ~62KB to ~84KB due to the static cheatsheet data."
 }

.agents/tasks/task-admin-panel-full-api-cheatsheet/task.json

@@ -1,7 +1,14 @@
 {
   "task_id": "task-admin-panel-full-api-cheatsheet",
   "task_description": "Expand the Svelte admin panel to cover the entire public API (variables, classes, bundle settings, hooks) and add a Cheatsheet tab with a searchable index of all CSS custom properties and classes in the framework with descriptions.",
-  "status": "in_progress",
+  "status": "completed",
   "feature_order": ["FEAT-001", "FEAT-002", "FEAT-003"],
-  "blocked_reason": null
+  "blocked_reason": null,
+  "verification": {
+    "build": "pass",
+    "tests": "pass",
+    "test_quality": "skipped",
+    "docker_build": "skipped",
+    "summary": "npm run build exits 0, producing app.js (84KB) and app.css (11KB). All review issues resolved. Semantic review v2 approved."
+  }
 }

integrations/bricks/admin-app/src/components/BundleTab.svelte

@@ -10,6 +10,7 @@
   let saving = $state(false);
   let saved = $state(false);
   let error = $state('');
+  let savedTimer = null;
 
   async function handleSave() {
     saving = true;
@@ -18,7 +19,8 @@
     try {
       await saveSettings({ html_font_size: fontSize });
       saved = true;
-      setTimeout(() => { saved = false; }, 3000);
+      if (savedTimer) clearTimeout(savedTimer);
+      savedTimer = setTimeout(() => { saved = false; savedTimer = null; }, 3000);
     } catch (e) {
       error = e.message || 'Save failed';
     } finally {

integrations/bricks/admin-app/src/components/CheatsheetTab.svelte

@@ -59,22 +59,26 @@
       type="search"
       class="cheatsheet__search"
       placeholder="Search tokens or classes..."
+      aria-label="Search tokens or classes"
       bind:value={search}
     />
     <div class="cheatsheet__view-toggle">
       <button
         type="button"
         class:active={viewMode === 'all'}
+        aria-pressed={viewMode === 'all'}
         onclick={() => viewMode = 'all'}
       >All</button>
       <button
         type="button"
         class:active={viewMode === 'variables'}
+        aria-pressed={viewMode === 'variables'}
         onclick={() => viewMode = 'variables'}
       >Variables</button>
       <button
         type="button"
         class:active={viewMode === 'classes'}
+        aria-pressed={viewMode === 'classes'}
         onclick={() => viewMode = 'classes'}
       >Classes</button>
     </div>

integrations/bricks/admin-app/src/components/ClassesTab.svelte

@@ -86,6 +86,11 @@
   .category__toggle:hover {
     background: #f6f7f7;
   }
+  .category__toggle:focus-visible {
+    outline: 2px solid #2271b1;
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
 
   .category__arrow {
     font-size: 10px;

integrations/bricks/admin-app/src/components/VariablesTab.svelte

@@ -157,6 +157,11 @@
   .category__toggle:hover {
     background: #f6f7f7;
   }
+  .category__toggle:focus-visible {
+    outline: 2px solid #2271b1;
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
 
   .category__arrow {
     font-size: 10px;

integrations/bricks/includes/class-admin-page.php

@@ -66,11 +66,6 @@ public function __construct() {
 			'shadows'    => 'Shadows',
 			'motion'     => 'Motion',
 			'zindex'     => 'Z-Index',
-			'variables'  => 'Variables',
-			'classes'    => 'Classes',
-			'bundle'     => 'Bundle',
-			'hooks'      => 'Hooks',
-			'cheatsheet' => 'Cheatsheet',
 		);
 
 		add_action( 'admin_menu', array( $this, 'register_menu' ) );
@@ -275,7 +270,13 @@ public function sanitize_section_public( $section, $data ) {
 	 * @return array<string,string>
 	 */
 	public function get_tabs() {
-		return $this->tabs;
+		return array_merge( $this->tabs, array(
+			'variables'  => 'Variables',
+			'classes'    => 'Classes',
+			'bundle'     => 'Bundle',
+			'hooks'      => 'Hooks',
+			'cheatsheet' => 'Cheatsheet',
+		) );
 	}
 
 	/**