torch-glare 2.4.0 → 2.4.1

package/apps/lib/components/TreeFolder/treeFolderUtils.ts

@@ -1,11 +1,11 @@
-import type { TreeFolderBreadcrumb, TreeFolderMoveArgs, TreeFolderNode } from "./types"
+import type { TreeFolderBreadcrumb, TreeFolderMoveArgs, TreeFolderNode } from "./types";
 
 export function findPath(roots: TreeFolderNode[], id: string): TreeFolderNode[] | null {
   for (const root of roots) {
-    const trail = walkPath(root, id, [])
-    if (trail) return trail
+    const trail = walkPath(root, id, []);
+    if (trail) return trail;
   }
-  return null
+  return null;
 }
 
 function walkPath(
@@ -13,102 +13,97 @@ function walkPath(
   id: string,
   trail: TreeFolderNode[],
 ): TreeFolderNode[] | null {
-  const next = [...trail, node]
-  if (node.id === id) return next
+  const next = [...trail, node];
+  if (node.id === id) return next;
   if (node.children) {
     for (const c of node.children) {
-      const found = walkPath(c, id, next)
-      if (found) return found
+      const found = walkPath(c, id, next);
+      if (found) return found;
     }
   }
-  return null
+  return null;
 }
 
 export function toBreadcrumb(path: TreeFolderNode[]): TreeFolderBreadcrumb {
-  return path.map((n) => ({ id: n.id, name: n.name }))
+  return path.map((n) => ({ id: n.id, name: n.name }));
 }
 
 export function findNode(roots: TreeFolderNode[], id: string): TreeFolderNode | null {
   for (const root of roots) {
-    if (root.id === id) return root
+    if (root.id === id) return root;
     if (root.children) {
-      const inChild = findNode(root.children, id)
-      if (inChild) return inChild
+      const inChild = findNode(root.children, id);
+      if (inChild) return inChild;
     }
   }
-  return null
+  return null;
 }
 
 export function isAncestor(parent: TreeFolderNode, id: string): boolean {
-  if (parent.id === id) return true
-  if (!parent.children) return false
+  if (parent.id === id) return true;
+  if (!parent.children) return false;
   for (const c of parent.children) {
-    if (isAncestor(c, id)) return true
+    if (isAncestor(c, id)) return true;
   }
-  return false
+  return false;
 }
 
 export function descendantIds(node: TreeFolderNode, includeSelf = false): Set<string> {
-  const out = new Set<string>()
-  if (includeSelf) out.add(node.id)
+  const out = new Set<string>();
+  if (includeSelf) out.add(node.id);
   const walk = (n: TreeFolderNode) => {
-    if (!n.children) return
+    if (!n.children) return;
     for (const c of n.children) {
-      out.add(c.id)
-      walk(c)
+      out.add(c.id);
+      walk(c);
     }
-  }
-  walk(node)
-  return out
+  };
+  walk(node);
+  return out;
 }
 
