torch-glare 2.4.0 → 2.4.1

package/apps/lib/hooks/useActiveTreeItem.ts

@@ -1,61 +1,58 @@
-'use client';
+"use client";
 import { useState, useEffect } from "react";
 
 export function useActiveTreeItem(itemIds: string[]) {
-    const [activeId, setActiveId] = useState<string | null>(null);
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!itemIds || itemIds.length === 0) {
+      console.warn("No itemIds provided to useActiveTreeItem.");
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        let mostVisibleEntry: IntersectionObserverEntry | null = null;
+
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            // Track the most visible entry (highest intersection ratio)
+            if (!mostVisibleEntry || entry.intersectionRatio > mostVisibleEntry.intersectionRatio) {
+              mostVisibleEntry = entry;
+            }
+          }
+        }
 
-    useEffect(() => {
-        if (!itemIds || itemIds.length === 0) {
-            console.warn("No itemIds provided to useActiveTreeItem.");
-            return;
+        if (mostVisibleEntry) {
+          setActiveId(mostVisibleEntry.target.id);
+        }
+      },
+      {
+        rootMargin: "-10% 0% -5% 0%", // Adjust based on your layout
+        threshold: [0, 0.25, 0.5, 0.75, 1], // Multiple thresholds for better accuracy
+      },
+    );
+
+    // Observe all elements
+    itemIds.forEach((id) => {
+      const element = document.getElementById(id);
+      if (element) {
+        observer.observe(element);
+      } else {
+        console.warn(`Element with id "${id}" not found.`);
+      }
+    });
+
+    // Cleanup observer
+    return () => {
+      itemIds.forEach((id) => {
+        const element = document.getElementById(id);
+        if (element) {
+          observer.unobserve(element);
         }
+      });
+    };
+  }, [itemIds]);
 
-        const observer = new IntersectionObserver(
-            (entries) => {
-                let mostVisibleEntry: any = null;
-
-                entries.forEach((entry) => {
-                    if (entry.isIntersecting) {
-                        // Track the most visible entry (highest intersection ratio)
-                        if (
-                            !mostVisibleEntry ||
-                            entry.intersectionRatio > mostVisibleEntry.intersectionRatio
-                        ) {
-                            mostVisibleEntry = entry;
-                        }
-                    }
-                });
-
-                if (mostVisibleEntry) {
-                    setActiveId(mostVisibleEntry.target.id);
-                }
-            },
-            {
-                rootMargin: '-10% 0% -5% 0%', // Adjust based on your layout
-                threshold: [0, 0.25, 0.5, 0.75, 1], // Multiple thresholds for better accuracy
-            }
-        );
-
-        // Observe all elements
-        itemIds.forEach((id) => {
-            const element = document.getElementById(id);
-            if (element) {
-                observer.observe(element);
-            } else {
-                console.warn(`Element with id "${id}" not found.`);
-            }
-        });
-
-        // Cleanup observer
-        return () => {
-            itemIds.forEach((id) => {
-                const element = document.getElementById(id);
-                if (element) {
-                    observer.unobserve(element);
-                }
-            });
-        };
-    }, [itemIds]);
-
-    return { activeId };
-}
+  return { activeId };
+}

package/apps/lib/hooks/useClickOutside.ts

@@ -1,26 +1,27 @@
 import { useEffect, useRef } from "react";
 
-export function useClickOutside<T extends HTMLElement>(callback: (event?: MouseEvent | PointerEvent) => void, otherwise?: (event?: MouseEvent | PointerEvent) => void) {
-    const ref = useRef<T>(null);
+export function useClickOutside<T extends HTMLElement>(
+  callback: (event?: MouseEvent | PointerEvent) => void,
+  otherwise?: (event?: MouseEvent | PointerEvent) => void,
+) {
+  const ref = useRef<T>(null);
 
-    useEffect(() => {
-        function handleOutsideClick(event: MouseEvent | PointerEvent) {
-            if (ref.current && !ref.current.contains(event.target as Node)) {
-                callback(event);
-            } else {
-                otherwise?.(event);
-            }
-        }
+  useEffect(() => {
+    function handleOutsideClick(event: MouseEvent | PointerEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback(event);
+      } else {
+        otherwise?.(event);
+      }
+    }
 
-        document.addEventListener("mousedown", handleOutsideClick);
-        document.addEventListener("pointerdown", handleOutsideClick);
-        return () => {
-            document.removeEventListener("mousedown", handleOutsideClick);
-            document.removeEventListener("pointerdown", handleOutsideClick);
-        };
-    }, [callback]);
+    document.addEventListener("mousedown", handleOutsideClick);
+    document.addEventListener("pointerdown", handleOutsideClick);
+    return () => {
+      document.removeEventListener("mousedown", handleOutsideClick);
+      document.removeEventListener("pointerdown", handleOutsideClick);
+    };
+  }, [callback]);
 
-    return ref;
+  return ref;
 }
