@rimelight/ui 0.0.37 → 0.0.39

package/src/components/vue/RLVToast.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ToastProps } from "../../types/components/toast"
-import toastTheme from "../../themes/toast.theme"
-
-const toast = scv(toastTheme)
-
-const props = withDefaults(defineProps<ToastProps & { id?: string | number }>(), {
-  variant: "default",
-  duration: 5000
-})
-
-const emit = defineEmits<{
-  (e: "close", id: string | number | undefined): void
-}>()
-
-const resolvedClasses = computed(() =>
-  resolveClasses(toast, { variant: props.variant }, useUi("toast", props.ui), props.class)
-)
-
-const variantIcons: Record<string, string> = {
-  default: "i-lucide-bell",
-  error: "i-lucide-alert-circle",
-  success: "i-lucide-check-circle-2",
-  warning: "i-lucide-alert-triangle",
-  info: "i-lucide-info"
-}
-
-const icon = computed(() => variantIcons[props.variant] ?? variantIcons.default!)
-</script>
-
-<template>
-  <div
-    :class="resolvedClasses.root"
-    data-slot="root"
-    role="alert"
-    aria-live="assertive"
-    aria-atomic="true"
-  >
-    <span :class="[icon, 'size-4 shrink-0 mt-0.5']" aria-hidden="true" />
-
-    <div class="flex flex-col gap-0.5 flex-1 min-w-0">
-      <div v-if="title" :class="resolvedClasses.title" data-slot="title">
-        {{ title }}
-      </div>
-      <div v-if="description" :class="resolvedClasses.description" data-slot="description">
-        {{ description }}
-      </div>
-      <slot />
-
-      <div
-        v-if="$slots.actions || actionLabel"
-        class="flex items-center justify-end gap-2 mt-3"
-        data-slot="actions"
-      >
-        <slot name="actions">
-          <button
-            v-if="actionLabel"
-            type="button"
-            :class="resolvedClasses.action"
-            data-slot="action"
-          >
-            {{ actionLabel }}
-          </button>
-        </slot>
-      </div>
-    </div>
-
-    <button
-      type="button"
-      :class="resolvedClasses.close"
-      data-slot="close"
-      aria-label="Dismiss notification"
-      @click="emit('close', id)"
-    >
-      <span class="i-lucide-x size-3.5" aria-hidden="true" />
-    </button>
-  </div>
-</template>

package/src/components/vue/RLVToaster.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue"
-import { toastsStore, removeToast } from "../../utils"
-import RLVToast from "./RLVToast.vue"
-
-const toasts = ref(toastsStore.get())
-let unsubscribe: (() => void) | null = null
-
-onMounted(() => {
-  unsubscribe = toastsStore.subscribe((val) => {
-    toasts.value = val
-  })
-})
-
-onUnmounted(() => {
-  unsubscribe?.()
-})
-</script>
-
-<template>
-  <div
-    class="fixed bottom-0 right-0 p-4 z-[100] flex flex-col gap-2 w-full max-w-sm pointer-events-none"
-  >
-    <TransitionGroup
-      enter-active-class="transition duration-300 ease-out"
-      enter-from-class="transform translate-y-2 opacity-0"
-      enter-to-class="transform translate-y-0 opacity-100"
-      leave-active-class="transition duration-200 ease-in"
-      leave-from-class="transform translate-y-0 opacity-100"
-      leave-to-class="transform translate-y-2 opacity-0"
-    >
-      <RLVToast
-        v-for="toast in toasts"
-        :key="toast.id"
-        v-bind="toast"
-        class="pointer-events-auto"
-        @close="removeToast"
-      />
-    </TransitionGroup>
-  </div>
-</template>

package/src/config/index.ts

@@ -1 +0,0 @@
-export * from "./site.config"

package/src/docs/components/ApiChangelog.astro

