machines-ui
graphs

Tree

An indented tree with `├─` and `└─` branch characters: each node carries a label, an optional meta tag, and an optional accent, and a single root is drawn without branches.

Install

pnpm add @fractaldesign/machines-ui
import '@fractaldesign/machines-ui/style.css';
import { GraphTree } from '@fractaldesign/machines-ui';

Preview

[ REGISTRY ]
  • src/lib
  • graphs
  • GraphStat.svelte graph
  • GraphTable.svelte graph
  • frame
  • Frame.svelte frame
Tree with 6 nodes
<GraphTree
  title="REGISTRY"
  nodes={[
    {
      label: 'src/lib',
      children: [
        {
          label: 'graphs',
          children: [
            { label: 'GraphStat.svelte', meta: 'graph' },
            { label: 'GraphTable.svelte', meta: 'graph' }
          ]
        },
        {
          label: 'frame',
          children: [{ label: 'Frame.svelte', meta: 'frame', accent: true }]
        }
      ]
    }
  ]}
/>

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
nodes* TreeNode[] —The root nodes of the tree, nested through `children`.
corner string —Character drawn at each corner of the frame.
class string ''

API

  • class forwarded to the outer element
  • motion reveals on scroll into view

Types

NameKindDescription
TreeNodeinterfaceIndented file/org tree with ├─/└─ branches.
FlatRowinterface

Theming

CSS custom properties this component reads.

  • --border
  • --graph-accent
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphTree.svelte

machines-ui