@labmgm/patterns 0.1.0

package/dist/generator.cjs

@@ -0,0 +1,826 @@
+'use strict';
+
+// src/palette.ts
+var PALETTE = ["blue", "yellow", "red", "green", "white"];
+var PALETTE_VAR = {
+  blue: "var(--brand-blue)",
+  yellow: "var(--brand-yellow)",
+  red: "var(--brand-red)",
+  green: "var(--brand-green)",
+  white: "var(--surface)"
+};
+var PALETTE_HEX = {
+  blue: "#3a6dc5",
+  yellow: "#f7bf33",
+  red: "#f94141",
+  green: "#0f8657",
+  white: "#ffffff"
+};
+function contrastShapeColor(bg) {
+  return bg === "white" ? "blue" : "white";
+}
+
+// src/rng.ts
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return function() {
+    a |= 0;
+    a = a + 1831565813 | 0;
+    let t = a;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+function pick(rng, items) {
+  return items[Math.floor(rng() * items.length)];
+}
+function shuffle(rng, items) {
+  for (let i = items.length - 1; i > 0; i--) {
+    const j = Math.floor(rng() * (i + 1));
+    [items[i], items[j]] = [items[j], items[i]];
+  }
+  return items;
+}
+
+// src/colour-graph.ts
+var MAX_BACKTRACKS = 1e4;
+function colourGrid({ rows, cols, seed }) {
+  const rng = mulberry32(seed);
+  const total = rows * cols;
+  const ids = Array.from({ length: total }, (_, i) => i);
+  const order = shuffle(rng, [...ids]);
+  const candidates = ids.map(() => shuffle(rng, [...PALETTE]));
+  const assignment = new Array(total).fill(void 0);
+  const tried = new Array(total).fill(0);
+  const neighbours = (idx) => {
+    const r = Math.floor(idx / cols);
+    const c = idx % cols;
+    const out2 = [];
+    if (r > 0) out2.push((r - 1) * cols + c);
+    if (r < rows - 1) out2.push((r + 1) * cols + c);
+    if (c > 0) out2.push(r * cols + (c - 1));
+    if (c < cols - 1) out2.push(r * cols + (c + 1));
+    return out2;
+  };
+  let cursor = 0;
+  let backtracks = 0;
+  while (cursor < order.length) {
+    const idx = order[cursor];
+    const cands = candidates[idx];
+    let placed = false;
+    while (tried[idx] < cands.length) {
+      const candidate = cands[tried[idx]];
+      tried[idx] = tried[idx] + 1;
+      const ok = neighbours(idx).every((n) => assignment[n] !== candidate);
+      if (ok) {
+        assignment[idx] = candidate;
+        placed = true;
+        break;
+      }
+    }
+    if (placed) {
+      cursor += 1;
+    } else {
+      tried[idx] = 0;
+      assignment[idx] = void 0;
+      cursor -= 1;
+      backtracks += 1;
+      if (cursor < 0 || backtracks > MAX_BACKTRACKS) {
+        throw new Error(
+          `colourGrid: could not satisfy adjacency constraint after ${MAX_BACKTRACKS} backtracks (rows=${rows}, cols=${cols}, seed=${seed}).`
+        );
+      }
+    }
+  }
+  const out = [];
+  for (let i = 0; i < total; i++) {
+    out.push({
+      row: Math.floor(i / cols),
+      col: i % cols,
+      background: assignment[i]
+    });
+  }
+  return out;
+}
+
+// src/shapes.ts
+var SHAPES = [
+  "circle",
+  "circle-ring",
+  "square",
+  "square-inset",
+  "triangle",
+  "x",
+  "plus",
+  "quarter-disc",
+  "half-disc",
+  "flower",
+  "diamond"
+];
+function renderShape(name, args) {
+  const { size: s, color } = args;
+  const cx = s / 2;
+  const cy = s / 2;
+  const r = s * 0.4;
+  switch (name) {
+    case "circle":
+      return `<circle cx="${cx}" cy="${cy}" r="${r}" fill="${color}"/>`;
+    case "circle-ring": {
+      const sw = s * 0.08;
+      return `<circle cx="${cx}" cy="${cy}" r="${r - sw / 2}" fill="none" stroke="${color}" stroke-width="${sw}"/>`;
+    }
+    case "square": {
+      const side = s * 0.7;
+      const off = (s - side) / 2;
+      return `<rect x="${off}" y="${off}" width="${side}" height="${side}" fill="${color}"/>`;
+    }
+    case "square-inset": {
+      const outer = s * 0.7;
+      const outOff = (s - outer) / 2;
+      const inner = outer * 0.4;
+      const inOff = (s - inner) / 2;
+      const sw = s * 0.06;
+      return `<rect x="${outOff}" y="${outOff}" width="${outer}" height="${outer}" fill="none" stroke="${color}" stroke-width="${sw}"/><rect x="${inOff}" y="${inOff}" width="${inner}" height="${inner}" fill="${color}"/>`;
+    }
+    case "triangle": {
+      const h = s * 0.78;
+      const w = h * 1.155;
+      const x0 = (s - w) / 2;
+      const y0 = (s - h) / 2;
+      return `<path d="M ${x0 + w / 2} ${y0} L ${x0 + w} ${y0 + h} L ${x0} ${y0 + h} Z" fill="${color}"/>`;
+    }
+    case "x": {
+      const sw = s * 0.16;
+      const pad = s * 0.15;
+      return `<path d="M ${pad} ${pad} L ${s - pad} ${s - pad} M ${s - pad} ${pad} L ${pad} ${s - pad}" stroke="${color}" stroke-width="${sw}" stroke-linecap="round"/>`;
+    }
+    case "plus": {
+      const sw = s * 0.22;
+      const pad = s * 0.18;
+      return `<path d="M ${cx} ${pad} L ${cx} ${s - pad} M ${pad} ${cy} L ${s - pad} ${cy}" stroke="${color}" stroke-width="${sw}" stroke-linecap="round"/>`;
+    }
+    case "quarter-disc": {
+      return `<path d="M 0 0 L ${s} 0 A ${s} ${s} 0 0 1 0 ${s} Z" fill="${color}"/>`;
+    }
+    case "half-disc": {
+      return `<path d="M 0 ${cy} A ${cx} ${cy} 0 0 1 ${s} ${cy} L 0 ${cy} Z" fill="${color}"/>`;
+    }
+    case "flower": {
+      return [
+        `<path d="M 0 0 L ${cx} 0 A ${cx} ${cy} 0 0 1 0 ${cy} Z" fill="${color}"/>`,
+        `<path d="M ${cx} 0 L ${s} 0 L ${s} ${cy} A ${cx} ${cy} 0 0 0 ${cx} 0 Z" fill="${color}"/>`,
+        `<path d="M 0 ${cy} A ${cx} ${cy} 0 0 0 ${cx} ${s} L 0 ${s} Z" fill="${color}"/>`,
+        `<path d="M ${cx} ${s} A ${cx} ${cy} 0 0 0 ${s} ${cy} L ${s} ${s} Z" fill="${color}"/>`
+      ].join("");
+    }
+    case "diamond": {
+      const inset = s * 0.15;
+      const p0 = `${cx},${inset}`;
+      const p1 = `${s - inset},${cy}`;
+      const p2 = `${cx},${s - inset}`;
+      const p3 = `${inset},${cy}`;
+      return `<polygon points="${p0} ${p1} ${p2} ${p3}" fill="${color}"/>`;
+    }
+    default:
+      return "";
+  }
+}
+
+// src/tiles-catalog.ts
+var TILE_VIEWBOX_SIZE = 100;
+var TILES = [
+  {
+    "id": "p-1",
+    "background": "blue",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 0H2C29.6142 0 52 22.3858 52 50V52H50C22.3858 52 0 29.6142 0 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H2C29.6142 100 52 77.6142 52 50V48H50C22.3858 48 0 70.3858 0 98V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0H98C70.3858 0 48 22.3858 48 50V52H50C77.6142 52 100 29.6142 100 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100H98C70.3858 100 48 77.6142 48 50V48H50C77.6142 48 100 70.3858 100 98V100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-2",
+    "background": "blue",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 100L100 0M100 100L0 0" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-3",
+    "background": "blue",
+    "shapeColor": "white",
+    "shapeMarkup": '<circle cx="50" cy="50" r="40" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-4",
+    "background": "white",
+    "shapeColor": "blue",
+    "shapeMarkup": '<rect x="10" y="10" width="80" height="80" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-5",
+    "background": "white",
+    "shapeColor": "blue",
+    "shapeMarkup": '<path d="M100 0C100 27.6142 77.6142 50 50 50C22.3858 50 0 27.6142 0 0C0 -27.6142 22.3858 -50 50 -50C77.6142 -50 100 -27.6142 100 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100C100 127.614 77.6142 150 50 150C22.3858 150 0 127.614 0 100C0 72.3858 22.3858 50 50 50C77.6142 50 100 72.3858 100 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-6",
+    "background": "white",
+    "shapeColor": "blue",
+    "shapeMarkup": '<path d="M150 0C150 27.6142 127.614 50 100 50C72.3858 50 50 27.6142 50 0C50 -27.6142 72.3858 -50 100 -50C127.614 -50 150 -27.6142 150 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M150 100C150 127.614 127.614 150 100 150C72.3858 150 50 127.614 50 100C50 72.3858 72.3858 50 100 50C127.614 50 150 72.3858 150 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C50 27.6142 27.6142 50 0 50C-27.6142 50 -50 27.6142 -50 0C-50 -27.6142 -27.6142 -50 0 -50C27.6142 -50 50 -27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C50 127.614 27.6142 150 0 150C-27.6142 150 -50 127.614 -50 100C-50 72.3858 -27.6142 50 0 50C27.6142 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-7",
+    "background": "blue",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 0C27.6142 0 50 22.3858 50 50C22.3858 50 0 27.6142 0 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100C27.6142 100 50 77.6142 50 50C22.3858 50 0 72.3858 0 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C77.6142 0 100 22.3858 100 50C72.3858 50 50 27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C77.6142 100 100 77.6142 100 50C72.3858 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-8",
+    "background": "white",
+    "shapeColor": "blue",
+    "shapeMarkup": '<path d="M0 0H25C38.8071 0 50 11.1929 50 25C50 38.8071 38.8071 50 25 50C11.1929 50 0 38.8071 0 25V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0V25C100 38.8071 88.8071 50 75 50C61.1929 50 50 38.8071 50 25C50 11.1929 61.1929 0 75 0H100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H25C38.8071 100 50 88.8071 50 75C50 61.1929 38.8071 50 25 50C11.1929 50 0 61.1929 0 75V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100V75C100 61.1929 88.8071 50 75 50C61.1929 50 50 61.1929 50 75C50 88.8071 61.1929 100 75 100H100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-9",
+    "background": "white",
+    "shapeColor": "blue",
+    "shapeMarkup": '<path d="M50 50H25C11.1929 50 0 38.8071 0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V25C50 11.1929 61.1929 0 75 0C88.8071 0 100 11.1929 100 25C100 38.8071 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50H25C11.1929 50 0 61.1929 0 75C0 88.8071 11.1929 100 25 100C38.8071 100 50 88.8071 50 75V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V75C50 88.8071 61.1929 100 75 100C88.8071 100 100 88.8071 100 75C100 61.1929 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-10",
+    "background": "blue",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M50 0V100" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>\n<path d="M100 50H3.93391e-06" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-11",
+    "background": "yellow",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 0H2C29.6142 0 52 22.3858 52 50V52H50C22.3858 52 0 29.6142 0 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H2C29.6142 100 52 77.6142 52 50V48H50C22.3858 48 0 70.3858 0 98V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0H98C70.3858 0 48 22.3858 48 50V52H50C77.6142 52 100 29.6142 100 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100H98C70.3858 100 48 77.6142 48 50V48H50C77.6142 48 100 70.3858 100 98V100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-12",
+    "background": "yellow",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 100L100 0M100 100L0 0" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-13",
+    "background": "yellow",
+    "shapeColor": "white",
+    "shapeMarkup": '<circle cx="50" cy="50" r="40" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-14",
+    "background": "white",
+    "shapeColor": "yellow",
+    "shapeMarkup": '<rect x="10" y="10" width="80" height="80" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-15",
+    "background": "white",
+    "shapeColor": "yellow",
+    "shapeMarkup": '<path d="M100 0C100 27.6142 77.6142 50 50 50C22.3858 50 0 27.6142 0 0C0 -27.6142 22.3858 -50 50 -50C77.6142 -50 100 -27.6142 100 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100C100 127.614 77.6142 150 50 150C22.3858 150 0 127.614 0 100C0 72.3858 22.3858 50 50 50C77.6142 50 100 72.3858 100 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-16",
+    "background": "white",
+    "shapeColor": "yellow",
+    "shapeMarkup": '<path d="M150 0C150 27.6142 127.614 50 100 50C72.3858 50 50 27.6142 50 0C50 -27.6142 72.3858 -50 100 -50C127.614 -50 150 -27.6142 150 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M150 100C150 127.614 127.614 150 100 150C72.3858 150 50 127.614 50 100C50 72.3858 72.3858 50 100 50C127.614 50 150 72.3858 150 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C50 27.6142 27.6142 50 0 50C-27.6142 50 -50 27.6142 -50 0C-50 -27.6142 -27.6142 -50 0 -50C27.6142 -50 50 -27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C50 127.614 27.6142 150 0 150C-27.6142 150 -50 127.614 -50 100C-50 72.3858 -27.6142 50 0 50C27.6142 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-17",
+    "background": "yellow",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 0C27.6142 0 50 22.3858 50 50C22.3858 50 0 27.6142 0 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100C27.6142 100 50 77.6142 50 50C22.3858 50 0 72.3858 0 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C77.6142 0 100 22.3858 100 50C72.3858 50 50 27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C77.6142 100 100 77.6142 100 50C72.3858 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-18",
+    "background": "white",
+    "shapeColor": "yellow",
+    "shapeMarkup": '<path d="M0 0H25C38.8071 0 50 11.1929 50 25C50 38.8071 38.8071 50 25 50C11.1929 50 0 38.8071 0 25V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0V25C100 38.8071 88.8071 50 75 50C61.1929 50 50 38.8071 50 25C50 11.1929 61.1929 0 75 0H100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H25C38.8071 100 50 88.8071 50 75C50 61.1929 38.8071 50 25 50C11.1929 50 0 61.1929 0 75V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100V75C100 61.1929 88.8071 50 75 50C61.1929 50 50 61.1929 50 75C50 88.8071 61.1929 100 75 100H100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-19",
+    "background": "white",
+    "shapeColor": "yellow",
+    "shapeMarkup": '<path d="M50 50H25C11.1929 50 0 38.8071 0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V25C50 11.1929 61.1929 0 75 0C88.8071 0 100 11.1929 100 25C100 38.8071 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50H25C11.1929 50 0 61.1929 0 75C0 88.8071 11.1929 100 25 100C38.8071 100 50 88.8071 50 75V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V75C50 88.8071 61.1929 100 75 100C88.8071 100 100 88.8071 100 75C100 61.1929 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-20",
+    "background": "yellow",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M50 0V100" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>\n<path d="M100 50H3.93391e-06" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-21",
+    "background": "red",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 0H2C29.6142 0 52 22.3858 52 50V52H50C22.3858 52 0 29.6142 0 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H2C29.6142 100 52 77.6142 52 50V48H50C22.3858 48 0 70.3858 0 98V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0H98C70.3858 0 48 22.3858 48 50V52H50C77.6142 52 100 29.6142 100 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100H98C70.3858 100 48 77.6142 48 50V48H50C77.6142 48 100 70.3858 100 98V100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-22",
+    "background": "red",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 100L100 0M100 100L0 0" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-23",
+    "background": "red",
+    "shapeColor": "white",
+    "shapeMarkup": '<circle cx="50" cy="50" r="40" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-24",
+    "background": "white",
+    "shapeColor": "red",
+    "shapeMarkup": '<rect x="10" y="10" width="80" height="80" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-25",
+    "background": "white",
+    "shapeColor": "red",
+    "shapeMarkup": '<path d="M100 0C100 27.6142 77.6142 50 50 50C22.3858 50 0 27.6142 0 0C0 -27.6142 22.3858 -50 50 -50C77.6142 -50 100 -27.6142 100 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100C100 127.614 77.6142 150 50 150C22.3858 150 0 127.614 0 100C0 72.3858 22.3858 50 50 50C77.6142 50 100 72.3858 100 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-26",
+    "background": "white",
+    "shapeColor": "red",
+    "shapeMarkup": '<path d="M150 0C150 27.6142 127.614 50 100 50C72.3858 50 50 27.6142 50 0C50 -27.6142 72.3858 -50 100 -50C127.614 -50 150 -27.6142 150 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M150 100C150 127.614 127.614 150 100 150C72.3858 150 50 127.614 50 100C50 72.3858 72.3858 50 100 50C127.614 50 150 72.3858 150 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C50 27.6142 27.6142 50 0 50C-27.6142 50 -50 27.6142 -50 0C-50 -27.6142 -27.6142 -50 0 -50C27.6142 -50 50 -27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C50 127.614 27.6142 150 0 150C-27.6142 150 -50 127.614 -50 100C-50 72.3858 -27.6142 50 0 50C27.6142 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-27",
+    "background": "red",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 0C27.6142 0 50 22.3858 50 50C22.3858 50 0 27.6142 0 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100C27.6142 100 50 77.6142 50 50C22.3858 50 0 72.3858 0 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C77.6142 0 100 22.3858 100 50C72.3858 50 50 27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C77.6142 100 100 77.6142 100 50C72.3858 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-28",
+    "background": "white",
+    "shapeColor": "red",
+    "shapeMarkup": '<path d="M0 0H25C38.8071 0 50 11.1929 50 25C50 38.8071 38.8071 50 25 50C11.1929 50 0 38.8071 0 25V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0V25C100 38.8071 88.8071 50 75 50C61.1929 50 50 38.8071 50 25C50 11.1929 61.1929 0 75 0H100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H25C38.8071 100 50 88.8071 50 75C50 61.1929 38.8071 50 25 50C11.1929 50 0 61.1929 0 75V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100V75C100 61.1929 88.8071 50 75 50C61.1929 50 50 61.1929 50 75C50 88.8071 61.1929 100 75 100H100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-29",
+    "background": "white",
+    "shapeColor": "red",
+    "shapeMarkup": '<path d="M50 50H25C11.1929 50 0 38.8071 0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V25C50 11.1929 61.1929 0 75 0C88.8071 0 100 11.1929 100 25C100 38.8071 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50H25C11.1929 50 0 61.1929 0 75C0 88.8071 11.1929 100 25 100C38.8071 100 50 88.8071 50 75V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V75C50 88.8071 61.1929 100 75 100C88.8071 100 100 88.8071 100 75C100 61.1929 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-30",
+    "background": "red",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M50 0V100" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>\n<path d="M100 50H3.93391e-06" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-31",
+    "background": "green",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 0H2C29.6142 0 52 22.3858 52 50V52H50C22.3858 52 0 29.6142 0 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H2C29.6142 100 52 77.6142 52 50V48H50C22.3858 48 0 70.3858 0 98V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0H98C70.3858 0 48 22.3858 48 50V52H50C77.6142 52 100 29.6142 100 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100H98C70.3858 100 48 77.6142 48 50V48H50C77.6142 48 100 70.3858 100 98V100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-32",
+    "background": "green",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 100L100 0M100 100L0 0" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-33",
+    "background": "green",
+    "shapeColor": "white",
+    "shapeMarkup": '<circle cx="50" cy="50" r="40" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-34",
+    "background": "white",
+    "shapeColor": "green",
+    "shapeMarkup": '<rect x="10" y="10" width="80" height="80" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-35",
+    "background": "white",
+    "shapeColor": "green",
+    "shapeMarkup": '<path d="M100 0C100 27.6142 77.6142 50 50 50C22.3858 50 0 27.6142 0 0C0 -27.6142 22.3858 -50 50 -50C77.6142 -50 100 -27.6142 100 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100C100 127.614 77.6142 150 50 150C22.3858 150 0 127.614 0 100C0 72.3858 22.3858 50 50 50C77.6142 50 100 72.3858 100 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-36",
+    "background": "white",
+    "shapeColor": "green",
+    "shapeMarkup": '<path d="M150 0C150 27.6142 127.614 50 100 50C72.3858 50 50 27.6142 50 0C50 -27.6142 72.3858 -50 100 -50C127.614 -50 150 -27.6142 150 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M150 100C150 127.614 127.614 150 100 150C72.3858 150 50 127.614 50 100C50 72.3858 72.3858 50 100 50C127.614 50 150 72.3858 150 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C50 27.6142 27.6142 50 0 50C-27.6142 50 -50 27.6142 -50 0C-50 -27.6142 -27.6142 -50 0 -50C27.6142 -50 50 -27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C50 127.614 27.6142 150 0 150C-27.6142 150 -50 127.614 -50 100C-50 72.3858 -27.6142 50 0 50C27.6142 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-37",
+    "background": "green",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 0C27.6142 0 50 22.3858 50 50C22.3858 50 0 27.6142 0 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100C27.6142 100 50 77.6142 50 50C22.3858 50 0 72.3858 0 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C77.6142 0 100 22.3858 100 50C72.3858 50 50 27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C77.6142 100 100 77.6142 100 50C72.3858 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-38",
+    "background": "white",
+    "shapeColor": "green",
+    "shapeMarkup": '<path d="M0 0H25C38.8071 0 50 11.1929 50 25C50 38.8071 38.8071 50 25 50C11.1929 50 0 38.8071 0 25V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0V25C100 38.8071 88.8071 50 75 50C61.1929 50 50 38.8071 50 25C50 11.1929 61.1929 0 75 0H100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H25C38.8071 100 50 88.8071 50 75C50 61.1929 38.8071 50 25 50C11.1929 50 0 61.1929 0 75V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100V75C100 61.1929 88.8071 50 75 50C61.1929 50 50 61.1929 50 75C50 88.8071 61.1929 100 75 100H100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-39",
+    "background": "white",
+    "shapeColor": "green",
+    "shapeMarkup": '<path d="M50 50H25C11.1929 50 0 38.8071 0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V25C50 11.1929 61.1929 0 75 0C88.8071 0 100 11.1929 100 25C100 38.8071 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50H25C11.1929 50 0 61.1929 0 75C0 88.8071 11.1929 100 25 100C38.8071 100 50 88.8071 50 75V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V75C50 88.8071 61.1929 100 75 100C88.8071 100 100 88.8071 100 75C100 61.1929 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-40",
+    "background": "green",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M50 0V100" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>\n<path d="M100 50H3.93391e-06" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-41",
+    "background": "white",
+    "shapeColor": "blue",
+    "shapeMarkup": '<path d="M0 0H2C29.6142 0 52 22.3858 52 50V52H50C22.3858 52 0 29.6142 0 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H2C29.6142 100 52 77.6142 52 50V48H50C22.3858 48 0 70.3858 0 98V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0H98C70.3858 0 48 22.3858 48 50V52H50C77.6142 52 100 29.6142 100 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100H98C70.3858 100 48 77.6142 48 50V48H50C77.6142 48 100 70.3858 100 98V100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-42",
+    "background": "white",
+    "shapeColor": "blue",
+    "shapeMarkup": '<path d="M0 100L100 0M100 100L0 0" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-43",
+    "background": "white",
+    "shapeColor": "blue",
+    "shapeMarkup": '<circle cx="50" cy="50" r="40" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-44",
+    "background": "blue",
+    "shapeColor": "white",
+    "shapeMarkup": '<rect x="10" y="10" width="80" height="80" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-45",
+    "background": "blue",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M100 0C100 27.6142 77.6142 50 50 50C22.3858 50 0 27.6142 0 0C0 -27.6142 22.3858 -50 50 -50C77.6142 -50 100 -27.6142 100 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100C100 127.614 77.6142 150 50 150C22.3858 150 0 127.614 0 100C0 72.3858 22.3858 50 50 50C77.6142 50 100 72.3858 100 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-46",
+    "background": "blue",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M150 0C150 27.6142 127.614 50 100 50C72.3858 50 50 27.6142 50 0C50 -27.6142 72.3858 -50 100 -50C127.614 -50 150 -27.6142 150 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M150 100C150 127.614 127.614 150 100 150C72.3858 150 50 127.614 50 100C50 72.3858 72.3858 50 100 50C127.614 50 150 72.3858 150 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C50 27.6142 27.6142 50 0 50C-27.6142 50 -50 27.6142 -50 0C-50 -27.6142 -27.6142 -50 0 -50C27.6142 -50 50 -27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C50 127.614 27.6142 150 0 150C-27.6142 150 -50 127.614 -50 100C-50 72.3858 -27.6142 50 0 50C27.6142 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-47",
+    "background": "white",
+    "shapeColor": "blue",
+    "shapeMarkup": '<path d="M0 0C27.6142 0 50 22.3858 50 50C22.3858 50 0 27.6142 0 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100C27.6142 100 50 77.6142 50 50C22.3858 50 0 72.3858 0 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C77.6142 0 100 22.3858 100 50C72.3858 50 50 27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C77.6142 100 100 77.6142 100 50C72.3858 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-48",
+    "background": "blue",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 0H25C38.8071 0 50 11.1929 50 25C50 38.8071 38.8071 50 25 50C11.1929 50 0 38.8071 0 25V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0V25C100 38.8071 88.8071 50 75 50C61.1929 50 50 38.8071 50 25C50 11.1929 61.1929 0 75 0H100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H25C38.8071 100 50 88.8071 50 75C50 61.1929 38.8071 50 25 50C11.1929 50 0 61.1929 0 75V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100V75C100 61.1929 88.8071 50 75 50C61.1929 50 50 61.1929 50 75C50 88.8071 61.1929 100 75 100H100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-49",
+    "background": "blue",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M50 50H25C11.1929 50 0 38.8071 0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V25C50 11.1929 61.1929 0 75 0C88.8071 0 100 11.1929 100 25C100 38.8071 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50H25C11.1929 50 0 61.1929 0 75C0 88.8071 11.1929 100 25 100C38.8071 100 50 88.8071 50 75V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V75C50 88.8071 61.1929 100 75 100C88.8071 100 100 88.8071 100 75C100 61.1929 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-50",
+    "background": "white",
+    "shapeColor": "blue",
+    "shapeMarkup": '<path d="M50 0V100" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>\n<path d="M100 50H3.93391e-06" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-51",
+    "background": "white",
+    "shapeColor": "yellow",
+    "shapeMarkup": '<path d="M0 0H2C29.6142 0 52 22.3858 52 50V52H50C22.3858 52 0 29.6142 0 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H2C29.6142 100 52 77.6142 52 50V48H50C22.3858 48 0 70.3858 0 98V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0H98C70.3858 0 48 22.3858 48 50V52H50C77.6142 52 100 29.6142 100 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100H98C70.3858 100 48 77.6142 48 50V48H50C77.6142 48 100 70.3858 100 98V100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-52",
+    "background": "white",
+    "shapeColor": "yellow",
+    "shapeMarkup": '<path d="M0 100L100 0M100 100L0 0" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-53",
+    "background": "white",
+    "shapeColor": "yellow",
+    "shapeMarkup": '<circle cx="50" cy="50" r="40" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-54",
+    "background": "yellow",
+    "shapeColor": "white",
+    "shapeMarkup": '<rect x="10" y="10" width="80" height="80" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-55",
+    "background": "yellow",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M100 0C100 27.6142 77.6142 50 50 50C22.3858 50 0 27.6142 0 0C0 -27.6142 22.3858 -50 50 -50C77.6142 -50 100 -27.6142 100 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100C100 127.614 77.6142 150 50 150C22.3858 150 0 127.614 0 100C0 72.3858 22.3858 50 50 50C77.6142 50 100 72.3858 100 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-56",
+    "background": "yellow",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M150 0C150 27.6142 127.614 50 100 50C72.3858 50 50 27.6142 50 0C50 -27.6142 72.3858 -50 100 -50C127.614 -50 150 -27.6142 150 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M150 100C150 127.614 127.614 150 100 150C72.3858 150 50 127.614 50 100C50 72.3858 72.3858 50 100 50C127.614 50 150 72.3858 150 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C50 27.6142 27.6142 50 0 50C-27.6142 50 -50 27.6142 -50 0C-50 -27.6142 -27.6142 -50 0 -50C27.6142 -50 50 -27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C50 127.614 27.6142 150 0 150C-27.6142 150 -50 127.614 -50 100C-50 72.3858 -27.6142 50 0 50C27.6142 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-57",
+    "background": "white",
+    "shapeColor": "yellow",
+    "shapeMarkup": '<path d="M0 0C27.6142 0 50 22.3858 50 50C22.3858 50 0 27.6142 0 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100C27.6142 100 50 77.6142 50 50C22.3858 50 0 72.3858 0 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C77.6142 0 100 22.3858 100 50C72.3858 50 50 27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C77.6142 100 100 77.6142 100 50C72.3858 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-58",
+    "background": "yellow",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 0H25C38.8071 0 50 11.1929 50 25C50 38.8071 38.8071 50 25 50C11.1929 50 0 38.8071 0 25V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0V25C100 38.8071 88.8071 50 75 50C61.1929 50 50 38.8071 50 25C50 11.1929 61.1929 0 75 0H100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H25C38.8071 100 50 88.8071 50 75C50 61.1929 38.8071 50 25 50C11.1929 50 0 61.1929 0 75V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100V75C100 61.1929 88.8071 50 75 50C61.1929 50 50 61.1929 50 75C50 88.8071 61.1929 100 75 100H100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-59",
+    "background": "yellow",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M50 50H25C11.1929 50 0 38.8071 0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V25C50 11.1929 61.1929 0 75 0C88.8071 0 100 11.1929 100 25C100 38.8071 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50H25C11.1929 50 0 61.1929 0 75C0 88.8071 11.1929 100 25 100C38.8071 100 50 88.8071 50 75V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V75C50 88.8071 61.1929 100 75 100C88.8071 100 100 88.8071 100 75C100 61.1929 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-60",
+    "background": "white",
+    "shapeColor": "yellow",
+    "shapeMarkup": '<path d="M50 0V100" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>\n<path d="M100 50H3.93391e-06" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-61",
+    "background": "white",
+    "shapeColor": "red",
+    "shapeMarkup": '<path d="M0 0H2C29.6142 0 52 22.3858 52 50V52H50C22.3858 52 0 29.6142 0 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H2C29.6142 100 52 77.6142 52 50V48H50C22.3858 48 0 70.3858 0 98V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0H98C70.3858 0 48 22.3858 48 50V52H50C77.6142 52 100 29.6142 100 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100H98C70.3858 100 48 77.6142 48 50V48H50C77.6142 48 100 70.3858 100 98V100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-62",
+    "background": "white",
+    "shapeColor": "red",
+    "shapeMarkup": '<path d="M0 100L100 0M100 100L0 0" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-63",
+    "background": "white",
+    "shapeColor": "red",
+    "shapeMarkup": '<circle cx="50" cy="50" r="40" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-64",
+    "background": "red",
+    "shapeColor": "white",
+    "shapeMarkup": '<rect x="10" y="10" width="80" height="80" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-65",
+    "background": "red",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M100 0C100 27.6142 77.6142 50 50 50C22.3858 50 0 27.6142 0 0C0 -27.6142 22.3858 -50 50 -50C77.6142 -50 100 -27.6142 100 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100C100 127.614 77.6142 150 50 150C22.3858 150 0 127.614 0 100C0 72.3858 22.3858 50 50 50C77.6142 50 100 72.3858 100 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-66",
+    "background": "red",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M150 0C150 27.6142 127.614 50 100 50C72.3858 50 50 27.6142 50 0C50 -27.6142 72.3858 -50 100 -50C127.614 -50 150 -27.6142 150 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M150 100C150 127.614 127.614 150 100 150C72.3858 150 50 127.614 50 100C50 72.3858 72.3858 50 100 50C127.614 50 150 72.3858 150 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C50 27.6142 27.6142 50 0 50C-27.6142 50 -50 27.6142 -50 0C-50 -27.6142 -27.6142 -50 0 -50C27.6142 -50 50 -27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C50 127.614 27.6142 150 0 150C-27.6142 150 -50 127.614 -50 100C-50 72.3858 -27.6142 50 0 50C27.6142 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-67",
+    "background": "white",
+    "shapeColor": "red",
+    "shapeMarkup": '<path d="M0 0C27.6142 0 50 22.3858 50 50C22.3858 50 0 27.6142 0 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100C27.6142 100 50 77.6142 50 50C22.3858 50 0 72.3858 0 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C77.6142 0 100 22.3858 100 50C72.3858 50 50 27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C77.6142 100 100 77.6142 100 50C72.3858 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-68",
+    "background": "red",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 0H25C38.8071 0 50 11.1929 50 25C50 38.8071 38.8071 50 25 50C11.1929 50 0 38.8071 0 25V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0V25C100 38.8071 88.8071 50 75 50C61.1929 50 50 38.8071 50 25C50 11.1929 61.1929 0 75 0H100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H25C38.8071 100 50 88.8071 50 75C50 61.1929 38.8071 50 25 50C11.1929 50 0 61.1929 0 75V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100V75C100 61.1929 88.8071 50 75 50C61.1929 50 50 61.1929 50 75C50 88.8071 61.1929 100 75 100H100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-69",
+    "background": "red",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M50 50H25C11.1929 50 0 38.8071 0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V25C50 11.1929 61.1929 0 75 0C88.8071 0 100 11.1929 100 25C100 38.8071 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50H25C11.1929 50 0 61.1929 0 75C0 88.8071 11.1929 100 25 100C38.8071 100 50 88.8071 50 75V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V75C50 88.8071 61.1929 100 75 100C88.8071 100 100 88.8071 100 75C100 61.1929 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-70",
+    "background": "white",
+    "shapeColor": "red",
+    "shapeMarkup": '<path d="M50 0V100" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>\n<path d="M100 50H3.93391e-06" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-71",
+    "background": "white",
+    "shapeColor": "green",
+    "shapeMarkup": '<path d="M0 0H2C29.6142 0 52 22.3858 52 50V52H50C22.3858 52 0 29.6142 0 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H2C29.6142 100 52 77.6142 52 50V48H50C22.3858 48 0 70.3858 0 98V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0H98C70.3858 0 48 22.3858 48 50V52H50C77.6142 52 100 29.6142 100 2V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100H98C70.3858 100 48 77.6142 48 50V48H50C77.6142 48 100 70.3858 100 98V100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-72",
+    "background": "white",
+    "shapeColor": "green",
+    "shapeMarkup": '<path d="M0 100L100 0M100 100L0 0" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-73",
+    "background": "white",
+    "shapeColor": "green",
+    "shapeMarkup": '<circle cx="50" cy="50" r="40" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-74",
+    "background": "green",
+    "shapeColor": "white",
+    "shapeMarkup": '<rect x="10" y="10" width="80" height="80" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  },
+  {
+    "id": "p-75",
+    "background": "green",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M100 0C100 27.6142 77.6142 50 50 50C22.3858 50 0 27.6142 0 0C0 -27.6142 22.3858 -50 50 -50C77.6142 -50 100 -27.6142 100 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100C100 127.614 77.6142 150 50 150C22.3858 150 0 127.614 0 100C0 72.3858 22.3858 50 50 50C77.6142 50 100 72.3858 100 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-76",
+    "background": "green",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M150 0C150 27.6142 127.614 50 100 50C72.3858 50 50 27.6142 50 0C50 -27.6142 72.3858 -50 100 -50C127.614 -50 150 -27.6142 150 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M150 100C150 127.614 127.614 150 100 150C72.3858 150 50 127.614 50 100C50 72.3858 72.3858 50 100 50C127.614 50 150 72.3858 150 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C50 27.6142 27.6142 50 0 50C-27.6142 50 -50 27.6142 -50 0C-50 -27.6142 -27.6142 -50 0 -50C27.6142 -50 50 -27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C50 127.614 27.6142 150 0 150C-27.6142 150 -50 127.614 -50 100C-50 72.3858 -27.6142 50 0 50C27.6142 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-77",
+    "background": "white",
+    "shapeColor": "green",
+    "shapeMarkup": '<path d="M0 0C27.6142 0 50 22.3858 50 50C22.3858 50 0 27.6142 0 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100C27.6142 100 50 77.6142 50 50C22.3858 50 0 72.3858 0 100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 0C77.6142 0 100 22.3858 100 50C72.3858 50 50 27.6142 50 0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 100C77.6142 100 100 77.6142 100 50C72.3858 50 50 72.3858 50 100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-78",
+    "background": "green",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M0 0H25C38.8071 0 50 11.1929 50 25C50 38.8071 38.8071 50 25 50C11.1929 50 0 38.8071 0 25V0Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 0V25C100 38.8071 88.8071 50 75 50C61.1929 50 50 38.8071 50 25C50 11.1929 61.1929 0 75 0H100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M0 100H25C38.8071 100 50 88.8071 50 75C50 61.1929 38.8071 50 25 50C11.1929 50 0 61.1929 0 75V100Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M100 100V75C100 61.1929 88.8071 50 75 50C61.1929 50 50 61.1929 50 75C50 88.8071 61.1929 100 75 100H100Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-79",
+    "background": "green",
+    "shapeColor": "white",
+    "shapeMarkup": '<path d="M50 50H25C11.1929 50 0 38.8071 0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V25C50 11.1929 61.1929 0 75 0C88.8071 0 100 11.1929 100 25C100 38.8071 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50H25C11.1929 50 0 61.1929 0 75C0 88.8071 11.1929 100 25 100C38.8071 100 50 88.8071 50 75V50Z" fill="{{SHAPE_COLOR}}"/>\n<path d="M50 50V75C50 88.8071 61.1929 100 75 100C88.8071 100 100 88.8071 100 75C100 61.1929 88.8071 50 75 50H50Z" fill="{{SHAPE_COLOR}}"/>'
+  },
+  {
+    "id": "p-80",
+    "background": "white",
+    "shapeColor": "green",
+    "shapeMarkup": '<path d="M50 0V100" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>\n<path d="M100 50H3.93391e-06" stroke="{{SHAPE_COLOR}}" stroke-width="20"/>'
+  }
+];
+var TILE_BY_ID = Object.freeze(
+  Object.fromEntries(TILES.map((t) => [t.id, t]))
+);
+
+// src/tiles.ts
+var UnknownTileError = class extends Error {
+  constructor(id) {
+    super(`Unknown tile id: "${id}". Known ids: ${TILES.map((t) => t.id).join(", ")}.`);
+    this.id = id;
+    this.name = "UnknownTileError";
+  }
+  id;
+};
+function resolveTilePool(opts) {
+  if (opts.base !== void 0) {
+    const tile = TILE_BY_ID[opts.base];
+    if (!tile) throw new UnknownTileError(opts.base);
+    return [tile];
+  }
+  if (opts.pool !== void 0) {
+    if (opts.pool.length === 0) {
+      throw new Error("Pattern pool is empty \u2014 supply at least one tile id or omit `pool`.");
+    }
+    return opts.pool.map((id) => {
+      const tile = TILE_BY_ID[id];
+      if (!tile) throw new UnknownTileError(id);
+      return tile;
+    });
+  }
+  return TILES;
+}
+function pickTile(rng, pool) {
+  return pick(rng, pool);
+}
+function recolourTileMarkup(markup, shapeColor, useHex) {
+  const palette = useHex ? PALETTE_HEX : PALETTE_VAR;
+  return markup.replaceAll("{{SHAPE_COLOR}}", palette[shapeColor]);
+}
+
+// src/variants.ts
+function parseGrid(grid) {
+  const m = grid.match(/^(\d+)x(\d+)$/);
+  if (!m) throw new Error(`Invalid grid shape: ${grid}. Use "<rows>x<cols>".`);
+  return { rows: parseInt(m[1], 10), cols: parseInt(m[2], 10) };
+}
+function resolveVariant(variant, overrides = {}) {
+  const baseGrid = {
+    corner: { rows: 3, cols: 3 },
+    "edge-strip": { rows: 9, cols: 2 },
+    "divider-strip": { rows: 1, cols: 12 },
+    "dado-footer": { rows: 1, cols: 32 },
+    "full-scene": { rows: 5, cols: 6 }
+  };
+  const baseSize = {
+    corner: 40,
+    "edge-strip": 40,
+    "divider-strip": 32,
+    "dado-footer": 8,
+    "full-scene": 80
+  };
+  const dims = overrides.grid ? parseGrid(overrides.grid) : baseGrid[variant];
+  const cellSize = overrides.cellSize ?? baseSize[variant];
+  return { ...dims, cellSize };
+}
+var DADO_CYCLE = ["blue", "yellow", "red", "green"];
+
+// src/generator.ts
+function generatePatternData(options) {
+  const { variant, seed = 0, useHex = false, base, pool } = options;
+  const { rows, cols, cellSize } = resolveVariant(variant, {
+    ...options.grid !== void 0 && { grid: options.grid },
+    ...options.cellSize !== void 0 && { cellSize: options.cellSize }
+  });
+  const palette = useHex ? PALETTE_HEX : PALETTE_VAR;
+  const tileMode = variant !== "dado-footer" && (base !== void 0 || pool !== void 0);
+  const tilePool = tileMode ? resolveTilePool({ ...base !== void 0 && { base }, ...pool !== void 0 && { pool } }) : [];
+  let coloured;
+  if (variant === "dado-footer") {
+    coloured = Array.from({ length: rows * cols }, (_, i) => ({
+      row: Math.floor(i / cols),
+      col: i % cols,
+      background: DADO_CYCLE[i % DADO_CYCLE.length]
+    }));
+  } else {
+    coloured = colourGrid({ rows, cols, seed });
+  }
+  const rng = mulberry32(seed ^ 2654435769);
+  const cells = coloured.map((c) => {
+    if (variant === "dado-footer") {
+      return {
+        ...c,
+        shape: null,
+        backgroundColor: palette[c.background],
+        shapeColor: palette[c.background],
+        tile: null,
+        tileMarkup: ""
+      };
+    }
+    const shapeColor = contrastShapeColor(c.background);
+    if (tileMode) {
+      const tile = pickTile(rng, tilePool);
+      return {
+        ...c,
+        shape: null,
+        backgroundColor: palette[c.background],
+        shapeColor: palette[shapeColor],
+        tile,
+        tileMarkup: recolourTileMarkup(tile.shapeMarkup, shapeColor, useHex)
+      };
+    }
+    const shape = pick(rng, SHAPES);
+    return {
+      ...c,
+      shape,
+      backgroundColor: palette[c.background],
+      shapeColor: palette[shapeColor],
+      tile: null,
+      tileMarkup: ""
+    };
+  });
+  const width = cols * cellSize;
+  const height = rows * cellSize;
+  return {
+    cells,
+    width,
+    height,
+    rows,
+    cols,
+    cellSize,
+    viewBox: `0 0 ${width} ${height}`,
+    tileMode,
+    tileViewBox: TILE_VIEWBOX_SIZE
+  };
+}
+function generatePatternSvg(options) {
+  const data = generatePatternData(options);
+  const cellSvg = data.cells.map((c) => {
+    const tx = c.col * data.cellSize;
+    const ty = c.row * data.cellSize;
+    if (c.tile) {
+      return `<svg x="${tx}" y="${ty}" width="${data.cellSize}" height="${data.cellSize}" viewBox="0 0 ${data.tileViewBox} ${data.tileViewBox}" overflow="hidden"><rect width="${data.tileViewBox}" height="${data.tileViewBox}" fill="${c.backgroundColor}"/>` + c.tileMarkup + `</svg>`;
+    }
+    const bg = `<rect width="${data.cellSize}" height="${data.cellSize}" fill="${c.backgroundColor}"/>`;
+    const shape = c.shape ? renderShape(c.shape, { size: data.cellSize, color: c.shapeColor }) : "";
+    return `<g transform="translate(${tx} ${ty})">${bg}${shape}</g>`;
+  }).join("");
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${data.viewBox}" width="${data.width}" height="${data.height}" aria-hidden="true">${cellSvg}</svg>`;
+}
+
+exports.generatePatternData = generatePatternData;
+exports.generatePatternSvg = generatePatternSvg;
+//# sourceMappingURL=generator.cjs.map
+//# sourceMappingURL=generator.cjs.map