torch-glare 2.4.0 → 2.4.1

package/apps/lib/components/TextEditor.tsx

@@ -66,7 +66,10 @@ function setDirIfChanged(el: HTMLElement, dir: "rtl" | "ltr") {
   }
 }
 
-function applyDirectionToBlock(block: HTMLElement, fallbackDir: "rtl" | "ltr" = "ltr"): "rtl" | "ltr" {
+function applyDirectionToBlock(
+  block: HTMLElement,
+  fallbackDir: "rtl" | "ltr" = "ltr",
+): "rtl" | "ltr" {
   // Skip non-text blocks (delimiters, embeds, code)
   if (block.querySelector(".ce-delimiter, .cdx-embed, .embed-tool")) return fallbackDir;
 
@@ -78,9 +81,7 @@ function applyDirectionToBlock(block: HTMLElement, fallbackDir: "rtl" | "ltr" =
   if (listItems.length > 0) {
     let prevDir: "rtl" | "ltr" = fallbackDir;
     listItems.forEach((item) => {
-      const editable = item.querySelector<HTMLElement>(
-        '[contenteditable="true"]',
-      );
+      const editable = item.querySelector<HTMLElement>('[contenteditable="true"]');
       if (!editable) return;
       const text = (editable.textContent || "").trim();
       const dir = text ? getTextDirection(text) : prevDir;
@@ -93,9 +94,7 @@ function applyDirectionToBlock(block: HTMLElement, fallbackDir: "rtl" | "ltr" =
 
   // Handle regular blocks (paragraph, header, quote, warning, etc.)
   let lastDir = fallbackDir;
-  const editables = block.querySelectorAll<HTMLElement>(
-    '[contenteditable="true"]',
-  );
+  const editables = block.querySelectorAll<HTMLElement>('[contenteditable="true"]');
   editables.forEach((el) => {
     const text = (el.textContent || "").trim();
     const dir = text ? getTextDirection(text) : fallbackDir;
@@ -169,7 +168,7 @@ const getDefaultTools = (): Record<string, any> => ({
   linkTool: { class: LinkTool },
   image: { class: SimpleImage },
   raw: { class: RawTool },
-  chart: { class: ChartBlockTool as any },
+  chart: { class: ChartBlockTool },
   marker: { class: Marker, shortcut: "CMD+SHIFT+M" },
   inlineCode: { class: InlineCode, shortcut: "CMD+SHIFT+I" },
   underline: { class: Underline },
@@ -754,9 +753,7 @@ export interface TextEditorRef {
 }
 
 interface TextEditorProps
-  extends
-    Omit<HTMLAttributes<HTMLDivElement>, "onChange">,
-    VariantProps<typeof textEditorStyles> {
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">, VariantProps<typeof textEditorStyles> {
   theme?: Themes;
   data?: OutputData;
   onChange?: (data: OutputData) => void;
@@ -793,9 +790,7 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     const editorRef = useRef<EditorJS | null>(null);
     const holderRef = useRef<HTMLDivElement>(null);
     const observerRef = useRef<MutationObserver | null>(null);
-    const [holderId] = useState(
-      () => `torch-editor-${Math.random().toString(36).substring(2, 9)}`,
-    );
+    const [holderId] = useState(() => `torch-editor-${Math.random().toString(36).substring(2, 9)}`);
     const isInitializing = useRef(false);
     const pasteHandlerRef = useRef<((e: ClipboardEvent) => void) | null>(null);
     const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -839,107 +834,104 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
     }, []);
 
     // ── Markdown paste handler ──
-    const setupMarkdownPaste = useCallback(
-      (holderEl: HTMLElement) => {
-        const handler = async (e: ClipboardEvent) => {
-          if (readOnlyRef.current || !editorRef.current) return;
+    const setupMarkdownPaste = useCallback((holderEl: HTMLElement) => {
+      const handler = async (e: ClipboardEvent) => {
+        if (readOnlyRef.current || !editorRef.current) return;
 
-          const plain = e.clipboardData?.getData("text/plain") || "";
+        const plain = e.clipboardData?.getData("text/plain") || "";
 
-          // Only intercept if the plain text is markdown
-          if (!isMarkdown(plain)) return;
+        // Only intercept if the plain text is markdown
+        if (!isMarkdown(plain)) return;
 
-          e.preventDefault();
-          e.stopPropagation();
+        e.preventDefault();
+        e.stopPropagation();
 
-          const parsedBlocks = parseMarkdownToBlocks(plain);
-          if (parsedBlocks.length === 0) return;
+        const parsedBlocks = parseMarkdownToBlocks(plain);
+        if (parsedBlocks.length === 0) return;
 
-          const editor = editorRef.current;
+        const editor = editorRef.current;
 
-          // Save existing content, merge new blocks at cursor, render once
-          // This avoids per-block insert which freezes the editor on large pastes
+        // Save existing content, merge new blocks at cursor, render once
+        // This avoids per-block insert which freezes the editor on large pastes
+        try {
+          const existingData = await editor.save();
+          const existingBlocks = existingData.blocks || [];
+
+          // Determine insertion point
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const blocks = (editor as any).blocks;
+          let insertIdx = existingBlocks.length;
           try {
-            const existingData = await editor.save();
-            const existingBlocks = existingData.blocks || [];
-
-            // Determine insertion point
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const blocks = (editor as any).blocks;
-            let insertIdx = existingBlocks.length;
-            try {
-              if (blocks?.getCurrentBlockIndex) {
-                insertIdx = blocks.getCurrentBlockIndex() + 1;
-              }
-            } catch {
-              // Use end of document
+            if (blocks?.getCurrentBlockIndex) {
+              insertIdx = blocks.getCurrentBlockIndex() + 1;
             }
+          } catch {
+            // Use end of document
+          }
 
-            // Convert parsed blocks to OutputData block format
-            const newBlocks = parsedBlocks.map((block) => ({
-              type: block.type,
-              data: block.data,
-            }));
-
-            // Remove empty paragraph at cursor if it's the only content there
-            const filteredExisting = [...existingBlocks];
-            if (insertIdx > 0) {
-              const cursorBlock = filteredExisting[insertIdx - 1];
-              if (
-                cursorBlock &&
-                cursorBlock.type === "paragraph" &&
-                (!cursorBlock.data.text ||
-                  cursorBlock.data.text.trim() === "" ||
-                  cursorBlock.data.text === "<br>")
-              ) {
-                filteredExisting.splice(insertIdx - 1, 1);
-                insertIdx = Math.max(0, insertIdx - 1);
-              }
+          // Convert parsed blocks to OutputData block format
+          const newBlocks = parsedBlocks.map((block) => ({
+            type: block.type,
+            data: block.data,
+          }));
+
+          // Remove empty paragraph at cursor if it's the only content there
+          const filteredExisting = [...existingBlocks];
+          if (insertIdx > 0) {
+            const cursorBlock = filteredExisting[insertIdx - 1];
+            if (
+              cursorBlock &&
+              cursorBlock.type === "paragraph" &&
+              (!cursorBlock.data.text ||
+                cursorBlock.data.text.trim() === "" ||
+                cursorBlock.data.text === "<br>")
+            ) {
+              filteredExisting.splice(insertIdx - 1, 1);
+              insertIdx = Math.max(0, insertIdx - 1);
             }
+          }
 
-            // Merge: existing blocks before cursor + new blocks + existing blocks after cursor
-            const mergedBlocks = [
-              ...filteredExisting.slice(0, insertIdx),
-              ...newBlocks,
-              ...filteredExisting.slice(insertIdx),
-            ];
-
-            // Pause MutationObserver during bulk render to prevent O(n^2) direction checks
-            observerRef.current?.disconnect();
-
-            // Single render pass — no per-block DOM thrashing
-            await editor.render({
-              time: Date.now(),
-              version: existingData.version,
-              blocks: mergedBlocks,
-            });
+          // Merge: existing blocks before cursor + new blocks + existing blocks after cursor
+          const mergedBlocks = [
+            ...filteredExisting.slice(0, insertIdx),
+            ...newBlocks,
+            ...filteredExisting.slice(insertIdx),
+          ];
+
+          // Pause MutationObserver during bulk render to prevent O(n^2) direction checks
+          observerRef.current?.disconnect();
+
+          // Single render pass — no per-block DOM thrashing
+          await editor.render({
+            time: Date.now(),
+            version: existingData.version,
+            blocks: mergedBlocks,
+          });
 
-            // Reconnect observer on the redactor element
-            if (observerRef.current) {
-              const redactor = holderEl.querySelector(".codex-editor__redactor") || holderEl;
-              observerRef.current.observe(redactor, {
-                childList: true,
-                subtree: false,
-              });
-            }
-            // Defer direction scan to next frame — let the browser paint first
-            requestAnimationFrame(() => applyAutoDirection(holderEl));
+          // Reconnect observer on the redactor element
+          if (observerRef.current) {
+            const redactor = holderEl.querySelector(".codex-editor__redactor") || holderEl;
+            observerRef.current.observe(redactor, {
+              childList: true,
+              subtree: false,
+            });
+          }
+          // Defer direction scan to next frame — let the browser paint first
+          requestAnimationFrame(() => applyAutoDirection(holderEl));
 
-            // Trigger onChange with merged data
-            if (onChangeRef.current) {
-              const savedData = await editor.save();
-              onChangeRef.current(savedData);
-            }
-          } catch {
-            // Fallback: if render approach fails, do nothing rather than freeze
+          // Trigger onChange with merged data
+          if (onChangeRef.current) {
+            const savedData = await editor.save();
+            onChangeRef.current(savedData);
           }
-        };
+        } catch {
+          // Fallback: if render approach fails, do nothing rather than freeze
+        }
+      };
 
-        holderEl.addEventListener("paste", handler as unknown as EventListener, true);
-        pasteHandlerRef.current = handler;
-      },
-      [],
-    );
+      holderEl.addEventListener("paste", handler as unknown as EventListener, true);
+      pasteHandlerRef.current = handler;
+    }, []);
 
     // ── Auto-direction: watch for DOM changes & input ──
     const inputHandlerRef = useRef<((e: Event) => void) | null>(null);
@@ -1052,10 +1044,7 @@ export const TextEditor = forwardRef<TextEditorRef, TextEditorProps>(
           (window.cancelIdleCallback || clearTimeout)(idleCallbackRef.current);
         }
 
-        if (
-          editorRef.current &&
-          typeof editorRef.current.destroy === "function"
-        ) {
+        if (editorRef.current && typeof editorRef.current.destroy === "function") {
           editorRef.current.destroy();
           editorRef.current = null;
         }

package/apps/lib/components/Textarea.tsx

@@ -29,7 +29,7 @@ const textareaStyles = cva(
     "disabled:text-border-presentation-action-disabled",
     "disabled:cursor-not-allowed",
     "disabled:placeholder-border-presentation-action-disabled",
-    "field-sizing-content w-full min-w-[100px] max-w-[100%]"
+    "field-sizing-content w-full min-w-[100px] max-w-[100%]",
   ],
   {
     variants: {
@@ -43,13 +43,12 @@ const textareaStyles = cva(
       },
     },
     defaultVariants: {},
-  }
+  },
 );
 
 // Define the prop types for the Textarea component
 interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-  VariantProps<typeof textareaStyles> {
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaStyles> {
   label?: string; // Optional label text
   requiredLabel?: string; // Text for required field indicator
   secondaryLabel?: string; // Additional label text
@@ -67,10 +66,11 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       requiredLabel,
       secondaryLabel,
       direction = "row",
-      theme,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      theme, // excluded from ...props spread
       ...props
     },
-    ref
+    ref,
   ) => {
     return (
       <Label
@@ -82,14 +82,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         size={"M"}
         className={cn(className)}
       >
-        <textarea
-          className={cn(textareaStyles({ state }))}
-          ref={ref}
-          {...props}
-        />
+        <textarea className={cn(textareaStyles({ state }))} ref={ref} {...props} />
       </Label>
     );
-  }
+  },
 );
 Textarea.displayName = "Textarea";
 

package/apps/lib/components/Timeline.tsx

@@ -18,8 +18,7 @@ const timelineStyles = cva(["flex gap-0"], {
 });
 
 interface TimelineProps
-  extends HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof timelineStyles> {
+  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof timelineStyles> {
   theme?: Themes;
 }
 
@@ -32,7 +31,7 @@ const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
       className={cn(timelineStyles({ orientation }), className)}
       {...props}
     />
-  )
+  ),
 );
 Timeline.displayName = "Timeline";
 
@@ -62,7 +61,7 @@ const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(
       className={cn(timelineItemStyles({ orientation }), className)}
       {...props}
     />
-  )
+  ),
 );
 TimelineItem.displayName = "TimelineItem";
 
@@ -114,12 +113,11 @@ const indicatorStyles = cva(
       variant: "default",
       size: "M",
     },
-  }
+  },
 );
 
 interface TimelineIndicatorProps
-  extends HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof indicatorStyles> {
+  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof indicatorStyles> {
   icon?: ReactNode;
 }
 
@@ -135,25 +133,18 @@ const TimelineIndicator = forwardRef<HTMLDivElement, TimelineIndicatorProps>(
     };
 
     return (
-      <div
-        ref={ref}
-        className={cn(indicatorStyles({ variant, size }), className)}
-        {...props}
-      >
+      <div ref={ref} className={cn(indicatorStyles({ variant, size }), className)} {...props}>
         {renderContent()}
       </div>
     );
-  }
+  },
 );
 TimelineIndicator.displayName = "TimelineIndicator";
 
 // ─── Timeline Separator (the connecting line) ────────────────────────────────
 
 const separatorStyles = cva(
-  [
-    "bg-border-presentation-global-primary",
-    "transition-all duration-200 ease-in-out",
-  ],
+  ["bg-border-presentation-global-primary", "transition-all duration-200 ease-in-out"],
   {
     variants: {
       orientation: {
@@ -168,21 +159,16 @@ const separatorStyles = cva(
       orientation: "vertical",
       active: false,
     },
-  }
+  },
 );
 
 interface TimelineSeparatorProps
-  extends HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof separatorStyles> {}
+  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof separatorStyles> {}
 
 const TimelineSeparator = forwardRef<HTMLDivElement, TimelineSeparatorProps>(
   ({ className, orientation = "vertical", active, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(separatorStyles({ orientation, active }), className)}
-      {...props}
-    />
-  )
+    <div ref={ref} className={cn(separatorStyles({ orientation, active }), className)} {...props} />
+  ),
 );
 TimelineSeparator.displayName = "TimelineSeparator";
 
