@udixio/mcp 0.3.2

package/dist/bundled/doc-src/pages/animations.astro

@@ -0,0 +1,322 @@
+---
+import Layout from '../layouts/layout.astro';
+import { Button, Card, Divider } from '@udixio/ui-react';
+import ClassNamePreview from '../components/ClassNamePreview';
+---
+<Layout>
+    <section class="relative overflow-hidden">
+      <div class="container mx-auto px-6 py-16 lg:py-24">
+        <h1 class="anim-fade anim-slide-from-top anim-duration-700 text-4xl md:text-6xl font-extrabold tracking-tight text-on-surface">
+          Animate on Scroll — Démo
+        </h1>
+        <p class="anim-fade anim-slide-from-bottom anim-duration-700 anim-delay-200 mt-4 max-w-2xl text-lg/8 text-on-surface-variant">
+          Cette page présente deux façons de déclencher les animations : via <strong>anim-in/anim-out</strong> (JS)
+          ou via <strong>anim-view</strong> (Scroll‑Driven CSS). Choisissez l’un <em>ou</em> l’autre : les entrées <code>anim-in</code>
+          ne sont pas compatibles avec <code>anim-view</code>. Avec <code>anim-view</code>, les paramètres <code>duration</code>
+          et <code>delay</code> n’ont pas d’effet car la progression est entièrement synchronisée au pourcentage de scroll.
+        </p>
+        <div class="anim-fade anim-slide-from-bottom anim-duration-700 anim-delay-300 mt-8 flex items-center gap-3">
+          <Button variant="filled">Commencer</Button>
+          <Button variant="outlined">Documentation</Button>
+        </div>
+      </div>
+    </section>
+
+    <Divider className="my-10" />
+
+    <section class="container mx-auto px-6">
+      <h2 class="text-2xl font-bold">Déclencheurs et effets disponibles</h2>
+      <p class="mt-2 text-on-surface-variant">
+        Il existe 3 déclencheurs: <strong>in</strong> (entrée), <strong>out</strong> (sortie), et <strong>scroll</strong> (anim-view).
+        Chaque déclencheur peut utiliser les effets suivants: <code>fade</code>, <code>scale</code>, <code>slide</code>.
+        Vous pouvez combiner plusieurs effets, par exemple <code>anim-fade</code> + <code>anim-slide-from-bottom</code> + <code>anim-scale</code>.
+      </p>
+      <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+        <ClassNamePreview className="anim-fade anim-slide-from-bottom anim-duration-500">
+          <h3 class="text-title-large font-semibold">Trigger: in</h3>
+          <p class="mt-2 text-on-surface-variant">Démarre à l'entrée dans le viewport.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade-out anim-slide-out-from-top anim-duration-500">
+          <h3 class="text-title-large font-semibold">Trigger: out</h3>
+          <p class="mt-2 text-on-surface-variant">Se joue à la sortie du viewport.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade-scroll anim-slide-scroll-from-bottom anim-scroll">
+          <h3 class="text-title-large font-semibold">Trigger: scroll (anim-view)</h3>
+          <p class="mt-2 text-on-surface-variant">Synchronisé au défilement, sans duration ni delay.</p>
+        </ClassNamePreview>
+      </div>
+      <div class="mt-6 text-on-surface-variant text-sm">
+        <p>Effets disponibles:</p>
+        <ul class="list-disc pl-6">
+          <li><code>fade</code> — transparence via <code>anim-fade</code> (+ option <code>anim-fade-50</code>...).</li>
+          <li><code>scale</code> — zoom via <code>anim-scale</code>, ou axes <code>anim-scale-x-*</code>/<code>anim-scale-y-*</code>.</li>
+          <li><code>slide</code> — déplacement via <code>anim-slide-from-*</code> avec distances (<code>anim-slide-8</code>, <code>anim-slide-full</code>...).</li>
+        </ul>
+      </div>
+    </section>
+
+    <Divider className="my-16" />
+
+    <section class="container mx-auto px-6">
+      <h2 class="text-2xl font-bold">Exemples basiques (JS — anim-in)</h2>
+      <p class="mt-2 text-on-surface-variant">
+        Variantes de base côté JS : fade-in, anim-slide-from-top/bottom/left/right, scale-in et scale-out.
+      </p>
+
+      <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <ClassNamePreview className="anim-fade-in anim-fade anim-fade-50">
+          <h3 class="text-title-large font-semibold">Fade</h3>
+          <p class="mt-2 text-on-surface-variant">Apparition progressive.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-bottom anim-duration-700 ">
+          <h3 class="text-title-large font-semibold">Fade Up</h3>
+          <p class="mt-2 text-on-surface-variant">Glisse vers le haut.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-left anim-slide-full anim-duration-700 ">
+          <h3 class="text-title-large font-semibold">Fade Down</h3>
+          <p class="mt-2 text-on-surface-variant">Glisse vers le bas.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-in-fade anim-slide-from-left anim-duration-700 ">
+          <h3 class="text-title-large font-semibold">Fade Left</h3>
+          <p class="mt-2 text-on-surface-variant">Glisse depuis la gauche.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-right anim-duration-700 ">
+          <h3 class="text-title-large font-semibold">Fade Right</h3>
+          <p class="mt-2 text-on-surface-variant">Glisse depuis la droite.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-scale-in anim-duration-700 ">
+          <h3 class="text-title-large font-semibold">scale In</h3>
+          <p class="mt-2 text-on-surface-variant">scale avant léger.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-scale-out  anim-duration-700  sm:col-span-2 lg:col-span-1">
+          <h3 class="text-title-large font-semibold">scale Out</h3>
+          <p class="mt-2 text-on-surface-variant">scale arrière léger.</p>
+        </ClassNamePreview>
+      </div>
+    </section>
+
+    <Divider className="my-16" />
+
+    <section class="container mx-auto px-6">
+      <h2 class="text-2xl font-bold">Scroll‑Driven (anim-view)</h2>
+      <p class="mt-2 text-on-surface-variant">
+        Ces éléments utilisent <code>anim-view</code> et une timeline CSS scroll‑driven. Ils sont synchronisés au scroll :
+        <strong>pas de duration ni de delay</strong> (ces valeurs sont ignorées).
+      </p>
+      <div class="mt-8 h-screen relative flex items-end ">
+        <ClassNamePreview className="anim-slide-scroll-from-bottom-right anim-scale-scroll anim-scale-150 anim-fade anim-duration-[2s] anim-slide-full anim-scroll w-fit sticky bottom-0 anim-scroll-end-cover-3/4">
+          <h3 class="text-title-large font-semibold">Scroll — Fade</h3>
+          <p class="mt-2 text-on-surface-variant">Progression liée au scroll.</p>
+        </ClassNamePreview>
+      </div>
+    </section>
+
+    <Divider className="my-16" />
+
+    <section class="container mx-auto px-6">
+      <h2 class="text-2xl font-bold">Durées & Easing (JS — anim-in)</h2>
+      <p class="mt-2 text-on-surface-variant">
+        Contrôlez la vitesse et l’interpolation avec les utilitaires : anim-duration-*, anim-ease-*, anim-delay-*.
+      </p>
+
+      <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <ClassNamePreview className="anim-fade anim-slide-from-bottom anim-duration-300 anim-ease-linear ">
+          <h3 class="text-title-large font-semibold">Rapide (300ms, linear)</h3>
+          <p class="mt-2 text-on-surface-variant">Idéal pour des micro-transitions.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-bottom anim-duration-700 anim-ease-out ">
+          <h3 class="text-title-large font-semibold">Standard (700ms, ease-out)</h3>
+          <p class="mt-2 text-on-surface-variant">Courbe douce vers la fin.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-bottom anim-duration-[1200ms] anim-ease-out ">
+          <h3 class="text-title-large font-semibold">Lent (1200ms)</h3>
+          <p class="mt-2 text-on-surface-variant">Accentue la sensation de fluidité.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-right anim-duration-700 anim-delay-150 ">
+          <h3 class="text-title-large font-semibold">Delay 150ms</h3>
+          <p class="mt-2 text-on-surface-variant">Différer l’entrée pour rythmer.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-right anim-duration-700 anim-delay-300 ">
+          <h3 class="text-title-large font-semibold">Delay 300ms</h3>
+          <p class="mt-2 text-on-surface-variant">Utilisez des décalages en série.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-right anim-duration-700 anim-delay-500 ">
+          <h3 class="text-title-large font-semibold">Delay 500ms</h3>
+          <p class="mt-2 text-on-surface-variant">Pour une chorégraphie plus marquée.</p>
+        </ClassNamePreview>
+      </div>
+    </section>
+
+    <Divider className="my-16" />
+
+    <section class="container mx-auto px-6">
+      <h2 class="text-2xl font-bold">Listes en cascade (JS — anim-in)</h2>
+      <p class="mt-2 text-on-surface-variant">
+        Appliquez des délais croissants pour simuler un effet de cascade.
+      </p>
+
+      <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <ClassNamePreview className="anim-fade anim-slide-from-bottom anim-duration-700">
+          <h3 class="font-semibold">Élément 1</h3>
+          <p class="text-on-surface-variant">anim-delay-0</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-bottom anim-duration-700 anim-delay-150">
+          <h3 class="font-semibold">Élément 2</h3>
+          <p class="text-on-surface-variant">anim-delay-150</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-bottom anim-duration-700 anim-delay-300">
+          <h3 class="font-semibold">Élément 3</h3>
+          <p class="text-on-surface-variant">anim-delay-300</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-bottom anim-duration-700 anim-delay-500">
+          <h3 class="font-semibold">Élément 4</h3>
+          <p class="text-on-surface-variant">anim-delay-500</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-bottom anim-duration-700 anim-delay-[700ms]">
+          <h3 class="font-semibold">Élément 5</h3>
+          <p class="text-on-surface-variant">anim-delay-700ms</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-bottom anim-duration-700 anim-delay-[900ms]">
+          <h3 class="font-semibold">Élément 6</h3>
+          <p class="text-on-surface-variant">anim-delay-900ms</p>
+        </ClassNamePreview>
+      </div>
+    </section>
+
+    <Divider className="my-16" />
+
+    <section class="container mx-auto px-6 pb-24">
+      <h2 class="text-2xl font-bold">Paramètres visuels — exemples</h2>
+      <p class="mt-2 text-on-surface-variant">
+        Chaque effet accepte des paramètres. Voici des aperçus concrets pour les régler visuellement.
+      </p>
+      <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <ClassNamePreview className="anim-scale anim-scale-125 anim-duration-700">
+          <h3 class="text-title-large font-semibold">Scale 125%</h3>
+          <p class="mt-2 text-on-surface-variant"><code>anim-scale-125</code></p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-scale anim-scale-x-150 anim-duration-700">
+          <h3 class="text-title-large font-semibold">Scale X 150%</h3>
+          <p class="mt-2 text-on-surface-variant"><code>anim-scale-x-150</code></p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-scale anim-scale-y-90 anim-duration-700">
+          <h3 class="text-title-large font-semibold">Scale Y 90%</h3>
+          <p class="mt-2 text-on-surface-variant"><code>anim-scale-y-90</code></p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-fade-50 anim-duration-700">
+          <h3 class="text-title-large font-semibold">Fade 50%</h3>
+          <p class="mt-2 text-on-surface-variant"><code>anim-fade-50</code></p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-slide-from-left anim-slide-8 anim-duration-700">
+          <h3 class="text-title-large font-semibold">Slide 2rem</h3>
+          <p class="mt-2 text-on-surface-variant"><code>anim-slide-from-left anim-slide-8</code></p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-slide-from-right anim-slide-full anim-duration-700">
+          <h3 class="text-title-large font-semibold">Slide full</h3>
+          <p class="mt-2 text-on-surface-variant"><code>anim-slide-from-right anim-slide-full</code></p>
+        </ClassNamePreview>
+      </div>
+      <div class="mt-6 text-sm text-on-surface-variant">
+        <p>Astuce: combinez plusieurs effets. Exemple: <code>anim-fade</code> + <code>anim-slide-from-bottom</code> + <code>anim-scale-105</code>.</p>
+      </div>
+    </section>
+
+    <Divider className="my-16" />
+
+    <section class="container mx-auto px-6 pb-24">
+      <h2 class="text-2xl font-bold">Combinaisons (JS — anim-in)</h2>
+      <p class="mt-2 text-on-surface-variant">
+        Combinez les variantes pour des mises en scène plus riches.
+      </p>
+
+      <div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <Card className="p-6">
+          <div class="anim-fade anim-slide-from-top anim-duration-700">
+            <h3 class="text-title-large font-semibold">Bloc A</h3>
+            <p class="mt-1 text-on-surface-variant">Titre en fade-down</p>
+          </div>
+          <div class="anim-fade anim-slide-from-bottom anim-duration-[1000ms] anim-delay-200 mt-4">
+            <p>
+              Contenu en fade-up plus lent, avec un léger délai. Idéal pour raconter une histoire lors du défilement.
+            </p>
+          </div>
+          <div class="anim-scale-in anim-duration-700 anim-delay-400 mt-6">
+            <Button variant="filled">Action principale</Button>
+          </div>
+        </Card>
+
+        <Card className="p-6">
+          <div class="grid grid-cols-2 gap-4">
+            <div class="anim-fade anim-slide-from-left anim-duration-700">
+              <div class="h-24 rounded-lg bg-surface-container"></div>
+              <p class="mt-2 text-on-surface-variant">fade-left</p>
+            </div>
+            <div class="anim-fade anim-slide-from-right anim-duration-700">
+              <div class="h-24 rounded-lg bg-surface-container"></div>
+              <p class="mt-2 text-on-surface-variant">fade-right</p>
+            </div>
+            <div class="anim-scale-out anim-duration-700 anim-delay-200">
+              <div class="h-24 rounded-lg bg-surface-container"></div>
+              <p class="mt-2 text-on-surface-variant">scale-out</p>
+            </div>
+            <div class="anim-scale-in anim-duration-700 anim-delay-300">
+              <div class="h-24 rounded-lg bg-surface-container"></div>
+              <p class="mt-2 text-on-surface-variant">scale-in</p>
+            </div>
+          </div>
+        </Card>
+      </div>
+    </section>
+
+    <Divider className="my-16" />
+
+    <section class="container mx-auto px-6">
+      <h2 class="text-2xl font-bold">Entrées JS (sans anim-view)</h2>
+      <p class="mt-2 text-on-surface-variant">
+        Ces éléments n’utilisent <strong>pas</strong> anim-view. Ils sont déclenchés en JavaScript via IntersectionObserver
+        par le composant <code>AnimateOnScroll</code> et démarrent quand ils entrent dans le viewport.
+      </p>
+
+      <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        <ClassNamePreview className="anim-fade-50 anim-slide-from-bottom anim-duration-700 p-6">
+          <h3 class="text-title-large font-semibold">JS — Fade Up</h3>
+          <p class="mt-2 text-on-surface-variant">Sans anim-view, déclenché à l’entrée.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-fade anim-slide-from-left anim-duration-700 p-6">
+          <h3 class="text-title-large font-semibold">JS — Fade Left</h3>
+          <p class="mt-2 text-on-surface-variant">Purement via observer JS.</p>
+        </ClassNamePreview>
+        <ClassNamePreview className="anim-scale-in anim-duration-700 p-6">
+          <h3 class="text-title-large font-semibold">JS — scale In</h3>
+          <p class="mt-2 text-on-surface-variant">Aucune timeline CSS; déclencheur JS.</p>
+        </ClassNamePreview>
+      </div>
+    </section>
+
+    <Divider className="my-16" />
+
+    <section class="container mx-auto px-6 pb-32">
+      <h2 class="text-2xl font-bold">Sorties JS (anim-out)</h2>
+      <p class="mt-2 text-on-surface-variant">
+        Ces éléments emploient <code>anim-out</code>. Ils jouent leur animation lorsque vous <em>quittez</em> leur zone
+        de vue (en les faisant sortir du viewport). Faites défiler doucement pour voir l’effet.
+      </p>
+
+      <div class="mt-8 space-y-8">
+        <Card className="anim-fade-out anim-slide-out-from-bottom anim-duration-700 p-6">
+          <h3 class="text-title-large font-semibold">JS — Exit vers le bas</h3>
+          <p class="mt-2 text-on-surface-variant">Se joue lorsque la carte sort de l’écran.</p>
+        </Card>
+        <div class="h-32"></div>
+        <Card className="anim-fade-out anim-slide-out-from-top anim-duration-700 p-6">
+          <h3 class="text-title-large font-semibold">JS — Exit vers le haut</h3>
+          <p class="mt-2 text-on-surface-variant">Se joue en remontant, quand la carte quitte le viewport.</p>
+        </Card>
+        <div class="h-32"></div>
+        <Card className="anim-scale-out anim-scale-90 anim-duration-700 p-6">
+          <h3 class="text-title-large font-semibold">JS — Scale Out</h3>
+          <p class="mt-2 text-on-surface-variant">Effet de sortie en scale arrière.</p>
+        </Card>
+      </div>
+    </section>
+</Layout>

