@geenius/i18n 0.1.0

package/packages/solidjs/src/components/LocaleSwitcher.tsx

@@ -0,0 +1,65 @@
+import { createSignal, Show, For } from 'solid-js'
+import type { Component } from 'solid-js'
+import type { Locale } from '@geenius-i18n/shared'
+import { LOCALE_INFO } from '@geenius-i18n/shared'
+
+interface Props {
+  locales: Locale[]
+  current: Locale
+  onChange: (l: Locale) => void
+}
+
+export const LocaleSwitcher: Component<Props> = (props) => {
+  const [open, setOpen] = createSignal(false)
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <button
+        type="button"
+        onClick={() => setOpen(!open())}
+        style={{
+          display: 'flex', alignItems: 'center', gap: '0.5rem',
+          borderRadius: '0.75rem', border: '1px solid oklch(1 0 0 / 0.1)',
+          background: 'oklch(1 0 0 / 0.05)', padding: '0.5rem 0.75rem',
+          fontSize: '0.875rem', color: 'white', cursor: 'pointer',
+        }}
+      >
+        <span style={{ 'font-size': '1.125rem' }}>{LOCALE_INFO[props.current]?.flag}</span>
+        {LOCALE_INFO[props.current]?.nativeName}
+        <span style={{ color: 'oklch(1 0 0 / 0.3)', 'font-size': '0.75rem' }}>▼</span>
+      </button>
+
+      <Show when={open()}>
+        <div style={{
+          position: 'absolute', top: '100%', 'margin-top': '0.25rem', right: '0', 'z-index': '50',
+          'min-width': '12.5rem', 'border-radius': '0.75rem', border: '1px solid oklch(1 0 0 / 0.1)',
+          background: '#111118', padding: '0.25rem 0', 'box-shadow': '0 10px 30px oklch(0 0 0 / 0.5)',
+        }}>
+          <For each={props.locales}>
+            {(l) => {
+              const info = LOCALE_INFO[l]
+              return (
+                <button
+                  type="button"
+                  onClick={() => { props.onChange(l); setOpen(false) }}
+                  style={{
+                    display: 'flex', width: '100%', 'align-items': 'center', gap: '0.75rem',
+                    padding: '0.625rem 1rem', 'font-size': '0.875rem', border: 'none', cursor: 'pointer',
+                    background: props.current === l ? 'oklch(0.55 0.25 265 / 0.15)' : 'transparent',
+                    color: props.current === l ? 'oklch(0.72 0.18 265)' : 'oklch(1 0 0 / 0.7)',
+                  }}
+                >
+                  <span style={{ 'font-size': '1.125rem' }}>{info?.flag}</span>
+                  <span>{info?.nativeName}</span>
+                  <Show when={info?.direction === 'rtl'}>
+                    <span style={{ 'font-size': '0.625rem', padding: '0.125rem 0.25rem', 'border-radius': '0.25rem', background: 'oklch(0.72 0.18 60 / 0.15)', color: 'oklch(0.72 0.18 60)' }}>RTL</span>
+                  </Show>
+                </button>
+              )
+            }}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/packages/solidjs/src/components/MissingKeyAlert.tsx

@@ -0,0 +1,21 @@
+import { Show } from 'solid-js'
+import type { Component } from 'solid-js'
+import type { Locale } from '@geenius-i18n/shared'
+import { LOCALE_INFO } from '@geenius-i18n/shared'
+
+export const MissingKeyAlert: Component<{ count: number; locale: Locale }> = (props) => {
+  return (
+    <Show when={props.count > 0}>
+      <div style={{
+        display: 'flex', 'align-items': 'center', gap: '0.75rem',
+        'border-radius': '0.5rem', border: '1px solid oklch(0.60 0.25 25 / 0.2)',
+        background: 'oklch(0.60 0.25 25 / 0.05)', padding: '0.5rem 1rem',
+      }}>
+        <span style={{ 'font-size': '0.875rem' }}>⚠️</span>
+        <span style={{ 'font-size': '0.75rem', color: 'oklch(0.70 0.20 25)' }}>
+          {props.count} missing key{props.count > 1 ? 's' : ''} for <strong>{LOCALE_INFO[props.locale]?.name}</strong>
+        </span>
+      </div>
+    </Show>
+  )
+}

package/packages/solidjs/src/components/RTLWrapper.tsx

@@ -0,0 +1,13 @@
+import type { ParentComponent } from 'solid-js'
+import type { Locale } from '@geenius-i18n/shared'
+import { LOCALE_INFO } from '@geenius-i18n/shared'
+
+export const RTLWrapper: ParentComponent<{ locale?: Locale }> = (props) => {
+  const dir = () => props.locale ? LOCALE_INFO[props.locale]?.direction ?? 'ltr' : 'ltr'
+
+  return (
+    <div dir={dir()} style={{ 'text-align': dir() === 'rtl' ? 'right' : 'left' }}>
+      {props.children}
+    </div>
+  )
+}

package/packages/solidjs/src/components/TranslationKeyRow.tsx

@@ -0,0 +1,41 @@
+import type { Component } from 'solid-js'
+import type { Locale } from '@geenius-i18n/shared'
+import { LOCALE_INFO } from '@geenius-i18n/shared'
+
+interface Props {
+  translationKey: string
+  value: string
+  locale: Locale
+  namespace?: string
+  onEdit?: (key: string) => void
+  onDelete?: (key: string) => void
+}
+
+export const TranslationKeyRow: Component<Props> = (props) => {
+  return (
+    <tr style={{ 'border-bottom': '1px solid oklch(1 0 0 / 0.05)' }}>
+      <td style={{ padding: '0.75rem 1rem', 'font-family': 'monospace', 'font-size': '0.75rem', color: 'oklch(0.65 0.20 265)' }}>
+        {props.translationKey}
+      </td>
+      <td style={{ padding: '0.75rem 1rem', 'font-size': '0.6875rem', color: 'oklch(1 0 0 / 0.7)', 'max-width': '16rem', overflow: 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap' }}>
+        {props.value}
+      </td>
+      <td style={{ padding: '0.75rem 1rem' }}>
+        <span style={{ 'border-radius': '0.25rem', background: 'oklch(1 0 0 / 0.05)', padding: '0.125rem 0.375rem', 'font-size': '0.625rem', color: 'oklch(1 0 0 / 0.4)' }}>
+          {props.namespace ?? 'common'}
+        </span>
+      </td>
+      <td style={{ padding: '0.75rem 1rem', 'text-align': 'right' }}>
+        {props.onDelete && (
+          <button
+            type="button"
+            onClick={() => props.onDelete?.(props.translationKey)}
+            style={{ border: 'none', background: 'transparent', 'font-size': '0.75rem', color: 'oklch(1 0 0 / 0.2)', cursor: 'pointer' }}
+          >
+            Delete
+          </button>
+        )}
+      </td>
+    </tr>
+  )
+}

package/packages/solidjs/src/components/index.ts

@@ -0,0 +1,6 @@
+export { LocaleSwitcher } from './LocaleSwitcher'
+export { RTLWrapper } from './RTLWrapper'
+export { LocaleStatsCard } from './LocaleStatsCard'
+export { MissingKeyAlert } from './MissingKeyAlert'
+export { TranslationKeyRow } from './TranslationKeyRow'
+export { LocaleCard } from './LocaleCard'

package/packages/solidjs/src/index.tsx

@@ -0,0 +1,8 @@
+export * from './primitives'
+export * from './components'
+export * from './pages'
+
+export type {
+  Locale, Direction, I18nNamespace, TranslationDict, I18nConfig,
+  LocaleInfo, TranslationEntry, MissingKey, LocaleStat,
+} from '@geenius-i18n/shared'

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

@@ -0,0 +1,188 @@
+import { createSignal, createMemo, Show, For } from 'solid-js'
+import type { Component } from 'solid-js'
+import type { Locale, TranslationEntry, MissingKey, LocaleStat } from '@geenius-i18n/shared'
+import { LOCALE_INFO, ALL_LOCALES } from '@geenius-i18n/shared'
+import { LocaleStatsCard } from '../components/LocaleStatsCard'
+import { MissingKeyAlert } from '../components/MissingKeyAlert'
+import { TranslationKeyRow } from '../components/TranslationKeyRow'
+
+interface Props {
+  translations?: TranslationEntry[]
+  missingKeys?: MissingKey[]
+  localeStats?: LocaleStat[]
+  onUpsert?: (locale: string, namespace: string, key: string, value: string) => void
+  onDelete?: (locale: string, key: string, namespace?: string) => void
+}
+
+const NAMESPACES = ['common', 'auth', 'dashboard', 'billing', 'errors']
+
+export const I18nAdminPage: Component<Props> = (props) => {
+  const [selectedLocale, setSelectedLocale] = createSignal<Locale>('en')
+  const [selectedNs, setSelectedNs] = createSignal('common')
+  const [search, setSearch] = createSignal('')
+
+  // Editor state
+  const [editorKey, setEditorKey] = createSignal('')
+  const [editorValue, setEditorValue] = createSignal('')
+
+  const allTranslations = () => props.translations ?? []
+  const allLocaleStats = () => props.localeStats ?? []
+  const allMissingKeys = () => props.missingKeys ?? []
+
+  const filteredTranslations = createMemo(() => {
+    let t = allTranslations().filter(
+      (tr) => tr.locale === selectedLocale() && tr.namespace === selectedNs()
+    )
+    const q = search().toLowerCase()
+    if (q) t = t.filter((tr) => tr.key.toLowerCase().includes(q) || tr.value.toLowerCase().includes(q))
+    return t
+  })
+
+  const missingCount = createMemo(() =>
+    allMissingKeys().filter(m => m.locale === selectedLocale()).length
+  )
+
+  const isLoading = () => props.translations === undefined
+
+  // Skeleton
+  if (isLoading()) {
+    return (
+      <div style={{ 'min-height': '100vh', background: '#090a0f', padding: '3rem 1.5rem' }}>
+        <div style={{ 'max-width': '72rem', margin: '0 auto' }}>
+          <div style={{ height: '2.5rem', width: '12rem', 'border-radius': '0.5rem', background: 'oklch(1 0 0 / 0.05)', 'margin-bottom': '2rem' }} />
+          <div style={{ display: 'grid', 'grid-template-columns': 'repeat(4, 1fr)', gap: '0.75rem', 'margin-bottom': '1.5rem' }}>
+            <For each={[1,2,3,4,5,6,7,8]}>{() => <div style={{ height: '5rem', 'border-radius': '0.75rem', background: 'oklch(1 0 0 / 0.05)' }} />}</For>
+          </div>
+          <div style={{ height: '24rem', 'border-radius': '0.75rem', background: 'oklch(1 0 0 / 0.05)' }} />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ 'min-height': '100vh', background: '#090a0f', color: 'white' }}>
+      <div style={{ 'max-width': '72rem', margin: '0 auto', padding: '3rem 1.5rem' }}>
+        <h1 style={{ 'font-size': '1.5rem', 'font-weight': '700', 'letter-spacing': '-0.02em', 'margin-bottom': '2rem' }}>Translation Admin</h1>
+
+        {/* Locale Coverage */}
+        <Show when={allLocaleStats().length > 0}>
+          <div style={{ 'margin-bottom': '2rem' }}>
+            <h2 style={{ 'font-size': '0.6875rem', 'font-weight': '600', color: 'oklch(1 0 0 / 0.4)', 'text-transform': 'uppercase', 'margin-bottom': '0.75rem' }}>Locale Coverage</h2>
+            <LocaleStatsCard stats={allLocaleStats()} />
+          </div>
+        </Show>
+
+        {/* Missing Keys Alert */}
+        <Show when={missingCount() > 0}>
+          <div style={{ 'margin-bottom': '1.5rem' }}>
+            <MissingKeyAlert count={missingCount()} locale={selectedLocale()} />
+          </div>
+        </Show>
+
+        {/* Filters + Table + Editor */}
+        <div style={{ display: 'grid', gap: '1.5rem', 'grid-template-columns': '2fr 1fr' }}>
+          {/* Left: Filters + Table */}
+          <div>
+            <div style={{ display: 'flex', 'flex-wrap': 'wrap', 'align-items': 'center', gap: '0.75rem', 'margin-bottom': '1rem' }}>
+              <select
+                value={selectedLocale()}
+                onChange={(e) => setSelectedLocale(e.currentTarget.value as Locale)}
+                style={{ 'border-radius': '0.5rem', border: '1px solid oklch(1 0 0 / 0.1)', background: 'oklch(1 0 0 / 0.05)', padding: '0.5rem 0.75rem', 'font-size': '0.875rem', color: 'white' }}
+              >
+                <For each={ALL_LOCALES}>{(l) => <option value={l}>{LOCALE_INFO[l].flag} {LOCALE_INFO[l].name}</option>}</For>
+              </select>
+              <select
+                value={selectedNs()}
+                onChange={(e) => setSelectedNs(e.currentTarget.value)}
+                style={{ 'border-radius': '0.5rem', border: '1px solid oklch(1 0 0 / 0.1)', background: 'oklch(1 0 0 / 0.05)', padding: '0.5rem 0.75rem', 'font-size': '0.875rem', color: 'white' }}
+              >
+                <For each={NAMESPACES}>{(n) => <option value={n}>{n}</option>}</For>
+              </select>
+              <input
+                type="text"
+                placeholder="Search…"
+                value={search()}
+                onInput={(e) => setSearch(e.currentTarget.value)}
+                style={{ 'margin-left': 'auto', width: '12rem', 'border-radius': '0.75rem', border: '1px solid oklch(1 0 0 / 0.1)', background: 'oklch(1 0 0 / 0.05)', padding: '0.5rem 0.75rem', 'font-size': '0.875rem', color: 'white' }}
+              />
+            </div>
+
+            {/* Table */}
+            <Show
+              when={filteredTranslations().length > 0}
+              fallback={
+                <div style={{ display: 'flex', 'flex-direction': 'column', 'align-items': 'center', padding: '3rem 1rem' }}>
+                  <div style={{ 'font-size': '2.5rem', opacity: '0.2', 'margin-bottom': '0.75rem' }}>🌐</div>
+                  <p style={{ 'font-size': '0.875rem', color: 'oklch(1 0 0 / 0.4)' }}>No translations for this locale</p>
+                </div>
+              }
+            >
+              <div style={{ overflow: 'auto', 'border-radius': '0.75rem', border: '1px solid oklch(1 0 0 / 0.08)' }}>
+                <table style={{ width: '100%', 'font-size': '0.875rem', 'border-collapse': 'collapse' }}>
+                  <thead>
+                    <tr style={{ 'border-bottom': '1px solid oklch(1 0 0 / 0.08)', background: 'oklch(1 0 0 / 0.02)' }}>
+                      <th style={{ padding: '0.75rem 1rem', 'text-align': 'left', 'font-size': '0.625rem', 'font-weight': '500', color: 'oklch(1 0 0 / 0.4)', 'text-transform': 'uppercase' }}>Key</th>
+                      <th style={{ padding: '0.75rem 1rem', 'text-align': 'left', 'font-size': '0.625rem', 'font-weight': '500', color: 'oklch(1 0 0 / 0.4)', 'text-transform': 'uppercase' }}>Value</th>
+                      <th style={{ padding: '0.75rem 1rem', 'text-align': 'left', 'font-size': '0.625rem', 'font-weight': '500', color: 'oklch(1 0 0 / 0.4)', 'text-transform': 'uppercase' }}>Namespace</th>
+                      <th style={{ padding: '0.75rem 1rem', 'text-align': 'right', 'font-size': '0.625rem', 'font-weight': '500', color: 'oklch(1 0 0 / 0.4)', 'text-transform': 'uppercase' }}>Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <For each={filteredTranslations()}>
+                      {(tr) => (
+                        <TranslationKeyRow
+                          translationKey={tr.key}
+                          value={tr.value}
+                          locale={selectedLocale()}
+                          namespace={tr.namespace}
+                          onDelete={(key) => props.onDelete?.(selectedLocale(), key, selectedNs())}
+                        />
+                      )}
+                    </For>
+                  </tbody>
+                </table>
+              </div>
+            </Show>
+          </div>
+
+          {/* Right: Editor */}
+          <div style={{ 'border-radius': '0.75rem', border: '1px solid oklch(1 0 0 / 0.08)', background: 'oklch(1 0 0 / 0.02)', padding: '1.25rem' }}>
+            <h3 style={{ 'font-size': '0.6875rem', 'font-weight': '600', color: 'oklch(1 0 0 / 0.6)', 'margin-bottom': '0.75rem' }}>Add/Edit Translation</h3>
+            <div style={{ display: 'flex', 'flex-direction': 'column', gap: '0.5rem' }}>
+              <input
+                type="text"
+                placeholder="Translation key (e.g. auth.login_button)"
+                value={editorKey()}
+                onInput={(e) => setEditorKey(e.currentTarget.value)}
+                style={{ 'border-radius': '0.5rem', border: '1px solid oklch(1 0 0 / 0.1)', background: 'oklch(1 0 0 / 0.05)', padding: '0.625rem 1rem', 'font-size': '0.875rem', color: 'white' }}
+              />
+              <textarea
+                placeholder="Translation value…"
+                value={editorValue()}
+                onInput={(e) => setEditorValue(e.currentTarget.value)}
+                rows={3}
+                style={{ 'border-radius': '0.5rem', border: '1px solid oklch(1 0 0 / 0.1)', background: 'oklch(1 0 0 / 0.05)', padding: '0.625rem 1rem', 'font-size': '0.875rem', color: 'white', resize: 'none' }}
+              />
+              <button
+                type="button"
+                disabled={!editorKey() || !editorValue()}
+                onClick={() => {
+                  props.onUpsert?.(selectedLocale(), selectedNs(), editorKey(), editorValue())
+                  setEditorKey(''); setEditorValue('')
+                }}
+                style={{
+                  'border-radius': '0.5rem', border: 'none',
+                  background: editorKey() && editorValue() ? 'oklch(0.55 0.25 265)' : 'oklch(1 0 0 / 0.1)',
+                  padding: '0.5rem 1rem', 'font-size': '0.75rem', 'font-weight': '500',
+                  color: editorKey() && editorValue() ? 'white' : 'oklch(1 0 0 / 0.3)', cursor: 'pointer',
+                }}
+              >
+                Save Translation
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,99 @@
+import { Show } from 'solid-js'
+import type { Component } from 'solid-js'
+import type { I18nConfig, TranslationDict } from '@geenius-i18n/shared'
+import { LOCALE_INFO, ALL_LOCALES } from '@geenius-i18n/shared'
+import { I18nProvider, createI18n } from '../primitives/I18nProvider'
+import { LocaleSwitcher } from '../components/LocaleSwitcher'
+import { RTLWrapper } from '../components/RTLWrapper'
+
+function InfoCard(props: { label: string; value: string; highlight?: boolean }) {
+  return (
+    <div style={{ 'border-radius': '0.75rem', border: '1px solid oklch(1 0 0 / 0.08)', background: 'oklch(1 0 0 / 0.02)', padding: '1rem' }}>
+      <p style={{ 'font-size': '0.625rem', color: 'oklch(1 0 0 / 0.4)', 'text-transform': 'uppercase', 'margin-bottom': '0.25rem' }}>{props.label}</p>
+      <p style={{ 'font-size': '1.125rem', 'font-weight': '700', color: props.highlight ? 'oklch(0.72 0.18 60)' : 'oklch(1 0 0 / 0.9)' }}>{props.value}</p>
+    </div>
+  )
+}
+
+function FormatRow(props: { label: string; value: string }) {
+  return (
+    <div style={{ display: 'flex', 'justify-content': 'space-between' }}>
+      <span style={{ color: 'oklch(1 0 0 / 0.4)' }}>{props.label}</span>
+      <span style={{ color: 'oklch(1 0 0 / 0.8)', 'font-family': 'monospace', 'font-size': '0.75rem' }}>{props.value}</span>
+    </div>
+  )
+}
+
+function PreviewContent() {
+  const { locale, t, direction, isRTL, setLocale, formatDate, formatNumber, formatCurrency } = createI18n()
+  const info = () => LOCALE_INFO[locale()]
+
+  return (
+    <div style={{ 'min-height': '100vh', background: '#090a0f', color: 'white' }}>
+      <div style={{ 'max-width': '48rem', margin: '0 auto', padding: '3rem 1.5rem' }}>
+        {/* Header */}
+        <div style={{ display: 'flex', 'align-items': 'center', 'justify-content': 'space-between', 'margin-bottom': '2rem' }}>
+          <h1 style={{ 'font-size': '1.5rem', 'font-weight': '700', 'letter-spacing': '-0.02em' }}>Locale Preview</h1>
+          <LocaleSwitcher locales={ALL_LOCALES} current={locale()} onChange={setLocale} />
+        </div>
+
+        {/* Info cards */}
+        <div style={{ display: 'grid', 'grid-template-columns': 'repeat(4, 1fr)', gap: '0.75rem', 'margin-bottom': '1.5rem' }}>
+          <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>
+
+        {/* RTL-aware content */}
+        <RTLWrapper locale={locale()}>
+          <div style={{ display: 'flex', 'flex-direction': 'column', gap: '1.5rem' }}>
+            {/* Formatting */}
+            <div style={{ 'border-radius': '0.75rem', border: '1px solid oklch(1 0 0 / 0.08)', background: 'oklch(1 0 0 / 0.02)', padding: '1.25rem' }}>
+              <h3 style={{ 'font-size': '0.875rem', 'font-weight': '600', color: 'oklch(1 0 0 / 0.8)', 'margin-bottom': '1rem' }}>Formatting Examples</h3>
+              <div style={{ display: 'flex', 'flex-direction': 'column', gap: '0.75rem', 'font-size': '0.875rem' }}>
+                <FormatRow label="Date" value={formatDate(new Date())} />
+                <FormatRow label="Date (full)" value={formatDate(new Date(), { dateStyle: 'full' })} />
+                <FormatRow label="Number" value={formatNumber(1234567.89)} />
+                <FormatRow label="Currency (USD)" value={formatCurrency(9999.99, 'USD')} />
+                <FormatRow label="Currency (EUR)" value={formatCurrency(4250.50, 'EUR')} />
+                <FormatRow label="Percentage" value={formatNumber(0.85, { style: 'percent' })} />
+              </div>
+            </div>
+
+            {/* RTL notice */}
+            <Show when={isRTL()}>
+              <div style={{ 'border-radius': '0.5rem', border: '1px solid oklch(0.72 0.18 60 / 0.2)', background: 'oklch(0.72 0.18 60 / 0.05)', padding: '0.75rem 1rem', 'font-size': '0.875rem', color: 'oklch(0.72 0.18 60)' }}>
+                ⚡ RTL mode active — text flows right-to-left
+              </div>
+            </Show>
+
+            {/* Sample text */}
+            <div style={{ 'border-radius': '0.75rem', border: '1px solid oklch(1 0 0 / 0.08)', background: 'oklch(1 0 0 / 0.02)', padding: '1.25rem' }}>
+              <h3 style={{ 'font-size': '0.875rem', 'font-weight': '600', color: 'oklch(1 0 0 / 0.8)', 'margin-bottom': '0.75rem' }}>Sample Text</h3>
+              <p style={{ 'font-size': '0.875rem', color: 'oklch(1 0 0 / 0.6)', 'line-height': '1.625' }}>
+                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>
+  )
+}
+
+export const LocalePreviewPage: Component<{ config?: Partial<I18nConfig>; translations?: TranslationDict }> = (props) => {
+  const fullConfig: I18nConfig = {
+    defaultLocale: 'en',
+    supportedLocales: ALL_LOCALES,
+    detectBrowser: true,
+    persistLocale: true,
+    ...props.config,
+  }
+
+  return (
+    <I18nProvider config={fullConfig} translations={props.translations}>
+      <PreviewContent />
+    </I18nProvider>
+  )
+}

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

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

package/packages/solidjs/src/primitives/I18nProvider.tsx

@@ -0,0 +1,56 @@
+import { createSignal, createContext, useContext, type ParentComponent } from 'solid-js'
+import type { Locale, Direction, TranslationDict, I18nConfig } from '@geenius-i18n/shared'
+import {
+  t as tFn,
+  getDirection,
+  isRTL as checkRTL,
+  detectLocale,
+  formatDate as fmtDate,
+  formatNumber as fmtNum,
+  formatCurrency as fmtCur,
+  LOCALE_INFO,
+} from '@geenius-i18n/shared'
+
+interface I18nCtx {
+  locale: () => Locale
+  direction: () => Direction
+  isRTL: () => boolean
+  setLocale: (l: Locale) => void
+  t: (key: string, params?: Record<string, string | number>) => string
+  formatDate: (d: Date | string, o?: Intl.DateTimeFormatOptions) => string
+  formatNumber: (n: number, o?: Intl.NumberFormatOptions) => string
+  formatCurrency: (a: number, c: string) => string
+}
+
+const I18nContext = createContext<I18nCtx>()
+
+export const I18nProvider: ParentComponent<{ config: I18nConfig; translations?: TranslationDict }> = (props) => {
+  const [locale, setLocaleSignal] = createSignal<Locale>(
+    props.config.detectBrowser ? detectLocale(props.config.supportedLocales) : props.config.defaultLocale
+  )
+
+  const value: I18nCtx = {
+    locale,
+    direction: () => getDirection(locale()),
+    isRTL: () => checkRTL(locale()),
+    setLocale: (l) => {
+      setLocaleSignal(l)
+      if (typeof document !== 'undefined') {
+        document.documentElement.dir = getDirection(l)
+        document.documentElement.lang = l
+      }
+    },
+    t: (key, params) => tFn(key, props.translations ?? {}, params),
+    formatDate: (d, o) => fmtDate(d, locale(), o),
+    formatNumber: (n, o) => fmtNum(n, locale(), o),
+    formatCurrency: (a, c) => fmtCur(a, c, locale()),
+  }
+
+  return <I18nContext.Provider value={value}>{props.children}</I18nContext.Provider>
+}
+
+export function createI18n() {
+  const ctx = useContext(I18nContext)
+  if (!ctx) throw new Error('createI18n must be used inside I18nProvider')
+  return ctx
+}

package/packages/solidjs/src/primitives/createI18nAdmin.ts

@@ -0,0 +1,7 @@
+export function createI18nAdmin(mutations: {
+  upsertTranslation: (locale: string, key: string, value: string, namespace?: string) => Promise<void>
+  deleteTranslation: (locale: string, key: string, namespace?: string) => Promise<void>
+  importTranslations: (locale: string, translations: Record<string, string>, namespace?: string) => Promise<void>
+}) {
+  return mutations
+}

package/packages/solidjs/src/primitives/createLocaleDetect.ts

@@ -0,0 +1,8 @@
+import { createSignal } from 'solid-js'
+import type { Locale } from '@geenius-i18n/shared'
+import { detectLocale } from '@geenius-i18n/shared'
+
+export function createLocaleDetect(supportedLocales: Locale[]) {
+  const [detectedLocale] = createSignal(detectLocale(supportedLocales))
+  return { detectedLocale }
+}

package/packages/solidjs/src/primitives/createTranslations.ts

@@ -0,0 +1,22 @@
+import { createSignal, createEffect, type Accessor } from 'solid-js'
+import type { Locale, TranslationDict } from '@geenius-i18n/shared'
+import { t as tFn, loadNamespace } from '@geenius-i18n/shared'
+
+export function createTranslations(locale: Accessor<Locale>, namespace: string) {
+  const [dict, setDict] = createSignal<TranslationDict>({})
+  const [isLoading, setLoading] = createSignal(true)
+  const [error, setError] = createSignal<string | undefined>(undefined)
+
+  createEffect(() => {
+    const loc = locale()
+    setLoading(true)
+    setError(undefined)
+    loadNamespace(loc, namespace)
+      .then((d) => { setDict(d); setLoading(false) })
+      .catch((e: Error) => { setError(e.message); setLoading(false) })
+  })
+
+  const t = (key: string, params?: Record<string, string | number>) => tFn(key, dict(), params)
+
+  return { dict, isLoading, error, t }
+}

package/packages/solidjs/src/primitives/index.ts

@@ -0,0 +1,4 @@
+export { I18nProvider, createI18n } from './I18nProvider'
+export { createLocaleDetect } from './createLocaleDetect'
+export { createTranslations } from './createTranslations'
+export { createI18nAdmin } from './createI18nAdmin'

package/packages/solidjs/tsconfig.json

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

package/packages/solidjs/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: ['solid-js'],
+})

package/packages/solidjs-css/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-i18n/solidjs-css\n\n> Geenius i18n — SolidJS primitives (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/solidjs-css\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-i18n/solidjs-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/solidjs-css/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@geenius-i18n/solidjs-css",
+  "version": "0.1.0",
+  "description": "Geenius i18n — SolidJS primitives (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": {
+    "solid-js": ">=1.0.0"
+  },
+  "dependencies": {
+    "@geenius-i18n/shared": "workspace:*",
+    "@geenius-i18n/solidjs": "workspace:*"
+  },
+  "devDependencies": {
+    "solid-js": "^1.9.4",
+    "typescript": "~6.0.2"
+  },
+  "author": "Antigravity HQ",
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}