@object-ui/plugin-detail 3.0.2 → 3.1.0

package/dist/src/index.d.ts

@@ -3,8 +3,44 @@ import { DetailSection } from './DetailSection';
 import { DetailTabs } from './DetailTabs';
 import { RelatedList } from './RelatedList';
 export { DetailView, DetailSection, DetailTabs, RelatedList };
+export { inferDetailColumns, isWideFieldType, applyAutoSpan, applyDetailAutoLayout } from './autoLayout';
+export { useDetailTranslation, DETAIL_DEFAULT_TRANSLATIONS, createSafeTranslationHook } from './useDetailTranslation';
+export { RecordComments } from './RecordComments';
+export { ActivityTimeline } from './ActivityTimeline';
+export { InlineCreateRelated } from './InlineCreateRelated';
+export { RichTextCommentInput } from './RichTextCommentInput';
+export { DiffView } from './DiffView';
+export { RecordNavigationEnhanced } from './RecordNavigationEnhanced';
+export { RelationshipGraph } from './RelationshipGraph';
+export { CommentAttachment } from './CommentAttachment';
+export { PointInTimeRestore } from './PointInTimeRestore';
+export { RecordActivityTimeline } from './RecordActivityTimeline';
+export { RecordChatterPanel } from './RecordChatterPanel';
+export { CommentInput } from './CommentInput';
+export { FieldChangeItem } from './FieldChangeItem';
+export { MentionAutocomplete, createMentionFromSuggestion } from './MentionAutocomplete';
+export { SubscriptionToggle } from './SubscriptionToggle';
+export { ReactionPicker } from './ReactionPicker';
+export { ThreadedReplies } from './ThreadedReplies';
 export type { DetailViewProps } from './DetailView';
 export type { DetailSectionProps } from './DetailSection';
 export type { DetailTabsProps } from './DetailTabs';
 export type { RelatedListProps } from './RelatedList';
+export type { RecordCommentsProps } from './RecordComments';
+export type { ActivityTimelineProps, ActivityFilterType } from './ActivityTimeline';
+export type { InlineCreateRelatedProps, RelatedFieldDefinition, RelatedRecordOption } from './InlineCreateRelated';
+export type { RichTextCommentInputProps, MentionSuggestion } from './RichTextCommentInput';
+export type { DiffViewProps, DiffFieldType, DiffMode, DiffLine } from './DiffView';
+export type { RecordNavigationEnhancedProps } from './RecordNavigationEnhanced';
+export type { RelationshipGraphProps, GraphNode } from './RelationshipGraph';
+export type { CommentAttachmentProps, Attachment } from './CommentAttachment';
+export type { PointInTimeRestoreProps, RevisionEntry } from './PointInTimeRestore';
+export type { RecordActivityTimelineProps, FeedFilterMode } from './RecordActivityTimeline';
+export type { RecordChatterPanelProps } from './RecordChatterPanel';
+export type { CommentInputProps } from './CommentInput';
+export type { FieldChangeItemProps } from './FieldChangeItem';
+export type { MentionAutocompleteProps, MentionSuggestionItem } from './MentionAutocomplete';
+export type { SubscriptionToggleProps } from './SubscriptionToggle';
+export type { ReactionPickerProps } from './ReactionPicker';
+export type { ThreadedRepliesProps } from './ThreadedReplies';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AAC9D,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"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"}

package/dist/src/useDetailTranslation.d.ts

@@ -0,0 +1,34 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Create a safe translation hook with fallback to defaults.
+ * Follows the same pattern as useGridTranslation / useListViewTranslation.
+ *
+ * @param defaults - Fallback English translations keyed by i18n key
+ * @param testKey - A key to test if i18n is properly configured
+ */
+export declare function createSafeTranslationHook(defaults: Record<string, string>, testKey: string): () => {
+    t: (key: string, options?: Record<string, unknown>) => string;
+} | {
+    t: import('i18next').TFunction<string, undefined>;
+};
+/**
+ * Default English translations for detail view components.
+ * Used as fallback when no I18nProvider is available.
+ */
+export declare const DETAIL_DEFAULT_TRANSLATIONS: Record<string, string>;
+/**
+ * Translation hook for detail view components.
+ * Falls back to DETAIL_DEFAULT_TRANSLATIONS when no I18nProvider is available.
+ */
+export declare const useDetailTranslation: () => {
+    t: (key: string, options?: Record<string, unknown>) => string;
+} | {
+    t: import('i18next').TFunction<string, undefined>;
+};
+//# sourceMappingURL=useDetailTranslation.d.ts.map

