@rimelight/ui 0.0.34 → 0.0.36

package/src/docs/components/ApiTheme.astro

@@ -0,0 +1,100 @@
+---
+import type { ComponentMetaMap } from "../types"
+import { generateThemeCode } from "../utils"
+import meta from "virtual:rimelight-ui-docs-meta"
+
+interface Props {
+  component: string
+}
+
+const { component } = Astro.props
+
+const allMeta = meta as unknown as ComponentMetaMap
+const compMeta = allMeta[component]
+
+const theme = compMeta?.theme ?? null
+const themeCode = theme ? generateThemeCode(component, theme) : null
+---
+
+{themeCode ? (
+  <div class="api-theme-container relative border border-gray-800 rounded-lg overflow-hidden group mb-6" data-component={component}>
+    <div class="api-theme-collapse overflow-hidden max-h-[240px] relative transition-[max-height] duration-300 ease-in-out">
+      <div class="expressive-code m-0 border-0 rounded-none">
+        <figure class="frame m-0 border-0">
+          <pre class="language-ts overflow-x-auto m-0 border-0 rounded-none bg-gray-900"><code class="language-ts m-0">{themeCode}</code></pre>
+        </figure>
+      </div>
+      
+      {/* Gradient Fade Overlay */}
+      <div class="api-theme-fade absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-gray-950 to-transparent pointer-events-none transition-opacity duration-300"></div>
+    </div>
+    
+    {/* Toggle Button Container */}
+    <div class="api-theme-trigger-bar absolute bottom-0 left-0 right-0 flex justify-center pb-3 bg-gradient-to-t from-gray-950/90 via-gray-950/70 to-transparent pt-12">
+      <button class="api-theme-btn px-4 py-1.5 text-xs font-semibold text-white bg-gray-800 hover:bg-gray-700 border border-gray-700 hover:border-gray-650 rounded-md shadow-md transition-all duration-200 cursor-pointer">
+        Show theme config
+      </button>
+    </div>
+  </div>
+) : (
+  <p class="text-sm italic text-gray-500">No theme data available.</p>
+)}
+
+<script>
+  function setupThemeCollapser() {
+    if (typeof document === 'undefined') return;
+    const containers = document.querySelectorAll('.api-theme-container');
+    containers.forEach(container => {
+      if (container.getAttribute('data-collapser-ready') === 'true') return;
+      container.setAttribute('data-collapser-ready', 'true');
+
+      const collapseWrapper = container.querySelector('.api-theme-collapse') as HTMLElement;
+      const fadeOverlay = container.querySelector('.api-theme-fade') as HTMLElement;
+      const btn = container.querySelector('.api-theme-btn') as HTMLButtonElement;
+      const triggerBar = container.querySelector('.api-theme-trigger-bar') as HTMLElement;
+
+      if (!collapseWrapper || !btn || !triggerBar || !fadeOverlay) return;
+
+      // Let code blocks load and measure scrollHeight
+      const checkAndSetup = () => {
+        const scrollHeight = collapseWrapper.scrollHeight;
+        if (scrollHeight <= 240) {
+          collapseWrapper.style.maxHeight = 'none';
+          fadeOverlay.style.display = 'none';
+          triggerBar.style.display = 'none';
+          return;
+        }
+
+        let isExpanded = false;
+
+        btn.addEventListener('click', () => {
+          isExpanded = !isExpanded;
+          if (isExpanded) {
+            collapseWrapper.style.maxHeight = `${collapseWrapper.scrollHeight}px`;
+            btn.textContent = 'Hide theme config';
+            fadeOverlay.style.opacity = '0';
+            triggerBar.classList.remove('absolute', 'bottom-0');
+            triggerBar.classList.add('relative', 'bg-gray-950', 'py-3', 'border-t', 'border-gray-800');
+            triggerBar.style.paddingTop = '12px';
+          } else {
+            collapseWrapper.style.maxHeight = '240px';
+            btn.textContent = 'Show theme config';
+            fadeOverlay.style.opacity = '1';
+            triggerBar.classList.add('absolute', 'bottom-0');
+            triggerBar.classList.remove('relative', 'bg-gray-950', 'py-3', 'border-t', 'border-gray-800');
+            triggerBar.style.paddingTop = '48px';
+            container.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+          }
+        });
+      };
+
+      // Delay slightly to ensure fonts/expressive code are rendered
+      setTimeout(checkAndSetup, 150);
+    });
+  }
+
+  if (typeof document !== 'undefined') {
+    setupThemeCollapser();
+    document.addEventListener('astro:after-swap', setupThemeCollapser);
+  }
+</script>

