torch-glare 2.1.2 → 2.1.3

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

@@ -9,7 +9,9 @@ export type TreeConfig = {
   orderField?: string
   nodeLabel?: string
   defaultExpanded?: "all" | "roots" | "none"
-  defaultRightPane?: "table" | "details"
+  /** Right-pane mode for the selected tree node. `"details"` is accepted as a
+   *  deprecated alias of `"card"` for backward compatibility. */
+  defaultRightPane?: "table" | "card" | "details"
   dndEnabled?: boolean
 }
 
@@ -51,6 +53,17 @@ export type FieldPreset =
   | { label: string; min?: number; max?: number }
   | { label: string; from?: string; to?: string }
 
+// Palette keys for the Kanban column header pill. Kept in lockstep with
+// `COLUMN_PALETTE` in KanbanView.tsx so consumers can pick a color per status
+// via `FieldConfig.kanbanVariants`.
+export type KanbanColumnColor =
+  | "gray"
+  | "purple"
+  | "orange"
+  | "blue"
+  | "green"
+  | "red"
+
 export type BadgeVariant =
   | "green"
   | "greenLight"
@@ -102,6 +115,16 @@ export type FieldConfig = {
   variants?: Record<string, BadgeVariant>
   defaultVariant?: BadgeVariant
 
+  // Per-status overrides for the Kanban board view. Keys must match
+  // `variants` keys (or any value present in the data). Lets consumers set a
+  // human-friendly column title and pick a column pill color without affecting
+  // the badge color used elsewhere.
+  kanbanVariants?: Record<
+    string,
+    { label?: string; color?: KanbanColumnColor }
+  >
+
+
   variant?: BadgeVariant
   limit?: number
 
@@ -131,6 +154,12 @@ export type FieldConfig = {
   filterable?: boolean
   filterLabel?: string
   filterOptions?: string[] | { label: string; value: string }[]
+  /**
+   * Categorical filter selection mode.
+   * - "multi" (default): checkboxes, multi-select. FilterValue is the array of picked options.
+   * - "single": radios, single-select. FilterValue is a 1-element array.
+   */
+  filterMode?: "single" | "multi"
   presets?: FieldPreset[]
   rangeMin?: number
   rangeMax?: number

package/apps/lib/components/Radio.tsx

@@ -1,9 +1,8 @@
-'use client'
+"use client";
 import { cn } from "../utils/cn";
 import { cva } from "class-variance-authority";
-import * as React from "react"
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
-
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -11,37 +10,35 @@ const RadioGroup = React.forwardRef<
 >(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
+      className={cn("grid gap-0.5", className)}
       {...props}
       ref={ref}
     />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 const Radio = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & { size?: "S" | "M" }
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> & {
+    size?: "S" | "M";
+  }
 >(({ className, size = "S", ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Item
       ref={ref}
-      className={cn(
-        glareRadioStyles({ size }),
-        className
-      )}
+      className={cn(glareRadioStyles({ size }), className)}
       {...props}
     >
       <RadioGroupPrimitive.Indicator className="bg-white rounded-full flex items-center justify-center shrink-0">
         <i className="ri-record-circle-fill text-background-presentation-state-information-primary leading-none shrink-0"></i>
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  )
-})
-Radio.displayName = "Radio"
-
-export { RadioGroup, Radio }
+  );
+});
+Radio.displayName = "Radio";
 
+export { RadioGroup, Radio };
 
 const glareRadioStyles = cva(
   [
@@ -61,6 +58,6 @@ const glareRadioStyles = cva(
         S: ["w-[12px]", "h-[12px] [&_i]:text-[10px] [&_i]:scale-[1.5]"],
         M: ["w-[24px]", "h-[24px] [&_i]:text-[20px] [&_i]:scale-[1.47]"],
       },
-    }
-  }
-);
+    },
+  },
+);

package/apps/lib/components/Switch.tsx

