@mui/internal-docs-infra 0.8.1-canary.0 → 0.8.1-canary.1

package/CodeProvider/CodeProvider.mjs

@@ -5,6 +5,7 @@ import { createStarryNight } from '@wooorm/starry-night';
 import { CodeContext } from "./CodeContext.mjs";
 import { extensionMap, grammars } from "../pipeline/parseSource/grammars.mjs";
 import { starryNightGutter } from "../pipeline/parseSource/addLineGutters.mjs";
+import { extendSyntaxTokens } from "../pipeline/parseSource/extendSyntaxTokens.mjs";
 // Import the heavy functions
 import { loadCodeFallback } from "../pipeline/loadCodeVariant/loadCodeFallback.mjs";
 import { loadCodeVariant } from "../pipeline/loadCodeVariant/loadCodeVariant.mjs";
@@ -49,7 +50,9 @@ export function CodeProvider({
             }]
           };
         }
-        const highlighted = starryNight.highlight(source, extensionMap[fileType]);
+        const grammarScope = extensionMap[fileType];
+        const highlighted = starryNight.highlight(source, grammarScope);
+        extendSyntaxTokens(highlighted, grammarScope);
         const sourceLines = source.split(/\r?\n|\r/);
         starryNightGutter(highlighted, sourceLines); // mutates the tree to add line gutters
 

package/abstractCreateDemo/abstractCreateDemo.d.mts

@@ -38,10 +38,10 @@ export declare function abstractCreateDemo<T extends {}>(options: AbstractCreate
 }, meta: CreateDemoMeta | undefined): React.ComponentType<T> & {
   Title: React.ComponentType;
 };
