@brainfish-ai/components 0.14.2 → 0.15.0-beta.1

package/dist/switch.d.ts

@@ -0,0 +1,6 @@
+import * as React_2 from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+
+export declare const Switch: React_2.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & React_2.RefAttributes<HTMLButtonElement>>;
+
+export { }

package/dist/table.d.ts

@@ -0,0 +1,19 @@
+import * as React_2 from 'react';
+
+export declare const Table: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableElement> & React_2.RefAttributes<HTMLTableElement>>;
+
+export declare const TableBody: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableSectionElement> & React_2.RefAttributes<HTMLTableSectionElement>>;
+
+export declare const TableCaption: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableCaptionElement> & React_2.RefAttributes<HTMLTableCaptionElement>>;
+
+export declare const TableCell: React_2.ForwardRefExoticComponent<React_2.TdHTMLAttributes<HTMLTableCellElement> & React_2.RefAttributes<HTMLTableCellElement>>;
+
+export declare const TableFooter: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableSectionElement> & React_2.RefAttributes<HTMLTableSectionElement>>;
+
+export declare const TableHead: React_2.ForwardRefExoticComponent<React_2.ThHTMLAttributes<HTMLTableCellElement> & React_2.RefAttributes<HTMLTableCellElement>>;
+
+export declare const TableHeader: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableSectionElement> & React_2.RefAttributes<HTMLTableSectionElement>>;
+
+export declare const TableRow: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLTableRowElement> & React_2.RefAttributes<HTMLTableRowElement>>;
+
+export { }

package/dist/textarea.d.ts

@@ -0,0 +1,5 @@
+import * as React_2 from 'react';
+
+export declare const Textarea: React_2.ForwardRefExoticComponent<Omit<React_2.DetailedHTMLProps<React_2.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React_2.RefAttributes<HTMLTextAreaElement>>;
+
+export { }

package/dist/tooltip.d.ts

@@ -0,0 +1,18 @@
+import * as React_2 from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+export declare const Tooltip: React_2.FC<TooltipPrimitive.TooltipProps>;
+
+export declare const TooltipContent: React_2.ForwardRefExoticComponent<TooltipContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface TooltipContentProps extends React_2.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
+    background?: string;
+    textColor?: string;
+    borderColor?: string;
+}
+
+export declare const TooltipProvider: ({ delayDuration, ...props }: TooltipPrimitive.TooltipProviderProps) => React_2.JSX.Element;
+
+export declare const TooltipTrigger: React_2.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
+
+export { }

package/dist/{components/two-level-combobox/two-level-combobox.d.ts → two-level-combobox.d.ts}

@@ -1,15 +1,24 @@
-import { ComboboxItem } from '../combobox';
-import * as React from 'react';
-export interface TwoLevelComboboxProps {
-    firstLevelItems: ComboboxItem[];
-    fetchSecondLevelItems: (firstLevelId: string) => Promise<ComboboxItem[]>;
-    onSelectionChange?: (firstLevel: ComboboxItem | null, secondLevel: ComboboxItem | null) => void;
-    firstLevelLabel?: string;
-    secondLevelLabel?: string;
-    firstLevelPlaceholder?: string;
-    secondLevelPlaceholder?: string;
-    className?: string;
-    debugMode?: boolean;
-    displayLabel?: boolean;
-}
-export declare function TwoLevelCombobox({ firstLevelItems, fetchSecondLevelItems, onSelectionChange, firstLevelLabel, secondLevelLabel, firstLevelPlaceholder, className, debugMode, displayLabel, }: TwoLevelComboboxProps): React.JSX.Element;
+import * as React_2 from 'react';
+
+declare interface ComboboxItem {
+    value: string;
+    label: string;
+    icon?: React_2.ReactNode;
+}
+
+export declare function TwoLevelCombobox({ firstLevelItems, fetchSecondLevelItems, onSelectionChange, firstLevelLabel, secondLevelLabel, firstLevelPlaceholder, className, debugMode, displayLabel, }: TwoLevelComboboxProps): React_2.JSX.Element;
+
+export declare interface TwoLevelComboboxProps {
+    firstLevelItems: ComboboxItem[];
+    fetchSecondLevelItems: (firstLevelId: string) => Promise<ComboboxItem[]>;
+    onSelectionChange?: (firstLevel: ComboboxItem | null, secondLevel: ComboboxItem | null) => void;
+    firstLevelLabel?: string;
+    secondLevelLabel?: string;
+    firstLevelPlaceholder?: string;
+    secondLevelPlaceholder?: string;
+    className?: string;
+    debugMode?: boolean;
+    displayLabel?: boolean;
+}
+
+export { }

