{"spec_id":"sudoku-basic","library":"muix","language":"javascript","code":"// anyplot.ai\n// sudoku-basic: Basic Sudoku Grid\n// Library: muix 7.29.1 | JavaScript 22.22.3\n// Quality: 84/100 | Created: 2026-06-25\n//# anyplot-orientation: square\n// anyplot.ai\n// sudoku-basic: Basic Sudoku Grid\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-25\n\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Classic Sudoku puzzle — 0 = empty cell\nconst PUZZLE = [\n  [5, 3, 0, 0, 7, 0, 0, 0, 0],\n  [6, 0, 0, 1, 9, 5, 0, 0, 0],\n  [0, 9, 8, 0, 0, 0, 0, 6, 0],\n  [8, 0, 0, 0, 6, 0, 0, 0, 3],\n  [4, 0, 0, 8, 0, 3, 0, 0, 1],\n  [7, 0, 0, 0, 2, 0, 0, 0, 6],\n  [0, 6, 0, 0, 0, 0, 2, 8, 0],\n  [0, 0, 0, 4, 1, 9, 0, 0, 5],\n  [0, 0, 0, 0, 8, 0, 0, 7, 9],\n];\n\nexport default function Chart() {\n  const W = window.ANYPLOT_SIZE.width;\n  const H = window.ANYPLOT_SIZE.height;\n\n  const titleH = 70;\n  const pad = 50;\n  const gridSize = Math.min(W - 2 * pad, H - titleH - 2 * pad);\n  const cell = gridSize / 9;\n  const gx = (W - gridSize) / 2;\n  const gy = titleH + (H - titleH - gridSize) / 2;\n\n  const THIN = 0.7;\n  const THICK = 3;\n\n  // Inner cell division lines (thin)\n  const thinLines = [];\n  for (let i = 1; i <= 8; i++) {\n    if (i % 3 === 0) continue;\n    thinLines.push(\n      <line key={`v${i}`} x1={i * cell} y1={0} x2={i * cell} y2={gridSize}\n        stroke={t.inkSoft} strokeWidth={THIN} />,\n      <line key={`h${i}`} x1={0} y1={i * cell} x2={gridSize} y2={i * cell}\n        stroke={t.inkSoft} strokeWidth={THIN} />\n    );\n  }\n\n  // 3×3 box boundary lines (thick)\n  const thickLines = [];\n  for (let i = 0; i <= 9; i += 3) {\n    thickLines.push(\n      <line key={`bv${i}`} x1={i * cell} y1={0} x2={i * cell} y2={gridSize}\n        stroke={t.ink} strokeWidth={THICK} />,\n      <line key={`bh${i}`} x1={0} y1={i * cell} x2={gridSize} y2={i * cell}\n        stroke={t.ink} strokeWidth={THICK} />\n    );\n  }\n\n  // Given numbers centered in their cells\n  const numbers = PUZZLE.flatMap((row, r) =>\n    row.map((val, c) => {\n      if (val === 0) return null;\n      return (\n        <text key={`n${r}${c}`}\n          x={c * cell + cell / 2} y={r * cell + cell / 2}\n          textAnchor=\"middle\" dominantBaseline=\"central\"\n          fontSize={cell * 0.52}\n          fontFamily='\"Helvetica Neue\", Helvetica, Arial, sans-serif'\n          fontWeight=\"700\"\n          fill={t.ink}\n        >\n          {val}\n        </text>\n      );\n    })\n  ).filter(Boolean);\n\n  return (\n    <Box\n      sx={{\n        position: \"relative\",\n        width: W,\n        height: H,\n        bgcolor: t.pageBg,\n        overflow: \"hidden\",\n      }}\n    >\n      {/* MUI Typography for theme-aware title */}\n      <Typography\n        sx={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          right: 0,\n          height: titleH,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          fontSize: 22,\n          fontFamily: '\"Helvetica Neue\", Helvetica, Arial, sans-serif',\n          color: t.ink,\n          lineHeight: 1,\n          m: 0,\n          p: 0,\n        }}\n      >\n        sudoku-basic · javascript · muix · anyplot.ai\n      </Typography>\n\n      {/* SVG grid rendered via MUI Box component bridge */}\n      <Box\n        component=\"svg\"\n        sx={{ position: \"absolute\", top: gy, left: gx, display: \"block\" }}\n        width={gridSize}\n        height={gridSize}\n      >\n        <rect width={gridSize} height={gridSize} fill={t.pageBg} />\n        {thinLines}\n        {thickLines}\n        {numbers}\n      </Box>\n    </Box>\n  );\n}\n"}