-export declare function createDemoFactory<T extends {}>(options: AbstractCreateDemoOptions<T>): (url: string, component: React.ComponentType<{}>, meta?: CreateDemoMeta | undefined) => React.ComponentType<T> & {
-  Title: React.ComponentType<{}>;
+export declare function createDemoFactory<T extends {}>(options: AbstractCreateDemoOptions<T>): (url: string, component: React.ComponentType, meta?: CreateDemoMeta) => React.ComponentType<T> & {
+  Title: React.ComponentType;
 };
-export declare function createDemoWithVariantsFactory<T extends {}>(options: AbstractCreateDemoOptions<T>): (url: string, variants: Record<string, React.ComponentType<{}>>, meta?: CreateDemoMeta | undefined) => React.ComponentType<T> & {
-  Title: React.ComponentType<{}>;
+export declare function createDemoWithVariantsFactory<T extends {}>(options: AbstractCreateDemoOptions<T>): (url: string, variants: Record<string, React.ComponentType>, meta?: CreateDemoMeta) => React.ComponentType<T> & {
+  Title: React.ComponentType;
 };
 export {};

package/abstractCreateDemoClient/abstractCreateDemoClient.d.mts

@@ -26,7 +26,7 @@ type AbstractCreateDemoClientOptions = {
 export declare function abstractCreateDemoClient(options: AbstractCreateDemoClientOptions, url: string, meta?: CreateDemoClientMeta): React.ComponentType<{
   children: React.ReactNode;
 }>;
-export declare function createDemoClientFactory(options: AbstractCreateDemoClientOptions): (url: string, meta?: CreateDemoClientMeta | undefined) => React.ComponentType<{
+export declare function createDemoClientFactory(options: AbstractCreateDemoClientOptions): (url: string, meta?: CreateDemoClientMeta) => React.ComponentType<{
   children: React.ReactNode;
 }>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-docs-infra",
-  "version": "0.8.1-canary.0",
+  "version": "0.8.1-canary.1",
   "author": "MUI Team",
   "description": "MUI Infra - internal documentation creation tools.",
   "license": "MIT",
@@ -633,5 +633,5 @@
   "bin": {
     "docs-infra": "./cli/index.mjs"
   },
-  "gitSha": "a2817e4da1ff70e691443c39bc53141feea9122a"
+  "gitSha": "4e00a23176ff08c1393829f9f3c71323e3735550"
 }

package/pipeline/enhanceCodeInline/enhanceCodeInline.d.mts

@@ -2,26 +2,24 @@ import type { Root as HastRoot } from 'hast';
 /**
  * A rehype plugin that enhances inline code elements in three ways:
  *
- * 1. **Tag bracket wrapping**: Wraps HTML tag angle brackets into the
- *    syntax highlighting span, so `<div>` is styled as one unit.
+ * 1. **Tag bracket wrapping**: Wraps HTML/JSX tag patterns (opening bracket,
+ *    tag-name span, closing bracket) in a wrapper span. HTML tags (`pl-ent`)
+ *    get `<span class="di-ht">`, JSX component tags (`pl-c1`) get
+ *    `<span class="di-jt">`. The original `pl-*` spans are preserved
+ *    inside — no semantic information is destroyed.
  *
  * 2. **Token reclassification**: Corrects misidentified token classes,
  *    e.g., `function` marked as `pl-en` is changed to `pl-k` (keyword).
  *
- * 3. **Nullish value styling**: Adds the `di-n` class to spans containing
- *    `undefined`, `null`, `""`, or `''` for distinct visual treatment.
+ * 3. **Built-in type enhancement** (TypeScript only): Reclassifies standalone
+ *    type keywords (`string`, `number`, `void`, etc.) from `pl-smi`/`pl-k`
+ *    to `pl-c1 di-bt`, matching `extendSyntaxTokens` output in type context.
  *
  * Transforms patterns like:
  * `<code>&lt;<span class="pl-ent">div</span>&gt;</code>`
  *
  * Into:
- * `<code><span class="pl-ent">&lt;div&gt;</span></code>`
- *
- * And:
- * `<code><span class="pl-c1">undefined</span></code>`
- *
- * Into:
- * `<code><span class="di-n">undefined</span></code>`
+ * `<code><span class="di-ht">&lt;<span class="pl-ent">div</span>&gt;</span></code>`
  *
  * **Important**: This plugin should run after syntax highlighting plugins
  * (like transformHtmlCodeInline) as it modifies the structure

package/pipeline/enhanceCodeInline/enhanceCodeInline.mjs

@@ -1,19 +1,19 @@
 import { visit } from 'unist-util-visit';
+import { getShallowTextContent } from "../loadServerTypes/hastTypeUtils.mjs";
+import { getLanguageCapabilities } from "../enhanceCodeTypes/getLanguageCapabilities.mjs";
+import { BUILT_IN_TYPES } from "../parseSource/extendSyntaxTokens.mjs";
 
 /**
- * Classes whose spans represent tag names that should have their
- * surrounding angle brackets wrapped into the same span.
- * - pl-ent: HTML entity tag (e.g., div, span)
- * - pl-c1: Syntax constant (e.g., React components like Box, Stack)
- */
-const TAG_NAME_CLASSES = ['pl-ent', 'pl-c1'];
-
-/**
- * Values that should be styled with the nullish class (di-n).
- * These are special values that benefit from distinct styling
- * to visually distinguish them from regular code.
+ * Maps tag-name span classes to their wrapper class.
+ * - pl-ent (HTML entity tag like div, span) → di-ht (HTML tag)
+ * - pl-c1 (syntax constant like Box, Stack) → di-jt (JSX tag)
+ *
+ * When the element also has `di-jsx`, the wrapper is always `di-jt`.
  */
-const NULLISH_VALUES = ['undefined', 'null', '""', "''"];
+const TAG_NAME_CLASS_MAP = {
+  'pl-ent': 'di-ht',
+  'pl-c1': 'di-jt'
+};
 
 /**
  * Map of class → text values that should be reclassified to a different class.
@@ -27,14 +27,30 @@ const CLASS_RECLASSIFICATIONS = {
 };
 
 /**
- * Checks if an element has any of the tag name classes.
+ * Returns the wrapper class for a tag-name element, or undefined if not a tag name.
+ * If the element has `di-jsx`, always returns `di-jt` (JSX component tag).
  */
-function hasTagNameClass(element) {
+function getTagWrapperClass(element) {
   const className = element.properties?.className;
   if (!Array.isArray(className)) {
-    return false;
+    return undefined;
+  }
+  let baseWrapper;
+  let hasDiJsx = false;
+  for (const cls of className) {
+    if (typeof cls === 'string') {
+      if (TAG_NAME_CLASS_MAP[cls] && !baseWrapper) {
+        baseWrapper = TAG_NAME_CLASS_MAP[cls];
+      }
+      if (cls === 'di-jsx') {
+        hasDiJsx = true;
+      }
+    }
+  }
+  if (hasDiJsx) {
+    return 'di-jt';
   }
-  return className.some(c => typeof c === 'string' && TAG_NAME_CLASSES.includes(c));
+  return baseWrapper;
 }
 
 /**
@@ -106,7 +122,17 @@ function findClosingBracket(text) {
 }
 
 /**
- * Wraps HTML tag angle brackets into their associated tag name spans.
+ * Wraps HTML/JSX tag patterns in a wrapper span that groups the opening bracket,
+ * tag-name span, and closing bracket into one element.
+ *
+ * - HTML tags (pl-ent) get `<span class="di-ht">` (HTML tag)
+ * - JSX component tags (pl-c1 with di-jsx) get `<span class="di-jt">` (JSX tag)
+ *
+ * Expects the pattern: text(`<`) + span(tagName) + text(`>`)
+ * where `extendSyntaxTokens` has already normalized bracket spans to text nodes.
+ *
+ * The original `pl-*` spans are preserved intact inside the wrapper — no
+ * semantic information is destroyed.
  *
  * This function processes nodes iteratively, but when text is split during
  * enhancement, it re-inserts the remaining text back into the processing queue
@@ -130,11 +156,57 @@ function enhanceTagBrackets(children) {
         match,
         prefix
       } = endsWithOpenBracket(textNode.value);
-      if (match && hasTagNameClass(nextElement)) {
-        // Check if there's a closing bracket after the span
-        const afterSpan = queue[1];
-        const closingBracket = afterSpan && afterSpan.type === 'text' ? findClosingBracket(afterSpan.value) : null;
-        if (closingBracket) {
+      const wrapperClass = match ? getTagWrapperClass(nextElement) : undefined;
+      if (wrapperClass) {
+        // Scan forward past the tag name span to find the closing bracket text node.
+        // It may be immediately after (simple tags like <div>) or separated by
+        // attribute spans (e.g. <div className="x">).
+        // Stop scanning if we hit a text node containing '<' (new tag context).
+        let closingBracketIndex = -1;
+        let closingBracket = null;
+        for (let scanIdx = 1; scanIdx < queue.length; scanIdx += 1) {
+          const scanNode = queue[scanIdx];
+          if (scanNode.type === 'text') {
+            const scanText = scanNode.value;
+            closingBracket = findClosingBracket(scanText);
+            if (closingBracket) {
+              const matchEnd = closingBracket.position + closingBracket.suffix.length;
+              if (closingBracket.position === 0 || matchEnd === scanText.length) {
+                // > at the start or end of text is a tag-close token
+                closingBracketIndex = scanIdx;
+                break;
+              }
+              // The earliest > is in the middle of text — not a tag-close
+              // token. Check for a > at the end of the text instead.
+              closingBracket = null;
+              if (scanText.endsWith(' />')) {
+                closingBracket = {
+                  position: scanText.length - 3,
+                  suffix: ' />'
+                };
+              } else if (scanText.endsWith('/>')) {
+                closingBracket = {
+                  position: scanText.length - 2,
+                  suffix: '/>'
+                };
+              } else if (scanText.endsWith('>')) {
+                closingBracket = {
+                  position: scanText.length - 1,
+                  suffix: '>'
+                };
+              }
+              if (closingBracket) {
+                closingBracketIndex = scanIdx;
+                break;
+              }
+            }
+            // A '<' in text before any '>' means a new tag context — stop scanning
+            if (scanText.includes('<')) {
+              break;
+            }
+          }
+        }
+        if (closingBracket && closingBracketIndex !== -1) {
           // Add the text before the < (if any)
           const textBeforeBracket = textNode.value.slice(0, -prefix.length);
           if (textBeforeBracket) {
@@ -144,33 +216,42 @@ function enhanceTagBrackets(children) {
             });
           }
 
-          // Create enhanced span with brackets included
-          // Include any attributes/content between the tag name and closing bracket
-          const afterText = afterSpan.value;
-          const contentBeforeClose = afterText.slice(0, closingBracket.position);
-          const enhancedSpan = {
+          // Build the wrapper children: bracket text + tag name span + intermediate nodes + closing text
+          const closingTextNode = queue[closingBracketIndex];
+          const contentBeforeClose = closingTextNode.value.slice(0, closingBracket.position);
+          const wrapperChildren = [{
+            type: 'text',
+            value: prefix
+          }];
+
+          // Add the tag name span and any intermediate nodes (attributes, etc.)
+          for (let takeIdx = 0; takeIdx <= closingBracketIndex; takeIdx += 1) {
+            if (takeIdx === closingBracketIndex) {
+              // Last node is the text containing >; include content before + bracket
+              wrapperChildren.push({
+                type: 'text',
+                value: contentBeforeClose + closingBracket.suffix
+              });
+            } else {
+              wrapperChildren.push(queue[takeIdx]);
+            }
+          }
+          const wrapperSpan = {
             type: 'element',
             tagName: 'span',
             properties: {
-              ...nextElement.properties
+              className: [wrapperClass]
             },
-            children: [{
-              type: 'text',
-              value: prefix
-            }, ...nextElement.children, {
-              type: 'text',
-              value: contentBeforeClose + closingBracket.suffix
-            }]
+            children: wrapperChildren
           };
-          newChildren.push(enhancedSpan);
+          newChildren.push(wrapperSpan);
 
-          // Remove the span and the text with > from the queue
-          queue.shift(); // Remove the span
-          queue.shift(); // Remove the text with >
+          // Remove all consumed nodes from the queue
+          const textAfterBracket = closingTextNode.value.slice(closingBracket.position + closingBracket.suffix.length);
+          queue.splice(0, closingBracketIndex + 1);
 
           // If there's remaining text after the closing bracket, re-insert it at the front of the queue
           // so it can be processed for the next pattern (e.g., consecutive tags)
-          const textAfterBracket = afterText.slice(closingBracket.position + closingBracket.suffix.length);
           if (textAfterBracket) {
             queue.unshift({
               type: 'text',
@@ -188,17 +269,6 @@ function enhanceTagBrackets(children) {
   return newChildren;
 }
 
-/**
- * Gets the text content of an element's first text child.
- */
-function getFirstTextValue(element) {
-  const firstChild = element.children[0];
-  if (firstChild && firstChild.type === 'text') {
-    return firstChild.value;
-  }
-  return undefined;
-}
-
 /**
  * Reclassifies spans whose class + text content indicate a wrong token type.
  * For example, `<span class="pl-en">function</span>` is reclassified to
@@ -213,7 +283,7 @@ function reclassifyTokens(children) {
     if (!Array.isArray(className)) {
       continue;
     }
-    const text = getFirstTextValue(child);
+    const text = getShallowTextContent(child);
     if (!text) {
       continue;
     }
@@ -227,29 +297,45 @@ function reclassifyTokens(children) {
 }
 
 /**
- * Enhances nullish values (`undefined`, `null`, `""`, `''`) by adding the `di-n`
- * class to their containing span elements. This allows CSS to style these
- * values distinctly from regular code, improving readability.
+ * Reclassifies `pl-smi` and `pl-k` spans whose text is a built-in type keyword
+ * (e.g. `string`, `number`, `void`) to `pl-c1 di-bt`.
  *
- * Mirrors the behavior of base-ui's `rehypeInlineCode` plugin, but uses
- * CSS classes (from the prettylights/docs-infra extension system) instead
- * of inline styles.
+ * Only applies to TypeScript-family languages, matching the contract in
+ * `extendSyntaxTokens` which gates `di-bt` on `isTs`.
+ *
+ * Starry Night tokenizes standalone type keywords inconsistently when there is
+ * no surrounding type context: most (`string`, `number`, …) become `pl-smi`
+ * (identifier), while `void` becomes `pl-k` (keyword). In inline code this is
+ * the common case — e.g. `` `string` `` — so we reclassify them to match the
+ * output of `type x = string` (where starry-night produces `pl-c1`) and add
+ * `di-bt` for semantic styling.
+ *
+ * For `pl-k` tokens (like `void`), we only reclassify when the token is the
+ * sole child of the code element to avoid mis-highlighting the unary `void`
+ * operator in expressions like `void fn()`.
  */
-function enhanceNullishValues(children) {
-  for (const child of children) {
+function enhanceBuiltInTypes(children) {
+  for (let index = 0; index < children.length; index += 1) {
+    const child = children[index];
     if (child.type !== 'element' || child.tagName !== 'span') {
       continue;
     }
-    const text = getFirstTextValue(child);
-    if (text && NULLISH_VALUES.includes(text)) {
-      const className = child.properties?.className;
-      if (Array.isArray(className)) {
-        // Replace existing classes with di-n since nullish styling should take precedence
-        child.properties.className = ['di-n'];
-      } else {
-        child.properties = child.properties || {};
-        child.properties.className = ['di-n'];
-      }
+    const className = child.properties?.className;
+    if (!Array.isArray(className)) {
+      continue;
+    }
+    const smiIndex = className.indexOf('pl-smi');
+    // Only reclassify pl-k when it is the only child (standalone keyword),
+    // so the void *operator* in multi-token expressions is left alone.
+    const kIndex = smiIndex === -1 && children.length === 1 ? className.indexOf('pl-k') : -1;
+    const targetIndex = smiIndex !== -1 ? smiIndex : kIndex;
+    if (targetIndex === -1) {
+      continue;
+    }
+    const text = getShallowTextContent(child);
+    if (text && BUILT_IN_TYPES.has(text)) {
+      className[targetIndex] = 'pl-c1';
+      className.push('di-bt');
     }
   }
 }
@@ -257,26 +343,24 @@ function enhanceNullishValues(children) {
 /**
  * A rehype plugin that enhances inline code elements in three ways:
  *
- * 1. **Tag bracket wrapping**: Wraps HTML tag angle brackets into the
- *    syntax highlighting span, so `<div>` is styled as one unit.
+ * 1. **Tag bracket wrapping**: Wraps HTML/JSX tag patterns (opening bracket,
+ *    tag-name span, closing bracket) in a wrapper span. HTML tags (`pl-ent`)
+ *    get `<span class="di-ht">`, JSX component tags (`pl-c1`) get
+ *    `<span class="di-jt">`. The original `pl-*` spans are preserved
+ *    inside — no semantic information is destroyed.
  *
  * 2. **Token reclassification**: Corrects misidentified token classes,
  *    e.g., `function` marked as `pl-en` is changed to `pl-k` (keyword).
  *
- * 3. **Nullish value styling**: Adds the `di-n` class to spans containing
- *    `undefined`, `null`, `""`, or `''` for distinct visual treatment.
+ * 3. **Built-in type enhancement** (TypeScript only): Reclassifies standalone
+ *    type keywords (`string`, `number`, `void`, etc.) from `pl-smi`/`pl-k`
+ *    to `pl-c1 di-bt`, matching `extendSyntaxTokens` output in type context.
  *
  * Transforms patterns like:
  * `<code>&lt;<span class="pl-ent">div</span>&gt;</code>`
  *
  * Into:
- * `<code><span class="pl-ent">&lt;div&gt;</span></code>`
- *
- * And:
- * `<code><span class="pl-c1">undefined</span></code>`
- *
- * Into:
- * `<code><span class="di-n">undefined</span></code>`
+ * `<code><span class="di-ht">&lt;<span class="pl-ent">div</span>&gt;</span></code>`
  *
  * **Important**: This plugin should run after syntax highlighting plugins
  * (like transformHtmlCodeInline) as it modifies the structure
@@ -308,8 +392,10 @@ export default function enhanceCodeInline() {
       // Reclassify misidentified tokens (e.g., pl-en "function" → pl-k)
       reclassifyTokens(node.children);
 
-      // Enhance nullish values (adds di-n class for distinct styling)
-      enhanceNullishValues(node.children);
+      // Reclassify standalone built-in type keywords (TypeScript only)
+      if (getLanguageCapabilities(node).supportsTypes) {
+        enhanceBuiltInTypes(node.children);
+      }
     });
   };
 }

package/pipeline/enhanceCodeTypes/getLanguageCapabilities.d.mts

@@ -1,22 +1,6 @@
 import type { Element } from 'hast';
-/**
- * Language capabilities derived from the code element's `language-*` class.
- *
- * - `ts`/`typescript`: types ✓, JSX ✗, JS semantics ✓
- * - `tsx`: types ✓, JSX ✓, JS semantics ✓
- * - `js`/`javascript`: types ✗, JSX ✗, JS semantics ✓
- * - `jsx`: types ✗, JSX ✓, JS semantics ✓
- * - `css`/`scss`/`less`/`sass`: CSS semantics ✓
- * - no class / unknown: all ✗
- */
-export interface LanguageCapabilities {
-  /** Whether `type Name` and `const name: Name =` syntax is recognized. */
-  supportsTypes: boolean;
-  /** Whether JSX `<Component prop={}>` syntax is recognized. */
-  supportsJsx: boolean;
-  /** Which platform semantics apply: `'js'` for function calls / JS patterns, `'css'` for CSS patterns, or `undefined` for unknown languages. */
-  semantics?: 'js' | 'css';
-}
+import type { LanguageCapabilities } from "../parseSource/languageCapabilities.mjs";
+export type { LanguageCapabilities };
 /**
  * Detects language capabilities from a `<code>` element's class list.
  * Looks for a `language-*` class following standard markdown fenced-code conventions.

package/pipeline/enhanceCodeTypes/getLanguageCapabilities.mjs

@@ -1,16 +1,4 @@
 import { getClassName } from "./hastUtils.mjs";
-
-/**
- * Language capabilities derived from the code element's `language-*` class.
- *
- * - `ts`/`typescript`: types ✓, JSX ✗, JS semantics ✓
- * - `tsx`: types ✓, JSX ✓, JS semantics ✓
- * - `js`/`javascript`: types ✗, JSX ✗, JS semantics ✓
- * - `jsx`: types ✗, JSX ✓, JS semantics ✓
- * - `css`/`scss`/`less`/`sass`: CSS semantics ✓
- * - no class / unknown: all ✗
- */
-
 const BASE_CAPABILITIES = {
   supportsTypes: false,
   supportsJsx: false

package/pipeline/loaderUtils/parseImportsAndComments.mjs

@@ -876,26 +876,18 @@ function detectCssImport(sourceText, pos, cssResult, cssExternals, cssFilePath,
     // Parse the @import statement
     const importResult = parseCssImportStatement(sourceText, pos);
     if (importResult.modulePath && importResult.pathStart !== undefined && importResult.pathEnd !== undefined) {
-      // In CSS, imports are relative unless they have a protocol/hostname
-      // Examples of external: "http://...", "https://...", "//example.com/style.css"
-      // Examples of relative: "print.css", "./local.css", "../parent.css"
+      // In CSS, imports are relative unless they have a protocol, hostname,
+      // or are scoped npm packages (start with @scope/)
       const hasProtocol = /^https?:\/\//.test(importResult.modulePath);
       const hasHostname = /^\/\//.test(importResult.modulePath);
-      const isExternal = hasProtocol || hasHostname;
+      const isScopedPackage = /^@[^/]+\//.test(importResult.modulePath);
+      const isRelative = !hasProtocol && !hasHostname && !isScopedPackage;
       const position = {
         start: positionMapper(importResult.pathStart),
         end: positionMapper(importResult.pathEnd)
       };
-      if (isExternal) {
-        if (!cssExternals[importResult.modulePath]) {
-          cssExternals[importResult.modulePath] = {
-            names: [],
-            positions: []
-          };
-        }
-        cssExternals[importResult.modulePath].positions.push(position);
-      } else {
-        // Treat as relative import - normalize the path if it doesn't start with ./ or ../
+      if (isRelative) {
+        // Normalize bare filenames (e.g. "reset.css") to relative paths
         let normalizedPath = importResult.modulePath;
         if (!normalizedPath.startsWith('./') && !normalizedPath.startsWith('../')) {
           normalizedPath = `./${normalizedPath}`;
@@ -909,6 +901,14 @@ function detectCssImport(sourceText, pos, cssResult, cssExternals, cssFilePath,
           };
         }
         cssResult[importResult.modulePath].positions.push(position);
+      } else {
+        if (!cssExternals[importResult.modulePath]) {
+          cssExternals[importResult.modulePath] = {
+            names: [],
+            positions: []
+          };
+        }
+        cssExternals[importResult.modulePath].positions.push(position);
       }
     }
     return {

package/pipeline/loaderUtils/resolveModulePath.d.mts

@@ -1,15 +1,15 @@
 /**
  * Default file extensions for JavaScript/TypeScript modules that can be resolved
  */
-export declare const JAVASCRIPT_MODULE_EXTENSIONS: readonly [".ts", ".tsx", ".js", ".jsx", ".mdx", ".d.ts"];
+export declare const JAVASCRIPT_MODULE_EXTENSIONS: readonly ['.ts', '.tsx', '.js', '.jsx', '.mdx', '.d.ts'];
 /**
  * Extension priority for type-only imports - prioritize .d.ts first
  */
-export declare const TYPE_IMPORT_EXTENSIONS: readonly [".d.ts", ".ts", ".tsx", ".js", ".jsx", ".mdx"];
+export declare const TYPE_IMPORT_EXTENSIONS: readonly ['.d.ts', '.ts', '.tsx', '.js', '.jsx', '.mdx'];
 /**
  * Extension priority for value imports - standard priority with .d.ts last
  */
-export declare const VALUE_IMPORT_EXTENSIONS: readonly [".ts", ".tsx", ".js", ".jsx", ".mdx", ".d.ts"];
+export declare const VALUE_IMPORT_EXTENSIONS: readonly ['.ts', '.tsx', '.js', '.jsx', '.mdx', '.d.ts'];
 /**
  * Checks if a file path or import path represents a JavaScript/TypeScript module
  * @param path - The file path or import path to check

package/pipeline/parseSource/extendSyntaxTokens.d.mts

@@ -0,0 +1,15 @@
+import type { Root } from 'hast';
+/**
+ * TypeScript built-in type keywords that starry-night classifies as `pl-c1`.
+ * These are language primitives from the TypeScript specification.
+ */
+export declare const BUILT_IN_TYPES: Set<string>;
+/**
+ * Extends a syntax-highlighted HAST tree with additional `di-*` CSS classes
+ * for fine-grained styling control. All extensions are **additive** — existing
+ * `pl-*` classes from starry-night are never removed.
+ *
+ * @param tree - The HAST root node produced by starry-night's `highlight()`
+ * @param grammarScope - The grammar scope used for highlighting (e.g., 'source.tsx', 'source.css')
+ */
+export declare function extendSyntaxTokens(tree: Root, grammarScope: string): void;

package/pipeline/parseSource/extendSyntaxTokens.mjs

@@ -0,0 +1,422 @@
+import { getShallowTextContent } from "../loadServerTypes/hastTypeUtils.mjs";
+import { getLanguageCapabilitiesFromScope } from "./languageCapabilities.mjs";
+
+/**
+ * Classes that can represent CSS attribute selector names inside `[...]`.
+ * Current starry-night uses `pl-c1`, but a future fix may use `pl-e`.
+ */
+const CSS_ATTR_SELECTOR_CLASSES = new Set(['pl-c1', 'pl-e']);
+
+/**
+ * TypeScript built-in type keywords that starry-night classifies as `pl-c1`.
+ * These are language primitives from the TypeScript specification.
+ */
+export const BUILT_IN_TYPES = new Set(['string', 'number', 'boolean', 'void', 'never', 'symbol', 'object', 'any', 'unknown', 'bigint']);
+
+/**
+ * Checks whether a `pl-c1` token's text represents a numeric value.
+ *
+ * Since starry-night already classified the token as a constant (`pl-c1`),
+ * we only need to distinguish numbers from named constants like `Button` or `color`.
+ * A simple first-character check is sufficient: numbers start with a digit,
+ * optional `-` sign, or `.` followed by a digit.
+ *
+ * Matches: `42`, `3.14`, `-1`, `.5`, `0xFF`, `100px`, `50%`, `3em`
+ * Does not match: `color`, `red`, `Button`, `NaN`, `Infinity`
+ */
+function isNumericConstant(text) {
+  if (text.length === 0) {
+    return false;
+  }
+  const start = text[0] === '-' ? 1 : 0;
+  if (start >= text.length) {
+    return false;
+  }
+  const charCode = text.charCodeAt(start);
+
+  // Starts with a digit (0-9)
+  if (charCode >= 48 && charCode <= 57) {
+    return true;
+  }
+
+  // Starts with '.' followed by a digit
+  if (charCode === 46 && start + 1 < text.length) {
+    const nextCharCode = text.charCodeAt(start + 1);
+    return nextCharCode >= 48 && nextCharCode <= 57;
+  }
+  return false;
+}
+
+/**
+ * Gets the first CSS class from an element's className array.
+ */
+function getFirstClass(element) {
+  const className = element.properties?.className;
+  if (Array.isArray(className) && typeof className[0] === 'string') {
+    return className[0];
+  }
+  return undefined;
+}
+
+/**
+ * Adds a CSS class to an element's className array (additive, never removes existing classes).
+ */
+function addClass(element, cls) {
+  if (!element.properties) {
+    element.properties = {};
+  }
+  if (Array.isArray(element.properties.className)) {
+    element.properties.className.push(cls);
+  } else {
+    element.properties.className = [cls];
+  }
+}
+
+/**
+ * Replaces one CSS class with another in an element's className array.
+ */
+function replaceClass(element, oldCls, newCls) {
+  const className = element.properties?.className;
+  if (Array.isArray(className)) {
+    const idx = className.indexOf(oldCls);
+    if (idx !== -1) {
+      className[idx] = newCls;
+    }
+  }
+}
+
+/**
+ * Enhances `pl-c1` (constant) spans with more specific `di-*` classes
+ * based on the text content.
+ *
+ * Language-agnostic:
+ * - Numbers → `di-num`
+ * - Booleans (`true`, `false`) → `di-bool`
+ * - Nullish (`null`, `undefined`) → `di-n`
+ *
+ * JS/TS family only (`isJs`):
+ * - `this`, `super` → `di-this`
+ *
+ * TS family only (`isTs`):
+ * - Built-in type keywords (`string`, `number`, etc.) → `di-bt`
+ */
+function enhanceConstantSpan(element, isJs, isTs) {
+  const text = getShallowTextContent(element);
+  if (!text) {
+    return;
+  }
+  if (text === 'true' || text === 'false') {
+    addClass(element, 'di-bool');
+  } else if (text === 'null' || text === 'undefined') {
+    addClass(element, 'di-n');
+  } else if (isNumericConstant(text)) {
+    addClass(element, 'di-num');
+  } else if (isJs && (text === 'this' || text === 'super')) {
+    addClass(element, 'di-this');
+  } else if (isTs && BUILT_IN_TYPES.has(text)) {
+    addClass(element, 'di-bt');
+  }
+}
+
+/**
+ * Enhances `pl-s` (string) spans for empty string literals (`""`, `''`)
+ * by adding the `di-n` (nullish) class.
+ *
+ * Starry-night tokenizes an empty string as exactly two `pl-pds` quote-delimiter
+ * spans with no content between them:
+ * `<span class="pl-s"><span class="pl-pds">"</span><span class="pl-pds">"</span></span>`
+ * so we can detect it structurally without recursively serializing the text.
+ */
+function enhanceStringSpan(element) {
+  const {
+    children
+  } = element;
+  if (children.length !== 2) {
+    return;
+  }
+  const [open, close] = children;
+  if (open.type === 'element' && getFirstClass(open) === 'pl-pds' && close.type === 'element' && getFirstClass(close) === 'pl-pds') {
+    addClass(element, 'di-n');
+  }
+}
+
+/**
+ * Single-pass enhancement of a HAST children array. Processes each child exactly
+ * once, applying all per-element and sibling-context enhancements in one iteration.
+ * Recursively enhances nested elements.
+ *
+ * Per-element enhancements (applied to individual spans):
+ * - `pl-c1` → `di-num`, `di-bool`, `di-n`, `di-this`, `di-bt` via enhanceConstantSpan
+ * - `pl-s` → `di-n` for empty strings via enhanceStringSpan
+ *
+ * Sibling-context enhancements (depend on neighbor nodes or positional state):
+ * - CSS `&` nesting selector → wraps in `pl-ent` span
+ * - CSS `[attr]` → `di-da` on attribute name spans
+ * - CSS `property: value` → `di-cp` / `di-cv` based on colon position
+ * - HTML/JSX `<tag attr=value>` → `di-ak`, `di-ae`, `di-av`
+ * - JSX `<Component>` → `di-jsx` on component name spans
+ */
+function enhanceChildren(children, isCss, isHtmlJsx, isJs, isTs, isJsx) {
+  // CSS declaration state: tracks position relative to { } : ; [ ]
+  let cssInsideBlock = false;
+  let cssInsideBracket = false;
+  let cssAfterColon = false;
+
+  // HTML/JSX tag state: whether we're between < and >
+  let htmlInsideTag = false;
+
+  // Whether a span appeared between the last text node and the current position.
+  // Used to detect attribute context for = wrapping (replaces backward scanning).
+  let hasSpanSinceLastText = false;
+  for (let index = 0; index < children.length; index += 1) {
+    const child = children[index];
+
+    // ── Text nodes: state tracking and structural splits ──
+    if (child.type === 'text') {
+      const savedSpanFlag = hasSpanSinceLastText;
+      hasSpanSinceLastText = false;
+      const {
+        value
+      } = child;
+
+      // CSS: track { } [ ] : ; state and wrap & nesting selectors
+      if (isCss) {
+        const ampIndex = value.indexOf('&');
+        const trackEnd = ampIndex !== -1 ? ampIndex : value.length;
+        for (let ci = 0; ci < trackEnd; ci += 1) {
+          const char = value[ci];
+          if (char === '{') {
+            cssInsideBlock = true;
+            cssAfterColon = false;
+          } else if (char === '}') {
+            cssInsideBlock = false;
+            cssAfterColon = false;
+          } else if (char === '[') {
+            cssInsideBracket = true;
+          } else if (char === ']') {
+            cssInsideBracket = false;
+          } else if (char === ':' && cssInsideBlock && !cssInsideBracket) {
+            cssAfterColon = true;
+          } else if (char === ';') {
+            cssAfterColon = false;
+          }
+        }
+
+        // Wrap bare & in a pl-ent span to match GitHub rendering of CSS nesting selector
+        if (ampIndex !== -1) {
+          const before = value.slice(0, ampIndex);
+          const after = value.slice(ampIndex + 1);
+          const ampSpan = {
+            type: 'element',
+            tagName: 'span',
+            properties: {
+              className: ['pl-ent']
+            },
+            children: [{
+              type: 'text',
+              value: '&'
+            }]
+          };
+          const newNodes = [];
+          if (before) {
+            newNodes.push({
+              type: 'text',
+              value: before
+            });
+          }
+          newNodes.push(ampSpan);
+          if (after) {
+            newNodes.push({
+              type: 'text',
+              value: after
+            });
+          }
+          children.splice(index, 1, ...newNodes);
+          // Advance past the inserted span to process remaining text for more & chars
+          index += newNodes.indexOf(ampSpan);
+          continue;
+        }
+      }
+
+      // HTML/JSX: track < > tag boundaries and wrap bare = in attribute context
+      if (isHtmlJsx) {
+        for (let ci = 0; ci < value.length; ci += 1) {
+          if (value[ci] === '<') {
+            htmlInsideTag = true;
+          } else if (value[ci] === '>') {
+            htmlInsideTag = false;
+          }
+        }
+        if (htmlInsideTag && savedSpanFlag) {
+          const equalsIndex = value.indexOf('=');
+          if (equalsIndex !== -1) {
+            // Tag the following pl-s span as attribute value
+            const nextChild = children[index + 1];
+            if (nextChild && nextChild.type === 'element' && nextChild.tagName === 'span' && getFirstClass(nextChild) === 'pl-s') {
+              addClass(nextChild, 'di-av');
+            }
+
+            // Split text around = and wrap in di-ae span
+            const before = value.slice(0, equalsIndex);
+            const after = value.slice(equalsIndex + 1);
+            const equalsSpan = {
+              type: 'element',
+              tagName: 'span',
+              properties: {
+                className: ['di-ae']
+              },
+              children: [{
+                type: 'text',
+                value: '='
+              }]
+            };
+            const newNodes = [];
+            if (before) {
+              newNodes.push({
+                type: 'text',
+                value: before
+              });
+            }
+            newNodes.push(equalsSpan);
+            if (after) {
+              newNodes.push({
+                type: 'text',
+                value: after
+              });
+            }
+            children.splice(index, 1, ...newNodes);
+            index += newNodes.length - 1;
+            hasSpanSinceLastText = newNodes[newNodes.length - 1].type === 'element';
+          }
+        }
+      }
+      continue;
+    }
+
+    // ── Non-element nodes: skip ──
+    if (child.type !== 'element') {
+      continue;
+    }
+
+    // Recurse into nested elements (frames, lines, nested spans)
+    if (child.children.length > 0) {
+      enhanceChildren(child.children, isCss, isHtmlJsx, isJs, isTs, isJsx);
+    }
+    if (child.tagName !== 'span') {
+      continue;
+    }
+    const hadPrecedingSpan = hasSpanSinceLastText;
+    hasSpanSinceLastText = true;
+    const firstClass = getFirstClass(child);
+
+    // ── Per-element enhancements (all grammars) ──
+    if (firstClass === 'pl-c1') {
+      enhanceConstantSpan(child, isJs, isTs);
+    } else if (firstClass === 'pl-s') {
+      enhanceStringSpan(child);
+    }
+
+    // ── CSS-specific enhancements ──
+    if (isCss) {
+      // CSS attribute selector name: span preceded by text ending with [
+      if (firstClass && CSS_ATTR_SELECTOR_CLASSES.has(firstClass) && index > 0) {
+        const prev = children[index - 1];
+        if (prev.type === 'text' && prev.value.endsWith('[')) {
+          addClass(child, 'di-da');
+        }
+      }
+
+      // CSS property name / value classification based on : position
+      if (firstClass === 'pl-c1' && cssInsideBlock && !cssInsideBracket) {
+        addClass(child, cssAfterColon ? 'di-cv' : 'di-cp');
+      }
+    }
+
+    // ── HTML/JSX attribute enhancements ──
+    if (isHtmlJsx && htmlInsideTag) {
+      // Attribute key: pl-e inside a tag
+      if (firstClass === 'pl-e') {
+        addClass(child, 'di-ak');
+      }
+
+      // Attribute equals: pl-k span containing =
+      if (firstClass === 'pl-k' && getShallowTextContent(child) === '=' && hadPrecedingSpan) {
+        addClass(child, 'di-ae');
+        const nextChild = children[index + 1];
+        if (nextChild && nextChild.type === 'element' && nextChild.tagName === 'span' && getFirstClass(nextChild) === 'pl-s') {
+          addClass(nextChild, 'di-av');
+        }
+      }
+    }
+
+    // ── JSX component name detection ──
+    if (isJsx && index > 0) {
+      const prev = children[index - 1];
+
+      // Opening/closing: text ending in < or </ followed by pl-c1
+      if (firstClass === 'pl-c1' && prev.type === 'text') {
+        if (prev.value.endsWith('<') || prev.value.endsWith('</')) {
+          addClass(child, 'di-jsx');
+        }
+      }
+
+      // Standalone closing: pl-k("</") followed by pl-smi or pl-c1
+      // Normalize the token shape to match the text-bracket pattern:
+      // - pl-smi JSX component (PascalCase) → pl-c1 + di-jsx
+      // - pl-smi HTML element (lowercase) → pl-ent
+      // - Remove pl-k from the adjacent bracket spans
+      if ((firstClass === 'pl-smi' || firstClass === 'pl-c1') && prev.type === 'element' && prev.tagName === 'span' && getFirstClass(prev) === 'pl-k' && getShallowTextContent(prev) === '</') {
+        // Find the closing bracket span: pl-k(">")
+        const closeBracket = children[index + 1];
+        const hasCloseBracket = closeBracket && closeBracket.type === 'element' && closeBracket.tagName === 'span' && getFirstClass(closeBracket) === 'pl-k' && getShallowTextContent(closeBracket) === '>';
+        if (firstClass === 'pl-c1') {
+          addClass(child, 'di-jsx');
+        } else {
+          const tagText = getShallowTextContent(child);
+          const isComponent = tagText && tagText[0] === tagText[0].toUpperCase() && tagText[0] !== tagText[0].toLowerCase();
+          if (isComponent) {
+            // JSX component: pl-smi → pl-c1 + di-jsx
+            replaceClass(child, 'pl-smi', 'pl-c1');
+            addClass(child, 'di-jsx');
+          } else {
+            // HTML element: pl-smi → pl-ent
+            replaceClass(child, 'pl-smi', 'pl-ent');
+          }
+        }
+
+        // Replace bracket spans with text nodes to match the text-bracket pattern.
+        // This allows enhanceCodeInline to handle both patterns uniformly.
+        const prevText = getShallowTextContent(prev) ?? '</';
+        children[index - 1] = {
+          type: 'text',
+          value: prevText
+        };
+        if (hasCloseBracket) {
+          const closeText = getShallowTextContent(closeBracket) ?? '>';
+          children[index + 1] = {
+            type: 'text',
+            value: closeText
+          };
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Extends a syntax-highlighted HAST tree with additional `di-*` CSS classes
+ * for fine-grained styling control. All extensions are **additive** — existing
+ * `pl-*` classes from starry-night are never removed.
+ *
+ * @param tree - The HAST root node produced by starry-night's `highlight()`
+ * @param grammarScope - The grammar scope used for highlighting (e.g., 'source.tsx', 'source.css')
+ */
+export function extendSyntaxTokens(tree, grammarScope) {
+  const caps = getLanguageCapabilitiesFromScope(grammarScope);
+  const isCss = caps.semantics === 'css';
+  const isHtmlJsx = caps.supportsJsx || grammarScope === 'text.html.basic';
+  const isJs = caps.semantics === 'js';
+  const isTs = caps.supportsTypes;
+  const isJsx = caps.supportsJsx;
+  enhanceChildren(tree.children, isCss, isHtmlJsx, isJs, isTs, isJsx);
+}

package/pipeline/parseSource/languageCapabilities.d.mts

@@ -0,0 +1,25 @@
+/**
+ * Language capabilities derived from a grammar scope or language class.
+ *
+ * Shared by both `extendSyntaxTokens` (which receives grammar scopes like
+ * `'source.tsx'`) and `enhanceCodeTypes` (which reads `language-*` CSS classes).
+ */
+export interface LanguageCapabilities {
+  /** Whether `type Name` and `const name: Name =` syntax is recognized. */
+  supportsTypes: boolean;
+  /** Whether JSX `<Component prop={}>` syntax is recognized. */
+  supportsJsx: boolean;
+  /**
+   * Which platform semantics apply: `'js'` for function calls / JS patterns,
+   * `'css'` for CSS patterns, or `undefined` for unknown languages.
+   */
+  semantics?: 'js' | 'css';
+}
+/**
+ * Resolves language capabilities from a starry-night grammar scope string.
+ *
+ * Note: `.jsx` files map to `source.tsx` via the extension map, so there is
+ * no separate `source.jsx` scope. MDX is treated as JS+TS+JSX because it
+ * embeds TypeScript JSX.
+ */
+export declare function getLanguageCapabilitiesFromScope(grammarScope: string): LanguageCapabilities;

package/pipeline/parseSource/languageCapabilities.mjs

@@ -0,0 +1,55 @@
+/**
+ * Language capabilities derived from a grammar scope or language class.
+ *
+ * Shared by both `extendSyntaxTokens` (which receives grammar scopes like
+ * `'source.tsx'`) and `enhanceCodeTypes` (which reads `language-*` CSS classes).
+ */
+
+const BASE_CAPABILITIES = {
+  supportsTypes: false,
+  supportsJsx: false
+};
+
+/**
+ * Resolves language capabilities from a starry-night grammar scope string.
+ *
+ * Note: `.jsx` files map to `source.tsx` via the extension map, so there is
+ * no separate `source.jsx` scope. MDX is treated as JS+TS+JSX because it
+ * embeds TypeScript JSX.
+ */
+export function getLanguageCapabilitiesFromScope(grammarScope) {
+  switch (grammarScope) {
+    case 'source.js':
+      return {
+        supportsTypes: false,
+        supportsJsx: false,
+        semantics: 'js'
+      };
+    case 'source.ts':
+      return {
+        supportsTypes: true,
+        supportsJsx: false,
+        semantics: 'js'
+      };
+    case 'source.tsx':
+      return {
+        supportsTypes: true,
+        supportsJsx: true,
+        semantics: 'js'
+      };
+    case 'source.mdx':
+      return {
+        supportsTypes: true,
+        supportsJsx: true,
+        semantics: 'js'
+      };
+    case 'source.css':
+      return {
+        supportsTypes: false,
+        supportsJsx: false,
+        semantics: 'css'
+      };
+    default:
+      return BASE_CAPABILITIES;
+  }
+}

package/pipeline/parseSource/parseSource.mjs

@@ -1,6 +1,7 @@
 import { createStarryNight } from '@wooorm/starry-night';
 import { grammars, extensionMap, getGrammarFromLanguage } from "./grammars.mjs";
 import { starryNightGutter } from "./addLineGutters.mjs";
+import { extendSyntaxTokens } from "./extendSyntaxTokens.mjs";
 const STARRY_NIGHT_KEY = '__docs_infra_starry_night_instance__';
 
 /**
@@ -39,6 +40,7 @@ export const parseSource = (source, fileName, language) => {
     };
   }
   const highlighted = starryNight.highlight(source, grammarScope);
+  extendSyntaxTokens(highlighted, grammarScope); // mutates the tree to add di-* classes
   const sourceLines = source.split(/\r?\n|\r/);
   starryNightGutter(highlighted, sourceLines); // mutates the tree to add line gutters
 

package/pipeline/transformHtmlCodeInline/transformHtmlCodeInline.mjs

@@ -1,6 +1,7 @@
 import { createStarryNight } from '@wooorm/starry-night';
 import { visit } from 'unist-util-visit';
 import { grammars, extensionMap } from "../parseSource/grammars.mjs";
+import { extendSyntaxTokens } from "../parseSource/extendSyntaxTokens.mjs";
 import { removePrefixFromHighlightedNodes } from "./removePrefixFromHighlightedNodes.mjs";
 const STARRY_NIGHT_KEY = '__docs_infra_starry_night_instance__';
 
@@ -114,6 +115,7 @@ export default function transformHtmlCodeInline(options = {}) {
 
       // Apply syntax highlighting
       const highlighted = starryNight.highlight(sourceToHighlight, extensionMap[fileType]);
+      extendSyntaxTokens(highlighted, extensionMap[fileType]);
 
       // Replace the code element's children with the highlighted nodes
       if (highlighted.type === 'root' && highlighted.children) {

package/useCopier/index.d.mts

@@ -9,7 +9,7 @@ export type UseCopierOpts = {
   timeout?: number;
 };
 export declare function useCopier(contents: (() => string | undefined) | string, opts?: UseCopierOpts): {
-  copy: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<void>;
+  copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
   recentlySuccessful: boolean;
 };
 export {};

package/useDemo/useDemo.d.mts

@@ -49,31 +49,31 @@ export declare function useDemo<T extends {} = {}>(contentProps: ContentProps<T>
   variants: string[];
   selectedVariant: string;
   selectVariant: (variant: string | null) => void;
-  files: {
+  files: Array<{
     name: string;
-    slug?: string | undefined;
+    slug?: string;
     component: React.ReactNode;
-  }[];
+  }>;
   selectedFile: React.ReactNode;
   selectedFileLines: number;
   selectedFileName: string | undefined;
   selectFileName: (fileName: string) => void;
-  allFilesSlugs: {
+  allFilesSlugs: Array<{
     fileName: string;
     slug: string;
     variantName: string;
-  }[];
+  }>;
   expanded: boolean;
   expand: () => void;
   setExpanded: (expanded: boolean) => void;
-  copy: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => Promise<void>;
+  copy: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void>;
   availableTransforms: string[];
   selectedTransform: string | null | undefined;
   selectTransform: (transformName: string | null) => void;
-  setSource?: ((source: string) => void) | undefined;
+  setSource?: (source: string) => void;
   userProps: T & {
-    name?: string | undefined;
-    slug?: string | undefined;
+    name?: string;
+    slug?: string;
   };
   component: string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | Iterable<React.ReactNode> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | React.ReactPortal | null | undefined> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
   ref: React.RefObject<HTMLDivElement | null>;

package/useSearch/useSearch.d.mts

@@ -3,27 +3,27 @@ import type { UseSearchOptions, UseSearchResult } from "./types.mjs";
  * Orama schema definition for our search document
  */
 declare const searchSchema: {
-  readonly type: "string";
-  readonly group: "string";
-  readonly title: "string";
-  readonly description: "string";
-  readonly slug: "string";
-  readonly sectionTitle: "string";
-  readonly prefix: "string";
-  readonly path: "string";
-  readonly keywords: "string";
-  readonly page: "string";
-  readonly pageKeywords: "string";
-  readonly sections: "string";
-  readonly subsections: "string";
-  readonly part: "string";
-  readonly export: "string";
-  readonly types: "string";
-  readonly props: "string";
-  readonly dataAttributes: "string";
-  readonly cssVariables: "string";
-  readonly section: "string";
-  readonly subsection: "string";
+  readonly type: 'string';
+  readonly group: 'string';
+  readonly title: 'string';
+  readonly description: 'string';
+  readonly slug: 'string';
+  readonly sectionTitle: 'string';
+  readonly prefix: 'string';
+  readonly path: 'string';
+  readonly keywords: 'string';
+  readonly page: 'string';
+  readonly pageKeywords: 'string';
+  readonly sections: 'string';
+  readonly subsections: 'string';
+  readonly part: 'string';
+  readonly export: 'string';
+  readonly types: 'string';
+  readonly props: 'string';
+  readonly dataAttributes: 'string';
+  readonly cssVariables: 'string';
+  readonly section: 'string';
+  readonly subsection: 'string';
 };
 type SearchSchema = typeof searchSchema;
 export declare const defaultSearchBoost: {