@@ -198,16 +184,14 @@ const TimelineConnector = forwardRef<HTMLDivElement, TimelineConnectorProps>(
       ref={ref}
       className={cn(
         "flex items-center",
-        orientation === "vertical"
-          ? "flex-col"
-          : "flex-row",
-        className
+        orientation === "vertical" ? "flex-col" : "flex-row",
+        className,
       )}
       {...props}
     >
       {children}
     </div>
-  )
+  ),
 );
 TimelineConnector.displayName = "TimelineConnector";
 
@@ -219,14 +203,10 @@ const TimelineContent = forwardRef<HTMLDivElement, TimelineContentProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn(
-        "flex flex-col gap-1 pb-6 pt-[2px]",
-        "group-last/item:pb-0",
-        className
-      )}
+      className={cn("flex flex-col gap-1 pb-6 pt-[2px]", "group-last/item:pb-0", className)}
       {...props}
     />
-  )
+  ),
 );
 TimelineContent.displayName = "TimelineContent";
 
@@ -240,11 +220,11 @@ const TimelineHeading = forwardRef<HTMLDivElement, TimelineHeadingProps>(
       ref={ref}
       className={cn(
         "typography-body-medium-medium text-content-presentation-global-primary",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  ),
 );
 TimelineHeading.displayName = "TimelineHeading";
 
@@ -258,11 +238,11 @@ const TimelineDescription = forwardRef<HTMLDivElement, TimelineDescriptionProps>
       ref={ref}
       className={cn(
         "typography-body-small-regular text-content-presentation-global-secondary",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  ),
 );
 TimelineDescription.displayName = "TimelineDescription";
 

package/apps/lib/components/Toast.tsx

@@ -1,87 +1,87 @@
-import React from 'react'
-import { Toaster as ToasterComponent, toast } from 'react-hot-toast'
-
+import React from "react";
+import { Toaster as ToasterComponent, toast } from "react-hot-toast";
 
 const Toaster = ({
-    position = 'top-left',
-    reverseOrder = false,
-    gutter = 8,
-    containerClassName = '',
-    containerStyle = {},
-    toastOptions = {},
-    ...props }: React.ComponentPropsWithoutRef<typeof ToasterComponent>) => {
-    return (
-        <ToasterComponent
-            position={position}
-            reverseOrder={reverseOrder}
-            gutter={gutter}
-            containerClassName={containerClassName}
-            containerStyle={containerStyle}
-            {...props}
-            toastOptions={{
-                // Define default options
-                className: '',
-                duration: 8000,
-                removeDelay: 1000,
-                style: {
-                    background: 'var(--background-presentation-state-information-secondary)',
-                    color: 'var(--content-presentation-global-primary)',
-                    borderRadius: '16px',
-                },
+  position = "top-left",
+  reverseOrder = false,
+  gutter = 8,
+  containerClassName = "",
+  containerStyle = {},
+  toastOptions = {},
+  ...props
+}: React.ComponentPropsWithoutRef<typeof ToasterComponent>) => {
+  return (
+    <ToasterComponent
+      position={position}
+      reverseOrder={reverseOrder}
+      gutter={gutter}
+      containerClassName={containerClassName}
+      containerStyle={containerStyle}
+      {...props}
+      toastOptions={{
+        // Define default options
+        className: "",
+        duration: 8000,
+        removeDelay: 1000,
+        style: {
+          background: "var(--background-presentation-state-information-secondary)",
+          color: "var(--content-presentation-global-primary)",
+          borderRadius: "16px",
+        },
 
-                // Default options for specific types
-                success: {
-                    duration: 3000,
-                    style: {
-                        background: 'var(--background-presentation-state-success-secondary)',
-                        color: 'var(--content-presentation-global-primary)',
-                        borderRadius: '16px',
-                    },
-                    iconTheme: {
-                        primary: 'var(--background-presentation-state-success-primary)',
-                        secondary: 'var(--background-presentation-state-success-secondary)',
-                    },
-                },
-                error: {
-                    duration: 5000,
-                    style: {
-                        background: 'var(--background-presentation-state-negative-secondary)',
-                        color: 'var(--content-presentation-global-primary)',
-                        borderRadius: '16px',
-                    },
-                    iconTheme: {
-                        primary: 'var(--background-presentation-state-negative-primary)',
-                        secondary: 'var(--background-presentation-state-negative-secondary)',
-                    },
-                },
-                loading: {
-                    duration: 4000,
-                    style: {
-                        background: 'var(--background-presentation-state-warning-secondary)',
-                        color: 'var(--content-presentation-global-primary)',
-                        borderRadius: '16px',
-                    },
-                    iconTheme: {
-                        primary: 'var(--background-presentation-state-warning-primary)',
-                        secondary: 'var(--background-presentation-state-warning-secondary)',
-                    },
-                },
-                blank: {
-                    duration: 4000,
-                    style: {
-                        background: 'var(--background-presentation-state-information-secondary)',
-                        color: 'var(--content-presentation-global-primary)',
-                        borderRadius: '16px',
-                    },
-                    iconTheme: {
-                        primary: 'var(--background-presentation-state-information-primary)',
-                        secondary: 'var(--background-presentation-state-information-secondary)',
-                    },
-                },
-                ...toastOptions,
-            }}
-        />
-    )
-}
+        // Default options for specific types
+        success: {
+          duration: 3000,
+          style: {
+            background: "var(--background-presentation-state-success-secondary)",
+            color: "var(--content-presentation-global-primary)",
+            borderRadius: "16px",
+          },
+          iconTheme: {
+            primary: "var(--background-presentation-state-success-primary)",
+            secondary: "var(--background-presentation-state-success-secondary)",
+          },
+        },
+        error: {
+          duration: 5000,
+          style: {
+            background: "var(--background-presentation-state-negative-secondary)",
+            color: "var(--content-presentation-global-primary)",
+            borderRadius: "16px",
+          },
+          iconTheme: {
+            primary: "var(--background-presentation-state-negative-primary)",
+            secondary: "var(--background-presentation-state-negative-secondary)",
+          },
+        },
+        loading: {
+          duration: 4000,
+          style: {
+            background: "var(--background-presentation-state-warning-secondary)",
+            color: "var(--content-presentation-global-primary)",
+            borderRadius: "16px",
+          },
+          iconTheme: {
+            primary: "var(--background-presentation-state-warning-primary)",
+            secondary: "var(--background-presentation-state-warning-secondary)",
+          },
+        },
+        blank: {
+          duration: 4000,
+          style: {
+            background: "var(--background-presentation-state-information-secondary)",
+            color: "var(--content-presentation-global-primary)",
+            borderRadius: "16px",
+          },
+          iconTheme: {
+            primary: "var(--background-presentation-state-information-primary)",
+            secondary: "var(--background-presentation-state-information-secondary)",
+          },
+        },
+        ...toastOptions,
+      }}
+    />
+  );
+};
 
-export { Toaster, toast }
+export { Toaster, toast };