@geenius/i18n 0.1.0

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

@@ -0,0 +1,210 @@
+/* ─── I18n Design Tokens (OKLCH) ──────────────────────── */
+:root {
+  --i18n-bg: oklch(0.12 0.01 250);
+  --i18n-surface: oklch(0.16 0.01 250);
+  --i18n-border: oklch(0.22 0.01 250);
+  --i18n-text: oklch(0.95 0.01 250);
+  --i18n-text-muted: oklch(0.58 0.02 250);
+  --i18n-accent: oklch(0.65 0.20 265);
+  --i18n-rtl-indicator: oklch(0.72 0.18 60);
+  --i18n-missing: oklch(0.60 0.25 25);
+  --i18n-complete: oklch(0.72 0.18 155);
+  --i18n-radius: 0.75rem;
+}
+
+/* ─── Locale Switcher ────────────────────────────────── */
+.i18n__locale-switcher { position: relative; }
+.i18n__locale-switcher-btn {
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.5rem 0.75rem; border-radius: var(--i18n-radius);
+  border: 1px solid var(--i18n-border); background: oklch(1 0 0 / 0.05);
+  font-size: 0.875rem; color: var(--i18n-text); cursor: pointer; transition: all 0.15s;
+}
+.i18n__locale-switcher-btn:hover { background: oklch(1 0 0 / 0.1); }
+.i18n__locale-switcher-flag { font-size: 1.125rem; }
+.i18n__locale-switcher-arrow { font-size: 0.625rem; color: oklch(1 0 0 / 0.3); margin-left: 0.25rem; }
+.i18n__locale-dropdown {
+  position: absolute; top: 100%; margin-top: 0.25rem; right: 0; z-index: 50;
+  min-width: 14rem; border-radius: var(--i18n-radius); border: 1px solid var(--i18n-border);
+  background: oklch(0.08 0.01 250); padding: 0.25rem; box-shadow: 0 8px 32px oklch(0 0 0 / 0.5);
+}
+
+/* ─── Locale Option ──────────────────────────────────── */
+.i18n__locale-option {
+  display: flex; align-items: center; gap: 0.75rem; width: 100%;
+  padding: 0.625rem 1rem; border: none; border-radius: calc(var(--i18n-radius) * 0.8);
+  font-size: 0.875rem; color: oklch(1 0 0 / 0.7); cursor: pointer; background: transparent; transition: all 0.1s;
+}
+.i18n__locale-option:hover { background: oklch(1 0 0 / 0.05); }
+.i18n__locale-option--active { background: oklch(0.65 0.20 265 / 0.15); color: oklch(0.65 0.20 265); }
+.i18n__locale-option-flag { font-size: 1.125rem; }
+.i18n__locale-option-name { flex: 1; text-align: left; }
+.i18n__locale-option-eng { font-size: 0.6875rem; color: oklch(1 0 0 / 0.3); }
+.i18n__locale-option-rtl { font-size: 0.5625rem; padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: oklch(0.72 0.18 60 / 0.15); color: var(--i18n-rtl-indicator); }
+
+/* ─── RTL Wrapper ────────────────────────────────────── */
+.i18n__rtl-wrapper { transition: all 0.2s; }
+.i18n__rtl-wrapper[dir="rtl"] { text-align: right; }
+
+/* ─── Translation Table ──────────────────────────────── */
+.i18n__translation-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
+.i18n__translation-table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: oklch(1 0 0 / 0.4); border-bottom: 1px solid oklch(1 0 0 / 0.08); }
+.i18n__translation-table td { padding: 0.75rem 1rem; border-bottom: 1px solid oklch(1 0 0 / 0.05); }
+.i18n__translation-row:hover { background: oklch(1 0 0 / 0.02); }
+.i18n__translation-key { font-family: monospace; font-size: 0.6875rem; color: oklch(0.65 0.20 265); }
+.i18n__translation-value { color: oklch(1 0 0 / 0.7); max-width: 20rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.i18n__translation-ns { display: inline-block; padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: oklch(1 0 0 / 0.05); font-size: 0.625rem; color: oklch(1 0 0 / 0.4); }
+
+/* ─── Translation Editor ─────────────────────────────── */
+.i18n__editor { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; border: 1px solid var(--i18n-border); border-radius: var(--i18n-radius); background: oklch(1 0 0 / 0.02); }
+.i18n__editor-selectors { display: flex; gap: 0.5rem; }
+.i18n__editor-select { padding: 0.375rem 0.5rem; border: 1px solid var(--i18n-border); border-radius: calc(var(--i18n-radius) * 0.8); background: oklch(1 0 0 / 0.05); font-size: 0.6875rem; color: var(--i18n-text); outline: none; }
+.i18n__editor-input { width: 100%; padding: 0.625rem 1rem; border: 1px solid var(--i18n-border); border-radius: var(--i18n-radius); background: oklch(1 0 0 / 0.03); font-size: 0.875rem; color: var(--i18n-text); outline: none; }
+.i18n__editor-input::placeholder { color: oklch(1 0 0 / 0.3); }
+.i18n__editor-input:focus { border-color: oklch(0.65 0.20 265 / 0.4); }
+.i18n__editor-textarea { resize: none; min-height: 4.5rem; }
+
+/* ─── Missing Badge ──────────────────────────────────── */
+.i18n__missing-badge {
+  display: flex; align-items: center; gap: 0.75rem;
+  padding: 0.625rem 1rem; border-radius: calc(var(--i18n-radius) * 0.8);
+  border: 1px solid oklch(0.60 0.25 25 / 0.2); background: oklch(0.60 0.25 25 / 0.05);
+}
+.i18n__missing-badge-icon { font-size: 0.875rem; }
+.i18n__missing-badge-text { font-size: 0.6875rem; color: oklch(0.60 0.25 25); }
+
+/* ─── Stats Card ─────────────────────────────────────── */
+.i18n__stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
+.i18n__stats-card { padding: 1rem; border: 1px solid var(--i18n-border); border-radius: var(--i18n-radius); background: oklch(1 0 0 / 0.02); }
+.i18n__stats-card-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
+.i18n__stats-card-flag { font-size: 1.125rem; }
+.i18n__stats-card-name { font-size: 0.6875rem; font-weight: 500; color: oklch(1 0 0 / 0.8); }
+.i18n__stats-bar { height: 0.375rem; border-radius: 9999px; background: oklch(1 0 0 / 0.05); overflow: hidden; margin-top: 0.25rem; }
+.i18n__stats-bar-fill { height: 100%; border-radius: 9999px; transition: width 0.3s; }
+.i18n__stats-bar-fill--complete { background: var(--i18n-complete); }
+.i18n__stats-bar-fill--partial { background: var(--i18n-rtl-indicator); }
+.i18n__stats-bar-fill--low { background: var(--i18n-missing); }
+.i18n__stats-card-meta { display: flex; justify-content: space-between; margin-top: 0.375rem; font-size: 0.625rem; color: oklch(1 0 0 / 0.4); }
+.i18n__stats-card-missing { font-size: 0.625rem; color: oklch(0.60 0.25 25); margin-top: 0.375rem; }
+
+/* ─── Info Cards (Preview) ───────────────────────────── */
+.i18n__info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
+.i18n__info-card { padding: 1rem; border: 1px solid var(--i18n-border); border-radius: var(--i18n-radius); background: oklch(1 0 0 / 0.02); }
+.i18n__info-card-label { font-size: 0.625rem; color: oklch(1 0 0 / 0.4); text-transform: uppercase; margin-bottom: 0.25rem; }
+.i18n__info-card-value { font-size: 1.125rem; font-weight: 700; color: oklch(1 0 0 / 0.9); }
+.i18n__info-card-value--rtl { color: var(--i18n-rtl-indicator); }
+
+/* ─── RTL Alert ──────────────────────────────────────── */
+.i18n__rtl-alert { padding: 0.75rem 1rem; border-radius: calc(var(--i18n-radius) * 0.8); border: 1px solid oklch(0.72 0.18 60 / 0.2); background: oklch(0.72 0.18 60 / 0.05); font-size: 0.875rem; color: oklch(0.72 0.18 60); }
+
+/* ─── Format Row ─────────────────────────────────────── */
+.i18n__format-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid oklch(1 0 0 / 0.04); }
+.i18n__format-label { font-size: 0.875rem; color: oklch(1 0 0 / 0.4); }
+.i18n__format-value { font-family: monospace; font-size: 0.6875rem; color: oklch(1 0 0 / 0.8); }
+
+/* ─── Section ────────────────────────────────────────── */
+.i18n__section { padding: 1.25rem; border: 1px solid var(--i18n-border); border-radius: var(--i18n-radius); background: oklch(1 0 0 / 0.02); }
+.i18n__section-title { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.8); margin-bottom: 1rem; }
+
+/* ─── Buttons ────────────────────────────────────────── */
+.i18n__btn { padding: 0.5rem 1rem; border-radius: calc(var(--i18n-radius) * 0.8); font-size: 0.6875rem; font-weight: 500; cursor: pointer; border: none; transition: all 0.15s; }
+.i18n__btn--primary { background: var(--i18n-accent); color: white; }
+.i18n__btn--primary:hover { background: oklch(0.70 0.22 265); }
+.i18n__btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
+.i18n__btn--outline { border: 1px solid var(--i18n-border); background: transparent; color: oklch(1 0 0 / 0.6); }
+.i18n__btn--danger { color: oklch(0.60 0.25 25); }
+
+/* ─── Search ─────────────────────────────────────────── */
+.i18n__search { width: 100%; max-width: 12rem; padding: 0.5rem 0.75rem; border: 1px solid var(--i18n-border); border-radius: var(--i18n-radius); background: oklch(1 0 0 / 0.03); font-size: 0.875rem; color: var(--i18n-text); outline: none; }
+.i18n__search::placeholder { color: oklch(1 0 0 / 0.3); }
+.i18n__search:focus { border-color: oklch(0.65 0.20 265 / 0.4); }
+
+/* ─── Skeleton ───────────────────────────────────────── */
+.i18n__skeleton { background: oklch(1 0 0 / 0.05); border-radius: var(--i18n-radius); animation: i18n-pulse 1.5s ease-in-out infinite; }
+@keyframes i18n-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+
+/* ─── Empty ──────────────────────────────────────────── */
+.i18n__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; text-align: center; }
+.i18n__empty-icon { font-size: 2.5rem; opacity: 0.2; margin-bottom: 0.75rem; }
+.i18n__empty-text { font-size: 0.875rem; color: oklch(1 0 0 / 0.4); }
+
+/* ─── Delete Button ──────────────────────────────────── */
+.i18n__delete-btn { padding: 0.25rem 0.5rem; border: none; border-radius: calc(var(--i18n-radius) * 0.6); background: transparent; color: oklch(1 0 0 / 0.2); font-size: 0.6875rem; cursor: pointer; opacity: 0; transition: all 0.15s; }
+.i18n__translation-row:hover .i18n__delete-btn { opacity: 1; }
+.i18n__delete-btn:hover { color: oklch(0.60 0.25 25); background: oklch(0.60 0.25 25 / 0.1); }
+
+/* ─── Namespace Tree View ────────────────────────────── */
+.i18n__namespace-tree { border: 1px solid var(--i18n-border); border-radius: var(--i18n-radius); background: oklch(1 0 0 / 0.02); padding: 1rem; max-height: 20rem; overflow-y: auto; }
+.i18n__namespace-item { display: flex; align-items: center; padding: 0.5rem; cursor: pointer; border-radius: calc(var(--i18n-radius) * 0.6); transition: all 0.1s; margin-bottom: 0.25rem; }
+.i18n__namespace-item:hover { background: oklch(1 0 0 / 0.04); }
+.i18n__namespace-item--active { background: oklch(0.65 0.20 265 / 0.1); color: oklch(0.65 0.20 265); }
+.i18n__namespace-icon { width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; margin-right: 0.5rem; font-size: 0.875rem; }
+.i18n__namespace-name { flex: 1; font-size: 0.6875rem; font-weight: 500; }
+.i18n__namespace-count { font-size: 0.625rem; color: oklch(1 0 0 / 0.3); }
+
+/* ─── Missing Key Alerts ─────────────────────────────── */
+.i18n__missing-keys-panel { border: 1px solid oklch(0.60 0.25 25 / 0.2); border-radius: var(--i18n-radius); background: oklch(0.60 0.25 25 / 0.05); padding: 1rem; margin-bottom: 1.5rem; }
+.i18n__missing-keys-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
+.i18n__missing-keys-title { font-size: 0.875rem; font-weight: 600; color: oklch(0.60 0.25 25); }
+.i18n__missing-keys-count { font-size: 1rem; font-weight: 700; color: oklch(0.60 0.25 25); }
+.i18n__missing-keys-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.i18n__missing-key-item { padding: 0.625rem; border: 1px solid oklch(0.60 0.25 25 / 0.1); border-radius: calc(var(--i18n-radius) * 0.6); background: oklch(1 0 0 / 0.02); }
+.i18n__missing-key-path { font-family: monospace; font-size: 0.625rem; color: oklch(0.60 0.25 25); margin-bottom: 0.25rem; }
+.i18n__missing-key-context { font-size: 0.6875rem; color: oklch(1 0 0 / 0.5); }
+
+/* ─── Import/Export Panel ────────────────────────────── */
+.i18n__import-export-panel { border: 1px solid var(--i18n-border); border-radius: var(--i18n-radius); background: oklch(1 0 0 / 0.02); padding: 1.25rem; }
+.i18n__import-export-title { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.8); margin-bottom: 1rem; }
+.i18n__import-export-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
+.i18n__import-export-col { display: flex; flex-direction: column; }
+.i18n__import-export-label { font-size: 0.6875rem; font-weight: 500; color: oklch(1 0 0 / 0.6); margin-bottom: 0.5rem; text-transform: uppercase; }
+.i18n__import-btn { padding: 0.75rem 1rem; border: 1px solid var(--i18n-border); border-radius: calc(var(--i18n-radius) * 0.8); background: oklch(1 0 0 / 0.03); font-size: 0.6875rem; font-weight: 500; cursor: pointer; transition: all 0.1s; }
+.i18n__import-btn:hover { background: oklch(1 0 0 / 0.06); }
+.i18n__export-btn { padding: 0.75rem 1rem; border: none; border-radius: calc(var(--i18n-radius) * 0.8); background: var(--i18n-accent); color: white; font-size: 0.6875rem; font-weight: 500; cursor: pointer; transition: all 0.1s; }
+.i18n__export-btn:hover { background: oklch(0.70 0.22 265); }
+
+/* ─── RTL Support Toggle ─────────────────────────────── */
+.i18n__rtl-toggle-panel { border: 1px solid var(--i18n-border); border-radius: var(--i18n-radius); background: oklch(1 0 0 / 0.02); padding: 1rem; margin-bottom: 1.5rem; }
+.i18n__rtl-toggle-header { display: flex; align-items: center; justify-content: space-between; }
+.i18n__rtl-toggle-label { font-size: 0.875rem; font-weight: 600; color: oklch(1 0 0 / 0.8); }
+.i18n__rtl-toggle-switch { width: 2.5rem; height: 1.5rem; border-radius: 9999px; border: none; background: oklch(1 0 0 / 0.1); cursor: pointer; transition: all 0.2s; position: relative; }
+.i18n__rtl-toggle-switch--active { background: var(--i18n-complete); }
+.i18n__rtl-toggle-knob { position: absolute; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: white; top: 0.125rem; left: 0.125rem; transition: transform 0.2s; box-shadow: 0 1px 3px oklch(0 0 0 / 0.2); }
+.i18n__rtl-toggle-switch--active .i18n__rtl-toggle-knob { transform: translateX(1rem); }
+
+/* ─── Coverage Indicator ─────────────────────────────── */
+.i18n__coverage-card { padding: 1rem; border: 1px solid var(--i18n-border); border-radius: var(--i18n-radius); background: oklch(1 0 0 / 0.02); text-align: center; }
+.i18n__coverage-percentage { font-size: 2.5rem; font-weight: 900; font-variant-numeric: tabular-nums; color: oklch(1 0 0 / 0.9); }
+.i18n__coverage-label { font-size: 0.6875rem; color: oklch(1 0 0 / 0.4); margin-top: 0.5rem; }
+.i18n__coverage-bar { height: 0.375rem; border-radius: 9999px; background: oklch(1 0 0 / 0.05); overflow: hidden; margin-top: 0.75rem; }
+.i18n__coverage-bar-fill { height: 100%; border-radius: 9999px; background: var(--i18n-complete); transition: width 0.3s; }
+
+/* ─── String Table Advanced ──────────────────────────── */
+.i18n__string-table-advanced { width: 100%; border-collapse: collapse; font-size: 0.6875rem; }
+.i18n__string-table-advanced th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; text-transform: uppercase; color: oklch(1 0 0 / 0.4); background: oklch(1 0 0 / 0.01); border-bottom: 1px solid var(--i18n-border); letter-spacing: 0.05em; }
+.i18n__string-table-advanced td { padding: 0.75rem 1rem; border-bottom: 1px solid oklch(1 0 0 / 0.04); }
+.i18n__string-table-advanced tr:hover { background: oklch(1 0 0 / 0.02); }
+.i18n__string-context-badge { display: inline-block; padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: oklch(0.65 0.20 265 / 0.1); font-size: 0.625rem; color: oklch(0.65 0.20 265); }
+
+/* ─── Locale Selector Advanced ───────────────────────── */
+.i18n__locale-selector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
+.i18n__locale-card { padding: 1rem; border: 1px solid var(--i18n-border); border-radius: var(--i18n-radius); background: oklch(1 0 0 / 0.02); text-align: center; cursor: pointer; transition: all 0.2s; }
+.i18n__locale-card:hover { border-color: var(--i18n-accent); background: oklch(0.65 0.20 265 / 0.05); }
+.i18n__locale-card--selected { border: 2px solid var(--i18n-accent); background: oklch(0.65 0.20 265 / 0.08); }
+.i18n__locale-card-flag { font-size: 1.5rem; margin-bottom: 0.5rem; }
+.i18n__locale-card-name { font-size: 0.75rem; font-weight: 600; color: oklch(1 0 0 / 0.8); }
+.i18n__locale-card-code { font-size: 0.625rem; color: oklch(1 0 0 / 0.4); margin-top: 0.25rem; font-family: monospace; }
+
+/* ─── Format Examples ────────────────────────────────── */
+.i18n__format-examples { border: 1px solid var(--i18n-border); border-radius: var(--i18n-radius); background: oklch(1 0 0 / 0.02); padding: 1rem; }
+.i18n__format-example-title { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; color: oklch(1 0 0 / 0.5); margin-bottom: 0.75rem; }
+.i18n__format-example-list { display: flex; flex-direction: column; gap: 0.5rem; }
+.i18n__format-example-item { padding: 0.5rem; border-left: 2px solid oklch(0.65 0.20 265); border-radius: calc(var(--i18n-radius) * 0.6); background: oklch(0.65 0.20 265 / 0.05); }
+.i18n__format-example-key { font-family: monospace; font-size: 0.625rem; color: oklch(0.65 0.20 265); margin-bottom: 0.25rem; }
+.i18n__format-example-value { font-size: 0.6875rem; color: oklch(1 0 0 / 0.7); }
+
+/* ─── Breadcrumb Navigation ──────────────────────────── */
+.i18n__breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; margin-bottom: 1rem; }
+.i18n__breadcrumb-item { color: oklch(1 0 0 / 0.5); }
+.i18n__breadcrumb-item--active { color: oklch(1 0 0 / 0.8); font-weight: 500; }
+.i18n__breadcrumb-sep { color: oklch(1 0 0 / 0.2); margin: 0 0.25rem; }

