@geenius/ai 0.1.0

package/packages/react-css/src/hooks/useTranscription.ts

@@ -0,0 +1,119 @@
+// @geenius-ai/react — src/hooks/useTranscription.ts
+
+/**
+ * Audio transcription hook (Whisper, Groq ASR, etc.)
+ */
+
+import { useState, useCallback, useRef } from 'react'
+import { useAction } from 'convex/react'
+
+export interface TranscriptionResult {
+    text: string
+    timestamp: number
+    durationMs: number
+}
+
+export interface UseTranscriptionOptions {
+    transcribeAction: any
+    defaultModel?: string
+    /** Enable browser microphone recording */
+    enableMicrophone?: boolean
+}
+
+export interface UseTranscriptionReturn {
+    transcribe: (audioBase64: string, options?: {
+        model?: string
+        language?: string
+        prompt?: string
+    }) => Promise<string>
+    startRecording: () => Promise<void>
+    stopRecording: () => Promise<string>
+    isTranscribing: boolean
+    isRecording: boolean
+    lastResult: TranscriptionResult | null
+    error: string | null
+    clearError: () => void
+}
+
+export function useTranscription(options: UseTranscriptionOptions): UseTranscriptionReturn {
+    const [isTranscribing, setIsTranscribing] = useState(false)
+    const [isRecording, setIsRecording] = useState(false)
+    const [lastResult, setLastResult] = useState<TranscriptionResult | null>(null)
+    const [error, setError] = useState<string | null>(null)
+    const mediaRecorderRef = useRef<MediaRecorder | null>(null)
+    const chunksRef = useRef<Blob[]>([])
+    const action = useAction(options.transcribeAction)
+
+    const transcribe = useCallback(async (audioBase64: string, opts?: {
+        model?: string; language?: string; prompt?: string
+    }) => {
+        setIsTranscribing(true)
+        setError(null)
+        const start = Date.now()
+        try {
+            const text = await action({
+                audio: audioBase64,
+                model: opts?.model ?? options.defaultModel,
+                language: opts?.language,
+                prompt: opts?.prompt,
+            })
+            setLastResult({ text, timestamp: Date.now(), durationMs: Date.now() - start })
+            return text
+        } catch (err) {
+            const msg = err instanceof Error ? err.message : 'Transcription failed'
+            setError(msg)
+            throw err
+        } finally {
+            setIsTranscribing(false)
+        }
+    }, [action, options.defaultModel])
+
+    const startRecording = useCallback(async () => {
+        if (!options.enableMicrophone) throw new Error('Microphone not enabled')
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+        const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' })
+        chunksRef.current = []
+        mediaRecorder.ondataavailable = (e) => {
+            if (e.data.size > 0) chunksRef.current.push(e.data)
+        }
+        mediaRecorder.start()
+        mediaRecorderRef.current = mediaRecorder
+        setIsRecording(true)
+    }, [options.enableMicrophone])
+
+    const stopRecording = useCallback(async () => {
+        return new Promise<string>((resolve, reject) => {
+            const recorder = mediaRecorderRef.current
+            if (!recorder) { reject(new Error('Not recording')); return }
+
+            recorder.onstop = async () => {
+                setIsRecording(false)
+                const blob = new Blob(chunksRef.current, { type: 'audio/webm' })
+                const arrayBuffer = await blob.arrayBuffer()
+                const bytes = new Uint8Array(arrayBuffer)
+                let binary = ''
+                for (let i = 0; i < bytes.length; i++) {
+                    binary += String.fromCharCode(bytes[i]!)
+                }
+                const base64 = btoa(binary)
+
+                // Stop all tracks
+                recorder.stream.getTracks().forEach(t => t.stop())
+
+                try {
+                    const text = await transcribe(base64)
+                    resolve(text)
+                } catch (err) {
+                    reject(err)
+                }
+            }
+            recorder.stop()
+        })
+    }, [transcribe])
+
+    return {
+        transcribe, startRecording, stopRecording,
+        isTranscribing, isRecording, lastResult, error,
+        clearError: () => setError(null),
+    }
+}

package/packages/react-css/src/hooks/useVideoGeneration.ts