package/dist/src/useDetailTranslation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDetailTranslation.d.ts","sourceRoot":"","sources":["../../src/useDetailTranslation.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAChC,OAAO,EAAE,MAAM;aAQE,MAAM,YAAY,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;EA0B3D;AAED;;;GAGG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAkC9D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB;aAxEd,MAAM,YAAY,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;CA2E3D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-detail",
-  "version": "3.0.2",
+  "version": "3.1.0",
   "type": "module",
   "license": "MIT",
   "description": "DetailView plugin for Object UI - comprehensive detail page with sections, tabs, and related lists",
@@ -24,18 +24,19 @@
     }
   },
   "dependencies": {
-    "lucide-react": "^0.563.0",
-    "@object-ui/components": "3.0.2",
-    "@object-ui/core": "3.0.2",
-    "@object-ui/react": "3.0.2",
-    "@object-ui/types": "3.0.2"
+    "lucide-react": "^0.576.0",
+    "@object-ui/components": "3.1.0",
+    "@object-ui/core": "3.1.0",
+    "@object-ui/fields": "3.1.0",
+    "@object-ui/react": "3.1.0",
+    "@object-ui/types": "3.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "19.2.13",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.9.3",

package/src/ActivityTimeline.tsx

@@ -0,0 +1,184 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
+import { Activity, Edit, PlusCircle, Trash2, MessageSquare, ArrowRightLeft, Filter } from 'lucide-react';
+import type { ActivityEntry } from '@object-ui/types';
+
+export type ActivityFilterType = ActivityEntry['type'] | 'all';
+
+export interface ActivityTimelineProps {
+  activities: ActivityEntry[];
+  /** Show filter controls for activity types */
+  filterable?: boolean;
+  /** Default filter (defaults to 'all') */
+  defaultFilter?: ActivityFilterType;
+  className?: string;
+}
+
+const ACTIVITY_ICONS: Record<ActivityEntry['type'], React.ElementType> = {
+  field_change: Edit,
+  create: PlusCircle,
+  delete: Trash2,
+  comment: MessageSquare,
+  status_change: ArrowRightLeft,
+};
+
+const ACTIVITY_COLORS: Record<ActivityEntry['type'], string> = {
+  field_change: 'bg-blue-100 text-blue-600',
+  create: 'bg-green-100 text-green-600',
+  delete: 'bg-red-100 text-red-600',
+  comment: 'bg-purple-100 text-purple-600',
+  status_change: 'bg-amber-100 text-amber-600',
+};
+
+function formatTimestamp(timestamp: string): string {
+  try {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    const diffHours = Math.floor(diffMins / 60);
+    if (diffHours < 24) return `${diffHours}h ago`;
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+  } catch {
+    return timestamp;
+  }
+}
+
+function formatFieldChange(entry: ActivityEntry): string {
+  if (entry.description) return entry.description;
+
+  if (entry.type === 'field_change' && entry.field) {
+    const fieldLabel = entry.field.charAt(0).toUpperCase() + entry.field.slice(1).replace(/_/g, ' ');
+    const oldVal = entry.oldValue != null ? String(entry.oldValue) : '(empty)';
+    const newVal = entry.newValue != null ? String(entry.newValue) : '(empty)';
+    return `Changed ${fieldLabel} from "${oldVal}" to "${newVal}"`;
+  }
+
+  if (entry.type === 'create') return 'Created this record';
+  if (entry.type === 'delete') return 'Deleted this record';
+  if (entry.type === 'status_change' && entry.field) {
+    const newVal = entry.newValue != null ? String(entry.newValue) : '(empty)';
+    return `Changed status to "${newVal}"`;
+  }
+
+  return 'Updated record';
+}
+
+const FILTER_LABELS: Record<ActivityFilterType, string> = {
+  all: 'All',
+  field_change: 'Field Changes',
+  create: 'Creates',
+  delete: 'Deletes',
+  comment: 'Comments',
+  status_change: 'Status Changes',
+};
+
+export const ActivityTimeline: React.FC<ActivityTimelineProps> = ({
+  activities,
+  filterable = false,
+  defaultFilter = 'all',
+  className,
+}) => {
+  const [activeFilter, setActiveFilter] = React.useState<ActivityFilterType>(defaultFilter);
+
+  const filteredActivities = React.useMemo(() => {
+    if (activeFilter === 'all') return activities;
+    return activities.filter(a => a.type === activeFilter);
+  }, [activities, activeFilter]);
+
+  return (
+    <Card className={cn('', className)}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Activity className="h-4 w-4" />
+          Activity
+          <span className="text-sm font-normal text-muted-foreground">
+            ({filteredActivities.length})
+          </span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {/* Filter controls */}
+        {filterable && (
+          <div className="flex flex-wrap gap-1.5 mb-4" role="group" aria-label="Activity type filter">
+            {(Object.keys(FILTER_LABELS) as ActivityFilterType[]).map(type => (
+              <button
+                key={type}
+                type="button"
+                className={cn(
+                  'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors',
+                  activeFilter === type
+                    ? 'bg-primary text-primary-foreground'
+                    : 'bg-muted text-muted-foreground hover:bg-muted/80',
+                )}
+                onClick={() => setActiveFilter(type)}
+                aria-pressed={activeFilter === type}
+              >
+                {type !== 'all' && React.createElement(ACTIVITY_ICONS[type] || Edit, { className: 'h-3 w-3' })}
+                {FILTER_LABELS[type]}
+              </button>
+            ))}
+          </div>
+        )}
+
+        {filteredActivities.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-4">
+            No activity recorded
+          </p>
+        ) : (
+          <div className="relative">
+            {/* Timeline line */}
+            <div className="absolute left-4 top-2 bottom-2 w-px bg-border" />
+
+            <div className="space-y-4">
+              {filteredActivities.map((entry) => {
+                const Icon = ACTIVITY_ICONS[entry.type] || Edit;
+                const colorClass = ACTIVITY_COLORS[entry.type] || 'bg-gray-100 text-gray-600';
+
+                return (
+                  <div key={entry.id} className="flex gap-3 relative">
+                    {/* Icon */}
+                    <div
+                      className={cn(
+                        'shrink-0 h-8 w-8 rounded-full flex items-center justify-center z-10',
+                        colorClass,
+                      )}
+                    >
+                      <Icon className="h-3.5 w-3.5" />
+                    </div>
+                    {/* Content */}
+                    <div className="flex-1 min-w-0 pt-1">
+                      <p className="text-sm">
+                        <span className="font-medium">{entry.user}</span>
+                        {' '}
+                        <span className="text-muted-foreground">
+                          {formatFieldChange(entry)}
+                        </span>
+                      </p>
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        {formatTimestamp(entry.timestamp)}
+                      </p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/src/CommentAttachment.tsx

@@ -0,0 +1,192 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Button } from '@object-ui/components';
+import { Paperclip, X, FileText, Image, FileArchive, File, Upload } from 'lucide-react';
+
+export interface Attachment {
+  id: string;
+  name: string;
+  size: number;
+  type: string;
+  url?: string;
+  thumbnailUrl?: string;
+}
+
+export interface CommentAttachmentProps {
+  attachments: Attachment[];
+  onUpload?: (files: FileList) => void | Promise<void>;
+  onRemove?: (attachmentId: string) => void;
+  className?: string;
+  readOnly?: boolean;
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function isImageType(type: string): boolean {
+  return type.startsWith('image/');
+}
+
+function getFileIcon(type: string): React.ElementType {
+  if (isImageType(type)) return Image;
+  if (type.includes('pdf') || type.includes('document') || type.includes('text'))
+    return FileText;
+  if (type.includes('zip') || type.includes('archive') || type.includes('compressed'))
+    return FileArchive;
+  return File;
+}
+
+export const CommentAttachment: React.FC<CommentAttachmentProps> = ({
+  attachments,
+  onUpload,
+  onRemove,
+  className,
+  readOnly = false,
+}) => {
+  const [isDragOver, setIsDragOver] = React.useState(false);
+  const fileInputRef = React.useRef<HTMLInputElement>(null);
+
+  const handleDragOver = React.useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(true);
+  }, []);
+
+  const handleDragLeave = React.useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragOver(false);
+  }, []);
+
+  const handleDrop = React.useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragOver(false);
+      if (onUpload && e.dataTransfer.files.length > 0) {
+        onUpload(e.dataTransfer.files);
+      }
+    },
+    [onUpload],
+  );
+
+  const handleFileSelect = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (onUpload && e.target.files && e.target.files.length > 0) {
+        onUpload(e.target.files);
+        // Reset so the same file can be selected again
+        e.target.value = '';
+      }
+    },
+    [onUpload],
+  );
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {/* Drop zone */}
+      {onUpload && !readOnly && (
+        <div
+          className={cn(
+            'border-2 border-dashed rounded-md px-4 py-3 text-center transition-colors cursor-pointer',
+            isDragOver
+              ? 'border-primary bg-primary/5'
+              : 'border-muted-foreground/25 hover:border-muted-foreground/40',
+          )}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onClick={() => fileInputRef.current?.click()}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              fileInputRef.current?.click();
+            }
+          }}
+        >
+          <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
+          </p>
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            className="hidden"
+            onChange={handleFileSelect}
+          />
+        </div>
+      )}
+
+      {/* Attachment list */}
+      {attachments.length > 0 && (
+        <div className="space-y-1.5">
+          <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' : ''}
+            </span>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+            {attachments.map((attachment) => {
+              const isImage = isImageType(attachment.type);
+              const Icon = getFileIcon(attachment.type);
+
+              return (
+                <div
+                  key={attachment.id}
+                  className="flex items-center gap-2 rounded-md border px-2.5 py-2 bg-muted/30 group"
+                >
+                  {/* Thumbnail or icon */}
+                  {isImage && (attachment.thumbnailUrl || attachment.url) ? (
+                    <img
+                      src={attachment.thumbnailUrl || attachment.url}
+                      alt={attachment.name}
+                      className="h-10 w-10 rounded object-cover shrink-0"
+                    />
+                  ) : (
+                    <div className="h-10 w-10 rounded bg-muted flex items-center justify-center shrink-0">
+                      <Icon className="h-5 w-5 text-muted-foreground" />
+                    </div>
+                  )}
+
+                  {/* File info */}
+                  <div className="flex-1 min-w-0">
+                    <p className="text-xs font-medium truncate">{attachment.name}</p>
+                    <p className="text-[10px] text-muted-foreground">
+                      {formatFileSize(attachment.size)}
+                    </p>
+                  </div>
+
+                  {/* Remove button */}
+                  {onRemove && !readOnly && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                      onClick={() => onRemove(attachment.id)}
+                      title="Remove attachment"
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </Button>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/CommentInput.tsx

@@ -0,0 +1,81 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Button } from '@object-ui/components';
+import { Send } from 'lucide-react';
+
+export interface CommentInputProps {
+  /** Called when a comment is submitted */
+  onSubmit: (text: string) => void | Promise<void>;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Whether the input is disabled */
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * CommentInput — Simple comment input component.
+ * Renders a "Leave a comment" textarea with submit button.
+ * Supports Ctrl+Enter to submit.
+ */
+export const CommentInput: React.FC<CommentInputProps> = ({
+  onSubmit,
+  placeholder = 'Leave a comment…',
+  disabled = false,
+  className,
+}) => {
+  const [text, setText] = React.useState('');
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+
+  const handleSubmit = React.useCallback(async () => {
+    const value = text.trim();
+    if (!value) return;
+    setIsSubmitting(true);
+    try {
+      await onSubmit(value);
+      setText('');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [text, onSubmit]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit],
+  );
+
+  return (
+    <div className={cn('flex gap-2', className)}>
+      <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={placeholder}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={disabled || isSubmitting}
+      />
+      <Button
+        size="icon"
+        variant="default"
+        onClick={handleSubmit}
+        disabled={!text.trim() || isSubmitting || disabled}
+        className="shrink-0 self-end"
+        aria-label="Submit comment"
+      >
+        <Send className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+};