oc 0.50.54 → 0.50.56

package/dist/registry/views/static/index.js

@@ -18,28 +18,92 @@ oc.cmd.push(function() {
     }
   };
 
-  var componentsListChanged = function() {
-    $('.componentRow').removeClass('hide');
+  // Client-side pagination for the components list. Enabled only once the
+  // registry has more components than a single page so smaller registries keep
+  // the simple single-page view.
+  var COMPONENTS_PAGE_SIZE = 50;
+  var paginationEnabled = componentsList.length > COMPONENTS_PAGE_SIZE;
+  var currentPage = 1;
+
+  var renderComponentsPagination = function(totalMatching, totalPages) {
+    // Rendered into both the top and bottom containers so they stay in sync.
+    var containers = $('.components-pagination');
+    if (!paginationEnabled || totalMatching <= COMPONENTS_PAGE_SIZE) {
+      containers.addClass('hide').empty();
+      return;
+    }
+
+    // Build a compact list of page numbers: first, last, and a window around
+    // the current page, with ellipses for the gaps.
+    var pages = [];
+    var windowSize = 1;
+    var start = Math.max(2, currentPage - windowSize);
+    var end = Math.min(totalPages - 1, currentPage + windowSize);
+    pages.push(1);
+    if (start > 2) {
+      pages.push('...');
+    }
+    for (var p = start; p <= end; p++) {
+      pages.push(p);
+    }
+    if (end < totalPages - 1) {
+      pages.push('...');
+    }
+    if (totalPages > 1) {
+      pages.push(totalPages);
+    }
+
+    var html =
+      '<button type="button" class="pagination-btn pagination-prev" data-page="' +
+      (currentPage - 1) +
+      '"' +
+      (currentPage <= 1 ? ' disabled' : '') +
+      '>Prev</button>';
+    for (var k = 0; k < pages.length; k++) {
+      if (pages[k] === '...') {
+        html += '<span class="pagination-ellipsis">…</span>';
+      } else {
+        html +=
+          '<button type="button" class="pagination-btn pagination-page' +
+          (pages[k] === currentPage ? ' active' : '') +
+          '" data-page="' +
+          pages[k] +
+          '">' +
+          pages[k] +
+          '</button>';
+      }
+    }
+    html +=
+      '<button type="button" class="pagination-btn pagination-next" data-page="' +
+      (currentPage + 1) +
+      '"' +
+      (currentPage >= totalPages ? ' disabled' : '') +
+      '>Next</button>';
+
+    containers.html(html).removeClass('hide');
+  };
+
+  var applyComponentsView = function() {
     var s = $('#search-filter').val(),
       a = $('#author-filter').val(),
       r = safeRegExp(s, ''),
       ar = safeRegExp(a, 'i'),
       selectedCheckboxes = $('input[type=checkbox]:checked'),
       hiddenStates = [],
-      hidden = 0,
+      matchingNames = [],
       i;
 
     for (i = 0; i < selectedCheckboxes.length; i++) {
       hiddenStates.push($(selectedCheckboxes[i]).attr('name'));
     }
 
+    // First pass: figure out which components match the current filters.
     for (i = 0; i < componentsList.length; i++) {
       var matches = !s || !!componentsList[i].name.match(r),
         matchesAuthor =
           !a ||
           (componentsList[i].author.name &&
             !!componentsList[i].author.name.match(ar)),
-        selector = $('#component-' + componentsList[i].name),
         isHidden = false;
 
       for (var j = 0; j < hiddenStates.length; j++) {
@@ -48,15 +112,41 @@ oc.cmd.push(function() {
         }
       }
 
-      var show = matches && matchesAuthor && !isHidden;
-      selector[show ? 'removeClass' : 'addClass']('hide');
-      if (!show) {
-        hidden += 1;
+      if (matches && matchesAuthor && !isHidden) {
+        matchingNames.push(componentsList[i].name);
       }
     }
 
-    var totalShowing = componentsList.length - hidden,
-      result = totalShowing + (totalShowing === 1 ? ' component' : ' components');
+    var totalMatching = matchingNames.length;
+    var totalPages = paginationEnabled
+      ? Math.max(1, Math.ceil(totalMatching / COMPONENTS_PAGE_SIZE))
+      : 1;
+    if (currentPage > totalPages) {
+      currentPage = totalPages;
+    }
+    if (currentPage < 1) {
+      currentPage = 1;
+    }
+
+    var startIdx = paginationEnabled
+      ? (currentPage - 1) * COMPONENTS_PAGE_SIZE
+      : 0;
+    var endIdx = paginationEnabled ? startIdx + COMPONENTS_PAGE_SIZE : totalMatching;
+    var visibleNames = {};
+    for (i = startIdx; i < endIdx && i < totalMatching; i++) {
+      visibleNames[matchingNames[i]] = true;
+    }
+
+    // Second pass: only rows that match the filters AND fall on the current
+    // page are shown.
+    for (i = 0; i < componentsList.length; i++) {
+      var name = componentsList[i].name,
+        show = visibleNames[name] === true;
+      $('#component-' + name)[show ? 'removeClass' : 'addClass']('hide');
+    }
+
+    var result =
+      totalMatching + (totalMatching === 1 ? ' component' : ' components');
 
     if (s) {
       result += ' matching "' + s + '"';
@@ -67,13 +157,31 @@ oc.cmd.push(function() {
     if (a) {
       result += ' by author "' + a + '"';
     }
+    if (paginationEnabled && totalMatching > COMPONENTS_PAGE_SIZE) {
+      result +=
+        ' (showing ' +
+        (startIdx + 1) +
+        '–' +
+        Math.min(endIdx, totalMatching) +
+        ')';
+    }
 
     $('#results-count').text(result);
-    $('#components-empty')[totalShowing === 0 ? 'removeClass' : 'addClass']('hide');
+    $('#components-empty')[totalMatching === 0 ? 'removeClass' : 'addClass'](
+      'hide'
+    );
+
+    renderComponentsPagination(totalMatching, totalPages);
 
     return false;
   };
 
+  var componentsListChanged = function() {
+    // Any filter change resets back to the first page.
+    currentPage = 1;
+    return applyComponentsView();
+  };
+
   var historyData = [];
   var historyRenderedCount = 0;
   var historyBatchSize = 50; // Number of items to render per batch
@@ -252,6 +360,21 @@ oc.cmd.push(function() {
     .keyup(debounce(componentsListChanged, 80));
   $('#filter-components input[type=checkbox]').change(componentsListChanged);
 
+  // Delegated from the stable list container so both the top and bottom
+  // pagination bars work. No auto-scroll, so repeated clicks stay put.
+  $('#components-list').on('click', '.pagination-btn', function() {
+    var $btn = $(this);
+    if ($btn.is('[disabled]')) {
+      return;
+    }
+    var page = parseInt($btn.attr('data-page'), 10);
+    if (isNaN(page)) {
+      return;
+    }
+    currentPage = page;
+    applyComponentsView();
+  });
+
   if (q) {
     $('.search').val(q);
   }

package/dist/registry/views/static/style.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\");\n\n:root {\n  /* Brand accent (consistent across themes) */\n  --color-primary: #6366f1;\n  --color-primary-dark: #4f46e5;\n  --color-primary-light: #818cf8;\n  --color-secondary: #0891b2;\n  --color-accent: #d97706;\n\n  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n\n  /* Spacing / radius scale */\n  --radius-sm: 6px;\n  --radius-md: 10px;\n  --radius-lg: 14px;\n  --radius-full: 999px;\n\n  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;\n}\n\n/* Dark theme (default) */\n:root, [data-theme=\"dark\"] {\n  --color-bg-primary: #0b0e14;\n  --color-bg-secondary: #11151d;\n  --color-bg-card: #11151d;\n  --color-bg-elevated: #161c26;\n  --color-bg-glass: rgba(255, 255, 255, 0.04);\n  --color-bg-hover: rgba(255, 255, 255, 0.035);\n\n  --color-text-primary: #e6edf3;\n  --color-text-secondary: #aeb6c2;\n  --color-text-muted: #7d8693;\n\n  --color-border: #222a37;\n  --color-border-hover: #323c4d;\n\n  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.4);\n  --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.5);\n  --shadow-glow: 0 4px 16px -2px rgba(99, 102, 241, 0.4);\n\n  --color-text-inverse: #ffffff;\n\n  --tint-strength: 0.16;\n  --tint-border: 0.32;\n  --badge-text-lightness: 78%;\n}\n\n/* Light theme */\n[data-theme=\"light\"] {\n  --color-bg-primary: #fbfcfd;\n  --color-bg-secondary: #f4f6f8;\n  --color-bg-card: #ffffff;\n  --color-bg-elevated: #ffffff;\n  --color-bg-glass: rgba(255, 255, 255, 0.7);\n  --color-bg-hover: rgba(15, 23, 42, 0.025);\n\n  --color-text-primary: #1f2328;\n  --color-text-secondary: #4a535e;\n  --color-text-muted: #6a737d;\n\n  --color-border: #e2e6ea;\n  --color-border-hover: #cdd3da;\n\n  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);\n  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08);\n  --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, 0.12);\n  --shadow-glow: 0 4px 16px -2px rgba(99, 102, 241, 0.25);\n\n  --color-text-inverse: #ffffff;\n\n  --tint-strength: 0.1;\n  --tint-border: 0.28;\n  --badge-text-lightness: 38%;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  @view-transition {\n    navigation: auto;\n  }\n}\n\nbody {\n  font-family: var(--font-sans);\n  background: var(--color-bg-primary);\n  color: var(--color-text-primary);\n  line-height: 1.6;\n  min-height: 100vh;\n  overflow-x: hidden;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  font-size: 15px;\n}\n\n.container {\n  max-width: 1240px;\n  margin: 0 auto;\n  padding: 0 1.5rem;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.header {\n  background: color-mix(in srgb, var(--color-bg-primary) 80%, transparent);\n  backdrop-filter: blur(12px);\n  border-bottom: 1px solid var(--color-border);\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.85rem 0;\n}\n\n.logo {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.65rem;\n  text-decoration: none;\n  color: var(--color-text-primary);\n  font-weight: 600;\n  font-size: 1.0rem;\n  letter-spacing: -0.01em;\n  transition: color 0.15s ease;\n  margin-top: 0;\n}\n\n.logo:hover {\n  color: var(--color-text-primary);\n  text-decoration: none;\n}\n\n.logo-icon {\n  color: #fff;\n  width: 30px;\n  height: 30px;\n  background: var(--gradient-primary);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 700;\n  font-size: 0.8rem;\n  letter-spacing: 0.02em;\n  box-shadow: var(--shadow-sm);\n}\n\n.logo img {\n  width: 30px;\n  height: 30px;\n  border-radius: 8px;\n}\n\n/* Theme Toggle Button */\n.theme-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.45rem 0.85rem;\n  background: var(--color-bg-card);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-md);\n  color: var(--color-text-secondary);\n  font-size: 0.8rem;\n  font-weight: 500;\n  font-family: inherit;\n  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;\n  cursor: pointer;\n}\n\n.theme-toggle:hover {\n  border-color: var(--color-border-hover);\n  color: var(--color-text-primary);\n  background: var(--color-bg-elevated);\n}\n\n.theme-toggle-icon {\n  font-size: 1rem;\n  line-height: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--color-text-secondary);\n}\n\n.theme-toggle:hover .theme-toggle-icon { color: var(--color-text-primary); }\n.theme-toggle-icon svg { display: block; }\n\n/* \u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\nh1, h2, h3 {\n  color: var(--color-text-primary);\n  font-weight: 600;\n  letter-spacing: -0.02em;\n  margin-bottom: 0.4em;\n}\n\nh1 {\n  font-size: 2rem;\n  font-weight: 680;\n  margin-bottom: 0.5rem;\n  line-height: 1.2;\n}\n\nh2 {\n  font-size: 1.2rem;\n  font-weight: 600;\n}\n\nh3 {\n  font-size: 1.05rem;\n  font-weight: 600;\n}\n\n/* Focus styles for accessibility */\n*:focus {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n*:focus:not(:focus-visible) { outline: none; }\n*:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\na {\n  color: var(--color-primary-light);\n  text-decoration: none;\n  transition: color 0.15s ease;\n  border-radius: 4px;\n}\na:hover { color: var(--color-primary); text-decoration: underline; }\na:focus { color: var(--color-primary); }\n\n[data-theme=\"light\"] a { color: var(--color-primary-dark); }\n\n#components-list a:hover { text-decoration: none; }\n\np { margin-top: 0; }\n\n.back {\n  width: 100%;\n  margin-bottom: 1.5em;\n  display: block;\n  color: var(--color-text-muted);\n  font-size: 0.9em;\n}\n\n/* \u2500\u2500 Hero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.hero {\n  padding: 2.5rem 0 1.5rem;\n  position: relative;\n}\n\n.hero h1 { text-align: left; }\n\n.component-title {\n  font-family: var(--font-mono);\n  font-weight: 600;\n  font-size: 1.85rem;\n  letter-spacing: -0.01em;\n}\n\n.component-description {\n  color: var(--color-text-secondary);\n  max-width: 70ch;\n  margin-bottom: 0.5rem;\n  font-size: 1rem;\n}\n\n.version-selector {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6rem;\n  margin: 0.75rem 0;\n}\n\n.version-label {\n  color: var(--color-text-muted);\n  font-size: 0.85rem;\n  font-weight: 500;\n}\n\n/* \u2500\u2500 Stats badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.stats-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6rem;\n  background: var(--color-bg-card);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-md);\n  padding: 0.5rem 0.9rem;\n  margin: 1rem 0 0;\n  color: var(--color-text-secondary);\n  font-size: 0.85rem;\n  font-weight: 500;\n  max-width: fit-content;\n}\n\n.stats-badge .chart-icon {\n  display: flex;\n  align-items: flex-end;\n  gap: 2px;\n  height: 16px;\n}\n\n.stats-badge .chart-bar { width: 3px; border-radius: 2px; }\n.stats-badge .chart-bar:nth-child(1) { height: 8px; background: var(--color-primary-light); }\n.stats-badge .chart-bar:nth-child(2) { height: 12px; background: var(--color-primary); }\n.stats-badge .chart-bar:nth-child(3) { height: 16px; background: var(--color-primary-dark); }\n\n.stats-badge .badge-text {\n  color: var(--color-text-secondary);\n  font-size: 0.85rem;\n  font-weight: 500;\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n}\n\n/* \u2500\u2500 Main layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.main-content {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 320px;\n  gap: 1.75rem;\n  padding: 1rem 0 3rem;\n  align-items: start;\n}\n\n.sidebar {\n  display: grid;\n  gap: 1.25rem;\n  align-content: start;\n  position: sticky;\n  top: 5rem;\n}\n\n/* \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n#menuList {\n  display: flex;\n  gap: 0.25rem;\n  border-bottom: 1px solid var(--color-border);\n  margin-bottom: 1.5rem !important;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n#menuList::-webkit-scrollbar { display: none; height: 0; }\n\na.tab-link {\n  color: var(--color-text-secondary);\n  font-weight: 500;\n  padding: 0.6rem 0.9rem;\n  border-radius: 0;\n  transition: color 0.15s ease, border-color 0.15s ease;\n  font-size: 0.9rem;\n  line-height: 1.2;\n  display: inline-block;\n  border: none;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n  white-space: nowrap;\n}\n\na.tab-link:hover {\n  color: var(--color-text-primary);\n  background: transparent;\n  text-decoration: none;\n}\n\na.tab-link.selected {\n  color: var(--color-primary-light);\n  background: transparent;\n  text-decoration: none;\n  border-bottom-color: var(--color-primary);\n}\n\n[data-theme=\"light\"] a.tab-link.selected { color: var(--color-primary-dark); }\n\n/* \u2500\u2500 Cards / sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.content-section {\n  background: var(--color-bg-card);\n  border-radius: var(--radius-lg);\n  border: 1px solid var(--color-border);\n  overflow: hidden;\n  margin-bottom: 1.5rem;\n}\n\n.section-header {\n  padding: 1rem 1.5rem;\n  background: var(--color-bg-glass);\n  border-bottom: 1px solid var(--color-border);\n  display: flex;\n  align-items: center;\n  gap: 0.7rem;\n}\n\n.section-title {\n  font-size: 1.05rem;\n  font-weight: 600;\n  color: var(--color-text-primary);\n  letter-spacing: -0.01em;\n}\n\n.section-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--color-primary-light);\n  flex-shrink: 0;\n}\n\n.section-icon svg { width: 18px; height: 18px; display: block; }\n\n[data-theme=\"light\"] .section-icon { color: var(--color-primary); }\n\n.section-content { padding: 1.5rem; }\n\n.box {\n  background: var(--color-bg-card);\n  border-radius: var(--radius-lg);\n  border: 1px solid var(--color-border);\n  padding: 1.25rem;\n  margin-bottom: 1.5em;\n}\n\n/* \u2500\u2500 Info cards (sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.info-card {\n  background: var(--color-bg-card);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-lg);\n  padding: 1.25rem 1.35rem;\n}\n\n.info-card .section-title {\n  font-size: 0.8rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--color-text-muted);\n  font-weight: 600;\n  margin-bottom: 1rem !important;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.info-card .section-title svg { width: 15px; height: 15px; color: var(--color-text-muted); }\n\n.info-item {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 0.6rem 0;\n  border-bottom: 1px solid var(--color-border);\n  font-size: 0.875rem;\n}\n\n.info-item:last-child { border-bottom: none; padding-bottom: 0; }\n.info-item:first-of-type { padding-top: 0; }\n\n.info-label {\n  font-weight: 500;\n  color: var(--color-text-muted);\n  flex-shrink: 0;\n}\n\n.info-value {\n  color: var(--color-text-primary);\n  text-align: right;\n  word-break: break-word;\n  font-weight: 450;\n}\n\n.info-value a { word-break: break-all; }\n\n/* \u2500\u2500 List / table rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n#components-list.box,\n#components-history.box,\n#components-templates.box,\n#components-dependencies.box,\n#components-plugins.box {\n  padding: 0;\n  overflow: hidden;\n}\n\n.row {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--color-border);\n  border-radius: 0;\n  width: 100%;\n  display: flex;\n  padding: 0.9rem 1.25rem;\n  box-sizing: border-box;\n  margin-bottom: 0;\n  align-items: center;\n  box-shadow: none;\n  transition: background 0.12s ease;\n  gap: 0.5rem;\n}\n\n.row:last-child { border-bottom: none; }\n\n.row.header {\n  background: var(--color-bg-glass);\n  border: none;\n  border-bottom: 1px solid var(--color-border) !important;\n  font-size: 0.72rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  border-radius: 0;\n  box-shadow: none;\n  color: var(--color-text-muted);\n}\n\n.row.header div {\n  font-weight: 600;\n  margin: 0;\n  align-self: center;\n}\n\n.row.double { min-height: 56px; }\n.row div { word-wrap: break-word; }\n.row span { padding-right: 10px; }\n\n/* clickable component rows (anchors that wrap an entire row) */\n#components-list > a,\n#components-history a,\n#components-dependencies > a {\n  display: block;\n  color: inherit;\n}\n\n.componentRow { transition: background 0.12s ease; }\n\n.componentRow:hover {\n  background: var(--color-bg-hover);\n  box-shadow: none;\n  border-color: var(--color-border);\n  transform: none;\n}\n\n#components-list > a:focus-visible,\n#components-history a:focus-visible,\n#components-dependencies > a:focus-visible {\n  outline: none;\n}\n\n#components-list > a:focus-visible .componentRow,\n#components-history a:focus-visible .componentRow,\n#components-dependencies > a:focus-visible .componentRow {\n  background: var(--color-bg-hover);\n  box-shadow: inset 2px 0 0 var(--color-primary);\n}\n\n.componentRow .title .name {\n  font-weight: 600;\n  font-size: 0.95rem;\n  margin: 0;\n  width: 100%;\n  color: var(--color-text-primary);\n  letter-spacing: -0.005em;\n}\n\n.componentRow:hover .title .name { color: var(--color-primary-light); }\n[data-theme=\"light\"] .componentRow:hover .title .name { color: var(--color-primary-dark); }\n\n.componentRow .release {\n  font-size: 0.9rem;\n  margin: 0;\n  width: 100%;\n  color: var(--color-text-secondary);\n}\n\n.componentRow .release a { color: var(--color-primary-light); }\n[data-theme=\"light\"] .componentRow .release a { color: var(--color-primary-dark); }\n\n.componentRow .title .description {\n  padding: 0;\n  font-size: 0.85rem;\n  color: var(--color-text-muted);\n  margin-top: 0.15rem;\n  line-height: 1.45;\n}\n\n.row > * {\n  flex: 0 1 9%;\n  padding: 0 0.35rem;\n  align-self: center;\n  font-size: 0.875rem;\n}\n\n.row > *:last-child { padding-right: 0; }\n.row > *:first-child { padding-left: 0; }\n\n.release,\n.title,\n.filters > * {\n  flex: 1 0;\n}\n\n.title {\n  display: flex;\n  flex-direction: column;\n  gap: 0.1rem;\n}\n\n.author {\n  flex: 0 1 15%;\n  word-break: break-word;\n  color: var(--color-text-secondary);\n  font-size: 0.85rem;\n}\n\n.date { color: var(--color-text-muted); font-size: 0.85rem; }\n.activity { color: var(--color-text-secondary); font-size: 0.85rem; }\n\n/* \u2500\u2500 Filters \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.filters {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 1.25rem 1.25rem 0.75rem;\n}\n\n.filters input {\n  color: var(--color-text-primary);\n  background-color: var(--color-bg-secondary);\n  margin-bottom: 0;\n}\n\n#author-filter { flex: 0 1 30%; }\n\n.states {\n  width: 100%;\n  margin: 0;\n  padding: 0 1.25rem 1.25rem;\n  display: flex;\n  align-items: center;\n  gap: 1.25rem;\n  flex-wrap: wrap;\n  border-bottom: 1px solid var(--color-border);\n}\n\n.states > span {\n  color: var(--color-text-muted);\n  font-weight: 500;\n  font-size: 0.8rem;\n}\n\n.states input { margin-right: 6px; }\n\n/* \u2500\u2500 List results meta bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.list-meta {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.7rem 1.25rem;\n  font-size: 0.8rem;\n  color: var(--color-text-muted);\n  font-weight: 500;\n}\n\n#results-count { color: var(--color-text-secondary); }\n\n/* \u2500\u2500 Component URL copy group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.url-input-group {\n  display: flex;\n  gap: 0.5rem;\n  align-items: stretch;\n}\n\n.url-input-group #href {\n  flex: 1;\n  margin-bottom: 0;\n  padding: 0.7rem 0.9rem;\n}\n\n.url-input-group .copy-href {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n\n.copy-href.copied {\n  color: color-mix(in srgb, #10b981 70%, var(--color-text-primary));\n  border-color: color-mix(in srgb, #10b981 var(--tint-border), transparent);\n  background: color-mix(in srgb, #10b981 var(--tint-strength), transparent);\n}\n\n/* \u2500\u2500 Forms \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\ninput[type=\"text\"],\ninput[type=\"number\"],\ntextarea,\nselect {\n  background: var(--color-bg-secondary);\n  border: 1px solid var(--color-border);\n  color: var(--color-text-primary);\n  padding: 0.6rem 0.85rem;\n  border-radius: var(--radius-md);\n  font-family: inherit;\n  font-size: 0.9rem;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  margin-bottom: 10px;\n  box-sizing: border-box;\n}\n\ninput[type=\"text\"]:focus,\ninput[type=\"number\"]:focus,\ntextarea:focus,\nselect:focus {\n  outline: none;\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);\n}\n\ninput::placeholder { color: var(--color-text-muted); }\n\nselect {\n  cursor: pointer;\n  padding-right: 2rem;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8693' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 0.7rem center;\n}\n\n#versions { margin-left: 0; min-width: 160px; margin-bottom: 0; }\n\n.w-100 { width: 100%; }\n.table { width: 100%; }\n\n/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.5rem 0.9rem;\n  border-radius: var(--radius-md);\n  font-size: 0.85rem;\n  font-weight: 500;\n  text-decoration: none;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  cursor: pointer;\n  font-family: inherit;\n  line-height: 1.2;\n}\n\n.btn-primary { background: var(--color-primary); color: #fff; }\n.btn-primary:hover {\n  background: var(--color-primary-dark);\n  color: #fff;\n  text-decoration: none;\n  box-shadow: var(--shadow-glow);\n}\n\n.btn-secondary {\n  background: var(--color-bg-card);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border);\n}\n.btn-secondary:hover {\n  border-color: var(--color-border-hover);\n  background: var(--color-bg-elevated);\n  color: var(--color-text-primary);\n  text-decoration: none;\n}\n\n/* \u2500\u2500 Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.field { width: 100%; margin-bottom: 1em; }\n\n.field p,\n.field span,\n.field a {\n  margin: 0;\n  font-weight: 500;\n}\n\n.field p {\n  color: var(--color-text-muted);\n  font-weight: 600;\n  font-size: 0.8rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  margin-bottom: 0.4rem;\n}\n\n#href {\n  height: auto;\n  font-family: var(--font-mono) !important;\n  font-size: 0.825rem !important;\n}\n\n/* \u2500\u2500 Checkbox \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.checkbox-wrapper {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6rem;\n  cursor: pointer;\n  user-select: none;\n}\n\n.checkbox-input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.checkbox-custom {\n  position: relative;\n  width: 18px;\n  height: 18px;\n  background: var(--color-bg-secondary);\n  border: 1.5px solid var(--color-border-hover);\n  border-radius: 5px;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.checkbox-input:checked + .checkbox-custom {\n  background: var(--color-primary);\n  border-color: var(--color-primary);\n}\n\n.checkbox-input:focus-visible + .checkbox-custom {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.checkbox-icon {\n  width: 11px;\n  height: 11px;\n  stroke: #fff;\n  stroke-width: 2.5;\n  fill: none;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0;\n  transform: scale(0.7);\n  transition: all 0.15s ease;\n}\n\n.checkbox-input:checked + .checkbox-custom .checkbox-icon {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.checkbox-wrapper:hover .checkbox-custom { border-color: var(--color-primary-light); }\n\n/* \u2500\u2500 State badges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.state,\n.state-badge {\n  display: inline-flex;\n  align-items: center;\n  font-size: 0.72rem;\n  font-weight: 600;\n  padding: 0.18rem 0.55rem;\n  border-radius: var(--radius-full);\n  white-space: nowrap;\n  transition: none;\n  border: 1px solid transparent;\n  box-shadow: none;\n  text-transform: capitalize;\n  letter-spacing: 0.01em;\n  line-height: 1.4;\n}\n\n.state-badge { margin-left: 0.6rem; }\n.state { margin-right: 0; }\n\n.state-badge:hover { transform: none; box-shadow: none; }\n\n.mobile-compact { display: none; }\n\n/* Tinted, flat state badges (per-state hue) */\n.component-state-experimental {\n  background: color-mix(in srgb, #f59e0b var(--tint-strength), transparent);\n  color: color-mix(in srgb, #f59e0b var(--badge-text-lightness), var(--color-text-primary));\n  border-color: color-mix(in srgb, #f59e0b var(--tint-border), transparent);\n}\n.component-state-deprecated {\n  background: color-mix(in srgb, #ef4444 var(--tint-strength), transparent);\n  color: color-mix(in srgb, #ef4444 var(--badge-text-lightness), var(--color-text-primary));\n  border-color: color-mix(in srgb, #ef4444 var(--tint-border), transparent);\n}\n.component-state-stable {\n  background: color-mix(in srgb, #10b981 var(--tint-strength), transparent);\n  color: color-mix(in srgb, #10b981 var(--badge-text-lightness), var(--color-text-primary));\n  border-color: color-mix(in srgb, #10b981 var(--tint-border), transparent);\n}\n.component-state-beta {\n  background: color-mix(in srgb, #3b82f6 var(--tint-strength), transparent);\n  color: color-mix(in srgb, #3b82f6 var(--badge-text-lightness), var(--color-text-primary));\n  border-color: color-mix(in srgb, #3b82f6 var(--tint-border), transparent);\n}\n.component-state-alpha {\n  background: color-mix(in srgb, #8b5cf6 var(--tint-strength), transparent);\n  color: color-mix(in srgb, #8b5cf6 var(--badge-text-lightness), var(--color-text-primary));\n  border-color: color-mix(in srgb, #8b5cf6 var(--tint-border), transparent);\n}\n\n.bold { font-weight: 600; }\n.hide { display: none !important; }\n\n/* \u2500\u2500 Breadcrumb \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.breadcrumb {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--color-text-secondary);\n  font-size: 0.85rem;\n  margin-bottom: 1rem;\n}\n\n.breadcrumb a { color: var(--color-text-muted); font-weight: 500; }\n.breadcrumb a:hover { color: var(--color-primary); text-decoration: none; }\n\n/* \u2500\u2500 Parameters \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.parameter-grid { display: grid; gap: 1rem; }\n\n.parameter-item {\n  background: var(--color-bg-secondary);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-md);\n  padding: 1.1rem 1.25rem;\n  transition: border-color 0.15s ease;\n}\n\n.parameter-item:hover { border-color: var(--color-border-hover); box-shadow: none; }\n\n.parameter-header {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  margin-bottom: 0.65rem;\n  flex-wrap: wrap;\n}\n\n.parameter-name {\n  font-weight: 600;\n  color: var(--color-text-primary);\n  font-family: var(--font-mono);\n  font-size: 0.9rem;\n}\n\n.parameter-type {\n  background: var(--color-bg-elevated);\n  color: var(--color-text-secondary);\n  border: 1px solid var(--color-border);\n  padding: 0.12rem 0.5rem;\n  border-radius: var(--radius-full);\n  font-size: 0.7rem;\n  font-weight: 500;\n}\n\n.parameter-required {\n  background: color-mix(in srgb, var(--color-accent) var(--tint-strength), transparent);\n  color: color-mix(in srgb, var(--color-accent) var(--badge-text-lightness), var(--color-text-primary));\n  border-color: color-mix(in srgb, var(--color-accent) var(--tint-border), transparent);\n}\n\n.parameter-description {\n  color: var(--color-text-secondary);\n  margin-bottom: 0.65rem;\n  line-height: 1.5;\n  font-size: 0.875rem;\n}\n\n.parameter-description strong { color: var(--color-text-primary); font-weight: 600; }\n\n.parameter-input {\n  width: 100%;\n  background: var(--color-bg-card);\n  border: 1px solid var(--color-border);\n  color: var(--color-text-primary);\n  padding: 0.55rem 0.8rem;\n  border-radius: var(--radius-sm);\n  font-family: var(--font-mono);\n  font-size: 0.85rem;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  margin-bottom: 0;\n}\n\n.parameter-input:focus {\n  outline: none;\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);\n}\n\n/* \u2500\u2500 Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.preview-section {\n  background: var(--color-bg-card);\n  border-radius: var(--radius-lg);\n  border: 1px solid var(--color-border);\n  overflow: hidden;\n  margin-top: 1.5rem;\n}\n\n.preview-controls {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.85rem 1.5rem;\n  background: var(--color-bg-glass);\n  border-bottom: 1px solid var(--color-border);\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n\n.preview-buttons { display: flex; gap: 0.6rem; }\n\n.preview-iframe,\n.preview iframe {\n  width: 100%;\n  height: 500px;\n  border: none;\n  background: #fff;\n  display: block;\n}\n\n.code,\n.preview {\n  width: 100%;\n  background: var(--color-bg-card);\n  border-radius: var(--radius-lg);\n  box-shadow: none;\n  margin-bottom: 1.5em;\n  border: 1px solid var(--color-border);\n  overflow: hidden;\n}\n\n.preview { height: 500px; }\n\n/* \u2500\u2500 Collapsible \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.collapsible-header {\n  cursor: pointer;\n  user-select: none;\n  position: relative;\n  transition: background 0.15s ease;\n}\n\n.collapsible-header:hover { background: var(--color-bg-hover); }\n\n.collapse-toggle {\n  position: absolute;\n  right: 1.25rem;\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  color: var(--color-text-muted);\n  font-size: 0.75rem;\n  cursor: pointer;\n  padding: 0.4rem;\n  border-radius: var(--radius-sm);\n  transition: color 0.15s ease, background 0.15s ease;\n}\n\n.collapse-toggle:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }\n\n.collapse-icon { transition: transform 0.2s ease; display: inline-block; }\n\n.collapsible-content { overflow: hidden; transition: all 0.25s ease; }\n\n.collapsible-content.collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }\n.collapsible-content.expanded { max-height: 2000px; opacity: 1; }\n\n.collapsible-header.collapsed .collapse-icon { transform: rotate(-90deg); }\n\n/* \u2500\u2500 Loading / empty / error \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.loader { text-align: center; padding: 2em; color: var(--color-text-muted); }\n\n.empty-state {\n  text-align: center;\n  padding: 2.5em 2em;\n  color: var(--color-text-muted);\n  margin: 0;\n}\n\n.loader p { margin: 0; }\n\n.loader::before {\n  content: '';\n  display: inline-block;\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--color-border);\n  border-top: 2px solid var(--color-primary);\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n  margin-right: 0.6em;\n  vertical-align: middle;\n}\n\n@keyframes spin { to { transform: rotate(360deg); } }\n\n.loading-more {\n  text-align: center;\n  padding: 1em 2em;\n  color: var(--color-text-muted);\n  font-size: 0.85em;\n  border-top: 1px solid var(--color-border);\n}\n\n.loading-more::before {\n  content: '';\n  display: inline-block;\n  width: 14px;\n  height: 14px;\n  border: 2px solid var(--color-border);\n  border-top: 2px solid var(--color-primary);\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n  margin-right: 0.5em;\n  vertical-align: middle;\n}\n\n#history-error {\n  text-align: center;\n  padding: 1.5em 2em;\n  color: color-mix(in srgb, #ef4444 70%, var(--color-text-primary));\n  background-color: color-mix(in srgb, #ef4444 var(--tint-strength), transparent);\n  border: 1px solid color-mix(in srgb, #ef4444 var(--tint-border), transparent);\n  border-radius: var(--radius-md);\n  margin: 1em;\n}\n\n#history-error p { margin: 0; }\n\n/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.social {\n  width: 100%;\n  margin-top: 0;\n  padding: 2rem 0 2.5rem;\n  text-align: center;\n  border-top: 1px solid var(--color-border);\n  color: var(--color-text-muted);\n  font-size: 0.85rem;\n}\n\n/* \u2500\u2500 Scrollbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n::-webkit-scrollbar { width: 10px; height: 10px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--color-border-hover); border-radius: 5px; border: 2px solid var(--color-bg-primary); }\n::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }\n\n/* \u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@keyframes fadeInUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 1024px) {\n  .container { padding: 0 1.25rem; }\n  h1 { font-size: 1.75rem; }\n  .main-content { grid-template-columns: 1fr; gap: 1.25rem; }\n  .sidebar { order: -1; position: static; }\n  .info-item { display: flex; justify-content: space-between; }\n  .collapsible-content { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }\n  .collapsible-header.collapsed .collapse-icon { transform: rotate(-90deg); }\n}\n\n@media (max-width: 900px) {\n  .container { padding: 0 1rem; }\n  .main-content { padding: 0.5rem 0 2rem; gap: 1rem; }\n  .filters { flex-direction: column; gap: 0.5em; }\n  #author-filter { flex: 1 0; }\n\n  .row.header { display: none; }\n\n  .componentRow {\n    flex-direction: column !important;\n    align-items: flex-start !important;\n    padding: 1rem 1.25rem !important;\n    gap: 0.6rem !important;\n    text-align: left !important;\n  }\n\n  .componentRow > .author,\n  .componentRow > .date,\n  .componentRow > .activity,\n  .componentRow > div:not(.title):not(.state):not(.mobile-compact) {\n    display: none !important;\n  }\n\n  .mobile-compact { display: block !important; width: 100%; }\n\n  .mobile-meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    align-items: center;\n    font-size: 0.8rem;\n    color: var(--color-text-secondary);\n    width: 100%;\n  }\n\n  .mobile-meta span {\n    background: var(--color-bg-secondary);\n    padding: 0.2rem 0.5rem;\n    border-radius: var(--radius-sm);\n    border: 1px solid var(--color-border);\n    font-size: 0.75rem;\n    font-weight: 500;\n  }\n\n  .mobile-author { color: var(--color-text-secondary) !important; }\n  .mobile-version { color: var(--color-text-primary) !important; font-weight: 600; }\n  .mobile-date { color: var(--color-text-muted) !important; }\n  .mobile-activity { color: var(--color-text-secondary) !important; }\n  .mobile-size { color: var(--color-text-secondary) !important; }\n\n  .componentRow .title { text-align: left !important; width: 100%; }\n  .componentRow .title .name { text-align: left !important; }\n  .componentRow .title .description { text-align: left !important; }\n\n  .box, .info-card, .section-content { }\n  .section-content { padding: 1.25rem; }\n\n  .sidebar .info-item { flex-direction: column; align-items: flex-start; gap: 0.3rem; }\n  .sidebar .info-label { min-width: auto; font-weight: 600; }\n  .sidebar .info-value { text-align: left; margin-left: 0; }\n\n  h1 { font-size: 1.6rem; }\n  .component-title { font-size: 1.5rem; }\n  .preview-controls { flex-direction: column; align-items: stretch; }\n  .preview-buttons { justify-content: stretch; }\n  .preview-buttons .btn { flex: 1; justify-content: center; }\n}\n  ";
+declare const _default: "\n@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\");\n\n:root {\n  /* Brand accent (consistent across themes) */\n  --color-primary: #6366f1;\n  --color-primary-dark: #4f46e5;\n  --color-primary-light: #818cf8;\n  --color-secondary: #0891b2;\n  --color-accent: #d97706;\n\n  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);\n\n  /* Spacing / radius scale */\n  --radius-sm: 6px;\n  --radius-md: 10px;\n  --radius-lg: 14px;\n  --radius-full: 999px;\n\n  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;\n}\n\n/* Dark theme (default) */\n:root, [data-theme=\"dark\"] {\n  --color-bg-primary: #0b0e14;\n  --color-bg-secondary: #11151d;\n  --color-bg-card: #11151d;\n  --color-bg-elevated: #161c26;\n  --color-bg-glass: rgba(255, 255, 255, 0.04);\n  --color-bg-hover: rgba(255, 255, 255, 0.035);\n\n  --color-text-primary: #e6edf3;\n  --color-text-secondary: #aeb6c2;\n  --color-text-muted: #7d8693;\n\n  --color-border: #222a37;\n  --color-border-hover: #323c4d;\n\n  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n  --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.4);\n  --shadow-lg: 0 12px 28px -6px rgba(0, 0, 0, 0.5);\n  --shadow-glow: 0 4px 16px -2px rgba(99, 102, 241, 0.4);\n\n  --color-text-inverse: #ffffff;\n\n  --tint-strength: 0.16;\n  --tint-border: 0.32;\n  --badge-text-lightness: 78%;\n}\n\n/* Light theme */\n[data-theme=\"light\"] {\n  --color-bg-primary: #fbfcfd;\n  --color-bg-secondary: #f4f6f8;\n  --color-bg-card: #ffffff;\n  --color-bg-elevated: #ffffff;\n  --color-bg-glass: rgba(255, 255, 255, 0.7);\n  --color-bg-hover: rgba(15, 23, 42, 0.025);\n\n  --color-text-primary: #1f2328;\n  --color-text-secondary: #4a535e;\n  --color-text-muted: #6a737d;\n\n  --color-border: #e2e6ea;\n  --color-border-hover: #cdd3da;\n\n  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);\n  --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08);\n  --shadow-lg: 0 12px 28px -6px rgba(15, 23, 42, 0.12);\n  --shadow-glow: 0 4px 16px -2px rgba(99, 102, 241, 0.25);\n\n  --color-text-inverse: #ffffff;\n\n  --tint-strength: 0.1;\n  --tint-border: 0.28;\n  --badge-text-lightness: 38%;\n}\n\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  @view-transition {\n    navigation: auto;\n  }\n}\n\nbody {\n  font-family: var(--font-sans);\n  background: var(--color-bg-primary);\n  color: var(--color-text-primary);\n  line-height: 1.6;\n  min-height: 100vh;\n  overflow-x: hidden;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  font-size: 15px;\n}\n\n.container {\n  max-width: 1240px;\n  margin: 0 auto;\n  padding: 0 1.5rem;\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.header {\n  background: color-mix(in srgb, var(--color-bg-primary) 80%, transparent);\n  backdrop-filter: blur(12px);\n  border-bottom: 1px solid var(--color-border);\n  position: sticky;\n  top: 0;\n  z-index: 100;\n}\n\n.header-content {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.85rem 0;\n}\n\n.logo {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.65rem;\n  text-decoration: none;\n  color: var(--color-text-primary);\n  font-weight: 600;\n  font-size: 1.0rem;\n  letter-spacing: -0.01em;\n  transition: color 0.15s ease;\n  margin-top: 0;\n}\n\n.logo:hover {\n  color: var(--color-text-primary);\n  text-decoration: none;\n}\n\n.logo-icon {\n  color: #fff;\n  width: 30px;\n  height: 30px;\n  background: var(--gradient-primary);\n  border-radius: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 700;\n  font-size: 0.8rem;\n  letter-spacing: 0.02em;\n  box-shadow: var(--shadow-sm);\n}\n\n.logo img {\n  width: 30px;\n  height: 30px;\n  border-radius: 8px;\n}\n\n/* Theme Toggle Button */\n.theme-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.45rem 0.85rem;\n  background: var(--color-bg-card);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-md);\n  color: var(--color-text-secondary);\n  font-size: 0.8rem;\n  font-weight: 500;\n  font-family: inherit;\n  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;\n  cursor: pointer;\n}\n\n.theme-toggle:hover {\n  border-color: var(--color-border-hover);\n  color: var(--color-text-primary);\n  background: var(--color-bg-elevated);\n}\n\n.theme-toggle-icon {\n  font-size: 1rem;\n  line-height: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--color-text-secondary);\n}\n\n.theme-toggle:hover .theme-toggle-icon { color: var(--color-text-primary); }\n.theme-toggle-icon svg { display: block; }\n\n/* \u2500\u2500 Typography \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\nh1, h2, h3 {\n  color: var(--color-text-primary);\n  font-weight: 600;\n  letter-spacing: -0.02em;\n  margin-bottom: 0.4em;\n}\n\nh1 {\n  font-size: 2rem;\n  font-weight: 680;\n  margin-bottom: 0.5rem;\n  line-height: 1.2;\n}\n\nh2 {\n  font-size: 1.2rem;\n  font-weight: 600;\n}\n\nh3 {\n  font-size: 1.05rem;\n  font-weight: 600;\n}\n\n/* Focus styles for accessibility */\n*:focus {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n*:focus:not(:focus-visible) { outline: none; }\n*:focus-visible {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\na {\n  color: var(--color-primary-light);\n  text-decoration: none;\n  transition: color 0.15s ease;\n  border-radius: 4px;\n}\na:hover { color: var(--color-primary); text-decoration: underline; }\na:focus { color: var(--color-primary); }\n\n[data-theme=\"light\"] a { color: var(--color-primary-dark); }\n\n#components-list a:hover { text-decoration: none; }\n\np { margin-top: 0; }\n\n.back {\n  width: 100%;\n  margin-bottom: 1.5em;\n  display: block;\n  color: var(--color-text-muted);\n  font-size: 0.9em;\n}\n\n/* \u2500\u2500 Hero \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.hero {\n  padding: 2.5rem 0 1.5rem;\n  position: relative;\n}\n\n.hero h1 { text-align: left; }\n\n.component-title {\n  font-family: var(--font-mono);\n  font-weight: 600;\n  font-size: 1.85rem;\n  letter-spacing: -0.01em;\n}\n\n.component-description {\n  color: var(--color-text-secondary);\n  max-width: 70ch;\n  margin-bottom: 0.5rem;\n  font-size: 1rem;\n}\n\n.version-selector {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6rem;\n  margin: 0.75rem 0;\n}\n\n.version-label {\n  color: var(--color-text-muted);\n  font-size: 0.85rem;\n  font-weight: 500;\n}\n\n/* \u2500\u2500 Stats badge \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.stats-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6rem;\n  background: var(--color-bg-card);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-md);\n  padding: 0.5rem 0.9rem;\n  margin: 1rem 0 0;\n  color: var(--color-text-secondary);\n  font-size: 0.85rem;\n  font-weight: 500;\n  max-width: fit-content;\n}\n\n.stats-badge .chart-icon {\n  display: flex;\n  align-items: flex-end;\n  gap: 2px;\n  height: 16px;\n}\n\n.stats-badge .chart-bar { width: 3px; border-radius: 2px; }\n.stats-badge .chart-bar:nth-child(1) { height: 8px; background: var(--color-primary-light); }\n.stats-badge .chart-bar:nth-child(2) { height: 12px; background: var(--color-primary); }\n.stats-badge .chart-bar:nth-child(3) { height: 16px; background: var(--color-primary-dark); }\n\n.stats-badge .badge-text {\n  color: var(--color-text-secondary);\n  font-size: 0.85rem;\n  font-weight: 500;\n  white-space: nowrap;\n  display: inline-flex;\n  align-items: center;\n}\n\n/* \u2500\u2500 Main layout \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.main-content {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) 320px;\n  gap: 1.75rem;\n  padding: 1rem 0 3rem;\n  align-items: start;\n}\n\n.sidebar {\n  display: grid;\n  gap: 1.25rem;\n  align-content: start;\n  position: sticky;\n  top: 5rem;\n}\n\n/* \u2500\u2500 Tabs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n#menuList {\n  display: flex;\n  gap: 0.25rem;\n  border-bottom: 1px solid var(--color-border);\n  margin-bottom: 1.5rem !important;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n#menuList::-webkit-scrollbar { display: none; height: 0; }\n\na.tab-link {\n  color: var(--color-text-secondary);\n  font-weight: 500;\n  padding: 0.6rem 0.9rem;\n  border-radius: 0;\n  transition: color 0.15s ease, border-color 0.15s ease;\n  font-size: 0.9rem;\n  line-height: 1.2;\n  display: inline-block;\n  border: none;\n  border-bottom: 2px solid transparent;\n  margin-bottom: -1px;\n  white-space: nowrap;\n}\n\na.tab-link:hover {\n  color: var(--color-text-primary);\n  background: transparent;\n  text-decoration: none;\n}\n\na.tab-link.selected {\n  color: var(--color-primary-light);\n  background: transparent;\n  text-decoration: none;\n  border-bottom-color: var(--color-primary);\n}\n\n[data-theme=\"light\"] a.tab-link.selected { color: var(--color-primary-dark); }\n\n/* \u2500\u2500 Cards / sections \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.content-section {\n  background: var(--color-bg-card);\n  border-radius: var(--radius-lg);\n  border: 1px solid var(--color-border);\n  overflow: hidden;\n  margin-bottom: 1.5rem;\n}\n\n.section-header {\n  padding: 1rem 1.5rem;\n  background: var(--color-bg-glass);\n  border-bottom: 1px solid var(--color-border);\n  display: flex;\n  align-items: center;\n  gap: 0.7rem;\n}\n\n.section-title {\n  font-size: 1.05rem;\n  font-weight: 600;\n  color: var(--color-text-primary);\n  letter-spacing: -0.01em;\n}\n\n.section-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--color-primary-light);\n  flex-shrink: 0;\n}\n\n.section-icon svg { width: 18px; height: 18px; display: block; }\n\n[data-theme=\"light\"] .section-icon { color: var(--color-primary); }\n\n.section-content { padding: 1.5rem; }\n\n.box {\n  background: var(--color-bg-card);\n  border-radius: var(--radius-lg);\n  border: 1px solid var(--color-border);\n  padding: 1.25rem;\n  margin-bottom: 1.5em;\n}\n\n/* \u2500\u2500 Info cards (sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.info-card {\n  background: var(--color-bg-card);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-lg);\n  padding: 1.25rem 1.35rem;\n}\n\n.info-card .section-title {\n  font-size: 0.8rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--color-text-muted);\n  font-weight: 600;\n  margin-bottom: 1rem !important;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.info-card .section-title svg { width: 15px; height: 15px; color: var(--color-text-muted); }\n\n.info-item {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 0.6rem 0;\n  border-bottom: 1px solid var(--color-border);\n  font-size: 0.875rem;\n}\n\n.info-item:last-child { border-bottom: none; padding-bottom: 0; }\n.info-item:first-of-type { padding-top: 0; }\n\n.info-label {\n  font-weight: 500;\n  color: var(--color-text-muted);\n  flex-shrink: 0;\n}\n\n.info-value {\n  color: var(--color-text-primary);\n  text-align: right;\n  word-break: break-word;\n  font-weight: 450;\n}\n\n.info-value a { word-break: break-all; }\n\n/* \u2500\u2500 List / table rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n#components-list.box,\n#components-history.box,\n#components-templates.box,\n#components-dependencies.box,\n#components-plugins.box {\n  padding: 0;\n  overflow: hidden;\n}\n\n.row {\n  background: transparent;\n  border: none;\n  border-bottom: 1px solid var(--color-border);\n  border-radius: 0;\n  width: 100%;\n  display: flex;\n  padding: 0.9rem 1.25rem;\n  box-sizing: border-box;\n  margin-bottom: 0;\n  align-items: center;\n  box-shadow: none;\n  transition: background 0.12s ease;\n  gap: 0.5rem;\n}\n\n.row:last-child { border-bottom: none; }\n\n.row.header {\n  background: var(--color-bg-glass);\n  border: none;\n  border-bottom: 1px solid var(--color-border) !important;\n  font-size: 0.72rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  border-radius: 0;\n  box-shadow: none;\n  color: var(--color-text-muted);\n}\n\n.row.header div {\n  font-weight: 600;\n  margin: 0;\n  align-self: center;\n}\n\n.row.double { min-height: 56px; }\n.row div { word-wrap: break-word; }\n.row span { padding-right: 10px; }\n\n/* clickable component rows (anchors that wrap an entire row) */\n#components-list > a,\n#components-history a,\n#components-dependencies > a {\n  display: block;\n  color: inherit;\n}\n\n.componentRow { transition: background 0.12s ease; }\n\n.componentRow:hover {\n  background: var(--color-bg-hover);\n  box-shadow: none;\n  border-color: var(--color-border);\n  transform: none;\n}\n\n#components-list > a:focus-visible,\n#components-history a:focus-visible,\n#components-dependencies > a:focus-visible {\n  outline: none;\n}\n\n#components-list > a:focus-visible .componentRow,\n#components-history a:focus-visible .componentRow,\n#components-dependencies > a:focus-visible .componentRow {\n  background: var(--color-bg-hover);\n  box-shadow: inset 2px 0 0 var(--color-primary);\n}\n\n.componentRow .title .name {\n  font-weight: 600;\n  font-size: 0.95rem;\n  margin: 0;\n  width: 100%;\n  color: var(--color-text-primary);\n  letter-spacing: -0.005em;\n}\n\n.componentRow:hover .title .name { color: var(--color-primary-light); }\n[data-theme=\"light\"] .componentRow:hover .title .name { color: var(--color-primary-dark); }\n\n.componentRow .release {\n  font-size: 0.9rem;\n  margin: 0;\n  width: 100%;\n  color: var(--color-text-secondary);\n}\n\n.componentRow .release a { color: var(--color-primary-light); }\n[data-theme=\"light\"] .componentRow .release a { color: var(--color-primary-dark); }\n\n.componentRow .title .description {\n  padding: 0;\n  font-size: 0.85rem;\n  color: var(--color-text-muted);\n  margin-top: 0.15rem;\n  line-height: 1.45;\n}\n\n.row > * {\n  flex: 0 1 9%;\n  padding: 0 0.35rem;\n  align-self: center;\n  font-size: 0.875rem;\n}\n\n.row > *:last-child { padding-right: 0; }\n.row > *:first-child { padding-left: 0; }\n\n.release,\n.title,\n.filters > * {\n  flex: 1 0;\n}\n\n.title {\n  display: flex;\n  flex-direction: column;\n  gap: 0.1rem;\n}\n\n.author {\n  flex: 0 1 15%;\n  word-break: break-word;\n  color: var(--color-text-secondary);\n  font-size: 0.85rem;\n}\n\n.date { color: var(--color-text-muted); font-size: 0.85rem; }\n.activity { color: var(--color-text-secondary); font-size: 0.85rem; }\n\n/* \u2500\u2500 Filters \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.filters {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n  gap: 0.75rem;\n  margin: 0;\n  padding: 1.25rem 1.25rem 0.75rem;\n}\n\n.filters input {\n  color: var(--color-text-primary);\n  background-color: var(--color-bg-secondary);\n  margin-bottom: 0;\n}\n\n#author-filter { flex: 0 1 30%; }\n\n.states {\n  width: 100%;\n  margin: 0;\n  padding: 0 1.25rem 1.25rem;\n  display: flex;\n  align-items: center;\n  gap: 1.25rem;\n  flex-wrap: wrap;\n  border-bottom: 1px solid var(--color-border);\n}\n\n.states > span {\n  color: var(--color-text-muted);\n  font-weight: 500;\n  font-size: 0.8rem;\n}\n\n.states input { margin-right: 6px; }\n\n/* \u2500\u2500 List results meta bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.list-meta {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.7rem 1.25rem;\n  font-size: 0.8rem;\n  color: var(--color-text-muted);\n  font-weight: 500;\n}\n\n#results-count { color: var(--color-text-secondary); }\n\n/* \u2500\u2500 Component URL copy group \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.url-input-group {\n  display: flex;\n  gap: 0.5rem;\n  align-items: stretch;\n}\n\n.url-input-group #href {\n  flex: 1;\n  margin-bottom: 0;\n  padding: 0.7rem 0.9rem;\n}\n\n.url-input-group .copy-href {\n  flex-shrink: 0;\n  white-space: nowrap;\n}\n\n.copy-href.copied {\n  color: color-mix(in srgb, #10b981 70%, var(--color-text-primary));\n  border-color: color-mix(in srgb, #10b981 var(--tint-border), transparent);\n  background: color-mix(in srgb, #10b981 var(--tint-strength), transparent);\n}\n\n/* \u2500\u2500 Forms \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\ninput[type=\"text\"],\ninput[type=\"number\"],\ntextarea,\nselect {\n  background: var(--color-bg-secondary);\n  border: 1px solid var(--color-border);\n  color: var(--color-text-primary);\n  padding: 0.6rem 0.85rem;\n  border-radius: var(--radius-md);\n  font-family: inherit;\n  font-size: 0.9rem;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  margin-bottom: 10px;\n  box-sizing: border-box;\n}\n\ninput[type=\"text\"]:focus,\ninput[type=\"number\"]:focus,\ntextarea:focus,\nselect:focus {\n  outline: none;\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);\n}\n\ninput::placeholder { color: var(--color-text-muted); }\n\nselect {\n  cursor: pointer;\n  padding-right: 2rem;\n  appearance: none;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237d8693' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: right 0.7rem center;\n}\n\n#versions { margin-left: 0; min-width: 160px; margin-bottom: 0; }\n\n.w-100 { width: 100%; }\n.table { width: 100%; }\n\n/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4rem;\n  padding: 0.5rem 0.9rem;\n  border-radius: var(--radius-md);\n  font-size: 0.85rem;\n  font-weight: 500;\n  text-decoration: none;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  cursor: pointer;\n  font-family: inherit;\n  line-height: 1.2;\n}\n\n.btn-primary { background: var(--color-primary); color: #fff; }\n.btn-primary:hover {\n  background: var(--color-primary-dark);\n  color: #fff;\n  text-decoration: none;\n  box-shadow: var(--shadow-glow);\n}\n\n.btn-secondary {\n  background: var(--color-bg-card);\n  color: var(--color-text-primary);\n  border: 1px solid var(--color-border);\n}\n.btn-secondary:hover {\n  border-color: var(--color-border-hover);\n  background: var(--color-bg-elevated);\n  color: var(--color-text-primary);\n  text-decoration: none;\n}\n\n/* \u2500\u2500 Fields \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.field { width: 100%; margin-bottom: 1em; }\n\n.field p,\n.field span,\n.field a {\n  margin: 0;\n  font-weight: 500;\n}\n\n.field p {\n  color: var(--color-text-muted);\n  font-weight: 600;\n  font-size: 0.8rem;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  margin-bottom: 0.4rem;\n}\n\n#href {\n  height: auto;\n  font-family: var(--font-mono) !important;\n  font-size: 0.825rem !important;\n}\n\n/* \u2500\u2500 Checkbox \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.checkbox-wrapper {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.6rem;\n  cursor: pointer;\n  user-select: none;\n}\n\n.checkbox-input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n\n.checkbox-custom {\n  position: relative;\n  width: 18px;\n  height: 18px;\n  background: var(--color-bg-secondary);\n  border: 1.5px solid var(--color-border-hover);\n  border-radius: 5px;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.checkbox-input:checked + .checkbox-custom {\n  background: var(--color-primary);\n  border-color: var(--color-primary);\n}\n\n.checkbox-input:focus-visible + .checkbox-custom {\n  outline: 2px solid var(--color-primary);\n  outline-offset: 2px;\n}\n\n.checkbox-icon {\n  width: 11px;\n  height: 11px;\n  stroke: #fff;\n  stroke-width: 2.5;\n  fill: none;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n  opacity: 0;\n  transform: scale(0.7);\n  transition: all 0.15s ease;\n}\n\n.checkbox-input:checked + .checkbox-custom .checkbox-icon {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.checkbox-wrapper:hover .checkbox-custom { border-color: var(--color-primary-light); }\n\n/* \u2500\u2500 State badges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.state,\n.state-badge {\n  display: inline-flex;\n  align-items: center;\n  font-size: 0.72rem;\n  font-weight: 600;\n  padding: 0.18rem 0.55rem;\n  border-radius: var(--radius-full);\n  white-space: nowrap;\n  transition: none;\n  border: 1px solid transparent;\n  box-shadow: none;\n  text-transform: capitalize;\n  letter-spacing: 0.01em;\n  line-height: 1.4;\n}\n\n.state-badge { margin-left: 0.6rem; }\n.state { margin-right: 0; }\n\n.state-badge:hover { transform: none; box-shadow: none; }\n\n.mobile-compact { display: none; }\n\n/* Tinted, flat state badges (per-state hue) */\n.component-state-experimental {\n  background: color-mix(in srgb, #f59e0b var(--tint-strength), transparent);\n  color: color-mix(in srgb, #f59e0b var(--badge-text-lightness), var(--color-text-primary));\n  border-color: color-mix(in srgb, #f59e0b var(--tint-border), transparent);\n}\n.component-state-deprecated {\n  background: color-mix(in srgb, #ef4444 var(--tint-strength), transparent);\n  color: color-mix(in srgb, #ef4444 var(--badge-text-lightness), var(--color-text-primary));\n  border-color: color-mix(in srgb, #ef4444 var(--tint-border), transparent);\n}\n.component-state-stable {\n  background: color-mix(in srgb, #10b981 var(--tint-strength), transparent);\n  color: color-mix(in srgb, #10b981 var(--badge-text-lightness), var(--color-text-primary));\n  border-color: color-mix(in srgb, #10b981 var(--tint-border), transparent);\n}\n.component-state-beta {\n  background: color-mix(in srgb, #3b82f6 var(--tint-strength), transparent);\n  color: color-mix(in srgb, #3b82f6 var(--badge-text-lightness), var(--color-text-primary));\n  border-color: color-mix(in srgb, #3b82f6 var(--tint-border), transparent);\n}\n.component-state-alpha {\n  background: color-mix(in srgb, #8b5cf6 var(--tint-strength), transparent);\n  color: color-mix(in srgb, #8b5cf6 var(--badge-text-lightness), var(--color-text-primary));\n  border-color: color-mix(in srgb, #8b5cf6 var(--tint-border), transparent);\n}\n\n.bold { font-weight: 600; }\n.hide { display: none !important; }\n\n/* \u2500\u2500 Breadcrumb \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.breadcrumb {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--color-text-secondary);\n  font-size: 0.85rem;\n  margin-bottom: 1rem;\n}\n\n.breadcrumb a { color: var(--color-text-muted); font-weight: 500; }\n.breadcrumb a:hover { color: var(--color-primary); text-decoration: none; }\n\n/* \u2500\u2500 Parameters \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.parameter-grid { display: grid; gap: 1rem; }\n\n.parameter-item {\n  background: var(--color-bg-secondary);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-md);\n  padding: 1.1rem 1.25rem;\n  transition: border-color 0.15s ease;\n}\n\n.parameter-item:hover { border-color: var(--color-border-hover); box-shadow: none; }\n\n.parameter-header {\n  display: flex;\n  align-items: center;\n  gap: 0.6rem;\n  margin-bottom: 0.65rem;\n  flex-wrap: wrap;\n}\n\n.parameter-name {\n  font-weight: 600;\n  color: var(--color-text-primary);\n  font-family: var(--font-mono);\n  font-size: 0.9rem;\n}\n\n.parameter-type {\n  background: var(--color-bg-elevated);\n  color: var(--color-text-secondary);\n  border: 1px solid var(--color-border);\n  padding: 0.12rem 0.5rem;\n  border-radius: var(--radius-full);\n  font-size: 0.7rem;\n  font-weight: 500;\n}\n\n.parameter-required {\n  background: color-mix(in srgb, var(--color-accent) var(--tint-strength), transparent);\n  color: color-mix(in srgb, var(--color-accent) var(--badge-text-lightness), var(--color-text-primary));\n  border-color: color-mix(in srgb, var(--color-accent) var(--tint-border), transparent);\n}\n\n.parameter-description {\n  color: var(--color-text-secondary);\n  margin-bottom: 0.65rem;\n  line-height: 1.5;\n  font-size: 0.875rem;\n}\n\n.parameter-description strong { color: var(--color-text-primary); font-weight: 600; }\n\n.parameter-input {\n  width: 100%;\n  background: var(--color-bg-card);\n  border: 1px solid var(--color-border);\n  color: var(--color-text-primary);\n  padding: 0.55rem 0.8rem;\n  border-radius: var(--radius-sm);\n  font-family: var(--font-mono);\n  font-size: 0.85rem;\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\n  margin-bottom: 0;\n}\n\n.parameter-input:focus {\n  outline: none;\n  border-color: var(--color-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);\n}\n\n/* \u2500\u2500 Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.preview-section {\n  background: var(--color-bg-card);\n  border-radius: var(--radius-lg);\n  border: 1px solid var(--color-border);\n  overflow: hidden;\n  margin-top: 1.5rem;\n}\n\n.preview-controls {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0.85rem 1.5rem;\n  background: var(--color-bg-glass);\n  border-bottom: 1px solid var(--color-border);\n  gap: 1rem;\n  flex-wrap: wrap;\n}\n\n.preview-buttons { display: flex; gap: 0.6rem; }\n\n.preview-iframe,\n.preview iframe {\n  width: 100%;\n  height: 500px;\n  border: none;\n  background: #fff;\n  display: block;\n}\n\n.code,\n.preview {\n  width: 100%;\n  background: var(--color-bg-card);\n  border-radius: var(--radius-lg);\n  box-shadow: none;\n  margin-bottom: 1.5em;\n  border: 1px solid var(--color-border);\n  overflow: hidden;\n}\n\n.preview { height: 500px; }\n\n/* \u2500\u2500 Collapsible \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.collapsible-header {\n  cursor: pointer;\n  user-select: none;\n  position: relative;\n  transition: background 0.15s ease;\n}\n\n.collapsible-header:hover { background: var(--color-bg-hover); }\n\n.collapse-toggle {\n  position: absolute;\n  right: 1.25rem;\n  top: 50%;\n  transform: translateY(-50%);\n  background: none;\n  border: none;\n  color: var(--color-text-muted);\n  font-size: 0.75rem;\n  cursor: pointer;\n  padding: 0.4rem;\n  border-radius: var(--radius-sm);\n  transition: color 0.15s ease, background 0.15s ease;\n}\n\n.collapse-toggle:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }\n\n.collapse-icon { transition: transform 0.2s ease; display: inline-block; }\n\n.collapsible-content { overflow: hidden; transition: all 0.25s ease; }\n\n.collapsible-content.collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }\n.collapsible-content.expanded { max-height: 2000px; opacity: 1; }\n\n.collapsible-header.collapsed .collapse-icon { transform: rotate(-90deg); }\n\n/* \u2500\u2500 Loading / empty / error \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.loader { text-align: center; padding: 2em; color: var(--color-text-muted); }\n\n.empty-state {\n  text-align: center;\n  padding: 2.5em 2em;\n  color: var(--color-text-muted);\n  margin: 0;\n}\n\n.loader p { margin: 0; }\n\n.loader::before {\n  content: '';\n  display: inline-block;\n  width: 18px;\n  height: 18px;\n  border: 2px solid var(--color-border);\n  border-top: 2px solid var(--color-primary);\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n  margin-right: 0.6em;\n  vertical-align: middle;\n}\n\n@keyframes spin { to { transform: rotate(360deg); } }\n\n.loading-more {\n  text-align: center;\n  padding: 1em 2em;\n  color: var(--color-text-muted);\n  font-size: 0.85em;\n  border-top: 1px solid var(--color-border);\n}\n\n.loading-more::before {\n  content: '';\n  display: inline-block;\n  width: 14px;\n  height: 14px;\n  border: 2px solid var(--color-border);\n  border-top: 2px solid var(--color-primary);\n  border-radius: 50%;\n  animation: spin 0.8s linear infinite;\n  margin-right: 0.5em;\n  vertical-align: middle;\n}\n\n/* \u2500\u2500 Components pagination \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 0.4rem;\n  padding: 1rem 1.25rem;\n  border-top: 1px solid var(--color-border);\n}\n\n.pagination-top {\n  border-top: none;\n  border-bottom: 1px solid var(--color-border);\n}\n\n.pagination-btn {\n  min-width: 2.25rem;\n  padding: 0.4rem 0.6rem;\n  font-size: 0.85rem;\n  font-weight: 500;\n  color: var(--color-text-secondary);\n  background: var(--color-bg-secondary);\n  border: 1px solid var(--color-border);\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;\n}\n\n.pagination-btn:hover:not([disabled]):not(.active) {\n  background: var(--color-bg-hover);\n  color: var(--color-text-primary);\n  border-color: var(--color-border-hover);\n}\n\n.pagination-btn.active {\n  color: #fff;\n  background: var(--color-primary);\n  border-color: var(--color-primary);\n  cursor: default;\n}\n\n.pagination-btn[disabled] {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n\n.pagination-ellipsis {\n  padding: 0 0.25rem;\n  color: var(--color-text-muted);\n  user-select: none;\n}\n\n#history-error {\n  text-align: center;\n  padding: 1.5em 2em;\n  color: color-mix(in srgb, #ef4444 70%, var(--color-text-primary));\n  background-color: color-mix(in srgb, #ef4444 var(--tint-strength), transparent);\n  border: 1px solid color-mix(in srgb, #ef4444 var(--tint-border), transparent);\n  border-radius: var(--radius-md);\n  margin: 1em;\n}\n\n#history-error p { margin: 0; }\n\n/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.social {\n  width: 100%;\n  margin-top: 0;\n  padding: 2rem 0 2.5rem;\n  text-align: center;\n  border-top: 1px solid var(--color-border);\n  color: var(--color-text-muted);\n  font-size: 0.85rem;\n}\n\n/* \u2500\u2500 Scrollbar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n::-webkit-scrollbar { width: 10px; height: 10px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: var(--color-border-hover); border-radius: 5px; border: 2px solid var(--color-bg-primary); }\n::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }\n\n/* \u2500\u2500 Animations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@keyframes fadeInUp {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n@media (max-width: 1024px) {\n  .container { padding: 0 1.25rem; }\n  h1 { font-size: 1.75rem; }\n  .main-content { grid-template-columns: 1fr; gap: 1.25rem; }\n  .sidebar { order: -1; position: static; }\n  .info-item { display: flex; justify-content: space-between; }\n  .collapsible-content { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }\n  .collapsible-header.collapsed .collapse-icon { transform: rotate(-90deg); }\n}\n\n@media (max-width: 900px) {\n  .container { padding: 0 1rem; }\n  .main-content { padding: 0.5rem 0 2rem; gap: 1rem; }\n  .filters { flex-direction: column; gap: 0.5em; }\n  #author-filter { flex: 1 0; }\n\n  .row.header { display: none; }\n\n  .componentRow {\n    flex-direction: column !important;\n    align-items: flex-start !important;\n    padding: 1rem 1.25rem !important;\n    gap: 0.6rem !important;\n    text-align: left !important;\n  }\n\n  .componentRow > .author,\n  .componentRow > .date,\n  .componentRow > .activity,\n  .componentRow > div:not(.title):not(.state):not(.mobile-compact) {\n    display: none !important;\n  }\n\n  .mobile-compact { display: block !important; width: 100%; }\n\n  .mobile-meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n    align-items: center;\n    font-size: 0.8rem;\n    color: var(--color-text-secondary);\n    width: 100%;\n  }\n\n  .mobile-meta span {\n    background: var(--color-bg-secondary);\n    padding: 0.2rem 0.5rem;\n    border-radius: var(--radius-sm);\n    border: 1px solid var(--color-border);\n    font-size: 0.75rem;\n    font-weight: 500;\n  }\n\n  .mobile-author { color: var(--color-text-secondary) !important; }\n  .mobile-version { color: var(--color-text-primary) !important; font-weight: 600; }\n  .mobile-date { color: var(--color-text-muted) !important; }\n  .mobile-activity { color: var(--color-text-secondary) !important; }\n  .mobile-size { color: var(--color-text-secondary) !important; }\n\n  .componentRow .title { text-align: left !important; width: 100%; }\n  .componentRow .title .name { text-align: left !important; }\n  .componentRow .title .description { text-align: left !important; }\n\n  .box, .info-card, .section-content { }\n  .section-content { padding: 1.25rem; }\n\n  .sidebar .info-item { flex-direction: column; align-items: flex-start; gap: 0.3rem; }\n  .sidebar .info-label { min-width: auto; font-weight: 600; }\n  .sidebar .info-value { text-align: left; margin-left: 0; }\n\n  h1 { font-size: 1.6rem; }\n  .component-title { font-size: 1.5rem; }\n  .preview-controls { flex-direction: column; align-items: stretch; }\n  .preview-buttons { justify-content: stretch; }\n  .preview-buttons .btn { flex: 1; justify-content: center; }\n}\n  ";
 export default _default;

package/dist/registry/views/static/style.js

@@ -1136,6 +1136,59 @@ select {
   vertical-align: middle;
 }
 
+/* ── Components pagination ──────────────────────────── */
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.pagination-top {
+  border-top: none;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.pagination-btn {
+  min-width: 2.25rem;
+  padding: 0.4rem 0.6rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
+}
+
+.pagination-btn:hover:not([disabled]):not(.active) {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-hover);
+}
+
+.pagination-btn.active {
+  color: #fff;
+  background: var(--color-primary);
+  border-color: var(--color-primary);
+  cursor: default;
+}
+
+.pagination-btn[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.pagination-ellipsis {
+  padding: 0 0.25rem;
+  color: var(--color-text-muted);
+  user-select: none;
+}
+
 #history-error {
   text-align: center;
   padding: 1.5em 2em;

package/dist/resources/index.d.ts

@@ -28,6 +28,9 @@ declare const _default: {
             COMPONENT_SET_COOKIE_PARAMETERS_NOT_VALID: string;
             CONFIGURATION_DEPENDENCIES_MUST_BE_ARRAY: string;
             CONFIGURATION_EMPTY: string;
+            CONFIGURATION_METADATA_NOT_VALID: (adapterType: string) => string;
+            CONFIGURATION_METADATA_EXPORT_INTERVAL_NOT_VALID: string;
+            CONFIGURATION_METADATA_EXPORT_INTERVAL_WITHOUT_EXPORT_NOT_VALID: string;
             CONFIGURATION_ONREQUEST_MUST_BE_FUNCTION: string;
             CONFIGURATION_OFFREQUEST_MUST_BE_FUNCTION: string;
             CONFIGURATION_PUBLISH_BASIC_AUTH_CREDENTIALS_MISSING: string;

package/dist/resources/index.js

@@ -77,6 +77,9 @@ exports.default = {
             COMPONENT_SET_COOKIE_PARAMETERS_NOT_VALID: 'context.setCookie parameters are not valid',
             CONFIGURATION_DEPENDENCIES_MUST_BE_ARRAY: 'Registry configuration is not valid: dependencies must be an array',
             CONFIGURATION_EMPTY: 'Registry configuration is empty',
+            CONFIGURATION_METADATA_NOT_VALID: (adapterType) => `Registry configuration is not valid: ${adapterType} is not a valid metadata adapter`,
+            CONFIGURATION_METADATA_EXPORT_INTERVAL_NOT_VALID: 'Registry configuration is not valid: metadata.exportLegacyFilesInterval must be a positive number',
+            CONFIGURATION_METADATA_EXPORT_INTERVAL_WITHOUT_EXPORT_NOT_VALID: 'Registry configuration is not valid: metadata.exportLegacyFilesInterval requires metadata.exportLegacyFiles to be true',
             CONFIGURATION_ONREQUEST_MUST_BE_FUNCTION: "Registry configuration is not valid: registry.on's callback must be a function",
             CONFIGURATION_OFFREQUEST_MUST_BE_FUNCTION: "Registry configuration is not valid: registry.off's callback must be a function",
             CONFIGURATION_PUBLISH_BASIC_AUTH_CREDENTIALS_MISSING: 'Registry configuration is not valid: basic auth requires username and password',

package/dist/types.d.ts

@@ -1,6 +1,8 @@
 import type { NextFunction, Request, Response } from 'express';
+import type { MetadataStore as MetadataStoreType } from 'oc-metadata-adapters-utils';
 import type { StorageAdapter } from 'oc-storage-adapters-utils';
 import type { PackageJson } from 'type-fest';
+export type { ComponentRow, MetadataStore } from 'oc-metadata-adapters-utils';
 type Middleware = (req: Request, res: Response, next: NextFunction) => void;
 export interface Author {
     email?: string;
@@ -38,6 +40,44 @@ export interface ComponentsList {
     components: Record<string, string[]>;
     lastEdit: number;
 }
+export interface MetadataConfig<T = any> {
+    /**
+     * Factory for the metadata store. It must be side-effect free because config
+     * validation may instantiate a throwaway store before registry startup.
+     */
+    adapter: (options: T) => MetadataStoreType;
+    options: T;
+    /**
+     * Controls whether OC asks the metadata adapter to manage its schema/table.
+     * When omitted, OC behaves as `true` and passes that default to adapter
+     * validation/startup/migration paths.
+     *
+     * @default true
+     */
+    manageSchema?: boolean;
+    /**
+     * When true, startup scans storage and inserts any missing metadata rows
+     * before cache hydration. Existing rows are skipped.
+     *
+     * @default false
+     */
+    reconcileFromStorage?: boolean;
+    /**
+     * When true, startup exports DB-derived `components.json` and
+     * `components-details.json` projections to storage. This is a one-way export
+     * from metadata to storage and is not triggered on each publish.
+     *
+     * @default false
+     */
+    exportLegacyFiles?: boolean;
+    /**
+     * Interval, in seconds, at which the DB→`components.json` legacy export runs
+     * in the background. Only used when `exportLegacyFiles` is true. When omitted,
+     * the export runs once at startup only (no background refresh). The export is
+     * never coupled to the publish path.
+     */
+    exportLegacyFilesInterval?: number;
+}
 export interface OcParameter {
     default?: string | boolean | number;
     description?: string;
@@ -334,6 +374,7 @@ export interface Config<T = any> {
      * @default "/"
      */
     prefix: string;
+    metadata?: MetadataConfig;
     /**
      * Authentication strategy for component publishing.
      */
@@ -491,4 +532,3 @@ declare global {
         }
     }
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "oc",
-	"version": "0.50.54",
+	"version": "0.50.56",
 	"description": "A framework for developing and distributing html components",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -98,7 +98,8 @@
 		"oc-client-browser": "*",
 		"oc-empty-response-handler": "^1.0.2",
 		"oc-get-unix-utc-timestamp": "^1.0.6",
-		"oc-s3-storage-adapter": "^2.2.2",
+		"oc-metadata-adapters-utils": "^0.1.1",
+		"oc-s3-storage-adapter": "^2.2.3",
 		"oc-storage-adapters-utils": "^2.1.2",
 		"oc-template-es6": "^2.0.0",
 		"oc-template-es6-compiler": "^7.1.4",