@qualcomm-ui/mdx-vite 2.9.0 → 2.10.0

package/dist/cli.js

@@ -520,9 +520,9 @@ var require_help = __commonJS({
        * @param {Help} helper
        * @returns string[]
        */
-      formatItemList(heading2, items, helper) {
+      formatItemList(heading, items, helper) {
         if (items.length === 0) return [];
-        return [helper.styleTitle(heading2), ...items, ""];
+        return [helper.styleTitle(heading), ...items, ""];
       }
       /**
        * Group items by their help group heading.
@@ -1002,8 +1002,8 @@ var require_option = __commonJS({
        * @param {string} heading
        * @return {Option}
        */
-      helpGroup(heading2) {
-        this.helpGroupHeading = heading2;
+      helpGroup(heading) {
+        this.helpGroupHeading = heading;
         return this;
       }
       /**
@@ -3099,9 +3099,9 @@ Expecting one of '${allowedValues.join("', '")}'`);
        * @param {string} [heading]
        * @return {Command | string}
        */
-      helpGroup(heading2) {
-        if (heading2 === void 0) return this._helpGroupHeading ?? "";
-        this._helpGroupHeading = heading2;
+      helpGroup(heading) {
+        if (heading === void 0) return this._helpGroupHeading ?? "";
+        this._helpGroupHeading = heading;
         return this;
       }
       /**
@@ -3117,9 +3117,9 @@ Expecting one of '${allowedValues.join("', '")}'`);
        * @param {string} [heading]
        * @returns {Command | string}
        */
-      commandsGroup(heading2) {
-        if (heading2 === void 0) return this._defaultCommandGroup ?? "";
-        this._defaultCommandGroup = heading2;
+      commandsGroup(heading) {
+        if (heading === void 0) return this._defaultCommandGroup ?? "";
+        this._defaultCommandGroup = heading;
         return this;
       }
       /**
@@ -3135,9 +3135,9 @@ Expecting one of '${allowedValues.join("', '")}'`);
        * @param {string} [heading]
        * @returns {Command | string}
        */
-      optionsGroup(heading2) {
-        if (heading2 === void 0) return this._defaultOptionGroup ?? "";
-        this._defaultOptionGroup = heading2;
+      optionsGroup(heading) {
+        if (heading === void 0) return this._defaultOptionGroup ?? "";
+        this._defaultOptionGroup = heading;
         return this;
       }
       /**
@@ -3552,7 +3552,8 @@ var typeDocPropsSchema = implement().with({
 var knowledgeExtraFileSchema = implement().with({
   contents: z2.string(),
   id: z2.string(),
-  title: z2.string()
+  processAsMdx: z2.boolean().optional(),
+  title: z2.string().optional()
 });
 var knowledgeExportsSchema = implement().with({
   enabled: z2.boolean().optional(),
@@ -3880,7 +3881,7 @@ var DocPropsIndexer = class {
   }
   assembleProp(prop, id) {
     const name = prop.name;
-    const heading2 = {
+    const heading = {
       headingLevel: 4,
       id,
       tagName: "a",
@@ -3888,7 +3889,7 @@ var DocPropsIndexer = class {
     };
     const comment = prop.comment;
     if (!comment) {
-      return { content: [], heading: heading2, richContent: [] };
+      return { content: [], heading, richContent: [] };
     }
     const content = {
       tagName: "p",
@@ -3896,7 +3897,7 @@ var DocPropsIndexer = class {
         comment.summary.map((entry) => entry.text.replaceAll("\n", " ")).join("")
       ]
     };
-    return { content: [content], heading: heading2, richContent: [] };
+    return { content: [content], heading, richContent: [] };
   }
 };
 
@@ -4437,8 +4438,8 @@ var MarkdownIndexer = class {
     this.resetSection();
     this.headingLevels = headingLevels;
   }
-  appendTocItem(heading2) {
-    this._toc.push(heading2);
+  appendTocItem(heading) {
+    this._toc.push(heading);
   }
   warn(...data) {
     if (process.env.DEBUG) {
@@ -4473,11 +4474,11 @@ var MarkdownIndexer = class {
         this.sections.push(clone(this.currentSection));
         this.resetSection();
       }
-      const heading2 = this.parseHeading(element);
+      const heading = this.parseHeading(element);
       if (!isRootHeading) {
-        this.appendTocItem(heading2);
+        this.appendTocItem(heading);
       }
-      this.currentSection.heading = heading2;
+      this.currentSection.heading = heading;
       return;
     }
     this.currentSection.richContent.push(element);
@@ -4859,7 +4860,7 @@ function getRemixFlatRoutesSegments(name, index, paramPrefixChar = "$") {
   let routeSegments = [];
   let i = 0;
   let routeSegment = "";
-  let state2 = "START";
+  let state = "START";
   let subState = "NORMAL";
   let hasPlus = false;
   if (name.endsWith("_layout")) {
@@ -4886,7 +4887,7 @@ function getRemixFlatRoutesSegments(name, index, paramPrefixChar = "$") {
   };
   while (i < name.length) {
     const char = name[i];
-    switch (state2) {
+    switch (state) {
       case "START":
         if (routeSegment.includes(paramPrefixChar) && !(routeSegment.startsWith(paramPrefixChar) || routeSegment.startsWith(`(${paramPrefixChar}`))) {
           throw new Error(
@@ -4900,12 +4901,12 @@ function getRemixFlatRoutesSegments(name, index, paramPrefixChar = "$") {
         }
         pushRouteSegment(routeSegment);
         routeSegment = "";
-        state2 = "PATH";
+        state = "PATH";
         continue;
       // restart without advancing index
       case "PATH":
         if (isPathSeparator(char) && subState === "NORMAL") {
-          state2 = "START";
+          state = "START";
           break;
         } else if (char === "[") {
           subState = "ESCAPE";
@@ -5397,7 +5398,7 @@ var FilesApi = class {
       if (status.status === "completed" || status.status === "failed") {
         return status;
       }
-      await new Promise((resolve9) => setTimeout(resolve9, intervalMs));
+      await new Promise((resolve8) => setTimeout(resolve8, intervalMs));
     }
     throw new Error(`File processing timed out after ${maxAttempts} attempts`);
   }
@@ -5657,296 +5658,19 @@ import {
   stat,
   writeFile as writeFile3
 } from "node:fs/promises";
-import { basename, dirname, extname, join as join4, relative as relative2, resolve as resolve5 } from "node:path";
-import remarkFrontmatter3 from "remark-frontmatter";
+import { basename, dirname, extname, join as join3, relative as relative2, resolve as resolve4 } from "node:path";
+import remarkFrontmatter2 from "remark-frontmatter";
 import remarkMdx3 from "remark-mdx";
 import remarkParse4 from "remark-parse";
 import remarkParseFrontmatter2 from "remark-parse-frontmatter";
 import remarkStringify3 from "remark-stringify";
 import { unified as unified4 } from "unified";
-import { visit as visit10 } from "unist-util-visit";
-import { kebabCase } from "@qualcomm-ui/utils/change-case";
-
-// src/docs-plugin/docs-plugin.ts
-import chalk3 from "chalk";
-import chokidar from "chokidar";
-import { glob as glob2 } from "glob";
-import { readFileSync as readFileSync2 } from "node:fs";
-import { join as join2, resolve as resolve3 } from "node:path";
-import prettyMilliseconds from "pretty-ms";
-var isDev = process.env.NODE_ENV === "development";
-var VIRTUAL_MODULE_ID = "\0@qualcomm-ui/mdx-vite-plugin";
-var PluginState = class {
-  buildCount = 0;
-  config = null;
-  configFilePath = "";
-  docPropsFilePath = "";
-  exports = { basePath: "", enabled: false, pages: [] };
-  indexer;
-  configLoader = null;
-  knowledgeConfig = void 0;
-  routesDir;
-  servers = [];
-  timeout = void 0;
-  exportsTimeout = void 0;
-  watching = false;
-  cwd;
-  init(cwd2) {
-    this.cwd = cwd2;
-  }
-  getCwd() {
-    return this.cwd;
-  }
-  get docPropsDirectory() {
-    if (!this.docPropsFilePath) {
-      return "";
-    }
-    return this.docPropsFilePath.substring(
-      0,
-      this.docPropsFilePath.lastIndexOf("/")
-    );
-  }
-  get siteData() {
-    const { filePath: _filePath, ...config2 } = this.config ?? {};
-    return {
-      config: config2,
-      exports: this.exports,
-      navItems: state.indexer.navItems,
-      pageDocProps: state.indexer.pageDocProps,
-      pageMap: state.indexer.pageMap,
-      searchIndex: state.indexer.searchIndex
-    };
-  }
-  resolveDocProps() {
-    if (!this.docPropsFilePath) {
-      return {};
-    }
-    try {
-      return JSON.parse(readFileSync2(this.docPropsFilePath, "utf-8"))?.props;
-    } catch (e) {
-      console.debug(
-        "Invalid doc props file. Unable to parse JSON. Please check the file"
-      );
-      return {};
-    }
-  }
-  createIndexer(config2) {
-    this.config = config2;
-    this.configFilePath = config2.filePath;
-    this.docPropsFilePath = config2.typeDocProps ? fixPath(resolve3(this.cwd, config2.typeDocProps)) : "";
-    this.routesDir = fixPath(resolve3(config2.appDirectory, config2.pageDirectory));
-    this.knowledgeConfig = config2.knowledge;
-    this.indexer = new SearchIndexer({
-      ...config2,
-      srcDir: fixPath(resolve3(this.cwd, config2.appDirectory)),
-      typeDocProps: this.resolveDocProps()
-    });
-    const exportsConfig = config2.knowledge?.global?.exports;
-    const exportsEnabled = exportsConfig?.enabled ?? false;
-    const exportsPath = exportsConfig?.staticPath ?? "exports/md";
-    this.exports = {
-      basePath: exportsEnabled ? `/${exportsPath}` : "",
-      enabled: exportsEnabled,
-      pages: []
-    };
-  }
-  buildIndex(shouldLog) {
-    const files = glob2.sync(
-      [`${this.routesDir}/**/*.mdx`, `${this.routesDir}/**/*.tsx`],
-      {
-        absolute: true,
-        cwd: this.cwd
-      }
-    );
-    if (!files.length) {
-      return [];
-    }
-    const startTime = Date.now();
-    const compiledMdxFiles = this.indexer.buildIndex(files, shouldLog);
-    if (isDev && shouldLog) {
-      console.debug(
-        `${chalk3.magenta.bold(`@qualcomm-ui/mdx-vite/docs-plugin:`)} Compiled search index in: ${chalk3.blueBright.bold(prettyMilliseconds(Date.now() - startTime))}${state.indexer.cachedFileCount ? chalk3.greenBright.bold(` (${state.indexer.cachedFileCount}/${state.indexer.mdxFileCount} files cached)`) : ""}`
-      );
-    }
-    return compiledMdxFiles;
-  }
-  /**
-   * When the user adds or removes mdx files, we re-index the site. This function
-   * handles module invalidation so that virtual file imports are refreshed as
-   * expected by the consumer's dev server.
-   */
-  sendUpdate() {
-    for (const server of this.servers) {
-      const virtualModule = server.moduleGraph.getModuleById(VIRTUAL_MODULE_ID);
-      if (virtualModule) {
-        server.moduleGraph.invalidateModule(virtualModule);
-        server.reloadModule(virtualModule);
-      }
-    }
-  }
-  handleChange(opts = {}) {
-    clearTimeout(this.timeout);
-    this.timeout = setTimeout(() => {
-      this.buildIndex(true);
-      this.sendUpdate();
-      opts?.onComplete?.();
-    }, 300);
-  }
-  initWatchers(configFile) {
-    if (this.watching) {
-      return;
-    }
-    this.initConfigWatcher(configFile);
-    this.watching = true;
-  }
-  initConfigWatcher(configFile) {
-    const paths = [this.configFilePath];
-    if (this.docPropsFilePath) {
-      paths.push(this.docPropsFilePath);
-    }
-    chokidar.watch(paths, {
-      cwd: this.cwd
-    }).on("change", () => {
-      console.debug(`qui-docs config changed, reloading plugin`);
-      this.configLoader = new ConfigLoader({ configFile });
-      const resolvedConfig = this.configLoader.loadConfig();
-      this.configFilePath = resolvedConfig.filePath;
-      this.createIndexer(resolvedConfig);
-      this.handleChange({
-        onComplete: () => {
-          this.servers.forEach(
-            (server) => server.ws.send({ type: "full-reload" })
-          );
-        }
-      });
-    });
-  }
-  async generateExports(publicDir) {
-    if (!this.exports.enabled || !this.knowledgeConfig?.global) {
-      return;
-    }
-    const globalConfig = this.knowledgeConfig.global;
-    const exportsConfig = globalConfig.exports ?? {};
-    const exportsPath = exportsConfig.staticPath ?? "exports/md";
-    const outputPath = join2(publicDir, exportsPath);
-    const startTime = Date.now();
-    const pageIds = await generate({
-      baseUrl: globalConfig.baseUrl,
-      clean: true,
-      docPropsPath: this.docPropsFilePath || void 0,
-      exclude: exportsConfig.exclude ?? globalConfig.exclude,
-      extraFiles: exportsConfig.extraFiles ?? globalConfig.extraFiles,
-      metadata: exportsConfig.metadata ?? globalConfig.metadata,
-      outputMode: "per-page",
-      outputPath,
-      pageTitlePrefix: exportsConfig.pageTitlePrefix ?? globalConfig.pageTitlePrefix,
-      routeDir: this.routesDir
-    });
-    this.exports.pages = pageIds;
-    console.debug(
-      `${chalk3.magenta.bold(`@qualcomm-ui/mdx-vite/docs-plugin:`)} Generated Markdown exports in: ${chalk3.blueBright.bold(prettyMilliseconds(Date.now() - startTime))}`
-    );
-  }
-  debouncedGenerateExports(publicDir) {
-    if (!this.exports.enabled) {
-      return;
-    }
-    clearTimeout(this.exportsTimeout);
-    this.exportsTimeout = setTimeout(() => {
-      void this.generateExports(publicDir);
-    }, 500);
-  }
-};
-var state = new PluginState();
-
-// src/docs-plugin/mdx-plugins.ts
-import rehypeShiki from "@shikijs/rehype";
-import {
-  transformerNotationDiff,
-  transformerNotationErrorLevel,
-  transformerNotationFocus,
-  transformerNotationHighlight,
-  transformerNotationWordHighlight,
-  transformerRemoveNotationEscape,
-  transformerRenderIndentGuides
-} from "@shikijs/transformers";
-import { merge } from "lodash-es";
-import { quiCustomDarkTheme } from "@qualcomm-ui/mdx-common";
-
-// src/exports.ts
-import rehypeMdxCodeProps from "rehype-mdx-code-props";
-import remarkFrontmatter2 from "remark-frontmatter";
-import remarkGfm2 from "remark-gfm";
-import remarkMdxFrontmatter from "remark-mdx-frontmatter";
-
-// src/docs-plugin/rehype/rehype-sectionize.ts
-import { heading } from "hast-util-heading";
-import { headingRank as headingRank2 } from "hast-util-heading-rank";
-
-// src/docs-plugin/remark/remark-code-tabs.ts
 import { visit as visit5 } from "unist-util-visit";
-
-// src/docs-plugin/remark/remark-frontmatter-description.ts
-import { visit as visit6 } from "unist-util-visit";
-
-// src/docs-plugin/remark/remark-frontmatter-title.ts
-import { visit as visit7 } from "unist-util-visit";
-
-// src/docs-plugin/remark/remark-self-link-headings.ts
-import { toString as toString2 } from "mdast-util-to-string";
-import { visit as visit8 } from "unist-util-visit";
-var emptyOptions2 = {};
-function remarkSelfLinkHeadings(baseUrl = "", options) {
-  if (!baseUrl) {
-    return () => {
-    };
-  }
-  return () => {
-    const settings = options || emptyOptions2;
-    const prefix = settings.prefix || "";
-    const allowedLevels = new Set(settings.allowedLevels || [2, 3, 4]);
-    const seenIds = /* @__PURE__ */ new Map();
-    function createSlug(text) {
-      const cleaned = text.replace(/[<>]/g, "").replace(/[^\w\s-]/g, "").trim();
-      let slug;
-      if (cleaned.includes(" ")) {
-        slug = cleaned.toLowerCase().replace(/\s+/g, "-").replace(/^-+|-+$/g, "");
-      } else if ((cleaned.match(/[A-Z]/g) || []).length >= 2) {
-        slug = cleaned.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").toLowerCase();
-      } else {
-        slug = cleaned.toLowerCase();
-      }
-      const count = seenIds.get(slug) || 0;
-      seenIds.set(slug, count + 1);
-      return count > 0 ? `${slug}-${count}` : slug;
-    }
-    return (tree) => {
-      seenIds.clear();
-      visit8(tree, "heading", (node) => {
-        if (allowedLevels.has(node.depth)) {
-          const text = toString2(node);
-          const slug = prefix + createSlug(text);
-          const linkNode = {
-            children: node.children,
-            type: "link",
-            url: `${baseUrl}#${slug}`
-          };
-          node.children = [linkNode];
-        }
-      });
-    };
-  };
-}
-
-// src/docs-plugin/remark/remark-spoilers.ts
-import { visit as visit9 } from "unist-util-visit";
-
-// src/docs-plugin/shiki/shiki-transformer-preview-block.ts
-import { dedent } from "@qualcomm-ui/utils/dedent";
+import { kebabCase } from "@qualcomm-ui/utils/change-case";
 
 // src/open-web-ui-knowledge/load-config-from-env.ts
 import { existsSync } from "node:fs";
