torch-glare 2.5.5 → 2.6.0

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

@@ -1,75 +0,0 @@
-"use client";
-
-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;
-};
-
-export function TreeFolderBreadcrumb({ items, onSelect, className, maxItems = 4 }: Props) {
-  if (items.length === 0) {
-    return (
-      <div
-        className={cn(
-          "px-3 py-1.5 text-xs text-content-presentation-global-tertiary truncate",
-          className,
-        )}
-      >
-        No selection
-      </div>
-    );
-  }
-
-  const display =
-    items.length > maxItems
-      ? [items[0], { id: "__ellipsis", name: "…" }, ...items.slice(-(maxItems - 2))]
-      : items;
-
-  return (
-    <nav
-      aria-label="Tree path"
-      className={cn(
-        "px-3 py-1.5 flex items-center gap-1 text-xs text-content-presentation-global-secondary min-w-0",
-        className,
-      )}
-    >
-      <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";
-          return (
-            <li key={`${item.id}-${idx}`} className="flex items-center gap-1 min-w-0">
-              {idx > 0 && (
-                <ChevronRight className="w-3 h-3 shrink-0 text-content-presentation-global-tertiary" />
-              )}
-              {isEllipsis ? (
-                <span className="text-content-presentation-global-tertiary">…</span>
-              ) : isLast ? (
-                <span
-                  className="truncate text-content-presentation-global-primary font-medium"
-                  title={item.name}
-                >
-                  {item.name}
-                </span>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => onSelect?.(item.id)}
-                  className="truncate hover:text-content-presentation-global-primary"
-                  title={item.name}
-                >
-                  {item.name}
-                </button>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  );
-}

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

@@ -1,354 +0,0 @@
-"use client";
-
-import { ChevronRight, ChevronDown, GripVertical } from "lucide-react";
-import { useDragItem } from "../../hooks/useDragDrop";
-import { cn } from "../../utils/cn";
-import { resolveIcon } from "./icons";
-import type { TreeFolderIconResolver, TreeFolderNode, TreeFolderVisibleRow } from "./types";
-
-export type TreeFolderRowProps = {
-  row: TreeFolderVisibleRow;
-  rowHeight: number;
-  indent: number;
-  iconFor?: TreeFolderIconResolver;
-
-  isSelected: boolean;
-  isAncestor: boolean;
-  isDescendantOfSelected: boolean;
-  /** True when the previous visible row is part of the same selected-subtree band. */
-  isPrevInBand: boolean;
-  /** True when the next visible row is part of the same selected-subtree band. */
-  isNextInBand: boolean;
-
-  isDragging: boolean;
-  isDropTargetInside: boolean;
-  isDropBefore: boolean;
-  isDropAfter: boolean;
-
-  dndEnabled: boolean;
-  onSelect: (id: string | null) => void;
-  onToggle: (id: string) => void;
-};
-
-export function TreeFolderRow({
-  row,
-  rowHeight,
-  indent,
-  iconFor,
-  isSelected,
-  isAncestor,
-  isDescendantOfSelected,
-  isPrevInBand,
-  isNextInBand,
-  isDragging,
-  isDropTargetInside,
-  isDropBefore,
-  isDropAfter,
-  dndEnabled,
-  onSelect,
-  onToggle,
-}: TreeFolderRowProps) {
-  const { node, level, isOpen, isInternal, ancestorHasMoreSiblings } = row;
-
-  const {
-    ref: dragRef,
-    handleProps: dragProps,
-    style: dragStyle,
-  } = useDragItem(node.id, !dndEnabled || Boolean(node.disabled), { follow: false });
-  const data = node;
-  const hasChildren = isInternal;
-
-  const willReceiveDrop = isDropTargetInside && dndEnabled;
-  const inSubtreeOfSelected = isDescendantOfSelected;
-  const inAncestorChain = isAncestor;
-  // Selected row gets the strong fill; direct children get a softer overlay so
-  // 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;
-  // 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.
-  const inGroup = showSelected || showChildOfSelected;
-  const isGroupStart = inGroup && !isPrevInBand;
-  const isGroupEnd = inGroup && !isNextInBand;
-
-  const icon = resolveIcon(iconFor, data, {
-    isOpen,
-    isInternal,
-    isSelected,
-  });
-
-  const outerClassName = cn(
-    "relative w-full min-w-max",
-    isDragging && "opacity-40",
-    data.disabled && "opacity-50 pointer-events-none",
-  );
-
-  const bandClassName = cn(
-    "pointer-events-none absolute inset-y-0 inset-x-[2px] z-0 rounded-md transition-colors duration-100",
-    inGroup && !isGroupStart && "rounded-t-none",
-    inGroup && !isGroupEnd && "rounded-b-none",
-    !willReceiveDrop &&
-      !inGroup &&
-      "group-hover/row:bg-background-presentation-form-field-hover group-active/row:bg-background-presentation-action-hover/20",
-    showSelected && "bg-background-presentation-state-information-primary",
-    // 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",
-    willReceiveDrop && "bg-background-presentation-state-information-primary",
-  );
-
-  const rowClassName = cn(
-    "relative z-10 flex items-center gap-1 py-1 pr-2 cursor-pointer text-sm min-w-max",
-    showSelected && "text-white",
-    willReceiveDrop && "text-white",
-  );
-
-  // Grip occupies a fixed slot at the outer-left edge. `contentStart` is where
-  // the indent-padding origin (depth 0) begins, leaving breathing room between
-  // the grip column and the first connector / chevron.
-  const gripSlotWidth = 16;
-  const gripGutterPad = 6;
-  const contentStart = gripSlotWidth + gripGutterPad; // 22px
-
-  const rowStyle = {
-    paddingInlineStart: contentStart + level * indent,
-    height: rowHeight,
-  };
-
-  const handleRowClick = () => {
-    if (data.disabled) return;
-    onSelect(node.id);
-  };
-
-  // Insert lines for "between" drops (above/below sibling). Inset to the row's
-  // indent so they line up with the new sibling's level.
-  const insertLineInset = contentStart + level * indent;
-
-  return (
-    <div
-      ref={dragRef}
-      data-row-id={node.id}
-      className={cn("select-none group/row", outerClassName)}
-      // The row is the drag surface, not just the grip: that is how this tree has always behaved,
-      // and the 8px threshold is what keeps a click on it still a click.
-      style={{ ...dragStyle, height: rowHeight }}
-      {...dragProps}
-    >
-      <span aria-hidden className={bandClassName} />
-
-      {/* Drag handle sits in a fixed slot at the outer-left of the row so it
-          never collides with the connector verticals — those start to the
-          right of this 16px reserved column. Hidden until row hover. */}
-      {dndEnabled && (
-        <span
-          className="absolute start-1.5 top-0 z-[6] flex h-full w-4 items-center justify-center opacity-0 group-hover/row:opacity-100 transition-opacity duration-150 cursor-grab active:cursor-grabbing"
-          aria-hidden
-        >
-          <GripVertical
-            className={cn(
-              "w-3.5 h-3.5",
-              showSelected ? "text-white/80" : "text-content-presentation-global-tertiary",
-            )}
-          />
-        </span>
-      )}
-
-      {level > 0 && (
-        <div className="pointer-events-none absolute inset-0 z-[5]">
-          <TreeConnectors
-            level={level}
-            indent={indent}
-            rowHeight={rowHeight}
-            contentStart={contentStart}
-            ancestorHasMoreSiblings={ancestorHasMoreSiblings}
-          />
-        </div>
-      )}
-
-      {isDropBefore && (
-        <span
-          aria-hidden
-          className="pointer-events-none absolute -top-px left-0 right-0 z-20 h-0.5 bg-background-presentation-state-information-primary"
-          style={{ marginInlineStart: insertLineInset }}
-        />
-      )}
-      {isDropAfter && (
-        <span
-          aria-hidden
-          className="pointer-events-none absolute -bottom-px left-0 right-0 z-20 h-0.5 bg-background-presentation-state-information-primary"
-          style={{ marginInlineStart: insertLineInset }}
-        />
-      )}
-
-      <div
-        role="treeitem"
-        aria-expanded={isInternal ? isOpen : undefined}
-        aria-selected={isSelected}
-        aria-disabled={data.disabled || undefined}
-        aria-level={level + 1}
-        onClick={handleRowClick}
-        className={rowClassName}
-        style={rowStyle}
-      >
-        {hasChildren ? (
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              onToggle(node.id);
-            }}
-            className={cn(
-              "shrink-0 w-4 h-4 flex items-center justify-center rounded",
-              showSelected
-                ? "text-white/80 hover:text-white"
-                : "text-content-presentation-global-tertiary hover:text-content-presentation-global-primary",
-            )}
-            aria-label={isOpen ? "Collapse" : "Expand"}
-          >
-            {isOpen ? (
-              <ChevronDown className="w-3.5 h-3.5" />
-            ) : (
-              <ChevronRight className="w-3.5 h-3.5" />
-            )}
-          </button>
-        ) : (
-          <span className="shrink-0 w-4 h-4" />
-        )}
-
-        <span
-          className={cn(
-            "shrink-0 w-4 h-4 flex items-center justify-center",
-            showSelected ? "text-white/90" : "text-content-presentation-global-tertiary",
-          )}
-          aria-hidden
-        >
-          {icon}
-        </span>
-
-        <span className="whitespace-nowrap pr-2" title={data.name}>
-          {data.name}
-        </span>
-
-        {/* `meta` has always been part of `TreeFolderNode` but was never painted. It sits after
-            the name, before the collapsed-child count, and only appears when a node supplies it. */}
-        {data.meta != null && <span className="shrink-0 pr-2">{data.meta}</span>}
-
-        {hasChildren && !isOpen && (
-          <span
-            className={cn(
-              "shrink-0 text-xs tabular-nums",
-              showSelected ? "text-white/80" : "text-content-presentation-global-tertiary",
-            )}
-          >
-            ({countDescendants(node)})
-          </span>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Connector lines (T/L bends) aligned to where each ancestor's chevron sits in
- * the row layout, so verticals drop directly from the parent's twisty rather
- * than floating in the indent column. Geometry:
- *
- *   row paddingLeft = 4 + level * indent
- *   row content order = [grip?(16)] [chevron(16)] [icon(16)] [text]
- *
- * So the chevron of a row at depth D is centered at:
- *   chevronX(D) = 4 + D * indent + (dndEnabled ? 16 : 0) + 8
- *
- * A child at depth D+1 hangs its vertical at chevronX(D) and runs a horizontal
- * stub from there out to (paddingLeft - 2) — landing just before the child's
- * own grip/chevron. Last child renders an "L" (vertical stops at midline);
- * other siblings render a "T" (vertical runs full height). Ancestor gutters
- * keep their verticals only when that ancestor still has siblings below.
- */
-function TreeConnectors({
-  level,
-  indent,
-  rowHeight,
-  contentStart,
-  ancestorHasMoreSiblings,
-}: {
-  level: number;
-  indent: number;
-  rowHeight: number;
-  contentStart: number;
-  ancestorHasMoreSiblings: boolean[];
-}) {
-  // Grip handle sits in a fixed outer-left slot, so the chevron column for a
-  // row at depth D is: contentStart + D*indent + chevron-half(8).
-  const chevronX = (depth: number) => contentStart + depth * indent + 8;
-  // Connector color is theme-aware: black/20 on default+light, white/20 on dark.
-  // The dark swap relies on a `data-theme="dark"` ancestor (set by TreeFolder).
-  const lineClass = "bg-black-alpha-20 [[data-theme=dark]_&]:bg-white-alpha-20";
-  const segments: React.ReactNode[] = [];
-
-  // Ancestor verticals: full-height line at each ancestor's chevron column,
-  // skipped when the ancestor at that depth has no more siblings below.
-  // ancestorHasMoreSiblings[d] === "ancestor at depth d still has siblings
-  // below this row," so it controls whether to draw the vertical in that
-  // ancestor's chevron gutter (chevronX(d)).
-  for (let d = 0; d < level - 1; d++) {
-    if (!ancestorHasMoreSiblings[d]) continue;
-    segments.push(
-      <span
-        key={`v-${d}`}
-        aria-hidden
-        className={cn("pointer-events-none absolute top-0 bottom-0 w-px", lineClass)}
-        style={{ insetInlineStart: chevronX(d) }}
-      />,
-    );
-  }
-
-  // Parent's gutter (depth = level - 1). T or L vertical, plus horizontal stub
-  // landing just before this row's own grip/chevron starts.
-  const parentDepth = level - 1;
-  const parentX = chevronX(parentDepth);
-  const midY = rowHeight / 2;
-  const ownContentX = contentStart + level * indent + 2; // extend 4px further toward the row content
-
-  segments.push(
-    <span
-      key="v-own"
-      aria-hidden
-      className={cn("pointer-events-none absolute w-px", lineClass)}
-      style={{
-        insetInlineStart: parentX,
-        top: 0,
-        height: "100%",
-      }}
-    />,
-  );
-  segments.push(
-    <span
-      key="h-own"
-      aria-hidden
-      className={cn("pointer-events-none absolute h-px", lineClass)}
-      style={{
-        insetInlineStart: parentX,
-        top: midY,
-        width: Math.max(4, ownContentX - parentX),
-      }}
-    />,
-  );
-
-  return <>{segments}</>;
-}
-
-function countDescendants(node: { children?: TreeFolderNode[] | null }): number {
-  if (!node.children) return 0;
-  let n = 0;
-  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);
-  }
-  return n;
-}

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

@@ -1,60 +0,0 @@
-"use client";
-
-/**
- * Component-scoped CSS for TreeFolder. Rendered once by TreeFolder itself so
- * the styles ship with the component (no globals.css required by consumers).
- *
- * Why a <style> tag instead of a CSS import:
- * - Some consumers may not run a CSS pipeline that picks up imports from
- *   node_modules.
- * - The styles target pseudo-elements (::-webkit-scrollbar-*) that Tailwind
- *   can't express without a plugin, and CSS-in-JS libraries would add a dep.
- * - Inlining keeps the public package zero-config.
- *
- * The rules are scoped to `.tf-scroll`, which only TreeFolder applies — no
- * risk of leaking to other elements on the page.
- */
-const CSS = `
-.tf-scroll {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
-}
-.tf-scroll::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
-.tf-scroll::-webkit-scrollbar-track {
-  background: transparent;
-}
-.tf-scroll::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.18);
-  border: 2px solid transparent;
-  background-clip: content-box;
-  border-radius: 999px;
-}
-.tf-scroll::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
-  background-clip: content-box;
-}
-.tf-scroll::-webkit-scrollbar-corner {
-  background: transparent;
-}
-[data-theme="light"] .tf-scroll::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.22);
-  background-clip: content-box;
-}
-[data-theme="light"] .tf-scroll::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.35);
-  background-clip: content-box;
-}
-`;
-
-/**
- * Renders a single <style> tag containing TreeFolder's scoped CSS.
- * Mounting multiple TreeFolder instances is fine — browsers deduplicate
- * identical inline stylesheets; we additionally key on a known id so React
- * keeps just one DOM node when it can.
- */
-export function TreeFolderStyles() {
-  return <style id="torch-treefolder-styles" dangerouslySetInnerHTML={{ __html: CSS }} />;
-}

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

@@ -1,60 +0,0 @@
-"use client";
-
-import {
-  Folder,
-  FolderOpen,
-  File,
-  Frame,
-  Group,
-  Component,
-  Box,
-  Type,
-  Image as ImageIcon,
-  Spline,
-  Link as LinkIcon,
-  Square,
-  LayoutGrid,
-} from "lucide-react";
-import type { ReactNode } from "react";
-import type { TreeFolderIconResolver, TreeFolderNode } from "./types";
-
-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" />,
-  frame: () => <Frame className="w-3.5 h-3.5" />,
-  group: () => <Group className="w-3.5 h-3.5" />,
-  component: () => <Component className="w-3.5 h-3.5" />,
-  instance: () => <Box className="w-3.5 h-3.5" />,
-  text: () => <Type className="w-3.5 h-3.5" />,
-  image: () => <ImageIcon className="w-3.5 h-3.5" />,
-  vector: () => <Spline className="w-3.5 h-3.5" />,
-  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 });
-  return state.isInternal
-    ? defaultIconRegistry.folder({ isOpen: state.isOpen })
-    : defaultIconRegistry.file({ isOpen: state.isOpen });
-}
-
-export function resolveIcon(
-  iconFor: TreeFolderIconResolver | undefined,
-  node: TreeFolderNode,
-  state: { isOpen: boolean; isInternal: boolean; isSelected: boolean },
-): ReactNode {
-  if (iconFor) {
-    const custom = iconFor(node, state);
-    if (custom !== undefined && custom !== null) return custom;
-  }
-  return defaultIconFor(node, state);
-}

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

