oc 0.50.53 → 0.50.55

package/.turbo/turbo-build.log

@@ -1,18 +1,18 @@
 
 
-> oc@0.50.52 prebuild
+> oc@0.50.55 prebuild
 > rimraf dist
 
 ⠙
-> oc@0.50.52 build
+> oc@0.50.55 build
 > npm run lint && tsc && node tasks/build.js
 
 ⠙
-> oc@0.50.52 lint
+> oc@0.50.55 lint
 > npx @biomejs/biome check preview src test tasks
 
-⠙⠹⠸⠼⠴Checked 129 files in 39ms. No fixes applied.
+⠙⠹⠸⠼Checked 129 files in 83ms. No fixes applied.
 ⠙⠙Building client
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/src/components/oc-client/
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/src/components/oc-client/
 Client has been built and packaged 👍
 ⠙

package/.turbo/turbo-test-silent.log

@@ -1,43 +1,46 @@
-
-> oc@0.50.47 test-silent
-> npm run build && node tasks/mochaTest.js --silent
-
-
-> oc@0.50.47 prebuild
-> rimraf dist
-
-
-> oc@0.50.47 build
-> npm run lint && tsc && node tasks/build.js
-
-
-> oc@0.50.47 lint
-> npx @biomejs/biome check preview src test tasks
-
-Checked 128 files in 28ms. No fixes applied.
-Building client
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/src/components/oc-client/
-Client has been built and packaged 👍
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/circular-json-error
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/container-with-multiple-nested
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/container-with-nested
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/empty
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/hello-world
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/hello-world-custom-cookies
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/hello-world-custom-headers
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/jade-filters
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/language
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/lodash-component
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/no-containers
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/welcome
-compiling component /Users/Ricardo.Agullo/Work/oc/packages/oc/test/fixtures/components/welcome-with-optional-parameters
-Test components packaged 👍
-
-(node:77761) [DEP0169] DeprecationWarning: `url.parse()` behavior is not standardized and prone to errors that have security implications. Use the WHATWG URL API instead. CVEs are not issued for `url.parse()` vulnerabilities.
-(Use `node --trace-deprecation ...` to show where the warning was created)
-
-(node:77761) [DEP0097] DeprecationWarning: Using a domain property in MakeCallback is deprecated. Use the async_context variant of MakeCallback or the AsyncResource class instead. (Triggered by calling processImmediate on process.)
-
-
-  838 passing (8s)
-
+
+
+> oc@0.50.55 test-silent
+> npm run build && node tasks/mochaTest.js --silent
+
+
+> oc@0.50.55 prebuild
+> rimraf dist
+
+⠙
+> oc@0.50.55 build
+> npm run lint && tsc && node tasks/build.js
+
+⠙
+> oc@0.50.55 lint
+> npx @biomejs/biome check preview src test tasks
+
+⠙⠹⠸Checked 129 files in 32ms. No fixes applied.
+⠙⠙Building client
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/src/components/oc-client/
+Client has been built and packaged 👍
+⠙compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/circular-json-error
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/container-with-multiple-nested
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/container-with-nested
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/empty
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/hello-world
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/hello-world-custom-cookies
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/hello-world-custom-headers
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/jade-filters
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/language
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/lodash-component
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/no-containers
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/welcome
+compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/welcome-with-optional-parameters
+Test components packaged 👍
+
+[?25l  [......................................................................................................................]  [.....................................................................................................................]  [▬....................................................................................................................]  [▬▬...................................................................................................................]  [▬▬▬..................................................................................................................]  [▬▬▬▬.................................................................................................................]  [▬▬▬▬▬................................................................................................................]  [▬▬▬▬▬▬...............................................................................................................]  [▬▬▬▬▬▬▬..............................................................................................................]  [▬▬▬▬▬▬▬▬.............................................................................................................]  [▬▬▬▬▬▬▬▬▬............................................................................................................]  [▬▬▬▬▬▬▬▬▬▬...........................................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬..........................................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬.........................................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬........................................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬.......................................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬......................................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.....................................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬....................................................................................................](node:622) [DEP0169] DeprecationWarning: `url.parse()` behavior is not standardized and prone to errors that have security implications. Use the WHATWG URL API instead. CVEs are not issued for `url.parse()` vulnerabilities.
+(Use `node --trace-deprecation ...` to show where the warning was created)
+  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...................................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..................................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.................................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬................................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...............................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..............................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.............................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬............................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...........................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..........................................................................................]compiling component /Users/Ricardo.Agullo/Work/opencomponents/oc/packages/oc/test/fixtures/components/hello-world
+  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.........................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬........................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.......................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬......................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.....................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬....................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬................................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...............................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..............................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.............................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬............................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...........................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..........................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.........................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬........................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.......................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬......................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.....................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬....................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬................................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...............................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..............................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.............................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬............................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...........................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..........................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.........................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬........................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.......................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬......................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.....................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬....................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬................................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...............................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..............................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.............................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬............................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...........................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..........................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.........................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬........................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.......................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬......................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.....................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬....................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...................................](node:622) [DEP0097] DeprecationWarning: Using a domain property in MakeCallback is deprecated. Use the async_context variant of MakeCallback or the AsyncResource class instead. (Triggered by calling processImmediate on process.)
+  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬................................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...............................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..............................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.............................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬............................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...........................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..........................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.........................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬........................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.......................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬......................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.....................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬....................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬................]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...............]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..............]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.............](node:622) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
+  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬............]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...........]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..........]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.........]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬........]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.......]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬......]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.....]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬....]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬...]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬..]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬.]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬]  [▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬][?25h
+
+  850 passing (9s)
+
+⠙

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 ## Change Log
 
+## 0.50.55
+
+### Patch Changes
+
+- Add pagination on components
+
+## 0.50.54
+
+### Patch Changes
+
+- fix client
+
 ## 0.50.53
 
 ### Patch Changes

package/dist/components/oc-client/_package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oc-client",
   "description": "The OpenComponents client-side javascript client",
-  "version": "0.50.52",
+  "version": "0.50.55",
   "repository": "https://github.com/opencomponents/oc/tree/master/components/oc-client",
   "author": "Matteo Figus <matteofigus@gmail.com>",
   "oc": {
@@ -23,14 +23,14 @@
       ],
       "dataProvider": {
         "type": "node.js",
-        "hashKey": "e81ba1f42539b678079cb54ba2d4f72005ee12dd",
+        "hashKey": "ebd4132fcd55c1f8bfa966365e0f2b496a9505b4",
         "src": "server.js",
         "size": 644
       }
     },