package/src/docs/extractAll.ts

@@ -0,0 +1,94 @@
+import { existsSync, readdirSync } from "node:fs"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import type { ComponentMeta, PropMeta, SlotMeta, EmitMeta } from "./types"
+import { extractAstroMeta } from "./extractors/extractAstro"
+import { extractVueMeta } from "./extractors/extractVue"
+import { extractThemeMeta } from "./extractors/extractTheme"
+
+const pathDirname = path.dirname(fileURLToPath(import.meta.url))
+const uiRoot = path.resolve(pathDirname, "..", "..")
+
+function pascalToKebab(name: string): string {
+  return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()
+}
+
+function getComponentNameFromFilename(filename: string): string {
+  return filename.replace(/^(RLA|RLV)/, "").replace(/\.(astro|vue)$/, "")
+}
+
+export async function extractAllMeta(): Promise<Record<string, ComponentMeta>> {
+  const componentsDir = path.join(uiRoot, "src", "components")
+  const themesDir = path.join(uiRoot, "src", "themes")
+
+  const vueDir = path.join(componentsDir, "vue")
+  const astroDir = path.join(componentsDir, "astro")
+
+  const vueFiles = existsSync(vueDir)
+    ? readdirSync(vueDir).filter((f: string) => f.endsWith(".vue"))
+    : []
+  const astroFiles = existsSync(astroDir)
+    ? readdirSync(astroDir).filter((f: string) => f.endsWith(".astro") && f !== "Head.astro")
+    : []
+
+  const vueComponents = new Map<string, string>()
+  const astroComponents = new Map<string, string>()
+
+  for (const f of vueFiles) vueComponents.set(getComponentNameFromFilename(f), f)
+  for (const f of astroFiles) astroComponents.set(getComponentNameFromFilename(f), f)
+
+  const allNames = new Set([...vueComponents.keys(), ...astroComponents.keys()])
+  const result: Record<string, ComponentMeta> = {}
+
+  await Promise.all(
+    [...allNames].toSorted().map(async (name) => {
+      const vueFile = vueComponents.get(name)
+      const astroFile = astroComponents.get(name)
+
+      let props: PropMeta[] = []
+      let slots: SlotMeta[] = []
+      let emits: EmitMeta[] = []
+      const frameworks: ("astro" | "vue")[] = []
+
+      if (vueFile) {
+        frameworks.push("vue")
+        try {
+          const vueMeta = extractVueMeta(path.join(vueDir, vueFile))
+          props = vueMeta.props
+          slots = vueMeta.slots
+          emits = vueMeta.emits
+        } catch (err) {
+          console.warn(`[docs] Failed to extract Vue meta for ${vueFile}:`, err)
+        }
+      }
+
+      if (astroFile) {
+        frameworks.push("astro")
+        if (!vueFile) {
+          try {
+            const astroMeta = extractAstroMeta(path.join(astroDir, astroFile))
+            props = astroMeta.props
+            slots = astroMeta.slots
+          } catch (err) {
+            console.warn(`[docs] Failed to extract Astro meta for ${astroFile}:`, err)
+          }
+        }
+      }
+
+      const theme = await extractThemeMeta(name, themesDir)
+
+      result[pascalToKebab(name)] = {
+        name,
+        astroComponent: astroFile ?? null,
+        vueComponent: vueFile ?? null,
+        frameworks,
+        props,
+        slots,
+        emits,
+        theme
+      }
+    })
+  )
+
+  return result
+}

