docs-app: preview the unreleased kolay (docs() + apiDocs() plugin split)

docs-app/app/templates/3-ui/one-time-password/otp-input.json

@@ -1,3 +1,3 @@
 {
-  "componentName": "OTPInput"
+  "title": "OTPInput"
 }

docs-app/app/templates/3-ui/one-time-password/otp.json

@@ -1,3 +1,3 @@
 {
-  "componentName": "OTP"
+  "title": "OTP"
 }

docs-app/vite.config.mjs

@@ -1,7 +1,7 @@
 import { ember, extensions } from "@embroider/vite";
 
 import { babel } from "@rollup/plugin-babel";
-import { kolay } from "kolay/vite";
+import { apiDocs, docs } from "kolay/vite";
 import { defineConfig } from "vite";
 import { scopedCSS } from "ember-scoped-css/vite";
 import rehypeShiki from "@shikijs/rehype";
@@ -11,8 +11,7 @@ export default defineConfig(async (/* { mode } */) => {
     plugins: [
       scopedCSS(),
       ember(),
-      kolay({
-        packages: ["ember-primitives", "which-heading-do-i-need"],
+      docs({
         rehypePlugins: [
           [
             rehypeShiki,
@@ -38,11 +37,24 @@ export default defineConfig(async (/* { mode } */) => {
           import { Callout } from '@universal-ember/docs-support';
         `,
       }),
+      apiDocs(["ember-primitives", "which-heading-do-i-need"]),
       babel({
         babelHelpers: "runtime",
         extensions,
       }),
     ],
+    build: {
+      /**
+       * Vite's default cssTarget predates light-dark(), so lightningcss
+       * rewrites it into var(--lightningcss-light/dark) space toggles whose
+       * :root definitions don't survive chunking — the declarations then
+       * fail at computed-value time (kolay's typedoc colors, for example).
+       * The rewrite would also key theming off prefers-color-scheme,
+       * ignoring our color-scheme toggle. These targets support
+       * light-dark() natively.
+       */
+      cssTarget: ["chrome123", "firefox120", "safari17.5"],
+    },
     optimizeDeps: {
       exclude: [
         // a wasm-providing dependency

package.json

@@ -58,6 +58,7 @@
       "ember-primitives": "workspace:^",
       "ember-repl": "^8.0.0",
       "ember-source": "^7.1.0",
+      "kolay": "github:universal-ember/kolay#dist",
       "reactiveweb": "^1.9.1",
       "tracked-toolbox": "^3.0.0"
     },

packages/docs-support/src/site-css/prose.css

@@ -210,8 +210,9 @@
   color: #f8fafc;
 }
 
-/* Pre (code blocks) */
-.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+/* Pre (code blocks) — kolay's typedoc renderer writes names (@arg, <:block>)
+   as <pre class="typedoc__name">, which are inline code, not code blocks */
+.prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *, .typedoc__name)) {
   color: var(--prose-pre-code);
   background-color: var(--prose-pre-bg);
   overflow-x: auto;
@@ -229,7 +230,7 @@
 
 :is(html[style*="color-scheme: dark"])
   .prose
-  :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *, .typedoc__name)) {
   background-color: rgb(30 41 59 / 0.6);
   box-shadow: none;
   outline: 1px solid rgb(203 213 225 / 0.1);