refactor(i18n): extract shared createSafeTranslation hook to @object-ui/i18n

- Move safe translation pattern from inline implementations to shared
  createSafeTranslation factory in @object-ui/i18n
- Refactor useFieldTranslation to use createSafeTranslation
- Refactor FieldFactory and form.tsx to use createSafeTranslation
- Restore fallback placeholder in renderFieldComponent for safety
- Update CHANGELOG.md with all i18n improvements

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Agent-Logs-Url: https://github.com/objectstack-ai/objectui/sessions/1e02cef1-b595-4316-86d4-24d7df245f95

Author: Copilot

CHANGELOG.md

@@ -9,6 +9,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- **Chinese language pack (zh.ts) untranslated key** (`@object-ui/i18n`): Fixed `console.objectView.toolbarEnabledCount` which was still in English (`'{{count}} of {{total}} enabled'`) — now properly translated to `'已启用 {{count}}/{{total}} 项'`. Also fixed the same untranslated key in all other 8 non-English locales (ja, ko, de, fr, es, pt, ru, ar).
+
+- **Hardcoded English strings in platform UI** (`apps/console`, `@object-ui/fields`, `@object-ui/react`, `@object-ui/components`): Replaced hardcoded English strings with i18n `t()` calls:
+  - Console `App.tsx`: Modal dialog title (`"Create/Edit Contact"`), description (`"Add a new ... to your database."`), submitText (`"Save Record"`), and cancelText (`"Cancel"`) now use i18n keys.
+  - `SelectField`: Default placeholder `"Select an option"` now uses `t('common.selectOption')`.
+  - `LookupField`: Default placeholder `"Select..."` and search placeholder `"Search..."` now use i18n keys.
+  - `FieldFactory`: Default select option placeholder now uses `t('common.selectOption')`.
+  - Form renderer: Default select placeholder now uses `t('common.selectOption')`.
+
+### Added
+
+- **New i18n keys for select/form components** (`@object-ui/i18n`): Added new translation keys across all 10 locale packs:
+  - `common.selectOption` — Default select field placeholder (e.g., '请选择' in Chinese)
+  - `common.select` — Short select placeholder (e.g., '选择...' in Chinese)
+  - `form.createTitle` — Form dialog create title with interpolation (e.g., '新建{{object}}' in Chinese)
+  - `form.editTitle` — Form dialog edit title with interpolation
+  - `form.createDescription` — Form dialog create description with interpolation
+  - `form.editDescription` — Form dialog edit description with interpolation
+  - `form.saveRecord` — Save record button text
+
+- **Safe translation hook for field widgets** (`@object-ui/fields`): Added `useFieldTranslation` hook that provides fallback to English defaults when no `I18nProvider` is available, following the same pattern as `useDetailTranslation` in `@object-ui/plugin-detail`.
+
+### Fixed
+
 - **ObjectView ChatterPanel test assertion mismatch** (`apps/console`): Fixed the failing CI test in `ObjectView.test.tsx` where the RecordChatterPanel drawer test used `getByLabelText('Show discussion')` but the actual aria-label rendered by the component is `'Show Discussion (0)'` (from the i18n default translation `detail.showDiscussion` with count parameter). Updated the test assertion to match the correct aria-label.
 
 ### Changed

packages/components/src/renderers/form/form.tsx

@@ -28,34 +28,12 @@ import { AlertCircle, Loader2 } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import React from 'react';
 import { SchemaRendererContext } from '@object-ui/react';
-import { useObjectTranslation } from '@object-ui/i18n';
+import { createSafeTranslation } from '@object-ui/i18n';
 
