@object-ui/plugin-detail 3.1.5 → 3.3.0

package/dist/useFieldTranslation-CkxqyB82.js

@@ -0,0 +1,9 @@
+import { dn as e } from "./src-C56Ly5uG.js";
+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/plugin-detail",
-  "version": "3.1.5",
+  "version": "3.3.0",
   "type": "module",
   "license": "MIT",
   "description": "DetailView plugin for Object UI - comprehensive detail page with sections, tabs, and related lists",
@@ -24,12 +24,12 @@
     }
   },
   "dependencies": {
-    "lucide-react": "^0.577.0",
-    "@object-ui/components": "3.1.5",
-    "@object-ui/core": "3.1.5",
-    "@object-ui/types": "3.1.5",
-    "@object-ui/fields": "3.1.5",
-    "@object-ui/react": "3.1.5"
+    "lucide-react": "^1.8.0",
+    "@object-ui/components": "3.3.0",
+    "@object-ui/core": "3.3.0",
+    "@object-ui/fields": "3.3.0",
+    "@object-ui/react": "3.3.0",
+    "@object-ui/types": "3.3.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -39,10 +39,10 @@
     "@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.2",
+    "vite": "^8.0.8",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.1.0"
+    "vitest": "^4.1.4"
   },
   "scripts": {
     "build": "vite build",

package/src/CommentAttachment.tsx

@@ -9,6 +9,7 @@
 import * as React from 'react';
 import { cn, Button } from '@object-ui/components';
 import { Paperclip, X, FileText, Image, FileArchive, File, Upload } from 'lucide-react';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface Attachment {
   id: string;
@@ -53,6 +54,7 @@ export const CommentAttachment: React.FC<CommentAttachmentProps> = ({
   className,
   readOnly = false,
 }) => {
+  const { t } = useDetailTranslation();
   const [isDragOver, setIsDragOver] = React.useState(false);
   const fileInputRef = React.useRef<HTMLInputElement>(null);
 
@@ -117,7 +119,7 @@ export const CommentAttachment: React.FC<CommentAttachmentProps> = ({
         >
           <Upload className="h-5 w-5 mx-auto text-muted-foreground mb-1" />
           <p className="text-xs text-muted-foreground">
-            Drop files here or click to upload
+            {t('detail.dropFilesToUpload')}
           </p>
           <input
             ref={fileInputRef}
@@ -135,7 +137,7 @@ export const CommentAttachment: React.FC<CommentAttachmentProps> = ({
           <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
             <Paperclip className="h-3 w-3" />
             <span>
-              {attachments.length} attachment{attachments.length !== 1 ? 's' : ''}
+              {attachments.length !== 1 ? t('detail.attachmentCountPlural', { count: attachments.length }) : t('detail.attachmentCount', { count: attachments.length })}
             </span>
           </div>
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
@@ -176,7 +178,7 @@ export const CommentAttachment: React.FC<CommentAttachmentProps> = ({
                       size="icon"
                       className="h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
                       onClick={() => onRemove(attachment.id)}
-                      title="Remove attachment"
+                      title={t('detail.removeAttachment')}
                     >
                       <X className="h-3.5 w-3.5" />
                     </Button>

package/src/DiffView.tsx

@@ -9,6 +9,7 @@
 import * as React from 'react';
 import { cn, Button, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
 import { Columns2, Rows3 } from 'lucide-react';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export type DiffFieldType = 'string' | 'number' | 'boolean' | 'json' | 'date';
 export type DiffMode = 'unified' | 'side-by-side';
@@ -98,6 +99,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
   mode: initialMode = 'unified',
   className,
 }) => {
+  const { t } = useDetailTranslation();
   const [mode, setMode] = React.useState<DiffMode>(initialMode);
 
   const oldLines = React.useMemo(() => valueToLines(oldValue, fieldType), [oldValue, fieldType]);
@@ -146,7 +148,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
               size="icon"
               className="h-7 w-7"
               onClick={() => setMode('unified')}
-              title="Unified diff"
+              title={t('detail.unifiedDiff')}
             >
               <Rows3 className="h-3.5 w-3.5" />
             </Button>
@@ -155,7 +157,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
               size="icon"
               className="h-7 w-7"
               onClick={() => setMode('side-by-side')}
-              title="Side-by-side diff"
+              title={t('detail.sideBySideDiff')}
             >
               <Columns2 className="h-3.5 w-3.5" />
             </Button>
@@ -164,7 +166,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
       </CardHeader>
       <CardContent className="p-0">
         {!hasChanges ? (
-          <p className="px-4 py-3 text-sm text-muted-foreground">No changes</p>
+          <p className="px-4 py-3 text-sm text-muted-foreground">{t('detail.noChanges')}</p>
         ) : mode === 'unified' ? (
           /* Unified diff view */
           <div className="font-mono text-xs overflow-x-auto">
@@ -192,10 +194,10 @@ export const DiffView: React.FC<DiffViewProps> = ({
             <div className="grid grid-cols-2 divide-x font-mono text-xs min-w-0">
               {/* Headers */}
               <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground bg-muted/50">
-                Previous
+                {t('detail.previousVersion')}
               </div>
               <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground bg-muted/50">
-                Current
+                {t('detail.currentVersion')}
               </div>
               {/* Rows */}
               {sideBySidePairs.map((pair, index) => (

package/src/RecordActivityTimeline.tsx

@@ -28,6 +28,7 @@ import { FieldChangeItem } from './FieldChangeItem';
 import { ReactionPicker } from './ReactionPicker';
 import { ThreadedReplies } from './ThreadedReplies';
 import { SubscriptionToggle } from './SubscriptionToggle';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export type FeedFilterMode = 'all' | 'comments_only' | 'changes_only' | 'tasks_only';
 
@@ -81,12 +82,14 @@ const FEED_TYPE_COLORS: Record<FeedItemType, string> = {
   call: 'bg-teal-100 text-teal-600',
 };
 
-const FILTER_OPTIONS: { value: FeedFilterMode; label: string }[] = [
-  { value: 'all', label: 'All Activity' },
-  { value: 'comments_only', label: 'Comments Only' },
-  { value: 'changes_only', label: 'Field Changes' },
-  { value: 'tasks_only', label: 'Tasks Only' },
-];
+function getFilterOptions(t: (key: string) => string): { value: FeedFilterMode; label: string }[] {
+  return [
+    { value: 'all', label: t('detail.allActivity') },
+    { value: 'comments_only', label: t('detail.commentsOnly') },
+    { value: 'changes_only', label: t('detail.fieldChangesFilter') },
+    { value: 'tasks_only', label: t('detail.tasksOnly') },
+  ];
+}
 
 function formatTimestamp(timestamp: string): string {
   try {
@@ -144,6 +147,7 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
   collapseWhenEmpty = false,
   className,
 }) => {
+  const { t } = useDetailTranslation();
   const [internalFilter, setInternalFilter] = React.useState<FeedFilterMode>('all');
   const [commentText, setCommentText] = React.useState('');
   const [isSubmitting, setIsSubmitting] = React.useState(false);
@@ -229,7 +233,7 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
         <div className="flex items-center justify-between">
           <CardTitle className="flex items-center gap-2 text-base">
             <Activity className="h-4 w-4" />
-            Activity
+            {t('detail.activity')}
             <span className="text-sm font-normal text-muted-foreground">
               ({filtered.length})
             </span>
@@ -252,9 +256,9 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
               className="rounded-md border border-input bg-background px-2.5 py-1.5 text-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
               value={activeFilter}
               onChange={(e) => handleFilterChange(e.target.value as FeedFilterMode)}
-              aria-label="Filter activity"
+              aria-label={t('detail.filterActivity')}
             >
-              {FILTER_OPTIONS.map((opt) => (
+              {getFilterOptions(t).map((opt) => (
                 <option key={opt.value} value={opt.value}>
                   {opt.label}
                 </option>
@@ -268,7 +272,7 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
           <div className="flex gap-2">
             <textarea
               className="flex-1 min-h-[60px] rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
-              placeholder="Leave a comment… (Ctrl+Enter to submit)"
+              placeholder={t('detail.leaveCommentPlaceholder')}
               value={commentText}
               onChange={(e) => setCommentText(e.target.value)}
               onKeyDown={handleKeyDown}
@@ -280,7 +284,7 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
               onClick={handleAddComment}
               disabled={!commentText.trim() || isSubmitting}
               className="shrink-0 self-end"
-              aria-label="Submit comment"
+              aria-label={t('detail.submitComment')}
             >
               <MessageSquare className="h-4 w-4" />
             </Button>
@@ -291,7 +295,7 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
         {filtered.length === 0 ? (
           collapseWhenEmpty ? null : (
             <p className="text-sm text-muted-foreground text-center py-4">
-              No activity recorded
+              {t('detail.noActivity')}
             </p>
           )
         ) : (
@@ -332,17 +336,17 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
                           <span className="text-sm font-medium">{item.actor}</span>
                           {item.source && (
                             <span className="text-xs text-muted-foreground">
-                              via {item.source}
+                              {t('detail.via', { source: item.source })}
                             </span>
                           )}
                           <span className="text-xs text-muted-foreground">
                             {formatTimestamp(item.createdAt)}
                           </span>
                           {item.edited && (
-                            <span className="text-xs text-muted-foreground italic">(edited)</span>
+                            <span className="text-xs text-muted-foreground italic">{t('detail.edited')}</span>
                           )}
                           {item.pinned && (
-                            <span className="text-xs text-amber-600">📌 Pinned</span>
+                            <span className="text-xs text-amber-600">📌 {t('detail.pinned')}</span>
                           )}
                         </div>
 
@@ -412,14 +416,14 @@ export const RecordActivityTimeline: React.FC<RecordActivityTimelineProps> = ({
               size="sm"
               onClick={handleLoadMore}
               disabled={isLoadingMore}
-              aria-label="Load more activity"
+              aria-label={t('detail.loadMore')}
             >
               {isLoadingMore ? (
                 <Loader2 className="h-4 w-4 animate-spin mr-1" />
               ) : (
                 <ChevronDown className="h-4 w-4 mr-1" />
               )}
-              Load more
+              {t('detail.loadMore')}
             </Button>
           </div>
         )}

package/src/RecordChatterPanel.tsx

@@ -12,6 +12,7 @@ import { MessageSquare, PanelRightOpen, PanelRightClose, X } from 'lucide-react'
 import type { RecordChatterComponentProps, FeedItem, RecordSubscription } from '@object-ui/types';
 import { RecordActivityTimeline } from './RecordActivityTimeline';
 import type { FeedFilterMode, RecordActivityTimelineProps } from './RecordActivityTimeline';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface RecordChatterPanelProps {
   /** Chatter panel configuration from RecordChatterComponentProps */
@@ -73,6 +74,7 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
   const collapsible = config?.collapsible ?? true;
   const defaultCollapsed = (collapseWhenEmpty && items.length === 0) || (config?.defaultCollapsed ?? false);
 
+  const { t } = useDetailTranslation();
   const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
 
   const isSidebar = position === 'right' || position === 'left';
@@ -94,7 +96,7 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
             size="icon"
             className="h-8 w-8 mx-1"
             onClick={() => setCollapsed(false)}
-            aria-label="Open discussion panel"
+            aria-label={t('detail.openDiscussion')}
           >
             <PanelRightOpen className="h-4 w-4" />
           </Button>
@@ -115,7 +117,7 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
         <div className="flex items-center justify-between px-4 py-3 border-b">
           <div className="flex items-center gap-2">
             <MessageSquare className="h-4 w-4" />
-            <span className="text-sm font-medium">Discussion</span>
+            <span className="text-sm font-medium">{t('detail.discussion')}</span>
           </div>
           {collapsible && (
             <Button
@@ -123,7 +125,7 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
               size="icon"
               className="h-7 w-7"
               onClick={() => setCollapsed(true)}
-              aria-label="Close discussion panel"
+              aria-label={t('detail.closeDiscussion')}
             >
               <X className="h-3.5 w-3.5" />
             </Button>
@@ -161,10 +163,10 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
           variant="ghost"
           className="w-full justify-start gap-2 text-muted-foreground"
           onClick={() => setCollapsed(false)}
-          aria-label="Show discussion"
+          aria-label={t('detail.showDiscussion', { count: items.length })}
         >
           <MessageSquare className="h-4 w-4" />
-          <span>Show Discussion ({items.length})</span>
+          <span>{t('detail.showDiscussion', { count: items.length })}</span>
         </Button>
       ) : (
         <div>
@@ -172,14 +174,14 @@ export const RecordChatterPanel: React.FC<RecordChatterPanelProps> = ({
             <div className="flex items-center justify-between mb-2">
               <div className="flex items-center gap-2 text-sm font-medium">
                 <MessageSquare className="h-4 w-4" />
-                Discussion
+                {t('detail.discussion')}
               </div>
               <Button
                 variant="ghost"
                 size="icon"
                 className="h-7 w-7"
                 onClick={() => setCollapsed(true)}
-                aria-label="Hide discussion"
+                aria-label={t('detail.hideDiscussion')}
               >
                 <PanelRightClose className="h-3.5 w-3.5" />
               </Button>

package/src/RecordComments.tsx

@@ -10,6 +10,7 @@ import * as React from 'react';
 import { cn, Button, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
 import { MessageSquare, Send, Pin, Search, X } from 'lucide-react';
 import type { CommentEntry } from '@object-ui/types';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface RecordCommentsProps {
   comments: CommentEntry[];
@@ -50,6 +51,7 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
   searchable = false,
   className,
 }) => {
+  const { t } = useDetailTranslation();
   const [newComment, setNewComment] = React.useState('');
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [searchQuery, setSearchQuery] = React.useState('');
@@ -98,7 +100,7 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
       <CardHeader>
         <CardTitle className="flex items-center gap-2 text-base">
           <MessageSquare className="h-4 w-4" />
-          Comments
+          {t('detail.comments')}
           <span className="text-sm font-normal text-muted-foreground">
             ({comments.length})
           </span>
@@ -112,16 +114,16 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
               <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
               <input
                 className="w-full rounded-md border border-input bg-background pl-8 pr-8 py-1.5 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                placeholder="Search comments…"
+                placeholder={t('detail.searchComments')}
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                aria-label="Search comments"
+                aria-label={t('detail.searchComments')}
               />
               {searchQuery && (
                 <button
                   className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
                   onClick={() => setSearchQuery('')}
-                  aria-label="Clear search"
+                  aria-label={t('detail.clearSearch')}
                   type="button"
                 >
                   <X className="h-3.5 w-3.5" />
@@ -136,7 +138,7 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
           <div className="flex gap-2">
             <textarea
               className="flex-1 min-h-[60px] rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
-              placeholder="Add a comment… (Ctrl+Enter to submit)"
+              placeholder={t('detail.addCommentPlaceholder')}
               value={newComment}
               onChange={(e) => setNewComment(e.target.value)}
               onKeyDown={handleKeyDown}
@@ -157,7 +159,7 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
         {/* Comment List */}
         {sortedComments.length === 0 ? (
           <p className="text-sm text-muted-foreground text-center py-4">
-            {searchQuery.trim() ? 'No matching comments' : 'No comments yet'}
+            {searchQuery.trim() ? t('detail.noMatchingComments') : t('detail.noCommentsYet')}
           </p>
         ) : (
           <div className="space-y-3">
@@ -187,7 +189,7 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
                     {comment.pinned && (
                       <span className="text-xs text-amber-600 flex items-center gap-0.5">
                         <Pin className="h-3 w-3" />
-                        Pinned
+                        {t('detail.pinned')}
                       </span>
                     )}
                   </div>
@@ -198,10 +200,10 @@ export const RecordComments: React.FC<RecordCommentsProps> = ({
                       type="button"
                       className="mt-1 text-xs text-muted-foreground hover:text-foreground flex items-center gap-1"
                       onClick={() => onTogglePin(comment.id)}
-                      aria-label={comment.pinned ? 'Unpin comment' : 'Pin comment'}
+                      aria-label={comment.pinned ? t('detail.unpin') : t('detail.pin')}
                     >
                       <Pin className="h-3 w-3" />
-                      {comment.pinned ? 'Unpin' : 'Pin'}
+                      {comment.pinned ? t('detail.unpin') : t('detail.pin')}
                     </button>
                   )}
                 </div>

package/src/RecordNavigationEnhanced.tsx

@@ -15,6 +15,7 @@ import {
   ChevronRight,
   Search,
 } from 'lucide-react';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface RecordNavigationEnhancedProps {
   currentIndex: number;
@@ -33,6 +34,7 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
   onSearch,
   className,
 }) => {
+  const { t } = useDetailTranslation();
   const [searchQuery, setSearchQuery] = React.useState('');
   const [isSearchOpen, setIsSearchOpen] = React.useState(false);
   const searchInputRef = React.useRef<HTMLInputElement>(null);
@@ -133,7 +135,7 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
         className="h-8 w-8"
         disabled={!canGoFirst}
         onClick={handleFirst}
-        title="First record (Home)"
+        title={t('detail.firstRecord')}
       >
         <ChevronsLeft className="h-4 w-4" />
       </Button>
@@ -145,14 +147,14 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
         className="h-8 w-8"
         disabled={!canGoPrev}
         onClick={handlePrev}
-        title="Previous record (←)"
+        title={t('detail.previousRecordKey')}
       >
         <ChevronLeft className="h-4 w-4" />
       </Button>
 
       {/* Position indicator */}
       <span className="text-xs text-muted-foreground whitespace-nowrap px-1.5 tabular-nums">
-        {totalRecords > 0 ? `${currentIndex + 1} of ${totalRecords}` : 'No records'}
+        {totalRecords > 0 ? t('detail.recordOf', { current: currentIndex + 1, total: totalRecords }) : t('detail.noRecords')}
       </span>
 
       {/* Next */}
@@ -162,7 +164,7 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
         className="h-8 w-8"
         disabled={!canGoNext}
         onClick={handleNext}
-        title="Next record (→)"
+        title={t('detail.nextRecordKey')}
       >
         <ChevronRight className="h-4 w-4" />
       </Button>
@@ -174,7 +176,7 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
         className="h-8 w-8"
         disabled={!canGoLast}
         onClick={handleLast}
-        title="Last record (End)"
+        title={t('detail.lastRecord')}
       >
         <ChevronsRight className="h-4 w-4" />
       </Button>
@@ -187,7 +189,7 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
             size="icon"
             className="h-8 w-8"
             onClick={handleToggleSearch}
-            title="Search while navigating"
+            title={t('detail.searchWhileNavigating')}
           >
             <Search className="h-4 w-4" />
           </Button>
@@ -197,7 +199,7 @@ export const RecordNavigationEnhanced: React.FC<RecordNavigationEnhancedProps> =
               <Input
                 ref={searchInputRef}
                 type="text"
-                placeholder="Search records…"
+                placeholder={t('detail.searchRecords')}
                 value={searchQuery}
                 onChange={handleSearchChange}
                 className="h-8 w-48 text-sm"

package/src/RichTextCommentInput.tsx

@@ -18,6 +18,7 @@ import {
   Edit,
   Send,
 } from 'lucide-react';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface MentionSuggestion {
   id: string;
@@ -71,10 +72,11 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
   onChange,
   onSubmit,
   mentionSuggestions = [],
-  placeholder = 'Write a comment…',
+  placeholder,
   className,
   disabled = false,
 }) => {
+  const { t } = useDetailTranslation();
   const [isPreview, setIsPreview] = React.useState(false);
   const [showMentions, setShowMentions] = React.useState(false);
   const [mentionQuery, setMentionQuery] = React.useState('');
@@ -214,7 +216,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
           className="h-7 w-7"
           onClick={handleBold}
           disabled={disabled || isPreview}
-          title="Bold (Ctrl+B)"
+          title={t('detail.bold')}
         >
           <Bold className="h-3.5 w-3.5" />
         </Button>
@@ -224,7 +226,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
           className="h-7 w-7"
           onClick={handleItalic}
           disabled={disabled || isPreview}
-          title="Italic (Ctrl+I)"
+          title={t('detail.italic')}
         >
           <Italic className="h-3.5 w-3.5" />
         </Button>
@@ -234,7 +236,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
           className="h-7 w-7"
           onClick={handleList}
           disabled={disabled || isPreview}
-          title="List"
+          title={t('detail.listFormat')}
         >
           <List className="h-3.5 w-3.5" />
         </Button>
@@ -244,7 +246,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
           className="h-7 w-7"
           onClick={handleCode}
           disabled={disabled || isPreview}
-          title="Inline code"
+          title={t('detail.inlineCode')}
         >
           <Code className="h-3.5 w-3.5" />
         </Button>
@@ -254,7 +256,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
           className="h-7 w-7"
           onClick={handleMentionTrigger}
           disabled={disabled || isPreview}
-          title="Mention someone"
+          title={t('detail.mentionSomeone')}
         >
           <AtSign className="h-3.5 w-3.5" />
         </Button>
@@ -266,7 +268,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
           size="icon"
           className="h-7 w-7"
           onClick={() => setIsPreview(!isPreview)}
-          title={isPreview ? 'Edit' : 'Preview'}
+          title={isPreview ? t('detail.edit') : t('detail.preview')}
         >
           {isPreview ? (
             <Edit className="h-3.5 w-3.5" />
@@ -282,7 +284,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
             className="h-7 w-7"
             onClick={onSubmit}
             disabled={disabled || !value.trim()}
-            title="Submit (Ctrl+Enter)"
+            title={t('detail.submitComment')}
           >
             <Send className="h-3.5 w-3.5" />
           </Button>
@@ -301,7 +303,7 @@ export const RichTextCommentInput: React.FC<RichTextCommentInputProps> = ({
             <textarea
               ref={textareaRef}
               className="w-full min-h-[80px] px-3 py-2 text-sm bg-transparent resize-none focus:outline-none placeholder:text-muted-foreground"
-              placeholder={placeholder}
+              placeholder={placeholder ?? t('detail.writeComment')}
               value={value}
               onChange={handleTextChange}
               onKeyDown={handleKeyDown}

package/src/SubscriptionToggle.tsx

@@ -10,6 +10,7 @@ import * as React from 'react';
 import { cn, Button } from '@object-ui/components';
 import { Bell, BellOff } from 'lucide-react';
 import type { RecordSubscription } from '@object-ui/types';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface SubscriptionToggleProps {
   /** Current subscription state */
@@ -28,6 +29,7 @@ export const SubscriptionToggle: React.FC<SubscriptionToggleProps> = ({
   onToggle,
   className,
 }) => {
+  const { t } = useDetailTranslation();
   const [isLoading, setIsLoading] = React.useState(false);
 
   const handleToggle = React.useCallback(async () => {
@@ -47,8 +49,8 @@ export const SubscriptionToggle: React.FC<SubscriptionToggleProps> = ({
       className={cn('h-8 w-8', className)}
       onClick={handleToggle}
       disabled={isLoading || !onToggle}
-      aria-label={subscription.subscribed ? 'Unsubscribe from notifications' : 'Subscribe to notifications'}
-      title={subscription.subscribed ? 'Subscribed — click to unsubscribe' : 'Subscribe to notifications'}
+      aria-label={subscription.subscribed ? t('detail.unsubscribeAriaLabel') : t('detail.subscribeAriaLabel')}
+      title={subscription.subscribed ? t('detail.subscribedTooltip') : t('detail.unsubscribedTooltip')}
     >
       {subscription.subscribed ? (
         <Bell className="h-4 w-4 text-primary" />

package/src/ThreadedReplies.tsx

@@ -10,6 +10,7 @@ import * as React from 'react';
 import { cn, Button } from '@object-ui/components';
 import { MessageSquare, ChevronDown, ChevronRight, Send } from 'lucide-react';
 import type { FeedItem } from '@object-ui/types';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface ThreadedRepliesProps {
   /** Parent feed item (root comment) */
@@ -53,6 +54,7 @@ export const ThreadedReplies: React.FC<ThreadedRepliesProps> = ({
   showReplyInput = true,
   className,
 }) => {
+  const { t } = useDetailTranslation();
   const [expanded, setExpanded] = React.useState(false);
   const [replyText, setReplyText] = React.useState('');
   const [isSubmitting, setIsSubmitting] = React.useState(false);
@@ -97,7 +99,7 @@ export const ThreadedReplies: React.FC<ThreadedRepliesProps> = ({
             <ChevronRight className="h-3 w-3" />
           )}
           <MessageSquare className="h-3 w-3" />
-          <span>{replies.length} {replies.length === 1 ? 'reply' : 'replies'}</span>
+          <span>{replies.length === 1 ? t('detail.replyCount', { count: replies.length }) : t('detail.replyCountPlural', { count: replies.length })}</span>
         </button>
       )}
 
@@ -138,7 +140,7 @@ export const ThreadedReplies: React.FC<ThreadedRepliesProps> = ({
         <div className="flex gap-1.5 mt-1.5">
           <input
             className="flex-1 rounded-md border border-input bg-background px-2 py-1 text-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-            placeholder="Reply…"
+            placeholder={t('detail.replyPlaceholder')}
             value={replyText}
             onChange={(e) => setReplyText(e.target.value)}
             onKeyDown={handleKeyDown}