2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T45d3,"use client"; import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react"; import { Check, ChevronRight, File, Folder, FolderOpen, LoaderCircle, Minus } from "lucide-react"; import { useCallback, useEffect, useId, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent, type PointerEvent, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export type TreeNode = { id: string; name: string; icon?: ReactNode; /** Text or a count on the right of the row. */ badge?: ReactNode; children?: TreeNode[]; /** The node has children that loadChildren will fetch. */ hasChildren?: boolean; disabled?: boolean; }; export type DropPosition = "before" | "after" | "inside"; type Flat = { node: TreeNode; depth: number; parent: string | null }; const INDENT = 16; const isBranch = (n: TreeNode) => Boolean(n.children?.length || n.hasChildren || n.children); function flatten(items: TreeNode[], open: Set, depth = 0, parent: string | null = null, out: Flat[] = []) { for (const node of items) { out.push({ node, depth, parent }); if (node.children && open.has(node.id)) flatten(node.children, open, depth + 1, node.id, out); } return out; } function leaves(node: TreeNode): string[] { return node.children?.length ? node.children.flatMap(leaves) : [node.id]; } function contains(node: TreeNode, id: string): boolean { return node.id === id || Boolean(node.children?.some((c) => contains(c, id))); } function find(items: TreeNode[], id: string): TreeNode | undefined { for (const n of items) { if (n.id === id) return n; const hit = n.children && find(n.children, id); if (hit) return hit; } } /** Returns a copy of items with the node moved before, after or inside the target. */ export function moveNode(items: TreeNode[], id: string, target: string, position: DropPosition): TreeNode[] { const node = find(items, id); if (!node || contains(node, target)) return items; const strip = (list: TreeNode[]): TreeNode[] => list.filter((n) => n.id !== id).map((n) => (n.children ? { ...n, children: strip(n.children) } : n)); const place = (list: TreeNode[]): TreeNode[] => list.flatMap((n) => { if (n.id === target) { if (position === "inside") return [{ ...n, children: [...(n.children ?? []), node] }]; return position === "before" ? [node, n] : [n, node]; } return n.children ? [{ ...n, children: place(n.children) }] : [n]; }); return place(strip(items)); } function useControlled(value: T | undefined, initial: T, onChange?: (v: T) => void) { const [inner, setInner] = useState(initial); const current = value ?? inner; const set = useCallback( (next: T) => { if (value === undefined) setInner(next); onChange?.(next); }, [value, onChange], ); return [current, set] as const; } export interface TreeViewProps { items: TreeNode[]; selected?: string | null; defaultSelected?: string | null; onSelectedChange?: (id: string, node: TreeNode) => void; expanded?: string[]; defaultExpanded?: string[]; onExpandedChange?: (ids: string[]) => void; /** Show a checkbox on every row. Checking a folder checks everything inside it. */ checkable?: boolean; /** Checked leaf ids. */ checked?: string[]; defaultChecked?: string[]; onCheckedChange?: (ids: string[]) => void; /** Called the first time a node with hasChildren opens; show its children by updating items. */ loadChildren?: (node: TreeNode) => Promise; /** Drag rows to move them; apply the move in onMove, e.g. with moveNode. */ onMove?: (id: string, target: string, position: DropPosition) => void; /** Vertical lines that show nesting. */ guides?: boolean; /** Folder and file icons for nodes without their own icon. */ defaultIcons?: boolean; /** Buttons shown on the right of a row while it's hovered or focused. */ actions?: (node: TreeNode) => ReactNode; size?: "sm" | "md"; className?: string; "aria-label"?: string; } /** A tree of folders and items with keyboard navigation, checkboxes, lazy loading and drag to move. */ export function TreeView({ items, selected: selectedProp, defaultSelected = null, onSelectedChange, expanded: expandedProp, defaultExpanded = [], onExpandedChange, checkable, checked: checkedProp, defaultChecked = [], onCheckedChange, loadChildren, onMove, guides = true, defaultIcons = true, actions, size = "md", className, "aria-label": ariaLabel = "Tree", }: TreeViewProps) { const uid = useId(); const [selected, setSelected] = useControlled(selectedProp, defaultSelected); const [expanded, setExpanded] = useControlled(expandedProp, defaultExpanded, onExpandedChange); const [checked, setChecked] = useControlled(checkedProp, defaultChecked, onCheckedChange); const [loading, setLoading] = useState>(new Set()); const [focused, setFocused] = useState(null); const [hovered, setHovered] = useState(null); const [drag, setDrag] = useState<{ id: string; x: number; y: number; target: string | null; position: DropPosition } | null>(null); const rows = useRef(new Map()); const open = useMemo(() => new Set(expanded), [expanded]); const visible = useMemo(() => flatten(items, open), [items, open]); const checkedSet = useMemo(() => new Set(checked), [checked]); const height = size === "sm" ? 28 : 32; const tabStop = focused && visible.some((v) => v.node.id === focused) ? focused : (selected ?? visible[0]?.node.id); const toggle = async (node: TreeNode, force?: boolean) => { const isOpen = open.has(node.id); const next = force ?? !isOpen; if (next === isOpen) return; if (next && node.hasChildren && !node.children && loadChildren) { setLoading((s) => new Set(s).add(node.id)); try { await loadChildren(node); } finally { setLoading((s) => { const n = new Set(s); n.delete(node.id); return n; }); } } setExpanded(next ? [...expanded.filter((id) => id !== node.id), node.id] : expanded.filter((id) => id !== node.id)); }; const select = (node: TreeNode) => { if (node.disabled) return; setSelected(node.id); onSelectedChange?.(node.id, node); }; const checkState = (node: TreeNode): boolean | "mixed" => { const ids = leaves(node); const on = ids.filter((id) => checkedSet.has(id)).length; return on === 0 ? false : on === ids.length ? true : "mixed"; }; const check = (node: TreeNode) => { const ids = leaves(node); const state = checkState(node); setChecked(state === true ? checked.filter((id) => !ids.includes(id)) : [...new Set([...checked, ...ids])]); }; const focus = (id: string | undefined) => { if (!id) return; setFocused(id); rows.current.get(id)?.focus(); }; const key = (e: KeyboardEvent, flat: Flat) => { const i = visible.findIndex((v) => v.node.id === flat.node.id); const { node } = flat; const branch = isBranch(node); const moves: Record void> = { ArrowDown: () => focus(visible[i + 1]?.node.id), ArrowUp: () => focus(visible[i - 1]?.node.id), Home: () => focus(visible[0]?.node.id), End: () => focus(visible[visible.length - 1]?.node.id), ArrowRight: () => { if (branch && !open.has(node.id)) toggle(node, true); else if (branch && visible[i + 1]?.depth > flat.depth) focus(visible[i + 1].node.id); }, ArrowLeft: () => { if (branch && open.has(node.id)) toggle(node, false); else focus(flat.parent ?? undefined); }, Enter: () => { select(node); if (branch) toggle(node); }, " ": () => (checkable ? check(node) : select(node)), }; if (moves[e.key]) { e.preventDefault(); moves[e.key](); } else if (e.key.length === 1 && /\S/.test(e.key) && !e.metaKey && !e.ctrlKey) { const after = [...visible.slice(i + 1), ...visible.slice(0, i)]; focus(after.find((v) => v.node.name.toLowerCase().startsWith(e.key.toLowerCase()))?.node.id); } }; const start = useRef<{ id: string; x: number; y: number } | null>(null); const moved = useRef(false); const hoverTimer = useRef(undefined); useEffect(() => () => clearTimeout(hoverTimer.current), []); const down = (e: PointerEvent, node: TreeNode) => { if (!onMove || e.button !== 0 || node.disabled) return; start.current = { id: node.id, x: e.clientX, y: e.clientY }; }; const move = (e: PointerEvent) => { const s = start.current; if (!s) return; if (!drag && Math.hypot(e.clientX - s.x, e.clientY - s.y) < 5) return; if (!drag) (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); const el = (document.elementFromPoint(e.clientX, e.clientY) as HTMLElement | null)?.closest("[data-tree-row]"); let target: string | null = null; let position: DropPosition = "inside"; const dragged = find(items, s.id); if (el && dragged) { const id = el.dataset.treeRow!; const over = find(items, id); if (over && !contains(dragged, id)) { const box = el.getBoundingClientRect(); const t = (e.clientY - box.top) / box.height; position = isBranch(over) ? (t < 0.25 ? "before" : t > 0.75 ? "after" : "inside") : t < 0.5 ? "before" : "after"; target = id; if (position === "inside" && !open.has(id) && drag?.target !== id) { clearTimeout(hoverTimer.current); hoverTimer.current = window.setTimeout(() => toggle(over, true), 650); } } } if (target !== drag?.target || position !== drag?.position) clearTimeout(hoverTimer.current); setDrag({ id: s.id, x: e.clientX, y: e.clientY, target, position }); }; const up = () => { clearTimeout(hoverTimer.current); moved.current = Boolean(drag); if (drag?.target && onMove) onMove(drag.id, drag.target, drag.position); start.current = null; setDrag(null); }; const render = (list: TreeNode[], depth: number, parent: string | null): ReactNode => list.map((node) => { const branch = isBranch(node); const isOpen = open.has(node.id); const isSelected = selected === node.id; const state = checkable ? checkState(node) : false; const drop = drag?.target === node.id ? drag.position : null; const flat = { node, depth, parent }; const icon = node.icon ?? (defaultIcons ? branch ? isOpen ? : : : null); return (

