torch-glare 2.4.0 → 2.4.1

package/apps/lib/components/TreeDropDown.tsx

@@ -1,69 +1,103 @@
-'use client'
+"use client";
 import { cn } from "../utils/cn";
 import { cva, VariantProps } from "class-variance-authority";
 import { HTMLAttributes, ReactNode, useEffect, useState } from "react";
 
-const TreeDropDownVariants = cva(["cursor-pointer flex px-[6px] h-[40px] gap-2 justify-start items-center w-full",
+const TreeDropDownVariants = cva(
+  [
+    "cursor-pointer flex px-[6px] h-[40px] gap-2 justify-start items-center w-full",
     "text-content-system-global-primary border-l-[2px] rtl:border-r-[2px] border-transparent outline-none",
     "hover:bg-white-alpha-075 hover:border-black-300 hover:text-content-system-action-primary-hover hover:gap-[14px]",
     "rounded-r-[4px] text-start whitespace-nowrap transition-all duration-150 ease-in-out",
-], {
+  ],
+  {
     variants: {
-        variant: {
-            secondary: "",
-            default: ""
-        },
-        active: {
-            true: "hover:gap-[8px]"
-        }
+      variant: {
+        secondary: "",
+        default: "",
+      },
+      active: {
+        true: "hover:gap-[8px]",
+      },
     },
     compoundVariants: [
-        {
-            active: true,
-            variant: "default",
-            className: [
-                "bg-background-system-action-primary-hover border-border-system-action-primary-hover [&_button]:bg-purple-alpha-15 hover:bg-background-system-action-primary-hover hover:border-border-system-action-primary-hover",
-            ]
-        },
-        {
-            active: true,
-            variant: "secondary",
-            className: [
-                "bg-wavy-navy-1000 border-border-system-action-field-hover-selected [&_button]:bg-blue-sparkle-alpha-15 hover:bg-wavy-navy-1000 hover:border-border-system-action-field-hover-selected",
-            ]
-        }
+      {
+        active: true,
+        variant: "default",
+        className: [
+          "bg-background-system-action-primary-hover border-border-system-action-primary-hover [&_button]:bg-purple-alpha-15 hover:bg-background-system-action-primary-hover hover:border-border-system-action-primary-hover",
+        ],
+      },
+      {
+        active: true,
+        variant: "secondary",
+        className: [
+          "bg-wavy-navy-1000 border-border-system-action-field-hover-selected [&_button]:bg-blue-sparkle-alpha-15 hover:bg-wavy-navy-1000 hover:border-border-system-action-field-hover-selected",
+        ],
+      },
     ],
-    defaultVariants: {},// 
-
-});
+    defaultVariants: {}, //
+  },
+);
 
 interface Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof TreeDropDownVariants> {
-    theme?: "dark" | "light" | "default";
-    treeLabel: ReactNode;
-    open?: boolean;
-    variant?: "secondary" | "default";
-    childrenContainerClassName?: string
+  theme?: "dark" | "light" | "default";
+  treeLabel: ReactNode;
+  open?: boolean;
+  variant?: "secondary" | "default";
+  childrenContainerClassName?: string;
 }
 
