machines-ui
graphs

Flow

One or more rows of labelled nodes joined by arrows, with an accent path for the live branch and muted nodes for what trails it.

Install

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

Preview

[ OPTIMISTIC UI ]
tap
server
update
tap
update
server syncs
<script lang="ts">
	import { GraphFlow, type GraphFlowRow } from '@fractaldesign/machines-ui';

	const rows: GraphFlowRow[] = [
	  { nodes: [{ label: 'tap' }, { label: 'server' }, { label: 'update' }] },
	  {
	    nodes: [
	      { label: 'tap' },
	      { label: 'update', tone: 'accent' },
	      { label: 'server syncs', stretch: true, tone: 'muted' }
	    ]
	  }
	];
</script>

<GraphFlow title="OPTIMISTIC UI" {rows} />

Props

PropTypeDefaultDescription
title* string —Caption drawn on the top edge as `[ TITLE ]`. Uppercase, 1–2 words.
rows* GraphFlowRow[] —Flow rows, top to bottom; each row is a sequence of nodes.
palette GraphPalette
'mono''duo''multi'
—How many accent colours the graph uses: `mono` one, `duo` two, `multi` three.
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
GraphFlowTonetypeTone of a flow node: default foreground, accent (live path), or muted.
'default' | 'accent' | 'muted'
GraphFlowNodeinterface
GraphFlowRowinterface

Theming

CSS custom properties this component reads.

  • --graph-accent
  • --graph-accent-2
  • --text-primary
  • --text-secondary

Related

Built from

src/lib/components/graphs/GraphFlow.svelte

machines-ui