@@ -0,0 +1,79 @@
+// @geenius-ai/react — src/hooks/useVideoGeneration.ts
+
+/**
+ * Video generation hook (Replicate, Fal, etc.)
+ */
+
+import { useState, useCallback } from 'react'
+import { useAction } from 'convex/react'
+
+export interface GeneratedVideo {
+    url: string
+    prompt: string
+    model: string
+    timestamp: number
+}
+
+export interface UseVideoGenerationOptions {
+    generateVideoAction: any
+    defaultModel?: string
+}
+
+export interface UseVideoGenerationReturn {
+    generate: (prompt: string, options?: {
+        model?: string
+        duration?: number
+        aspectRatio?: '16:9' | '9:16' | '1:1'
+        resolution?: '720p' | '1080p' | '4k'
+        startImage?: string
+        endImage?: string
+    }) => Promise<string>
+    videos: GeneratedVideo[]
+    isGenerating: boolean
+    error: string | null
+    clearVideos: () => void
+    clearError: () => void
+}
+
+export function useVideoGeneration(options: UseVideoGenerationOptions): UseVideoGenerationReturn {
+    const [videos, setVideos] = useState<GeneratedVideo[]>([])
+    const [isGenerating, setIsGenerating] = useState(false)
+    const [error, setError] = useState<string | null>(null)
+    const action = useAction(options.generateVideoAction)
+
+    const generate = useCallback(async (prompt: string, opts?: {
+        model?: string; duration?: number
+        aspectRatio?: '16:9' | '9:16' | '1:1'
+        resolution?: '720p' | '1080p' | '4k'
+        startImage?: string; endImage?: string
+    }) => {
+        setIsGenerating(true)
+        setError(null)
+        try {
+            const model = opts?.model ?? options.defaultModel ?? 'minimax/video-01'
+            const result = await action({
+                prompt, model,
+                duration: opts?.duration,
+                aspectRatio: opts?.aspectRatio,
+                resolution: opts?.resolution,
+                startImage: opts?.startImage,
+                endImage: opts?.endImage,
+            })
+            const vid: GeneratedVideo = { url: result, prompt, model, timestamp: Date.now() }
+            setVideos(prev => [vid, ...prev])
+            return result
+        } catch (err) {
+            const msg = err instanceof Error ? err.message : 'Video generation failed'
+            setError(msg)
+            throw err
+        } finally {
+            setIsGenerating(false)
+        }
+    }, [action, options.defaultModel])
+
+    return {
+        generate, videos, isGenerating, error,
+        clearVideos: () => setVideos([]),
+        clearError: () => setError(null),
+    }
+}

package/packages/react-css/src/index.ts

@@ -0,0 +1,35 @@
+// @geenius-ai/react-css — Independent barrel (vanilla CSS variant)
+// ALL imports from LOCAL files + @geenius-ai/shared — NOT from @geenius-ai/react
+
+// Hooks — Core
+export { useAI, type UseAIOptions, type UseAIReturn } from './hooks/useAI'
+export { useChat, type UseChatOptions, type UseChatReturn } from './hooks/useChat'
+export { useAILogs, type UseAILogsOptions, type UseAILogsReturn } from './hooks/useAILogs'
+export { useModelTest, type UseModelTestOptions, type UseModelTestReturn, type ModelTestResult } from './hooks/useModelTest'
+export { useAIModels, type UseAIModelsOptions, type UseAIModelsReturn } from './hooks/useAIModels'
+
+// Hooks — Multi-modal
+export { useImageGeneration, type UseImageGenerationOptions, type UseImageGenerationReturn, type GeneratedImage } from './hooks/useImageGeneration'
+export { useTextToSpeech, type UseTextToSpeechOptions, type UseTextToSpeechReturn } from './hooks/useTextToSpeech'
+export { useVideoGeneration, type UseVideoGenerationOptions, type UseVideoGenerationReturn, type GeneratedVideo } from './hooks/useVideoGeneration'
+export { useTranscription, type UseTranscriptionOptions, type UseTranscriptionReturn, type TranscriptionResult } from './hooks/useTranscription'
+export { useRealtimeAudio, type UseRealtimeAudioOptions, type UseRealtimeAudioReturn } from './hooks/useRealtimeAudio'
+
+// Hooks — Content, Memory, Skills
+export { useContentManager, type UseContentManagerOptions, type UseContentManagerReturn } from './hooks/useContentManager'
+export { useMemory, type UseMemoryOptions, type UseMemoryReturn } from './hooks/useMemory'
+export { useSkills, type UseSkillsOptions, type UseSkillsReturn } from './hooks/useSkills'
+
+// Components
+export { ChatWindow, type ChatWindowComponentProps } from './components/ChatWindow'
+export { ModelSelector, type ModelSelectorProps } from './components/ModelSelector'
+export { AILogTable, type AILogTableComponentProps } from './components/AILogTable'
+export { ModelTestRunner, type ModelTestRunnerProps } from './components/ModelTestRunner'
+export { GenerationCard, type GenerationCardProps } from './components/GenerationCard'
+export { ImageGenerator, type ImageGeneratorComponentProps } from './components/ImageGenerator'
+export { VoiceSelector, type VoiceSelectorComponentProps } from './components/VoiceSelector'
+
+// Pages
+export { ChatPage, type ChatPageProps } from './pages/ChatPage'
+export { ModelTestPage, type ModelTestPageProps } from './pages/ModelTestPage'
+export { AILogsPage, type AILogsPageProps } from './pages/AILogsPage'

