machines-ui
animated

Deps

A dependency tree drawn with ASCII branch lines, cascading package by package and showing each name with its version tag.

Install

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

Preview

[ DEPS ]
Dependency tree with 6 packages under 2 roots.
<script lang="ts">
	import { GraphDeps, type DepNode } from '@fractaldesign/machines-ui';

	const deps: DepNode[] = [
	  { name: 'machines-ui', version: '0.9.0', accent: true, children: [
	    { name: 'svelte', version: '^5.0.0' },
	    { name: 'shiki', version: '^4.0.0' }
	  ]}
	];
</script>

<GraphDeps title="DEPS" {deps} />

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`.
deps* DepNode[] —Root-level dependencies, each with a name and version.
depth number 6Maximum depth to render. Default 6. Clamped 1..16.
animated boolean trueAnimate the cascade. Default true. Reduced motion shows the full tree.
speedMs number 80Milliseconds between cascading reveals. Default 80.
label string ''Caption rendered muted under the tree.
class string ''

API

  • class forwarded to the outer element
  • motion runs live; set animated={false} to freeze
  • a11y honours prefers-reduced-motion

Types

NameKindDescription
DepNodeinterfaceA node in a dependency tree.
FlatRowinterface

Theming

CSS custom properties this component reads.

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

Related

Built from

src/lib/components/animated/GraphDeps.svelte

machines-ui