-export const TreeDropDown = ({ childrenContainerClassName, className, variant = "secondary", treeLabel, open, theme, ...props }: Props) => {
-    const [isActive, setIsActive] = useState(open);
-    useEffect(() => {
-        setIsActive(open)
-    }, [open])
-    return (
-        <div {...props} className={cn("flex h-fit flex-col transition-all ease-in-out duration-500",)}>
-            <div onClick={() => setIsActive(!isActive)} data-theme={theme} className={cn(TreeDropDownVariants({ variant, active: isActive }), className)}>
-                <button className={cn("cursor-pointer outline-none border-none flex-0 leading-0 transition-transform ease-in-out flex justify-center items-center bg-background-system-body-tertiary h-[28px] w-[28px] rounded-full text-[20px] text-content-system-global-primary", { "rotate-180": isActive })}>
-                    <i className={cn("leading-none ri-arrow-down-s-line ")}></i>
-                </button>
-                <div className={cn("text-content-system-global-primary typography-body-medium-medium transition-all ease-in-out duration-100 flex-1 cursor-pointer")}>{treeLabel}</div>
-            </div>
-            <div className={cn("mt-0 pl-[22px] relative overflow-auto scrollbar-hide transition-all duration-500 ease-in-out", {
-                "max-h-[20000px] mt-1": isActive, "max-h-0": !isActive,
-            })}>
-                <span className="h-full w-[1px] bg-border-system-global-primary absolute left-[21px] top-0 rounded-sm z-10" />
-                <div className={cn("h-full flex flex-col gap-1 w-full", childrenContainerClassName)}>{props.children}</div>
-            </div>
+export const TreeDropDown = ({
+  childrenContainerClassName,
+  className,
+  variant = "secondary",
+  treeLabel,
+  open,
+  theme,
+  ...props
+}: Props) => {
+  const [isActive, setIsActive] = useState(open);
+  useEffect(() => {
+    setIsActive(open);
+  }, [open]);
+  return (
+    <div {...props} className={cn("flex h-fit flex-col transition-all ease-in-out duration-500")}>
+      <div
+        onClick={() => setIsActive(!isActive)}
+        data-theme={theme}
+        className={cn(TreeDropDownVariants({ variant, active: isActive }), className)}
+      >
+        <button
+          className={cn(
+            "cursor-pointer outline-none border-none flex-0 leading-0 transition-transform ease-in-out flex justify-center items-center bg-background-system-body-tertiary h-[28px] w-[28px] rounded-full text-[20px] text-content-system-global-primary",
+            { "rotate-180": isActive },
+          )}
+        >
+          <i className={cn("leading-none ri-arrow-down-s-line ")}></i>
+        </button>
+        <div
+          className={cn(
+            "text-content-system-global-primary typography-body-medium-medium transition-all ease-in-out duration-100 flex-1 cursor-pointer",
+          )}
+        >
+          {treeLabel}
+        </div>
+      </div>
+      <div
+        className={cn(
+          "mt-0 pl-[22px] relative overflow-auto scrollbar-hide transition-all duration-500 ease-in-out",
+          {
+            "max-h-[20000px] mt-1": isActive,
+            "max-h-0": !isActive,
+          },
+        )}
+      >
+        <span className="h-full w-[1px] bg-border-system-global-primary absolute left-[21px] top-0 rounded-sm z-10" />
+        <div className={cn("h-full flex flex-col gap-1 w-full", childrenContainerClassName)}>
+          {props.children}
         </div>
-    );
+      </div>
+    </div>
+  );
 };

package/apps/lib/components/TreeFolder/TreeFolder.tsx

@@ -14,13 +14,7 @@ import type { Themes } from "../../utils/types";
 import { TreeFolderBreadcrumb } from "./TreeFolderBreadcrumb";
 import { TreeFolderRow } from "./TreeFolderRow";
 import { TreeFolderStyles } from "./TreeFolderStyles";
-import {
-  applyMove,
-  descendantIds,
-  findNode,
-  findPath,
-  toBreadcrumb,
-} from "./treeFolderUtils";
+import { applyMove, descendantIds, findNode, findPath, toBreadcrumb } from "./treeFolderUtils";
 import type {
   TreeFolderIconResolver,
   TreeFolderMoveArgs,
@@ -85,21 +79,14 @@ function rootIds(nodes: TreeFolderNode[]): string[] {
   return nodes.map((n) => n.id);
 }
 
-function flattenVisible(
-  data: TreeFolderNode[],
-  expanded: Set<string>,
-): TreeFolderVisibleRow[] {
+function flattenVisible(data: TreeFolderNode[], expanded: Set<string>): TreeFolderVisibleRow[] {
   const out: TreeFolderVisibleRow[] = [];
   // `ancestorHasMore` tracks, for each open ancestor depth on the descent
   // path, whether that ancestor still has more siblings to render. We push
   // before descending and pop on the way back up; each row snapshots the
   // current state so its connector gutters know which verticals to draw.
   const ancestorHasMore: boolean[] = [];
-  const walk = (
-    nodes: TreeFolderNode[],
-    level: number,
-    parentId: string | null,
-  ) => {
+  const walk = (nodes: TreeFolderNode[], level: number, parentId: string | null) => {
     nodes.forEach((node, idx) => {
       const isInternal = !!(node.children && node.children.length > 0);
       const isOpen = isInternal && expanded.has(node.id);
@@ -156,11 +143,8 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
     const scrollRef = useRef<HTMLDivElement | null>(null);
 
     // ---- Selection state ----
-    const [internalSelected, setInternalSelected] = useState<string | null>(
-      defaultSelectedId,
-    );
-    const selectedId =
-      controlledSelected !== undefined ? controlledSelected : internalSelected;
+    const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelectedId);
+    const selectedId = controlledSelected !== undefined ? controlledSelected : internalSelected;
     const isSelectionControlled = controlledSelected !== undefined;
 
     // ---- Expansion state ----
@@ -175,10 +159,7 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
     const expandedSet = useMemo(() => new Set(expandedIds), [expandedIds]);
 
     // ---- Visible rows ----
-    const visibleRows = useMemo(
-      () => flattenVisible(data, expandedSet),
-      [data, expandedSet],
-    );
+    const visibleRows = useMemo(() => flattenVisible(data, expandedSet), [data, expandedSet]);
     const rowsById = useMemo(() => {
       const m = new Map<string, TreeFolderVisibleRow>();
       for (const r of visibleRows) m.set(r.node.id, r);
@@ -244,9 +225,7 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
     );
 
     const scrollToId = useCallback((id: string) => {
-      const el = scrollRef.current?.querySelector<HTMLElement>(
-        `[data-row-id="${CSS.escape(id)}"]`,
-      );
+      const el = scrollRef.current?.querySelector<HTMLElement>(`[data-row-id="${CSS.escape(id)}"]`);
       el?.scrollIntoView({ block: "nearest", behavior: "smooth" });
     }, []);
 
@@ -299,9 +278,7 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
     );
 
     const isEmpty = data.length === 0;
-    const stripStyle = contentMinWidth
-      ? { minWidth: contentMinWidth }
-      : undefined;
+    const stripStyle = contentMinWidth ? { minWidth: contentMinWidth } : undefined;
 
     return (
       <div
@@ -333,11 +310,7 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
         )}
 
         <TreeFolderStyles />
-        <div
-          ref={scrollRef}
-          role="tree"
-          className="tf-scroll flex-1 min-h-0 overflow-auto"
-        >
+        <div ref={scrollRef} role="tree" className="tf-scroll flex-1 min-h-0 overflow-auto">
           {isEmpty ? (
             (emptyState ?? (
               <div className="text-xs text-content-presentation-global-tertiary p-3">
@@ -350,8 +323,7 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
                 const prevRow = visibleRows[idx - 1];
                 const nextRow = visibleRows[idx + 1];
                 const isSelected = selectedId === row.node.id;
-                const isDescendant =
-                  isDescendantOfSelected(row.node.id) && !isSelected;
+                const isDescendant = isDescendantOfSelected(row.node.id) && !isSelected;
                 const inBand = isSelected || isDescendant;
 
                 // Neighbour-aware band rounding: a row is "in-band" if it's the selected
@@ -359,24 +331,19 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
                 const prevInBand =
                   inBand &&
                   !!prevRow &&
-                  (prevRow.node.id === selectedId ||
-                    descendantIdSet.has(prevRow.node.id));
+                  (prevRow.node.id === selectedId || descendantIdSet.has(prevRow.node.id));
                 const nextInBand =
                   inBand &&
                   !!nextRow &&
-                  (nextRow.node.id === selectedId ||
-                    descendantIdSet.has(nextRow.node.id));
+                  (nextRow.node.id === selectedId || descendantIdSet.has(nextRow.node.id));
 
                 const isDragging = dragIdSet.has(row.node.id);
                 const isDropTargetInside =
-                  dropTarget?.rowId === row.node.id &&
-                  dropTarget.position === "inside";
+                  dropTarget?.rowId === row.node.id && dropTarget.position === "inside";
                 const isDropBefore =
-                  dropTarget?.rowId === row.node.id &&
-                  dropTarget.position === "before";
+                  dropTarget?.rowId === row.node.id && dropTarget.position === "before";
                 const isDropAfter =
-                  dropTarget?.rowId === row.node.id &&
-                  dropTarget.position === "after";
+                  dropTarget?.rowId === row.node.id && dropTarget.position === "after";
 
                 return (
                   <TreeFolderRow

package/apps/lib/components/TreeFolder/TreeFolderBreadcrumb.tsx

@@ -1,22 +1,17 @@
-"use client"
+"use client";
 
-import { ChevronRight } from "lucide-react"
-import { cn } from "../../utils/cn"
-import type { TreeFolderBreadcrumb as BreadcrumbItems } from "./types"
+import { ChevronRight } from "lucide-react";
+import { cn } from "../../utils/cn";
+import type { TreeFolderBreadcrumb as BreadcrumbItems } from "./types";
 
 type Props = {
-  items: BreadcrumbItems
-  onSelect?: (id: string) => void
-  className?: string
-  maxItems?: number
-}
+  items: BreadcrumbItems;
+  onSelect?: (id: string) => void;
+  className?: string;
+  maxItems?: number;
+};
 
-export function TreeFolderBreadcrumb({
-  items,
-  onSelect,
-  className,
-  maxItems = 4,
-}: Props) {
+export function TreeFolderBreadcrumb({ items, onSelect, className, maxItems = 4 }: Props) {
   if (items.length === 0) {
     return (
       <div
@@ -27,13 +22,13 @@ export function TreeFolderBreadcrumb({
       >
         No selection
       </div>
-    )
+    );
   }
 
   const display =
     items.length > maxItems
       ? [items[0], { id: "__ellipsis", name: "…" }, ...items.slice(-(maxItems - 2))]
-      : items
+      : items;
 
   return (
     <nav
@@ -45,8 +40,8 @@ export function TreeFolderBreadcrumb({
     >
       <ol className="flex items-center gap-1 min-w-0 flex-1">
         {display.map((item, idx) => {
-          const isLast = idx === display.length - 1
-          const isEllipsis = item.id === "__ellipsis"
+          const isLast = idx === display.length - 1;
+          const isEllipsis = item.id === "__ellipsis";
           return (
             <li key={`${item.id}-${idx}`} className="flex items-center gap-1 min-w-0">
               {idx > 0 && (
@@ -72,9 +67,9 @@ export function TreeFolderBreadcrumb({
                 </button>
               )}
             </li>
-          )
+          );
         })}
       </ol>
     </nav>
-  )
+  );
 }

package/apps/lib/components/TreeFolder/TreeFolderRow.tsx

@@ -4,7 +4,7 @@ import { ChevronRight, ChevronDown, GripVertical } from "lucide-react";
 import type { DragEvent } from "react";
 import { cn } from "../../utils/cn";
 import { resolveIcon } from "./icons";
-import type { TreeFolderIconResolver, TreeFolderVisibleRow } from "./types";
+import type { TreeFolderIconResolver, TreeFolderNode, TreeFolderVisibleRow } from "./types";
 
 export type TreeFolderRowDragHandlers = {
   draggable: boolean;
@@ -70,8 +70,7 @@ export function TreeFolderRow({
   // they read as "members of the selected group" without competing with the
   // selection itself. Rows stand alone — no neighbor-aware joining anymore.
   const showSelected = isSelected && !willReceiveDrop;
-  const showChildOfSelected =
-    inSubtreeOfSelected && !isSelected && !willReceiveDrop;
+  const showChildOfSelected = inSubtreeOfSelected && !isSelected && !willReceiveDrop;
   // A row is "in the selection group" if it's the selected node itself or a
   // descendant tinted by it. Neighbor-aware rounding then merges adjacent rows
   // into one continuous pill instead of stacked individual chips.
@@ -102,9 +101,7 @@ export function TreeFolderRow({
     // Token isn't exposed as channels, so Tailwind's /alpha modifier doesn't
     // work on it — paint the descendant tint with the same hex at 30% alpha.
     showChildOfSelected && "bg-[#005ECC]/30",
-    inAncestorChain &&
-      !inGroup &&
-      "bg-background-presentation-state-information-secondary",
+    inAncestorChain && !inGroup && "bg-background-presentation-state-information-secondary",
     willReceiveDrop && "bg-background-presentation-state-information-primary",
   );
 
@@ -155,9 +152,7 @@ export function TreeFolderRow({
           <GripVertical
             className={cn(
               "w-3.5 h-3.5",
-              showSelected
-                ? "text-white/80"
-                : "text-content-presentation-global-tertiary",
+              showSelected ? "text-white/80" : "text-content-presentation-global-tertiary",
             )}
           />
         </span>
@@ -228,9 +223,7 @@ export function TreeFolderRow({
         <span
           className={cn(
             "shrink-0 w-4 h-4 flex items-center justify-center",
-            showSelected
-              ? "text-white/90"
-              : "text-content-presentation-global-tertiary",
+            showSelected ? "text-white/90" : "text-content-presentation-global-tertiary",
           )}
           aria-hidden
         >
@@ -245,9 +238,7 @@ export function TreeFolderRow({
           <span
             className={cn(
               "shrink-0 text-xs tabular-nums",
-              showSelected
-                ? "text-white/80"
-                : "text-content-presentation-global-tertiary",
+              showSelected ? "text-white/80" : "text-content-presentation-global-tertiary",
             )}
           >
             ({countDescendants(node)})
@@ -348,16 +339,14 @@ function TreeConnectors({
   return <>{segments}</>;
 }
 
-function countDescendants(node: {
-  children?: { children?: any[] }[] | null;
-}): number {
+function countDescendants(node: { children?: TreeFolderNode[] | null }): number {
   if (!node.children) return 0;
   let n = 0;
-  const stack: any[] = [...node.children];
+  const stack: TreeFolderNode[] = [...node.children];
   while (stack.length) {
     n++;
     const top = stack.pop();
-    if (top.children) for (const c of top.children) stack.push(c);
+    if (top?.children) for (const c of top.children) stack.push(c);
   }
   return n;
 }

package/apps/lib/components/TreeFolder/TreeFolderStyles.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 /**
  * Component-scoped CSS for TreeFolder. Rendered once by TreeFolder itself so
@@ -47,7 +47,7 @@ const CSS = `
   background: rgba(0, 0, 0, 0.35);
   background-clip: content-box;
 }
-`
+`;
 
 /**
  * Renders a single <style> tag containing TreeFolder's scoped CSS.
@@ -56,5 +56,5 @@ const CSS = `
  * keeps just one DOM node when it can.
  */
 export function TreeFolderStyles() {
-  return <style id="torch-treefolder-styles" dangerouslySetInnerHTML={{ __html: CSS }} />
+  return <style id="torch-treefolder-styles" dangerouslySetInnerHTML={{ __html: CSS }} />;
 }

package/apps/lib/components/TreeFolder/icons.tsx

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import {
   Folder,
@@ -14,14 +14,11 @@ import {
   Link as LinkIcon,
   Square,
   LayoutGrid,
-} from "lucide-react"
-import type { ReactNode } from "react"
-import type { TreeFolderIconResolver, TreeFolderNode } from "./types"
+} from "lucide-react";
+import type { ReactNode } from "react";
+import type { TreeFolderIconResolver, TreeFolderNode } from "./types";
 
-export const defaultIconRegistry: Record<
-  string,
-  (state: { isOpen: boolean }) => ReactNode
-> = {
+export const defaultIconRegistry: Record<string, (state: { isOpen: boolean }) => ReactNode> = {
   folder: ({ isOpen }) =>
     isOpen ? <FolderOpen className="w-3.5 h-3.5" /> : <Folder className="w-3.5 h-3.5" />,
   file: () => <File className="w-3.5 h-3.5" />,
@@ -35,19 +32,19 @@ export const defaultIconRegistry: Record<
   link: () => <LinkIcon className="w-3.5 h-3.5" />,
   section: () => <LayoutGrid className="w-3.5 h-3.5" />,
   container: () => <Square className="w-3.5 h-3.5" />,
-}
+};
 
 export function defaultIconFor(
   node: TreeFolderNode,
   state: { isOpen: boolean; isInternal: boolean; isSelected: boolean },
 ): ReactNode {
-  if (node.icon !== undefined) return node.icon
-  const type = node.type ?? (state.isInternal ? "folder" : "file")
-  const resolver = defaultIconRegistry[type]
-  if (resolver) return resolver({ isOpen: state.isOpen })
+  if (node.icon !== undefined) return node.icon;
+  const type = node.type ?? (state.isInternal ? "folder" : "file");
+  const resolver = defaultIconRegistry[type];
+  if (resolver) return resolver({ isOpen: state.isOpen });
   return state.isInternal
     ? defaultIconRegistry.folder({ isOpen: state.isOpen })
-    : defaultIconRegistry.file({ isOpen: state.isOpen })
+    : defaultIconRegistry.file({ isOpen: state.isOpen });
 }
 
 export function resolveIcon(
@@ -56,8 +53,8 @@ export function resolveIcon(
   state: { isOpen: boolean; isInternal: boolean; isSelected: boolean },
 ): ReactNode {
   if (iconFor) {
-    const custom = iconFor(node, state)
-    if (custom !== undefined && custom !== null) return custom
+    const custom = iconFor(node, state);
+    if (custom !== undefined && custom !== null) return custom;
   }
-  return defaultIconFor(node, state)
+  return defaultIconFor(node, state);
 }

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

@@ -1,10 +1,17 @@
-export { TreeFolder } from "./TreeFolder"
-export type { TreeFolderHandle, TreeFolderProps } from "./TreeFolder"
-export { TreeFolderRow } from "./TreeFolderRow"
-export type { TreeFolderRowProps, TreeFolderRowDragHandlers } from "./TreeFolderRow"
-export { TreeFolderBreadcrumb } from "./TreeFolderBreadcrumb"
-export { defaultIconRegistry, defaultIconFor } from "./icons"
-export { applyMove, findPath, findNode, isAncestor, descendantIds, toBreadcrumb } from "./treeFolderUtils"
+export { TreeFolder } from "./TreeFolder";
+export type { TreeFolderHandle, TreeFolderProps } from "./TreeFolder";
+export { TreeFolderRow } from "./TreeFolderRow";
+export type { TreeFolderRowProps, TreeFolderRowDragHandlers } from "./TreeFolderRow";
+export { TreeFolderBreadcrumb } from "./TreeFolderBreadcrumb";
+export { defaultIconRegistry, defaultIconFor } from "./icons";
+export {
+  applyMove,
+  findPath,
+  findNode,
+  isAncestor,
+  descendantIds,
+  toBreadcrumb,
+} from "./treeFolderUtils";
 export type {
   TreeFolderNode,
   TreeFolderNodeType,
@@ -14,4 +21,4 @@ export type {
   TreeFolderDropPosition,
   TreeFolderDropTarget,
   TreeFolderBreadcrumb as TreeFolderBreadcrumbItems,
-} from "./types"
+} from "./types";