@geenius/i18n 0.1.0

package/packages/react/src/components/index.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react'
+import type { Locale, Direction, TranslationEntry, MissingKey, LocaleStat } from '@geenius-i18n/shared'
+import { LOCALE_INFO } from '@geenius-i18n/shared'
+
+export function LocaleSwitcher({ locales, current, onChange }: { locales: Locale[]; current: Locale; onChange: (l: Locale) => void }) {
+  const [open, setOpen] = useState(false)
+  const info = LOCALE_INFO[current]
+  return (
+    <div className="relative">
+      <button type="button" onClick={() => setOpen(!open)} className="flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-white hover:bg-white/10 transition-all">
+        <span className="text-lg">{info?.flag}</span><span>{info?.nativeName}</span><span className="text-white/30 text-xs ml-1">▼</span>
+      </button>
+      {open && (
+        <div className="absolute top-full mt-1 right-0 z-50 min-w-[200px] rounded-xl border border-white/10 bg-[#111118] py-1 shadow-xl">
+          {locales.map(l => { const li = LOCALE_INFO[l]; return (
+            <button key={l} type="button" onClick={() => { onChange(l); setOpen(false) }}
+              className={`flex w-full items-center gap-3 px-4 py-2.5 text-sm transition-colors ${current === l ? 'bg-indigo-500/15 text-indigo-300' : 'text-white/70 hover:bg-white/5'}`}>
+              <span className="text-lg">{li?.flag}</span><span>{li?.nativeName}</span><span className="text-xs text-white/30 ml-auto">{li?.name}</span>
+              {li?.direction === 'rtl' && <span className="text-[10px] px-1 py-0.5 rounded bg-amber-500/15 text-amber-400">RTL</span>}
+            </button>
+          )})}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function RTLWrapper({ children, locale }: { children: React.ReactNode; locale?: Locale }) {
+  const dir = locale ? LOCALE_INFO[locale]?.direction ?? 'ltr' : 'ltr'
+  return <div dir={dir} style={{ textAlign: dir === 'rtl' ? 'right' : 'left' }}>{children}</div>
+}
+
+export function TranslationEditor({ onSave, initialKey, initialLocale, namespaces }: { onSave: (locale: string, ns: string, key: string, value: string) => void; initialKey?: string; initialLocale?: Locale; namespaces?: string[] }) {
+  const [locale, setLocale] = useState<string>(initialLocale ?? 'en')
+  const [ns, setNs] = useState(namespaces?.[0] ?? 'common')
+  const [key, setKey] = useState(initialKey ?? ''); const [value, setValue] = useState('')
+  return (
+    <div className="space-y-3 rounded-xl border border-white/8 bg-white/[0.02] p-5">
+      <div className="flex gap-2">
+        <select value={locale} onChange={e => setLocale(e.target.value)} className="rounded-lg border border-white/10 bg-white/5 px-2 py-1.5 text-xs text-white outline-none">{Object.entries(LOCALE_INFO).map(([code, info]) => <option key={code} value={code}>{info.flag} {info.name}</option>)}</select>
+        <select value={ns} onChange={e => setNs(e.target.value)} className="rounded-lg border border-white/10 bg-white/5 px-2 py-1.5 text-xs text-white outline-none">{(namespaces ?? ['common', 'auth', 'dashboard', 'billing', 'errors']).map(n => <option key={n} value={n}>{n}</option>)}</select>
+      </div>
+      <input type="text" placeholder="Translation key (e.g. auth.login_button)" value={key} onChange={e => setKey(e.target.value)} className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none focus:border-indigo-500/40" />
+      <textarea placeholder="Translation value…" value={value} onChange={e => setValue(e.target.value)} rows={3} className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2.5 text-sm text-white placeholder-white/30 outline-none focus:border-indigo-500/40 resize-none" />
+      <button type="button" onClick={() => { onSave(locale, ns, key, value); setKey(''); setValue('') }} disabled={!key || !value} className="rounded-lg bg-indigo-600 px-4 py-2 text-xs font-medium text-white hover:bg-indigo-500 disabled:opacity-50">Save Translation</button>
+    </div>
+  )
+}
+
+export function TranslationTable({ translations, locale, onUpdate, onDelete }: { translations: TranslationEntry[]; locale: Locale; onUpdate?: (key: string, value: string) => void; onDelete?: (key: string) => void }) {
+  if (translations.length === 0) return <div className="flex flex-col items-center py-12"><div className="mb-3 text-4xl opacity-20">🌐</div><p className="text-sm text-white/40">No translations for this locale</p></div>
+  return (
+    <div className="overflow-x-auto rounded-xl border border-white/8">
+      <table className="w-full text-sm"><thead><tr className="border-b border-white/8 bg-white/[0.02]"><th className="px-4 py-3 text-left text-xs font-medium text-white/40 uppercase">Key</th><th className="px-4 py-3 text-left text-xs font-medium text-white/40 uppercase">Value</th><th className="px-4 py-3 text-left text-xs font-medium text-white/40 uppercase">Namespace</th><th className="px-4 py-3 text-right text-xs font-medium text-white/40 uppercase">Actions</th></tr></thead>
+      <tbody className="divide-y divide-white/5">{translations.map(t => (
+        <tr key={t.id} className="group hover:bg-white/[0.02]">
+          <td className="px-4 py-3 font-mono text-xs text-indigo-300">{t.key}</td>
+          <td className="px-4 py-3 text-white/70 max-w-xs truncate">{t.value}</td>
+          <td className="px-4 py-3"><span className="rounded bg-white/5 px-1.5 py-0.5 text-[10px] text-white/40">{t.namespace}</span></td>
+          <td className="px-4 py-3 text-right">{onDelete && <button type="button" onClick={() => onDelete(t.key)} className="rounded px-2 py-1 text-xs text-white/20 hover:text-red-400 opacity-0 group-hover:opacity-100">Delete</button>}</td>
+        </tr>
+      ))}</tbody></table>
+    </div>
+  )
+}
+
+export function MissingKeyAlert({ count, locale }: { count: number; locale: Locale }) {
+  if (count === 0) return null
+  return <div className="flex items-center gap-3 rounded-lg border border-red-500/20 bg-red-500/[0.05] px-4 py-2.5"><span className="text-sm">⚠️</span><span className="text-xs text-red-300">{count} missing key{count > 1 ? 's' : ''} for <strong>{LOCALE_INFO[locale]?.name}</strong></span></div>
+}
+
+export function LocaleStatsCard({ stats }: { stats: LocaleStat[] }) {
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">{stats.map(s => {
+      const info = LOCALE_INFO[s.locale]
+      const color = s.coverage >= 90 ? 'bg-emerald-500' : s.coverage >= 70 ? 'bg-amber-500' : 'bg-red-500'
+      return (
+        <div key={s.locale} className="rounded-xl border border-white/8 bg-white/[0.02] p-4">
+          <div className="flex items-center gap-2 mb-2"><span className="text-lg">{info?.flag}</span><span className="text-xs font-medium text-white/80">{info?.nativeName}</span></div>
+          <div className="mb-1 flex justify-between text-[10px] text-white/40"><span>{s.totalKeys} keys</span><span className="font-bold">{s.coverage}%</span></div>
+          <div className="h-1.5 rounded-full bg-white/5 overflow-hidden"><div className={`h-full rounded-full ${color}`} style={{ width: `${s.coverage}%` }} /></div>
+          {s.missingKeys > 0 && <p className="mt-1.5 text-[10px] text-red-400">{s.missingKeys} missing</p>}
+        </div>
+      )
+    })}</div>
+  )
+}