{ if (el) rows.current.set(node.id, el); else rows.current.delete(node.id); }} role="treeitem" aria-level={depth + 1} aria-expanded={branch ? isOpen : undefined} aria-selected={isSelected} aria-checked={checkable ? state === "mixed" ? "mixed" : state : undefined} aria-disabled={node.disabled || undefined} tabIndex={tabStop === node.id ? 0 : -1} data-tree-row={node.id} data-dragging={drag?.id === node.id || undefined} onFocus={() => setFocused(node.id)} onKeyDown={(e) => key(e, flat)} onPointerEnter={() => setHovered(node.id)} onPointerLeave={() => setHovered((h) => (h === node.id ? null : h))} onPointerDown={(e) => down(e, node)} onPointerMove={move} onPointerUp={up} onPointerCancel={up} onClick={() => { if (moved.current) { moved.current = false; return; } select(node); if (branch) toggle(node); }} style={{ paddingLeft: depth * INDENT + 6, height } as CSSProperties} className={cn( "group/row relative flex cursor-default select-none items-center gap-1.5 rounded-[8px] pr-2 outline-none", size === "sm" ? "text-[12.5px]" : "text-[13px]", isSelected ? "font-medium text-neutral-950 dark:text-white" : "text-neutral-600 dark:text-neutral-400", node.disabled && "opacity-40", "data-dragging:opacity-40", "focus-visible:after:absolute focus-visible:after:inset-0 focus-visible:after:rounded-[8px] focus-visible:after:ring-1 focus-visible:after:ring-inset focus-visible:after:ring-neutral-950/20 dark:focus-visible:after:ring-white/25", )} > {isSelected && ( )} {hovered === node.id && !isSelected && !drag && } {drop === "inside" && } {(drop === "before" || drop === "after") && ( )} {loading.has(node.id) ? ( ) : branch ? ( ) : null} {checkable && ( { e.stopPropagation(); check(node); }} className={cn( "relative flex size-[15px] shrink-0 items-center justify-center rounded-[4px] transition-colors", state ? "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950" : "bg-white shadow-[inset_0_0_0_1px_rgb(0_0_0/0.18)] dark:bg-neutral-900 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.2)]", )} > {state === true && } {state === "mixed" && } )} {icon && ( {icon} )} {node.name} {actions && ( e.stopPropagation()} onPointerDown={(e) => e.stopPropagation()} className="relative flex items-center gap-0.5 opacity-0 transition-opacity group-hover/row:opacity-100 group-focus-visible/row:opacity-100" > {actions(node)} )} {node.badge !== undefined && {node.badge}}