package/packages/react-css/src/pages/AILogsPage.tsx

@@ -0,0 +1,98 @@
+// @geenius-ai/react — src/pages/AILogsPage.tsx
+
+/**
+ * AI logs dashboard page with stats and log table.
+ */
+
+import { useState } from 'react'
+import { AILogTable } from '../components/AILogTable'
+import { useAILogs, type UseAILogsOptions } from '../hooks/useAILogs'
+import type { AIRequestStatus, AILogEntry } from '@geenius-ai/shared'
+
+export interface AILogsPageProps {
+    /** Query reference: api.ai.listLogs */
+    listLogsQuery: any
+    className?: string
+    title?: string
+    onRowClick?: (log: AILogEntry) => void
+}
+
+export function AILogsPage(props: AILogsPageProps) {
+    const [modelFilter, setModelFilter] = useState('')
+    const [statusFilter, setStatusFilter] = useState<AIRequestStatus | ''>('')
+
+    const { logs, isLoading } = useAILogs({
+        listLogsQuery: props.listLogsQuery,
+        filters: {
+            model: modelFilter || undefined,
+            status: (statusFilter || undefined) as AIRequestStatus | undefined,
+        },
+        limit: 100,
+    })
+
+    // Calculate quick stats
+    const totalCalls = logs.length
+    const successCalls = logs.filter(l => l.status === 'success').length
+    const errorCalls = totalCalls - successCalls
+    const totalCost = logs.reduce((sum, l) => sum + (l.totalCostUsd ?? 0), 0)
+    const totalTokens = logs.reduce((sum, l) => sum + (l.totalTokens ?? 0), 0)
+
+    return (
+        <div className={props.className} data-ai-page="logs">
+            <div data-ai-page-header>
+                <h1 data-ai-page-title>{props.title ?? 'AI Logs'}</h1>
+            </div>
+
+            {/* Stats cards */}
+            <div data-ai-stats-grid>
+                <div data-ai-stat>
+                    <span data-ai-stat-label>Total Calls</span>
+                    <span data-ai-stat-value>{totalCalls}</span>
+                </div>
+                <div data-ai-stat data-ai-status="success">
+                    <span data-ai-stat-label>Success</span>
+                    <span data-ai-stat-value>{successCalls}</span>
+                </div>
+                <div data-ai-stat data-ai-status="error">
+                    <span data-ai-stat-label>Errors</span>
+                    <span data-ai-stat-value>{errorCalls}</span>
+                </div>
+                <div data-ai-stat>
+                    <span data-ai-stat-label>Total Cost</span>
+                    <span data-ai-stat-value>${totalCost.toFixed(2)}</span>
+                </div>
+                <div data-ai-stat>
+                    <span data-ai-stat-label>Total Tokens</span>
+                    <span data-ai-stat-value>{totalTokens.toLocaleString()}</span>
+                </div>
+            </div>
+
+            {/* Filters */}
+            <div data-ai-filters>
+                <input
+                    type="text"
+                    placeholder="Filter by model…"
+                    value={modelFilter}
+                    onChange={(e) => setModelFilter(e.target.value)}
+                    data-ai-filter-input
+                />
+                <select
+                    value={statusFilter}
+                    onChange={(e) => setStatusFilter(e.target.value as AIRequestStatus | '')}
+                    data-ai-filter-select
+                >
+                    <option value="">All statuses</option>
+                    <option value="success">Success</option>
+                    <option value="error">Error</option>
+                </select>
+            </div>
+
+            {/* Log table */}
+            <AILogTable
+                logs={logs}
+                isLoading={isLoading}
+                onRowClick={props.onRowClick}
+            />
+        </div>
+    )
+}