@@ -17,7 +17,9 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block w-[24px] h-[24px] rounded-full bg-background-presentation-switcher-knob shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-[21px] data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block w-[24px] h-[24px] rounded-full bg-background-presentation-switcher-knob shadow-lg ring-0 transition-transform",
+        "data-[state=checked]:translate-x-[21px] data-[state=unchecked]:translate-x-0",
+        "rtl:data-[state=checked]:-translate-x-[21px] rtl:data-[state=unchecked]:translate-x-0"
       )}
     />
   </SwitchPrimitives.Root>

package/apps/lib/components/Table.tsx

@@ -128,7 +128,7 @@ const TableHead = React.forwardRef<
       <th
         ref={headRef}
         className={cn(
-          "relative py-[2px] px-[2px] border-b-[2px]  border-border-presentation-table-header",
+          "relative py-[6px] px-[4px] border-b-[2px]  border-border-presentation-table-header",
         )}
       >
         <div

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

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import {
   forwardRef,
@@ -8,102 +8,121 @@ import {
   useRef,
   useState,
   type ReactNode,
-} from "react"
-import { cn } from "../../utils/cn"
-import type { Themes } from "../../utils/types"
-import { TreeFolderBreadcrumb } from "./TreeFolderBreadcrumb"
-import { TreeFolderRow } from "./TreeFolderRow"
-import { TreeFolderStyles } from "./TreeFolderStyles"
+} from "react";
+import { cn } from "../../utils/cn";
+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"
+} from "./treeFolderUtils";
 import type {
   TreeFolderIconResolver,
   TreeFolderMoveArgs,
   TreeFolderNode,
   TreeFolderVisibleRow,
-} from "./types"
-import { useTreeFolderDnD } from "./useTreeFolderDnD"
+} from "./types";
+import { useTreeFolderDnD } from "./useTreeFolderDnD";
 
 export type TreeFolderProps = {
-  data: TreeFolderNode[]
-  selectedId?: string | null
-  defaultSelectedId?: string | null
-  onSelectionChange?: (id: string | null) => void
-
-  expandedIds?: string[]
-  defaultExpanded?: "all" | "roots" | "none" | string[]
-  onExpandedChange?: (ids: string[]) => void
-
-  dndEnabled?: boolean
-  onMove?: (args: TreeFolderMoveArgs) => void
-  onDataChange?: (next: TreeFolderNode[]) => void
-
-  iconFor?: TreeFolderIconResolver
-
-  title?: string
-  showBreadcrumb?: boolean
-  showHeader?: boolean
-  highlightAncestors?: boolean
-  highlightSubtree?: boolean
-  headerAccessory?: ReactNode
-  emptyState?: ReactNode
-
-  rowHeight?: number
-  indent?: number
+  data: TreeFolderNode[];
+  selectedId?: string | null;
+  defaultSelectedId?: string | null;
+  onSelectionChange?: (id: string | null) => void;
+
+  expandedIds?: string[];
+  defaultExpanded?: "all" | "roots" | "none" | string[];
+  onExpandedChange?: (ids: string[]) => void;
+
+  dndEnabled?: boolean;
+  onMove?: (args: TreeFolderMoveArgs) => void;
+  onDataChange?: (next: TreeFolderNode[]) => void;
+
+  iconFor?: TreeFolderIconResolver;
+
+  title?: string;
+  showBreadcrumb?: boolean;
+  showHeader?: boolean;
+  highlightAncestors?: boolean;
+  highlightSubtree?: boolean;
+  headerAccessory?: ReactNode;
+  emptyState?: ReactNode;
+
+  rowHeight?: number;
+  indent?: number;
   /** Optional. If set, the row strip will be at least this wide (in px) — useful
    *  when you want the band to extend across a wider canvas regardless of content. */
-  contentMinWidth?: number
+  contentMinWidth?: number;
 
-  className?: string
-  theme?: Themes
-}
+  className?: string;
+  theme?: Themes;
+};
 
 export type TreeFolderHandle = {
-  selectId: (id: string | null) => void
-  expandAll: () => void
-  collapseAll: () => void
-  scrollToId: (id: string) => void
-}
+  selectId: (id: string | null) => void;
+  expandAll: () => void;
+  collapseAll: () => void;
+  scrollToId: (id: string) => void;
+};
 
