engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.2k

fix(ui): replace Tailwind classes with direct SVG attributes in FlowDiagram

Browse source 
- Convert all SVG fill/stroke from Tailwind classes to direct attributes
- Use hsl(var(--css-custom-property)) for theme compatibility
- Add explicit fontSize, fontFamily, fontWeight instead of text-* classes
- Fixes text visibility issue where labels appeared as black rectangles

Resolves rendering bug where SVG text elements weren't displaying properly
due to improper CSS class application on SVG elements.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ajax Davis 2025-11-27 23:14:41 +10:00
parent 0c0fcee7ae
commit d19b1e2925
1 changed files with 94 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

121
packages/ui/src/FlowDiagram/FlowDiagram.tsx
View file

@ -48,16 +48,20 @@ export function FlowDiagram({
y="20"
width="100"
height="60"
className="fill-surface stroke-foreground"
fill="hsl(var(--surface))"
stroke="hsl(var(--foreground))"
strokeWidth="2"
rx="0"
/>
<text
x="200"
y="45"
className="text-sm font-mono font-bold fill-foreground"
fill="hsl(var(--foreground))"
textAnchor="middle"
dominantBaseline="middle"
fontSize="14"
fontFamily="monospace"
fontWeight="700"
>
AI Agent
</text>
@ -67,7 +71,7 @@ export function FlowDiagram({
<path
id="path1"
d="M 200 80 L 200 130"
className="stroke-brutalist-accent"
stroke="hsl(var(--brutalist-accent))"
strokeWidth="3"
fill="none"
markerEnd="url(#arrowhead)"
@ -85,25 +89,31 @@ export function FlowDiagram({
y="130"
width="160"
height="50"
className="fill-brutalist-accent/10 stroke-brutalist-accent"
fill="hsl(var(--brutalist-accent) / 0.1)"
stroke="hsl(var(--brutalist-accent))"
strokeWidth="2"
rx="0"
/>
<text
x="200"
y="152"
className="text-xs font-mono font-bold fill-foreground"
fill="hsl(var(--foreground))"
textAnchor="middle"
dominantBaseline="middle"
fontSize="12"
fontFamily="monospace"
fontWeight="700"
>
Semantic Query
</text>
<text
x="200"
y="168"
className="text-xs font-mono fill-foreground-secondary"
fill="hsl(var(--foreground-secondary))"
textAnchor="middle"
dominantBaseline="middle"
fontSize="12"
fontFamily="monospace"
>
&quot;email, slack...&quot;
</text>
@ -113,7 +123,7 @@ export function FlowDiagram({
<path
id="path2"
d="M 200 180 L 200 240"
className="stroke-brutalist-accent"
stroke="hsl(var(--brutalist-accent))"
strokeWidth="3"
fill="none"
markerEnd="url(#arrowhead)"
@ -131,34 +141,42 @@ export function FlowDiagram({
y="240"
width="200"
height="80"
className="fill-surface stroke-foreground"
fill="hsl(var(--surface))"
stroke="hsl(var(--foreground))"
strokeWidth="3"
rx="0"
/>
<text
x="200"
y="265"
className="text-base font-bold fill-foreground"
fill="hsl(var(--foreground))"
textAnchor="middle"
dominantBaseline="middle"
fontSize="16"
fontFamily="monospace"
fontWeight="700"
>
TPMJS REGISTRY
</text>
<text
x="200"
y="285"
className="text-xs font-mono fill-foreground-secondary"
fill="hsl(var(--foreground-secondary))"
textAnchor="middle"
dominantBaseline="middle"
fontSize="12"
fontFamily="monospace"
>
Dynamic Discovery
</text>
<text
x="200"
y="305"
className="text-xs font-mono fill-brutalist-accent"
fill="hsl(var(--brutalist-accent))"
textAnchor="middle"
dominantBaseline="middle"
fontSize="12"
fontFamily="monospace"
>
2,847 tools
</text>
@ -169,7 +187,8 @@ export function FlowDiagram({
cx="200"
cy="280"
r="5"
className="fill-none stroke-brutalist-accent"
fill="none"
stroke="hsl(var(--brutalist-accent))"
strokeWidth="2"
opacity="0"
style={{
@ -181,7 +200,7 @@ export function FlowDiagram({
<path
id="path3a"
d="M 150 320 L 80 380"
className="stroke-brutalist-accent"
stroke="hsl(var(--brutalist-accent))"
strokeWidth="2"
fill="none"
markerEnd="url(#arrowhead)"
@ -194,7 +213,7 @@ export function FlowDiagram({
<path
id="path3b"
d="M 200 320 L 200 380"
className="stroke-brutalist-accent"
stroke="hsl(var(--brutalist-accent))"
strokeWidth="2"
fill="none"
markerEnd="url(#arrowhead)"
@ -207,7 +226,7 @@ export function FlowDiagram({
<path
id="path3c"
d="M 250 320 L 320 380"
className="stroke-brutalist-accent"
stroke="hsl(var(--brutalist-accent))"
strokeWidth="2"
fill="none"
markerEnd="url(#arrowhead)"
@ -226,22 +245,38 @@ export function FlowDiagram({
y="380"
width="100"
height="80"
className="fill-surface stroke-foreground"
fill="hsl(var(--surface))"
stroke="hsl(var(--foreground))"
strokeWidth="2"
rx="0"
/>
<text x="70" y="405" className="text-sm font-bold fill-foreground" textAnchor="middle">
<text
x="70"
y="405"
fill="hsl(var(--foreground))"
textAnchor="middle"
fontSize="14"
fontWeight="700"
>
Email
</text>
<text
x="70"
y="425"
className="text-xs font-mono fill-foreground-secondary"
fill="hsl(var(--foreground-secondary))"
textAnchor="middle"
fontSize="12"
fontFamily="monospace"
>
Tool
</text>
<text x="70" y="445" className="text-xs fill-brutalist-accent" textAnchor="middle">
<text
x="70"
y="445"
fill="hsl(var(--brutalist-accent))"
textAnchor="middle"
fontSize="12"
>
12K calls
</text>
@ -251,22 +286,38 @@ export function FlowDiagram({
y="380"
width="100"
height="80"
className="fill-surface stroke-foreground"
fill="hsl(var(--surface))"
stroke="hsl(var(--foreground))"
strokeWidth="2"
rx="0"
/>
<text x="200" y="405" className="text-sm font-bold fill-foreground" textAnchor="middle">
<text
x="200"
y="405"
fill="hsl(var(--foreground))"
textAnchor="middle"
fontSize="14"
fontWeight="700"
>
Slack
</text>
<text
x="200"
y="425"
className="text-xs font-mono fill-foreground-secondary"
fill="hsl(var(--foreground-secondary))"
textAnchor="middle"
fontSize="12"
fontFamily="monospace"
>
Tool
</text>
<text x="200" y="445" className="text-xs fill-brutalist-accent" textAnchor="middle">
<text
x="200"
y="445"
fill="hsl(var(--brutalist-accent))"
textAnchor="middle"
fontSize="12"
>
8K calls
</text>
@ -276,22 +327,38 @@ export function FlowDiagram({
y="380"
width="100"
height="80"
className="fill-surface stroke-foreground"
fill="hsl(var(--surface))"
stroke="hsl(var(--foreground))"
strokeWidth="2"
rx="0"
/>
<text x="330" y="405" className="text-sm font-bold fill-foreground" textAnchor="middle">
<text
x="330"
y="405"
fill="hsl(var(--foreground))"
textAnchor="middle"
fontSize="14"
fontWeight="700"
>
Calendar
</text>
<text
x="330"
y="425"
className="text-xs font-mono fill-foreground-secondary"
fill="hsl(var(--foreground-secondary))"
textAnchor="middle"
fontSize="12"
fontFamily="monospace"
>
Tool
</text>
<text x="330" y="445" className="text-xs fill-brutalist-accent" textAnchor="middle">
<text
x="330"
y="445"
fill="hsl(var(--brutalist-accent))"
textAnchor="middle"
fontSize="12"
>
5K calls
</text>
</g>