package/src/docs/extractors/extractAstro.ts

@@ -0,0 +1,69 @@
+import { readFileSync } from "node:fs"
+import ts from "typescript"
+import type { PropMeta, SlotMeta } from "../types"
+
+function extractAstroPropsFromInterface(sourceFile: ts.SourceFile): PropMeta[] {
+  const props: PropMeta[] = []
+
+  function visit(node: ts.Node) {
+    if (
+      (ts.isInterfaceDeclaration(node) || ts.isTypeAliasDeclaration(node)) &&
+      node.modifiers?.some((m) => m.kind === ts.SyntaxKind.ExportKeyword)
+    ) {
+      const name = node.name.text
+      if (name.endsWith("Props") || name === "Props") {
+        if (ts.isInterfaceDeclaration(node)) {
+          for (const member of node.members) {
+            if (ts.isPropertySignature(member) && member.name && ts.isIdentifier(member.name)) {
+              const propName = member.name.text
+              if (propName === "class" || propName.startsWith("data-")) continue
+              const type = member.type ? member.type.getText().replace(/^[^:]+:\s*/, "") : "unknown"
+              const isOptional = member.questionToken !== undefined
+              props.push({ name: propName, type, required: !isOptional, description: "" })
+            }
+          }
+        } else if (ts.isTypeAliasDeclaration(node) && ts.isTypeLiteralNode(node.type)) {
+          for (const member of node.type.members) {
+            if (ts.isPropertySignature(member) && member.name && ts.isIdentifier(member.name)) {
+              const propName = member.name.text
+              if (propName === "class" || propName.startsWith("data-")) continue
+              const type = member.type ? member.type.getText().replace(/^[^:]+:\s*/, "") : "unknown"
+              const isOptional = member.questionToken !== undefined
+              props.push({ name: propName, type, required: !isOptional, description: "" })
+            }
+          }
+        }
+      }
+    }
+    ts.forEachChild(node, visit)
+  }
+
+  visit(sourceFile)
+  return props
+}
+
+export function extractAstroMeta(filePath: string): { props: PropMeta[]; slots: SlotMeta[] } {
+  const content = readFileSync(filePath, "utf-8")
+  const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---/)
+  if (!frontmatterMatch) return { props: [], slots: [] }
+
+  const frontmatter = frontmatterMatch[1]
+  const sourceFile = ts.createSourceFile(
+    "component.ts",
+    frontmatter ?? "",
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TS
+  )
+
+  const props = extractAstroPropsFromInterface(sourceFile)
+
+  const slots: SlotMeta[] = []
+  const slotMatches = content.matchAll(/<slot(?:\s+name=["']([^"']+)["'])?/g)
+  for (const match of slotMatches) {
+    slots.push({ name: match[1] ?? "default", bindings: {}, description: "" })
+  }
+  if (!slots.length) slots.push({ name: "default", bindings: {}, description: "" })
+
+  return { props, slots }
+}

package/src/docs/extractors/extractTheme.ts