package/markdown-editor.plan.md

@@ -0,0 +1,322 @@
+# Markdown Editor/Viewer Component Implementation Checklist
+
+## Overview
+
+This checklist tracks the implementation progress for the Markdown Editor/Viewer component based on `markdown-editor.spec.md`. The component will replace FormattedMessage.tsx while maintaining compatibility with the existing multimedia/embed system.
+
+### Implementation Strategy
+- **6-Phase Approach**: Foundation → Multimedia → Suggestions → Streaming → Collaboration → Integration
+- **Monorepo Strategy**:
+  - All editor-related development, including the main component (`SimpleEditor` evolving into `MarkdownEditorViewer`), UI primitives, hooks, and extensions, will be centralized within the **`@brainfish-ai/tiptap`** package.
+- **Incremental Development**: Build on existing FormattedMessage.tsx and embed system patterns
+- **TipTap Foundation**: Core editing engine with custom extensions
+- **Backward Compatibility**: Seamless integration with existing codebase
+
+### Dependencies Setup
+- [x] Install TipTap dependencies (@tiptap/react, @tiptap/starter-kit, @tiptap/extension-table, etc.)
+- [ ] Install collaboration dependencies (yjs, y-webrtc, @tiptap/extension-collaboration)
+- [x] Install markdown processing dependencies (remark, unified, rehype)
+- [~] Verify existing dependencies (react-markdown, remark-gfm, @radix-ui/*, framer-motion)
+
+## Phase 1: Foundation and Basic Editor (Week 1-2)
+**Objective**: Create basic TipTap editor with markdown conversion and mode switching
+
+### Core Component Structure
+- [x] Create MarkdownEditorViewer component to lazy load ContentViewer and SimpleEditor component depending on mode
+- [x] Adapt existing file structure in `packages/tiptap/` for new components (Viewer, Suggestions, etc.)
+- [x] Implement lazy loading for Editor and Viewer modes within `MarkdownEditorViewer.tsx`
+- [x] Add error boundaries
+
+### Markdown Translation Layer
+- [x] Create `markdownTranslator.ts` utility
+- [x] Implement markdown to TipTap JSON conversion using remark-gfm
+- [x] Implement TipTap JSON to markdown conversion
+- [x] Handle existing FormattedMessage content patterns (video prefixes, etc.)
+- [x] Add proper error handling and fallbacks
+- [x] Preserve multimedia embeds and custom HTML elements
+
+### Basic TipTap Editor
+- [x] Initialize TipTap editor with StarterKit extensions
+- [x] Apply consistent Tailwind classes matching FormattedMessage styling
+- [x] Add focus management and event handling
+- [x] Handle content updates and markdown conversion
+- [x] Implement proper cleanup and memory management
+
+### Read-Only Viewer
+- [x] Create `ViewerContent.tsx` component (as `SimpleViewer.tsx`)
+- [x] Use TipTap's non-editable mode for viewing
+- [x] Apply identical styling classes from FormattedMessage
+- [x] Support all existing markdown features (tables, lists, headings)
+- [~] Implement proper link handling and UTM parameter addition
+- [x] Handle streaming content display
+- [x] Maintain consistent component rendering patterns
+
+### Mode Switching
+- [x] Implement seamless edit/readonly mode switching
+- [x] Preserve content during mode changes
+- [x] Handle focus management during switches
+- [ ] Test content integrity across mode changes
+
+### **Phase 1 Success Criteria**
+- [ ] Editor initializes in under 500ms
+- [ ] Mode switching completes in under 100ms
+- [ ] Content preservation across all operations
+- [ ] Styling consistency with FormattedMessage
+- [ ] Unit tests passing for core functionality
+
+---
+
+## Phase 2: Multimedia System Integration (Week 3)
+**Objective**: Integrate existing embed system and add multimedia handling capabilities
+
+### Multimedia Extension
+- [x] Create `MultimediaExtension.ts` for TipTap in `@brainfish-ai/tiptap` package (as `image-upload-node-extension.ts` and `video-embed-extension.ts`)
+- [x] Integrate with existing EmbedComponent system from embeds/index.tsx
+- [~] Support all existing embed types (YouTube, Vimeo, Loom, etc.)
+- [x] Implement drag-and-drop file uploads using react-dropzone patterns
+- [ ] Handle paste event handling for URLs and files
+- [x] Maintain consistency with FormattedMessage multimedia rendering
+- [x] Add proper error handling for unsupported media types
+
+### Media Upload Component
+- [x] Create `MediaUpload.tsx` component (as `image-upload-node.tsx`)
+- [x] Use react-dropzone for file upload UI (custom implementation)
+- [x] Implement progress indicators and validation
+- [~] Handle multiple file types (images, videos, documents)
+- [x] Add file size and type validation with error messages
+- [x] Support drag-and-drop and click-to-upload interactions
+- [x] Integrate with existing file upload utilities and styles
+
+### Media Renderer
+- [x] Create `MediaRenderer.tsx` component (logic is inside node views)
+- [x] Reuse existing embed components (Youtube, Vimeo, ZoomableImage, etc.)
+- [x] Handle video content type prefixes and attachment redirects
+- [x] Implement proper error states and loading indicators
+- [~] Support all multimedia types defined in specification
+- [x] Provide consistent styling and responsive behavior
+
+### Media Toolbar
+- [x] Create `MediaToolbar.tsx` component (as part of `simple-editor.tsx`)
+- [~] Add buttons for different media insertion types
+- [x] Use existing UI components (Button, Tooltip, DropdownMenu)
+- [x] Implement keyboard shortcuts for media insertion
+- [x] Show appropriate icons using @phosphor-icons/react (custom icons used)
+- [x] Integrate with TipTap editor commands for media insertion
+- [ ] Provide contextual media editing options (resize, align, etc.)
+
+### **Phase 2 Success Criteria**
+- [ ] 100% compatibility with existing embed system
+- [ ] All FormattedMessage media types supported
+- [ ] Drag-and-drop functionality working
+- [ ] File upload with progress indicators
+- [ ] Error handling for unsupported media
+- [ ] Integration tests passing
+
+---
+
+## Phase 3: Suggestion System (Week 4)
+**Objective**: Implement visual suggestion system with accept/reject functionality
+
+### Suggestion Extension
+- [ ] Create `SuggestionExtension.ts` for TipTap in `@brainfish-ai/tiptap` package
+- [ ] Add suggestion marks to document nodes with visual styling
+- [ ] Implement three suggestion types: insert, delete, replace
+- [ ] Provide keyboard navigation through suggestions (Tab/Shift-Tab)
+- [ ] Handle suggestion acceptance and rejection with proper cleanup
+- [ ] Track suggestion metadata (author, timestamp, reason)
+- [ ] Implement conflict resolution for overlapping suggestions
+
+### Suggestion Visual Styles
+- [ ] Create suggestion CSS styles with consistent color schemes
+- [ ] Provide clear visual distinction between insert/delete/replace
+- [ ] Implement hover and focus states for suggestions
+- [ ] Support dark mode with appropriate color adjustments
+- [ ] Maintain accessibility standards for color contrast
+- [ ] Add smooth transitions for suggestion state changes
+
+### Suggestion List Component
+- [ ] Create `SuggestionList.tsx` component
+- [ ] Display all suggestions in sidebar panel
+- [ ] Group suggestions by type with filtering options
+- [ ] Show suggestion metadata (author, timestamp, reason)
+- [ ] Implement batch accept/reject operations
+- [ ] Add search and sorting functionality
+- [ ] Use existing UI components (ScrollArea, Button, Badge)
+- [ ] Implement keyboard navigation and focus management
+
+### Suggestion Navigation
+- [ ] Create `useSuggestionNavigation` hook
+- [ ] Manage active suggestion focus state
+- [ ] Implement keyboard navigation between suggestions
+- [ ] Provide methods for programmatic navigation
+- [ ] Handle edge cases (no suggestions, deleted suggestions)
+- [ ] Integrate with TipTap editor focus management
+- [ ] Implement smooth scrolling to active suggestions
+
+### **Phase 3 Success Criteria**
+- [ ] All suggestion types visually distinct
+- [ ] Keyboard navigation working smoothly
+- [ ] Accept/reject operations functioning
+- [ ] Conflict resolution working
+- [ ] Accessibility compliance verified
+- [ ] Performance with large suggestion lists
+
+---
+
+## Phase 4: Streaming Content Support (Week 5)
+**Objective**: Implement real-time streaming content functionality
+
+### Streaming Extension
+- [ ] Create `StreamingExtension.ts` for TipTap in `@brainfish-ai/tiptap` package
+- [ ] Handle real-time content insertion at document end
+- [ ] Manage streaming state and prevent editing during streams
+- [ ] Implement content buffering and batch updates for performance
+- [ ] Provide visual indicators for streaming content
+- [ ] Handle stream interruption and recovery gracefully
+- [ ] Maintain document structure during streaming updates
+
+### Streaming Hook
+- [ ] Create `useStreaming` hook
+- [ ] Manage streaming state and content buffering
+- [ ] Implement debounced content updates for performance
+- [ ] Handle streaming errors and connection issues
+- [ ] Provide streaming progress and status information
+- [ ] Integrate with TipTap editor streaming extension
+- [ ] Implement proper cleanup and memory management
+
+### Streaming Indicator Component
+- [ ] Create `StreamingIndicator.tsx` component
+- [ ] Show visual feedback during content streaming
+- [ ] Display streaming progress and connection status
+- [ ] Implement pulsing animation for active streaming
+- [ ] Provide error states and retry functionality
+- [ ] Use existing UI components (Progress, Badge, Button)
+- [ ] Maintain consistent styling with rest of editor
+
+### Streaming Buffer Management
+- [ ] Create `StreamingBuffer` utility class
+- [ ] Manage content buffering and batch processing
+- [ ] Implement intelligent content chunking for performance
+- [ ] Handle malformed or incomplete streaming content
+- [ ] Provide content validation and sanitization
+- [ ] Implement backpressure handling for fast streams
+- [ ] Maintain content integrity during streaming
+
+### **Phase 4 Success Criteria**
+- [ ] Streaming content updates at 1000+ chars/second
+- [ ] Buffer overflow protection working
+- [ ] Error handling and recovery functioning
+- [ ] Performance with large streams maintained
+- [ ] Integration with editor state working
+- [ ] Memory usage under control
+
+---
+
+## Phase 5: Collaboration Features (Week 6)
+**Objective**: Implement real-time collaboration with cursors and presence
+
+### Collaboration Extension
+- [ ] Create `CollaborationExtension.ts` in `@brainfish-ai/tiptap` package
+- [ ] Integrate with Yjs for operational transformation
+- [ ] Implement real-time cursor tracking and presence
+- [ ] Handle conflict resolution for simultaneous edits
+- [ ] Provide user identification and avatar display
+- [ ] Implement connection management and reconnection
+- [ ] Maintain document consistency across all clients
+
+### Collaborator Components
+- [ ] Create `CollaboratorList.tsx` component
+- [ ] Show all active collaborators with avatars and names
+- [ ] Display real-time presence indicators (typing, idle, away)
+- [ ] Implement user color coding for cursor identification
+- [ ] Show connection status for each collaborator
+- [ ] Use existing UI components (Avatar, Badge, Tooltip)
+- [ ] Handle user interactions like viewing collaborator location
+
+### Cursor Management System
+- [ ] Create `CollaboratorCursor.tsx` component
+- [ ] Render real-time cursor positions for all collaborators
+- [ ] Show user names and colors for cursor identification
+- [ ] Implement smooth cursor animations and transitions
+- [ ] Handle cursor visibility based on viewport
+- [ ] Provide selection range indicators for collaborators
+- [ ] Integrate with TipTap collaboration cursor system
+
+### Presence Management
+- [ ] Create `useCollaborationPresence` hook
+- [ ] Manage user presence state (active, idle, away)
+- [ ] Implement typing indicators with debounced updates
+- [ ] Handle connection status and reconnection logic
+- [ ] Provide methods for sending presence updates
+- [ ] Manage awareness state for all collaborators
+- [ ] Implement proper cleanup and memory management
+
+### **Phase 5 Success Criteria**
+- [ ] Real-time collaboration working
+- [ ] Cursor synchronization accurate
+- [ ] Conflict resolution functioning
+- [ ] Connection handling robust
+- [ ] Presence indicators working
+- [ ] Performance with multiple users maintained
+
+---
+
+## Phase 6: Integration and Polish (Week 7-8)
+**Objective**: Complete integration, testing, and production readiness
+
+### FormattedMessage Migration
+- [ ] Create migration utilities for seamless replacement
+- [ ] Maintain backward compatibility with existing props
+- [ ] Implement feature flags for gradual rollout
+- [ ] Provide fallback mechanisms for unsupported features
+- [ ] Handle existing content migration and formatting preservation
+- [ ] Create migration wrapper component for compatibility
+
+### Comprehensive Error Handling
+- [ ] Implement global error boundaries for graceful degradation
+- [ ] Provide detailed error reporting and logging
+- [ ] Handle network failures and API errors gracefully
+- [ ] Implement retry mechanisms for recoverable errors
+- [ ] Provide user-friendly error messages and recovery actions
+- [ ] Integrate with existing error tracking systems
+
+### Performance Optimization
+- [ ] Implement React.memo and useMemo for expensive operations
+- [ ] Add virtual scrolling for large documents
+- [ ] Optimize bundle size with dynamic imports
+- [ ] Implement debouncing for frequent operations
+- [ ] Use web workers for heavy computations
+- [ ] Implement efficient re-rendering strategies
+
+### Accessibility Implementation
+- [ ] Provide proper ARIA labels and roles for all interactive elements
+- [ ] Implement keyboard navigation for all functionality
+- [ ] Support screen readers with descriptive text and live regions
+- [ ] Maintain focus management during mode switches and updates
+- [ ] Provide high contrast mode support
+- [ ] Verify color contrast ratios throughout interface
+
+### Comprehensive Testing Suite
+- [ ] Create unit tests for all major components
+- [ ] Implement integration tests for workflows
+- [ ] Add visual regression testing for UI components
+- [ ] Test accessibility features with automated tools
+- [ ] Include performance benchmarks and memory leak detection
+- [ ] Test cross-browser compatibility
+- [ ] Implement end-to-end testing scenarios
+
+### Documentation and Migration Guide
+- [ ] Create API documentation for all components
+- [ ] Write migration guide from FormattedMessage
+- [ ] Document all prop interfaces and callbacks
+- [ ] Provide usage examples and best practices
+- [ ] Create troubleshooting guide
+- [ ] Document performance considerations
+
+### **Phase 6 Success Criteria**
+- [ ] All functionality working end-to-end
+- [ ] Performance benchmarks met (initialization < 500ms, typing lag < 50ms)
+- [ ] Accessibility compliance verified (WCAG 2.1 AA)
+- [ ] Cross-browser testing complete
+- [ ] Migration path validated
+- [ ] Production deployment ready