{node.children && isOpen && ( {guides && ( contains(c, selected)) ? "bg-neutral-950/20 dark:bg-white/25" : "bg-black/[0.07] dark:bg-white/[0.08]", )} style={{ left: depth * INDENT + 13.5 }} /> )} {render(node.children, depth + 1, node.id)} )}

); }); const dragged = drag && find(items, drag.id); return (

{render(items, 0, null)} {dragged && (

{dragged.icon ?? (defaultIcons ? isBranch(dragged) ? : : null)} {dragged.name}

)} ); } export default TreeView; 2e:T2f3e1,

"use client";

import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react";
import { Check, ChevronRight, File, Folder, FolderOpen, LoaderCircle, Minus } from "lucide-react";
import { useCallback, useEffect, useId, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent, type PointerEvent, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export type TreeNode = {
  id: string;
  name: string;
  icon?: ReactNode;
  /** Text or a count on the right of the row. */
  badge?: ReactNode;
  children?: TreeNode[];
  /** The node has children that loadChildren will fetch. */
  hasChildren?: boolean;
  disabled?: boolean;
};

export type DropPosition = "before" | "after" | "inside";

type Flat = { node: TreeNode; depth: number; parent: string | null };

const INDENT = 16;

const isBranch = (n: TreeNode) => Boolean(n.children?.length || n.hasChildren || n.children);

function flatten(items: TreeNode[], open: Set<string>, depth = 0, parent: string | null = null, out: Flat[] = []) {
  for (const node of items) {
    out.push({ node, depth, parent });
    if (node.children && open.has(node.id)) flatten(node.children, open, depth + 1, node.id, out);
  }
  return out;
}

function leaves(node: TreeNode): string[] {
  return node.children?.length ? node.children.flatMap(leaves) : [node.id];
}

function contains(node: TreeNode, id: string): boolean {
  return node.id === id || Boolean(node.children?.some((c) => contains(c, id)));
}

function find(items: TreeNode[], id: string): TreeNode | undefined {
  for (const n of items) {
    if (n.id === id) return n;
    const hit = n.children && find(n.children, id);
    if (hit) return hit;
  }
}

/** Returns a copy of items with the node moved before, after or inside the target. */
export function moveNode(items: TreeNode[], id: string, target: string, position: DropPosition): TreeNode[] {
  const node = find(items, id);
  if (!node || contains(node, target)) return items;
  const strip = (list: TreeNode[]): TreeNode[] => list.filter((n) => n.id !== id).map((n) => (n.children ? { ...n, children: strip(n.children) } : n));
  const place = (list: TreeNode[]): TreeNode[] =>
    list.flatMap((n) => {
      if (n.id === target) {
        if (position === "inside") return [{ ...n, children: [...(n.children ?? []), node] }];
        return position === "before" ? [node, n] : [n, node];
      }
      return n.children ? [{ ...n, children: place(n.children) }] : [n];
    });
  return place(strip(items));
}

function useControlled<T>(value: T | undefined, initial: T, onChange?: (v: T) => void) {
  const [inner, setInner] = useState(initial);
  const current = value ?? inner;
  const set = useCallback(
    (next: T) => {
      if (value === undefined) setInner(next);
      onChange?.(next);
    },
    [value, onChange],
  );
  return [current, set] as const;
}

export interface TreeViewProps {
  items: TreeNode[];
  selected?: string | null;
  defaultSelected?: string | null;
  onSelectedChange?: (id: string, node: TreeNode) => void;
  expanded?: string[];
  defaultExpanded?: string[];
  onExpandedChange?: (ids: string[]) => void;
  /** Show a checkbox on every row. Checking a folder checks everything inside it. */
  checkable?: boolean;
  /** Checked leaf ids. */
  checked?: string[];
  defaultChecked?: string[];
  onCheckedChange?: (ids: string[]) => void;
  /** Called the first time a node with hasChildren opens; show its children by updating items. */
  loadChildren?: (node: TreeNode) => Promise<void>;
  /** Drag rows to move them; apply the move in onMove, e.g. with moveNode. */
  onMove?: (id: string, target: string, position: DropPosition) => void;
  /** Vertical lines that show nesting. */
  guides?: boolean;
  /** Folder and file icons for nodes without their own icon. */
  defaultIcons?: boolean;
  /** Buttons shown on the right of a row while it's hovered or focused. */
  actions?: (node: TreeNode) => ReactNode;
  size?: "sm" | "md";
  className?: string;
  "aria-label"?: string;
}

/** A tree of folders and items with keyboard navigation, checkboxes, lazy loading and drag to move. */
export function TreeView({
  items,
  selected: selectedProp,
  defaultSelected = null,
  onSelectedChange,
  expanded: expandedProp,
  defaultExpanded = [],
  onExpandedChange,
  checkable,
  checked: checkedProp,
  defaultChecked = [],
  onCheckedChange,
  loadChildren,
  onMove,
  guides = true,
  defaultIcons = true,
  actions,
  size = "md",
  className,
  "aria-label": ariaLabel = "Tree",
}: TreeViewProps) {
  const uid = useId();
  const [selected, setSelected] = useControlled<string | null>(selectedProp, defaultSelected);
  const [expanded, setExpanded] = useControlled(expandedProp, defaultExpanded, onExpandedChange);
  const [checked, setChecked] = useControlled(checkedProp, defaultChecked, onCheckedChange);
  const [loading, setLoading] = useState<Set<string>>(new Set());
  const [focused, setFocused] = useState<string | null>(null);
  const [hovered, setHovered] = useState<string | null>(null);
  const [drag, setDrag] = useState<{ id: string; x: number; y: number; target: string | null; position: DropPosition } | null>(null);
  const rows = useRef(new Map<string, HTMLDivElement>());
  const open = useMemo(() => new Set(expanded), [expanded]);
  const visible = useMemo(() => flatten(items, open), [items, open]);
  const checkedSet = useMemo(() => new Set(checked), [checked]);
  const height = size === "sm" ? 28 : 32;

  const tabStop = focused && visible.some((v) => v.node.id === focused) ? focused : (selected ?? visible[0]?.node.id);

  const toggle = async (node: TreeNode, force?: boolean) => {
    const isOpen = open.has(node.id);
    const next = force ?? !isOpen;
    if (next === isOpen) return;
    if (next && node.hasChildren && !node.children && loadChildren) {
      setLoading((s) => new Set(s).add(node.id));
      try {
        await loadChildren(node);
      } finally {
        setLoading((s) => {
          const n = new Set(s);
          n.delete(node.id);
          return n;
        });
      }
    }
    setExpanded(next ? [...expanded.filter((id) => id !== node.id), node.id] : expanded.filter((id) => id !== node.id));
  };

  const select = (node: TreeNode) => {
    if (node.disabled) return;
    setSelected(node.id);
    onSelectedChange?.(node.id, node);
  };

  const checkState = (node: TreeNode): boolean | "mixed" => {
    const ids = leaves(node);
    const on = ids.filter((id) => checkedSet.has(id)).length;
    return on === 0 ? false : on === ids.length ? true : "mixed";
  };

  const check = (node: TreeNode) => {
    const ids = leaves(node);
    const state = checkState(node);
    setChecked(state === true ? checked.filter((id) => !ids.includes(id)) : [...new Set([...checked, ...ids])]);
  };

  const focus = (id: string | undefined) => {
    if (!id) return;
    setFocused(id);
    rows.current.get(id)?.focus();
  };

  const key = (e: KeyboardEvent, flat: Flat) => {
    const i = visible.findIndex((v) => v.node.id === flat.node.id);
    const { node } = flat;
    const branch = isBranch(node);
    const moves: Record<string, () => void> = {
      ArrowDown: () => focus(visible[i + 1]?.node.id),
      ArrowUp: () => focus(visible[i - 1]?.node.id),
      Home: () => focus(visible[0]?.node.id),
      End: () => focus(visible[visible.length - 1]?.node.id),
      ArrowRight: () => {
        if (branch && !open.has(node.id)) toggle(node, true);
        else if (branch && visible[i + 1]?.depth > flat.depth) focus(visible[i + 1].node.id);
      },
      ArrowLeft: () => {
        if (branch && open.has(node.id)) toggle(node, false);
        else focus(flat.parent ?? undefined);
      },
      Enter: () => {
        select(node);
        if (branch) toggle(node);
      },
      " ": () => (checkable ? check(node) : select(node)),
    };
    if (moves[e.key]) {
      e.preventDefault();
      moves[e.key]();
    } else if (e.key.length === 1 && /\S/.test(e.key) && !e.metaKey && !e.ctrlKey) {
      const after = [...visible.slice(i + 1), ...visible.slice(0, i)];
      focus(after.find((v) => v.node.name.toLowerCase().startsWith(e.key.toLowerCase()))?.node.id);
    }
  };

  const start = useRef<{ id: string; x: number; y: number } | null>(null);
  const moved = useRef(false);
  const hoverTimer = useRef<number | undefined>(undefined);
  useEffect(() => () => clearTimeout(hoverTimer.current), []);

  const down = (e: PointerEvent, node: TreeNode) => {
    if (!onMove || e.button !== 0 || node.disabled) return;
    start.current = { id: node.id, x: e.clientX, y: e.clientY };
  };
  const move = (e: PointerEvent) => {
    const s = start.current;
    if (!s) return;
    if (!drag && Math.hypot(e.clientX - s.x, e.clientY - s.y) < 5) return;
    if (!drag) (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
    const el = (document.elementFromPoint(e.clientX, e.clientY) as HTMLElement | null)?.closest<HTMLElement>("[data-tree-row]");
    let target: string | null = null;
    let position: DropPosition = "inside";
    const dragged = find(items, s.id);
    if (el && dragged) {
      const id = el.dataset.treeRow!;
      const over = find(items, id);
      if (over && !contains(dragged, id)) {
        const box = el.getBoundingClientRect();
        const t = (e.clientY - box.top) / box.height;
        position = isBranch(over) ? (t < 0.25 ? "before" : t > 0.75 ? "after" : "inside") : t < 0.5 ? "before" : "after";
        target = id;
        if (position === "inside" && !open.has(id) && drag?.target !== id) {
          clearTimeout(hoverTimer.current);
          hoverTimer.current = window.setTimeout(() => toggle(over, true), 650);
        }
      }
    }
    if (target !== drag?.target || position !== drag?.position) clearTimeout(hoverTimer.current);
    setDrag({ id: s.id, x: e.clientX, y: e.clientY, target, position });
  };
  const up = () => {
    clearTimeout(hoverTimer.current);
    moved.current = Boolean(drag);
    if (drag?.target && onMove) onMove(drag.id, drag.target, drag.position);
    start.current = null;
    setDrag(null);
  };

  const render = (list: TreeNode[], depth: number, parent: string | null): ReactNode =>
    list.map((node) => {
      const branch = isBranch(node);
      const isOpen = open.has(node.id);
      const isSelected = selected === node.id;
      const state = checkable ? checkState(node) : false;
      const drop = drag?.target === node.id ? drag.position : null;
      const flat = { node, depth, parent };
      const icon = node.icon ?? (defaultIcons ? branch ? isOpen ? <FolderOpen /> : <Folder /> : <File /> : null);
      return (
        <li key={node.id} role="none" className="relative">
          <div
            ref={(el) => {
              if (el) rows.current.set(node.id, el);
              else rows.current.delete(node.id);
            }}
            role="treeitem"
            aria-level={depth + 1}
            aria-expanded={branch ? isOpen : undefined}
            aria-selected={isSelected}
            aria-checked={checkable ? state === "mixed" ? "mixed" : state : undefined}
            aria-disabled={node.disabled || undefined}
            tabIndex={tabStop === node.id ? 0 : -1}
            data-tree-row={node.id}
            data-dragging={drag?.id === node.id || undefined}
            onFocus={() => setFocused(node.id)}
            onKeyDown={(e) => key(e, flat)}
            onPointerEnter={() => setHovered(node.id)}
            onPointerLeave={() => setHovered((h) => (h === node.id ? null : h))}
            onPointerDown={(e) => down(e, node)}
            onPointerMove={move}
            onPointerUp={up}
            onPointerCancel={up}
            onClick={() => {
              if (moved.current) {
                moved.current = false;
                return;
              }
              select(node);
              if (branch) toggle(node);
            }}
            style={{ paddingLeft: depth * INDENT + 6, height } as CSSProperties}
            className={cn(
              "group/row relative flex cursor-default select-none items-center gap-1.5 rounded-[8px] pr-2 outline-none",
              size === "sm" ? "text-[12.5px]" : "text-[13px]",
              isSelected ? "font-medium text-neutral-950 dark:text-white" : "text-neutral-600 dark:text-neutral-400",
              node.disabled && "opacity-40",
              "data-dragging:opacity-40",
              "focus-visible:after:absolute focus-visible:after:inset-0 focus-visible:after:rounded-[8px] focus-visible:after:ring-1 focus-visible:after:ring-inset focus-visible:after:ring-neutral-950/20 dark:focus-visible:after:ring-white/25",
            )}
          >
            {isSelected && (
              <motion.span layoutId={`${uid}-selected`} className="absolute inset-0 rounded-[8px] bg-neutral-950/[0.06] dark:bg-white/[0.09]" transition={{ type: "spring", bounce: 0.15, duration: 0.35 }} />
            )}
            {hovered === node.id && !isSelected && !drag && <span className="absolute inset-0 rounded-[8px] bg-neutral-950/[0.035] dark:bg-white/[0.05]" />}
            {drop === "inside" && <span className="absolute inset-0 rounded-[8px] bg-neutral-950/[0.07] ring-1 ring-inset ring-neutral-950/25 dark:bg-white/[0.08] dark:ring-white/30" />}
            {(drop === "before" || drop === "after") && (
              <span className={cn("absolute right-1 h-[2px] rounded-full bg-neutral-950 dark:bg-white", drop === "before" ? "-top-px" : "-bottom-px")} style={{ left: depth * INDENT + 6 }} />
            )}
            <span className="relative flex size-4 shrink-0 items-center justify-center text-neutral-400">
              {loading.has(node.id) ? (
                <LoaderCircle className="size-3.5 animate-spin" />
              ) : branch ? (
                <motion.span animate={{ rotate: isOpen ? 90 : 0 }} transition={{ type: "spring", bounce: 0.3, duration: 0.35 }} className="flex">
                  <ChevronRight className="size-3.5" />
                </motion.span>
              ) : null}
            </span>
            {checkable && (
              <span
                role="presentation"
                onClick={(e) => {
                  e.stopPropagation();
                  check(node);
                }}
                className={cn(
                  "relative flex size-[15px] shrink-0 items-center justify-center rounded-[4px] transition-colors",
                  state
                    ? "bg-neutral-950 text-white dark:bg-white dark:text-neutral-950"
                    : "bg-white shadow-[inset_0_0_0_1px_rgb(0_0_0/0.18)] dark:bg-neutral-900 dark:shadow-[inset_0_0_0_1px_rgb(255_255_255/0.2)]",
                )}
              >
                {state === true && <Check className="size-3" strokeWidth={3} />}
                {state === "mixed" && <Minus className="size-3" strokeWidth={3} />}
              </span>
            )}
            {icon && (
              <span className={cn("relative flex shrink-0 [&_svg]:size-4", isSelected ? "text-neutral-800 dark:text-neutral-200" : "text-neutral-400 dark:text-neutral-500")}>{icon}</span>
            )}
            <span className="relative min-w-0 flex-1 truncate">{node.name}</span>
            {actions && (
              <span
                onClick={(e) => e.stopPropagation()}
                onPointerDown={(e) => e.stopPropagation()}
                className="relative flex items-center gap-0.5 opacity-0 transition-opacity group-hover/row:opacity-100 group-focus-visible/row:opacity-100"
              >
                {actions(node)}
              </span>
            )}
            {node.badge !== undefined && <span className="relative shrink-0 text-[11.5px] tabular-nums text-neutral-400">{node.badge}</span>}
          </div>
          <AnimatePresence initial={false}>
            {node.children && isOpen && (
              <motion.ul
                role="group"
                className="relative overflow-hidden"
                initial={{ height: 0, opacity: 0 }}
                animate={{ height: "auto", opacity: 1 }}
                exit={{ height: 0, opacity: 0 }}
                transition={{ type: "spring", bounce: 0, duration: 0.32 }}
              >
                {guides && (
                  <span
                    aria-hidden
                    className={cn(
                      "absolute bottom-1 top-0 w-px transition-colors",
                      selected && node.children.some((c) => contains(c, selected)) ? "bg-neutral-950/20 dark:bg-white/25" : "bg-black/[0.07] dark:bg-white/[0.08]",
                    )}
                    style={{ left: depth * INDENT + 13.5 }}
                  />
                )}
                {render(node.children, depth + 1, node.id)}
              </motion.ul>
            )}
          </AnimatePresence>
        </li>
      );
    });

  const dragged = drag && find(items, drag.id);
  return (
    <MotionConfig reducedMotion="user">
      <LayoutGroup id={uid}>
        <ul role="tree" aria-label={ariaLabel} aria-multiselectable={checkable || undefined} className={cn("relative", className)}>
          {render(items, 0, null)}
        </ul>
      </LayoutGroup>
      {dragged && (
        <div
          className="pointer-events-none fixed left-0 top-0 z-50 flex h-7 items-center gap-1.5 rounded-[8px] bg-white px-2 text-[12.5px] font-medium text-neutral-900 shadow-[0_8px_24px_-6px_rgb(0_0_0/0.2),0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.06] dark:bg-neutral-800 dark:text-white dark:ring-white/[0.1] [&_svg]:size-3.5 [&_svg]:text-neutral-400"
          style={{ transform: `translate(${drag.x + 12}px, ${drag.y + 8}px)` }}
        >
          {dragged.icon ?? (defaultIcons ? isBranch(dragged) ? <Folder /> : <File /> : null)}
          {dragged.name}
        </div>
      )}
    </MotionConfig>
  );
}

export default TreeView;

2f:Taf7,"use client"; import { FileCode2, FileJson, FileText, Image } from "lucide-react"; import { useState } from "react"; import { TreeView, type TreeNode } from "@/components/scalar-ui/tree-view"; const ts = ; const files: TreeNode[] = [ { id: "app", name: "app", children: [ { id: "app/layout.tsx", name: "layout.tsx", icon: ts }, { id: "app/page.tsx", name: "page.tsx", icon: ts }, { id: "app/dashboard", name: "dashboard", children: [ { id: "app/dashboard/page.tsx", name: "page.tsx", icon: ts }, { id: "app/dashboard/loading.tsx", name: "loading.tsx", icon: ts }, ], }, ], }, { id: "components", name: "components", children: [ { id: "components/sidebar.tsx", name: "sidebar.tsx", icon: ts }, { id: "components/navbar.tsx", name: "navbar.tsx", icon: ts }, { id: "components/tree-view.tsx", name: "tree-view.tsx", icon: ts }, ], }, { id: "public", name: "public", children: [{ id: "public/og.png", name: "og.png", icon: }] }, { id: "package.json", name: "package.json", icon: }, { id: "README.md", name: "README.md", icon: }, ]; export default function Demo() { const [selected, setSelected] = useState("components/tree-view.tsx"); return (

Explorer

{selected?.split("/").join(" / ")}

{selected?.split("/").pop()}

{[86, 64, 92, 48, 72, 58].map((w, i) => (

))}

Use the arrow keys: ← and → close and open folders, type a letter to jump.

); } 30:T621e,

"use client";

import { FileCode2, FileJson, FileText, Image } from "lucide-react";
import { useState } from "react";
import { TreeView, type TreeNode } from "@/components/scalar-ui/tree-view";

const ts = <FileCode2 />;

const files: TreeNode[] = [
  {
    id: "app",
    name: "app",
    children: [
      { id: "app/layout.tsx", name: "layout.tsx", icon: ts },
      { id: "app/page.tsx", name: "page.tsx", icon: ts },
      {
        id: "app/dashboard",
        name: "dashboard",
        children: [
          { id: "app/dashboard/page.tsx", name: "page.tsx", icon: ts },
          { id: "app/dashboard/loading.tsx", name: "loading.tsx", icon: ts },
        ],
      },
    ],
  },
  {
    id: "components",
    name: "components",
    children: [
      { id: "components/sidebar.tsx", name: "sidebar.tsx", icon: ts },
      { id: "components/navbar.tsx", name: "navbar.tsx", icon: ts },
      { id: "components/tree-view.tsx", name: "tree-view.tsx", icon: ts },
    ],
  },
  { id: "public", name: "public", children: [{ id: "public/og.png", name: "og.png", icon: <Image /> }] },
  { id: "package.json", name: "package.json", icon: <FileJson /> },
  { id: "README.md", name: "README.md", icon: <FileText /> },
];

export default function Demo() {
  const [selected, setSelected] = useState<string | null>("components/tree-view.tsx");
  return (
    <div className="flex h-[360px] w-full max-w-[520px] overflow-hidden rounded-[20px] bg-white shadow-[0_1px_2px_rgb(0_0_0/0.04),0_8px_24px_-12px_rgb(0_0_0/0.12)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <div className="w-[230px] shrink-0 overflow-y-auto border-r border-black/[0.06] bg-neutral-50/70 p-2 dark:border-white/[0.06] dark:bg-white/[0.02]">
        <p className="px-2 pb-1.5 pt-1 text-[11.5px] font-medium uppercase tracking-[0.06em] text-neutral-400">Explorer</p>
        <TreeView items={files} selected={selected} onSelectedChange={setSelected} defaultExpanded={["app", "components"]} aria-label="Files" />
      </div>
      <div className="min-w-0 flex-1 p-5">
        <p className="truncate font-mono text-[11.5px] text-neutral-400">{selected?.split("/").join(" / ")}</p>
        <p className="mt-1 truncate text-[15px] font-semibold tracking-[-0.01em] text-neutral-950 dark:text-white">{selected?.split("/").pop()}</p>
        <div className="mt-4 space-y-2">
          {[86, 64, 92, 48, 72, 58].map((w, i) => (
            <div key={i} className="h-2 rounded-full bg-neutral-950/[0.06] dark:bg-white/[0.08]" style={{ width: `${w}%`, marginLeft: i % 3 ? 16 : 0 }} />
          ))}
        </div>
        <p className="mt-6 text-[12px] leading-relaxed text-neutral-400">Use the arrow keys: ← and → close and open folders, type a letter to jump.</p>
      </div>
    </div>
  );
}

31:T60b,"use client"; import { useState } from "react"; import { TreeView, type TreeNode } from "@/components/scalar-ui/tree-view"; const scopes: TreeNode[] = [ { id: "projects", name: "Projects", children: [ { id: "projects.read", name: "Read projects" }, { id: "projects.write", name: "Create and edit" }, { id: "projects.delete", name: "Delete" }, ], }, { id: "billing", name: "Billing", children: [ { id: "billing.invoices", name: "View invoices" }, { id: "billing.plan", name: "Change plan" }, ], }, { id: "members", name: "Members", children: [ { id: "members.invite", name: "Invite people" }, { id: "members.roles", name: "Change roles" }, ], }, ]; export default function Example() { const [checked, setChecked] = useState(["projects.read", "projects.write", "billing.invoices"]); return (

API key scopes

{checked.length} of 7

); } 32:T3a66,

"use client";

import { useState } from "react";
import { TreeView, type TreeNode } from "@/components/scalar-ui/tree-view";

const scopes: TreeNode[] = [
  {
    id: "projects",
    name: "Projects",
    children: [
      { id: "projects.read", name: "Read projects" },
      { id: "projects.write", name: "Create and edit" },
      { id: "projects.delete", name: "Delete" },
    ],
  },
  {
    id: "billing",
    name: "Billing",
    children: [
      { id: "billing.invoices", name: "View invoices" },
      { id: "billing.plan", name: "Change plan" },
    ],
  },
  {
    id: "members",
    name: "Members",
    children: [
      { id: "members.invite", name: "Invite people" },
      { id: "members.roles", name: "Change roles" },
    ],
  },
];

export default function Example() {
  const [checked, setChecked] = useState(["projects.read", "projects.write", "billing.invoices"]);
  return (
    <div className="w-full max-w-[340px] rounded-[18px] bg-white p-2 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <div className="flex items-baseline justify-between px-2 pb-2 pt-1">
        <p className="text-[13.5px] font-semibold text-neutral-950 dark:text-white">API key scopes</p>
        <p className="text-[12px] tabular-nums text-neutral-400">{checked.length} of 7</p>
      </div>
      <TreeView items={scopes} checkable checked={checked} onCheckedChange={setChecked} defaultIcons={false} defaultExpanded={["projects", "billing"]} aria-label="Scopes" />
    </div>
  );
}

33:T6dd,"use client"; import { useState } from "react"; import { TreeView, type TreeNode } from "@/components/scalar-ui/tree-view"; const remote: Record = { design: [ { id: "design/brand", name: "Brand", hasChildren: true }, { id: "design/specs.fig", name: "specs.fig" }, ], "design/brand": [ { id: "design/brand/logo.svg", name: "logo.svg" }, { id: "design/brand/colors.pdf", name: "colors.pdf" }, ], finance: [ { id: "finance/q3.xlsx", name: "Q3 forecast.xlsx" }, { id: "finance/payroll", name: "Payroll", hasChildren: true }, ], "finance/payroll": [{ id: "finance/payroll/oct.csv", name: "October.csv" }], empty: [], }; const attach = (list: TreeNode[], id: string, children: TreeNode[]): TreeNode[] => list.map((n) => (n.id === id ? { ...n, children } : n.children ? { ...n, children: attach(n.children, id, children) } : n)); export default function Example() { const [items, setItems] = useState([ { id: "design", name: "Design", hasChildren: true }, { id: "finance", name: "Finance", hasChildren: true }, { id: "empty", name: "Archive", hasChildren: true }, ]); const load = (node: TreeNode) => new Promise((done) => setTimeout(() => { setItems((list) => attach(list, node.id, remote[node.id] ?? [])); done(); }, 700), ); return (

Shared drive

); } 34:T45b3,

"use client";

import { useState } from "react";
import { TreeView, type TreeNode } from "@/components/scalar-ui/tree-view";

const remote: Record<string, TreeNode[]> = {
  design: [
    { id: "design/brand", name: "Brand", hasChildren: true },
    { id: "design/specs.fig", name: "specs.fig" },
  ],
  "design/brand": [
    { id: "design/brand/logo.svg", name: "logo.svg" },
    { id: "design/brand/colors.pdf", name: "colors.pdf" },
  ],
  finance: [
    { id: "finance/q3.xlsx", name: "Q3 forecast.xlsx" },
    { id: "finance/payroll", name: "Payroll", hasChildren: true },
  ],
  "finance/payroll": [{ id: "finance/payroll/oct.csv", name: "October.csv" }],
  empty: [],
};

const attach = (list: TreeNode[], id: string, children: TreeNode[]): TreeNode[] =>
  list.map((n) => (n.id === id ? { ...n, children } : n.children ? { ...n, children: attach(n.children, id, children) } : n));

export default function Example() {
  const [items, setItems] = useState<TreeNode[]>([
    { id: "design", name: "Design", hasChildren: true },
    { id: "finance", name: "Finance", hasChildren: true },
    { id: "empty", name: "Archive", hasChildren: true },
  ]);
  const load = (node: TreeNode) =>
    new Promise<void>((done) =>
      setTimeout(() => {
        setItems((list) => attach(list, node.id, remote[node.id] ?? []));
        done();
      }, 700),
    );
  return (
    <div className="w-full max-w-[300px] rounded-[18px] bg-white p-2 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <p className="px-2 pb-1.5 pt-1 text-[13.5px] font-semibold text-neutral-950 dark:text-white">Shared drive</p>
      <TreeView items={items} loadChildren={load} aria-label="Shared drive" />
    </div>
  );
}

35:T60b,"use client"; import { FileText } from "lucide-react"; import { useState } from "react"; import { TreeView, moveNode, type TreeNode } from "@/components/scalar-ui/tree-view"; const doc = ; export default function Example() { const [items, setItems] = useState([ { id: "product", name: "Product", children: [ { id: "roadmap", name: "Roadmap", icon: doc }, { id: "research", name: "User research", icon: doc }, ], }, { id: "engineering", name: "Engineering", children: [ { id: "oncall", name: "On-call guide", icon: doc }, { id: "rfcs", name: "RFCs", children: [{ id: "rfc-12", name: "RFC 12: Sync engine", icon: doc }] }, ], }, { id: "handbook", name: "Team handbook", icon: doc }, { id: "inbox", name: "Unsorted", children: [] }, ]); return (

Docs

setItems((list) => moveNode(list, id, target, position))} defaultExpanded={["product", "engineering"]} aria-label="Docs" />

Drag onto a folder to move inside it; hover a closed folder to open it.

); } 36:T3498,

"use client";

import { FileText } from "lucide-react";
import { useState } from "react";
import { TreeView, moveNode, type TreeNode } from "@/components/scalar-ui/tree-view";

const doc = <FileText />;

export default function Example() {
  const [items, setItems] = useState<TreeNode[]>([
    {
      id: "product",
      name: "Product",
      children: [
        { id: "roadmap", name: "Roadmap", icon: doc },
        { id: "research", name: "User research", icon: doc },
      ],
    },
    {
      id: "engineering",
      name: "Engineering",
      children: [
        { id: "oncall", name: "On-call guide", icon: doc },
        { id: "rfcs", name: "RFCs", children: [{ id: "rfc-12", name: "RFC 12: Sync engine", icon: doc }] },
      ],
    },
    { id: "handbook", name: "Team handbook", icon: doc },
    { id: "inbox", name: "Unsorted", children: [] },
  ]);
  return (
    <div className="w-full max-w-[320px] rounded-[18px] bg-white p-2 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <p className="px-2 pb-1.5 pt-1 text-[13.5px] font-semibold text-neutral-950 dark:text-white">Docs</p>
      <TreeView
        items={items}
        onMove={(id, target, position) => setItems((list) => moveNode(list, id, target, position))}
        defaultExpanded={["product", "engineering"]}
        aria-label="Docs"
      />
      <p className="px-2 pb-1 pt-2 text-[12px] text-neutral-400">Drag onto a folder to move inside it; hover a closed folder to open it.</p>
    </div>
  );
}

37:T832,"use client"; import { BookOpen, Code2, Layers, MoreHorizontal, Plus, Rocket } from "lucide-react"; import { useState } from "react"; import { TreeView, type TreeNode } from "@/components/scalar-ui/tree-view"; const nav: TreeNode[] = [ { id: "start", name: "Getting started", icon: , children: [ { id: "install", name: "Installation" }, { id: "theming", name: "Theming" }, { id: "cli", name: "CLI", badge: "New" }, ], }, { id: "components", name: "Components", icon: , badge: 64, children: [ { id: "forms", name: "Forms", children: [{ id: "input", name: "Input" }, { id: "select", name: "Select" }, { id: "slider", name: "Slider" }] }, { id: "overlays", name: "Overlays", children: [{ id: "dialog", name: "Dialog" }, { id: "sheet", name: "Sheet" }] }, ], }, { id: "api", name: "API reference", icon: }, { id: "guides", name: "Guides", icon: }, ]; const button = "flex size-6 items-center justify-center rounded-[6px] text-neutral-400 outline-none hover:bg-neutral-950/[0.06] hover:text-neutral-800 dark:hover:bg-white/[0.08] dark:hover:text-white"; export default function Example() { const [selected, setSelected] = useState("select"); return (

node.children ? ( <> ) : null } aria-label="Documentation" />

); } 38:T4f90,