-import { join as join3, resolve as resolve4 } from "node:path";
+import { join as join2, resolve as resolve3 } from "node:path";
 function parseCliMetadata(cliMetadata) {
   if (!cliMetadata?.length) {
     return void 0;
@@ -5962,11 +5686,11 @@ function loadKnowledgeConfigFromEnv(options) {
   if (!outputPath) {
     throw new Error("Missing required outputPath");
   }
-  const routeDir = join3(
+  const routeDir = join2(
     resolvedConfig.appDirectory,
     resolvedConfig.pageDirectory
   );
-  if (!existsSync(resolve4(routeDir))) {
+  if (!existsSync(resolve3(routeDir))) {
     throw new Error(`Route directory ${routeDir} does not exist`);
   }
   const cliMetadata = parseCliMetadata(options.metadata);
@@ -6030,7 +5754,7 @@ function extractRelativeImports(content) {
 }
 async function resolveModulePath(importPath, fromFile) {
   const fromDir = dirname(fromFile);
-  const baseResolved = resolve5(fromDir, importPath);
+  const baseResolved = resolve4(fromDir, importPath);
   const extensions = [".ts", ".tsx", ".js", ".jsx", ""];
   for (const ext of extensions) {
     const fullPath = baseResolved + ext;
@@ -6039,7 +5763,7 @@ async function resolveModulePath(importPath, fromFile) {
     }
   }
   if (await exists(baseResolved)) {
-    const indexPath = join4(baseResolved, "index.ts");
+    const indexPath = join3(baseResolved, "index.ts");
     if (await exists(indexPath)) {
       return indexPath;
     }
@@ -6051,7 +5775,7 @@ function extractMetadata(metadata) {
 }
 var replaceNpmInstallTabs = () => {
   return (tree, _file, done) => {
-    visit10(tree, "mdxJsxFlowElement", (node) => {
+    visit5(tree, "mdxJsxFlowElement", (node) => {
       if (node?.name === "NpmInstallTabs") {
         const packages = node.attributes?.find(
           (attr) => attr.type === "mdxJsxAttribute" && attr.name === "packages"
@@ -6074,6 +5798,37 @@ function getPath(obj, path) {
     obj
   );
 }
+function escapeText(value) {
+  return value.replace(/\n/g, " ");
+}
+function propsToDefinitionList(props) {
+  if (props.length === 0) {
+    return "";
+  }
+  return props.map((prop) => {
+    const parts = [`- **${prop.name}** (\`${escapeText(prop.type)}\``];
+    if (prop.defaultValue) {
+      parts.push(`, default: \`${escapeText(prop.defaultValue)}\``);
+    }
+    if (prop.required) {
+      parts.push(", required");
+    }
+    parts.push(")");
+    if (prop.description) {
+      parts.push(` - ${escapeText(prop.description)}`);
+    }
+    return parts.join("");
+  }).join("\n");
+}
+function themeDataToJson(data, cssPropertyName) {
+  if (!data || typeof data !== "object") {
+    return "";
+  }
+  if (cssPropertyName) {
+    return JSON.stringify({ cssProperty: cssPropertyName, data }, null, 2);
+  }
+  return JSON.stringify(data, null, 2);
+}
 var KnowledgeGenerator = class {
   config;
   docProps = null;
@@ -6103,7 +5858,7 @@ var KnowledgeGenerator = class {
     const processedPages = [];
     for (const page of pages) {
       try {
-        const processed = await this.processComponent(page);
+        const processed = await this.processMdxPage(page);
         processedPages.push(processed);
       } catch (error) {
         console.error(`Failed to process page: ${page.name}`);
@@ -6128,10 +5883,10 @@ var KnowledgeGenerator = class {
       );
       await this.generateExtraFiles(extractedMetadata);
     }
-    return pages.map((page) => page.id);
+    return pages;
   }
   async loadDocProps() {
-    const resolvedDocPropsPath = this.config.docPropsPath ? await exists(this.config.docPropsPath) ? this.config.docPropsPath : resolve5(process.cwd(), this.config.docPropsPath) : join4(dirname(this.config.routeDir), "doc-props.json");
+    const resolvedDocPropsPath = this.config.docPropsPath ? await exists(this.config.docPropsPath) ? this.config.docPropsPath : resolve4(process.cwd(), this.config.docPropsPath) : join3(dirname(this.config.routeDir), "doc-props.json");
     if (!await exists(resolvedDocPropsPath)) {
       if (this.config.verbose) {
         console.log(`Doc props file not found at: ${resolvedDocPropsPath}`);
@@ -6178,22 +5933,23 @@ var KnowledgeGenerator = class {
       }
       const entries = await readdir(dirPath, { withFileTypes: true });
       const mdxFiles = entries.filter(
-        (f) => f.name.endsWith(".mdx") && !shouldExclude(join4(dirPath, f.name))
+        (f) => f.name.endsWith(".mdx") && !shouldExclude(join3(dirPath, f.name))
       ) ?? [];
       for (const mdxFile of mdxFiles) {
         const demosFolder = entries.find((f) => f.name === "demos");
-        const demosFolderPath = demosFolder ? join4(dirPath, demosFolder.name) : void 0;
+        const demosFolderPath = demosFolder ? join3(dirPath, demosFolder.name) : void 0;
         const segments = getPathSegmentsFromFileName(
-          join4(dirPath, mdxFile.name),
+          join3(dirPath, mdxFile.name),
           this.config.routeDir
         );
         const url = getPathnameFromPathSegments(segments);
         components.push({
           demosFolder: demosFolderPath,
+          filePath: dirPath,
           id: segments.join("-").trim(),
-          mdxFile: join4(dirPath, mdxFile.name),
+          mdxFile: join3(dirPath, mdxFile.name),
           name: segments.at(-1),
-          path: dirPath,
+          pathname: url,
           url: this.config.baseUrl ? new URL(url, this.config.baseUrl).toString() : void 0
         });
         if (this.config.verbose) {
@@ -6202,7 +5958,7 @@ var KnowledgeGenerator = class {
         }
       }
       for (const entry of entries) {
-        const fullPath = join4(dirPath, entry.name);
+        const fullPath = join3(dirPath, entry.name);
         const stats = await stat(fullPath);
         if (stats.isDirectory()) {
           await scanDirectory(fullPath);
@@ -6213,7 +5969,7 @@ var KnowledgeGenerator = class {
     return components;
   }
   async collectRelativeImports(filePath, visited = /* @__PURE__ */ new Set()) {
-    const normalizedPath = resolve5(filePath);
+    const normalizedPath = resolve4(filePath);
     if (visited.has(normalizedPath)) {
       return [];
     }
@@ -6321,7 +6077,9 @@ ${codeText}
           }
         default:
           if (this.config.outputMode === "per-page" && "tag" in part && part.tag === "@link" && typeof part.target === "string") {
-            return `[${part.text}](${part.target})`;
+            if (part.text === "Learn more") {
+              return "";
+            }
           }
           return part.text;
       }
@@ -6340,8 +6098,8 @@ ${codeText}
     };
   }
   /**
-   * Creates a remark plugin that replaces TypeDocProps JSX elements with JSON
-   * code blocks containing component prop documentation.
+   * Creates a remark plugin that replaces theme JSX elements with
+   * markdown tables containing theme data.
    */
   async replaceThemeNodes() {
     let themes = null;
@@ -6368,7 +6126,7 @@ ${codeText}
       }
     };
     return () => (tree, _file, done) => {
-      visit10(tree, "mdxJsxFlowElement", (node) => {
+      visit5(tree, "mdxJsxFlowElement", (node) => {
         const handler = node.name && handlers[node.name];
         if (!handler) {
           return;
@@ -6378,11 +6136,21 @@ ${codeText}
           console.warn(`No theme data for ${node.name}`);
           return;
         }
+        let markdownTable;
+        if (typeof data === "object" && data !== null && "cssPropertyName" in data && "data" in data) {
+          const { cssPropertyName, data: themeData } = data;
+          markdownTable = themeDataToJson(themeData, cssPropertyName);
+        } else {
+          markdownTable = themeDataToJson(data);
+        }
+        if (!markdownTable) {
+          return;
+        }
         Object.assign(node, {
           lang: "json",
           meta: null,
           type: "code",
-          value: JSON.stringify(data, null, 2)
+          value: markdownTable
         });
       });
       done();
@@ -6403,12 +6171,30 @@ ${codeText}
     return null;
   }
   /**
-   * Creates a remark plugin that replaces TypeDocProps JSX elements with JSON
-   * code blocks containing component prop documentation.
+   * Creates a remark plugin that transforms relative URLs to absolute URLs.
+   */
+  transformRelativeUrls(pageUrl) {
+    const baseUrl = this.config.baseUrl;
+    return () => (tree) => {
+      if (!baseUrl || this.config.outputMode !== "per-page") {
+        return;
+      }
+      visit5(tree, "link", (node) => {
+        if (node.url.startsWith("/")) {
+          node.url = `${baseUrl}${node.url}`;
+        } else if (node.url.startsWith("./#") && pageUrl) {
+          node.url = `${pageUrl}${node.url.slice(2)}`;
+        }
+      });
+    };
+  }
+  /**
+   * Creates a remark plugin that replaces TypeDocProps JSX elements with
+   * markdown tables containing component prop documentation.
    */
   replaceTypeDocProps() {
     return () => (tree, _file, done) => {
-      visit10(
+      visit5(
         tree,
         "mdxJsxFlowElement",
         (node, index, parent) => {
@@ -6451,11 +6237,35 @@ ${codeText}
               `  Replaced TypeDocProps ${propsName} with API documentation`
             );
           }
+          const regularProps = propsDoc.filter((p) => p.propType === void 0);
+          const inputs = propsDoc.filter((p) => p.propType === "input");
+          const outputs = propsDoc.filter((p) => p.propType === "output");
+          const sections = [];
+          if (regularProps.length > 0) {
+            sections.push(propsToDefinitionList(regularProps));
+          }
+          if (inputs.length > 0) {
+            sections.push(`**Inputs**
+
+${propsToDefinitionList(inputs)}`);
+          }
+          if (outputs.length > 0) {
+            sections.push(`**Outputs**
+
+${propsToDefinitionList(outputs)}`);
+          }
+          const markdownContent = sections.join("\n\n");
+          if (!markdownContent) {
+            if (parent && index !== void 0) {
+              parent.children.splice(index, 1);
+            }
+            return;
+          }
           Object.assign(node, {
-            lang: "json",
+            lang: null,
             meta: null,
             type: "code",
-            value: JSON.stringify(propsDoc, null, 2)
+            value: markdownContent
           });
         }
       );
@@ -6469,7 +6279,7 @@ ${codeText}
   replaceDemos(demosFolder, demoFiles) {
     return () => async (tree) => {
       const promises = [];
-      visit10(
+      visit5(
         tree,
         "mdxJsxFlowElement",
         (node, index, parent) => {
@@ -6513,14 +6323,14 @@ ${codeText}
                 }
                 return;
               }
-              let demoFilePath = join4(demosFolder, filePath);
+              let demoFilePath = join3(demosFolder, filePath);
               let isAngularDemo = false;
               if (!await exists(demoFilePath)) {
-                demoFilePath = join4(demosFolder, `${kebabName}.ts`);
+                demoFilePath = join3(demosFolder, `${kebabName}.ts`);
                 if (await exists(demoFilePath)) {
                   isAngularDemo = true;
                   filePath = `${kebabCase(demoName).replace("-component", ".component")}.ts`;
-                  demoFilePath = join4(demosFolder, filePath);
+                  demoFilePath = join3(demosFolder, filePath);
                 } else {
                   console.log(`  Demo not found ${demoName}`);
                   if (parent && index !== void 0) {
@@ -6559,7 +6369,7 @@ ${codeText}
   }
   replaceFrontmatterExpressions(frontmatter) {
     return () => (tree) => {
-      visit10(
+      visit5(
         tree,
         "mdxFlowExpression",
         (node, index, parent) => {
@@ -6596,54 +6406,41 @@ ${codeText}
    */
   async processMdxContent(mdxContent, pageUrl, demosFolder, frontmatter) {
     const demoFiles = [];
-    let processedContent = mdxContent;
-    processedContent = processedContent.replace(
-      /\[([^\]]+)\]\(\.\/#([^)]+)\)/g,
-      (_, text, anchor) => pageUrl && this.config.outputMode === "per-page" ? `[${text}](${pageUrl}#${anchor})` : text
-    );
-    const processor = unified4().use(remarkParse4).use(remarkMdx3).use(remarkFrontmatter3, ["yaml"]).use(this.replaceTypeDocProps()).use(this.replaceFrontmatterExpressions(frontmatter)).use(await this.replaceThemeNodes()).use(this.replaceDemos(demosFolder, demoFiles)).use(remarkStringify3);
-    const processed = await processor.process(processedContent);
-    processedContent = String(processed);
-    processedContent = processedContent.replace(/\n\s*\n\s*\n/g, "\n\n");
+    const processor = unified4().use(remarkParse4).use(remarkMdx3).use(remarkFrontmatter2, ["yaml"]).use(this.replaceTypeDocProps()).use(this.replaceFrontmatterExpressions(frontmatter)).use(await this.replaceThemeNodes()).use(this.replaceDemos(demosFolder, demoFiles)).use(this.transformRelativeUrls(pageUrl)).use(remarkStringify3);
+    const processed = await processor.process(mdxContent);
+    const processedContent = String(processed).replace(/\n\s*\n\s*\n/g, "\n\n");
     return { content: processedContent, demoFiles };
   }
-  async processComponent(component) {
+  async processMdxPage(pageInfo) {
     try {
-      const mdxContent = await readFile(component.mdxFile, "utf-8");
+      const mdxContent = await readFile(pageInfo.mdxFile, "utf-8");
       if (this.config.verbose) {
-        console.log(`Processing page: ${component.name}`);
+        console.log(`Processing page: ${pageInfo.name}`);
       }
-      const processor = unified4().use(remarkParse4).use(remarkMdx3).use(replaceNpmInstallTabs).use(remarkFrontmatter3, ["yaml"]).use(remarkParseFrontmatter2);
-      if (this.config.outputMode === "per-page") {
-        processor.use(remarkSelfLinkHeadings(component.url));
-      }
-      processor.use(remarkStringify3);
+      const processor = unified4().use(remarkParse4).use(remarkMdx3).use(replaceNpmInstallTabs).use(remarkFrontmatter2, ["yaml"]).use(remarkParseFrontmatter2).use(remarkStringify3);
       const parsed = await processor.process(mdxContent);
       const frontmatter = parsed.data?.frontmatter || {};
       const { content: processedContent, demoFiles } = await this.processMdxContent(
         String(parsed),
-        component.url,
-        component.demosFolder,
+        pageInfo.url,
+        pageInfo.demosFolder,
         frontmatter
       );
-      const removeJsxProcessor = unified4().use(remarkParse4).use(remarkMdx3).use(remarkFrontmatter3, ["yaml"]).use(remarkRemoveJsx).use(remarkStringify3);
+      const removeJsxProcessor = unified4().use(remarkParse4).use(remarkMdx3).use(remarkFrontmatter2, ["yaml"]).use(remarkRemoveJsx).use(remarkStringify3);
       const removedJsx = String(
         await removeJsxProcessor.process(processedContent)
       );
-      const contentWithoutFrontmatter = removedJsx.replace(
-        /^---[\s\S]*?---\n/,
-        ""
-      );
-      const title = frontmatter.title || component.name;
+      const contentWithoutFrontmatter = removedJsx.replace(/^---[\s\S]*?---\n/, "").replace(/(^#{1,6} .*\\<[^>]+)>/gm, "$1\\>");
+      const title = frontmatter.title || pageInfo.name;
       return {
         content: contentWithoutFrontmatter.trim(),
         demoFiles,
         frontmatter,
         title,
-        url: component.url
+        url: pageInfo.url
       };
     } catch (error) {
-      console.error(`Error processing component ${component.name}:`, error);
+      console.error(`Error processing component ${pageInfo.name}:`, error);
       throw error;
     }
   }
@@ -6691,6 +6488,11 @@ ${codeText}
     let totalSize = 0;
     await Promise.all(
       extraFiles.map(async (extraFile) => {
+        let contents = extraFile.contents;
+        if (extraFile.processAsMdx) {
+          const removeJsxProcessor = unified4().use(remarkParse4).use(remarkMdx3).use(remarkFrontmatter2, ["yaml"]).use(remarkRemoveJsx).use(this.transformRelativeUrls()).use(remarkStringify3);
+          contents = String(await removeJsxProcessor.process(contents));
+        }
         const lines = [];
         if (metadata.length) {
           lines.push("---");
@@ -6700,11 +6502,13 @@ ${codeText}
           lines.push("---");
           lines.push("");
         }
-        lines.push(`# ${extraFile.title}`);
-        lines.push("");
-        lines.push(extraFile.contents);
+        if (extraFile.title) {
+          lines.push(`# ${extraFile.title}`);
+          lines.push("");
+        }
+        lines.push(contents);
         lines.push("");
-        const outfile = `${resolve5(this.config.outputPath)}/${kebabCase(extraFile.id)}.md`;
+        const outfile = `${resolve4(this.config.outputPath)}/${kebabCase(extraFile.id)}.md`;
         await writeFile3(outfile, lines.join("\n"), "utf-8");
         const stats = await stat(outfile);
         totalSize += stats.size / 1024;
@@ -6744,6 +6548,10 @@ ${codeText}
           page.name = processedPage.frontmatter.title;
         }
         let content = processedPage.content;
+        content = content.replace(
+          new RegExp(`^# ${processedPage.title}\\n+`, ""),
+          ""
+        );
         if (this.config.pageTitlePrefix) {
           content = content.replace(
             `# ${page.name}`,
@@ -6789,7 +6597,7 @@ ${codeText}
             }
           }
         }
-        const outfile = `${resolve5(this.config.outputPath)}/${kebabCase(page.id || page.name)}.md`;
+        const outfile = `${resolve4(this.config.outputPath)}/${kebabCase(page.id || page.name)}.md`;
         await writeFile3(outfile, lines.join("\n"), "utf-8");
         const stats = await stat(outfile);
         totalSize += stats.size / 1024;
@@ -6825,7 +6633,7 @@ function addGenerateKnowledgeCommand() {
 import { createHash as createHash2 } from "node:crypto";
 import { writeFileSync } from "node:fs";
 import { access as access2, readdir as readdir2, readFile as readFile2, stat as stat2 } from "node:fs/promises";
-import { resolve as resolve6 } from "node:path";
+import { resolve as resolve5 } from "node:path";
 import { setTimeout as setTimeout2 } from "node:timers/promises";
 import ora from "ora";
 
@@ -6955,7 +6763,7 @@ var Uploader = class {
     const files = await Promise.all(
       fileNames.map(async (name) => ({
         contents: await readFile2(
-          resolve6(this.config.knowledgeFilePath, name),
+          resolve5(this.config.knowledgeFilePath, name),
           "utf-8"
         ),
         name
@@ -7004,7 +6812,7 @@ var Uploader = class {
       try {
         const fileId = knowledgeFile.id;
         const fileString = await readFile2(
-          resolve6(this.config.knowledgeFilePath, name),
+          resolve5(this.config.knowledgeFilePath, name),
           "utf-8"
         );
         const spinner2 = ora(`Updating ${name}`).start();
@@ -7019,7 +6827,7 @@ var Uploader = class {
     }
     const spinner = ora(`Uploading ${name}`).start();
     const fileBuffer = await readFile2(
-      resolve6(this.config.knowledgeFilePath, name)
+      resolve5(this.config.knowledgeFilePath, name)
     );
     let uploadedFileId = void 0;
     try {
@@ -7057,7 +6865,7 @@ var Uploader = class {
     }
   }
   async uploadKnowledge() {
-    const resolvedPath = resolve6(this.config.knowledgeFilePath);
+    const resolvedPath = resolve5(this.config.knowledgeFilePath);
     if (!await access2(resolvedPath).then(() => true).catch(() => false)) {
       throw new Error(`File or folder not found at ${resolvedPath}`);
     }
@@ -7097,7 +6905,7 @@ function addUploadKnowledgeCommand() {
     const files = await uploader.filesApi.search("*");
     console.debug(`found ${files.length} files`);
     writeFileSync(
-      resolve6(uploader.config.knowledgeFilePath, "files.json"),
+      resolve5(uploader.config.knowledgeFilePath, "files.json"),
       JSON.stringify(files, null, 2),
       "utf-8"
     );
@@ -7140,16 +6948,16 @@ function addUploadKnowledgeCommand() {
 }
 
 // src/react-demo-plugin/generate-lazy-demo-map.ts
-import { glob as glob3 } from "glob";
+import { glob as glob2 } from "glob";
 import { uniqBy } from "lodash-es";
 import { writeFile as writeFile4 } from "node:fs/promises";
-import { resolve as resolve8 } from "node:path";
-import { dedent as dedent2 } from "@qualcomm-ui/utils/dedent";
+import { resolve as resolve7 } from "node:path";
+import { dedent } from "@qualcomm-ui/utils/dedent";
 
 // src/react-demo-plugin/demo-plugin-utils.ts
-import chalk4 from "chalk";
-import { existsSync as existsSync2, readFileSync as readFileSync3 } from "node:fs";
-import { dirname as dirname2, join as join5, relative as relative3, resolve as resolve7, sep } from "node:path";
+import chalk3 from "chalk";
+import { existsSync as existsSync2, readFileSync as readFileSync2 } from "node:fs";
+import { dirname as dirname2, join as join4, relative as relative3, resolve as resolve6, sep } from "node:path";
 import * as ts from "typescript";
 import { pascalCase } from "@qualcomm-ui/utils/change-case";
 function extractPageId(filePath, routesDir) {
@@ -7163,7 +6971,7 @@ function extractPageId(filePath, routesDir) {
 }
 function isDemoFile(filePath) {
   try {
-    return filePath.includes("/demos/") && filePath.endsWith(".tsx") && !readFileSync3(filePath).includes("export default");
+    return filePath.includes("/demos/") && filePath.endsWith(".tsx") && !readFileSync2(filePath).includes("export default");
   } catch (error) {
     return false;
   }
@@ -7174,7 +6982,7 @@ async function scanForDemoPages({
   demoPattern = "src/routes/**/demos/*.tsx",
   routesDir = "src/routes"
 }) {
-  const demoFiles = (await glob3(demoPattern)).filter((file) => isDemoFile(file));
+  const demoFiles = (await glob2(demoPattern)).filter((file) => isDemoFile(file));
   return uniqBy(
     demoFiles.map((file) => ({
       pageId: extractPageId(file, routesDir),
@@ -7188,7 +6996,7 @@ function generateLazyDemoLoader(demoPages) {
     return `  "${routePath}": () =>
     import("virtual:qui-demo-scope/page:${pageId}")`;
   }).sort().join(",\n");
-  return dedent2`
+  return dedent`
     /* eslint-disable */
 
     // This file is generated automatically. Don't edit it directly.
@@ -7206,7 +7014,7 @@ function generateLazyDemoLoader(demoPages) {
 }
 async function generateLazyDemoMap(options) {
   const routesDir = options.routesDir;
-  const outputPath = resolve8(options.output);
+  const outputPath = resolve7(options.output);
   console.log(`Scanning for demo pages in: ${routesDir}`);
   const demoPages = await scanForDemoPages({ routesDir });
   console.log(`Found ${demoPages.length} pages with demos`);