Node card setPro

Seven typed node cards for the node canvas (prompt, image, generate, upscale, mask, rewrite and output), each with live controls and its run state, plus the palette they are added from.

Markdown

On this page

ProThe seven media node cards, all live, with the palette they are added from.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/node-card-set

Usage

tsx

import { NodeCanvas } from "@/components/ui/chatcn/pro/node-canvas"
import {
  createMediaNode,
  mediaNodeTypes,
  NodePalette,
} from "@/components/ui/chatcn/pro/node-card-set"

const nodes = [createMediaNode("prompt", { id: "p", x: 0, y: 0 })]

<NodePalette onAdd={(type) => add(type)} />
<NodeCanvas defaultNodes={nodes} nodeTypes={mediaNodeTypes} />

createMediaNode(type, { id, x, y, data }) returns a node with the type's ports and default data. mediaNodeTypes plugs the cards into NodeCanvas; NodeCard renders one card on its own, for side panels and docs. Every card writes its controls back to node.data, so your run code reads one object.

Type	Ports	Data
`prompt`	Text out	`text`
`image-input`	Image out	`src`, `alt`, `name`, `width`, `height`; drop a file or choose one
`model`	Prompt, image and mask in; images out	`model`, `models`, `steps`, `guidance`, `seed` (null for random), `count`
`upscale`	Image in and out	`factor` (2 or 4), incoming `width` and `height` for the result size
`mask`	Image in, mask out	`mode`: subject, background or brush; `src` for the preview
`llm`	Text in and out	`instruction`, `model`, `output` (streams while running)
`output`	Images in (several wires)	`images`, `count` for placeholders, `onSave`

Examples

Run states

One vocabulary on every card: not run, queued, running with a percent or a step count, done with its time, cached and failed with the reason and Retry. Each state has a glyph and a word, never color alone.

ProEvery run state on one card, plus streaming text, waiting output and an empty image.

Props

Part	Props	Notes
`NodeCard`	`node`, `onNodeChange`, `selected`, `readOnly`	One card outside a canvas
`NodePalette`	`types`, `onAdd`, `disabled`, `label`	Click or Enter adds; drag drops on a canvas
`MEDIA_NODE_SPECS`		Title, description, icon, ports and default data per type

Keyboard

Key	Action
`Tab`	Through each card's controls in reading order
Arrows in a segmented control	Choose scale or mask mode
`↑` `↓` in a number field	Step the value (steps, guidance, seed, images)
`Enter` on a palette entry	Add that node

Accessibility

Every field has a visible label; segmented controls are native radio groups.
Run state is part of the card's name, and a failed card's reason is plain text next to its Retry button.
Rewrite output is announced once when it finishes, not per token. File names truncate in the middle of the name and keep their extension.

Motion

Cards hold still while you edit them. Results fade in over 200 ms once decoded; streamed text appends with the kit's caret and no per word effects.