"use client";

import { BookOpen, Code2, Layers, MoreHorizontal, Plus, Rocket } from "lucide-react";
import { useState } from "react";
import { TreeView, type TreeNode } from "@/components/scalar-ui/tree-view";

const nav: TreeNode[] = [
  {
    id: "start",
    name: "Getting started",
    icon: <Rocket />,
    children: [
      { id: "install", name: "Installation" },
      { id: "theming", name: "Theming" },
      { id: "cli", name: "CLI", badge: "New" },
    ],
  },
  {
    id: "components",
    name: "Components",
    icon: <Layers />,
    badge: 64,
    children: [
      { id: "forms", name: "Forms", children: [{ id: "input", name: "Input" }, { id: "select", name: "Select" }, { id: "slider", name: "Slider" }] },
      { id: "overlays", name: "Overlays", children: [{ id: "dialog", name: "Dialog" }, { id: "sheet", name: "Sheet" }] },
    ],
  },
  { id: "api", name: "API reference", icon: <Code2 /> },
  { id: "guides", name: "Guides", icon: <BookOpen /> },
];

const button = "flex size-6 items-center justify-center rounded-[6px] text-neutral-400 outline-none hover:bg-neutral-950/[0.06] hover:text-neutral-800 dark:hover:bg-white/[0.08] dark:hover:text-white";

