robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/builder/viewer/renderers/TreeViewRenderer.jsx

@@ -0,0 +1,832 @@
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react'
+import {
+  Box, Typography, IconButton, TextField, Checkbox,
+  Collapse, CircularProgress, Tooltip, InputAdornment,
+  Popover, Button,
+} from '@mui/material'
+import {
+  ChevronRight, ExpandMore, SearchOutlined, ClearOutlined,
+  MoreVertOutlined,
+
+  // Folder / file
+  FolderOutlined, FolderOpenOutlined, FolderSharedOutlined,
+  InsertDriveFileOutlined, FileOpenOutlined, FileCopyOutlined,
+  ArticleOutlined, DescriptionOutlined, NoteOutlined, AssignmentOutlined,
+
+  // Actions
+  EditOutlined, DeleteOutlined, VisibilityOutlined, VisibilityOffOutlined,
+  ContentCopyOutlined, DownloadOutlined, UploadOutlined, PrintOutlined,
+  CheckOutlined, CloseOutlined, SendOutlined, RefreshOutlined,
+  SettingsOutlined, InfoOutlined, WarningOutlined, ErrorOutlined,
+  ArchiveOutlined, UnarchiveOutlined, RestoreOutlined,
+  LockOutlined, LockOpenOutlined,
+  StarOutlined, StarBorderOutlined,
+  AddOutlined, RemoveOutlined, AddCircleOutlined, RemoveCircleOutlined,
+  SaveOutlined, SaveAsOutlined, ShareOutlined, OpenInNewOutlined,
+
+  // Navigation / UI
+  HomeOutlined, Home,
+  DashboardOutlined, Dashboard,
+  MenuOutlined, AppsOutlined, GridViewOutlined, ViewListOutlined,
+  TuneOutlined, FilterListOutlined, SortOutlined, SearchOffOutlined,
+  ExpandLessOutlined, ExpandMoreOutlined,
+
+  // People / Org
+  PersonOutlined, Person,
+  GroupOutlined, Group,
+  PeopleOutlined, AccountCircleOutlined, SupervisorAccountOutlined,
+  ContactsOutlined, BadgeOutlined, WorkOutlined, BusinessOutlined,
+  ManageAccountsOutlined, AdminPanelSettingsOutlined,
+
+  // Comm / Notifications
+  MailOutlined, EmailOutlined, PhoneOutlined, ChatOutlined,
+  NotificationsOutlined, NotificationsNoneOutlined,
+  MessageOutlined, ForumOutlined, CommentOutlined,
+  FeedbackOutlined, AnnouncementOutlined,
+
+  // Location / Map
+  LocationOnOutlined, PlaceOutlined, MapOutlined, ExploreOutlined,
+  MyLocationOutlined, NavigationOutlined, DirectionsOutlined,
+
+  // Calendar / Time
+  CalendarTodayOutlined, CalendarMonthOutlined, EventOutlined,
+  AccessTimeOutlined, ScheduleOutlined, TimerOutlined,
+  DateRangeOutlined, TodayOutlined,
+
+  // Finance
+  AttachMoneyOutlined, MoneyOutlined, AccountBalanceOutlined,
+  CreditCardOutlined, PaidOutlined, ReceiptOutlined, ReceiptLongOutlined,
+  SavingsOutlined, RequestQuoteOutlined,
+
+  // Charts / Data
+  BarChartOutlined, PieChartOutlined, ShowChartOutlined, InsightsOutlined,
+  LeaderboardOutlined, AnalyticsOutlined, DataUsageOutlined, TableChartOutlined,
+  DataObjectOutlined, DataArrayOutlined, StorageOutlined,
+
+  // Commerce
+  ShoppingCartOutlined, ShoppingBagOutlined, StoreOutlined,
+  LocalShippingOutlined, InventoryOutlined, Inventory2Outlined,
+  QrCode2Outlined, CategoryOutlined,
+
+  // Media
+  ImageOutlined, PhotoOutlined, VideocamOutlined, PlayCircleOutlined,
+  AudiotrackOutlined, AttachFileOutlined, LinkOutlined,
+  CloudOutlined, CloudUploadOutlined, CloudDownloadOutlined,
+
+  // Dev / Tech
+  CodeOutlined, BuildOutlined, BugReportOutlined, TerminalOutlined,
+  IntegrationInstructionsOutlined, ApiOutlined, WebhookOutlined,
+  SecurityOutlined, VpnLockOutlined, HttpsOutlined,
+  LayersOutlined, AccountTreeOutlined, DevicesOutlined,
+
+  // Misc / Status
+  CheckCircleOutlined, CancelOutlined, HelpOutlined, QuestionMarkOutlined,
+  BookmarkOutlined, BookmarksOutlined, LabelOutlined, FlagOutlined,
+  TrendingUpOutlined, TrendingDownOutlined, SwapHorizOutlined,
+  TagOutlined, NumbersOutlined, NewReleasesOutlined, FiberNewOutlined,
+  SchoolOutlined, LocalLibraryOutlined, ScienceOutlined, PsychologyOutlined,
+} from '@mui/icons-material'
+import ViewerComponentWrapper from '../ViewerComponentWrapper'
+import { resolveProps, resolveValue } from 'services/builderHelper/resolveProps'
+import { executeJSCode } from 'services/builderHelper/jsExecutor'
+
+// ── Icon registry ─────────────────────────────────────────────────────────────
+const ICON_MAP = {
+  // Folder / file
+  FolderOutlined, FolderOpenOutlined, FolderSharedOutlined,
+  InsertDriveFileOutlined, FileOpenOutlined, FileCopyOutlined,
+  ArticleOutlined, DescriptionOutlined, NoteOutlined, AssignmentOutlined,
+
+  // Actions
+  EditOutlined, DeleteOutlined, VisibilityOutlined, VisibilityOffOutlined,
+  ContentCopyOutlined, DownloadOutlined, UploadOutlined, PrintOutlined,
+  CheckOutlined, CloseOutlined, SendOutlined, RefreshOutlined,
+  SettingsOutlined, InfoOutlined, WarningOutlined, ErrorOutlined,
+  ArchiveOutlined, UnarchiveOutlined, RestoreOutlined,
+  LockOutlined, LockOpenOutlined,
+  StarOutlined, StarBorderOutlined,
+  AddOutlined, RemoveOutlined, AddCircleOutlined, RemoveCircleOutlined,
+  SaveOutlined, SaveAsOutlined, ShareOutlined, OpenInNewOutlined,
+
+  // Navigation / UI
+  HomeOutlined, Home,
+  DashboardOutlined, Dashboard,
+  MenuOutlined, AppsOutlined, GridViewOutlined, ViewListOutlined,
+  TuneOutlined, FilterListOutlined, SortOutlined, SearchOffOutlined,
+  ExpandLessOutlined, ExpandMoreOutlined,
+
+  // People / Org
+  PersonOutlined, Person,
+  GroupOutlined, Group,
+  PeopleOutlined, AccountCircleOutlined, SupervisorAccountOutlined,
+  ContactsOutlined, BadgeOutlined, WorkOutlined, BusinessOutlined,
+  ManageAccountsOutlined, AdminPanelSettingsOutlined,
+
+  // Comm / Notifications
+  MailOutlined, EmailOutlined, PhoneOutlined, ChatOutlined,
+  NotificationsOutlined, NotificationsNoneOutlined,
+  MessageOutlined, ForumOutlined, CommentOutlined,
+  FeedbackOutlined, AnnouncementOutlined,
+
+  // Location / Map
+  LocationOnOutlined, PlaceOutlined, MapOutlined, ExploreOutlined,
+  MyLocationOutlined, NavigationOutlined, DirectionsOutlined,
+
+  // Calendar / Time
+  CalendarTodayOutlined, CalendarMonthOutlined, EventOutlined,
+  AccessTimeOutlined, ScheduleOutlined, TimerOutlined,
+  DateRangeOutlined, TodayOutlined,
+
+  // Finance
+  AttachMoneyOutlined, MoneyOutlined, AccountBalanceOutlined,
+  CreditCardOutlined, PaidOutlined, ReceiptOutlined, ReceiptLongOutlined,
+  SavingsOutlined, RequestQuoteOutlined,
+
+  // Charts / Data
+  BarChartOutlined, PieChartOutlined, ShowChartOutlined, InsightsOutlined,
+  LeaderboardOutlined, AnalyticsOutlined, DataUsageOutlined, TableChartOutlined,
+  DataObjectOutlined, DataArrayOutlined, StorageOutlined,
+
+  // Commerce
+  ShoppingCartOutlined, ShoppingBagOutlined, StoreOutlined,
+  LocalShippingOutlined, InventoryOutlined, Inventory2Outlined,
+  QrCode2Outlined, CategoryOutlined,
+
+  // Media
+  ImageOutlined, PhotoOutlined, VideocamOutlined, PlayCircleOutlined,
+  AudiotrackOutlined, AttachFileOutlined, LinkOutlined,
+  CloudOutlined, CloudUploadOutlined, CloudDownloadOutlined,
+
+  // Dev / Tech
+  CodeOutlined, BuildOutlined, BugReportOutlined, TerminalOutlined,
+  IntegrationInstructionsOutlined, ApiOutlined, WebhookOutlined,
+  SecurityOutlined, VpnLockOutlined, HttpsOutlined,
+  LayersOutlined, AccountTreeOutlined, DevicesOutlined,
+
+  // Misc / Status
+  CheckCircleOutlined, CancelOutlined, HelpOutlined, QuestionMarkOutlined,
+  BookmarkOutlined, BookmarksOutlined, LabelOutlined, FlagOutlined,
+  TrendingUpOutlined, TrendingDownOutlined, SwapHorizOutlined,
+  TagOutlined, NumbersOutlined, NewReleasesOutlined, FiberNewOutlined,
+  SchoolOutlined, LocalLibraryOutlined, ScienceOutlined, PsychologyOutlined,
+
+  // Aliases (common mis-spellings or shorthand the user might try)
+  Folder:       FolderOutlined,
+  File:         InsertDriveFileOutlined,
+  Document:     DescriptionOutlined,
+  Edit:         EditOutlined,
+  Delete:       DeleteOutlined,
+  Add:          AddOutlined,
+  Remove:       RemoveOutlined,
+  Settings:     SettingsOutlined,
+  Info:         InfoOutlined,
+  Warning:      WarningOutlined,
+  Archive:      ArchiveOutlined,
+  Lock:         LockOutlined,
+  Star:         StarOutlined,
+  Bookmark:     BookmarkOutlined,
+  Flag:         FlagOutlined,
+  Label:        LabelOutlined,
+  Tag:          TagOutlined,
+  Check:        CheckOutlined,
+  Close:        CloseOutlined,
+  Refresh:      RefreshOutlined,
+  Download:     DownloadOutlined,
+  Upload:       UploadOutlined,
+  Share:        ShareOutlined,
+  Save:         SaveOutlined,
+  Send:         SendOutlined,
+  Print:        PrintOutlined,
+  Search:       SearchOutlined,
+  Mail:         MailOutlined,
+  Phone:        PhoneOutlined,
+  Location:     LocationOnOutlined,
+  Calendar:     CalendarTodayOutlined,
+  Time:         AccessTimeOutlined,
+  Money:        AttachMoneyOutlined,
+  Chart:        BarChartOutlined,
+  Cart:         ShoppingCartOutlined,
+  Image:        ImageOutlined,
+  Code:         CodeOutlined,
+  Security:     SecurityOutlined,
+  Layers:       LayersOutlined,
+  Person:       PersonOutlined,
+  Group:        GroupOutlined,
+  Business:     BusinessOutlined,
+  Dashboard:    DashboardOutlined,
+  Home:         HomeOutlined,
+  HomeOutline:  HomeOutlined,   // common alias typo
+  Help:         HelpOutlined,
+  Copy:         ContentCopyOutlined,
+  View:         VisibilityOutlined,
+  Eye:          VisibilityOutlined,
+}
+
+function NodeIcon({ name, sx }) {
+  const Comp = name ? (ICON_MAP[name] ?? null) : null
+  if (!Comp) return null
+  return <Comp sx={{ fontSize: 16, ...sx }} />
+}
+
+// ── Flat → nested conversion ──────────────────────────────────────────────────
+function flatToNested(items, idField, parentIdField, childrenField) {
+  const map = {}
+  items.forEach(item => {
+    map[item[idField]] = { ...item, [childrenField]: item[childrenField] ?? [] }
+  })
+  const roots = []
+  items.forEach(item => {
+    const pid = item[parentIdField]
+    if (pid == null || pid === '' || map[pid] == null) {
+      roots.push(map[item[idField]])
+    } else {
+      map[pid][childrenField].push(map[item[idField]])
+    }
+  })
+  return roots
+}
+
+// ── Auto-detect flat vs nested and normalise ──────────────────────────────────
+function normaliseData(data, idField, parentIdField, childrenField) {
+  if (!Array.isArray(data) || data.length === 0) return []
+  const hasParent = data.some(item => parentIdField in item)
+  if (hasParent) return flatToNested(data, idField, parentIdField, childrenField)
+  return data
+}
+
+// ── Collect ALL node IDs (for expand-all) ────────────────────────────────────
+function collectIds(nodes, idField, childrenField) {
+  const ids = new Set()
+  const walk = list => list?.forEach(n => {
+    ids.add(n[idField])
+    walk(n[childrenField])
+  })
+  walk(nodes)
+  return ids
+}
+
+// ── Filter nodes by search text (keeps ancestor path) ────────────────────────
+function filterNodes(nodes, search, labelField, childrenField) {
+  if (!search) return nodes
+  const q = search.toLowerCase()
+  const recurse = list => {
+    const out = []
+    list?.forEach(node => {
+      const kids = recurse(node[childrenField])
+      const match = String(node[labelField] ?? '').toLowerCase().includes(q)
+      if (match || kids.length) out.push({ ...node, [childrenField]: kids })
+    })
+    return out
+  }
+  return recurse(nodes)
+}
+
+// ── 3-dots actions popover ────────────────────────────────────────────────────
+function NodeActionsMenu({ actionsConfig, node, viewerContext }) {
+  const [anchorEl, setAnchorEl] = useState(null)
+  const [runningIdx, setRunningIdx] = useState(null)
+  const [confirmIdx, setConfirmIdx] = useState(null)
+  const open = Boolean(anchorEl)
+
+  const handleOpen = e => {
+    e.stopPropagation()
+    setAnchorEl(e.currentTarget)
+    setConfirmIdx(null)
+  }
+  const handleClose = () => {
+    setAnchorEl(null)
+    setConfirmIdx(null)
+  }
+
+  const runAction = useCallback(async (action, idx) => {
+    if (!action.code) return handleClose()
+    setRunningIdx(idx)
+    try {
+      const { data, form, setData, dataRef, reportRefs,
+              openDialog, closeDialog } = viewerContext ?? {}
+      await executeJSCode(action.code, {
+        data:    data    ?? {},
+        form:    form    ?? {},
+        setData: setData ?? (() => {}),
+        dataRef: dataRef?.current   ?? {},
+        reportRefs: reportRefs?.current ?? {},
+        openDialog:  openDialog  ?? (() => {}),
+        closeDialog: closeDialog ?? (() => {}),
+        extraVars: { node },
+      })
+    } catch (e) {
+      console.error('[TreeView] action error:', e)
+    } finally {
+      setRunningIdx(null)
+      handleClose()
+    }
+  }, [actionsConfig, node, viewerContext])
+
+  const validActions = actionsConfig?.filter(a => a.label?.trim()) ?? []
+  if (!validActions.length) return null
+
+  return (
+    <>
+      <IconButton
+        size='small'
+        onClick={handleOpen}
+        sx={{ p: 0.3, color: 'text.secondary', opacity: 0, transition: 'opacity 0.15s' }}
+        className='tree-actions'
+      >
+        <MoreVertOutlined sx={{ fontSize: 16 }} />
+      </IconButton>
+
+      <Popover
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        onClick={e => e.stopPropagation()}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        elevation={4}
+        PaperProps={{
+          sx: {
+            minWidth: 160,
+            borderRadius: 1.5,
+            overflow: 'hidden',
+            p: 0.5,
+          },
+        }}
+      >
+        {confirmIdx !== null ? (
+          /* ── Confirmation view ───────────────────────────────── */
+          <Box sx={{ px: 1.5, py: 1.25 }}>
+            <Typography variant='caption' sx={{ display: 'block', mb: 1.25, color: 'text.secondary', lineHeight: 1.5 }}>
+              {validActions[confirmIdx].confirmation ?? 'Are you sure?'}
+            </Typography>
+            <Box display='flex' gap={1}>
+              <Button size='small' variant='contained' color='error'
+                disabled={runningIdx === confirmIdx}
+                onClick={() => runAction(validActions[confirmIdx], confirmIdx)}
+                sx={{ flex: 1, fontSize: 12 }}
+              >
+                {runningIdx === confirmIdx ? <CircularProgress size={12} /> : 'Confirm'}
+              </Button>
+              <Button size='small' variant='outlined' color='inherit'
+                onClick={() => setConfirmIdx(null)}
+                sx={{ flex: 1, fontSize: 12 }}
+              >
+                Cancel
+              </Button>
+            </Box>
+          </Box>
+        ) : (
+          /* ── Actions list ────────────────────────────────────── */
+          validActions.map((action, i) => {
+            const isRunning = runningIdx === i
+            return (
+              <Button
+                key={i}
+                fullWidth
+                size='small'
+                variant={action.variant ?? 'text'}
+                color={action.color ?? 'inherit'}
+                disabled={isRunning || runningIdx !== null}
+                startIcon={
+                  isRunning
+                    ? <CircularProgress size={13} />
+                    : <NodeIcon name={action.icon} sx={{ fontSize: 15 }} />
+                }
+                onClick={() => action.confirmation ? setConfirmIdx(i) : runAction(action, i)}
+                sx={{
+                  justifyContent: 'flex-start',
+                  borderRadius: 1,
+                  px: 1.25,
+                  py: 0.6,
+                  fontSize: 13,
+                  fontWeight: 400,
+                  textTransform: 'none',
+                }}
+              >
+                {action.label}
+              </Button>
+            )
+          })
+        )}
+      </Popover>
+    </>
+  )
+}
+
+// ── Single tree node ──────────────────────────────────────────────────────────
+function TreeNode({
+  node, level,
+  // config
+  idField, labelField, childrenField, hasChildrenField,
+  iconField, defaultIcon, leafIcon,
+  selectable, multiSelect, checkboxSelection,
+  showLines, showCount, dense, indent, fontSize,
+  nodeColor, selectedBg, selectedColor, hoverBg, borderRadius,
+  actionsConfig,
+  // state
+  selectedIds, expandedIds,
+  onSelect, onToggle, onLazyExpand, loadingIds,
+  viewerContext, isSearch,
+}) {
+  const children    = node[childrenField] ?? []
+  const nodeId      = node[idField]
+  const label       = node[labelField] ?? nodeId
+  const isSelected  = selectedIds.has(nodeId)
+  const isExpanded  = expandedIds.has(nodeId)
+  const isLoading   = loadingIds.has(nodeId)
+  const hasKids     = children.length > 0
+  // Node signals it has children even if not yet loaded
+  const flaggedKids = hasChildrenField ? !!node[hasChildrenField] : false
+  const expandable  = hasKids || flaggedKids
+
+  const itemPy  = dense ? 0.25 : 0.5
+  const iconSz  = dense ? 14 : 16
+  const fSize   = fontSize ?? (dense ? 12 : 13)
+  const bdRad   = borderRadius ?? 1
+
+  // Resolve icon: node field > defaultIcon > folder/file
+  const resolvedIcon = node[iconField]
+    ?? (isExpanded && expandable ? (defaultIcon ?? 'FolderOpenOutlined')
+      : expandable               ? (defaultIcon ?? 'FolderOutlined')
+                                 : (leafIcon    ?? defaultIcon ?? null))
+
+  const handleExpand = e => {
+    e.stopPropagation()
+    if (!isExpanded && flaggedKids && !hasKids) {
+      onLazyExpand(node)
+    }
+    onToggle(nodeId)
+  }
+
+  const handleSelect = () => {
+    if (!selectable) return
+    onSelect(node)
+  }
+
+  return (
+    <Box>
+      {/* ── Node row ─────────────────────────────────────────────────────── */}
+      <Box
+        onClick={handleSelect}
+        sx={{
+          display: 'flex', alignItems: 'center',
+          py: itemPy,
+          pl: `${level * (indent ?? 20) + 4}px`,
+          pr: 0.5,
+          cursor: selectable ? 'pointer' : 'default',
+          bgcolor: isSelected ? (selectedBg ?? 'primary.main') : 'transparent',
+          color:   isSelected ? (selectedColor ?? 'primary.contrastText') : (nodeColor ?? 'text.primary'),
+          borderRadius: bdRad,
+          mb: 0.25,
+          position: 'relative',
+          '&:hover': {
+            bgcolor: isSelected
+              ? (selectedBg ?? 'primary.main')
+              : (hoverBg ?? 'action.hover'),
+          },
+          '&:hover .tree-actions': { opacity: 1 },
+        }}
+      >
+        {/* Left guide line */}
+        {showLines && level > 0 && (
+          <Box sx={{
+            position: 'absolute',
+            left: `${(level - 1) * (indent ?? 20) + 12}px`,
+            top: 0, bottom: 0, width: '1px',
+            bgcolor: 'divider',
+          }} />
+        )}
+
+        {/* Checkbox */}
+        {checkboxSelection && (
+          <Checkbox
+            size='small' checked={isSelected}
+            onClick={e => e.stopPropagation()}
+            onChange={() => onSelect(node)}
+            sx={{ p: 0.3, mr: 0.5 }}
+          />
+        )}
+
+        {/* Expand toggle */}
+        <Box sx={{ width: iconSz + 4, flexShrink: 0, display: 'flex', alignItems: 'center' }}>
+          {expandable ? (
+            <IconButton size='small' onClick={handleExpand}
+              sx={{ p: 0, color: 'inherit' }}>
+              {isLoading
+                ? <CircularProgress size={iconSz} />
+                : isExpanded
+                  ? <ExpandMore sx={{ fontSize: iconSz }} />
+                  : <ChevronRight sx={{ fontSize: iconSz }} />}
+            </IconButton>
+          ) : (
+            <Box sx={{ width: iconSz + 4 }} />
+          )}
+        </Box>
+
+        {/* Node icon */}
+        {resolvedIcon && (
+          <NodeIcon name={resolvedIcon} sx={{ fontSize: iconSz, mr: 0.75, flexShrink: 0, opacity: 0.8 }} />
+        )}
+
+        {/* Label */}
+        <Typography
+          noWrap
+          sx={{ flex: 1, fontSize: fSize, lineHeight: 1.4, color: 'inherit' }}
+        >
+          {label}
+        </Typography>
+
+        {/* Child count badge */}
+        {showCount && expandable && (
+          <Typography variant='caption'
+            sx={{ ml: 0.5, px: 0.75, py: 0.1, borderRadius: 10,
+              bgcolor: isSelected ? 'rgba(255,255,255,0.2)' : 'action.selected',
+              color: 'inherit', fontSize: 10, flexShrink: 0 }}>
+            {hasKids ? children.length : '…'}
+          </Typography>
+        )}
+
+        {/* 3-dots actions popover */}
+        {actionsConfig?.length > 0 && (
+          <Box onClick={e => e.stopPropagation()} sx={{ flexShrink: 0 }}>
+            <NodeActionsMenu
+              actionsConfig={actionsConfig}
+              node={node}
+              viewerContext={viewerContext}
+            />
+          </Box>
+        )}
+      </Box>
+
+      {/* ── Children ─────────────────────────────────────────────────────── */}
+      {expandable && (
+        <Collapse in={isExpanded} timeout='auto' unmountOnExit>
+          {hasKids && (
+            <Box>
+              {children.map(child => (
+                <TreeNode
+                  key={child[idField]}
+                  node={child}
+                  level={level + 1}
+                  idField={idField} labelField={labelField}
+                  childrenField={childrenField} hasChildrenField={hasChildrenField}
+                  iconField={iconField} defaultIcon={defaultIcon} leafIcon={leafIcon}
+                  selectable={selectable} multiSelect={multiSelect}
+                  checkboxSelection={checkboxSelection}
+                  showLines={showLines} showCount={showCount}
+                  dense={dense} indent={indent} fontSize={fontSize}
+                  nodeColor={nodeColor} selectedBg={selectedBg}
+                  selectedColor={selectedColor} hoverBg={hoverBg}
+                  borderRadius={borderRadius}
+                  actionsConfig={actionsConfig}
+                  selectedIds={selectedIds} expandedIds={expandedIds}
+                  onSelect={onSelect} onToggle={onToggle}
+                  onLazyExpand={onLazyExpand} loadingIds={loadingIds}
+                  viewerContext={viewerContext} isSearch={isSearch}
+                />
+              ))}
+            </Box>
+          )}
+        </Collapse>
+      )}
+    </Box>
+  )
+}
+
+// ── Main renderer ─────────────────────────────────────────────────────────────
+export default function TreeViewRenderer({ node, viewerContext }) {
+  const main = resolveProps(node, 'main', viewerContext)
+
+  const {
+    dataKey,
+    idField          = 'id',
+    labelField       = 'label',
+    childrenField    = 'children',
+    parentIdField    = 'parentId',
+    hasChildrenField,
+
+    selectedKey,
+    selectable       = true,
+    multiSelect      = false,
+    checkboxSelection= false,
+
+    iconField,
+    defaultIcon,
+    leafIcon,
+
+    expandAll        = false,
+    defaultExpanded,
+
+    showSearch       = false,
+    searchPlaceholder= 'Search…',
+
+    dense            = false,
+    showLines        = false,
+    showCount        = false,
+    indent           = 20,
+    height,
+    fontSize,
+    nodeColor,
+    selectedBg,
+    selectedColor,
+    hoverBg,
+    borderRadius,
+
+    actionsConfig    = [],
+    onSelectCode,
+    onExpandCode,
+  } = main
+
+  const { data, setData, isEditMode } = viewerContext ?? {}
+
+  // ── Raw data ──────────────────────────────────────────────────────────────
+  const rawData = resolveValue(dataKey, data) ?? []
+
+  // ── Normalise (flat → nested) ─────────────────────────────────────────────
+  const treeData = useMemo(
+    () => normaliseData(rawData, idField, parentIdField, childrenField),
+    [rawData, idField, parentIdField, childrenField]
+  )
+
+  // ── Search ────────────────────────────────────────────────────────────────
+  const [search, setSearch] = useState('')
+  const isSearching = !!search.trim()
+  const displayData = useMemo(
+    () => filterNodes(treeData, search.trim(), labelField, childrenField),
+    [treeData, search, labelField, childrenField]
+  )
+
+  // ── Expanded state ────────────────────────────────────────────────────────
+  const allIds = useMemo(() => collectIds(treeData, idField, childrenField), [treeData, idField, childrenField])
+
+  const [expandedIds, setExpandedIds] = useState(() => {
+    if (expandAll) return allIds
+    if (Array.isArray(defaultExpanded)) return new Set(defaultExpanded)
+    return new Set()
+  })
+
+  // Re-sync when expandAll or defaultExpanded changes, or data first loads
+  const didInit = useRef(false)
+  useEffect(() => {
+    if (!didInit.current && treeData.length > 0) {
+      didInit.current = true
+      if (expandAll) setExpandedIds(new Set(allIds))
+      else if (Array.isArray(defaultExpanded)) setExpandedIds(new Set(defaultExpanded))
+    }
+  }, [treeData, expandAll, allIds, defaultExpanded])
+
+  // When searching auto-expand all matches
+  useEffect(() => {
+    if (isSearching) {
+      setExpandedIds(new Set(collectIds(displayData, idField, childrenField)))
+    }
+  }, [search, displayData, idField, childrenField])
+
+  const handleToggle = useCallback(id => {
+    setExpandedIds(prev => {
+      const next = new Set(prev)
+      next.has(id) ? next.delete(id) : next.add(id)
+      return next
+    })
+  }, [])
+
+  // ── Lazy loading ──────────────────────────────────────────────────────────
+  const [loadingIds, setLoadingIds] = useState(new Set())
+
+  const handleLazyExpand = useCallback(async expandedNode => {
+    if (!onExpandCode) return
+    const nodeId = expandedNode[idField]
+    setLoadingIds(prev => new Set(prev).add(nodeId))
+    try {
+      await executeJSCode(onExpandCode, {
+        data:    data    ?? {},
+        form:    {},
+        setData: setData ?? (() => {}),
+        extraVars: { node: expandedNode },
+      })
+    } catch (e) {
+      console.error('[TreeView] onExpand error:', e)
+    } finally {
+      setLoadingIds(prev => { const s = new Set(prev); s.delete(nodeId); return s })
+    }
+  }, [onExpandCode, data, setData, idField])
+
+  // ── Selection ─────────────────────────────────────────────────────────────
+  const [selectedIds, setSelectedIds] = useState(new Set())
+
+  const handleSelect = useCallback(async selectedNode => {
+    if (!selectable) return
+    const nodeId = selectedNode[idField]
+
+    let nextSelected
+    if (multiSelect || checkboxSelection) {
+      nextSelected = new Set(selectedIds)
+      nextSelected.has(nodeId) ? nextSelected.delete(nodeId) : nextSelected.add(nodeId)
+    } else {
+      nextSelected = selectedIds.has(nodeId) ? new Set() : new Set([nodeId])
+    }
+    setSelectedIds(nextSelected)
+
+    // Write to data
+    if (selectedKey && setData) {
+      const selectedNodes = multiSelect || checkboxSelection
+        ? rawData.filter(n => nextSelected.has(n[idField]))
+        : (nextSelected.has(nodeId) ? selectedNode : null)
+      setData(prev => ({ ...(prev ?? {}), [selectedKey]: selectedNodes }))
+    }
+
+    // Run onSelect action
+    if (onSelectCode) {
+      try {
+        await executeJSCode(onSelectCode, {
+          data:    data    ?? {},
+          form:    {},
+          setData: setData ?? (() => {}),
+          extraVars: { node: selectedNode },
+        })
+      } catch (e) {
+        console.error('[TreeView] onSelect error:', e)
+      }
+    }
+  }, [selectable, multiSelect, checkboxSelection, selectedIds, idField, selectedKey, setData, rawData, onSelectCode, data])
+
+  // ── Edit-mode placeholder ─────────────────────────────────────────────────
+  if (isEditMode && (!rawData || rawData.length === 0)) {
+    return (
+      <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+        <Box sx={{
+          border: '1px dashed', borderColor: 'divider',
+          borderRadius: 1, p: 2, textAlign: 'center',
+          color: 'text.disabled', fontSize: 12,
+        }}>
+          Tree View — bind <strong>dataKey</strong> to populate
+        </Box>
+      </ViewerComponentWrapper>
+    )
+  }
+
+  return (
+    <ViewerComponentWrapper node={node} viewerContext={viewerContext}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', height: height ? `${height}px` : 'auto' }}>
+
+        {/* ── Search bar ─────────────────────────────────────────────────── */}
+        {showSearch && (
+          <Box sx={{ mb: 1 }}>
+            <TextField
+              size='small' fullWidth
+              placeholder={searchPlaceholder}
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position='start'>
+                    <SearchOutlined sx={{ fontSize: 16, color: 'text.disabled' }} />
+                  </InputAdornment>
+                ),
+                endAdornment: search ? (
+                  <InputAdornment position='end'>
+                    <IconButton size='small' onClick={() => setSearch('')}>
+                      <ClearOutlined sx={{ fontSize: 14 }} />
+                    </IconButton>
+                  </InputAdornment>
+                ) : null,
+              }}
+              sx={{ '& .MuiInputBase-input': { fontSize: 13, py: 0.75 } }}
+            />
+          </Box>
+        )}
+
+        {/* ── Tree ───────────────────────────────────────────────────────── */}
+        <Box sx={{ flex: 1, overflowY: height ? 'auto' : 'visible', pr: 0.5 }}>
+          {displayData.length === 0 ? (
+            <Typography variant='caption' sx={{ color: 'text.disabled', px: 1 }}>
+              {isSearching ? 'No results' : 'No data'}
+            </Typography>
+          ) : displayData.map(rootNode => (
+            <TreeNode
+              key={rootNode[idField]}
+              node={rootNode}
+              level={0}
+              idField={idField} labelField={labelField}
+              childrenField={childrenField} hasChildrenField={hasChildrenField}
+              iconField={iconField} defaultIcon={defaultIcon} leafIcon={leafIcon}
+              selectable={selectable} multiSelect={multiSelect}
+              checkboxSelection={checkboxSelection}
+              showLines={showLines} showCount={showCount}
+              dense={dense} indent={indent} fontSize={fontSize}
+              nodeColor={nodeColor} selectedBg={selectedBg}
+              selectedColor={selectedColor} hoverBg={hoverBg}
+              borderRadius={borderRadius}
+              actionsConfig={actionsConfig}
+              selectedIds={selectedIds} expandedIds={expandedIds}
+              onSelect={handleSelect} onToggle={handleToggle}
+              onLazyExpand={handleLazyExpand} loadingIds={loadingIds}
+              viewerContext={viewerContext} isSearch={isSearching}
+            />
+          ))}
+        </Box>
+
+      </Box>
+    </ViewerComponentWrapper>
+  )
+}