-export function applyMove(
-  roots: TreeFolderNode[],
-  args: TreeFolderMoveArgs,
-): TreeFolderNode[] {
-  const dragSet = new Set(args.dragIds)
+export function applyMove(roots: TreeFolderNode[], args: TreeFolderMoveArgs): TreeFolderNode[] {
+  const dragSet = new Set(args.dragIds);
 
   if (args.parentId) {
     for (const id of args.dragIds) {
-      const node = findNode(roots, id)
-      if (node && isAncestor(node, args.parentId)) return roots
+      const node = findNode(roots, id);
+      if (node && isAncestor(node, args.parentId)) return roots;
     }
   }
 
-  const extracted: TreeFolderNode[] = []
+  const extracted: TreeFolderNode[] = [];
 
   const extract = (records: TreeFolderNode[]): TreeFolderNode[] =>
     records
       .map((n) => {
-        const next: TreeFolderNode = n.children
-          ? { ...n, children: extract(n.children) }
-          : n
+        const next: TreeFolderNode = n.children ? { ...n, children: extract(n.children) } : n;
         if (dragSet.has(n.id)) {
-          extracted.push(next)
-          return null
+          extracted.push(next);
+          return null;
         }
-        return next
+        return next;
       })
-      .filter((n): n is TreeFolderNode => n !== null)
+      .filter((n): n is TreeFolderNode => n !== null);
 
-  const pruned = extract(roots)
+  const pruned = extract(roots);
 
   if (args.parentId == null) {
-    const at = Math.max(0, Math.min(args.index, pruned.length))
-    return [...pruned.slice(0, at), ...extracted, ...pruned.slice(at)]
+    const at = Math.max(0, Math.min(args.index, pruned.length));
+    return [...pruned.slice(0, at), ...extracted, ...pruned.slice(at)];
   }
 
   const insert = (records: TreeFolderNode[]): TreeFolderNode[] =>
     records.map((n) => {
       if (n.id === args.parentId) {
-        const kids = n.children ? [...n.children] : []
-        const at = Math.max(0, Math.min(args.index, kids.length))
-        kids.splice(at, 0, ...extracted)
-        return { ...n, children: kids }
+        const kids = n.children ? [...n.children] : [];
+        const at = Math.max(0, Math.min(args.index, kids.length));
+        kids.splice(at, 0, ...extracted);
+        return { ...n, children: kids };
       }
-      if (n.children) return { ...n, children: insert(n.children) }
-      return n
-    })
+      if (n.children) return { ...n, children: insert(n.children) };
+      return n;
+    });
 
-  return insert(pruned)
+  return insert(pruned);
 }

package/apps/lib/components/TreeFolder/types.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react"
+import type { ReactNode } from "react";
 
 export type TreeFolderNodeType =
   | "folder"
@@ -13,49 +13,49 @@ export type TreeFolderNodeType =
   | "link"
   | "section"
   | "container"
-  | (string & {})
+  | (string & Record<never, never>);
 
 export type TreeFolderNode = {
-  id: string
-  name: string
-  type?: TreeFolderNodeType
-  icon?: ReactNode
-  meta?: ReactNode
-  disabled?: boolean
-  draggable?: boolean
-  droppable?: boolean
-  data?: unknown
-  children?: TreeFolderNode[]
-}
+  id: string;
+  name: string;
+  type?: TreeFolderNodeType;
+  icon?: ReactNode;
+  meta?: ReactNode;
+  disabled?: boolean;
+  draggable?: boolean;
+  droppable?: boolean;
+  data?: unknown;
+  children?: TreeFolderNode[];
+};
 
 export type TreeFolderMoveArgs = {
-  dragIds: string[]
-  parentId: string | null
-  index: number
-}
+  dragIds: string[];
+  parentId: string | null;
+  index: number;
+};
 
 export type TreeFolderIconResolver = (
   node: TreeFolderNode,
   state: { isOpen: boolean; isInternal: boolean; isSelected: boolean },
-) => ReactNode
+) => ReactNode;
 
-export type TreeFolderBreadcrumb = Array<{ id: string; name: string }>
+export type TreeFolderBreadcrumb = Array<{ id: string; name: string }>;
 
 // ---------------------------------------------------------------------------
 // Visible-row + DnD primitives.
 // ---------------------------------------------------------------------------
 
 export type TreeFolderVisibleRow = {
-  node: TreeFolderNode
-  level: number
+  node: TreeFolderNode;
+  level: number;
   /** Resolved parent id (null for roots). */
-  parentId: string | null
+  parentId: string | null;
   /** Position of this node among its siblings in the source tree (0-based). */
-  childIndex: number
+  childIndex: number;
   /** True when the node is internal AND open. */
-  isOpen: boolean
+  isOpen: boolean;
   /** True for internal nodes (any node with non-empty children). */
-  isInternal: boolean
+  isInternal: boolean;
   /**
    * Connector-line geometry. `isLastChild` toggles the row's own bend between L
    * (last) and T (non-last). `ancestorHasMoreSiblings[d]` is true when the
@@ -63,15 +63,15 @@ export type TreeFolderVisibleRow = {
    * controls whether the vertical guide renders in that ancestor's gutter.
    * Length === `level`.
    */
-  isLastChild: boolean
-  ancestorHasMoreSiblings: boolean[]
-}
+  isLastChild: boolean;
+  ancestorHasMoreSiblings: boolean[];
+};
 
 /** Where the pointer is dropping relative to the hovered row. */