package/packages/react-css/src/pages/ChatPage.tsx

@@ -0,0 +1,42 @@
+// @geenius-ai/react — src/pages/ChatPage.tsx
+
+/**
+ * Full chatbot page — sidebar + conversation.
+ * Compose with your own layout and styling.
+ */
+
+import { useState } from 'react'
+import { ChatWindow, type ChatWindowComponentProps } from '../components/ChatWindow'
+
+export interface ChatPageProps extends Omit<ChatWindowComponentProps, 'conversationId'> {
+    className?: string
+    /** Initial conversation ID */
+    conversationId?: string
+}
+
+export function ChatPage(props: ChatPageProps) {
+    const [activeConversationId, setActiveConversationId] = useState<string | undefined>(props.conversationId)
+
+    return (
+        <div className={props.className} data-ai-page="chat">
+            <div data-ai-page-header>
+                <h1 data-ai-page-title>AI Chat</h1>
+                <button
+                    onClick={() => setActiveConversationId(undefined)}
+                    data-ai-new-chat
+                >
+                    New Chat
+                </button>
+            </div>
+
+            <ChatWindow
+                {...props}
+                conversationId={activeConversationId}
+                onNewConversation={(id) => {
+                    setActiveConversationId(id)
+                    props.onNewConversation?.(id)
+                }}
+            />
+        </div>
+    )
+}

package/packages/react-css/src/pages/ModelTestPage.tsx

@@ -0,0 +1,33 @@
+// @geenius-ai/react — src/pages/ModelTestPage.tsx
+
+/**
+ * Model test page — extracted from the pattern used in 15+ apps.
+ */
+
+import { ModelTestRunner, type ModelTestRunnerProps } from '../components/ModelTestRunner'
+import { DEFAULT_MODELS } from '@geenius-ai/shared'
+import type { AIGenerationType } from '@geenius-ai/shared'
+
+export interface ModelTestPageProps extends ModelTestRunnerProps {
+    title?: string
+}
+
+export function ModelTestPage(props: ModelTestPageProps) {
+    const models = props.availableModels ?? DEFAULT_MODELS.map(m => m.id)
+
+    return (
+        <div className={props.className} data-ai-page="model-test">
+            <div data-ai-page-header>
+                <h1 data-ai-page-title>{props.title ?? 'Model Test Lab'}</h1>
+                <p data-ai-page-subtitle>
+                    Test AI models individually or compare them side-by-side
+                </p>
+            </div>
+
+            <ModelTestRunner
+                {...props}
+                availableModels={models}
+            />
+        </div>
+    )
+}

package/packages/react-css/src/pages/index.ts

@@ -0,0 +1,5 @@
+// @geenius-ai/react — src/pages/index.ts
+
+export { ChatPage, type ChatPageProps } from './ChatPage'
+export { ModelTestPage, type ModelTestPageProps } from './ModelTestPage'
+export { AILogsPage, type AILogsPageProps } from './AILogsPage'

package/packages/react-css/src/styles.css