-const ROW_HEIGHT_DEFAULT = 28
-const INDENT_DEFAULT = 14
+const ROW_HEIGHT_DEFAULT = 28;
+const INDENT_DEFAULT = 14;
 
 function collectIds(nodes: TreeFolderNode[], out: string[] = []): string[] {
   for (const n of nodes) {
-    out.push(n.id)
-    if (n.children) collectIds(n.children, out)
+    out.push(n.id);
+    if (n.children) collectIds(n.children, out);
   }
-  return out
+  return out;
 }
 
 function rootIds(nodes: TreeFolderNode[]): string[] {
-  return nodes.map((n) => n.id)
+  return nodes.map((n) => n.id);
 }
 
 function flattenVisible(
   data: TreeFolderNode[],
   expanded: Set<string>,
 ): TreeFolderVisibleRow[] {
-  const out: 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,
   ) => {
     nodes.forEach((node, idx) => {
-      const isInternal = !!(node.children && node.children.length > 0)
-      const isOpen = isInternal && expanded.has(node.id)
-      out.push({ node, level, parentId, childIndex: idx, isOpen, isInternal })
-      if (isOpen && node.children) walk(node.children, level + 1, node.id)
-    })
-  }
-  walk(data, 0, null)
-  return out
+      const isInternal = !!(node.children && node.children.length > 0);
+      const isOpen = isInternal && expanded.has(node.id);
+      const isLastChild = idx === nodes.length - 1;
+      out.push({
+        node,
+        level,
+        parentId,
+        childIndex: idx,
+        isOpen,
+        isInternal,
+        isLastChild,
+        ancestorHasMoreSiblings: ancestorHasMore.slice(),
+      });
+      if (isOpen && node.children) {
+        ancestorHasMore.push(!isLastChild);
+        walk(node.children, level + 1, node.id);
+        ancestorHasMore.pop();
+      }
+    });
+  };
+  walk(data, 0, null);
+  return out;
 }
 
 export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
@@ -123,7 +142,7 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
       title = "Layers",
       showBreadcrumb = true,
       showHeader = true,
-      highlightAncestors = true,
+      highlightAncestors = false,
       highlightSubtree = true,
       headerAccessory,
       emptyState,
@@ -132,104 +151,104 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
       contentMinWidth,
       className,
       theme,
-    } = props
+    } = props;
 
-    const scrollRef = useRef<HTMLDivElement | null>(null)
+    const scrollRef = useRef<HTMLDivElement | null>(null);
 
     // ---- Selection state ----
     const [internalSelected, setInternalSelected] = useState<string | null>(
       defaultSelectedId,
-    )
+    );
     const selectedId =
-      controlledSelected !== undefined ? controlledSelected : internalSelected
-    const isSelectionControlled = controlledSelected !== undefined
+      controlledSelected !== undefined ? controlledSelected : internalSelected;
+    const isSelectionControlled = controlledSelected !== undefined;
 
     // ---- Expansion state ----
     const [internalExpanded, setInternalExpanded] = useState<string[]>(() => {
-      if (Array.isArray(defaultExpanded)) return defaultExpanded
-      if (defaultExpanded === "all") return collectIds(data)
-      if (defaultExpanded === "none") return []
-      return rootIds(data)
-    })
-    const expandedIds = controlledExpanded ?? internalExpanded
-    const isExpansionControlled = controlledExpanded !== undefined
-    const expandedSet = useMemo(() => new Set(expandedIds), [expandedIds])
+      if (Array.isArray(defaultExpanded)) return defaultExpanded;
+      if (defaultExpanded === "all") return collectIds(data);
+      if (defaultExpanded === "none") return [];
+      return rootIds(data);
+    });
+    const expandedIds = controlledExpanded ?? internalExpanded;
+    const isExpansionControlled = controlledExpanded !== undefined;
+    const expandedSet = useMemo(() => new Set(expandedIds), [expandedIds]);
 
     // ---- Visible rows ----
     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)