-    "version": "0.50.52",
+    "version": "0.50.55",
     "packaged": true,
-    "date": 1781776190510
+    "date": 1783073481627
   },
   "devDependencies": {
     "oc-template-es6-compiler": "^8.0.0"

package/dist/components/oc-client/_package/server.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=(t,s)=>{const{staticPath:e,templates:a}=t;return s(null,{staticPath:e,templates:a})},r=(t,s)=>{o(t,(e,a,i={})=>{if(e)return s(e);if(a==null)return s(null,{__oc_emptyResponse:!0});const n=t.action?a:Object.assign({},a,{_staticPath:t.staticPath,_baseUrl:t.baseUrl,_componentName:"oc-client",_componentVersion:"0.50.52"}),c=t.staticPath.indexOf("http")===0?t.staticPath:"https:"+t.staticPath;return s(null,Object.assign({},{component:{key:"c4abb6bf4dc6657fb718a45b64bd6b2cb92e874a",src:c+"template.js",props:n,esm:!1,development:void 0}}))})};exports.data=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=(t,s)=>{const{staticPath:e,templates:a}=t;return s(null,{staticPath:e,templates:a})},r=(t,s)=>{o(t,(e,a,i={})=>{if(e)return s(e);if(a==null)return s(null,{__oc_emptyResponse:!0});const n=t.action?a:Object.assign({},a,{_staticPath:t.staticPath,_baseUrl:t.baseUrl,_componentName:"oc-client",_componentVersion:"0.50.55"}),c=t.staticPath.indexOf("http")===0?t.staticPath:"https:"+t.staticPath;return s(null,Object.assign({},{component:{key:"c4abb6bf4dc6657fb718a45b64bd6b2cb92e874a",src:c+"template.js",props:n,esm:!1,development:void 0}}))})};exports.data=r;

package/dist/components/oc-client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oc-client",
   "description": "The OpenComponents client-side javascript client",
-  "version": "0.50.52",
+  "version": "0.50.55",
   "repository": "https://github.com/opencomponents/oc/tree/master/components/oc-client",
   "author": "Matteo Figus <matteofigus@gmail.com>",
   "oc": {

package/dist/registry/views/partials/components-list.js

@@ -17,6 +17,6 @@ const ComponentsList = (props) => {
                                         ? `${Math.round(component.oc.files.template.size / 1024)} kb`
                                         : '? Kb' }))] }) })] }) }));
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { id: "components-list", class: "box", children: [(0, jsx_runtime_1.jsxs)("form", { id: "filter-components", children: [(0, jsx_runtime_1.jsxs)("div", { class: "filters", children: [(0, jsx_runtime_1.jsx)("input", { id: "search-filter", type: "text", "aria-label": "Filter by component name", placeholder: "Filter by name\u2026  ( press / )" }), (0, jsx_runtime_1.jsx)("input", { id: "author-filter", type: "text", "aria-label": "Filter by component author", placeholder: "Filter by component author" })] }), (0, jsx_runtime_1.jsxs)("div", { class: "states", children: [(0, jsx_runtime_1.jsx)("span", { children: "Hide:" }), (0, jsx_runtime_1.jsx)(selected_checkbox_1.default, { name: "deprecated", stateCounts: props.stateCounts }), (0, jsx_runtime_1.jsx)(selected_checkbox_1.default, { name: "experimental", stateCounts: props.stateCounts })] })] }), (0, jsx_runtime_1.jsx)("div", { class: "list-meta", children: (0, jsx_runtime_1.jsxs)("span", { id: "results-count", children: [props.components.length, " components"] }) }), (0, jsx_runtime_1.jsxs)("div", { class: "row header componentRow table", children: [(0, jsx_runtime_1.jsx)("div", { class: "title", children: "Component" }), (0, jsx_runtime_1.jsx)("div", { class: "author", children: "Author" }), (0, jsx_runtime_1.jsx)("div", { children: "Latest version" }), isRemote && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { class: "date", children: "Updated" }), (0, jsx_runtime_1.jsx)("div", { class: "activity", children: "Activity" })] })), sizeAvailable && (0, jsx_runtime_1.jsx)("div", { children: "Size" })] }), props.components.map(componentRow), (0, jsx_runtime_1.jsx)("div", { id: "components-empty", class: "empty-state hide", children: "No components match your filters." })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { id: "components-list", class: "box", children: [(0, jsx_runtime_1.jsxs)("form", { id: "filter-components", children: [(0, jsx_runtime_1.jsxs)("div", { class: "filters", children: [(0, jsx_runtime_1.jsx)("input", { id: "search-filter", type: "text", "aria-label": "Filter by component name", placeholder: "Filter by name\u2026  ( press / )" }), (0, jsx_runtime_1.jsx)("input", { id: "author-filter", type: "text", "aria-label": "Filter by component author", placeholder: "Filter by component author" })] }), (0, jsx_runtime_1.jsxs)("div", { class: "states", children: [(0, jsx_runtime_1.jsx)("span", { children: "Hide:" }), (0, jsx_runtime_1.jsx)(selected_checkbox_1.default, { name: "deprecated", stateCounts: props.stateCounts }), (0, jsx_runtime_1.jsx)(selected_checkbox_1.default, { name: "experimental", stateCounts: props.stateCounts })] })] }), (0, jsx_runtime_1.jsx)("div", { class: "list-meta", children: (0, jsx_runtime_1.jsxs)("span", { id: "results-count", children: [props.components.length, " components"] }) }), (0, jsx_runtime_1.jsx)("nav", { id: "components-pagination-top", class: "pagination components-pagination pagination-top hide", "aria-label": "Components pagination" }), (0, jsx_runtime_1.jsxs)("div", { class: "row header componentRow table", children: [(0, jsx_runtime_1.jsx)("div", { class: "title", children: "Component" }), (0, jsx_runtime_1.jsx)("div", { class: "author", children: "Author" }), (0, jsx_runtime_1.jsx)("div", { children: "Latest version" }), isRemote && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { class: "date", children: "Updated" }), (0, jsx_runtime_1.jsx)("div", { class: "activity", children: "Activity" })] })), sizeAvailable && (0, jsx_runtime_1.jsx)("div", { children: "Size" })] }), props.components.map(componentRow), (0, jsx_runtime_1.jsx)("div", { id: "components-empty", class: "empty-state hide", children: "No components match your filters." }), (0, jsx_runtime_1.jsx)("nav", { id: "components-pagination-bottom", class: "pagination components-pagination hide", "aria-label": "Components pagination" })] }));
 };
 exports.default = ComponentsList;

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