-
-

package/apps/lib/hooks/useDataViewsState.ts

@@ -1,6 +1,6 @@
-"use client"
+"use client";
 
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react";
 import type {
   DynamicRecord,
   DynamicColumnConfig,
@@ -10,22 +10,22 @@ import type {
   ViewConfig,
   ViewType,
   ViewVisibility,
-} from "../components/DataViews/types"
-import { defaultConfig } from "../components/DataViews/types"
-import { detectColumns, mergeColumns } from "../utils/dataViews/columnUtils"
-import { detectFields, mergeFields } from "../utils/dataViews/fieldUtils"
-import { autoDetectTreeShape, flattenAll } from "../utils/dataViews/treeUtils"
+} from "../components/DataViews/types";
+import { defaultConfig } from "../components/DataViews/types";
+import { detectColumns, mergeColumns } from "../utils/dataViews/columnUtils";
+import { detectFields, mergeFields } from "../utils/dataViews/fieldUtils";
+import { autoDetectTreeShape, flattenAll } from "../utils/dataViews/treeUtils";
 
 export type UseDataViewsStateOptions = {
-  data?: DynamicRecord[]
-  fields?: FieldConfig[]
-  columns?: Partial<DynamicColumnConfig>[]
-  config?: Partial<ViewConfig>
-  treeConfig?: TreeConfig
-  views?: ViewVisibility
-  filterState?: FilterState
-  onFilterChange?: (filters: FilterState) => void
-}
+  data?: DynamicRecord[];
+  fields?: FieldConfig[];
+  columns?: Partial<DynamicColumnConfig>[];
+  config?: Partial<ViewConfig>;
+  treeConfig?: TreeConfig;
+  views?: ViewVisibility;
+  filterState?: FilterState;
+  onFilterChange?: (filters: FilterState) => void;
+};
 
 export function useDataViewsState({
   data,
@@ -39,117 +39,123 @@ export function useDataViewsState({
 }: UseDataViewsStateOptions) {
   const [currentView, setCurrentView] = useState<ViewType>(
     initialConfig?.defaultView || defaultConfig.defaultView,
-  )
-  const [config, setConfig] = useState<ViewConfig>({ ...defaultConfig, ...initialConfig })
-  const [items, setItems] = useState<DynamicRecord[]>(data || [])
-  const [internalFilterState, setInternalFilterState] = useState<FilterState>({})
+  );
+  const [config, setConfig] = useState<ViewConfig>({ ...defaultConfig, ...initialConfig });
+  const [items, setItems] = useState<DynamicRecord[]>(data || []);
+  const [internalFilterState, setInternalFilterState] = useState<FilterState>({});
 
   useEffect(() => {
-    setItems(data || [])
-  }, [data])
+    setItems(data || []);
+  }, [data]);
 