@@ -0,0 +1,56 @@
+import { existsSync, readdirSync } from "node:fs"
+import path from "node:path"
+import { execSync } from "node:child_process"
+import type { ThemeMeta } from "../types"
+
+export async function extractThemeMeta(
+  componentName: string,
+  themesDir: string
+): Promise<ThemeMeta | null> {
+  if (!existsSync(themesDir)) return null
+
+  const themeFiles = readdirSync(themesDir).filter((f) => f.endsWith(".theme.ts"))
+  let themePath: string | null = null
+  for (const file of themeFiles) {
+    const baseName = file.replace(".theme.ts", "")
+    if (baseName === componentName.toLowerCase()) {
+      themePath = path.join(themesDir, file)
+      break
+    }
+  }
+
+  if (!themePath || !existsSync(themePath)) return null
+
+  try {
+    const fileUrl = "file:///" + themePath.replace(/\\/g, "/")
+    // Run evaluation in a separate Node process with the tsx loader.
+    // This bypasses Vite's ModuleRunner restrictions inside Astro config setups.
+    // We pass the loader script via stdin to avoid any command line escaping issues.
+    const input = `import('${fileUrl}').then(m => console.log(JSON.stringify(m.default))).catch(err => { console.error(err); process.exit(1); })`
+    const output = execSync(`"${process.execPath}" --import tsx -`, {
+      input,
+      encoding: "utf-8",
+      stdio: ["pipe", "pipe", "ignore"]
+    })
+
+    const themeObj = JSON.parse(output.trim())
+    if (!themeObj) return null
+
+    return {
+      slots: Array.isArray(themeObj.slots) ? themeObj.slots : [],
+      base: typeof themeObj.base === "object" && themeObj.base !== null ? themeObj.base : {},
+      variants:
+        typeof themeObj.variants === "object" && themeObj.variants !== null
+          ? themeObj.variants
+          : {},
+      compoundVariants: Array.isArray(themeObj.compoundVariants) ? themeObj.compoundVariants : [],
+      defaultVariants:
+        typeof themeObj.defaultVariants === "object" && themeObj.defaultVariants !== null
+          ? themeObj.defaultVariants
+          : {}
+    }
+  } catch (err) {
+    console.warn(`[docs] Failed to extract theme via child process for ${componentName}:`, err)
+    return null
+  }
+}

package/src/{plugins/starlightDocsApi/extract-vue.ts → docs/extractors/extractVue.ts}

@@ -1,6 +1,7 @@
-import { readFileSync } from "node:fs"
+import { readFileSync, existsSync, statSync } from "node:fs"
+import path from "node:path"
 import ts from "typescript"
