refactor(i18n): extract useSafeFieldLabel, eliminate duplication in form/grid

- Extract useSafeFieldLabel to packages/i18n for reuse across plugins
- Replace 6 duplicated safe wrappers (5 forms + grid) with shared import
- Add BUILTIN_KEYS maintenance documentation
- Export useSafeFieldLabel from @object-ui/i18n and @object-ui/react
- Update console test mocks to include useSafeFieldLabel

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

apps/console/src/__tests__/AppSidebar.test.tsx

@@ -103,6 +103,9 @@ vi.mock('@object-ui/i18n', () => ({
     objectDescription: (obj: any) => obj.description,
     fieldLabel: (_objectName: string, _fieldName: string, fallback: string) => fallback,
   }),
+  useSafeFieldLabel: () => ({
+    fieldLabel: (_objectName: string, _fieldName: string, fallback: string) => fallback,
+  }),
 }));
 
 // Mock @object-ui/components to keep most components but simplify some

apps/console/src/__tests__/app-creation-integration.test.tsx

@@ -273,6 +273,9 @@ vi.mock('@object-ui/i18n', () => ({
     objectDescription: (obj: any) => obj.description,
     fieldLabel: (_objectName: string, _fieldName: string, fallback: string) => fallback,
   }),
+  useSafeFieldLabel: () => ({
+    fieldLabel: (_objectName: string, _fieldName: string, fallback: string) => fallback,
+  }),
 }));
 
 describe('Console App Creation Integration', () => {

packages/i18n/src/index.ts

@@ -38,7 +38,7 @@ export { createI18n, getDirection, getAvailableLanguages, type I18nConfig, type
 export { I18nProvider, useObjectTranslation, useI18nContext, type I18nProviderProps } from './provider';
 
 // Convention-based object/field label i18n
-export { useObjectLabel } from './useObjectLabel';
+export { useObjectLabel, useSafeFieldLabel } from './useObjectLabel';
 
 // Locale packs
 export { builtInLocales, isRTL, RTL_LANGUAGES } from './locales/index';

packages/i18n/src/useObjectLabel.ts

@@ -19,7 +19,12 @@
 
 import { useObjectTranslation } from './provider';
 
-/** Built-in Object UI top-level locale keys — not app namespaces. */
+/**
+ * Built-in Object UI top-level locale keys — not app namespaces.
+ * Update this set when new top-level platform translation keys are added
+ * to `packages/i18n/src/locales/en.ts` to prevent them from being treated
+ * as app namespaces during dynamic namespace discovery.
+ */
 const BUILTIN_KEYS = new Set([
   'common', 'validation', 'form', 'table', 'grid', 'calendar',
   'list', 'kanban', 'chart', 'dashboard', 'configPanel',
@@ -99,3 +104,19 @@ export function useObjectLabel() {
       resolve(`fields.${objectName}.${fieldName}`, fallback),
   };
 }
+
+/**
+ * Safe wrapper for useObjectLabel that falls back to identity functions
+ * when no I18nProvider is available. Suitable for plugin components that
+ * may be rendered outside an i18n context.
+ */
+export function useSafeFieldLabel() {
+  try {
+    const { fieldLabel } = useObjectLabel();
+    return { fieldLabel };
+  } catch {
+    return {
+      fieldLabel: (_objectName: string, _fieldName: string, fallback: string) => fallback,
+    };
+  }
+}

packages/plugin-form/src/DrawerForm.tsx

@@ -24,24 +24,10 @@ import {
   cn,
 } from '@object-ui/components';
 import { FormSection } from './FormSection';
-import { SchemaRenderer, useObjectLabel } from '@object-ui/react';
+import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields';
 import { applyAutoLayout } from './autoLayout';
 
-/**
- * Safe wrapper for useObjectLabel that falls back to identity when I18nProvider is unavailable.
- */
-function useDrawerFieldLabel() {
-  try {
-    const { fieldLabel } = useObjectLabel();
-    return { fieldLabel };
-  } catch {
-    return {
-      fieldLabel: (_objectName: string, _fieldName: string, fallback: string) => fallback,
-    };
-  }
-}
-
 /**
  * Container-query-based grid classes for form field layout.
  * Uses @container / @md: / @2xl: / @4xl: variants so that the grid
@@ -125,7 +111,7 @@ export const DrawerForm: React.FC<DrawerFormProps> = ({
   dataSource,
   className,
 }) => {
-  const { fieldLabel } = useDrawerFieldLabel();
+  const { fieldLabel } = useSafeFieldLabel();
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formFields, setFormFields] = useState<FormField[]>([]);
   const [formData, setFormData] = useState<Record<string, any>>({});

packages/plugin-form/src/ModalForm.tsx

@@ -27,24 +27,10 @@ import {
 } from '@object-ui/components';
 import { Loader2 } from 'lucide-react';
 import { FormSection } from './FormSection';
-import { SchemaRenderer, useObjectLabel } from '@object-ui/react';
+import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields';
 import { applyAutoLayout, inferModalSize } from './autoLayout';
 
-/**
- * Safe wrapper for useObjectLabel that falls back to identity when I18nProvider is unavailable.
- */
-function useModalFieldLabel() {
-  try {
-    const { fieldLabel } = useObjectLabel();
-    return { fieldLabel };
-  } catch {
-    return {
-      fieldLabel: (_objectName: string, _fieldName: string, fallback: string) => fallback,
-    };
-  }
-}
-
 export interface ModalFormSectionConfig {
   name?: string;
   label?: string;
@@ -137,7 +123,7 @@ export const ModalForm: React.FC<ModalFormProps> = ({
   dataSource,
   className,
 }) => {
-  const { fieldLabel } = useModalFieldLabel();
+  const { fieldLabel } = useSafeFieldLabel();
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formFields, setFormFields] = useState<FormField[]>([]);
   const [formData, setFormData] = useState<Record<string, any>>({});

packages/plugin-form/src/ObjectForm.tsx

@@ -15,7 +15,7 @@
 
 import React, { useEffect, useState, useCallback } from 'react';
 import type { ObjectFormSchema, FormField, FormSchema, DataSource } from '@object-ui/types';
-import { SchemaRenderer, useObjectLabel } from '@object-ui/react';
+import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { mapFieldTypeToFormType, buildValidationRules, evaluateCondition, formatFileSize } from '@object-ui/fields';
 import { TabbedForm } from './TabbedForm';
 import { WizardForm } from './WizardForm';
@@ -25,20 +25,6 @@ import { ModalForm } from './ModalForm';
 import { FormSection } from './FormSection';
 import { applyAutoLayout } from './autoLayout';
 
-/**
- * Safe wrapper for useObjectLabel that falls back to identity when I18nProvider is unavailable.
- */
-function useFormFieldLabel() {
-  try {
-    const { fieldLabel } = useObjectLabel();
-    return { fieldLabel };
-  } catch {
-    return {
-      fieldLabel: (_objectName: string, _fieldName: string, fallback: string) => fallback,
-    };
-  }
-}
-
 export interface ObjectFormProps {
   /**
    * The schema configuration for the form
@@ -216,7 +202,7 @@ const SimpleObjectForm: React.FC<ObjectFormProps> = ({
   schema,
   dataSource,
 }) => {
-  const { fieldLabel } = useFormFieldLabel();
+  const { fieldLabel } = useSafeFieldLabel();
 
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formFields, setFormFields] = useState<FormField[]>([]);

packages/plugin-form/src/SplitForm.tsx

@@ -23,23 +23,9 @@ import {
   cn,
 } from '@object-ui/components';
 import { FormSection } from './FormSection';
-import { SchemaRenderer, useObjectLabel } from '@object-ui/react';
+import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields';
 
-/**
- * Safe wrapper for useObjectLabel that falls back to identity when I18nProvider is unavailable.
- */
-function useSplitFieldLabel() {
-  try {
-    const { fieldLabel } = useObjectLabel();
-    return { fieldLabel };
-  } catch {
-    return {
-      fieldLabel: (_objectName: string, _fieldName: string, fallback: string) => fallback,
-    };
-  }
-}
-
 export interface SplitFormSectionConfig {
   name?: string;
   label?: string;
@@ -99,7 +85,7 @@ export const SplitForm: React.FC<SplitFormProps> = ({
   dataSource,
   className,
 }) => {
-  const { fieldLabel } = useSplitFieldLabel();
+  const { fieldLabel } = useSafeFieldLabel();
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formData, setFormData] = useState<Record<string, any>>({});
   const [loading, setLoading] = useState(true);

packages/plugin-form/src/TabbedForm.tsx

@@ -17,23 +17,9 @@ import React, { useState, useCallback } from 'react';
 import type { FormField, DataSource } from '@object-ui/types';
 import { Tabs, TabsContent, TabsList, TabsTrigger, cn } from '@object-ui/components';
 import { FormSection } from './FormSection';
-import { SchemaRenderer, useObjectLabel } from '@object-ui/react';
+import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields';
 
-/**
- * Safe wrapper for useObjectLabel that falls back to identity when I18nProvider is unavailable.
- */
-function useTabbedFieldLabel() {
-  try {
-    const { fieldLabel } = useObjectLabel();
-    return { fieldLabel };
-  } catch {
-    return {
-      fieldLabel: (_objectName: string, _fieldName: string, fallback: string) => fallback,
-    };
-  }
-}
-
 export interface FormSectionConfig {
   /**
    * Section identifier (used as tab value)
@@ -180,7 +166,7 @@ export const TabbedForm: React.FC<TabbedFormProps> = ({
   dataSource,
   className,
 }) => {
-  const { fieldLabel } = useTabbedFieldLabel();
+  const { fieldLabel } = useSafeFieldLabel();
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formData, setFormData] = useState<Record<string, any>>({});
   const [loading, setLoading] = useState(true);

packages/plugin-form/src/WizardForm.tsx

@@ -18,24 +18,10 @@ import type { FormField, DataSource } from '@object-ui/types';
 import { Button, cn } from '@object-ui/components';
 import { Check, ChevronLeft, ChevronRight } from 'lucide-react';
 import { FormSection } from './FormSection';
-import { SchemaRenderer, useObjectLabel } from '@object-ui/react';
+import { SchemaRenderer, useSafeFieldLabel } from '@object-ui/react';
 import { mapFieldTypeToFormType, buildValidationRules } from '@object-ui/fields';
 import type { FormSectionConfig } from './TabbedForm';
 
-/**
- * Safe wrapper for useObjectLabel that falls back to identity when I18nProvider is unavailable.
- */
-function useWizardFieldLabel() {
-  try {
-    const { fieldLabel } = useObjectLabel();
-    return { fieldLabel };
-  } catch {
-    return {
-      fieldLabel: (_objectName: string, _fieldName: string, fallback: string) => fallback,
-    };
-  }
-}
-
 export interface WizardFormSchema {
   type: 'object-form';
   formType: 'wizard';
@@ -167,7 +153,7 @@ export const WizardForm: React.FC<WizardFormProps> = ({
   dataSource,
   className,
 }) => {
-  const { fieldLabel } = useWizardFieldLabel();
+  const { fieldLabel } = useSafeFieldLabel();
   const [objectSchema, setObjectSchema] = useState<any>(null);
   const [formData, setFormData] = useState<Record<string, any>>({});
   const [loading, setLoading] = useState(true);