@@ -0,0 +1,127 @@
+/* @geenius-ai — styles.css (premium vanilla CSS for AI components)
+ * oklch colors, dark-mode-first, responsive, data-* targeted
+ */
+
+:root {
+  --gai-bg: oklch(0.13 0.02 260);
+  --gai-surface: oklch(0.18 0.02 260);
+  --gai-surface-hover: oklch(0.22 0.02 260);
+  --gai-text: oklch(0.94 0.01 260);
+  --gai-text-muted: oklch(0.62 0.02 260);
+  --gai-border: oklch(0.28 0.02 260);
+  --gai-primary: oklch(0.65 0.22 265);
+  --gai-primary-dim: oklch(0.65 0.22 265 / 0.12);
+  --gai-success: oklch(0.68 0.18 155);
+  --gai-error: oklch(0.62 0.2 25);
+  --gai-warning: oklch(0.7 0.18 80);
+  --gai-radius: 12px;
+  --gai-radius-sm: 8px;
+  --gai-font: system-ui, -apple-system, sans-serif;
+  --gai-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+  --gai-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+[data-theme="light"] {
+  --gai-bg: oklch(0.97 0.005 260);
+  --gai-surface: oklch(1 0 0);
+  --gai-surface-hover: oklch(0.96 0.005 260);
+  --gai-text: oklch(0.15 0.02 260);
+  --gai-text-muted: oklch(0.5 0.02 260);
+  --gai-border: oklch(0.88 0.01 260);
+}
+
+/* ─── Chat Window ───────────────────────────────── */
+[data-chat-window] {
+  display: flex; flex-direction: column; height: 100%;
+  font-family: var(--gai-font); color: var(--gai-text); background: var(--gai-bg);
+  border: 1px solid var(--gai-border); border-radius: var(--gai-radius);
+  overflow: hidden;
+}
+[data-chat-header] { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--gai-surface); border-bottom: 1px solid var(--gai-border); }
+[data-chat-messages] { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
+[data-chat-message] { max-width: 80%; padding: 0.75rem 1rem; border-radius: var(--gai-radius); font-size: 0.875rem; line-height: 1.5; }
+[data-chat-message][data-role="user"] { align-self: flex-end; background: var(--gai-primary); color: white; border-bottom-right-radius: 4px; }
+[data-chat-message][data-role="assistant"] { align-self: flex-start; background: var(--gai-surface); border: 1px solid var(--gai-border); border-bottom-left-radius: 4px; }
+[data-chat-input-form] { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--gai-border); background: var(--gai-surface); }
+[data-chat-input] { flex: 1; padding: 0.625rem 1rem; border: 1px solid var(--gai-border); border-radius: var(--gai-radius-sm); background: var(--gai-bg); color: var(--gai-text); font-size: 0.875rem; outline: none; transition: border-color var(--gai-transition); }
+[data-chat-input]:focus { border-color: var(--gai-primary); }
+[data-chat-send] { padding: 0.625rem 1.25rem; background: var(--gai-primary); color: white; border: none; border-radius: var(--gai-radius-sm); font-weight: 600; font-size: 0.8125rem; cursor: pointer; transition: opacity var(--gai-transition); }
+[data-chat-send]:hover { opacity: 0.85; }
+[data-chat-send]:disabled { opacity: 0.4; cursor: not-allowed; }
+[data-chat-typing] { font-size: 0.75rem; color: var(--gai-text-muted); font-style: italic; padding: 0.25rem 1rem; }
+
+/* ─── Model Selector ────────────────────────────── */
+[data-model-selector] { position: relative; }
+[data-model-selector-trigger] { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--gai-border); border-radius: var(--gai-radius-sm); background: var(--gai-surface); color: var(--gai-text); font-size: 0.8125rem; cursor: pointer; transition: border-color var(--gai-transition); }
+[data-model-selector-trigger]:hover { border-color: var(--gai-primary); }
+[data-model-selector-dropdown] { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; background: var(--gai-surface); border: 1px solid var(--gai-border); border-radius: var(--gai-radius-sm); box-shadow: 0 8px 24px oklch(0 0 0 / 0.2); z-index: 50; max-height: 240px; overflow-y: auto; }
+[data-model-option] { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; font-size: 0.8125rem; cursor: pointer; transition: background var(--gai-transition); }
+[data-model-option]:hover { background: var(--gai-surface-hover); }
+[data-model-option][data-selected] { color: var(--gai-primary); font-weight: 600; }
+
+/* ─── AI Log Table ──────────────────────────────── */
+[data-ai-log-table] { border: 1px solid var(--gai-border); border-radius: var(--gai-radius); overflow: hidden; }
+[data-ai-log-header] { display: grid; grid-template-columns: 1fr 1fr 0.6fr 0.6fr 0.4fr; gap: 0; padding: 0.5rem 1rem; background: var(--gai-surface); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gai-text-muted); }
+[data-ai-log-row] { display: grid; grid-template-columns: 1fr 1fr 0.6fr 0.6fr 0.4fr; gap: 0; padding: 0.625rem 1rem; border-top: 1px solid oklch(0 0 0 / 0.04); font-size: 0.8125rem; transition: background var(--gai-transition); }
+[data-ai-log-row]:hover { background: var(--gai-surface-hover); }
+[data-ai-log-empty] { text-align: center; padding: 3rem 1rem; color: var(--gai-text-muted); }
+[data-ai-log-skeleton] { height: 2.5rem; background: var(--gai-surface); border-radius: var(--gai-radius-sm); animation: gai-pulse 1.5s infinite; margin-bottom: 0.25rem; }
+
+/* ─── Model Test Runner ─────────────────────────── */
+[data-model-test] { border: 1px solid var(--gai-border); border-radius: var(--gai-radius); overflow: hidden; }
+[data-model-test-header] { padding: 1rem; background: var(--gai-surface); border-bottom: 1px solid var(--gai-border); }
+[data-model-test-form] { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; }
+[data-model-test-input] { padding: 0.625rem 1rem; border: 1px solid var(--gai-border); border-radius: var(--gai-radius-sm); background: var(--gai-bg); color: var(--gai-text); font-size: 0.875rem; }
+[data-model-test-run] { align-self: flex-start; padding: 0.625rem 1.5rem; background: var(--gai-primary); color: white; border: none; border-radius: var(--gai-radius-sm); font-weight: 600; cursor: pointer; }
+[data-model-test-results] { padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
+[data-model-test-result] { padding: 0.75rem; border: 1px solid var(--gai-border); border-radius: var(--gai-radius-sm); font-size: 0.8125rem; }
+[data-model-test-result][data-success="true"] { border-left: 3px solid var(--gai-success); }
+[data-model-test-result][data-success="false"] { border-left: 3px solid var(--gai-error); }
+
+/* ─── Generation Card ───────────────────────────── */
+[data-generation-card] { border: 1px solid var(--gai-border); border-radius: var(--gai-radius); overflow: hidden; transition: box-shadow var(--gai-transition); }
+[data-generation-card]:hover { box-shadow: 0 4px 16px oklch(0 0 0 / 0.12); }
+[data-generation-preview] { aspect-ratio: 16/9; background: var(--gai-surface); display: flex; align-items: center; justify-content: center; overflow: hidden; }
+[data-generation-preview] img { width: 100%; height: 100%; object-fit: cover; }
+[data-generation-meta] { padding: 0.75rem 1rem; }
+[data-generation-type] { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gai-primary); }
+[data-generation-prompt] { font-size: 0.8125rem; margin-top: 0.25rem; color: var(--gai-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+[data-generation-actions] { display: flex; gap: 0.5rem; padding: 0.5rem 1rem; border-top: 1px solid var(--gai-border); }
+
+/* ─── Image Generator ───────────────────────────── */
+[data-image-generator] { border: 1px solid var(--gai-border); border-radius: var(--gai-radius); }
+[data-image-gen-form] { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
+[data-image-gen-textarea] { padding: 0.75rem; border: 1px solid var(--gai-border); border-radius: var(--gai-radius-sm); background: var(--gai-bg); color: var(--gai-text); font-size: 0.875rem; resize: vertical; min-height: 80px; font-family: var(--gai-font); }
+[data-image-gen-submit] { align-self: flex-start; padding: 0.625rem 1.5rem; background: var(--gai-primary); color: white; border: none; border-radius: var(--gai-radius-sm); font-weight: 600; cursor: pointer; }
+[data-image-gen-gallery] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; padding: 1rem; }
+
+/* ─── Voice Selector ────────────────────────────── */
+[data-voice-selector] { display: flex; flex-direction: column; gap: 0.5rem; }
+[data-voice-option] { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border: 1px solid var(--gai-border); border-radius: var(--gai-radius-sm); cursor: pointer; transition: all var(--gai-transition); }
+[data-voice-option]:hover { background: var(--gai-surface-hover); }
+[data-voice-option][data-selected] { border-color: var(--gai-primary); background: var(--gai-primary-dim); }
+[data-voice-name] { font-size: 0.875rem; font-weight: 600; }
+[data-voice-preview] { margin-left: auto; padding: 0.375rem 0.75rem; border: 1px solid var(--gai-border); border-radius: 6px; background: transparent; color: var(--gai-text); font-size: 0.75rem; cursor: pointer; }
+
+/* ─── Shared ─────────────────────────────────────── */
+[data-ai-empty] { text-align: center; padding: 3rem 1rem; color: var(--gai-text-muted); }
+[data-ai-empty-icon] { font-size: 2.5rem; margin-bottom: 0.5rem; }
+[data-ai-error] { padding: 1rem; border: 1px solid var(--gai-error); border-radius: var(--gai-radius-sm); background: oklch(0.62 0.2 25 / 0.08); color: var(--gai-error); font-size: 0.875rem; }
+[data-ai-loading] { display: flex; align-items: center; justify-content: center; padding: 2rem; color: var(--gai-text-muted); }
+[data-ai-badge] { display: inline-flex; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.625rem; font-weight: 700; }
+[data-ai-badge][data-variant="success"] { background: oklch(0.68 0.18 155 / 0.12); color: var(--gai-success); }
+[data-ai-badge][data-variant="error"] { background: oklch(0.62 0.2 25 / 0.12); color: var(--gai-error); }
+[data-ai-badge][data-variant="info"] { background: var(--gai-primary-dim); color: var(--gai-primary); }
+
+/* ─── Pages ──────────────────────────────────────── */
+[data-ai-page] { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; max-width: 1200px; margin: 0 auto; }
+[data-ai-page-header] h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
+[data-ai-page-header] p { font-size: 0.875rem; color: var(--gai-text-muted); margin-top: 0.25rem; }
+
+@keyframes gai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+
+@media (max-width: 768px) {
+  [data-ai-log-header], [data-ai-log-row] { grid-template-columns: 1fr 1fr 0.5fr; }
+  [data-chat-message] { max-width: 90%; }
+  [data-image-gen-gallery] { grid-template-columns: 1fr; }
+}

package/packages/react-css/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "ESNext",
+        "moduleResolution": "bundler",
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
+        "outDir": "./dist",
+        "rootDir": "./src",
+        "strict": true,
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "jsx": "react-jsx"
+    },
+    "include": [
+        "src"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist"
+    ]
+}