package/packages/react/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { I18nProvider, useI18n } from './useI18n'
+export { useLocaleDetect } from './useLocaleDetect'
+export { useTranslations } from './useTranslations'
+export { useI18nAdmin } from './useI18nAdmin'

package/packages/react/src/hooks/useI18n.tsx

@@ -0,0 +1,50 @@
+import React, { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react'
+import type { Locale, Direction, TranslationDict, I18nConfig } from '@geenius-i18n/shared'
+import { t as tFn, plural, formatDate as fmtDate, formatNumber as fmtNum, formatCurrency as fmtCur, getDirection, isRTL as checkRTL, detectLocale, LOCALE_INFO } from '@geenius-i18n/shared'
+
+interface I18nContextValue {
+  locale: Locale; direction: Direction; isRTL: boolean
+  setLocale: (l: Locale) => void; t: (key: string, params?: Record<string, string | number>) => string
+  formatDate: (date: Date | string, opts?: Intl.DateTimeFormatOptions) => string
+  formatNumber: (n: number, opts?: Intl.NumberFormatOptions) => string
+  formatCurrency: (amount: number, currency: string) => string
+}
+
+const I18nContext = createContext<I18nContextValue | null>(null)
+
+export function I18nProvider({ children, config, translations }: { children: React.ReactNode; config: I18nConfig; translations?: TranslationDict }) {
+  const [locale, setLocaleState] = useState<Locale>(() => {
+    if (config.persistLocale && typeof localStorage !== 'undefined') {
+      const saved = localStorage.getItem('geenius-locale')
+      if (saved && config.supportedLocales.includes(saved as Locale)) return saved as Locale
+    }
+    if (config.detectBrowser) return detectLocale(config.supportedLocales)
+    return config.defaultLocale
+  })
+
+  const setLocale = useCallback((l: Locale) => {
+    setLocaleState(l)
+    if (config.persistLocale && typeof localStorage !== 'undefined') localStorage.setItem('geenius-locale', l)
+    if (typeof document !== 'undefined') { document.documentElement.dir = getDirection(l); document.documentElement.lang = l }
+  }, [config.persistLocale])
+
+  useEffect(() => {
+    if (typeof document !== 'undefined') { document.documentElement.dir = getDirection(locale); document.documentElement.lang = locale }
+  }, [locale])
+
+  const value = useMemo<I18nContextValue>(() => ({
+    locale, direction: getDirection(locale), isRTL: checkRTL(locale), setLocale,
+    t: (key, params) => tFn(key, translations ?? {}, params),
+    formatDate: (date, opts) => fmtDate(date, locale, opts),
+    formatNumber: (n, opts) => fmtNum(n, locale, opts),
+    formatCurrency: (amount, currency) => fmtCur(amount, currency, locale),
+  }), [locale, setLocale, translations])
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>
+}
+
+export function useI18n() {
+  const ctx = useContext(I18nContext)
+  if (!ctx) throw new Error('useI18n must be used within I18nProvider')
+  return ctx
+}

package/packages/react/src/hooks/useI18nAdmin.ts

@@ -0,0 +1,12 @@
+import { useState, useMemo } from 'react'
+import type { TranslationEntry, MissingKey, LocaleStat } from '@geenius-i18n/shared'
+
+export function useI18nAdmin(data: { translations?: TranslationEntry[]; missingKeys?: MissingKey[]; localeStats?: LocaleStat[] }, mutations: { upsert: (locale: string, ns: string, key: string, value: string) => Promise<void>; deleteKey: (locale: string, key: string) => Promise<void>; importDict: (locale: string, ns: string, dict: Record<string, string>) => Promise<void>; clearMissing: (id: string) => Promise<void> }) {
+  const [search, setSearch] = useState('')
+  const filteredTranslations = useMemo(() => {
+    if (!search) return data.translations ?? []
+    const q = search.toLowerCase()
+    return (data.translations ?? []).filter(t => t.key.toLowerCase().includes(q) || t.value.toLowerCase().includes(q))
+  }, [data.translations, search])
+  return { translations: filteredTranslations, missingKeys: data.missingKeys ?? [], localeStats: data.localeStats ?? [], search, setSearch, isLoading: data.translations === undefined, ...mutations }
+}

package/packages/react/src/hooks/useLocaleDetect.ts

@@ -0,0 +1,10 @@
+import { useState, useEffect } from 'react'
+import type { Locale } from '@geenius-i18n/shared'
+import { detectLocale } from '@geenius-i18n/shared'
+
+export function useLocaleDetect(supportedLocales: Locale[]) {
+  const [detectedLocale, setDetected] = useState<Locale>(supportedLocales[0])
+  const [isDetecting, setDetecting] = useState(true)
+  useEffect(() => { setDetected(detectLocale(supportedLocales)); setDetecting(false) }, [supportedLocales])
+  return { detectedLocale, isDetecting }
+}

package/packages/react/src/hooks/useTranslations.ts

@@ -0,0 +1,11 @@
+import { useState, useEffect, useCallback, useMemo } from 'react'
+import type { Locale, TranslationDict, I18nNamespace } from '@geenius-i18n/shared'
+import { t as tFn, loadNamespace } from '@geenius-i18n/shared'
+
+export function useTranslations(locale: Locale, namespace: I18nNamespace) {
+  const [dict, setDict] = useState<TranslationDict>({})
+  const [isLoading, setLoading] = useState(true)
+  useEffect(() => { setLoading(true); loadNamespace(locale, namespace).then(d => { setDict(d); setLoading(false) }) }, [locale, namespace])
+  const t = useCallback((key: string, params?: Record<string, string | number>) => tFn(key, dict, params), [dict])
+  return { dict, isLoading, t }
+}

package/packages/react/src/index.tsx

@@ -0,0 +1,8 @@
+export { I18nProvider, useI18n } from './hooks/useI18n'
+export { useLocaleDetect } from './hooks/useLocaleDetect'
+export { useTranslations } from './hooks/useTranslations'
+export { useI18nAdmin } from './hooks/useI18nAdmin'
+export { LocaleSwitcher, RTLWrapper, TranslationEditor, TranslationTable, MissingKeyAlert, LocaleStatsCard } from './components'
+export { I18nAdminPage } from './pages/I18nAdminPage'
+export { LocalePreviewPage } from './pages/LocalePreviewPage'
+export type { Locale, Direction, I18nNamespace, TranslationDict, I18nConfig, LocaleInfo, TranslationEntry, MissingKey, LocaleStat } from '@geenius-i18n/shared'

package/packages/react/src/pages/I18nAdminPage.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react'
+import type { Locale, TranslationEntry, MissingKey, LocaleStat } from '@geenius-i18n/shared'
+import { LOCALE_INFO, ALL_LOCALES } from '@geenius-i18n/shared'
+import { useI18nAdmin } from '../hooks/useI18nAdmin'
+import { LocaleStatsCard, MissingKeyAlert, TranslationTable, TranslationEditor } from '../components'
+
+interface I18nAdminPageProps { translations?: TranslationEntry[]; missingKeys?: MissingKey[]; localeStats?: LocaleStat[]; mutations: Parameters<typeof useI18nAdmin>[1] }
+
+export function I18nAdminPage({ translations, missingKeys, localeStats, mutations }: I18nAdminPageProps) {
+  const admin = useI18nAdmin({ translations, missingKeys, localeStats }, mutations)
+  const [selectedLocale, setSelectedLocale] = useState<Locale>('en')
+  const [selectedNs, setSelectedNs] = useState('common')
+
+  const filteredTranslations = admin.translations.filter(t => t.locale === selectedLocale && t.namespace === selectedNs)
+
+  if (admin.isLoading) return (
+    <div className="min-h-screen bg-[#090a0f] px-6 py-12"><div className="mx-auto max-w-6xl">
+      <div className="mb-8 h-10 w-48 animate-pulse rounded-lg bg-white/5" />
+      <div className="mb-6 grid grid-cols-4 gap-3">{Array.from({ length: 8 }).map((_, i) => <div key={i} className="h-20 animate-pulse rounded-xl bg-white/5" />)}</div>
+      <div className="h-96 animate-pulse rounded-xl bg-white/5" />
+    </div></div>
+  )
+
+  return (
+    <div className="min-h-screen bg-[#090a0f] text-white"><div className="mx-auto max-w-6xl px-6 py-12">
+      <h1 className="text-2xl font-bold tracking-tight mb-8">Translation Admin</h1>
+      {admin.localeStats.length > 0 && <div className="mb-8"><h2 className="text-sm font-semibold text-white/60 mb-4">Locale Coverage</h2><LocaleStatsCard stats={admin.localeStats} /></div>}
+      {admin.missingKeys.length > 0 && <div className="mb-6"><MissingKeyAlert count={admin.missingKeys.filter(m => m.locale === selectedLocale).length} locale={selectedLocale} /></div>}
+      <div className="grid gap-6 lg:grid-cols-3">
+        <div className="lg:col-span-2 space-y-4">
+          <div className="flex flex-wrap items-center gap-3">
+            <select value={selectedLocale} onChange={e => setSelectedLocale(e.target.value as Locale)} className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-white outline-none">{ALL_LOCALES.map(l => <option key={l} value={l}>{LOCALE_INFO[l].flag} {LOCALE_INFO[l].name}</option>)}</select>
+            <select value={selectedNs} onChange={e => setSelectedNs(e.target.value)} className="rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-white outline-none">{['common', 'auth', 'dashboard', 'billing', 'errors'].map(n => <option key={n} value={n}>{n}</option>)}</select>
+            <input type="text" placeholder="Search…" value={admin.search} onChange={e => admin.setSearch(e.target.value)} className="ml-auto w-48 rounded-xl border border-white/10 bg-white/5 px-3 py-2 text-sm text-white placeholder-white/30 outline-none" />
+          </div>
+          <TranslationTable translations={filteredTranslations} locale={selectedLocale} onDelete={(key) => admin.deleteKey(selectedLocale, key)} />
+        </div>
+        <div><TranslationEditor onSave={(l, ns, k, v) => admin.upsert(l, ns, k, v)} initialLocale={selectedLocale} /></div>
+      </div>
+    </div></div>
+  )
+}

package/packages/react/src/pages/LocalePreviewPage.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import type { I18nConfig, TranslationDict } from '@geenius-i18n/shared'
+import { LOCALE_INFO, ALL_LOCALES } from '@geenius-i18n/shared'
+import { useI18n, I18nProvider } from '../hooks/useI18n'
+import { LocaleSwitcher, RTLWrapper } from '../components'
+
+function PreviewContent() {
+  const { locale, t, direction, isRTL, setLocale, formatDate, formatNumber, formatCurrency } = useI18n()
+  const info = LOCALE_INFO[locale]
+  return (
+    <div className="min-h-screen bg-[#090a0f] text-white"><div className="mx-auto max-w-3xl px-6 py-12">
+      <div className="mb-8 flex items-center justify-between"><h1 className="text-2xl font-bold tracking-tight">Locale Preview</h1><LocaleSwitcher locales={ALL_LOCALES} current={locale} onChange={setLocale} /></div>
+      <div className="mb-6 grid grid-cols-2 gap-4 md:grid-cols-4">
+        <InfoCard label="Locale" value={locale.toUpperCase()} />
+        <InfoCard label="Direction" value={direction} highlight={isRTL} />
+        <InfoCard label="Native" value={info?.nativeName ?? '?'} />
+        <InfoCard label="Flag" value={info?.flag ?? '?'} />
+      </div>
+      <RTLWrapper locale={locale}>
+        <div className="space-y-6">
+          <div className="rounded-xl border border-white/8 bg-white/[0.02] p-5">
+            <h3 className="text-sm font-semibold text-white/80 mb-4">Formatting Examples</h3>
+            <div className="space-y-3 text-sm">
+              <Row label="Date" value={formatDate(new Date())} />
+              <Row label="Date (full)" value={formatDate(new Date(), { dateStyle: 'full' })} />
+              <Row label="Number" value={formatNumber(1234567.89)} />
+              <Row label="Currency (USD)" value={formatCurrency(9999.99, 'USD')} />
+              <Row label="Currency (EUR)" value={formatCurrency(4250.50, 'EUR')} />
+              <Row label="Percentage" value={formatNumber(0.85, { style: 'percent' })} />
+            </div>
+          </div>
+          {isRTL && <div className="rounded-lg border border-amber-500/20 bg-amber-500/[0.05] px-4 py-3 text-sm text-amber-300">⚡ RTL mode active — text flows right-to-left</div>}
+          <div className="rounded-xl border border-white/8 bg-white/[0.02] p-5">
+            <h3 className="text-sm font-semibold text-white/80 mb-3">Sample Text</h3>
+            <p className="text-sm text-white/60 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+          </div>
+        </div>
+      </RTLWrapper>
+    </div></div>
+  )
+}
+
+function InfoCard({ label, value, highlight }: { label: string; value: string; highlight?: boolean }) {
+  return <div className="rounded-xl border border-white/8 bg-white/[0.02] p-4"><p className="text-[10px] text-white/40 mb-1 uppercase">{label}</p><p className={`text-lg font-bold ${highlight ? 'text-amber-400' : 'text-white/90'}`}>{value}</p></div>
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+  return <div className="flex justify-between"><span className="text-white/40">{label}</span><span className="text-white/80 font-mono text-xs">{value}</span></div>
+}
+
+export function LocalePreviewPage({ config, translations }: { config?: Partial<import('@geenius-i18n/shared').I18nConfig>; translations?: TranslationDict }) {
+  const fullConfig: import('@geenius-i18n/shared').I18nConfig = { defaultLocale: 'en', supportedLocales: ALL_LOCALES, detectBrowser: true, persistLocale: true, ...config }
+  return <I18nProvider config={fullConfig} translations={translations}><PreviewContent /></I18nProvider>
+}

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

@@ -0,0 +1,2 @@
+export { I18nAdminPage } from './I18nAdminPage'
+export { LocalePreviewPage } from './LocalePreviewPage'

package/packages/react/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler"
+  },
+  "include": [
+    "src"
+  ]
+}

