Function PresetTile

src/tools/shape-magic/Controls.jsx:144–219

({ preset, onClick })

};

const PresetTile = ({ preset, onClick }) => {
  // Render an accurate, merged preview of the preset (shapes + bridges + merged corners),
  // so the thumbnail matches exactly what gets placed on the canvas.
  const shapes = preset.build();
  const bridges = computeBridges(shapes, preset.radius, 1);
  const corners = computeCornerRadii(shapes, preset.radius, 1);

  let minX = Infinity,
    minY = Infinity,
    maxX = -Infinity,
    maxY = -Infinity;
  shapes.forEach(s => {
    minX = Math.min(minX, s.x);
    minY = Math.min(minY, s.y);
    maxX = Math.max(maxX, s.x + s.w);
    maxY = Math.max(maxY, s.y + s.h);
  });
  const pad = 12;
  const vbW = maxX - minX + pad * 2;
  const vbH = maxY - minY + pad * 2;

  return (
    <Flex
      as="button"
      type="button"
      direction="column"
      align="center"
      justify="center"
      gap={1}
      p={2}
      bg="var(--bg-elevated)"
      border="1px solid var(--border-primary)"
      borderRadius="var(--radius-sm)"
      cursor="pointer"
      transition="all 0.15s"
      _hover={{ borderColor: 'var(--color-primary)', bg: 'rgba(168, 85, 247, 0.08)' }}
      onClick={onClick}
      title={preset.name}
    >
      <Box w="100%" h="42px">
        <svg
          width="100%"
          height="100%"
          viewBox={`${minX - pad} ${minY - pad} ${vbW} ${vbH}`}
          preserveAspectRatio="xMidYMid meet"
        >
          <g fill="var(--text-muted)">
            {shapes.map(s => (
              <path
                key={s.id}
                d={getRoundedRectPath(
                  s.x,
                  s.y,
                  s.w,
                  s.h,
                  corners[s.id] || {
                    tl: preset.radius,
                    tr: preset.radius,