@@ -1,147 +0,0 @@
----
-import RLATimeline from "../../components/astro/RLATimeline.astro"
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import timelineThemeDefault, { createTimelineTheme } from "../../themes/timeline.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-interface Props {
-  component: string
-  ui?: any
-  class?: any
-}
-
-const { component, ui: uiProp, class: className } = Astro.props
-
-const uiConfig = getUIConfig()
-const timelineTheme = uiConfig.colors ? createTimelineTheme() : timelineThemeDefault
-const timeline = scv(timelineTheme)
-const classes = resolveClasses(timeline, {}, useUi("timeline", uiProp), className);
----
-
-<div class="api-changelog-container group" data-component={component} data-theme-classes={JSON.stringify(classes)}>
-  <!-- Loading skeleton -->
-  <div class="api-changelog-loading py-6 flex flex-col gap-4">
-    <div class="animate-pulse h-4 bg-gray-800 rounded w-1/4"></div>
-    <div class="animate-pulse h-3 bg-gray-850 rounded w-full"></div>
-    <div class="animate-pulse h-3 bg-gray-850 rounded w-5/6"></div>
-  </div>
-  
-  <!-- Timeline Content -->
-  <div class="api-changelog-content hidden">
-    <RLATimeline ui={uiProp} class={className}>
-      <!-- Dynamic timeline items insert here -->
-      <div class="api-changelog-list flex flex-col space-y-8"></div>
-    </RLATimeline>
-  </div>
-  
-  <div class="api-changelog-empty hidden text-sm italic text-gray-500 py-2">
-    No recent changes found.
-  </div>
-</div>
-
-<script>
-  function escapeHtml(str: string): string {
-    return str
-      .replace(/&/g, "&amp;")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;")
-      .replace(/'/g, "&#039;");
-  }
-
-  async function loadChangelog() {
-    if (typeof document === "undefined") return;
-    const containers = document.querySelectorAll('.api-changelog-container');
-    
-    await Promise.all(
-      Array.from(containers).map(async (container) => {
-        if (container.getAttribute('data-changelog-ready') === 'true') return;
-        container.setAttribute('data-changelog-ready', 'true');
-
-        const component = container.getAttribute('data-component');
-        const themeClassesJson = container.getAttribute('data-theme-classes');
-        const themeClasses = themeClassesJson ? JSON.parse(themeClassesJson) : {};
-
-        const loadingEl = container.querySelector('.api-changelog-loading') as HTMLElement;
-        const contentEl = container.querySelector('.api-changelog-content') as HTMLElement;
-        const listEl = container.querySelector('.api-changelog-list') as HTMLElement;
-        const emptyEl = container.querySelector('.api-changelog-empty') as HTMLElement;
-
-        if (!component || !loadingEl || !contentEl || !listEl || !emptyEl) return;
-
-        try {
-          const res = await fetch(`/api/github/changelog?component=${component}`);
-          if (!res.ok) throw new Error();
-          const data = await res.json();
-
-          loadingEl.classList.add('hidden');
-
-          if (!data || data.length === 0) {
-            emptyEl.classList.remove('hidden');
-            return;
-          }
-
-          let html = '';
-          for (const item of data) {
-            const dateStr = item.published_at 
-              ? new Date(item.published_at).toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
-              : 'Unreleased';
-
-            html += `
-              <div class="${themeClasses.node || 'relative timeline-node'}">
-                <!-- Dot Indicator -->
-                <span class="${themeClasses.dot || 'absolute -left-[33px] top-[2px] flex h-4 w-4 items-center justify-center rounded-full bg-gray-950 ring-2 ring-gray-800'}">
-                  <span class="${themeClasses.dotInner || 'h-2 w-2 rounded-full bg-primary-500'}"></span>
-                </span>
-                
-                <div class="${themeClasses.header || 'flex items-center justify-between gap-4 mb-3'}">
-                  <div class="flex items-center gap-2">
-                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold bg-primary-500/10 text-primary-400 border border-primary-500/20">
-                      ${escapeHtml(item.tag === 'unreleased' ? 'Soon' : item.tag)}
-                    </span>
-                  </div>
-                  
-                  <time class="text-xs text-gray-500 font-normal">
-                    ${escapeHtml(dateStr)}
-                  </time>
-                </div>
-                
-                <ul class="${themeClasses.content || 'space-y-2 text-sm text-gray-400'}">
-                  ${item.commits.map((commit: any) => {
-                    const cleanedMessage = commit.message
-                      .replace(/#(\d+)/g, '<a href="https://github.com/Rimelight-Entertainment/rimelight/issues/$1" target="_blank" class="text-primary-400 hover:underline">#$1</a>')
-                      .replace(/`(.*?)`/g, '<code class="text-xs px-1 bg-gray-900 border border-gray-800 rounded font-mono text-gray-300">$1</code>');
-
-                    return `
-                      <li class="flex items-start gap-2">
-                        <a href="https://github.com/Rimelight-Entertainment/rimelight/commit/${commit.sha}" target="_blank" class="font-mono text-xs text-gray-500 hover:text-gray-300 hover:underline shrink-0 pt-0.5">
-                          ${commit.sha.slice(0, 7)}
-                        </a>
-                        <span class="text-gray-300">
-                          ${cleanedMessage}
-                        </span>
-                      </li>
-                    `;
-                  }).join('')}
-                </ul>
-              </div>
-            `;
-          }
-
-          listEl.innerHTML = html;
-          contentEl.classList.remove('hidden');
-        } catch (err) {
-          loadingEl.classList.add('hidden');
-          emptyEl.textContent = 'Failed to load changelog.';
-          emptyEl.classList.remove('hidden');
-        }
-      })
-    );
-  }
-
-  if (typeof document !== 'undefined') {
-    loadChangelog();
-    document.addEventListener('astro:after-swap', loadChangelog);
-  }
-</script>

package/src/docs/components/ApiEmits.astro

@@ -1,46 +0,0 @@
----
-import type { ComponentMetaMap, EmitMeta } from "../types"
-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 emits = compMeta?.emits ?? []
----
-
-{emits.length === 0 ? (
-  <p class="text-sm italic text-gray-500">No events emitted by this component.</p>
-) : (
-  <div class="overflow-x-auto">
-    <table class="w-full text-sm border-collapse">
-      <thead>
-        <tr class="border-b border-gray-200 dark:border-gray-700">
-          <th class="text-left py-2 px-3 font-semibold">Event</th>
-          <th class="text-left py-2 px-3 font-semibold">Payload</th>
-        </tr>
-      </thead>
-      <tbody>
-        {emits.map((emit: EmitMeta) => (
-          <tr class="border-b border-gray-100 dark:border-gray-800">
-            <td class="py-2 px-3">
-              <span class="font-mono text-sm">
-                {emit.name}
-              </span>
-            </td>
-            <td class="py-2 px-3">
-              <span class="font-mono text-xs text-gray-600 dark:text-gray-400">
-                {emit.type}
-              </span>
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  </div>
-)}

package/src/docs/components/ApiProps.astro

@@ -1,47 +0,0 @@
----
-import type { ComponentMetaMap, PropMeta } from "../types"
-import { filterProps } from "../utils"
-import meta from "virtual:rimelight-ui-docs-meta"
-
-interface Props {
-  component: string
-  hide?: string[]
-  show?: string[]
-}
-
-const { component, hide = ["class"], show } = Astro.props
-
-const allMeta = meta as unknown as ComponentMetaMap
-const compMeta = allMeta[component]
-
-const filterOpts: { hide?: string[]; show?: string[] } = { hide }
-if (show !== undefined) filterOpts.show = show
-const props = filterProps(compMeta?.props ?? [], filterOpts)
----
-
-{props.length > 0 ? (
-  <table>
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Required</th>
-        <th>Default</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      {props.map((prop: PropMeta) => (
-        <tr>
-          <td><span class="font-mono text-sm">{prop.name}</span></td>
-          <td><span class="font-mono text-xs text-gray-600 dark:text-gray-400">{prop.type}</span></td>
-          <td>{prop.required ? "Yes" : "No"}</td>
-          <td>{prop.default !== undefined ? <span class="font-mono text-xs text-gray-600 dark:text-gray-400">{prop.default}</span> : "—"}</td>
-          <td>{prop.description || "—"}</td>
-        </tr>
-      ))}
-    </tbody>
-  </table>
-) : (
-  <p class="text-sm italic text-gray-500">No props to display.</p>
-)}

package/src/docs/components/ApiSlots.astro

@@ -1,50 +0,0 @@
----
-import type { ComponentMetaMap, SlotMeta } from "../types"
-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 slots = compMeta?.slots ?? []
----
-
-{slots.length === 0 ? (
-  <p class="text-sm italic text-gray-500">No slots to display.</p>
-) : (
-  <div class="overflow-x-auto">
-    <table class="w-full text-sm border-collapse">
-      <thead>
-        <tr class="border-b border-gray-200 dark:border-gray-700">
-          <th class="text-left py-2 px-3 font-semibold">Slot</th>
-          <th class="text-left py-2 px-3 font-semibold">Type</th>
-        </tr>
-      </thead>
-      <tbody>
-        {slots.map((slot: SlotMeta) => (
-          <tr class="border-b border-gray-100 dark:border-gray-800">
-            <td class="py-2 px-3">
-              <span class="font-mono text-sm">
-                {slot.name}
-              </span>
-            </td>
-            <td class="py-2 px-3">
-              {Object.keys(slot.bindings).length > 0 ? (
-                <span class="font-mono text-xs text-gray-600 dark:text-gray-400">
-                  {Object.values(slot.bindings)[0]}
-                </span>
-              ) : (
-                <span class="text-gray-400">-</span>
-              )}
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
-  </div>
-)}

package/src/docs/components/ApiTheme.astro

@@ -1,100 +0,0 @@
----
-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

@@ -1,94 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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 }
-}