torch-glare 2.1.1 → 2.1.3

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

@@ -0,0 +1,363 @@
+"use client";
+
+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";
+
+export type TreeFolderRowDragHandlers = {
+  draggable: boolean;
+  onDragStart: (e: DragEvent<HTMLElement>) => void;
+  onDragEnd: (e: DragEvent<HTMLElement>) => void;
+  onDragOver: (e: DragEvent<HTMLElement>) => void;
+  onDragLeave: (e: DragEvent<HTMLElement>) => void;
+  onDrop: (e: DragEvent<HTMLElement>) => void;
+};
+
+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;
+  dragHandlers: TreeFolderRowDragHandlers;
+};
+
+export function TreeFolderRow({
+  row,
+  rowHeight,
+  indent,
+  iconFor,
+  isSelected,
+  isAncestor,
+  isDescendantOfSelected,
+  isPrevInBand,
+  isNextInBand,
+  isDragging,
+  isDropTargetInside,
+  isDropBefore,
+  isDropAfter,
+  dndEnabled,
+  onSelect,
+  onToggle,
+  dragHandlers,
+}: TreeFolderRowProps) {
+  const { node, level, isOpen, isInternal, ancestorHasMoreSiblings } = row;
+  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
+      data-row-id={node.id}
+      className={cn("select-none group/row", outerClassName)}
+      style={{ height: rowHeight }}
+      {...dragHandlers}
+    >
+      <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>
+
+        {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?: { children?: any[] }[] | null;
+}): number {
+  if (!node.children) return 0;
+  let n = 0;
+  const stack: any[] = [...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

@@ -0,0 +1,60 @@
+"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

@@ -0,0 +1,63 @@
+"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

@@ -0,0 +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 type {
+  TreeFolderNode,
+  TreeFolderNodeType,
+  TreeFolderMoveArgs,
+  TreeFolderIconResolver,
+  TreeFolderVisibleRow,
+  TreeFolderDropPosition,
+  TreeFolderDropTarget,
+  TreeFolderBreadcrumb as TreeFolderBreadcrumbItems,
+} from "./types"

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

@@ -0,0 +1,114 @@
+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)
+}

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

@@ -0,0 +1,77 @@
+import type { ReactNode } from "react"
+
+export type TreeFolderNodeType =
+  | "folder"
+  | "file"
+  | "frame"
+  | "group"
+  | "component"
+  | "instance"
+  | "text"
+  | "image"
+  | "vector"
+  | "link"
+  | "section"
+  | "container"
+  | (string & {})
+
+export type 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
+}
+
+export type TreeFolderIconResolver = (
+  node: TreeFolderNode,
+  state: { isOpen: boolean; isInternal: boolean; isSelected: boolean },
+) => ReactNode
+
+export type TreeFolderBreadcrumb = Array<{ id: string; name: string }>
+
+// ---------------------------------------------------------------------------
+// Visible-row + DnD primitives.
+// ---------------------------------------------------------------------------
+
+export type TreeFolderVisibleRow = {
+  node: TreeFolderNode
+  level: number
+  /** Resolved parent id (null for roots). */
+  parentId: string | null
+  /** Position of this node among its siblings in the source tree (0-based). */
+  childIndex: number
+  /** True when the node is internal AND open. */
+  isOpen: boolean
+  /** True for internal nodes (any node with non-empty children). */
+  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
+   * ancestor at depth `d` still has visible siblings after this row — that
+   * controls whether the vertical guide renders in that ancestor's gutter.
+   * Length === `level`.
+   */
+  isLastChild: boolean
+  ancestorHasMoreSiblings: boolean[]
+}
+
+/** Where the pointer is dropping relative to the hovered row. */
+export type TreeFolderDropPosition = "before" | "after" | "inside"
+
+export type TreeFolderDropTarget = {
+  /** The id whose `parentId` the drop will resolve to. */
+  rowId: string
+  position: TreeFolderDropPosition
+}