package/packages/react/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+    entry: { index: 'src/index.tsx' },
+    outDir: 'dist',
+    format: ['esm'],
+    dts: true,
+    sourcemap: true,
+    clean: true,
+    treeshake: true,
+    external: ['react', 'react-dom'],
+})

package/packages/react-css/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-i18n/react-css\n\n> Geenius i18n — React components & hooks (vanilla CSS variant)\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-i18n/react-css\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-i18n/react-css';\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/react-css/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@geenius-i18n/react-css",
+  "version": "0.1.0",
+  "description": "Geenius i18n — React components & hooks (vanilla CSS variant)",
+  "type": "module",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": "./src/index.tsx"
+  },
+  "scripts": {
+    "type-check": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@geenius-i18n/shared": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "~6.0.2"
+  },
+  "author": "Antigravity HQ",
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/packages/react-css/src/components/index.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react'
+import type { Locale, TranslationEntry, LocaleStat, MissingKey } from '@geenius-i18n/shared'
+import { LOCALE_INFO, ALL_LOCALES } from '@geenius-i18n/shared'
+
+export function LocaleSwitcher({ locales, current, onChange }: { locales: Locale[]; current: Locale; onChange: (l: Locale) => void }) {
+  const [open, setOpen] = useState(false)
+  const info = LOCALE_INFO[current]
+  return (
+    <div className="i18n__locale-switcher">
+      <button type="button" className="i18n__locale-switcher-btn" onClick={() => setOpen(!open)}>
+        <span className="i18n__locale-switcher-flag">{info?.flag}</span><span>{info?.nativeName}</span><span className="i18n__locale-switcher-arrow">▼</span>
+      </button>
+      {open && <div className="i18n__locale-dropdown">{locales.map(l => { const li = LOCALE_INFO[l]; return (
+        <button key={l} type="button" onClick={() => { onChange(l); setOpen(false) }} className={`i18n__locale-option ${current === l ? 'i18n__locale-option--active' : ''}`}>
+          <span className="i18n__locale-option-flag">{li?.flag}</span><span className="i18n__locale-option-name">{li?.nativeName}</span><span className="i18n__locale-option-eng">{li?.name}</span>
+          {li?.direction === 'rtl' && <span className="i18n__locale-option-rtl">RTL</span>}
+        </button>
+      )})}</div>}
+    </div>
+  )
+}
+
+export function RTLWrapper({ children, locale }: { children: React.ReactNode; locale?: Locale }) {
+  const dir = locale ? LOCALE_INFO[locale]?.direction ?? 'ltr' : 'ltr'
+  return <div className="i18n__rtl-wrapper" dir={dir}>{children}</div>
+}
+
+export function TranslationEditor({ onSave, initialLocale, namespaces }: { onSave: (l: string, ns: string, k: string, v: string) => void; initialLocale?: Locale; namespaces?: string[] }) {
+  const [locale, setLocale] = useState<string>(initialLocale ?? 'en'); const [ns, setNs] = useState(namespaces?.[0] ?? 'common')
+  const [key, setKey] = useState(''); const [value, setValue] = useState('')
+  return (
+    <div className="i18n__editor">
+      <div className="i18n__editor-selectors">
+        <select value={locale} onChange={e => setLocale(e.target.value)} className="i18n__editor-select">{Object.entries(LOCALE_INFO).map(([c, i]) => <option key={c} value={c}>{i.flag} {i.name}</option>)}</select>
+        <select value={ns} onChange={e => setNs(e.target.value)} className="i18n__editor-select">{(namespaces ?? ['common','auth','dashboard','billing','errors']).map(n => <option key={n} value={n}>{n}</option>)}</select>
+      </div>
+      <input type="text" className="i18n__editor-input" placeholder="Translation key…" value={key} onChange={e => setKey(e.target.value)} />
+      <textarea className="i18n__editor-input i18n__editor-textarea" placeholder="Translation value…" value={value} onChange={e => setValue(e.target.value)} />
+      <button type="button" className="i18n__btn i18n__btn--primary" disabled={!key || !value} onClick={() => { onSave(locale, ns, key, value); setKey(''); setValue('') }}>Save Translation</button>
+    </div>
+  )
+}
+
+export function TranslationTable({ translations, locale, onDelete }: { translations: TranslationEntry[]; locale: Locale; onDelete?: (key: string) => void }) {
+  if (translations.length === 0) return <div className="i18n__empty"><div className="i18n__empty-icon">🌐</div><div className="i18n__empty-text">No translations for this locale</div></div>
+  return (
+    <div style={{ overflowX: 'auto', borderRadius: 'var(--i18n-radius)', border: '1px solid var(--i18n-border)' }}>
+      <table className="i18n__translation-table"><thead><tr><th>Key</th><th>Value</th><th>NS</th><th style={{ textAlign: 'right' }}>Actions</th></tr></thead>
+      <tbody>{translations.map(t => <tr key={t.id} className="i18n__translation-row"><td className="i18n__translation-key">{t.key}</td><td className="i18n__translation-value">{t.value}</td><td><span className="i18n__translation-ns">{t.namespace}</span></td><td style={{ textAlign: 'right' }}>{onDelete && <button type="button" className="i18n__delete-btn" onClick={() => onDelete(t.key)}>Delete</button>}</td></tr>)}</tbody></table>
+    </div>
+  )
+}
+
+export function MissingKeyAlert({ count, locale }: { count: number; locale: Locale }) {
+  if (count === 0) return null
+  return <div className="i18n__missing-badge"><span className="i18n__missing-badge-icon">⚠️</span><span className="i18n__missing-badge-text">{count} missing key{count > 1 ? 's' : ''} for <strong>{LOCALE_INFO[locale]?.name}</strong></span></div>
+}
+
+export function LocaleStatsCard({ stats }: { stats: LocaleStat[] }) {
+  return (
+    <div className="i18n__stats-grid">{stats.map(s => {
+      const info = LOCALE_INFO[s.locale]; const barClass = s.coverage >= 90 ? 'i18n__stats-bar-fill--complete' : s.coverage >= 70 ? 'i18n__stats-bar-fill--partial' : 'i18n__stats-bar-fill--low'
+      return <div key={s.locale} className="i18n__stats-card"><div className="i18n__stats-card-header"><span className="i18n__stats-card-flag">{info?.flag}</span><span className="i18n__stats-card-name">{info?.nativeName}</span></div><div className="i18n__stats-card-meta"><span>{s.totalKeys} keys</span><span style={{ fontWeight: 700 }}>{s.coverage}%</span></div><div className="i18n__stats-bar"><div className={`i18n__stats-bar-fill ${barClass}`} style={{ width: `${s.coverage}%` }} /></div>{s.missingKeys > 0 && <div className="i18n__stats-card-missing">{s.missingKeys} missing</div>}</div>
+    })}</div>
+  )
+}

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

