@rufous/ui 0.1.88 → 0.1.90

package/dist/main.css

@@ -13972,7 +13972,6 @@ svg.jodit-icon {
 .rf-rte-wrapper:has(.ai-commands-panel),
 .rf-rte-wrapper:has(.tts-panel),
 .rf-rte-wrapper:has(.stt-panel),
-.rf-rte-wrapper:has(.image-toolbar),
 .rf-rte-wrapper:has(.translate-toast-popup) {
   z-index: 100;
 }
@@ -14009,9 +14008,23 @@ svg.jodit-icon {
   padding: 4px 8px;
   flex-wrap: wrap;
 }
-.rf-rte-wrapper .toolbar-row + .toolbar-row {
+.rf-rte-wrapper .toolbar-row .with-close {
+  width: calc(100% - 32px);
+}
+.rf-rte-wrapper .toolbar-row + .toolbar-row,
+.rf-rte-wrapper .toolbar-row-right + .toolbar-row-right {
   border-top: 1px solid #e8eaed;
 }
+.rf-rte-wrapper .toolbar-row-right {
+  display: flex;
+  align-items: center;
+  gap: 1px;
+  padding: 4px 0px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 32px;
+}
 .rf-rte-wrapper .toolbar-group {
   display: flex;
   align-items: center;
@@ -14043,6 +14056,17 @@ svg.jodit-icon {
   position: relative;
   flex-shrink: 0;
 }
+.rf-rte-wrapper .toolbar-btn.btn-cross {
+  background-color: #fafbfd;
+}
+.rf-rte-wrapper .toolbar-btn.btn-cross svg {
+  width: 12px;
+  height: 12px;
+  color: #a81c08;
+}
+.rf-rte-wrapper .toolbar-btn.special-characters-btn {
+  font-size: 20px;
+}
 .rf-rte-wrapper .toolbar-btn svg {
   width: 20px;
   height: 20px;
@@ -14267,6 +14291,7 @@ svg.jodit-icon {
   font-weight: 500;
   cursor: pointer;
   border-bottom: 2px solid transparent;
+  border-radius: 0;
   transition: color 0.15s, border-color 0.15s;
 }
 .rf-rte-wrapper .color-picker-tab:hover {
@@ -14496,6 +14521,10 @@ svg.jodit-icon {
   font-size: 12px;
   line-height: 1;
 }
+.rf-rte-wrapper .task-icon img {
+  width: 18px;
+  height: 18px;
+}
 .rf-rte-wrapper .task-icon.task-todo {
   color: #dc2626;
   border: 2px solid #dc2626;
@@ -14503,10 +14532,11 @@ svg.jodit-icon {
 .rf-rte-wrapper .task-icon.task-working {
   color: #2563eb;
   border: 2px solid #2563eb;
+  font-size: 25px;
 }
 .rf-rte-wrapper .task-icon.task-blocked {
   color: #1f2937;
-  background: #1f2937;
+  border: 2px solid #000000;
 }
 .rf-rte-wrapper .task-icon.task-resolved {
   color: #16a34a;
@@ -14901,6 +14931,22 @@ svg.jodit-icon {
   border-radius: 8px;
   max-width: 100%;
 }
+.rf-rte-wrapper .tiptap video {
+  max-width: 100%;
+}
+.rf-rte-wrapper .rf-video-outer {
+  margin: 0.8em 0;
+}
+.rf-rte-wrapper .rf-video-outer video,
+.rf-rte-wrapper .rf-video-outer iframe {
+  display: block;
+  max-width: 100%;
+}
+.rf-rte-wrapper .rf-video-outer.rf-video-selected video,
+.rf-rte-wrapper .rf-video-outer.rf-video-selected iframe {
+  outline: 2px solid #6366f1;
+  outline-offset: 2px;
+}
 .rf-rte-wrapper .bubble-menu {
   display: flex;
   gap: 2px;
@@ -14979,10 +15025,47 @@ svg.jodit-icon {
   border-radius: 8px;
   margin: 0.8em 0;
 }
-.rf-rte-wrapper .tiptap img.ProseMirror-selectednode {
+.rf-rte-wrapper .rf-image-resizable img {
+  display: block;
+  max-width: 100%;
+}
+.rf-rte-wrapper .rf-image-resizable.rf-image-selected img {
   outline: 2px solid #6366f1;
   outline-offset: 2px;
 }
+.rf-rte-wrapper .rf-resize-handle {
+  display: none;
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #6366f1;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  z-index: 10;
+}
+.rf-rte-wrapper .rf-image-selected .rf-resize-handle {
+  display: block;
+}
+.rf-rte-wrapper .rf-resize-handle--nw {
+  top: 5px;
+  left: -7px;
+  cursor: nw-resize;
+}
+.rf-rte-wrapper .rf-resize-handle--ne {
+  top: 5px;
+  right: -7px;
+  cursor: ne-resize;
+}
+.rf-rte-wrapper .rf-resize-handle--sw {
+  bottom: 5px;
+  left: -7px;
+  cursor: sw-resize;
+}
+.rf-rte-wrapper .rf-resize-handle--se {
+  bottom: 5px;
+  right: -7px;
+  cursor: se-resize;
+}
 .rf-rte-wrapper .status-bar {
   display: flex;
   justify-content: space-between;
@@ -15062,7 +15145,7 @@ svg.jodit-icon {
   letter-spacing: 0.5px;
   text-transform: uppercase;
 }
-.rf-rte-wrapper .image-toolbar {
+.image-toolbar {
   display: flex;
   align-items: center;
   gap: 3px;
@@ -15070,11 +15153,9 @@ svg.jodit-icon {
   background: #1e293b;
   border-radius: 10px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-  position: absolute;
-  z-index: 100;
   transform: translateY(4px);
 }
-.rf-rte-wrapper .img-tool-btn {
+.image-toolbar .img-tool-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -15089,15 +15170,15 @@ svg.jodit-icon {
   line-height: 1;
   gap: 3px;
 }
-.rf-rte-wrapper .img-tool-btn:hover {
+.image-toolbar .img-tool-btn:hover {
   background: #334155;
   color: #f8fafc;
 }
-.rf-rte-wrapper .img-tool-copy-wrapper {
+.image-toolbar .img-tool-copy-wrapper {
   position: relative;
   display: inline-flex;
 }
-.rf-rte-wrapper .img-copy-toast {
+.image-toolbar .img-copy-toast {
   position: absolute;
   bottom: 100%;
   left: 50%;
@@ -15123,10 +15204,10 @@ svg.jodit-icon {
     transform: translateX(-50%) translateY(0);
   }
 }
-.rf-rte-wrapper .img-tool-dropdown {
+.image-toolbar .img-tool-dropdown {
   position: relative;
 }
-.rf-rte-wrapper .img-tool-menu {
+.image-toolbar .img-tool-menu {
   position: absolute;
   top: 100%;
   left: 0;
@@ -15139,16 +15220,32 @@ svg.jodit-icon {
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   margin-top: 4px;
 }
+.image-toolbar .dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 7px 12px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: #3c4043;
+  font-size: 13px;
+  cursor: pointer;
+  text-align: left;
+  white-space: nowrap;
+  transition: background 0.12s ease;
+}
+.image-toolbar .dropdown-item:hover {
+  background: #e8eaed;
+  color: #202124;
+}
 .rf-rte-wrapper .tiptap img {
   cursor: grab;
 }
 .rf-rte-wrapper .tiptap img:active {
   cursor: grabbing;
 }
-.rf-rte-wrapper .tiptap img.ProseMirror-selectednode {
-  outline: 2px solid #6366f1;
-  outline-offset: 2px;
-}
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -15464,6 +15561,7 @@ svg.jodit-icon {
   background: #fef2f2;
   border-left: 3px solid #991b1b;
   font-weight: 600;
+  border-radius: 0;
 }
 .translate-code {
   color: #991b1b;
@@ -16118,6 +16216,79 @@ svg.jodit-icon {
 .rf-rte-mention-name {
   font-weight: 500;
 }
+.rf-spell-error {
+  text-decoration: underline wavy #dc2626;
+  text-decoration-skip-ink: none;
+  text-underline-offset: 3px;
+  cursor: default;
+}
+.rf-spell-tooltip {
+  background: #fff;
+  border: 1px solid #dadce0;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
+  min-width: 160px;
+  max-width: 240px;
+  overflow: hidden;
+  font-family: inherit;
+}
+.rf-spell-tooltip-header {
+  padding: 8px 12px 6px;
+  font-size: 0.8rem;
+  color: #dc2626;
+  font-weight: 600;
+  border-bottom: 1px solid #f3f4f6;
+}
+.rf-spell-tooltip-word {
+  text-decoration: underline wavy #dc2626;
+  text-underline-offset: 2px;
+}
+.rf-spell-tooltip-suggestions {
+  padding: 4px 0;
+}
+.rf-spell-suggestion-btn {
+  display: block;
+  width: 100%;
+  padding: 6px 12px;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #1f2937;
+  font-size: 0.85rem;
+  font-family: inherit;
+  transition: background 0.12s;
+}
+.rf-spell-suggestion-btn:hover {
+  background: #f3f4f6;
+}
+.rf-spell-no-suggestions {
+  padding: 8px 12px;
+  color: #9ca3af;
+  font-size: 0.8rem;
+  font-style: italic;
+}
+.rf-spell-tooltip-footer {
+  border-top: 1px solid #f3f4f6;
+  padding: 2px 0;
+}
+.rf-spell-action-btn {
+  display: block;
+  width: 100%;
+  padding: 5px 12px;
+  text-align: left;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #6b7280;
+  font-size: 0.78rem;
+  font-family: inherit;
+  transition: background 0.12s;
+}
+.rf-spell-action-btn:hover {
+  background: #f3f4f6;
+  color: #374151;
+}
 /*! Bundled license information:
 
 jodit/es5/jodit.min.css:

package/dist/main.d.cts

@@ -484,6 +484,14 @@ interface BaseDialogProps {
     size?: "sm" | "md" | "lg" | "xl" | "fullScreen";
     /** Scoped style overrides. Supports nested CSS selectors with & */
     sx?: SxProp;
+    /** A transition component (e.g. Fade, Slide, Grow, Zoom) to animate the dialog container */
+    TransitionComponent?: React.ComponentType<{
+        in: boolean;
+        children: React.ReactElement;
+        [key: string]: any;
+    }>;
+    /** Props forwarded to the TransitionComponent */
+    TransitionProps?: Record<string, any>;
 }
 declare const BaseDialog: React.FC<BaseDialogProps>;
 
@@ -1679,6 +1687,7 @@ interface RufousTextEditorProps {
     onTranslate?: (text: string, sourceLang: string, targetLang: string) => Promise<string>;
     onSpeechToText?: (text: string) => Promise<string>;
     onTextToSpeech?: (text: string, voice?: string) => Promise<string>;
+    onImageUpload?: (file: File) => Promise<string>;
     mentions?: Array<{
         id: string;
         name: string;

package/dist/main.d.ts

@@ -484,6 +484,14 @@ interface BaseDialogProps {
     size?: "sm" | "md" | "lg" | "xl" | "fullScreen";
     /** Scoped style overrides. Supports nested CSS selectors with & */
     sx?: SxProp;
+    /** A transition component (e.g. Fade, Slide, Grow, Zoom) to animate the dialog container */
+    TransitionComponent?: React.ComponentType<{
+        in: boolean;
+        children: React.ReactElement;
+        [key: string]: any;
+    }>;
+    /** Props forwarded to the TransitionComponent */
+    TransitionProps?: Record<string, any>;
 }
 declare const BaseDialog: React.FC<BaseDialogProps>;
 
@@ -1679,6 +1687,7 @@ interface RufousTextEditorProps {
     onTranslate?: (text: string, sourceLang: string, targetLang: string) => Promise<string>;
     onSpeechToText?: (text: string) => Promise<string>;
     onTextToSpeech?: (text: string, voice?: string) => Promise<string>;
+    onImageUpload?: (file: File) => Promise<string>;
     mentions?: Array<{
         id: string;
         name: string;