-      return m
-    }, [visibleRows])
+      const m = new Map<string, TreeFolderVisibleRow>();
+      for (const r of visibleRows) m.set(r.node.id, r);
+      return m;
+    }, [visibleRows]);
 
     // ---- Ancestor + subtree highlight ----
     const ancestorPath = useMemo(
       () => (selectedId ? findPath(data, selectedId) : null),
       [data, selectedId],
-    )
+    );
     const ancestorIdSet = useMemo(
       () => new Set((ancestorPath ?? []).slice(0, -1).map((n) => n.id)),
       [ancestorPath],
-    )
+    );
     const isAncestorFn = useCallback(
       (id: string) => highlightAncestors && ancestorIdSet.has(id),
       [highlightAncestors, ancestorIdSet],
-    )
+    );
 
     const descendantIdSet = useMemo(() => {
-      if (!highlightSubtree || !selectedId) return new Set<string>()
-      const node = findNode(data, selectedId)
-      if (!node) return new Set<string>()
-      return descendantIds(node, false)
-    }, [data, selectedId, highlightSubtree])
+      if (!highlightSubtree || !selectedId) return new Set<string>();
+      const node = findNode(data, selectedId);
+      if (!node) return new Set<string>();
+      return descendantIds(node, false);
+    }, [data, selectedId, highlightSubtree]);
     const isDescendantOfSelected = useCallback(
       (id: string) => descendantIdSet.has(id),
       [descendantIdSet],
-    )
+    );
 
     const breadcrumbItems = useMemo(
       () => (ancestorPath ? toBreadcrumb(ancestorPath) : []),
       [ancestorPath],
-    )
+    );
 
     // ---- Handlers ----
     const handleSelect = useCallback(
       (id: string | null) => {
-        if (!isSelectionControlled) setInternalSelected(id)
-        onSelectionChange?.(id)
+        if (!isSelectionControlled) setInternalSelected(id);
+        onSelectionChange?.(id);
       },
       [isSelectionControlled, onSelectionChange],
-    )
+    );
 
     const handleToggle = useCallback(
       (id: string) => {
         const next = expandedIds.includes(id)
           ? expandedIds.filter((x) => x !== id)
-          : [...expandedIds, id]
-        if (!isExpansionControlled) setInternalExpanded(next)
-        onExpandedChange?.(next)
+          : [...expandedIds, id];
+        if (!isExpansionControlled) setInternalExpanded(next);
+        onExpandedChange?.(next);
       },
       [expandedIds, isExpansionControlled, onExpandedChange],
-    )
+    );
 
     const handleMoveInternal = useCallback(
       (args: TreeFolderMoveArgs) => {
-        onMove?.(args)
-        if (onDataChange) onDataChange(applyMove(data, args))
+        onMove?.(args);
+        if (onDataChange) onDataChange(applyMove(data, args));
       },
       [data, onMove, onDataChange],
-    )
+    );
 
     const scrollToId = useCallback((id: string) => {
       const el = scrollRef.current?.querySelector<HTMLElement>(
         `[data-row-id="${CSS.escape(id)}"]`,
-      )
-      el?.scrollIntoView({ block: "nearest", behavior: "smooth" })
-    }, [])
+      );
+      el?.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }, []);
 
     // ---- DnD ----
     const { dragIds, dropTarget, getRowDragHandlers } = useTreeFolderDnD({
@@ -240,32 +259,32 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
       onMove: handleMoveInternal,
       canDrop: ({ parentId }) => {
         // Honor per-node `droppable: false` on the resolved parent.
-        if (parentId == null) return true
-        const target = findNode(data, parentId)
-        if (!target) return false
-        if (target.disabled || target.droppable === false) return false
-        return true
+        if (parentId == null) return true;
+        const target = findNode(data, parentId);
+        if (!target) return false;
+        if (target.disabled || target.droppable === false) return false;
+        return true;
       },
-    })
-    const dragIdSet = useMemo(() => new Set(dragIds), [dragIds])
+    });
+    const dragIdSet = useMemo(() => new Set(dragIds), [dragIds]);
 
     // ---- Imperative handle ----
     useImperativeHandle(
       ref,
       () => ({
         selectId: (id: string | null) => {
-          if (!isSelectionControlled) setInternalSelected(id)
-          onSelectionChange?.(id)
-          if (id) scrollToId(id)
+          if (!isSelectionControlled) setInternalSelected(id);
+          onSelectionChange?.(id);
+          if (id) scrollToId(id);
         },
         expandAll: () => {
-          const all = collectIds(data)
-          if (!isExpansionControlled) setInternalExpanded(all)
-          onExpandedChange?.(all)
+          const all = collectIds(data);
+          if (!isExpansionControlled) setInternalExpanded(all);
+          onExpandedChange?.(all);
         },
         collapseAll: () => {
-          if (!isExpansionControlled) setInternalExpanded([])
-          onExpandedChange?.([])
+          if (!isExpansionControlled) setInternalExpanded([]);
+          onExpandedChange?.([]);
         },
         scrollToId,
       }),
@@ -277,12 +296,12 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
         onExpandedChange,
         scrollToId,
       ],