@@ -0,0 +1,4 @@
+export { I18nProvider, useI18n } from '@geenius-i18n/react'
+export { useLocaleDetect } from '@geenius-i18n/react'
+export { useTranslations } from '@geenius-i18n/react'
+export { useI18nAdmin } from '@geenius-i18n/react'

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

@@ -0,0 +1,4 @@
+export { I18nProvider, useI18n, useLocaleDetect, useTranslations, useI18nAdmin } from './hooks'
+export { LocaleSwitcher, RTLWrapper, TranslationEditor, TranslationTable, MissingKeyAlert, LocaleStatsCard } from './components'
+import './styles.css'
+export type { Locale, Direction, I18nNamespace, TranslationDict, I18nConfig, LocaleInfo, TranslationEntry, MissingKey, LocaleStat } from '@geenius-i18n/shared'

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

@@ -0,0 +1,74 @@
+import React from 'react';
+import '../styles.css';
+
+const LocaleSettingsPage: React.FC = () => {
+  const locales = [
+    { code: 'en', name: 'English', flag: '🇺🇸' },
+    { code: 'es', name: 'Spanish', flag: '🇪🇸' },
+    { code: 'ja', name: 'Japanese', flag: '🇯🇵' },
+    { code: 'de', name: 'German', flag: '🇩🇪' },
+  ];
+
+  return (
+    <div style={{ padding: '1.5rem' }}>
+      <div className="i18n__breadcrumb">
+        <span className="i18n__breadcrumb-item">i18n</span>
+        <span className="i18n__breadcrumb-sep">/</span>
+        <span className="i18n__breadcrumb-item--active">Locale Settings</span>
+      </div>
+
+      <div className="i18n__rtl-toggle-panel">
+        <div className="i18n__rtl-toggle-header">
+          <span className="i18n__rtl-toggle-label">Enable RTL Support</span>
+          <button className="i18n__rtl-toggle-switch">
+            <span className="i18n__rtl-toggle-knob" />
+          </button>
+        </div>
+      </div>
+
+      <h2 style={{ fontSize: '0.875rem', fontWeight: '600', marginBottom: '1rem', color: 'oklch(1 0 0 / 0.8)' }}>
+        Available Locales
+      </h2>
+
+      <div className="i18n__locale-selector-grid">
+        {locales.map(locale => (
+          <div key={locale.code} className="i18n__locale-card">
+            <div className="i18n__locale-card-flag">{locale.flag}</div>
+            <div className="i18n__locale-card-name">{locale.name}</div>
+            <div className="i18n__locale-card-code">{locale.code}</div>
+          </div>
+        ))}
+      </div>
+
+      <div className="i18n__import-export-panel" style={{ marginTop: '2rem' }}>
+        <div className="i18n__import-export-title">Import / Export Translations</div>
+        <div className="i18n__import-export-row">
+          <div className="i18n__import-export-col">
+            <label className="i18n__import-export-label">Import from File</label>
+            <button className="i18n__import-btn">Select File</button>
+          </div>
+          <div className="i18n__import-export-col">
+            <label className="i18n__import-export-label">Export All Translations</label>
+            <button className="i18n__export-btn">Download JSON</button>
+          </div>
+        </div>
+      </div>
+
+      <div className="i18n__format-examples" style={{ marginTop: '2rem' }}>
+        <div className="i18n__format-example-title">Translation Format Examples</div>
+        <div className="i18n__format-example-list">
+          <div className="i18n__format-example-item">
+            <div className="i18n__format-example-key">common.greeting</div>
+            <div className="i18n__format-example-value">Hello, {'{name}'}</div>
+          </div>
+          <div className="i18n__format-example-item">
+            <div className="i18n__format-example-key">common.farewell</div>
+            <div className="i18n__format-example-value">Goodbye</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LocaleSettingsPage;

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import '../styles.css';
+
+const TranslationsPage: React.FC = () => {
+  const translations = [
+    { key: 'welcome.title', en: 'Welcome to our app', es: 'Bienvenido a nuestra app', status: 'complete' },
+    { key: 'welcome.subtitle', en: 'Get started here', es: '', status: 'missing' },
+    { key: 'button.save', en: 'Save', es: 'Guardar', status: 'complete' },
+  ];
+
+  return (
+    <div style={{ padding: '1.5rem' }}>
+      <div className="i18n__breadcrumb">
+        <span className="i18n__breadcrumb-item">i18n</span>
+        <span className="i18n__breadcrumb-sep">/</span>
+        <span className="i18n__breadcrumb-item--active">Translations</span>
+      </div>
+
+      <div className="i18n__stats-grid">
+        <div className="i18n__stats-card">
+          <div className="i18n__stats-card-header">
+            <div className="i18n__stats-card-flag">🌍</div>
+            <div className="i18n__stats-card-name">English</div>
+          </div>
+          <div className="i18n__stats-bar">
+            <div className="i18n__stats-bar-fill i18n__stats-bar-fill--complete" style={{ width: '100%' }} />
+          </div>
+          <div className="i18n__stats-card-meta">
+            <span>45 strings</span>
+            <span>100%</span>
+          </div>
+        </div>
+        <div className="i18n__stats-card">
+          <div className="i18n__stats-card-header">
+            <div className="i18n__stats-card-flag">🇪🇸</div>
+            <div className="i18n__stats-card-name">Spanish</div>
+          </div>
+          <div className="i18n__stats-bar">
+            <div className="i18n__stats-bar-fill i18n__stats-bar-fill--partial" style={{ width: '85%' }} />
+          </div>
+          <div className="i18n__stats-card-meta">
+            <span>38 strings</span>
+            <span>85%</span>
+          </div>
+        </div>
+        <div className="i18n__stats-card">
+          <div className="i18n__stats-card-header">
+            <div className="i18n__stats-card-flag">🇯🇵</div>
+            <div className="i18n__stats-card-name">Japanese</div>
+          </div>
+          <div className="i18n__stats-bar">
+            <div className="i18n__stats-bar-fill i18n__stats-bar-fill--low" style={{ width: '45%' }} />
+          </div>
+          <div className="i18n__stats-card-meta">
+            <span>20 strings</span>
+            <span>45%</span>
+          </div>
+          <div className="i18n__stats-card-missing">7 missing keys</div>
+        </div>
+      </div>
+
+      <div className="i18n__search" style={{ marginTop: '1.5rem', marginBottom: '1.5rem' }}>
+        <input type="text" className="i18n__search" placeholder="Search translations..." />
+      </div>
+
+      <table className="i18n__translation-table">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>English</th>
+            <th>Spanish</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {translations.map(t => (
+            <tr key={t.key} className="i18n__translation-row">
+              <td>
+                <div className="i18n__translation-key">{t.key}</div>
+              </td>
+              <td className="i18n__translation-value">{t.en}</td>
+              <td className="i18n__translation-value">{t.es || <span style={{ color: 'oklch(0.60 0.25 25)' }}>Missing</span>}</td>
+              <td>
+                <span className={`i18n__status-badge i18n__status-badge--${t.status === 'complete' ? 'open' : 'open'}`}>
+                  {t.status}
+                </span>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <button className="i18n__delete-btn">🗑️ Delete</button>
+    </div>
+  );
+};
+
+export default TranslationsPage;