-  const activeFilterState = externalFilterState ?? internalFilterState
+  const activeFilterState = externalFilterState ?? internalFilterState;
 
   const treeShape = useMemo(
     () => autoDetectTreeShape(items, treeConfig ?? {}),
     [items, treeConfig],
-  )
-  const treeAutoAvailable =
-    !!treeConfig || !!treeShape.childrenField || !!treeShape.parentField
+  );
+  const treeAutoAvailable = !!treeConfig || !!treeShape.childrenField || !!treeShape.parentField;
 
   const enabledViews = useMemo<Record<ViewType, boolean>>(() => {
-    const v = views ?? {}
+    const v = views ?? {};
     return {
-      table:  v.table  ?? true,
+      table: v.table ?? true,
       kanban: v.kanban ?? true,
-      inbox:  v.inbox  ?? true,
-      tree:   v.tree   ?? treeAutoAvailable,
-    }
-  }, [views, treeAutoAvailable])
+      inbox: v.inbox ?? true,
+      tree: v.tree ?? treeAutoAvailable,
+    };
+  }, [views, treeAutoAvailable]);
 
   useEffect(() => {
     if (!enabledViews[currentView]) {
-      const fallback = (Object.entries(enabledViews) as Array<[ViewType, boolean]>)
-        .find(([, on]) => on)?.[0]
-      if (fallback) setCurrentView(fallback)
+      const fallback = (Object.entries(enabledViews) as Array<[ViewType, boolean]>).find(
+        ([, on]) => on,
+      )?.[0];
+      if (fallback) setCurrentView(fallback);
     }
-  }, [enabledViews, currentView])
+  }, [enabledViews, currentView]);
 
   const flatItems = useMemo<DynamicRecord[]>(() => {
-    const cf = treeConfig?.childrenField ?? treeShape.childrenField
-    if (!cf) return items
-    return flattenAll(items, cf)
-  }, [items, treeConfig?.childrenField, treeShape.childrenField])
+    const cf = treeConfig?.childrenField ?? treeShape.childrenField;
+    if (!cf) return items;
+    return flattenAll(items, cf);
+  }, [items, treeConfig?.childrenField, treeShape.childrenField]);
 
   const detectedFields = useMemo<FieldConfig[]>(() => {
-    if (!flatItems || flatItems.length === 0) return []
-    const detected = detectFields(flatItems)
-    return mergeFields(detected, fields)
-  }, [flatItems, fields])
+    if (!flatItems || flatItems.length === 0) return [];
+    const detected = detectFields(flatItems);
+    return mergeFields(detected, fields);
+  }, [flatItems, fields]);
 
   const resolvedFields = useMemo<FieldConfig[]>(() => {
-    if (detectedFields.length === 0) return detectedFields
-    const overrides = new Map(config.tableColumns.map((c) => [c.id, c]))
+    if (detectedFields.length === 0) return detectedFields;
+    const overrides = new Map(config.tableColumns.map((c) => [c.id, c]));
     return detectedFields
       .map((f) => {
-        const o = overrides.get(f.path)
-        if (!o) return f
-        return { ...f, visible: o.visible, order: o.order }
+        const o = overrides.get(f.path);
+        if (!o) return f;
+        return { ...f, visible: o.visible, order: o.order };
       })
-      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
-  }, [detectedFields, config.tableColumns])
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  }, [detectedFields, config.tableColumns]);
 
   const detectedColumns = useMemo<DynamicColumnConfig[]>(() => {
-    if (!flatItems || flatItems.length === 0) return []
-    const detected = detectColumns(flatItems)
-    return mergeColumns(detected, columns)
-  }, [flatItems, columns])
+    if (!flatItems || flatItems.length === 0) return [];
+    const detected = detectColumns(flatItems);
+    return mergeColumns(detected, columns);
+  }, [flatItems, columns]);
 
   useEffect(() => {
-    if (detectedFields.length === 0) return
+    if (detectedFields.length === 0) return;
     setConfig((prev) => {
-      const prevByPath = new Map(prev.tableColumns.map((c) => [c.id, c]))
-      const next: typeof prev.tableColumns = []
-      let order = 0
+      const prevByPath = new Map(prev.tableColumns.map((c) => [c.id, c]));
+      const next: typeof prev.tableColumns = [];
+      let order = 0;
       for (const f of detectedFields) {
-        if (f.type === "hidden") continue
-        const existing = prevByPath.get(f.path)
+        if (f.type === "hidden") continue;
+        const existing = prevByPath.get(f.path);
         next.push({
           id: f.path,
           label: f.label ?? f.path,
           visible: existing?.visible ?? f.visible !== false,
           order: existing?.order ?? order,
-        })
-        order++
-        prevByPath.delete(f.path)
+        });
+        order++;
+        prevByPath.delete(f.path);
       }
-      const stale = Array.from(prevByPath.values())
-      const carried = [...next, ...stale].slice(0, 100)
+      const stale = Array.from(prevByPath.values());
+      const carried = [...next, ...stale].slice(0, 100);
       if (
         carried.length === prev.tableColumns.length &&
         carried.every((c, i) => {
-          const p = prev.tableColumns[i]
-          return p && p.id === c.id && p.label === c.label && p.visible === c.visible && p.order === c.order
+          const p = prev.tableColumns[i];
+          return (
+            p &&
+            p.id === c.id &&
+            p.label === c.label &&
+            p.visible === c.visible &&
+            p.order === c.order
+          );
         })
       ) {
-        return prev
+        return prev;
       }
-      return { ...prev, tableColumns: carried }
-    })
-  }, [detectedFields])
+      return { ...prev, tableColumns: carried };
+    });
+  }, [detectedFields]);
 
   const handleConfigChange = (newConfig: Partial<ViewConfig>) => {
-    setConfig((prev) => ({ ...prev, ...newConfig }))
-  }
+    setConfig((prev) => ({ ...prev, ...newConfig }));
+  };
 
   const handleDataUpdate = (updatedData: DynamicRecord[]) => {
-    setItems(updatedData)
-  }
+    setItems(updatedData);
+  };
 
   const handleFilterChange = (newFilters: FilterState) => {
-    if (onFilterChange) onFilterChange(newFilters)
-    else setInternalFilterState(newFilters)
-  }
+    if (onFilterChange) onFilterChange(newFilters);
+    else setInternalFilterState(newFilters);
+  };
 
   return {
     items,
@@ -165,5 +171,5 @@ export function useDataViewsState({
     onDataUpdate: handleDataUpdate,
     treeShape,
     enabledViews,
-  }
+  };
 }

package/apps/lib/hooks/useIsMobile.ts