@@ -1,2 +1,2 @@
-declare const _default: "'use strict';\n\nvar oc = oc || {};\noc.cmd = oc.cmd || [];\n\noc.cmd.push(function() {\n  var escapeRegExp = function(s) {\n    return String(s).replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n  };\n\n  var safeRegExp = function(pattern, flags) {\n    try {\n      return new RegExp(pattern, flags);\n    } catch (e) {\n      return new RegExp(escapeRegExp(pattern), flags);\n    }\n  };\n\n  var componentsListChanged = function() {\n    $('.componentRow').removeClass('hide');\n    var s = $('#search-filter').val(),\n      a = $('#author-filter').val(),\n      r = safeRegExp(s, ''),\n      ar = safeRegExp(a, 'i'),\n      selectedCheckboxes = $('input[type=checkbox]:checked'),\n      hiddenStates = [],\n      hidden = 0,\n      i;\n\n    for (i = 0; i < selectedCheckboxes.length; i++) {\n      hiddenStates.push($(selectedCheckboxes[i]).attr('name'));\n    }\n\n    for (i = 0; i < componentsList.length; i++) {\n      var matches = !s || !!componentsList[i].name.match(r),\n        matchesAuthor =\n          !a ||\n          (componentsList[i].author.name &&\n            !!componentsList[i].author.name.match(ar)),\n        selector = $('#component-' + componentsList[i].name),\n        isHidden = false;\n\n      for (var j = 0; j < hiddenStates.length; j++) {\n        if (componentsList[i].state.toLowerCase() === hiddenStates[j]) {\n          isHidden = true;\n        }\n      }\n\n      var show = matches && matchesAuthor && !isHidden;\n      selector[show ? 'removeClass' : 'addClass']('hide');\n      if (!show) {\n        hidden += 1;\n      }\n    }\n\n    var totalShowing = componentsList.length - hidden,\n      result = totalShowing + (totalShowing === 1 ? ' component' : ' components');\n\n    if (s) {\n      result += ' matching \"' + s + '\"';\n      if (a) {\n        result += ' and';\n      }\n    }\n    if (a) {\n      result += ' by author \"' + a + '\"';\n    }\n\n    $('#results-count').text(result);\n    $('#components-empty')[totalShowing === 0 ? 'removeClass' : 'addClass']('hide');\n\n    return false;\n  };\n\n  var historyData = [];\n  var historyRenderedCount = 0;\n  var historyBatchSize = 50; // Number of items to render per batch\n  var isLoadingMore = false;\n\n  var renderHistoryBatch = function() {\n    if (historyRenderedCount >= historyData.length || isLoadingMore) {\n      return;\n    }\n\n    isLoadingMore = true;\n    var historyContent = $('#history-content');\n    var batchEnd = Math.min(historyRenderedCount + historyBatchSize, historyData.length);\n    var batchHtml = '';\n\n    for (var i = historyRenderedCount; i < batchEnd; i++) {\n      var item = historyData[i];\n      var templateSizeText = item.templateSize ? \n        ' [' + Math.round(item.templateSize / 1024) + ' kb]' : '';\n      \n      batchHtml += '<a href=\"' + item.name + '/' + item.version + '/~info\">' +\n                  '<div class=\"componentRow row table\">' +\n                  '<p class=\"release\">' +\n                  item.publishDate + ' - Published ' + item.name + '@' + item.version +\n                  templateSizeText +\n                  '</p>' +\n                  '</div>' +\n                  '</a>';\n    }\n\n    // Append new batch to existing content\n    historyContent.append(batchHtml);\n    historyRenderedCount = batchEnd;\n    \n    // Add loading indicator if there are more items\n    if (historyRenderedCount < historyData.length) {\n      historyContent.append('<div id=\"history-loading-more\" class=\"loading-more\">Loading more...</div>');\n    }\n    \n    isLoadingMore = false;\n  };\n\n  var setupHistoryScrollListener = function() {\n    var historyContainer = $('#components-history');\n    var checkScroll = function() {\n      if (historyRenderedCount >= historyData.length) {\n        return;\n      }\n\n      var containerTop = historyContainer.offset().top;\n      var containerHeight = historyContainer.outerHeight();\n      var scrollTop = $(window).scrollTop();\n      var windowHeight = $(window).height();\n      \n      // Check if user scrolled close to the bottom of the history container\n      var distanceFromBottom = (containerTop + containerHeight) - (scrollTop + windowHeight);\n      \n      if (distanceFromBottom < 200) { // Load more when 200px from bottom\n        $('#history-loading-more').remove();\n        renderHistoryBatch();\n      }\n    };\n\n    $(window).on('scroll.history', checkScroll);\n    \n    // Also check on resize\n    $(window).on('resize.history', checkScroll);\n  };\n\n  var loadComponentsHistory = function() {\n    var historyLoader = $('#history-loader');\n    var historyContent = $('#history-content');\n    var historyError = $('#history-error');\n\n    // Show loader\n    historyLoader.show();\n    historyContent.hide();\n    historyError.hide();\n\n    // Reset state\n    historyData = [];\n    historyRenderedCount = 0;\n    isLoadingMore = false;\n\n    // Remove any existing scroll listeners\n    $(window).off('scroll.history resize.history');\n\n    // Fetch history data\n    fetch('~registry/history')\n      .then(function(response) {\n        if (!response.ok) {\n          throw new Error('Failed to fetch history');\n        }\n        return response.json();\n      })\n      .then(function(data) {\n        historyData = data.componentsHistory || [];\n        \n        // Clear content and show container\n        historyContent.empty();\n        historyLoader.hide();\n        historyContent.show();\n        \n        if (historyData.length === 0) {\n          historyContent.html('<p class=\"empty-state\">No components history available.</p>');\n          return;\n        }\n\n        // Render first batch\n        renderHistoryBatch();\n        \n        // Setup scroll listener for infinite loading\n        setupHistoryScrollListener();\n      })\n      .catch(function(error) {\n        console.error('Error loading components history:', error);\n        historyLoader.hide();\n        historyError.show();\n      });\n  };\n\n  var isHistoryLoaded = false;\n\n  var initialiseTabs = function() {\n    var selectItem = function(target) {\n      var $target = $(target);\n      $('.box').hide();\n      $target.show();\n      $('#menuList a').removeClass('selected');\n      $('#menuList a[href=\"' + target + '\"]').addClass('selected');\n\n      // Keep URL in sync so tab survives refresh and back/forward\n      try {\n        if (history && history.replaceState && location.hash !== target) {\n          history.replaceState(null, '', target);\n        }\n      } catch (e) {}\n\n      // Clean up scroll listeners when leaving history tab\n      if (target !== '#components-history') {\n        $(window).off('scroll.history resize.history');\n      }\n      \n      // Load history data when history tab is selected for the first time\n      if (target === '#components-history' && !isHistoryLoaded) {\n        loadComponentsHistory();\n        isHistoryLoaded = true;\n      }\n      // Re-enable scroll listeners when returning to history tab\n      else if (target === '#components-history' && isHistoryLoaded && historyRenderedCount < historyData.length) {\n        setupHistoryScrollListener();\n      }\n    };\n\n    var hash = location.href.split('#')[1] || '';\n    var isHashValid = hash && $('#' + hash);\n    var target = isHashValid ? '#' + hash : $($('#menuList a')[0]).attr('href');\n    selectItem(target);\n\n    $('#menuList a').click(function() {\n      selectItem($(this).attr('href'));\n    });\n  };\n\n  var debounce = function(fn, wait) {\n    var t;\n    return function() {\n      var ctx = this, args = arguments;\n      clearTimeout(t);\n      t = setTimeout(function(){ fn.apply(ctx, args); }, wait);\n    };\n  };\n\n  $('#filter-components')\n    .submit(componentsListChanged)\n    .keyup(debounce(componentsListChanged, 80));\n  $('#filter-components input[type=checkbox]').change(componentsListChanged);\n\n  if (q) {\n    $('.search').val(q);\n  }\n\n  // Keyboard shortcuts: \"/\" focuses search, \"Esc\" clears the focused filter\n  $(document).on('keydown', function(e) {\n    var tag = (e.target && e.target.tagName) ? e.target.tagName.toLowerCase() : '';\n    var typing = tag === 'input' || tag === 'textarea' || tag === 'select';\n\n    if (e.key === '/' && !typing) {\n      var $s = $('#search-filter');\n      if ($s.length) {\n        e.preventDefault();\n        $s.focus();\n      }\n    } else if (e.key === 'Escape' && typing && $(e.target).closest('#filter-components').length) {\n      $(e.target).val('');\n      componentsListChanged();\n    }\n  });\n\n  // Focus the search input only on a fresh load (no tab hash, no in-page nav)\n  if (!location.hash) {\n    var $searchInput = $('#search-filter');\n    if ($searchInput.length) { $searchInput.focus(); }\n  }\n\n  componentsListChanged();\n  initialiseTabs();\n});";
+declare const _default: "'use strict';\n\nvar oc = oc || {};\noc.cmd = oc.cmd || [];\n\noc.cmd.push(function() {\n  var escapeRegExp = function(s) {\n    return String(s).replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n  };\n\n  var safeRegExp = function(pattern, flags) {\n    try {\n      return new RegExp(pattern, flags);\n    } catch (e) {\n      return new RegExp(escapeRegExp(pattern), flags);\n    }\n  };\n\n  // Client-side pagination for the components list. Enabled only once the\n  // registry has more components than a single page so smaller registries keep\n  // the simple single-page view.\n  var COMPONENTS_PAGE_SIZE = 50;\n  var paginationEnabled = componentsList.length > COMPONENTS_PAGE_SIZE;\n  var currentPage = 1;\n\n  var renderComponentsPagination = function(totalMatching, totalPages) {\n    // Rendered into both the top and bottom containers so they stay in sync.\n    var containers = $('.components-pagination');\n    if (!paginationEnabled || totalMatching <= COMPONENTS_PAGE_SIZE) {\n      containers.addClass('hide').empty();\n      return;\n    }\n\n    // Build a compact list of page numbers: first, last, and a window around\n    // the current page, with ellipses for the gaps.\n    var pages = [];\n    var windowSize = 1;\n    var start = Math.max(2, currentPage - windowSize);\n    var end = Math.min(totalPages - 1, currentPage + windowSize);\n    pages.push(1);\n    if (start > 2) {\n      pages.push('...');\n    }\n    for (var p = start; p <= end; p++) {\n      pages.push(p);\n    }\n    if (end < totalPages - 1) {\n      pages.push('...');\n    }\n    if (totalPages > 1) {\n      pages.push(totalPages);\n    }\n\n    var html =\n      '<button type=\"button\" class=\"pagination-btn pagination-prev\" data-page=\"' +\n      (currentPage - 1) +\n      '\"' +\n      (currentPage <= 1 ? ' disabled' : '') +\n      '>Prev</button>';\n    for (var k = 0; k < pages.length; k++) {\n      if (pages[k] === '...') {\n        html += '<span class=\"pagination-ellipsis\">\u2026</span>';\n      } else {\n        html +=\n          '<button type=\"button\" class=\"pagination-btn pagination-page' +\n          (pages[k] === currentPage ? ' active' : '') +\n          '\" data-page=\"' +\n          pages[k] +\n          '\">' +\n          pages[k] +\n          '</button>';\n      }\n    }\n    html +=\n      '<button type=\"button\" class=\"pagination-btn pagination-next\" data-page=\"' +\n      (currentPage + 1) +\n      '\"' +\n      (currentPage >= totalPages ? ' disabled' : '') +\n      '>Next</button>';\n\n    containers.html(html).removeClass('hide');\n  };\n\n  var applyComponentsView = function() {\n    var s = $('#search-filter').val(),\n      a = $('#author-filter').val(),\n      r = safeRegExp(s, ''),\n      ar = safeRegExp(a, 'i'),\n      selectedCheckboxes = $('input[type=checkbox]:checked'),\n      hiddenStates = [],\n      matchingNames = [],\n      i;\n\n    for (i = 0; i < selectedCheckboxes.length; i++) {\n      hiddenStates.push($(selectedCheckboxes[i]).attr('name'));\n    }\n\n    // First pass: figure out which components match the current filters.\n    for (i = 0; i < componentsList.length; i++) {\n      var matches = !s || !!componentsList[i].name.match(r),\n        matchesAuthor =\n          !a ||\n          (componentsList[i].author.name &&\n            !!componentsList[i].author.name.match(ar)),\n        isHidden = false;\n\n      for (var j = 0; j < hiddenStates.length; j++) {\n        if (componentsList[i].state.toLowerCase() === hiddenStates[j]) {\n          isHidden = true;\n        }\n      }\n\n      if (matches && matchesAuthor && !isHidden) {\n        matchingNames.push(componentsList[i].name);\n      }\n    }\n\n    var totalMatching = matchingNames.length;\n    var totalPages = paginationEnabled\n      ? Math.max(1, Math.ceil(totalMatching / COMPONENTS_PAGE_SIZE))\n      : 1;\n    if (currentPage > totalPages) {\n      currentPage = totalPages;\n    }\n    if (currentPage < 1) {\n      currentPage = 1;\n    }\n\n    var startIdx = paginationEnabled\n      ? (currentPage - 1) * COMPONENTS_PAGE_SIZE\n      : 0;\n    var endIdx = paginationEnabled ? startIdx + COMPONENTS_PAGE_SIZE : totalMatching;\n    var visibleNames = {};\n    for (i = startIdx; i < endIdx && i < totalMatching; i++) {\n      visibleNames[matchingNames[i]] = true;\n    }\n\n    // Second pass: only rows that match the filters AND fall on the current\n    // page are shown.\n    for (i = 0; i < componentsList.length; i++) {\n      var name = componentsList[i].name,\n        show = visibleNames[name] === true;\n      $('#component-' + name)[show ? 'removeClass' : 'addClass']('hide');\n    }\n\n    var result =\n      totalMatching + (totalMatching === 1 ? ' component' : ' components');\n\n    if (s) {\n      result += ' matching \"' + s + '\"';\n      if (a) {\n        result += ' and';\n      }\n    }\n    if (a) {\n      result += ' by author \"' + a + '\"';\n    }\n    if (paginationEnabled && totalMatching > COMPONENTS_PAGE_SIZE) {\n      result +=\n        ' (showing ' +\n        (startIdx + 1) +\n        '\u2013' +\n        Math.min(endIdx, totalMatching) +\n        ')';\n    }\n\n    $('#results-count').text(result);\n    $('#components-empty')[totalMatching === 0 ? 'removeClass' : 'addClass'](\n      'hide'\n    );\n\n    renderComponentsPagination(totalMatching, totalPages);\n\n    return false;\n  };\n\n  var componentsListChanged = function() {\n    // Any filter change resets back to the first page.\n    currentPage = 1;\n    return applyComponentsView();\n  };\n\n  var historyData = [];\n  var historyRenderedCount = 0;\n  var historyBatchSize = 50; // Number of items to render per batch\n  var isLoadingMore = false;\n\n  var renderHistoryBatch = function() {\n    if (historyRenderedCount >= historyData.length || isLoadingMore) {\n      return;\n    }\n\n    isLoadingMore = true;\n    var historyContent = $('#history-content');\n    var batchEnd = Math.min(historyRenderedCount + historyBatchSize, historyData.length);\n    var batchHtml = '';\n\n    for (var i = historyRenderedCount; i < batchEnd; i++) {\n      var item = historyData[i];\n      var templateSizeText = item.templateSize ? \n        ' [' + Math.round(item.templateSize / 1024) + ' kb]' : '';\n      \n      batchHtml += '<a href=\"' + item.name + '/' + item.version + '/~info\">' +\n                  '<div class=\"componentRow row table\">' +\n                  '<p class=\"release\">' +\n                  item.publishDate + ' - Published ' + item.name + '@' + item.version +\n                  templateSizeText +\n                  '</p>' +\n                  '</div>' +\n                  '</a>';\n    }\n\n    // Append new batch to existing content\n    historyContent.append(batchHtml);\n    historyRenderedCount = batchEnd;\n    \n    // Add loading indicator if there are more items\n    if (historyRenderedCount < historyData.length) {\n      historyContent.append('<div id=\"history-loading-more\" class=\"loading-more\">Loading more...</div>');\n    }\n    \n    isLoadingMore = false;\n  };\n\n  var setupHistoryScrollListener = function() {\n    var historyContainer = $('#components-history');\n    var checkScroll = function() {\n      if (historyRenderedCount >= historyData.length) {\n        return;\n      }\n\n      var containerTop = historyContainer.offset().top;\n      var containerHeight = historyContainer.outerHeight();\n      var scrollTop = $(window).scrollTop();\n      var windowHeight = $(window).height();\n      \n      // Check if user scrolled close to the bottom of the history container\n      var distanceFromBottom = (containerTop + containerHeight) - (scrollTop + windowHeight);\n      \n      if (distanceFromBottom < 200) { // Load more when 200px from bottom\n        $('#history-loading-more').remove();\n        renderHistoryBatch();\n      }\n    };\n\n    $(window).on('scroll.history', checkScroll);\n    \n    // Also check on resize\n    $(window).on('resize.history', checkScroll);\n  };\n\n  var loadComponentsHistory = function() {\n    var historyLoader = $('#history-loader');\n    var historyContent = $('#history-content');\n    var historyError = $('#history-error');\n\n    // Show loader\n    historyLoader.show();\n    historyContent.hide();\n    historyError.hide();\n\n    // Reset state\n    historyData = [];\n    historyRenderedCount = 0;\n    isLoadingMore = false;\n\n    // Remove any existing scroll listeners\n    $(window).off('scroll.history resize.history');\n\n    // Fetch history data\n    fetch('~registry/history')\n      .then(function(response) {\n        if (!response.ok) {\n          throw new Error('Failed to fetch history');\n        }\n        return response.json();\n      })\n      .then(function(data) {\n        historyData = data.componentsHistory || [];\n        \n        // Clear content and show container\n        historyContent.empty();\n        historyLoader.hide();\n        historyContent.show();\n        \n        if (historyData.length === 0) {\n          historyContent.html('<p class=\"empty-state\">No components history available.</p>');\n          return;\n        }\n\n        // Render first batch\n        renderHistoryBatch();\n        \n        // Setup scroll listener for infinite loading\n        setupHistoryScrollListener();\n      })\n      .catch(function(error) {\n        console.error('Error loading components history:', error);\n        historyLoader.hide();\n        historyError.show();\n      });\n  };\n\n  var isHistoryLoaded = false;\n\n  var initialiseTabs = function() {\n    var selectItem = function(target) {\n      var $target = $(target);\n      $('.box').hide();\n      $target.show();\n      $('#menuList a').removeClass('selected');\n      $('#menuList a[href=\"' + target + '\"]').addClass('selected');\n\n      // Keep URL in sync so tab survives refresh and back/forward\n      try {\n        if (history && history.replaceState && location.hash !== target) {\n          history.replaceState(null, '', target);\n        }\n      } catch (e) {}\n\n      // Clean up scroll listeners when leaving history tab\n      if (target !== '#components-history') {\n        $(window).off('scroll.history resize.history');\n      }\n      \n      // Load history data when history tab is selected for the first time\n      if (target === '#components-history' && !isHistoryLoaded) {\n        loadComponentsHistory();\n        isHistoryLoaded = true;\n      }\n      // Re-enable scroll listeners when returning to history tab\n      else if (target === '#components-history' && isHistoryLoaded && historyRenderedCount < historyData.length) {\n        setupHistoryScrollListener();\n      }\n    };\n\n    var hash = location.href.split('#')[1] || '';\n    var isHashValid = hash && $('#' + hash);\n    var target = isHashValid ? '#' + hash : $($('#menuList a')[0]).attr('href');\n    selectItem(target);\n\n    $('#menuList a').click(function() {\n      selectItem($(this).attr('href'));\n    });\n  };\n\n  var debounce = function(fn, wait) {\n    var t;\n    return function() {\n      var ctx = this, args = arguments;\n      clearTimeout(t);\n      t = setTimeout(function(){ fn.apply(ctx, args); }, wait);\n    };\n  };\n\n  $('#filter-components')\n    .submit(componentsListChanged)\n    .keyup(debounce(componentsListChanged, 80));\n  $('#filter-components input[type=checkbox]').change(componentsListChanged);\n\n  // Delegated from the stable list container so both the top and bottom\n  // pagination bars work. No auto-scroll, so repeated clicks stay put.\n  $('#components-list').on('click', '.pagination-btn', function() {\n    var $btn = $(this);\n    if ($btn.is('[disabled]')) {\n      return;\n    }\n    var page = parseInt($btn.attr('data-page'), 10);\n    if (isNaN(page)) {\n      return;\n    }\n    currentPage = page;\n    applyComponentsView();\n  });\n\n  if (q) {\n    $('.search').val(q);\n  }\n\n  // Keyboard shortcuts: \"/\" focuses search, \"Esc\" clears the focused filter\n  $(document).on('keydown', function(e) {\n    var tag = (e.target && e.target.tagName) ? e.target.tagName.toLowerCase() : '';\n    var typing = tag === 'input' || tag === 'textarea' || tag === 'select';\n\n    if (e.key === '/' && !typing) {\n      var $s = $('#search-filter');\n      if ($s.length) {\n        e.preventDefault();\n        $s.focus();\n      }\n    } else if (e.key === 'Escape' && typing && $(e.target).closest('#filter-components').length) {\n      $(e.target).val('');\n      componentsListChanged();\n    }\n  });\n\n  // Focus the search input only on a fresh load (no tab hash, no in-page nav)\n  if (!location.hash) {\n    var $searchInput = $('#search-filter');\n    if ($searchInput.length) { $searchInput.focus(); }\n  }\n\n  componentsListChanged();\n  initialiseTabs();\n});";
 export default _default;

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "oc",
-	"version": "0.50.53",
+	"version": "0.50.55",
 	"description": "A framework for developing and distributing html components",
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",