-/**
- * Safe translation helper that falls back to English defaults when
- * no I18nProvider is available.
- */
-function useSafeFormTranslation() {
-  try {
-    const result = useObjectTranslation();
-    const testValue = result.t('common.selectOption');
-    if (testValue === 'common.selectOption') {
-      return { t: (key: string) => {
-        const defaults: Record<string, string> = {
-          'common.selectOption': 'Select an option',
-        };
-        return defaults[key] || key;
-      }};
-    }
-    return { t: result.t };
-  } catch {
-    return { t: (key: string) => {
-      const defaults: Record<string, string> = {
-        'common.selectOption': 'Select an option',
-      };
-      return defaults[key] || key;
-    }};
-  }
-}
+const useSafeFormTranslation = createSafeTranslation(
+  { 'common.selectOption': 'Select an option' },
+  'common.selectOption',
+);
 
 // Form renderer component - Airtable-style feature-complete form
 ComponentRegistry.register('form',
@@ -543,7 +521,7 @@ function renderFieldComponent(type: string, props: RenderFieldProps) {
       return (
         <Select value={selectValue} onValueChange={selectOnChange} {...selectProps}>
           <SelectTrigger className="min-h-[44px] sm:min-h-0">
-            <SelectValue placeholder={placeholder} />
+            <SelectValue placeholder={placeholder || 'Select an option'} />
           </SelectTrigger>
           <SelectContent>
             {options.map((opt: SelectOption) => (

packages/fields/src/widgets/useFieldTranslation.ts

@@ -2,7 +2,7 @@
  * Safe translation hook for field widgets.
  * Falls back to English defaults when no I18nProvider is available.
  */
-import { useObjectTranslation } from '@object-ui/i18n';
+import { createSafeTranslation } from '@object-ui/i18n';
 
 const FIELD_DEFAULTS: Record<string, string> = {
   'common.selectOption': 'Select an option',
@@ -11,37 +11,7 @@ const FIELD_DEFAULTS: Record<string, string> = {
   'table.selected': '{{count}} selected',
 };
 
-export function useFieldTranslation() {
-  try {
-    const result = useObjectTranslation();
-    // Test if i18n is properly configured
-    const testValue = result.t('common.selectOption');
-    if (testValue === 'common.selectOption') {
-      // i18n not configured — use defaults
-      return {
-        t: (key: string, options?: Record<string, unknown>) => {
-          let value = FIELD_DEFAULTS[key] || key;
-          if (options) {
-            for (const [k, v] of Object.entries(options)) {
-              value = value.replace(`{{${k}}}`, String(v));
-            }
-          }
-          return value;
-        },
-      };
-    }
-    return { t: result.t };
-  } catch {
-    return {
-      t: (key: string, options?: Record<string, unknown>) => {
-        let value = FIELD_DEFAULTS[key] || key;
-        if (options) {
-          for (const [k, v] of Object.entries(options)) {
-            value = value.replace(`{{${k}}}`, String(v));
-          }
-        }
-        return value;
-      },
-    };
-  }
-}
+export const useFieldTranslation = createSafeTranslation(
+  FIELD_DEFAULTS,
+  'common.selectOption',
+);

packages/i18n/src/index.ts

@@ -37,6 +37,9 @@ export { createI18n, getDirection, getAvailableLanguages, type I18nConfig, type
 // React integration
 export { I18nProvider, useObjectTranslation, useI18nContext, type I18nProviderProps } from './provider';
 
+// Safe translation hook factory
+export { createSafeTranslation } from './useSafeTranslation';
+
 // Convention-based object/field label i18n
 export { useObjectLabel, useSafeFieldLabel } from './useObjectLabel';
 

packages/i18n/src/useSafeTranslation.ts

@@ -0,0 +1,49 @@
+/**
+ * Safe translation hook with fallback to default strings.
+ *
+ * When no I18nProvider is available (e.g., in tests or standalone usage),
+ * this hook falls back to the provided default translations instead of
+ * returning raw i18n keys.
+ *
+ * @param defaults - Fallback English translations keyed by i18n key
+ * @param testKey - A key to test if i18n is properly configured (must be in defaults)
+ */
+import { useObjectTranslation } from './provider';
+
+export function createSafeTranslation(
+  defaults: Record<string, string>,
+  testKey: string,
+) {
+  return function useSafeTranslation() {
+    try {
+      const result = useObjectTranslation();
+      const testValue = result.t(testKey);
+      if (testValue === testKey) {
+        return {
+          t: (key: string, options?: Record<string, unknown>) => {
+            let value = defaults[key] || key;
+            if (options) {
+              for (const [k, v] of Object.entries(options)) {
+                value = value.replace(`{{${k}}}`, String(v));
+              }
+            }
+            return value;
+          },
+        };
+      }
+      return { t: result.t };
+    } catch {
+      return {
+        t: (key: string, options?: Record<string, unknown>) => {
+          let value = defaults[key] || key;
+          if (options) {
+            for (const [k, v] of Object.entries(options)) {
+              value = value.replace(`{{${k}}}`, String(v));
+            }
+          }
+          return value;
+        },
+      };
+    }
+  };
+}

packages/react/src/components/form/FieldFactory.tsx

@@ -10,34 +10,12 @@ import React from 'react';
 import { UseFormReturn } from 'react-hook-form';
 import type { FormField } from '@objectstack/spec/ui';
 import { resolveI18nLabel } from '../../utils/i18n';
-import { useObjectTranslation } from '@object-ui/i18n';
+import { createSafeTranslation } from '@object-ui/i18n';
 
-/**
- * Safe translation helper that falls back to English defaults when
- * no I18nProvider is available.
- */
-function useSafeTranslation() {
-  try {
-    const result = useObjectTranslation();
-    const testValue = result.t('common.selectOption');
-    if (testValue === 'common.selectOption') {
-      return { t: (key: string) => {
-        const defaults: Record<string, string> = {
-          'common.selectOption': 'Select an option',
-        };
-        return defaults[key] || key;
-      }};
-    }
-    return { t: result.t };
-  } catch {
-    return { t: (key: string) => {
-      const defaults: Record<string, string> = {
-        'common.selectOption': 'Select an option',
-      };
-      return defaults[key] || key;
-    }};
-  }
-}
+const useSafeTranslation = createSafeTranslation(
+  { 'common.selectOption': 'Select an option' },
+  'common.selectOption',
+);
 
 /**
  * Extended form field with additional properties for complex widgets