export default function Example() {
  const [selected, setSelected] = useState<string | null>("select");
  return (
    <div className="w-full max-w-[280px] rounded-[18px] bg-neutral-50 p-2 ring-1 ring-black/[0.05] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <TreeView
        items={nav}
        size="sm"
        selected={selected}
        onSelectedChange={setSelected}
        defaultIcons={false}
        defaultExpanded={["components", "forms"]}
        actions={(node) =>
          node.children ? (
            <>
              <span className={button} aria-label={`Add to ${node.name}`}>
                <Plus className="size-3.5" />
              </span>
              <span className={button} aria-label="More">
                <MoreHorizontal className="size-3.5" />
              </span>
            </>
          ) : null
        }
        aria-label="Documentation"
      />
    </div>
  );
}

29:["$","section","tree-view",{"id":"tree-view","aria-labelledby":"tree-view-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"tree-view-title","className":"sr-only","children":"Tree View"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"tree-view","gated":{"unlocked":true,"files":[{"name":"tree-view.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"checkboxes":{"name":"checkboxes.tsx","code":"$31","html":"$32"},"lazy-load":{"name":"lazy-load.tsx","code":"$33","html":"$34"},"drag-to-move":{"name":"drag-to-move.tsx","code":"$35","html":"$36"},"navigation":{"name":"navigation.tsx","code":"$37","html":"$38"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add tree-view","shadcn":"npx shadcn@latest add https://scalarui.com/r/tree-view.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L39","toolbar":"$L3a"}]}],["$L3b","$L3c","$L3d","$L3e"]]}]

Tree Views

Tree Views

Checkboxes

Lazy Load

Drag to Move

Navigation