package/packages/react-css/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-css/tsup.config.ts

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

package/packages/shared/README.md

@@ -0,0 +1 @@
+# ✦ @geenius-i18n/shared\n\n> Geenius i18n — Shared types & Convex schema\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/shared\n```\n\n## Usage\n\n```typescript\nimport { init } from '@geenius-i18n/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,44 @@
+{
+  "name": "@geenius-i18n/shared",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "description": "Geenius i18n \u2014 Shared types & Convex schema",
+  "author": "Antigravity HQ",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./convex": "./src/convex.ts"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "convex": "^1.34.0",
+    "tsup": "^8.5.1",
+    "typescript": "~6.0.2",
+    "vitest": "^4.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/packages/shared/src/__tests__/i18n.test.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest'
+import {
+  interpolate, t, plural, getDirection,
+  LOCALE_INFO, ALL_LOCALES, RTL_LOCALES,
+} from '../index'
+
+describe('interpolate', () => {
+  it('replaces {{key}} with values', () => {
+    expect(interpolate('Hello {{name}}!', { name: 'Alice' })).toBe('Hello Alice!')
+  })
+
+  it('handles numeric values', () => {
+    expect(interpolate('{{count}} items', { count: 42 })).toBe('42 items')
+  })
+
+  it('preserves unmatched placeholders', () => {
+    expect(interpolate('Hello {{name}}', {})).toBe('Hello {{name}}')
+  })
+})
+
+describe('t (translation lookup)', () => {
+  const dict = { greeting: 'Hello', nested: { welcome: 'Welcome {{name}}' } }
+
+  it('resolves top-level key', () => {
+    expect(t('greeting', dict)).toBe('Hello')
+  })
+
+  it('resolves nested key with dot notation', () => {
+    expect(t('nested.welcome', dict, { name: 'Bob' })).toBe('Welcome Bob')
+  })
+
+  it('returns key for missing translations', () => {
+    expect(t('missing.key', dict)).toBe('missing.key')
+  })
+})
+
+describe('plural', () => {
+  const dict = { items_one: '1 item', items_other: '{{count}} items', items_zero: 'No items' }
+
+  it('uses _zero form for count 0', () => {
+    expect(plural('items', 0, dict)).toBe('No items')
+  })
+
+  it('uses _one form for count 1', () => {
+    expect(plural('items', 1, dict)).toBe('1 item')
+  })
+
+  it('uses _other form for count > 1', () => {
+    expect(plural('items', 5, dict)).toBe('5 items')
+  })
+})
+
+describe('Locale Data', () => {
+  it('ALL_LOCALES has 14 locales', () => {
+    expect(ALL_LOCALES).toHaveLength(14)
+  })
+
+  it('RTL_LOCALES contains ar and he', () => {
+    expect(RTL_LOCALES).toContain('ar')
+    expect(RTL_LOCALES).toContain('he')
+    expect(RTL_LOCALES).toHaveLength(2)
+  })
+
+  it('getDirection returns rtl for Arabic', () => {
+    expect(getDirection('ar')).toBe('rtl')
+  })
+
+  it('getDirection returns ltr for English', () => {
+    expect(getDirection('en')).toBe('ltr')
+  })
+
+  it('LOCALE_INFO has nativeName for each locale', () => {
+    ALL_LOCALES.forEach(locale => {
+      expect(LOCALE_INFO[locale].nativeName).toBeDefined()
+      expect(LOCALE_INFO[locale].flag.length).toBeGreaterThan(0)
+    })
+  })
+})