@object-ui/fields 3.1.5 → 3.3.1

package/dist/packages/fields/src/widgets/useFieldTranslation.d.ts

@@ -0,0 +1,5 @@
+export declare const useFieldTranslation: () => {
+    t: (key: string, options?: Record<string, unknown>) => string;
+} | {
+    t: import('i18next').TFunction<string, undefined>;
+};

package/dist/rolldown-runtime-CAFD8bLK.js

@@ -0,0 +1,11 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+//#endregion
+export { t };

package/dist/useFieldTranslation-BYPwtuNZ.cjs

@@ -0,0 +1 @@
+require(`./chunk-D-qHiVGv.cjs`);var e=(0,require(`@object-ui/i18n`).createSafeTranslation)({"common.selectOption":`Select an option`,"common.select":`Select...`,"common.search":`Search`,"table.selected":`{{count}} selected`},`common.selectOption`);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return e}});

package/dist/useFieldTranslation-Bv3oUVgb.js

@@ -0,0 +1,9 @@
+import { createSafeTranslation as e } from "@object-ui/i18n";
+var t = e({
+	"common.selectOption": "Select an option",
+	"common.select": "Select...",
+	"common.search": "Search",
+	"table.selected": "{{count}} selected"
+}, "common.selectOption");
+//#endregion
+export { t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/fields",
-  "version": "3.1.5",
+  "version": "3.3.1",
   "description": "Field renderers and registry for Object UI",
   "license": "MIT",
   "type": "module",
@@ -19,16 +19,19 @@
   "files": [
     "dist",
     "src",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
   ],
   "dependencies": {
     "clsx": "^2.1.1",
-    "lucide-react": "^0.577.0",
+    "lucide-react": "^1.8.0",
     "tailwind-merge": "^3.5.0",
-    "@object-ui/components": "3.1.5",
-    "@object-ui/core": "3.1.5",
-    "@object-ui/react": "3.1.5",
-    "@object-ui/types": "3.1.5"
+    "@object-ui/components": "3.3.1",
+    "@object-ui/core": "3.3.1",
+    "@object-ui/i18n": "3.3.1",
+    "@object-ui/react": "3.3.1",
+    "@object-ui/types": "3.3.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -38,13 +41,36 @@
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.9",
     "vite-plugin-dts": "^4.5.4"
   },
   "publishConfig": {
     "access": "public"
   },
+  "keywords": [
+    "objectui",
+    "sdui",
+    "schema-driven-ui",
+    "react",
+    "tailwind",
+    "shadcn",
+    "objectstack",
+    "fields",
+    "form-fields",
+    "renderer",
+    "widgets"
+  ],
+  "author": "ObjectStack Team <team@objectstack.ai>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/objectstack-ai/objectui.git",
+    "directory": "packages/fields"
+  },
+  "bugs": {
+    "url": "https://github.com/objectstack-ai/objectui/issues"
+  },
+  "homepage": "https://www.objectui.org/docs/fields",
   "scripts": {
     "build": "tsc && vite build",
     "clean": "rm -rf dist",

package/src/__tests__/cell-renderers.test.tsx

@@ -106,17 +106,17 @@ describe('TextCellRenderer', () => {
 
   it('should render dash for null', () => {
     render(<TextCellRenderer value={null} field={{ name: 'title', type: 'text' } as any} />);
-    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.getByText('—')).toBeInTheDocument();
   });
 
   it('should render dash for undefined', () => {
     render(<TextCellRenderer value={undefined} field={{ name: 'title', type: 'text' } as any} />);
-    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.getByText('—')).toBeInTheDocument();
   });
 
   it('should render dash for empty string', () => {
     render(<TextCellRenderer value="" field={{ name: 'title', type: 'text' } as any} />);
-    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.getByText('—')).toBeInTheDocument();
   });
 
   it('should render "0" for numeric zero (not dash)', () => {
@@ -149,8 +149,12 @@ describe('SelectCellRenderer', () => {
     expect(container.querySelector('[class*="bg-blue-100"]')).toBeInTheDocument();
   });
 
-  it('should use muted style when no color configured', () => {
-    const { container } = render(
+  it('should fall back to a deterministic palette color when no color configured and no semantic match', () => {
+    // Hash-based fallback: distinct values get distinct colors so badges
+    // never all collapse to muted gray. The exact color is deterministic
+    // (stable across renders) but value-derived; we just assert one of the
+    // palette tones is applied.
+    const { container, rerender } = render(
       <SelectCellRenderer
         value="Unknown"
         field={{
@@ -161,7 +165,24 @@ describe('SelectCellRenderer', () => {
       />
     );
     expect(screen.getByText('Unknown')).toBeInTheDocument();
-    expect(container.querySelector('[class*="bg-muted"]')).toBeInTheDocument();
+    const palette = ['blue', 'green', 'purple', 'orange', 'pink', 'indigo', 'yellow', 'red'];
+    const matched = palette.some((c) => container.querySelector(`[class*="bg-${c}-100"]`));
+    expect(matched).toBe(true);
+
+    // Same value → same color across renders (deterministic).
+    const firstClass = container.querySelector('[data-slot="badge"], [class*="bg-"][class*="-100"]')?.className;
+    rerender(
+      <SelectCellRenderer
+        value="Unknown"
+        field={{
+          name: 'status',
+          type: 'select',
+          options: [{ value: 'Unknown', label: 'Unknown' }],
+        } as any}
+      />
+    );
+    const secondClass = container.querySelector('[data-slot="badge"], [class*="bg-"][class*="-100"]')?.className;
+    expect(secondClass).toBe(firstClass);
   });
 
   it('should auto-detect priority semantic colors (Critical → red)', () => {
@@ -302,7 +323,7 @@ describe('SelectCellRenderer', () => {
         field={{ name: 'status', type: 'select' } as any}
       />
     );
-    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.getByText('—')).toBeInTheDocument();
   });
 
   it('should render multiple badges for array values', () => {
@@ -413,7 +434,7 @@ describe('DateCellRenderer', () => {
         field={{ name: 'due_date', type: 'date' } as any}
       />
     );
-    expect(container.textContent).toBe('-');
+    expect(container.textContent).toBe('—');
   });
 
   it('should use explicit format when provided', () => {
@@ -590,7 +611,7 @@ describe('EmailCellRenderer', () => {
 
   it('should render dash for empty value', () => {
     render(<EmailCellRenderer value={null} field={{ name: 'email', type: 'email' } as any} />);
-    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.getByText('—')).toBeInTheDocument();
   });
 });
 
@@ -613,7 +634,7 @@ describe('PhoneCellRenderer', () => {
 
   it('should render dash for empty value', () => {
     render(<PhoneCellRenderer value={null} field={{ name: 'phone', type: 'phone' } as any} />);
-    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.getByText('—')).toBeInTheDocument();
   });
 });
 
@@ -632,15 +653,15 @@ describe('formatRelativeDate', () => {
   });
 
   it('should return "-" for null', () => {
-    expect(formatRelativeDate(null as any)).toBe('-');
+    expect(formatRelativeDate(null as any)).toBe('—');
   });
 
   it('should return "-" for empty string', () => {
-    expect(formatRelativeDate('')).toBe('-');
+    expect(formatRelativeDate('')).toBe('—');
   });
 
   it('should return "-" for invalid date', () => {
-    expect(formatRelativeDate('not-a-date')).toBe('-');
+    expect(formatRelativeDate('not-a-date')).toBe('—');
   });
 
   it('should return "Today" for today', () => {
@@ -694,11 +715,11 @@ describe('formatRelativeDate', () => {
 // =========================================================================
 describe('formatDate', () => {
   it('should return "-" for null', () => {
-    expect(formatDate(null as any)).toBe('-');
+    expect(formatDate(null as any)).toBe('—');
   });
 
   it('should return "-" for invalid date', () => {
-    expect(formatDate('invalid')).toBe('-');
+    expect(formatDate('invalid')).toBe('—');
   });
 
   it('should format as relative when style is "relative"', () => {
@@ -731,7 +752,7 @@ describe('LookupCellRenderer', () => {
         field={{ name: 'customer', type: 'lookup' } as any}
       />
     );
-    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.getByText('—')).toBeInTheDocument();
   });
 
   it('should render dash for empty string', () => {
@@ -741,7 +762,7 @@ describe('LookupCellRenderer', () => {
         field={{ name: 'customer', type: 'lookup' } as any}
       />
     );
-    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.getByText('—')).toBeInTheDocument();
   });
 
   it('should resolve primitive ID to label via field options', () => {
@@ -858,7 +879,7 @@ describe('UserCellRenderer', () => {
         field={{ name: 'owner', type: 'user' } as any}
       />
     );
-    expect(screen.getByText('-')).toBeInTheDocument();
+    expect(screen.getByText('—')).toBeInTheDocument();
   });
 
   it('should render text for primitive user ID (number)', () => {

package/src/__tests__/datetime-cell.test.tsx

@@ -31,7 +31,7 @@ describe('DateTimeCellRenderer', () => {
         field={{ name: 'created_at', type: 'datetime' } as any}
       />
     );
-    expect(container.textContent).toBe('-');
+    expect(container.textContent).toBe('—');
   });
 
   it('should show dash for invalid date', () => {
@@ -41,6 +41,6 @@ describe('DateTimeCellRenderer', () => {
         field={{ name: 'created_at', type: 'datetime' } as any}
       />
     );
-    expect(container.textContent).toBe('-');
+    expect(container.textContent).toBe('—');
   });
 });

package/src/__tests__/datetime-timezone.test.tsx

@@ -347,7 +347,7 @@ describe('P3.2 Date/Time Timezone & Locale Formatting', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('DateField readonly shows "-" for null', () => {
@@ -359,7 +359,7 @@ describe('P3.2 Date/Time Timezone & Locale Formatting', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('DateField readonly shows "-" for undefined', () => {
@@ -371,7 +371,7 @@ describe('P3.2 Date/Time Timezone & Locale Formatting', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('TimeField readonly shows "-" for empty string', () => {
@@ -383,7 +383,7 @@ describe('P3.2 Date/Time Timezone & Locale Formatting', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('TimeField readonly shows "-" for null', () => {
@@ -395,7 +395,7 @@ describe('P3.2 Date/Time Timezone & Locale Formatting', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('TimeField readonly shows "-" for undefined', () => {
@@ -407,7 +407,7 @@ describe('P3.2 Date/Time Timezone & Locale Formatting', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('DateTimeField readonly shows "-" for empty string', () => {
@@ -419,7 +419,7 @@ describe('P3.2 Date/Time Timezone & Locale Formatting', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('DateTimeField readonly shows "-" for null', () => {
@@ -431,7 +431,7 @@ describe('P3.2 Date/Time Timezone & Locale Formatting', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('DateTimeField readonly shows "-" for undefined', () => {
@@ -443,7 +443,7 @@ describe('P3.2 Date/Time Timezone & Locale Formatting', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('DateField editable uses empty string for null value', () => {

package/src/__tests__/validation-feedback.test.tsx

@@ -191,7 +191,7 @@ describe('P3.2 Validation Feedback', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('NumberField shows dash for null value in readonly', () => {
@@ -203,7 +203,7 @@ describe('P3.2 Validation Feedback', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('EmailField shows dash for empty value in readonly', () => {
@@ -215,7 +215,7 @@ describe('P3.2 Validation Feedback', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('UrlField shows dash for empty value in readonly', () => {
@@ -227,7 +227,7 @@ describe('P3.2 Validation Feedback', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('PhoneField shows dash for empty value in readonly', () => {
@@ -239,7 +239,7 @@ describe('P3.2 Validation Feedback', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('TextAreaField shows dash for empty value in readonly', () => {
@@ -251,7 +251,7 @@ describe('P3.2 Validation Feedback', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('BooleanField shows Yes/No in readonly', () => {
@@ -285,7 +285,7 @@ describe('P3.2 Validation Feedback', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
 
     it('CurrencyField shows dash for null value in readonly', () => {
@@ -297,7 +297,7 @@ describe('P3.2 Validation Feedback', () => {
           readonly={true}
         />
       );
-      expect(container.textContent).toBe('-');
+      expect(container.textContent).toBe('—');
     });
   });
 

package/src/datetime-widgets.test.tsx

@@ -42,7 +42,7 @@ describe('Date/Time Widgets', () => {
 
         it('renders dash for empty readonly value', () => {
             render(<DateField {...baseProps} readonly value={''} />);
-            expect(screen.getByText('-')).toBeInTheDocument();
+            expect(screen.getByText('—')).toBeInTheDocument();
         });
     });
 

package/src/index.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import type { FieldMetadata, SelectOptionMetadata } from '@object-ui/types';
 import { ComponentRegistry } from '@object-ui/core';
-import { Badge, Avatar, AvatarFallback, Button, Checkbox } from '@object-ui/components';
+import { Badge, Avatar, AvatarFallback, Button, Checkbox, EmptyValue } from '@object-ui/components';
 import { Check, X, Copy, Phone as PhoneIcon } from 'lucide-react';
 
 import { TextField } from './widgets/TextField';
@@ -154,9 +154,9 @@ export function humanizeLabel(value: string): string {
  * Format date as relative time (e.g., "2 days ago", "Today", "Overdue 3d")
  */
 export function formatRelativeDate(value: string | Date): string {
-  if (!value) return '-';
+  if (!value) return '—';
   const date = typeof value === 'string' ? new Date(value) : value;
-  if (isNaN(date.getTime())) return '-';
+  if (isNaN(date.getTime())) return '—';
 
   const now = new Date();
   const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
@@ -180,9 +180,9 @@ export function formatRelativeDate(value: string | Date): string {
  * Format date value
  */
 export function formatDate(value: string | Date, style?: string): string {
-  if (!value) return '-';
+  if (!value) return '—';
   const date = typeof value === 'string' ? new Date(value) : value;
-  if (isNaN(date.getTime())) return '-';
+  if (isNaN(date.getTime())) return '—';
 
   if (style === 'short') {
     // Compact format for mobile: "Jan 15, '24"
@@ -208,9 +208,9 @@ export function formatDate(value: string | Date, style?: string): string {
  * Format datetime value
  */
 export function formatDateTime(value: string | Date): string {
-  if (!value) return '-';
+  if (!value) return '—';
   const date = typeof value === 'string' ? new Date(value) : value;
-  if (isNaN(date.getTime())) return '-';
+  if (isNaN(date.getTime())) return '—';
   
   return date.toLocaleDateString(undefined, {
     year: 'numeric',
@@ -226,14 +226,15 @@ export function formatDateTime(value: string | Date): string {
  */
 export function TextCellRenderer({ value }: CellRendererProps): React.ReactElement {
   const safe = coerceToSafeValue(value);
-  return <span className="truncate">{(safe != null && safe !== '') ? String(safe) : '-'}</span>;
+  if (safe == null || safe === '') return <EmptyValue />;
+  return <span className="truncate">{String(safe)}</span>;
 }
 
 /**
  * Number field cell renderer
  */
 export function NumberCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
-  if (value == null) return <span className="text-muted-foreground">-</span>;
+  if (value == null) return <EmptyValue />;
   
   const safe = coerceToSafeValue(value);
   const numField = field as any;
@@ -250,7 +251,7 @@ export function NumberCellRenderer({ value, field }: CellRendererProps): React.R
  * Currency field cell renderer
  */
 export function CurrencyCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
-  if (value == null) return <span className="text-muted-foreground">-</span>;
+  if (value == null) return <EmptyValue />;
   
   const safe = coerceToSafeValue(value);
   const currencyField = field as any;
@@ -268,7 +269,7 @@ const WHOLE_PERCENT_FIELD_PATTERN = /progress|completion/;
  * Percent field cell renderer with mini progress bar
  */
 export function PercentCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
-  if (value == null) return <span className="text-muted-foreground">-</span>;
+  if (value == null) return <EmptyValue />;
   
   const safe = coerceToSafeValue(value);
   const percentField = field as any;
@@ -317,7 +318,7 @@ const STATUS_FIELD_NAMES = new Set([
  */
 export function BooleanCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
   if (value == null) {
-    return <span className="text-muted-foreground/50 text-xs italic flex items-center justify-center">—</span>;
+    return <span className="flex items-center justify-center"><EmptyValue /></span>;
   }
 
   // Semantic rendering for completion fields (green circle indicator)
@@ -360,7 +361,7 @@ export function BooleanCellRenderer({ value, field }: CellRendererProps): React.
  * Date field cell renderer
  */
 export function DateCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
-  if (!value) return <span className="text-muted-foreground">-</span>;
+  if (!value) return <EmptyValue />;
   const safe = coerceToSafeValue(value);
   const dateField = field as any;
   const style = dateField.format || 'relative';
@@ -388,10 +389,10 @@ export function DateCellRenderer({ value, field }: CellRendererProps): React.Rea
  * DateTime field cell renderer (Airtable-style with date and time visually separated)
  */
 export function DateTimeCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  if (!value) return <span className="text-muted-foreground">-</span>;
+  if (!value) return <EmptyValue />;
   const safe = coerceToSafeValue(value);
   const date = typeof safe === 'string' ? new Date(safe) : safe;
-  if (!(date instanceof Date) || isNaN(date.getTime())) return <span className="text-muted-foreground">-</span>;
+  if (!(date instanceof Date) || isNaN(date.getTime())) return <EmptyValue />;
 
   const datePart = date.toLocaleDateString(undefined, {
     month: 'numeric',
@@ -463,10 +464,34 @@ const BADGE_COLOR_MAP: Record<string, string> = {
   pink: 'bg-pink-100 text-pink-800 border-pink-300',
 };
 
-function getBadgeColorClasses(color?: string, val?: string): string {
-  const resolvedColor = color
-    || (val ? SEMANTIC_COLOR_MAP[String(val).toLowerCase().replace(/[\s-]/g, '_')] : undefined);
-  return BADGE_COLOR_MAP[resolvedColor || ''] || 'bg-muted text-muted-foreground border-border';
+// Color palette used by the deterministic fallback when no schema/semantic
+// color matches. Excludes 'gray' to ensure visual contrast between values.
+const BADGE_FALLBACK_PALETTE: readonly string[] = [
+  'blue', 'green', 'purple', 'orange', 'pink', 'indigo', 'yellow', 'red',
+];
+
+/**
+ * Stable string hash (djb2-ish) → palette index.
+ * Same value always yields the same color across renders/sessions.
+ */
+function hashToColor(value: string): string {
+  let h = 5381;
+  for (let i = 0; i < value.length; i++) {
+    h = ((h << 5) + h) ^ value.charCodeAt(i);
+  }
+  const idx = Math.abs(h) % BADGE_FALLBACK_PALETTE.length;
+  return BADGE_FALLBACK_PALETTE[idx];
+}
+
+function getBadgeColorClasses(color?: string, val?: unknown): string {
+  if (color && BADGE_COLOR_MAP[color]) return BADGE_COLOR_MAP[color];
+  if (val == null || val === '') return 'bg-muted text-muted-foreground border-border';
+  const key = String(val).toLowerCase().replace(/[\s-]/g, '_');
+  const semantic = SEMANTIC_COLOR_MAP[key];
+  if (semantic && BADGE_COLOR_MAP[semantic]) return BADGE_COLOR_MAP[semantic];
+  // Deterministic fallback so distinct values are visually distinguishable
+  // even when metadata declares no colors.
+  return BADGE_COLOR_MAP[hashToColor(key)];
 }
 
 /**
@@ -476,7 +501,7 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
   const selectField = field as any;
   const options: SelectOptionMetadata[] = selectField.options || [];
   
-  if (!value) return <span>-</span>;
+  if (value == null || value === '') return <EmptyValue />;
   
   // Handle multiple values
   if (Array.isArray(value)) {
@@ -520,7 +545,7 @@ export function SelectCellRenderer({ value, field }: CellRendererProps): React.R
  * Email field cell renderer
  */
 export function EmailCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  if (!value) return <span>-</span>;
+  if (!value) return <EmptyValue />;
   
   const safe = String(coerceToSafeValue(value) ?? '');
   const [copied, setCopied] = React.useState(false);
@@ -568,7 +593,7 @@ export function EmailCellRenderer({ value }: CellRendererProps): React.ReactElem
  * URL field cell renderer
  */
 export function UrlCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  if (!value) return <span>-</span>;
+  if (!value) return <EmptyValue />;
   
   const safe = String(coerceToSafeValue(value) ?? '');
   return (
@@ -593,7 +618,7 @@ export function UrlCellRenderer({ value }: CellRendererProps): React.ReactElemen
  * Phone field cell renderer
  */
 export function PhoneCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  if (!value) return <span>-</span>;
+  if (!value) return <EmptyValue />;
   
   const safe = String(coerceToSafeValue(value) ?? '');
   const [copied, setCopied] = React.useState(false);
@@ -637,7 +662,7 @@ export function PhoneCellRenderer({ value }: CellRendererProps): React.ReactElem
  * File field cell renderer
  */
 export function FileCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
-  if (!value) return <span>-</span>;
+  if (!value) return <EmptyValue />;
   
   const fileField = field as any;
   const isMultiple = fileField.multiple;
@@ -659,7 +684,7 @@ export function FileCellRenderer({ value, field }: CellRendererProps): React.Rea
  * Image field cell renderer (with thumbnails)
  */
 export function ImageCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  if (!value) return <span>-</span>;
+  if (!value) return <EmptyValue />;
   
   if (Array.isArray(value)) {
     return (
@@ -694,7 +719,7 @@ export function ImageCellRenderer({ value }: CellRendererProps): React.ReactElem
  * Lookup/Master-Detail field cell renderer
  */
 export function LookupCellRenderer({ value, field }: CellRendererProps): React.ReactElement {
-  if (value == null || value === '') return <span>-</span>;
+  if (value == null || value === '') return <EmptyValue />;
 
   const options: Array<{ value: unknown; label: string }> =
     (field as { options?: Array<{ value: unknown; label: string }> }).options || [];
@@ -745,9 +770,10 @@ export function LookupCellRenderer({ value, field }: CellRendererProps): React.R
  */
 export function FormulaCellRenderer({ value }: CellRendererProps): React.ReactElement {
   const safe = coerceToSafeValue(value);
+  if (safe == null || safe === '') return <EmptyValue />;
   return (
     <span className="text-gray-700 font-mono text-sm">
-      {safe != null ? String(safe) : '-'}
+      {String(safe)}
     </span>
   );
 }
@@ -756,7 +782,7 @@ export function FormulaCellRenderer({ value }: CellRendererProps): React.ReactEl
  * User/Owner field cell renderer (with avatars)
  */
 export function UserCellRenderer({ value }: CellRendererProps): React.ReactElement {
-  if (!value) return <span>-</span>;
+  if (!value) return <EmptyValue />;
 
   // Primitive value: just display the ID/username as text
   if (typeof value !== 'object') {