cameleer/cameleer-server
1
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
cameleer-server/.superpowers/brainstorm/10188-1774613058/node-style.html
hsiegeln 673f0958c5
All checks were successful
CI / cleanup-branch (push) Has been skipped
Details
CI / build (push) Successful in 1m4s
Details
CI / docker (push) Successful in 58s
Details
CI / deploy-feature (push) Has been skipped
Details
CI / deploy (push) Successful in 38s
Details
revert: temporarily revert EIP_CIRCUIT_BREAKER compound rendering 
Reverting e8039f9 to diagnose compound rendering regression affecting
all compound types (SPLIT, CHOICE, LOOP, DO_TRY) and error handlers.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-29 18:15:10 +02:00

208 lines
13 KiB
HTML
Raw Permalink Blame History

<h2>Node Visual Style</h2>
<p class="subtitle">Which processor node style fits our design system best? Think MuleSoft / TIBCO BW5 but adapted to our warm parchment theme.</p>
<div class="cards">
<!-- Option A: Icon-first blocks (MuleSoft-inspired) -->
<div class="card" data-choice="a" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 24px; background: #F5F2ED;">
<svg width="100%" height="220" viewBox="0 0 400 220">
<!-- FROM node -->
<g transform="translate(20, 10)">
<rect x="0" y="0" width="160" height="56" rx="8" fill="#1A7F8E" opacity="0.12" stroke="#1A7F8E" stroke-width="1.5"/>
<rect x="0" y="0" width="42" height="56" rx="8" fill="#1A7F8E"/>
<rect x="8" y="0" width="34" height="56" fill="#1A7F8E"/>
<text x="21" y="34" fill="white" font-size="20" text-anchor="middle">&#9654;</text>
<text x="100" y="25" fill="#1A1612" font-size="12" font-weight="600" text-anchor="middle">FROM</text>
<text x="100" y="42" fill="#5C5347" font-size="11" text-anchor="middle">direct:orders</text>
</g>
<!-- Connector -->
<line x1="100" y1="66" x2="100" y2="86" stroke="#9C9184" stroke-width="1.5"/>
<polygon points="95,82 100,90 105,82" fill="#9C9184"/>
<!-- PROCESS node -->
<g transform="translate(20, 90)">
<rect x="0" y="0" width="160" height="56" rx="8" fill="#C6820E" opacity="0.12" stroke="#C6820E" stroke-width="1.5"/>
<rect x="0" y="0" width="42" height="56" rx="8" fill="#C6820E"/>
<rect x="8" y="0" width="34" height="56" fill="#C6820E"/>
<text x="21" y="34" fill="white" font-size="18" text-anchor="middle">&#9881;</text>
<text x="100" y="25" fill="#1A1612" font-size="12" font-weight="600" text-anchor="middle">LOG</text>
<text x="100" y="42" fill="#5C5347" font-size="11" text-anchor="middle">Processing order</text>
</g>
<!-- Connector -->
<line x1="100" y1="146" x2="100" y2="166" stroke="#9C9184" stroke-width="1.5"/>
<polygon points="95,162 100,170 105,162" fill="#9C9184"/>
<!-- TO node -->
<g transform="translate(20, 170)">
<rect x="0" y="0" width="160" height="56" rx="8" fill="#3D7C47" opacity="0.12" stroke="#3D7C47" stroke-width="1.5"/>
<rect x="0" y="0" width="42" height="56" rx="8" fill="#3D7C47"/>
<rect x="8" y="0" width="34" height="56" fill="#3D7C47"/>
<text x="21" y="34" fill="white" font-size="18" text-anchor="middle">&#9724;</text>
<text x="100" y="25" fill="#1A1612" font-size="12" font-weight="600" text-anchor="middle">TO</text>
<text x="100" y="42" fill="#5C5347" font-size="11" text-anchor="middle">kafka:processed</text>
</g>
<!-- CHOICE compound on the right -->
<g transform="translate(210, 10)">
<rect x="0" y="0" width="180" height="210" rx="10" fill="#7C3AED" opacity="0.06" stroke="#7C3AED" stroke-width="1.5" stroke-dasharray="4 2"/>
<text x="10" y="20" fill="#7C3AED" font-size="11" font-weight="600">CHOICE</text>
<!-- When child -->
<g transform="translate(10, 30)">
<rect x="0" y="0" width="160" height="48" rx="6" fill="#7C3AED" opacity="0.12" stroke="#7C3AED" stroke-width="1"/>
<rect x="0" y="0" width="36" height="48" rx="6" fill="#7C3AED"/>
<rect x="6" y="0" width="30" height="48" fill="#7C3AED"/>
<text x="18" y="30" fill="white" font-size="14" text-anchor="middle">&#9670;</text>
<text x="96" y="20" fill="#1A1612" font-size="11" font-weight="600" text-anchor="middle">WHEN</text>
<text x="96" y="36" fill="#5C5347" font-size="10" text-anchor="middle">header.type == 'A'</text>
</g>
<!-- Otherwise child -->
<g transform="translate(10, 88)">
<rect x="0" y="0" width="160" height="48" rx="6" fill="#7C3AED" opacity="0.12" stroke="#7C3AED" stroke-width="1"/>
<rect x="0" y="0" width="36" height="48" rx="6" fill="#7C3AED"/>
<rect x="6" y="0" width="30" height="48" fill="#7C3AED"/>
<text x="18" y="30" fill="white" font-size="14" text-anchor="middle">&#9670;</text>
<text x="96" y="20" fill="#1A1612" font-size="11" font-weight="600" text-anchor="middle">OTHERWISE</text>
<text x="96" y="36" fill="#5C5347" font-size="10" text-anchor="middle">default branch</text>
</g>
</g>
</svg>
</div>
<div class="card-body">
<h3>A: Icon Sidebar Blocks</h3>
<p>MuleSoft-style: colored icon strip on the left, label + detail on the right. Color encodes node type. Compound nodes (choice, split) use dashed containers.</p>
</div>
</div>
<!-- Option B: Rounded pill with centered icon -->
<div class="card" data-choice="b" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 24px; background: #F5F2ED;">
<svg width="100%" height="220" viewBox="0 0 400 220">
<!-- FROM node -->
<g transform="translate(20, 10)">
<rect x="0" y="0" width="160" height="50" rx="25" fill="#1A7F8E" opacity="0.15" stroke="#1A7F8E" stroke-width="1.5"/>
<circle cx="30" cy="25" r="16" fill="#1A7F8E"/>
<text x="30" y="31" fill="white" font-size="14" text-anchor="middle">&#9654;</text>
<text x="98" y="22" fill="#1A1612" font-size="12" font-weight="600" text-anchor="middle">FROM</text>
<text x="98" y="38" fill="#5C5347" font-size="10" text-anchor="middle">direct:orders</text>
</g>
<!-- Connector -->
<line x1="100" y1="60" x2="100" y2="80" stroke="#9C9184" stroke-width="1.5"/>
<polygon points="95,76 100,84 105,76" fill="#9C9184"/>
<!-- PROCESS node -->
<g transform="translate(20, 84)">
<rect x="0" y="0" width="160" height="50" rx="25" fill="#C6820E" opacity="0.15" stroke="#C6820E" stroke-width="1.5"/>
<circle cx="30" cy="25" r="16" fill="#C6820E"/>
<text x="30" y="31" fill="white" font-size="14" text-anchor="middle">&#9881;</text>
<text x="98" y="22" fill="#1A1612" font-size="12" font-weight="600" text-anchor="middle">LOG</text>
<text x="98" y="38" fill="#5C5347" font-size="10" text-anchor="middle">Processing order</text>
</g>
<!-- Connector -->
<line x1="100" y1="134" x2="100" y2="154" stroke="#9C9184" stroke-width="1.5"/>
<polygon points="95,150 100,158 105,150" fill="#9C9184"/>
<!-- TO node -->
<g transform="translate(20, 158)">
<rect x="0" y="0" width="160" height="50" rx="25" fill="#3D7C47" opacity="0.15" stroke="#3D7C47" stroke-width="1.5"/>
<circle cx="30" cy="25" r="16" fill="#3D7C47"/>
<text x="30" y="31" fill="white" font-size="14" text-anchor="middle">&#9724;</text>
<text x="98" y="22" fill="#1A1612" font-size="12" font-weight="600" text-anchor="middle">TO</text>
<text x="98" y="38" fill="#5C5347" font-size="10" text-anchor="middle">kafka:processed</text>
</g>
<!-- CHOICE compound on the right -->
<g transform="translate(210, 10)">
<rect x="0" y="0" width="180" height="200" rx="12" fill="#7C3AED" opacity="0.06" stroke="#7C3AED" stroke-width="1.5" stroke-dasharray="5 3"/>
<text x="90" y="20" fill="#7C3AED" font-size="11" font-weight="600" text-anchor="middle">CHOICE</text>
<!-- When child -->
<g transform="translate(10, 30)">
<rect x="0" y="0" width="160" height="44" rx="22" fill="#7C3AED" opacity="0.15" stroke="#7C3AED" stroke-width="1"/>
<circle cx="26" cy="22" r="14" fill="#7C3AED"/>
<text x="26" y="28" fill="white" font-size="12" text-anchor="middle">&#9670;</text>
<text x="96" y="18" fill="#1A1612" font-size="11" font-weight="600" text-anchor="middle">WHEN</text>
<text x="96" y="34" fill="#5C5347" font-size="10" text-anchor="middle">type == 'A'</text>
</g>
<!-- Otherwise child -->
<g transform="translate(10, 84)">
<rect x="0" y="0" width="160" height="44" rx="22" fill="#7C3AED" opacity="0.15" stroke="#7C3AED" stroke-width="1"/>
<circle cx="26" cy="22" r="14" fill="#7C3AED"/>
<text x="26" y="28" fill="white" font-size="12" text-anchor="middle">&#9670;</text>
<text x="96" y="18" fill="#1A1612" font-size="11" font-weight="600" text-anchor="middle">OTHERWISE</text>
<text x="96" y="34" fill="#5C5347" font-size="10" text-anchor="middle">default</text>
</g>
</g>
</svg>
</div>
<div class="card-body">
<h3>B: Rounded Pills</h3>
<p>Softer, more modern look with pill-shaped nodes and circular icons. Lighter feel. Compounds still use dashed containers.</p>
</div>
</div>
<!-- Option C: TIBCO BW5 style - rectangular with top color bar -->
<div class="card" data-choice="c" onclick="toggleSelect(this)">
<div class="card-image" style="padding: 24px; background: #F5F2ED;">
<svg width="100%" height="220" viewBox="0 0 400 220">
<!-- FROM node -->
<g transform="translate(20, 10)">
<rect x="0" y="0" width="160" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="160" height="6" rx="4" fill="#1A7F8E"/>
<rect x="4" y="0" width="152" height="6" fill="#1A7F8E"/>
<text x="18" y="32" fill="#1A7F8E" font-size="16">&#9654;</text>
<text x="40" y="30" fill="#1A1612" font-size="12" font-weight="600">FROM</text>
<text x="40" y="46" fill="#5C5347" font-size="10">direct:orders</text>
</g>
<!-- Connector -->
<line x1="100" y1="66" x2="100" y2="86" stroke="#9C9184" stroke-width="1.5"/>
<polygon points="95,82 100,90 105,82" fill="#9C9184"/>
<!-- PROCESS node -->
<g transform="translate(20, 90)">
<rect x="0" y="0" width="160" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="160" height="6" rx="4" fill="#C6820E"/>
<rect x="4" y="0" width="152" height="6" fill="#C6820E"/>
<text x="18" y="32" fill="#C6820E" font-size="16">&#9881;</text>
<text x="40" y="30" fill="#1A1612" font-size="12" font-weight="600">LOG</text>
<text x="40" y="46" fill="#5C5347" font-size="10">Processing order</text>
</g>
<!-- Connector -->
<line x1="100" y1="146" x2="100" y2="166" stroke="#9C9184" stroke-width="1.5"/>
<polygon points="95,162 100,170 105,162" fill="#9C9184"/>
<!-- TO node -->
<g transform="translate(20, 170)">
<rect x="0" y="0" width="160" height="56" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="160" height="6" rx="4" fill="#3D7C47"/>
<rect x="4" y="0" width="152" height="6" fill="#3D7C47"/>
<text x="18" y="32" fill="#3D7C47" font-size="16">&#9724;</text>
<text x="40" y="30" fill="#1A1612" font-size="12" font-weight="600">TO</text>
<text x="40" y="46" fill="#5C5347" font-size="10">kafka:processed</text>
</g>
<!-- CHOICE compound on the right -->
<g transform="translate(210, 10)">
<rect x="0" y="0" width="180" height="210" rx="4" fill="white" stroke="#7C3AED" stroke-width="1.5"/>
<rect x="0" y="0" width="180" height="22" rx="4" fill="#7C3AED"/>
<rect x="4" y="4" width="172" height="18" fill="#7C3AED"/>
<text x="90" y="16" fill="white" font-size="11" font-weight="600" text-anchor="middle">CHOICE</text>
<!-- When child -->
<g transform="translate(10, 32)">
<rect x="0" y="0" width="160" height="48" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="160" height="5" rx="4" fill="#7C3AED"/>
<rect x="4" y="0" width="152" height="5" fill="#7C3AED"/>
<text x="14" y="28" fill="#7C3AED" font-size="14">&#9670;</text>
<text x="34" y="26" fill="#1A1612" font-size="11" font-weight="600">WHEN</text>
<text x="34" y="40" fill="#5C5347" font-size="10">type == 'A'</text>
</g>
<!-- Otherwise child -->
<g transform="translate(10, 90)">
<rect x="0" y="0" width="160" height="48" rx="4" fill="white" stroke="#E4DFD8" stroke-width="1"/>
<rect x="0" y="0" width="160" height="5" rx="4" fill="#7C3AED"/>
<rect x="4" y="0" width="152" height="5" fill="#7C3AED"/>
<text x="14" y="28" fill="#7C3AED" font-size="14">&#9670;</text>
<text x="34" y="26" fill="#1A1612" font-size="11" font-weight="600">OTHERWISE</text>
<text x="34" y="40" fill="#5C5347" font-size="10">default</text>
</g>
</g>
</svg>
</div>
<div class="card-body">
<h3>C: Top-Bar Cards</h3>
<p>TIBCO BW5-inspired: white cards with colored top accent bar. Clean, professional, card-like. Compound nodes get a full colored header bar with white title text.</p>
</div>
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink