torch-glare 2.1.0 → 2.1.2

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

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

@@ -0,0 +1,235 @@
+"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 } = row
+  const data = node
+  const hasChildren = isInternal
+
+  const willReceiveDrop = isDropTargetInside && dndEnabled
+  const inSubtreeOfSelected = isDescendantOfSelected
+  const inAncestorChain = isAncestor
+  const inBand = (isSelected || inSubtreeOfSelected) && !willReceiveDrop
+
+  const isBandStart = inBand && !isPrevInBand
+  const isBandEnd = inBand && !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] transition-colors duration-100",
+    "rounded-md",
+    inBand && !isBandStart && "rounded-t-none",
+    inBand && !isBandEnd && "rounded-b-none",
+    !willReceiveDrop && !inBand &&
+      "group-hover/row:bg-background-presentation-form-field-hover group-active/row:bg-background-presentation-action-hover/20",
+    inBand && "bg-background-presentation-state-information-primary",
+    inAncestorChain && !inBand &&
+      "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",
+    inBand && "text-white",
+    willReceiveDrop && "text-white",
+  )
+
+  const rowStyle = {
+    paddingLeft: 4 + 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 = 4 + level * indent
+
+  return (
+    <div
+      data-row-id={node.id}
+      className={cn("select-none group/row", outerClassName)}
+      {...dragHandlers}
+    >
+      <span aria-hidden className={bandClassName} />
+
+      {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={{ marginLeft: 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={{ marginLeft: 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}
+      >
+        {dndEnabled && (
+          <span
+            className="shrink-0 w-4 h-4 flex 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",
+                inBand ? "text-white/80" : "text-content-presentation-global-tertiary",
+              )}
+            />
+          </span>
+        )}
+
+        {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",
+              inBand
+                ? "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",
+            inBand ? "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",
+              inBand ? "text-white/80" : "text-content-presentation-global-tertiary",
+            )}
+          >
+            ({countDescendants(node)})
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+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,68 @@
+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
+}
+
+/** 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
+}