-import type { PropMeta, SlotMeta, EmitMeta } from "./types"
+import type { PropMeta, SlotMeta, EmitMeta } from "../types"
 
 function extractScriptBlock(content: string): string | null {
   const match =
@@ -73,7 +74,7 @@ function getTypeRefName(typeArg: ts.TypeNode): string | null {
   return null
 }
 
-export function extractVueMetaDirect(filePath: string): {
+export function extractVueMeta(filePath: string): {
   props: PropMeta[]
   slots: SlotMeta[]
   emits: EmitMeta[]
@@ -94,13 +95,31 @@ export function extractVueMetaDirect(filePath: string): {
       ts.ScriptKind.TS
     )
 
-    const interfaces = new Map<string, ts.InterfaceDeclaration>()
+    const interfaces = new Map<string, ts.InterfaceDeclaration | ts.TypeAliasDeclaration>()
     const destructuredDefaults: Record<string, string> = {}
+    const imports = new Map<string, string>()
 
     function collectDeclarations(node: ts.Node) {
-      if (ts.isInterfaceDeclaration(node)) {
+      if (ts.isInterfaceDeclaration(node) || ts.isTypeAliasDeclaration(node)) {
         interfaces.set(node.name.text, node)
       }
+      if (ts.isImportDeclaration(node)) {
+        const moduleSpecifier = node.moduleSpecifier
+        if (ts.isStringLiteral(moduleSpecifier)) {
+          const importPath = moduleSpecifier.text
+          const importClause = node.importClause
+          if (importClause) {
+            if (importClause.namedBindings && ts.isNamedImports(importClause.namedBindings)) {
+              for (const element of importClause.namedBindings.elements) {
+                imports.set(element.name.text, importPath)
+              }
+            }
+            if (importClause.name) {
+              imports.set(importClause.name.text, importPath)
+            }
+          }
+        }
+      }
       if (ts.isVariableStatement(node)) {
         for (const decl of node.declarationList.declarations) {
           if (
@@ -138,9 +157,59 @@ export function extractVueMetaDirect(filePath: string): {
             const typeArg = node.typeArguments[0]!
             const refName = getTypeRefName(typeArg)
             if (refName) {
-              const iface = interfaces.get(refName)
+              let iface = interfaces.get(refName)
+              if (!iface && imports.has(refName)) {
+                const relPath = imports.get(refName)!
+                const baseDir = path.dirname(filePath)
+                const absolutePath = path.resolve(baseDir, relPath)
+                const extensions = [".ts", ".d.ts", "/index.ts", "/index.d.ts"]
+                let foundPath = ""
+                if (existsSync(absolutePath) && statSync(absolutePath).isFile()) {
+                  foundPath = absolutePath
+                } else {
+                  for (const ext of extensions) {
+                    const testPath = absolutePath + ext
+                    if (existsSync(testPath)) {
+                      foundPath = testPath
+                      break
+                    }
+                  }
+                }
+                if (foundPath) {
+                  try {
+                    const importContent = readFileSync(foundPath, "utf-8")
+                    const importSourceFile = ts.createSourceFile(
+                      "import.ts",
+                      importContent,
+                      ts.ScriptTarget.Latest,
+                      true,
+                      ts.ScriptKind.TS
+                    )
+                    let foundNode: ts.InterfaceDeclaration | ts.TypeAliasDeclaration | null = null
+                    function findDecl(n: ts.Node) {
+                      if (
+                        (ts.isInterfaceDeclaration(n) || ts.isTypeAliasDeclaration(n)) &&
+                        n.name.text === refName
+                      ) {
+                        foundNode = n
+                      }
+                      ts.forEachChild(n, findDecl)
+                    }
+                    findDecl(importSourceFile)
+                    if (foundNode) {
+                      iface = foundNode
+                    }
+                  } catch {}
+                }
+              }
+
               if (iface) {
-                const extracted = extractPropsFromInterface(iface)
+                let extracted: PropMeta[] = []
+                if (ts.isInterfaceDeclaration(iface)) {
+                  extracted = extractPropsFromInterface(iface)
+                } else if (ts.isTypeAliasDeclaration(iface) && ts.isTypeLiteralNode(iface.type)) {
+                  extracted = extractPropsFromTypeLiteral(iface.type)
+                }
                 for (const p of extracted) {
                   const d = destructuredDefaults[p.name]
                   if (d !== undefined) p.default = d
@@ -177,9 +246,63 @@ export function extractVueMetaDirect(filePath: string): {
                 const typeArg = callArg.typeArguments[0]!
                 const refName = getTypeRefName(typeArg)
                 if (refName) {
-                  const iface = interfaces.get(refName)
+                  let iface = interfaces.get(refName)
+                  if (!iface && imports.has(refName)) {
+                    const relPath = imports.get(refName)!
+                    const baseDir = path.dirname(filePath)
+                    const absolutePath = path.resolve(baseDir, relPath)
+                    const extensions = [".ts", ".d.ts", "/index.ts", "/index.d.ts"]
+                    let foundPath = ""
+                    if (existsSync(absolutePath) && statSync(absolutePath).isFile()) {
+                      foundPath = absolutePath
+                    } else {
+                      for (const ext of extensions) {
+                        const testPath = absolutePath + ext
+                        if (existsSync(testPath)) {
+                          foundPath = testPath
+                          break
+                        }
+                      }
+                    }
+                    if (foundPath) {
+                      try {
+                        const importContent = readFileSync(foundPath, "utf-8")
+                        const importSourceFile = ts.createSourceFile(
+                          "import.ts",
+                          importContent,
+                          ts.ScriptTarget.Latest,
+                          true,
+                          ts.ScriptKind.TS
+                        )
+                        let foundNode: ts.InterfaceDeclaration | ts.TypeAliasDeclaration | null =
+                          null
+                        function findDecl(n: ts.Node) {
+                          if (
+                            (ts.isInterfaceDeclaration(n) || ts.isTypeAliasDeclaration(n)) &&
+                            n.name.text === refName
+                          ) {
+                            foundNode = n
+                          }
+                          ts.forEachChild(n, findDecl)
+                        }
+                        findDecl(importSourceFile)
+                        if (foundNode) {
+                          iface = foundNode
+                        }
+                      } catch {}
+                    }
+                  }
+
                   if (iface) {
-                    const baseProps = extractPropsFromInterface(iface)
+                    let baseProps: PropMeta[] = []
+                    if (ts.isInterfaceDeclaration(iface)) {
+                      baseProps = extractPropsFromInterface(iface)
+                    } else if (
+                      ts.isTypeAliasDeclaration(iface) &&
+                      ts.isTypeLiteralNode(iface.type)
+                    ) {
+                      baseProps = extractPropsFromTypeLiteral(iface.type)
+                    }
                     for (const p of baseProps) {
                       const d = defaults[p.name]
                       if (d !== undefined) p.default = d
@@ -203,14 +326,40 @@ export function extractVueMetaDirect(filePath: string): {
           const typeArg = node.typeArguments?.[0]
           if (typeArg && ts.isTypeLiteralNode(typeArg)) {
             for (const member of typeArg.members) {
-              if (ts.isMethodSignature(member) && member.name && ts.isIdentifier(member.name)) {
+              if (
+                (ts.isMethodSignature(member) || ts.isPropertySignature(member)) &&
+                member.name &&
+                ts.isIdentifier(member.name)
+              ) {
                 const slotName = member.name.text
                 const bindings: Record<string, string> = {}
-                if (member.parameters.length > 0) {
-                  const param = member.parameters[0]
-                  if (param?.type) {
-                    const typeText = param.type.getText()
-                    bindings["props"] = typeText
+
+                let params: readonly ts.ParameterDeclaration[] = []
+                if (ts.isMethodSignature(member)) {
+                  params = member.parameters
+                } else if (
+                  ts.isPropertySignature(member) &&
+                  member.type &&
+                  ts.isFunctionTypeNode(member.type)
+                ) {
+                  params = member.type.parameters
+                }
+
+                if (params.length > 0) {
+                  const param = params[0]
+                  if (param?.type && ts.isTypeLiteralNode(param.type)) {
+                    for (const pm of param.type.members) {
+                      if (
+                        ts.isPropertySignature(pm) &&
+                        pm.name &&
+                        ts.isIdentifier(pm.name) &&
+                        pm.type
+                      ) {
+                        bindings[pm.name.text] = pm.type.getText()
+                      }
+                    }
+                  } else if (param?.type) {
+                    bindings["props"] = param.type.getText()
                   }
                 }
                 slots.push({ name: slotName, bindings, description: "" })

package/src/{plugins/starlightDocsApi → docs}/utils.ts

@@ -22,7 +22,6 @@ export function filterProps(
 
 export function generateThemeCode(componentName: string, theme: ThemeMeta): string {
   const componentConfig: Record<string, unknown> = {
-    ...(theme.slots.length ? { slots: theme.slots } : {}),
     ...(Object.keys(theme.base).length ? { base: theme.base } : {}),
     ...(Object.keys(theme.variants).length ? { variants: theme.variants } : {}),
     ...(theme.compoundVariants.length ? { compoundVariants: theme.compoundVariants } : {}),
@@ -36,7 +35,7 @@ import { defineConfig } from "astro/config"
 export default defineConfig({
   integrations: [
     ui({
-      components: {
+      ui: {
         ${componentName}: ${JSON.stringify(componentConfig, null, 6).replace(/\n/g, "\n        ")}
       }
     })

package/src/env.d.ts

@@ -17,18 +17,6 @@ declare module "virtual:rimelight-ui-docs-meta" {
   export default meta
 }
 
-declare module "turndown" {
-  class TurndownService {
-    constructor(options?: Record<string, unknown>)
-    turndown(html: Node | string): string
-    use(plugin: () => void): void
-  }
-  export default TurndownService
-}
-
-declare module "turndown-plugin-gfm" {
-  export function gfm(): void
-}
 
 declare namespace App {
   interface Locals {