-    )
+    );
 
-    const isEmpty = data.length === 0
+    const isEmpty = data.length === 0;
     const stripStyle = contentMinWidth
       ? { minWidth: contentMinWidth }
-      : undefined
+      : undefined;
 
     return (
       <div
@@ -306,8 +325,8 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
             <TreeFolderBreadcrumb
               items={breadcrumbItems}
               onSelect={(id) => {
-                handleSelect(id)
-                scrollToId(id)
+                handleSelect(id);
+                scrollToId(id);
               }}
             />
           </div>
@@ -320,19 +339,20 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
           className="tf-scroll flex-1 min-h-0 overflow-auto"
         >
           {isEmpty ? (
-            emptyState ?? (
+            (emptyState ?? (
               <div className="text-xs text-content-presentation-global-tertiary p-3">
                 Nothing here yet.
               </div>
-            )
+            ))
           ) : (
             <div className="min-w-max" style={stripStyle}>
               {visibleRows.map((row, idx) => {
-                const prevRow = visibleRows[idx - 1]
-                const nextRow = visibleRows[idx + 1]
-                const isSelected = selectedId === row.node.id
-                const isDescendant = isDescendantOfSelected(row.node.id) && !isSelected
-                const inBand = isSelected || isDescendant
+                const prevRow = visibleRows[idx - 1];
+                const nextRow = visibleRows[idx + 1];
+                const isSelected = selectedId === row.node.id;
+                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
                 // node itself or one of its descendants. The Set lookup handles deep nesting.
@@ -340,20 +360,23 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
                   inBand &&
                   !!prevRow &&
                   (prevRow.node.id === selectedId ||
-                    descendantIdSet.has(prevRow.node.id))
+                    descendantIdSet.has(prevRow.node.id));
                 const nextInBand =
                   inBand &&
                   !!nextRow &&
                   (nextRow.node.id === selectedId ||
-                    descendantIdSet.has(nextRow.node.id))
+                    descendantIdSet.has(nextRow.node.id));
 
-                const isDragging = dragIdSet.has(row.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
@@ -376,12 +399,12 @@ export const TreeFolder = forwardRef<TreeFolderHandle, TreeFolderProps>(
                     onToggle={handleToggle}
                     dragHandlers={getRowDragHandlers(row.node.id)}
                   />
-                )
+                );
               })}
             </div>
           )}
         </div>
       </div>
-    )
+    );
   },
-)
+);