@@ -1,21 +1,21 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
 
-const MOBILE_BREAKPOINT = 768
+const MOBILE_BREAKPOINT = 768;
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
 
-  return !!isMobile
+  return !!isMobile;
 }

package/apps/lib/hooks/useResize.ts

@@ -1,78 +1,67 @@
-import {
-    MutableRefObject,
-    RefObject,
-    useEffect,
-    useState,
-} from "react";
+import { MutableRefObject, RefObject, useEffect, useState } from "react";
 import { calculateNewWidthFromMouse, calculateNewWidthFromTouch } from "../utils/resize";
 
-
 // Hook to handle resizing with RTL support
-export const useResize = (
-    resizableRef: MutableRefObject<HTMLElement> | RefObject<HTMLElement>
-) => {
-    const [width, setWidth] = useState<number>();
-    const [isResizing, setIsResizing] = useState<boolean>(false);
-    const [isRTL, setIsRTL] = useState<boolean>(false);
-
-
-
-    // Start the resize process
-    const handleStartResize = () => {
-        setIsResizing(true);
-    };
+export const useResize = (resizableRef: MutableRefObject<HTMLElement> | RefObject<HTMLElement>) => {
+  const [width, setWidth] = useState<number>();
+  const [isResizing, setIsResizing] = useState<boolean>(false);
+  const [isRTL, setIsRTL] = useState<boolean>(false);
 
-    // Stop the resize process
-    const handleStopResize = () => {
-        setIsResizing(false);
-    };
+  // Start the resize process
+  const handleStartResize = () => {
+    setIsResizing(true);
+  };
 
-    // Handle mouse move events
-    const handleMouseMove = (event: MouseEvent) => {
-        if (!isResizing) return;
-        const newWidth = calculateNewWidthFromMouse(event, resizableRef, isRTL);
-        setWidth(newWidth);
-    };
+  // Stop the resize process
+  const handleStopResize = () => {
+    setIsResizing(false);
+  };
 
-    // Handle touch move events
-    const handleTouchMove = (event: TouchEvent) => {
-        if (!isResizing) return;
-        event.preventDefault(); // Prevent scrolling or other touch-related behaviors
-        const newWidth = calculateNewWidthFromTouch(event, resizableRef, isRTL);
-        setWidth(newWidth);
-    };
+  // Handle mouse move events
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!isResizing) return;
+    const newWidth = calculateNewWidthFromMouse(event, resizableRef, isRTL);
+    setWidth(newWidth);
+  };
 
-    useEffect(() => {
-        let htmlDir = ''
-        if (document) {
-            htmlDir = document.documentElement.getAttribute("dir") || "ltr"
-        }
-        // Determine the direction of the document
-        setIsRTL(htmlDir === "rtl");
-    }, []);
+  // Handle touch move events
+  const handleTouchMove = (event: TouchEvent) => {
+    if (!isResizing) return;
+    event.preventDefault(); // Prevent scrolling or other touch-related behaviors
+    const newWidth = calculateNewWidthFromTouch(event, resizableRef, isRTL);
+    setWidth(newWidth);
+  };
 
-    useEffect(() => {
-        if (!resizableRef.current) return;
+  useEffect(() => {
+    let htmlDir = "";
+    if (document) {
+      htmlDir = document.documentElement.getAttribute("dir") || "ltr";
+    }
+    // Determine the direction of the document
+    setIsRTL(htmlDir === "rtl");
+  }, []);
 
-        // Add event listeners for mouse and touch events
-        document.addEventListener("mousemove", handleMouseMove);
-        document.addEventListener("mouseup", handleStopResize);
-        document.addEventListener("touchmove", handleTouchMove, { passive: false });
-        document.addEventListener("touchend", handleStopResize);
+  useEffect(() => {
+    if (!resizableRef.current) return;
 
-        // Cleanup event listeners on unmount
-        return () => {
-            document.removeEventListener("mousemove", handleMouseMove);
-            document.removeEventListener("mouseup", handleStopResize);
-            document.removeEventListener("touchmove", handleTouchMove);
-            document.removeEventListener("touchend", handleStopResize);
-        };
-    }, [isResizing, isRTL]); // Depend on `isRtl` to handle direction changes dynamically
+    // Add event listeners for mouse and touch events
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleStopResize);
+    document.addEventListener("touchmove", handleTouchMove, { passive: false });
+    document.addEventListener("touchend", handleStopResize);
 
-    return {
-        width,
-        isResizing,
-        handleStartResize,
+    // Cleanup event listeners on unmount
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleStopResize);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleStopResize);
     };
-};
+  }, [isResizing, isRTL]); // Depend on `isRtl` to handle direction changes dynamically
 
+  return {
+    width,
+    isResizing,
+    handleStartResize,
+  };
+};