package/packages/react-css/tsup.config.ts

@@ -0,0 +1,2 @@
+import { defineConfig } from 'tsup'
+export default defineConfig({ entry: ['src/index.ts'], format: ['cjs', 'esm'], dts: true, clean: true, sourcemap: true, external: ['react'] })

package/packages/shared/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-ai/shared\n\n> Framework-agnostic AI types, config, provider abstraction, and Convex backend for geenius-ai\n\n---\n\n## Overview\nBuilt with Steve Jobs-level minimalism and Jony Ive-level craftsmanship, this package is designed to deliver unparalleled developer experience (DX) and rock-solid performance.\n\n## Installation\n\n```bash\npnpm add @geenius-ai/shared\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-ai/shared';\n\n// Initialize the module with absolute precision\ninit({\n  mode: 'premium',\n});\n```\n\n## Architecture\n- **Zero-config**: It just works.\n- **Strictly Typed**: Fully written in TypeScript for flawless IntelliSense.\n- **Framework Agnostic**: seamlessly integrates into the Geenius ecosystem.\n\n---\n\n*Designed by Antigravity HQ*\n

package/packages/shared/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@geenius-ai/shared",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "description": "Framework-agnostic AI types, config, provider abstraction, and Convex backend for geenius-ai",
+  "author": "Antigravity HQ",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./config": {
+      "types": "./dist/config.d.ts",
+      "import": "./dist/config.js"
+    },
+    "./providers": {
+      "types": "./dist/providers/index.d.ts",
+      "import": "./dist/providers/index.js"
+    },
+    "./convex": {
+      "types": "./dist/convex/index.d.ts",
+      "import": "./dist/convex/index.js"
+    },
+    "./content": {
+      "types": "./dist/content.d.ts",
+      "import": "./dist/content.js"
+    },
+    "./memory": {
+      "types": "./dist/memory.d.ts",
+      "import": "./dist/memory.js"
+    },
+    "./skills": {
+      "types": "./dist/skills.d.ts",
+      "import": "./dist/skills.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf dist",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "pnpm clean && pnpm build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "convex": ">=1.0.0"
+  },
+  "devDependencies": {
+    "convex": "^1.34.0",
+    "tsup": "^8.5.1",
+    "typescript": "~6.0.2",
+    "vitest": "^4.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}