@windrun-huaiin/third-ui 5.14.1 → 6.0.0

package/src/main/faq.tsx

@@ -1,61 +1,85 @@
-'use client';
-
-import { useState } from "react";
-import { useTranslations } from 'next-intl';
-import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
+import { getTranslations } from 'next-intl/server';
 import { cn } from '@lib/utils';
 import { richText } from '@third-ui/main/rich-text-expert';
+import { FAQInteractive } from './faq-interactive';
 
-export function FAQ({ sectionClassName }: { sectionClassName?: string }) {
-  const t = useTranslations('faq');
-  const items = t.raw('items') as Array<{
+interface FAQData {
+  title: string;
+  description: string;
+  items: Array<{
+    id: string;
     question: string;
     answer: string;
   }>;
-  const [openArr, setOpenArr] = useState<boolean[]>(() => items.map(() => false));
+}
 
-  const handleToggle = (idx: number) => {
-    setOpenArr(prev => {
-      const next = [...prev];
-      next[idx] = !next[idx];
-      return next;
-    });
+export async function FAQ({ 
+  locale, 
+  sectionClassName 
+}: { 
+  locale: string;
+  sectionClassName?: string;
+}) {
+  const t = await getTranslations({ locale, namespace: 'faq' });
+  
+  // Process translation data
+  const rawItems = t.raw('items') as Array<{
+    question: string;
+    answer: string;
+  }>;
+  
+  const data: FAQData = {
+    title: t('title'),
+    description: richText(t, 'description'),
+    items: rawItems.map((item, index) => ({
+      id: `faq-item-${index}`,
+      question: item.question,
+      answer: richText(t, `items.${index}.answer`)
+    }))
   };
 
   return (
     <section id="faq" className={cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
-        {t('title')}
+        {data.title}
       </h2>
       <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto">
-        {richText(t, 'description')}
+        {data.description}
       </p>
       <div className="space-y-6">
-        {items.map((item, idx) => {
-          const isOpen = openArr[idx];
-          const Icon = isOpen ? icons.ChevronDown : icons.ChevronRight;
-          return (
-            <div
-              key={idx}
-              className="bg-white dark:bg-gray-800/60 p-6 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none"
+        {data.items.map((item) => (
+          <div
+            key={item.id}
+            data-faq-id={item.id}
+            className="bg-white dark:bg-gray-800/60 p-6 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none"
+          >
+            <button
+              className="w-full flex items-center justify-between text-left focus:outline-none"
+              data-faq-toggle={item.id}
+              aria-expanded="false"
             >
-              <button
-                className="w-full flex items-center justify-between text-left focus:outline-none"
-                onClick={() => handleToggle(idx)}
-                aria-expanded={isOpen}
+              <span className="text-lg font-semibold text-gray-900 dark:text-gray-100">{item.question}</span>
+              <svg 
+                className="w-6 h-6 text-gray-400 ml-2 transition-transform duration-200" 
+                data-faq-icon={item.id}
+                fill="none" 
+                stroke="currentColor" 
+                viewBox="0 0 24 24"
               >
-                <span className="text-lg font-semibold text-gray-900 dark:text-gray-100">{item.question}</span>
-                <Icon className="w-6 h-6 text-gray-400 ml-2 transition-transform duration-200" />
-              </button>
-              {isOpen && (
-                <div className="mt-4 text-gray-700 dark:text-gray-300 text-base">
-                  {richText(t, `items.${idx}.answer`)}
-                </div>
-              )}
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+            <div 
+              className="mt-4 text-gray-700 dark:text-gray-300 text-base hidden" 
+              data-faq-content={item.id}
+            >
+              {item.answer}
             </div>
-          );
-        })}
+          </div>
+        ))}
       </div>
+      
+      <FAQInteractive data={data} />
     </section>
   );
 } 

package/src/main/features.tsx

@@ -1,42 +1,71 @@
-'use client'
-
+import { getTranslations } from 'next-intl/server';
 import { getGlobalIcon } from '@base-ui/components/global-icon';
-import { useTranslations } from 'next-intl'
 import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
 import { cn } from '@lib/utils';
 import { richText } from '@third-ui/main/rich-text-expert';
 
-export function Features({ sectionClassName }: { sectionClassName?: string }) {
-  const t = useTranslations('features');
+interface FeaturesData {
+  title: string;
+  eyesOn: string;
+  description: string;
+  items: Array<{
+    id: string;
+    title: string;
+    description: string;
+    iconKey: keyof typeof icons;
+  }>;
+}
+
+export async function Features({ 
+  locale, 
+  sectionClassName 
+}: { 
+  locale: string;
+  sectionClassName?: string;
+}) {
+  const t = await getTranslations({ locale, namespace: 'features' });
   
-  // 直接从翻译文件获取特性列表
+  // Process translation data
   const featureItems = t.raw('items') as Array<{
     title: string;
     description: string;
     iconKey: keyof typeof icons;
   }>;
+  
+  const data: FeaturesData = {
+    title: t('title'),
+    eyesOn: t('eyesOn'),
+    description: richText(t, 'description'),
+    items: featureItems.map((feature, index) => ({
+      id: `feature-item-${index}`,
+      title: feature.title,
+      description: richText(t, `items.${index}.description`),
+      iconKey: feature.iconKey
+    }))
+  };
 
   return (
     <section id="features" className={cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-18", sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
-        {t('title')} <span className="text-purple-500">{t('eyesOn')}</span>
+        {data.title} <span className="text-purple-500">{data.eyesOn}</span>
       </h2>
       <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap">
-        {richText(t, 'description')}
+        {data.description}
       </p>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12">
-        {featureItems.map((feature, index) => {
+        {data.items.map((feature) => {
           const Icon = getGlobalIcon(feature.iconKey);
           return (
             <div
-              key={index}
+              key={feature.id}
+              data-feature-id={feature.id}
               className="bg-white dark:bg-gray-800/60 p-8 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-purple-300 dark:hover:border-purple-500/50 transition shadow-sm dark:shadow-none"
             >
               <div className="text-4xl mb-4 flex items-center justify-start">
                 <Icon className="w-8 h-8" />
               </div>
               <h3 className="text-xl font-semibold mb-3 text-gray-900 dark:text-gray-100">{feature.title}</h3>
-              <p className="text-gray-700 dark:text-gray-300">{richText(t, `items.${index}.description`)}</p>
+              <p className="text-gray-700 dark:text-gray-300">{feature.description}</p>
             </div>
           )
         })}

package/src/main/footer.tsx

@@ -1,45 +1,56 @@
-'use client'
-
+import { getTranslations } from 'next-intl/server';
 import { globalLucideIcons as icons } from '@base-ui/components/global-icon';
-import { useLocale, useTranslations } from 'next-intl';
 import Link from "next/link";
 
-export function Footer() {
-  const tFooter = useTranslations('footer');
-  const locale = useLocale();
+interface FooterData {
+  terms: string;
+  privacy: string;
+  contactUs: string;
+  email: string;
+  copyright: string;
+  company: string;
+}
+
+export async function Footer({ locale }: { locale: string }) {
+  const tFooter = await getTranslations({ locale, namespace: 'footer' });
+  
+  const data: FooterData = {
+    terms: tFooter('terms', { defaultValue: 'Terms of Service' }),
+    privacy: tFooter('privacy', { defaultValue: 'Privacy Policy' }),
+    contactUs: tFooter('contactUs', { defaultValue: 'Contact Us' }),
+    email: tFooter('email'),
+    company: tFooter('company'),
+    copyright: tFooter('copyright', { year: new Date().getFullYear(), name: tFooter('company') })
+  };
 
   return (
     <div className="mb-10 w-full mx-auto border-t-purple-700/80 border-t-1">
       <footer>
         <div className="w-full flex flex-col items-center justify-center px-4 py-8 space-y-3">
-          {/* 第一行：居中icon跳转链接 */}
           <div className="flex items-center justify-center space-x-6 text-xs">
             <Link href={`/${locale}/legal/terms`} className="flex items-center space-x-1 hover:underline">
               <icons.ReceiptText className="h-3.5 w-3.5"/>
-              <span>{tFooter('terms', { defaultValue: 'Terms of Service' })}</span>
+              <span>{data.terms}</span>
             </Link>
             <Link href={`/${locale}/legal/privacy`} className="flex items-center space-x-1 hover:underline">
               <icons.ShieldUser className="h-3.5 w-3.5"/>
-              <span>{tFooter('privacy', { defaultValue: 'Privacy Policy' })}</span>
+              <span>{data.privacy}</span>
             </Link>
             <div className="relative group">
               <div className="absolute left-2/3 -translate-x-1/4 bottom-full mb-1 hidden group-hover:block bg-zinc-600 text-white text-xs rounded px-3 py-1 whitespace-nowrap z-10 shadow-lg">
-                {tFooter('email')}
+                {data.email}
               </div>
               <a
-                href={`mailto:${tFooter('email')}`}
+                href={`mailto:${data.email}`}
                 className="flex items-center space-x-1 underline cursor-pointer px-2"
               >
                 <icons.Mail className="h-3.5 w-3.5"/>
-                <span>{tFooter('contactUs', { defaultValue: 'Contact Us' })}</span>
+                <span>{data.contactUs}</span>
               </a>
             </div>
           </div>
-          {/* 第二行：版权声明 */}
           <div className="text-xs text-center">
-            <span>
-              {tFooter('copyright', { year: new Date().getFullYear(), name: tFooter('company') })}
-            </span>
+            <span>{data.copyright}</span>
           </div>
         </div>
       </footer>

package/src/main/gallery-interactive.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface GalleryItem {
+  id: string;
+  url: string;
+  altMsg: string;
+}
+
+interface GalleryData {
+  titleL: string;
+  eyesOn: string;
+  titleR: string;
+  description: string;
+  items: GalleryItem[];
+  defaultImgUrl: string;
+  downloadPrefix: string;
+}
+
+export function GalleryInteractive({ data }: { data: GalleryData }) {
+  const [imageErrors, setImageErrors] = useState<Set<string>>(new Set());
+  const [downloadingItems, setDownloadingItems] = useState<Set<string>>(new Set());
+  
+  // Get CDN proxy URL from environment
+  const cdnProxyUrl = process.env.NEXT_PUBLIC_STYLE_CDN_PROXY_URL;
+
+  useEffect(() => {
+    // Progressive enhancement: Add download functionality and error handling
+    data.items.forEach((item, index) => {
+      const downloadButton = document.querySelector(`[data-gallery-download="${item.id}"]`) as HTMLButtonElement;
+      const imageElement = document.querySelector(`[data-gallery-image="${item.id}"]`) as HTMLImageElement;
+
+      if (downloadButton) {
+        const handleDownload = async () => {
+          // Prevent duplicate clicks
+          if (downloadingItems.has(item.id)) {
+            return;
+          }
+
+          // Set download status
+          setDownloadingItems(prev => new Set(prev).add(item.id));
+
+          try {
+            if (!cdnProxyUrl) {
+              throw new Error('CDN proxy URL not configured');
+            }
+
+            // Use R2 proxy to download directly
+            const originalUrl = new URL(item.url);
+            const filename = originalUrl.pathname.substring(1);
+            
+            // Build proxy download URL
+            const proxyUrl = `${cdnProxyUrl}/${encodeURIComponent(filename)}`;
+            
+            // Extract file extension from URL
+            const urlExtension = item.url.split('.').pop()?.toLowerCase();
+            let extension = '.webp';
+            if (urlExtension && ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(urlExtension)) {
+              extension = `.${urlExtension}`;
+            }
+            
+            // Fetch file from proxy
+            const response = await fetch(proxyUrl);
+            
+            if (!response.ok) {
+              throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            // Convert to blob
+            const blob = await response.blob();
+            const blobUrl = URL.createObjectURL(blob);
+            
+            // Create download link and trigger download
+            const a = document.createElement('a');
+            a.href = blobUrl;
+            a.download = `${data.downloadPrefix}-${index + 1}${extension}`;
+            a.style.display = 'none';
+            document.body.appendChild(a);
+            a.click();
+            
+            // Clean up DOM elements and blob URL
+            setTimeout(() => {
+              document.body.removeChild(a);
+              URL.revokeObjectURL(blobUrl);
+            }, 100);
+            
+          } catch (error) {
+            console.error('Download failed:', error);
+          } finally {
+            // Clear download status
+            setDownloadingItems(prev => {
+              const newSet = new Set(prev);
+              newSet.delete(item.id);
+              return newSet;
+            });
+          }
+        };
+
+        downloadButton.addEventListener('click', handleDownload);
+      }
+
+      if (imageElement) {
+        const handleImageError = () => {
+          setImageErrors(prev => new Set(prev).add(item.id));
+          // Update image src to default
+          imageElement.src = data.defaultImgUrl;
+        };
+
+        imageElement.addEventListener('error', handleImageError);
+      }
+    });
+
+    // Update download button states based on downloading status
+    const updateDownloadStates = () => {
+      data.items.forEach((item) => {
+        const downloadButton = document.querySelector(`[data-gallery-download="${item.id}"]`) as HTMLButtonElement;
+        if (downloadButton) {
+          const isDownloading = downloadingItems.has(item.id);
+          
+          if (isDownloading) {
+            downloadButton.disabled = true;
+            downloadButton.classList.add('bg-black/30', 'text-white/50');
+            downloadButton.classList.remove('bg-black/50', 'hover:bg-black/70', 'text-white/80', 'hover:text-white');
+            
+            // Replace icon with spinner
+            downloadButton.innerHTML = `
+              <svg class="h-5 w-5 text-white animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            `;
+          } else {
+            downloadButton.disabled = false;
+            downloadButton.classList.remove('bg-black/30', 'text-white/50');
+            downloadButton.classList.add('bg-black/50', 'hover:bg-black/70', 'text-white/80', 'hover:text-white');
+            
+            // Reset to download icon
+            downloadButton.innerHTML = `
+              <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+            `;
+          }
+        }
+      });
+    };
+
+    updateDownloadStates();
+
+    // Cleanup event listeners
+    return () => {
+      data.items.forEach((item) => {
+        const downloadButton = document.querySelector(`[data-gallery-download="${item.id}"]`) as HTMLButtonElement;
+        const imageElement = document.querySelector(`[data-gallery-image="${item.id}"]`) as HTMLImageElement;
+        
+        if (downloadButton) {
+          const newButton = downloadButton.cloneNode(true);
+          downloadButton.parentNode?.replaceChild(newButton, downloadButton);
+        }
+        
+        if (imageElement) {
+          const newImage = imageElement.cloneNode(true);
+          imageElement.parentNode?.replaceChild(newImage, imageElement);
+        }
+      });
+    };
+  }, [data, downloadingItems, imageErrors, cdnProxyUrl]);
+
+  return null; // Progressive enhancement - no additional DOM rendering
+}

package/src/main/gallery.tsx

@@ -1,135 +1,86 @@
-'use client'
-
-import { globalLucideIcons as icons } from "@base-ui/components/global-icon"
+import { getTranslations } from 'next-intl/server';
 import { cn } from '@lib/utils'
-import { useTranslations } from 'next-intl'
 import Image from "next/image"
-import { useState } from 'react'
+import { GalleryInteractive } from './gallery-interactive';
 
 interface GalleryItem {
+  id: string;
   url: string;
   altMsg: string;
 }
 
+interface GalleryData {
+  titleL: string;
+  eyesOn: string;
+  titleR: string;
+  description: string;
+  items: GalleryItem[];
+  defaultImgUrl: string;
+  downloadPrefix: string;
+}
+
 interface GalleryProps {
+  locale: string;
   sectionClassName?: string;
   button?: React.ReactNode;
 }
 
-export function Gallery({ sectionClassName, button }: GalleryProps) {
-  const t = useTranslations('gallery');
-  const galleryItems = t.raw('prompts') as GalleryItem[];
-  const defaultImgUrl = t.raw('defaultImgUrl') as string;
-  const [imageErrors, setImageErrors] = useState<Set<number>>(new Set());
-  const [downloadingItems, setDownloadingItems] = useState<Set<number>>(new Set());
-  const cdnProxyUrl = process.env.NEXT_PUBLIC_STYLE_CDN_PROXY_URL!;
-
-  const handleDownload = async (item: GalleryItem, index: number) => {
-    // prevent duplicate clicks
-    if (downloadingItems.has(index)) {
-      return;
-    }
-
-    // set download status
-    setDownloadingItems(prev => new Set(prev).add(index));
-
-    try {
-      // use R2 proxy to download directly, no need to fetch
-      // convert original R2 URL to proxy URL
-      const originalUrl = new URL(item.url);
-      const filename = originalUrl.pathname.substring(1);
-      
-      // build proxy download URL
-      const proxyUrl = `${cdnProxyUrl}/${encodeURIComponent(filename)}`;
-      
-      // extract file extension from URL
-      const urlExtension = item.url.split('.').pop()?.toLowerCase();
-      let extension = '.webp';
-      if (urlExtension && ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(urlExtension)) {
-        extension = `.${urlExtension}`;
-      }
-      const downloadPrefix = t('downloadPrefix');
-      
-      // fetch file from proxy
-      const response = await fetch(proxyUrl);
-      
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-      }
-      
-      // convert to blob
-      const blob = await response.blob();
-      const blobUrl = URL.createObjectURL(blob);
-      
-      // create download link and trigger download
-      const a = document.createElement('a');
-      a.href = blobUrl;
-      a.download = `${downloadPrefix}-${index + 1}${extension}`;
-      a.style.display = 'none';
-      document.body.appendChild(a);
-      a.click();
-      
-      // clean up DOM elements and blob URL
-      setTimeout(() => {
-        document.body.removeChild(a);
-        URL.revokeObjectURL(blobUrl);
-      }, 100);
-      
-    } catch (error) {
-      console.error('Download failed:', error);
-    } finally {
-      // clear download status
-      setDownloadingItems(prev => {
-        const newSet = new Set(prev);
-        newSet.delete(index);
-        return newSet;
-      });
-    }
-  };
-
-  const handleImageError = (index: number) => {
-    setImageErrors(prev => new Set(prev).add(index));
-  };
-
-  const getImageSrc = (item: GalleryItem, index: number) => {
-    return imageErrors.has(index) ? defaultImgUrl : item.url;
+export async function Gallery({ locale, sectionClassName, button }: GalleryProps) {
+  const t = await getTranslations({ locale, namespace: 'gallery' });
+  
+  // Process translation data
+  const galleryItems = t.raw('prompts') as Array<{
+    url: string;
+    altMsg: string;
+  }>;
+  
+  const data: GalleryData = {
+    titleL: t('titleL'),
+    eyesOn: t('eyesOn'),
+    titleR: t('titleR'),
+    description: t('description'),
+    items: galleryItems.map((item, index) => ({
+      id: `gallery-item-${index}`,
+      url: item.url,
+      altMsg: item.altMsg
+    })),
+    defaultImgUrl: t.raw('defaultImgUrl') as string,
+    downloadPrefix: t('downloadPrefix')
   };
 
   return (
     <section id="gallery" className={cn("container mx-auto px-4 py-20 scroll-mt-20", sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-6">
-        {t('titleL')} <span className="text-purple-500">{t('eyesOn')}</span> {t('titleR')}
+        {data.titleL} <span className="text-purple-500">{data.eyesOn}</span> {data.titleR}
       </h2>
       <p className="text-center max-w-2xl mx-auto mb-16">
-        {t('description')}
+        {data.description}
       </p>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-        {galleryItems.map((item, index) => (
-          <div key={index} className="group relative overflow-hidden rounded-xl">
+        {data.items.map((item, index) => (
+          <div 
+            key={item.id} 
+            className="group relative overflow-hidden rounded-xl"
+            data-gallery-item={item.id}
+            data-gallery-index={index}
+          >
             <Image
-              src={getImageSrc(item, index)}
+              src={item.url}
               alt={item.altMsg}
               width={600}
               height={600}
               className="w-full h-80 object-cover transition duration-300 group-hover:scale-105"
-              onError={() => handleImageError(index)}
+              data-gallery-image={item.id}
             />
             <div className="absolute inset-0 flex items-end justify-end p-4 opacity-0 group-hover:opacity-100 transition duration-300">
               <button
-                onClick={() => handleDownload(item, index)}
-                disabled={downloadingItems.has(index)}
-                className={cn(
-                  "p-2 rounded-full transition-all duration-300",
-                  downloadingItems.has(index)
-                    ? "bg-black/30 text-white/50"
-                    : "bg-black/50 hover:bg-black/70 text-white/80 hover:text-white"
-                )}
+                className="p-2 rounded-full bg-black/50 hover:bg-black/70 text-white/80 hover:text-white transition-all duration-300"
+                data-gallery-download={item.id}
+                aria-label={`Download ${item.altMsg}`}
               >
-                {downloadingItems.has(index) ? (
-                  <icons.Loader2 className="h-5 w-5 text-white animate-spin" />
-                ) : (
-                  <icons.Download className="h-5 w-5 text-white" />
-                )}
+                <svg className="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
               </button>
             </div>
           </div>
@@ -140,6 +91,8 @@ export function Gallery({ sectionClassName, button }: GalleryProps) {
           {button}
         </div>
       )}
+      
+      <GalleryInteractive data={data} />
     </section>
   )
 }

package/src/main/index.ts

@@ -1,18 +1,9 @@
 'use client';
 
-// Main application components
-export * from './gallery';
-export * from './usage';
-export * from './features';
-export * from './tips'; 
-export * from './faq';
-export * from './seo-content';
-export * from './cta';
-export * from './footer';
+// Main application Client components
 export * from './go-to-top';
 export * from './loading';
 export * from './nprogress-bar';
-export * from './price-plan';
 export * from './ads-alert-dialog';
 export * from './x-button'
 export * from './ai-prompt-textarea'