-export type TreeFolderDropPosition = "before" | "after" | "inside"
+export type TreeFolderDropPosition = "before" | "after" | "inside";
 
 export type TreeFolderDropTarget = {
   /** The id whose `parentId` the drop will resolve to. */
-  rowId: string
-  position: TreeFolderDropPosition
-}
+  rowId: string;
+  position: TreeFolderDropPosition;
+};

package/apps/lib/components/TreeFolder/useTreeFolderDnD.ts

@@ -1,50 +1,46 @@
-"use client"
+"use client";
 
-import { useCallback, useEffect, useRef, useState } from "react"
-import { isAncestor } from "./treeFolderUtils"
+import { useCallback, useEffect, useRef, useState } from "react";
+import { isAncestor } from "./treeFolderUtils";
 import type {
   TreeFolderDropPosition,
   TreeFolderDropTarget,
   TreeFolderMoveArgs,
   TreeFolderNode,
   TreeFolderVisibleRow,
-} from "./types"
+} from "./types";
 
-type RowLookup = Map<string, TreeFolderVisibleRow>
+type RowLookup = Map<string, TreeFolderVisibleRow>;
 
-const SCROLL_EDGE_PX = 32
-const SCROLL_SPEED_PX_PER_FRAME = 8
-const DRAG_DATA_MIME = "application/x-treefolder-ids"
+const SCROLL_EDGE_PX = 32;
+const SCROLL_SPEED_PX_PER_FRAME = 8;
+const DRAG_DATA_MIME = "application/x-treefolder-ids";
 
 export type UseTreeFolderDnDOptions = {
-  data: TreeFolderNode[]
-  rowsById: RowLookup
-  scrollContainerRef: React.RefObject<HTMLDivElement | null>
-  enabled: boolean
-  onMove?: (args: TreeFolderMoveArgs) => void
+  data: TreeFolderNode[];
+  rowsById: RowLookup;
+  scrollContainerRef: React.RefObject<HTMLDivElement | null>;
+  enabled: boolean;
+  onMove?: (args: TreeFolderMoveArgs) => void;
   /**
    * Predicate. Return false to forbid the drop. Defaults to allow except for
    * dropping a node into itself or a descendant.
    */
-  canDrop?: (args: {
-    dragIds: string[]
-    parentId: string | null
-    index: number
-  }) => boolean
-}
+  canDrop?: (args: { dragIds: string[]; parentId: string | null; index: number }) => boolean;
+};
 
 export type UseTreeFolderDnDResult = {
-  dragIds: string[]
-  dropTarget: TreeFolderDropTarget | null
+  dragIds: string[];
+  dropTarget: TreeFolderDropTarget | null;
   getRowDragHandlers: (rowId: string) => {
-    draggable: boolean
-    onDragStart: (e: React.DragEvent<HTMLElement>) => void
-    onDragEnd: (e: React.DragEvent<HTMLElement>) => void
-    onDragOver: (e: React.DragEvent<HTMLElement>) => void
-    onDragLeave: (e: React.DragEvent<HTMLElement>) => void
-    onDrop: (e: React.DragEvent<HTMLElement>) => void
-  }
-}
+    draggable: boolean;
+    onDragStart: (e: React.DragEvent<HTMLElement>) => void;
+    onDragEnd: (e: React.DragEvent<HTMLElement>) => void;
+    onDragOver: (e: React.DragEvent<HTMLElement>) => void;
+    onDragLeave: (e: React.DragEvent<HTMLElement>) => void;
+    onDrop: (e: React.DragEvent<HTMLElement>) => void;
+  };
+};
 
 export function useTreeFolderDnD({
   data,
@@ -54,108 +50,108 @@ export function useTreeFolderDnD({
   onMove,
   canDrop,
 }: UseTreeFolderDnDOptions): UseTreeFolderDnDResult {
-  const [dragIds, setDragIds] = useState<string[]>([])
-  const [dropTarget, setDropTarget] = useState<TreeFolderDropTarget | null>(null)
+  const [dragIds, setDragIds] = useState<string[]>([]);
+  const [dropTarget, setDropTarget] = useState<TreeFolderDropTarget | null>(null);
 
   // Auto-scroll loop while the user is dragging near a container edge.
-  const autoScrollDeltaRef = useRef(0)
-  const autoScrollRafRef = useRef<number | null>(null)
+  const autoScrollDeltaRef = useRef(0);
+  const autoScrollRafRef = useRef<number | null>(null);
 
   const stopAutoScroll = useCallback(() => {
-    autoScrollDeltaRef.current = 0
+    autoScrollDeltaRef.current = 0;
     if (autoScrollRafRef.current != null) {
-      cancelAnimationFrame(autoScrollRafRef.current)
-      autoScrollRafRef.current = null
+      cancelAnimationFrame(autoScrollRafRef.current);
+      autoScrollRafRef.current = null;
     }
-  }, [])
+  }, []);
 
   const tickAutoScroll = useCallback(() => {
-    const el = scrollContainerRef.current
-    const delta = autoScrollDeltaRef.current
+    const el = scrollContainerRef.current;
+    const delta = autoScrollDeltaRef.current;
     if (!el || delta === 0) {
-      autoScrollRafRef.current = null
-      return
+      autoScrollRafRef.current = null;
+      return;
     }
-    el.scrollTop += delta
-    autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll)
-  }, [scrollContainerRef])
+    el.scrollTop += delta;
+    autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
+  }, [scrollContainerRef]);
 
   const maybeAutoScroll = useCallback(
     (clientY: number) => {
-      const el = scrollContainerRef.current
-      if (!el) return
-      const rect = el.getBoundingClientRect()
-      let delta = 0
-      if (clientY - rect.top < SCROLL_EDGE_PX) delta = -SCROLL_SPEED_PX_PER_FRAME
-      else if (rect.bottom - clientY < SCROLL_EDGE_PX) delta = SCROLL_SPEED_PX_PER_FRAME
-      autoScrollDeltaRef.current = delta
+      const el = scrollContainerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      let delta = 0;
+      if (clientY - rect.top < SCROLL_EDGE_PX) delta = -SCROLL_SPEED_PX_PER_FRAME;
+      else if (rect.bottom - clientY < SCROLL_EDGE_PX) delta = SCROLL_SPEED_PX_PER_FRAME;
+      autoScrollDeltaRef.current = delta;
       if (delta !== 0 && autoScrollRafRef.current == null) {
-        autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll)
+        autoScrollRafRef.current = requestAnimationFrame(tickAutoScroll);
       } else if (delta === 0) {
-        stopAutoScroll()
+        stopAutoScroll();
       }
     },
     [scrollContainerRef, stopAutoScroll, tickAutoScroll],
