Registry UI: fix theming bugs and small UX polish

package.json

@@ -8,6 +8,7 @@
   "scripts": {
     "lint": "npx @biomejs/biome check preview src test tasks",
     "lint:apply": "npx @biomejs/biome check --write preview src test tasks",
+    "preview": "bun run preview/uiPreview.ts",
     "prebuild": "rimraf dist",
     "build": "npm run lint && tsc && node tasks/build.js",
     "git-stage-and-push": "node tasks/git-stage-and-push.js",

src/registry/views/partials/components-list.tsx

@@ -100,12 +100,13 @@ const ComponentsList = (props: {
           <input
             id="search-filter"
             type="text"
-            autofocus
+            aria-label="Filter by component name"
             placeholder="Filter by component name"
           />
           <input
             id="author-filter"
             type="text"
+            aria-label="Filter by component author"
             placeholder="Filter by component author"
           />
         </div>

src/registry/views/static/index.ts

@@ -4,12 +4,24 @@ var oc = oc || {};
 oc.cmd = oc.cmd || [];
 
 oc.cmd.push(function() {
+  var escapeRegExp = function(s) {
+    return String(s).replace(/[.*+?^\${}()|[\\]\\\\]/g, '\\\\$&');
+  };
+
+  var safeRegExp = function(pattern, flags) {
+    try {
+      return new RegExp(pattern, flags);
+    } catch (e) {
+      return new RegExp(escapeRegExp(pattern), flags);
+    }
+  };
+
   var componentsListChanged = function() {
     $('.componentRow').removeClass('hide');
     var s = $('#search-filter').val(),
       a = $('#author-filter').val(),
-      r = new RegExp(s),
-      ar = new RegExp(a, 'i'),
+      r = safeRegExp(s, ''),
+      ar = safeRegExp(a, 'i'),
       selectedCheckboxes = $('input[type=checkbox]:checked'),
       hiddenStates = [],
       hidden = 0,
@@ -163,7 +175,7 @@ oc.cmd.push(function() {
         historyContent.show();
 
         if (historyData.length === 0) {
-          historyContent.html('<p style="text-align: center; color: #64748b; padding: 2em;">No components history available.</p>');
+          historyContent.html('<p class="empty-state">No components history available.</p>');
           return;
         }
 
@@ -189,7 +201,14 @@ oc.cmd.push(function() {
       $target.show();
       $('#menuList a').removeClass('selected');
       $('#menuList a[href="' + target + '"]').addClass('selected');
-
+
+      // Keep URL in sync so tab survives refresh and back/forward
+      try {
+        if (history && history.replaceState && location.hash !== target) {
+          history.replaceState(null, '', target);
+        }
+      } catch (e) {}
+
       // Clean up scroll listeners when leaving history tab
       if (target !== '#components-history') {
         $(window).off('scroll.history resize.history');
@@ -216,15 +235,30 @@ oc.cmd.push(function() {
     });
   };
 
+  var debounce = function(fn, wait) {
+    var t;
+    return function() {
+      var ctx = this, args = arguments;
+      clearTimeout(t);
+      t = setTimeout(function(){ fn.apply(ctx, args); }, wait);
+    };
+  };
+
   $('#filter-components')
     .submit(componentsListChanged)
-    .keyup(componentsListChanged);
+    .keyup(debounce(componentsListChanged, 80));
   $('#filter-components input[type=checkbox]').change(componentsListChanged);
 
   if (q) {
     $('.search').val(q);
   }
 
+  // Focus the search input only on a fresh load (no tab hash, no in-page nav)
+  if (!location.hash) {
+    var $searchInput = $('#search-filter');
+    if ($searchInput.length) { $searchInput.focus(); }
+  }
+
   componentsListChanged();
   initialiseTabs();
 });`;

src/registry/views/static/style.ts

@@ -205,7 +205,7 @@ body::before {
 }
 
 .theme-toggle:hover .theme-toggle-icon {
-  transform: rotate(180deg);
+  transform: rotate(15deg);
 }
 
 h1, h2, h3 {
@@ -417,14 +417,14 @@ p {
   font-size: 1.15rem;
   margin: 0;
   width: 100%;
-  color: var(--color-text-default);
+  color: var(--color-text-primary);
 }
 
 .componentRow .release {
   font-size: 1rem;
   margin: 0;
   width: 100%;
-  color: var(--color-text-default);
+  color: var(--color-text-primary);
 }
 
 .componentRow .title .description {
@@ -550,18 +550,14 @@ select:focus {
 }
 
 .filters input {
-  color: #0f0f23;
-  background-color: #eee;
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-card);
 }
 
 #author-filter {
   flex: 0 1 30%;
 }
 
-@media (min-width: 1024px) {
-  margin-left: 15px;
-}
-
 .parameter {
   flex: 1 0;
   max-width: 25%;
@@ -576,7 +572,7 @@ select:focus {
 .author {
   flex: 0 1 15%;
   word-break: break-all;
-  color: var(--color-info);
+  color: var(--color-text-secondary);
 }
 
 #href {
@@ -862,7 +858,7 @@ a.tab-link.selected {
 }
 
 .info-item {
-  display: flow;
+  display: flex;
   align-items: start;
   padding: 0.75rem 0;
   border-bottom: 1px solid var(--color-border);
@@ -912,12 +908,12 @@ a.tab-link.selected {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--gradient-primary);
+  background: var(--color-border-hover);
   border-radius: 4px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--gradient-secondary);
+  background: var(--color-primary);
 }
 
 /* Main Content Layout */
@@ -1167,6 +1163,14 @@ a.tab-link.selected {
   color: var(--color-text-muted);
 }
 
+.empty-state {
+  text-align: center;
+  padding: 2em;
+  color: var(--color-text-muted);
+  font-style: italic;
+  margin: 0;
+}
+
 .loader p {
   margin: 0;
   font-style: italic;
@@ -1387,17 +1391,17 @@ a.tab-link.selected {
 
 .stats-badge .chart-bar:nth-child(1) {
   height: 12px;
-  background: #10b981; /* green */
+  background: var(--color-primary-light);
 }
 
 .stats-badge .chart-bar:nth-child(2) {
   height: 16px;
-  background: #ef4444; /* red */
+  background: var(--color-primary);
 }
 
 .stats-badge .chart-bar:nth-child(3) {
   height: 20px;
-  background: #3b82f6; /* blue */
+  background: var(--color-primary-dark);
 }
 
 .stats-badge .badge-text {