Draw the first node
What you will make
Section titled “What you will make”Replace the empty workspace message with one coral Idea card. The card is one recognizable workflow node, made from a rounded body, a title, a subtitle, and two small ports.
How it works
Section titled “How it works”Each Rectangle and
Text has an explicit local style object. Pibbl
styles do not cascade or inherit through the component tree, so the coral card
body, dark type, border, and font choices live on the primitives that paint
them. This makes the source a useful place to see the exact geometry and paint
choices that form one node.
Build the change
Section titled “Build the change”The card lives in a translated Group. Its workspace
position is (92, 180); after the workspace starts at y=56, the Group is at
root position (92, 236). Inside that Group, the card body starts at local
(0, 0), while the title and subtitle use card-local positions. The Group
applies its translation once to every child.
Predict and try
Section titled “Predict and try”Change the Idea color and the Find the spark subtitle, then compare the
result with the original card. The card body remains the painted primitive that
can participate in pointer targeting later. Its text and the two 10-pixel ports
are decoration, so each uses pointerEvents="none". That opt-out prevents a
label or port from winning a future click intended for the card body.
Check your result
Section titled “Check your result”The IDEA title should paint near root (176, 270), with Find the spark
below it. Keep the three spaces distinct: workspace (92, 180), root
(92, 236), and card-local (0, 0). Do not add the Group translation to each
child again, or the card will move twice as far. For more style detail, see
Style and draw.
What you learned
Section titled “What you learned”Local styles keep the card’s paint and geometry explicit, while the translated Group gives every child one shared coordinate origin. Decorative paint opts out of targeting so the body can own future node interaction.
Open the interactive workbench
Implementation guidance for agents
Section titled “Implementation guidance for agents”Read the Authoring, signals, and lifecycle companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.
Documentation version
Section titled “Documentation version”Documentation built with @pibbl/core 0.0.2, revision c321a83. ALPHA — NOT FOR PRODUCTION USE.