-  )
+  );
 
-  useEffect(() => stopAutoScroll, [stopAutoScroll])
+  useEffect(() => stopAutoScroll, [stopAutoScroll]);
 
   const computePosition = useCallback(
     (target: HTMLElement, clientY: number, isInternal: boolean): TreeFolderDropPosition => {
-      const rect = target.getBoundingClientRect()
-      const offset = clientY - rect.top
-      const ratio = offset / rect.height
+      const rect = target.getBoundingClientRect();
+      const offset = clientY - rect.top;
+      const ratio = offset / rect.height;
       // Leaves can't accept "inside" drops — squash that zone into before/after.
-      if (!isInternal) return ratio < 0.5 ? "before" : "after"
-      if (ratio < 0.25) return "before"
-      if (ratio > 0.75) return "after"
-      return "inside"
+      if (!isInternal) return ratio < 0.5 ? "before" : "after";
+      if (ratio < 0.25) return "before";
+      if (ratio > 0.75) return "after";
+      return "inside";
     },
     [],
-  )
+  );
 
   const resolveMoveArgs = useCallback(
     (drag: string[], drop: TreeFolderDropTarget): TreeFolderMoveArgs | null => {
-      const targetRow = rowsById.get(drop.rowId)
-      if (!targetRow) return null
+      const targetRow = rowsById.get(drop.rowId);
+      if (!targetRow) return null;
 
-      let parentId: string | null
-      let index: number
+      let parentId: string | null;
+      let index: number;
 
       if (drop.position === "inside") {
-        parentId = targetRow.node.id
+        parentId = targetRow.node.id;
         // Drop at the end of the target's children.
-        index = targetRow.node.children?.length ?? 0
+        index = targetRow.node.children?.length ?? 0;
       } else {
-        parentId = targetRow.parentId
-        index = drop.position === "before" ? targetRow.childIndex : targetRow.childIndex + 1
+        parentId = targetRow.parentId;
+        index = drop.position === "before" ? targetRow.childIndex : targetRow.childIndex + 1;
       }
 
       // Reject: dropping into self or any descendant.
       for (const id of drag) {
-        const node = rowsById.get(id)?.node
-        if (!node) continue
-        if (parentId && (node.id === parentId || isAncestor(node, parentId))) return null
+        const node = rowsById.get(id)?.node;
+        if (!node) continue;
+        if (parentId && (node.id === parentId || isAncestor(node, parentId))) return null;
       }
 
-      if (canDrop && !canDrop({ dragIds: drag, parentId, index })) return null
+      if (canDrop && !canDrop({ dragIds: drag, parentId, index })) return null;
 
       // No-op safety: skipping the equivalent of "drop where you already are".
       if (drag.length === 1) {
-        const onlyDrag = rowsById.get(drag[0])
+        const onlyDrag = rowsById.get(drag[0]);
         if (
           onlyDrag &&
           onlyDrag.parentId === parentId &&
           (onlyDrag.childIndex === index || onlyDrag.childIndex + 1 === index)
         ) {
-          return null
+          return null;
         }
       }
 
-      return { dragIds: drag, parentId, index }
+      return { dragIds: drag, parentId, index };
     },
     [rowsById, canDrop],
-  )
+  );
 
   const getRowDragHandlers = useCallback(
     (rowId: string) => {
@@ -167,77 +163,75 @@ export function useTreeFolderDnD({
           onDragOver: () => {},
           onDragLeave: () => {},
           onDrop: () => {},
-        }
+        };
       }
       return {
         draggable: true,
         onDragStart: (e: React.DragEvent<HTMLElement>) => {
-          const ids = [rowId]
-          setDragIds(ids)
-          e.dataTransfer.effectAllowed = "move"
+          const ids = [rowId];
+          setDragIds(ids);
+          e.dataTransfer.effectAllowed = "move";
           try {
-            e.dataTransfer.setData(DRAG_DATA_MIME, ids.join(","))
+            e.dataTransfer.setData(DRAG_DATA_MIME, ids.join(","));
             // Required for Firefox to initiate the drag at all.
-            e.dataTransfer.setData("text/plain", ids.join(","))
+            e.dataTransfer.setData("text/plain", ids.join(","));
           } catch {
             // setData can throw in some sandboxed contexts; ignore.
           }
         },
         onDragEnd: () => {
-          setDragIds([])
-          setDropTarget(null)
-          stopAutoScroll()
+          setDragIds([]);
+          setDropTarget(null);
+          stopAutoScroll();
         },
         onDragOver: (e: React.DragEvent<HTMLElement>) => {
-          if (dragIds.length === 0) return
+          if (dragIds.length === 0) return;
           // Reject self-drops upfront so the cursor reflects "no drop" outside the tree.
           if (dragIds.includes(rowId)) {
-            e.dataTransfer.dropEffect = "none"
-            return
+            e.dataTransfer.dropEffect = "none";
+            return;
           }
-          const row = rowsById.get(rowId)
-          if (!row) return
+          const row = rowsById.get(rowId);
+          if (!row) return;
           // Reject dropping onto a descendant of any dragged node.
           for (const dragId of dragIds) {
-            const dragNode = rowsById.get(dragId)?.node
+            const dragNode = rowsById.get(dragId)?.node;
             if (dragNode && isAncestor(dragNode, rowId)) {
-              e.dataTransfer.dropEffect = "none"
-              return
+              e.dataTransfer.dropEffect = "none";
+              return;
             }
           }
-          e.preventDefault()
-          e.dataTransfer.dropEffect = "move"
-          const position = computePosition(e.currentTarget, e.clientY, row.isInternal)
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+          const position = computePosition(e.currentTarget, e.clientY, row.isInternal);
           // Only setState when something actually changed (avoids re-render storms).
           setDropTarget((prev) =>
-            prev && prev.rowId === rowId && prev.position === position
-              ? prev
-              : { rowId, position },
-          )
-          maybeAutoScroll(e.clientY)
+            prev && prev.rowId === rowId && prev.position === position ? prev : { rowId, position },
+          );
+          maybeAutoScroll(e.clientY);
         },
         onDragLeave: () => {
           // No-op: onDragOver on the next row will overwrite dropTarget. Clearing
           // here would flicker the indicator during normal row-to-row hovering.
         },
         onDrop: (e: React.DragEvent<HTMLElement>) => {
-          if (dragIds.length === 0) return
-          e.preventDefault()
-          const row = rowsById.get(rowId)
+          if (dragIds.length === 0) return;
+          e.preventDefault();
+          const row = rowsById.get(rowId);
           if (!row) {
-            setDragIds([])
-            setDropTarget(null)
-            stopAutoScroll()
-            return
+            setDragIds([]);
+            setDropTarget(null);
+            stopAutoScroll();
+            return;
           }
-          const position = computePosition(e.currentTarget, e.clientY, row.isInternal)
-          const moveArgs = resolveMoveArgs(dragIds, { rowId, position })
-          if (moveArgs) onMove?.(moveArgs)
-          setDragIds([])
-          setDropTarget(null)
-          stopAutoScroll()
+          const position = computePosition(e.currentTarget, e.clientY, row.isInternal);
+          const moveArgs = resolveMoveArgs(dragIds, { rowId, position });
+          if (moveArgs) onMove?.(moveArgs);
+          setDragIds([]);
+          setDropTarget(null);
+          stopAutoScroll();
         },
-      }
+      };
     },
     [
       enabled,
@@ -249,13 +243,13 @@ export function useTreeFolderDnD({
       maybeAutoScroll,
       stopAutoScroll,
     ],
-  )
+  );
 
   // If the data tree changes mid-drag, clear stale targets.
   useEffect(() => {
-    if (dragIds.length === 0) return
-    setDropTarget((prev) => (prev && rowsById.has(prev.rowId) ? prev : null))
-  }, [data, rowsById, dragIds.length])
+    if (dragIds.length === 0) return;
+    setDropTarget((prev) => (prev && rowsById.has(prev.rowId) ? prev : null));
+  }, [data, rowsById, dragIds.length]);
 
-  return { dragIds, dropTarget, getRowDragHandlers }
+  return { dragIds, dropTarget, getRowDragHandlers };
 }