Svelte 5 component · machines-ui · Flow
FlowNode
A flow node in two looks: `frame`, our dashed character frame, and `card`, the rounded tinted card of the flow editor. Both take the shared props and show every value; the frame also takes its own dash, movement and corner props, which a card cannot be given. A header, a body, connection ports on any side, and a status with its own colour. It needs no canvas, so it works on any page; a canvas can place it and link it to others.
Install
FlowNode is a Svelte 5 workflow node component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { FlowNode } from '@fractaldesign/machines-ui';Usage
<FlowNode title="CORE" badge="type" status="done">
<strong>Core Template</strong>
<p>Triggered when scaffold begins.</p>
</FlowNode>Props
| Name | Type | Default |
|---|---|---|
title | string Caption of the node: on the top edge as `[ TITLE ]` in the frame look, the header label in the card look. | — |
look | 'frame' | 'card' Draw the dashed character frame. This is the default. | D.look |
status | Status Where the node is in a run. `running` animates it; `done`, `warning` and `error` colour the status from the shared `--success`, `--warning` and `--danger` tokens. Default 'idle'. | D.status |
statusLabel | string | false Text shown for the status. Defaults to the status's own word; any text works, and `false` hides it. | — |
selected | boolean Lights the node up as the current selection: its corners and ports are at full strength, where an unselected node dims them (unless it is running), and the card gets a stronger border. Default false. | D.selected |
badge | string Short tag at the right of the node header, such as `type` or `IF`. Any text works. | — |
input | PortSide | false The side the input port is on, or `false` for none. Default 'top'. | D.input |
outputs | NodePort[] The output ports and the side each leaves from; ports sharing a side are spread evenly along it. Default one `out` port on the bottom. | [...D.outputs] |
pad | Pad Inner padding of the node. Default 'md'. | D.pad |
accent | string Colour of the node: its frame corners, title and ports, or its card border, tint, header and ports. Any CSS colour. Defaults to `--graph-accent`. | — |
onportdown | (port: 'in' | PortId, event: PointerEvent) => void Called when a port is pressed with `in` for the input or the output's id; use it to start a link from a canvas. | — |
class | string | '' |
icon | Snippet Icon drawn at the start of the header. | — |
children | Snippet Content rendered inside the component. | — |
dash | Dash Dash rhythm of the frame's border. Default 'token'. | — |
motion | Motion How the border moves: `march`, `reverse`, `pulse`, `scan` or `draw` (on hover). Left unset, a running node marches and any other node is still; `none` holds a running node still too. | — |
speed | number Seconds per motion cycle. Defaults per motion (march 0.7, pulse 2, scan 3). | — |
easing | Easing Curve the motion runs on: a name from `EASINGS` or any CSS timing function. | — |
pauseOnHover | boolean Pause the motion while the node is hovered. Default false. | — |
cornerBlink | boolean Blink the corner glyphs. Left unset, a selected node blinks. | — |
corner | string Character drawn at each corner of the frame. Default "+". | — |
Snippets
| Name | Type | Default |
|---|---|---|
default | unknown | — |
icon | unknown | — |