package/dist/bundled/doc-src/pages/components/[component]/api.astro

@@ -0,0 +1,89 @@
+---
+import { getCollection, render } from 'astro:content';
+import Layout from '@/layouts/layout.astro';
+import Code from '@/components/Code.astro';
+import { Button, Card } from '@udixio/ui-react';
+import { noCase, sentenceCase } from 'change-case';
+import Components from '@/layouts/components.astro';
+import { ComponentSidebar } from '@/components/ComponentSidebar.tsx';
+
+export async function getStaticPaths() {
+  const overviews = await getCollection('api');
+  return overviews.map(overview => ({
+    params: { component: overview.id },
+    props: { overview }
+  }));
+}
+
+const { overview } = Astro.props;
+const { component } = Astro.params;
+const { Content, headings } = await render(overview);
+
+const apis = await getCollection('api');
+const componentApi = apis.find(api => api.id === component);
+
+function extractCondition(desc) {
+  if (!desc) return null;
+  // Heuristic: pull sentence mentioning "Only applies" or "S'applique uniquement"
+  const match = desc.match(/([^.!?]*\bOnly applies\b[^.!?]*[.!?])|([^.!?]*S'applique uniquement[^.!?]*[.!?])/i);
+  return match ? match[0] : null;
+}
+
+function formatDefault(def) {
+  if (!def || typeof def.value === 'undefined' || def.value === null) return '—';
+  const v = def.value;
+  if (typeof v === 'string') return v; // values like medium, filled come already as string
+  return String(v);
+}
+
+if (!componentApi) {
+  return Astro.redirect('/404', 404);
+}
+---
+<Components>
+  <Fragment slot="header"> <!-- pass table header -->
+    <h1 class="text-display-large ">{sentenceCase(noCase(componentApi.id))}</h1>
+    <p class="text-headline-small mt-8">{componentApi.data.description}</p>
+  </Fragment>
+  <Card variant='filled' className="mt-10 overflow-x-auto bg-surface-container">
+    <table class="w-full min-w-[800px] text-start border-collapse border-spacing-y-2  divide-y divide-outline-variant ">
+      <caption class="sr-only">Tableau des propriétés et de l'API du composant</caption>
+      <thead>
+        <tr class="text-title-small text-on-surface-variant divide-x divide-outline-variant ">
+          <th class="py-2 pe-4">Propriété</th>
+          <th class="py-2 pe-4">Type</th>
+          <th class="py-2 pe-4">Obligatoire</th>
+          <th class="py-2 pe-4">Valeur par défaut</th>
+          <th class="py-2 pe-4">Description</th>
+          <th class="py-2">Condition</th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-x divide-outline-variant">
+        {Object.values(componentApi.data.props).map((prop) => {
+          const condition = extractCondition(prop.description);
+          return (
+            <tr class="align-top  text-center divide-x divide-outline-variant ">
+              <td class="py-3 pe-4 whitespace-nowrap">
+                <code class="inline-block px-1.5 py-0.5 rounded bg-black/5">{prop.name}</code>
+              </td>
+              <td class="py-3 pe-4">
+                <code class="inline-block px-1.5 py-0.5 rounded bg-black/5">{prop.type?.name ?? '—'}</code>
+              </td>
+              <td class="py-3 pe-4">
+                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-black/5">{prop.required ? 'Oui' : 'Non'}</span>
+              </td>
+              <td class="py-3 pe-4">
+                <code class="inline-block px-1.5 py-0.5 rounded bg-black/5">{formatDefault(prop.defaultValue)}</code>
+              </td>
+              <td class="py-3 pe-4 max-w-[36rem] text-sm leading-relaxed">
+                {prop.description || '—'}
+              </td>
+              <td class="py-3 text-sm italic text-on-surface-variant">{condition ?? '—'}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  </Card>
+</>
+</Components>

package/dist/bundled/doc-src/pages/components/[component]/index.astro

@@ -0,0 +1,5 @@
+---
+export const prerender = false;
+
+return Astro.redirect('overview');
+---

package/dist/bundled/doc-src/pages/components/[component]/overview.astro

@@ -0,0 +1,37 @@
+---
+import { getCollection, render } from 'astro:content';
+import Layout from '@/layouts/layout.astro';
+import Code from '@/components/Code.astro';
+import { noCase, sentenceCase } from 'change-case';
+import Components from '@/layouts/components.astro';
+
+export async function getStaticPaths() {
+  const overviews = await getCollection('overviews');
+  return overviews.map(overview =>
+    ({
+      params: { component: overview.id.replace('overview', '') },
+      props: { overview }
+    })
+  );
+}
+
+const { overview } = Astro.props;
+const { component } = Astro.params;
+const { Content, headings } = await render(overview);
+
+const apis = await getCollection('api');
+const componentApi = apis.find(api => api.id == component)
+
+if (!componentApi) {
+  return Astro.redirect('/404', 404);
+}
+---
+<Components>
+  <Fragment slot="header"> <!-- pass table header -->
+    <h1 class="text-display-large ">{sentenceCase(noCase(componentApi.id))}</h1>
+    <p class="text-headline-small mt-8">{componentApi.data.description}</p>
+  </Fragment>
+  <div class="prose-markdown max-w-none">
+    <Content components={{ pre: Code }} />
+  </div>
+</Components>

package/dist/bundled/doc-src/pages/components/index.astro

@@ -0,0 +1,130 @@
+---
+import Layout from '@/layouts/layout.astro';
+import { getCollection } from 'astro:content';
+import { sentenceCase } from 'change-case';
+import { Card } from '@udixio/ui-react';
+
+import { ComponentSidebar } from '@/components/ComponentSidebar';
+import { renderMarkdown } from '@/lib/markdown';
+import ComponentPreview from '@/components/ComponentPreview.astro';
+
+export const prerender = false;
+
+const overviews = await getCollection('overviews');
+const apis = await getCollection('api');
+
+const overviewIds = new Set(
+  overviews.map((overview) => overview.id.replaceAll('overview', '')),
+);
+
+const components = apis
+  .filter((api) => !api.data.tags?.parent)
+  .filter((api) => overviewIds.has(api.id))
+  .map((api) => {
+    const tags = api.data.tags ?? {};
+    const toHtml = (value?: string) =>
+      typeof value === 'string' && value.trim().length > 0
+        ? renderMarkdown(value, {
+            classes: {
+              li: 'text-sm text-on-surface-variant',
+            },
+          })
+        : '';
+
+    return {
+      id: api.id,
+      displayName: api.data.displayName ?? sentenceCase(api.id),
+      description: api.data.description ?? '',
+      status: tags.status ?? 'beta',
+      category: tags.category ?? 'Other',
+      hasDevx: !!tags.devx,
+      hasA11y: !!tags.a11y,
+      hasLimitations: !!tags.limitations,
+      devxHtml: toHtml(tags.devx),
+      limitationsHtml: toHtml(tags.limitations),
+      a11yHtml: toHtml(tags.a11y),
+    };
+  })
+  .sort((a, b) => a.displayName.localeCompare(b.displayName));
+
+console.log('Filtered and sorted components:', overviewIds);
+
+const componentsByCategory = components.reduce(
+  (acc, component) => {
+    const group = acc[component.category] ?? [];
+    group.push(component);
+    acc[component.category] = group;
+    return acc;
+  },
+  {} as Record<string, typeof components>,
+);
+
+const categories = Object.keys(componentsByCategory).sort((a, b) =>
+  a.localeCompare(b),
+);
+---
+
+<Layout docSidebar>
+  <Fragment slot="sidebar">
+    <ComponentSidebar
+      client:load
+      transition:name="component-sidebar"
+      transition:persist
+      current={null}
+      components={components.map((component) => ({ slug: component.id }))}
+    />
+  </Fragment>
+
+  <div class="max-w-screen-xl mx-auto px-6 py-10">
+    <div class="mb-10">
+      <h1 class="text-display-large">Components</h1>
+      <p class="text-headline-small mt-4 text-on-surface-variant">
+        Browse all documented components and their essential dev notes.
+      </p>
+    </div>
+
+    {
+      categories.map((category) => (
+        <section class="mb-12">
+          <div class="flex items-center justify-between mb-5">
+            <h2 class="text-title-large">{category}</h2>
+            <span class="text-label-large text-on-surface-variant">
+              {componentsByCategory[category].length} components
+            </span>
+          </div>
+
+          <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+            {componentsByCategory[category].map((component) => (
+              <a
+                href={`/components/${component.id}/overview`}
+                class="group block no-underline"
+              >
+                <Card
+                  client:visible
+                  isInteractive
+                  variant="filled"
+                  className="flex h-full rounded-3xl flex-col overflow-hidden p-0 transition-all duration-200 y"
+                >
+                  <div class="relative rounded-3xl flex min-h-[200px] flex-1 items-center justify-center overflow-hidden bg-surface-container-high p-4">
+                    <div class="pointer-events-none scale-100">
+                      <ComponentPreview id={component.id} />
+                    </div>
+                  </div>
+
+                  <div class="flex flex-col gap-1 p-4 ">
+                    <h3 class="text-title-large">
+                      {component.displayName}
+                    </h3>
+                    <p class="text-body-medium text-on-surface-variant">
+                      {component.description}
+                    </p>
+                  </div>
+                </Card>
+              </a>
+            ))}
+          </div>
+        </section>
+      ))
+    }
+  </div>
+</Layout>

package/dist/bundled/doc-src/pages/index.astro

@@ -0,0 +1,5 @@
+---
+export const prerender = false;
+
+return Astro.redirect('/components');
+---

package/dist/bundled/doc-src/pages/search.astro

@@ -0,0 +1,12 @@
+---
+import Search from "astro-pagefind/components/Search";
+import Layout from '@/layouts/layout.astro'
+import { Card } from "@udixio/ui-react";
+---
+<Layout>
+  <div class="flex items-center justify-center size-full px-8">
+    <Card variant="filled" className="p-8 max-w-screen-xl mx-auto min-h-[90vh] w-full bg-surface-container">
+      <Search id="search" className="pagefind-ui" uiOptions={{ showImages: false }} />
+    </Card>
+  </div>
+</Layout>