@@ -1,24 +0,0 @@
-export { TreeFolder } from "./TreeFolder";
-export type { TreeFolderHandle, TreeFolderProps } from "./TreeFolder";
-export { TreeFolderRow } from "./TreeFolderRow";
-export type { TreeFolderRowProps } from "./TreeFolderRow";
-export { TreeFolderBreadcrumb } from "./TreeFolderBreadcrumb";
-export { defaultIconRegistry, defaultIconFor } from "./icons";
-export {
-  applyMove,
-  findPath,
-  findNode,
-  isAncestor,
-  descendantIds,
-  toBreadcrumb,
-} from "./treeFolderUtils";
-export type {
-  TreeFolderNode,
-  TreeFolderNodeType,
-  TreeFolderMoveArgs,
-  TreeFolderIconResolver,
-  TreeFolderVisibleRow,
-  TreeFolderDropPosition,
-  TreeFolderDropTarget,
-  TreeFolderBreadcrumb as TreeFolderBreadcrumbItems,
-} from "./types";

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

@@ -1,109 +0,0 @@
-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;
-  }
-  return null;
-}
-
-function walkPath(
-  node: TreeFolderNode,
-  id: string,
-  trail: TreeFolderNode[],
-): TreeFolderNode[] | null {
-  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;
-    }
-  }
-  return null;
-}
-
-export function toBreadcrumb(path: TreeFolderNode[]): TreeFolderBreadcrumb {
-  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.children) {
-      const inChild = findNode(root.children, id);
-      if (inChild) return inChild;
-    }
-  }
-  return null;
-}
-
-export function isAncestor(parent: TreeFolderNode, id: string): boolean {
-  if (parent.id === id) return true;
-  if (!parent.children) return false;
-  for (const c of parent.children) {
-    if (isAncestor(c, id)) return true;
-  }
-  return false;
-}
-
-export function descendantIds(node: TreeFolderNode, includeSelf = false): Set<string> {
-  const out = new Set<string>();
-  if (includeSelf) out.add(node.id);
-  const walk = (n: TreeFolderNode) => {
-    if (!n.children) return;
-    for (const c of n.children) {
-      out.add(c.id);
-      walk(c);
-    }
-  };
-  walk(node);
-  return out;
-}
-
-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 extracted: TreeFolderNode[] = [];
-
-  const extract = (records: TreeFolderNode[]): TreeFolderNode[] =>
-    records
-      .map((n) => {
-        const next: TreeFolderNode = n.children ? { ...n, children: extract(n.children) } : n;
-        if (dragSet.has(n.id)) {
-          extracted.push(next);
-          return null;
-        }
-        return next;
-      })
-      .filter((n): n is TreeFolderNode => n !== null);
-
-  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 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 };
-      }
-      if (n.children) return { ...n, children: insert(n.children) };
-      return n;
-    });
-
-  return insert(pruned);
-}