Spike Solution - End Shapes

This spike solution was a request to Claude for tags with mermaid inspired end shapes, < - chevron , ( - round or [ - flat . I asked Claude to add the shapes on to html spans. You'll find the code at GitHub safer-centaurs-toolbox.

End shapes are important ubiquitously in Scorpio Diagrams. 'Badges' with text on them have end shapes. The end shapes can be used in specifying the shapes of boxes in flow charts. Ribbons have end shapes, making them into arrows and connections of other kinds. In tiles based on Scratch (the tile-based educational programming languages), the pieces that click together are shaped by 'end shapes', and these shapes follow through naturally to the round and angled pieces used within Scratch shapes. Missing fields can be shown with a sunken bevel, and the shape can indicate what kind of data is required. We can type a value into such a misisng field, or we can drag a piece of the right shape into it.

Scorpio extends the idea of the end shape to include named end shapes, such as :zig-zag: and :snake-head:. This leads to using SVG paths for defining the end shapes, to get enough generality.

Version 1 - Choosing Classes for the End Shapes

Claude created the user interface for adjusting the tags, but struggled with the indented round shape - making a bite out of the tag rather than the indent I wanted so as to match the semi circular outdent. I could have fixed that by changing some 50%s to 100%s, but I liked the bite.

I had to prompt Claude to use the background colour in making the tag shapes, as otherwise it used a fixed colour, which only works with one colour of tags. Claude can't see the output, so it didn't see the problem. Claude confused inwards and outwards in some places too, which was for me to fix up. Easier to fix by hand than to prompt Claude to fix.

Claude added a cute transition when you change settings.

// A tag as specced in the first demo
<span class="demo-span left-round right-chevron-out color-blue">Home</span>

Version 2 - Tags Drawn as SVG Paths

Claude's first solution used the css 'border trick' for chevrons. That's the trick where you draw wide borders of different colours on different edges. Where the borders meet they do so in a mitred fashion, and the mitre causes the chevron shape. It is a neat trick, but it is terrible for what I want to do. It does not extend to arbitrary shapes. Likewise the round ends work with a border radius - and that specific trick only works for round ends. I instructed Claude to use svg paths for the next iteration, to allow more complex paths. At some point I will want the 'zig-zag' end shape.

// A tag with end shapes in the new format
<span class="tag" data="['round','chevron']" style="background-color: #e74c3c;">Inspire</span>

In version 2 I asked for the data="['chevron','round']" syntax that you can see by inspecting the code. I knew creating custom classes for each possible option would get ridiculous. I want, for example, bites of different sizes, and variation of slope of the chevrons - so I want to be able to supply sizing options. Although it is possible to set up classes for many individual end shapes, it is much easier to treat the entire outline as a single svg shape. The data array acts as a nascent domain specific language which you can later extend. For example I would like to add some shaping to the upper and lower edges.

By hand I adjusted the extra or reduced padding for the text when there is an end shape. It's a visual thing which Claude can't do.

Claude added the drop shadow and the interaction on hover. Claude has been trained to make the styling of html pop. The shadow is on the whole span rather than on the svg, so there is tweaking to do to make it more satisfying.

Take Homes

I hadn't thought of using data='[args]' instead of multiple classes until Claude started using something like it. The querySelector below was new to me, and makes processing all tags on a page straightforward.

const tags = document.querySelectorAll('.tag[data]');

Claude made a lot of boilerplate code for the svg, which gets something working. I am not sure I 'like' it, but it gets the job done, and I can pare it down later.

Claude is unaware of the issue that end shapes are drawn bottom to top on the left edge and top to bottom on the right edge. When reusing shapes on left and right, we may need reflection or rotation. Claude adds a lot more padding in the tags than I would. These are all things we can fix later.