{"spec_id":"qrcode-basic","library":"muix","language":"javascript","code":"// anyplot.ai\n// qrcode-basic: Basic QR Code Generator\n// Library: muix 7.29.1 | JavaScript 22.23.0\n// Quality: 83/100 | Created: 2026-06-24\n//# anyplot-orientation: square\n// anyplot.ai\n// qrcode-basic: Basic QR Code Generator\n// Library: MUI X Charts | React | Node 22\n// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope.\n// Quality: pending | Created: 2026-06-24\nimport { ChartContainer } from \"@mui/x-charts\";\nimport { Box } from \"@mui/material\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Pre-computed QR code matrix for \"https://anyplot.ai\"\n// Version 2 (25×25), Error Correction M, Byte mode, Mask 6\nconst QR_MODULES: number[][] = [\n  [1,1,1,1,1,1,1,0,1,0,0,1,1,0,1,0,0,0,1,1,1,1,1,1,1],\n  [1,0,0,0,0,0,1,0,1,0,1,1,1,1,1,0,1,0,1,0,0,0,0,0,1],\n  [1,0,1,1,1,0,1,0,1,0,1,0,0,1,1,1,1,0,1,0,1,1,1,0,1],\n  [1,0,1,1,1,0,1,0,0,1,0,0,1,0,1,0,1,0,1,0,1,1,1,0,1],\n  [1,0,1,1,1,0,1,0,1,0,1,0,1,1,1,0,1,0,1,0,1,1,1,0,1],\n  [1,0,0,0,0,0,1,0,0,1,1,1,0,1,1,0,1,0,1,0,0,0,0,0,1],\n  [1,1,1,1,1,1,1,0,1,0,1,0,1,0,1,0,1,0,1,1,1,1,1,1,1],\n  [0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,1,1,0,0,0,0,0,0,0,0],\n  [1,0,0,1,1,1,1,1,1,1,0,1,1,1,1,0,1,1,1,1,1,1,0,0,1],\n  [0,0,1,0,1,0,0,1,0,0,1,0,0,0,1,1,1,0,0,1,1,1,1,1,0],\n  [1,0,0,0,0,1,1,1,1,0,1,1,0,0,1,1,0,0,0,1,1,1,0,0,1],\n  [0,1,1,1,1,1,0,1,0,1,0,1,0,0,1,0,0,1,0,0,0,1,1,1,1],\n  [1,0,1,1,1,0,1,0,1,1,1,1,0,1,1,1,0,0,1,1,0,0,0,0,1],\n  [1,0,0,0,1,0,0,0,0,0,1,0,1,0,0,1,1,1,0,0,1,0,0,1,0],\n  [1,1,0,0,0,0,1,1,1,1,0,0,0,0,1,1,0,0,0,0,1,1,1,1,1],\n  [1,0,0,1,0,1,0,0,1,0,0,0,1,1,1,1,0,1,1,1,0,1,1,0,1],\n  [1,0,1,1,1,0,1,0,1,0,1,1,1,0,0,0,1,1,1,1,1,0,1,1,0],\n  [0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,1,0,0,0,1,0,1,1,0],\n  [1,1,1,1,1,1,1,0,0,0,1,0,1,1,1,0,1,0,1,0,1,0,0,0,1],\n  [1,0,0,0,0,0,1,0,0,0,1,1,0,1,0,1,1,0,0,0,1,0,0,0,0],\n  [1,0,1,1,1,0,1,0,1,0,1,1,0,1,0,1,1,1,1,1,1,0,0,0,1],\n  [1,0,1,1,1,0,1,0,0,1,1,0,1,1,0,0,1,1,1,0,0,0,0,1,1],\n  [1,0,1,1,1,0,1,0,1,0,0,1,0,1,0,0,1,0,0,0,1,1,1,1,1],\n  [1,0,0,0,0,0,1,0,1,1,0,1,1,1,0,0,0,1,1,1,1,0,1,1,1],\n  [1,1,1,1,1,1,1,0,1,1,0,1,1,1,0,0,1,1,1,0,0,1,0,0,1],\n];\n\nconst QR_SIZE = QR_MODULES.length;   // 25\nconst QUIET_ZONE = 4;\nconst TOTAL = QR_SIZE + QUIET_ZONE * 2;  // 33\n\nexport default function Chart() {\n  const { width, height } = window.ANYPLOT_SIZE;\n\n  // Integer cell size for pixel-perfect module rendering\n  const cellPx = Math.floor((width * 0.55) / TOTAL);\n  const qrPx = cellPx * TOTAL;\n\n  // Vertical layout\n  const titleH = 28, urlH = 22, captionH = 18;\n  const gap1 = 10, gap2 = 28, gap3 = 28;\n  const contentH = titleH + gap1 + urlH + gap2 + qrPx + gap3 + captionH;\n  const yStart = Math.round((height - contentH) / 2);\n\n  const titleY = yStart + titleH;\n  const urlY = titleY + gap1 + urlH;\n  const qrTop = urlY + gap2;\n  const qrLeft = Math.round((width - qrPx) / 2);\n  const captionY = qrTop + qrPx + gap3 + captionH;\n\n  return (\n    <Box sx={{ width, height, bgcolor: t.pageBg }}>\n      {/* ChartContainer is the MUI X Charts composition root — provides the\n          SVG surface and harness-wired theme context for the QR visualization */}\n      <ChartContainer width={width} height={height} series={[]} skipAnimation>\n        {/* Title */}\n        <text\n          x={width / 2}\n          y={titleY}\n          textAnchor=\"middle\"\n          fontSize={22}\n          fontWeight=\"500\"\n          fill={t.ink}\n          fontFamily=\"system-ui, sans-serif\"\n        >\n          qrcode-basic · javascript · muix · anyplot.ai\n        </text>\n\n        {/* URL label */}\n        <text\n          x={width / 2}\n          y={urlY}\n          textAnchor=\"middle\"\n          fontSize={16}\n          fill={t.inkSoft}\n          fontFamily=\"monospace\"\n        >\n          https://anyplot.ai\n        </text>\n\n        {/* QR background block — quiet zone shows as pageBg */}\n        <rect\n          x={qrLeft}\n          y={qrTop}\n          width={qrPx}\n          height={qrPx}\n          fill={t.pageBg}\n        />\n\n        {/* Dark modules — brand green #009E73 on pageBg */}\n        {QR_MODULES.map((row, r) =>\n          row.map((v, c) =>\n            v === 1 ? (\n              <rect\n                key={`${r}-${c}`}\n                x={qrLeft + (QUIET_ZONE + c) * cellPx}\n                y={qrTop + (QUIET_ZONE + r) * cellPx}\n                width={cellPx}\n                height={cellPx}\n                fill=\"#009E73\"\n                shapeRendering=\"crispEdges\"\n              />\n            ) : null\n          )\n        )}\n\n        {/* Caption */}\n        <text\n          x={width / 2}\n          y={captionY}\n          textAnchor=\"middle\"\n          fontSize={14}\n          fill={t.inkSoft}\n          fontFamily=\"system-ui, sans-serif\"\n        >\n          Scan to visit anyplot.ai · Error Correction M (15%) · Version 2 · 25×25\n        </text>\n      </ChartContainer>\n    </Box>\n  );\n}\n"}