{"spec_id":"barcode-code128","library":"muix","language":"javascript","code":"// anyplot.ai\n// barcode-code128: Code 128 Barcode\n// Library: muix 7.29.1 | JavaScript 22.23.2\n// Quality: 85/100 | Created: 2026-09-01\nimport { BarChart } from \"@mui/x-charts/BarChart\";\n\nconst t = window.ANYPLOT_TOKENS;\nconst SIZE = window.ANYPLOT_SIZE;\n\n// --- Code 128 Subset B encoder (real ISO/IEC 15417 tables, not a mockup) ----\n// BARS[v] is the real 11-module (13 for STOP) bar/space pattern for symbol\n// value v, encoded as a string of 1s (bar) and 0s (space) — the canonical\n// Code 128 symbol table. Index 103/104/105 are Start A/B/C, 106 is Stop.\nconst BARS = [\n  11011001100, 11001101100, 11001100110, 10010011000, 10010001100, 10001001100, 10011001000, 10011000100,\n  10001100100, 11001001000, 11001000100, 11000100100, 10110011100, 10011011100, 10011001110, 10111001100,\n  10011101100, 10011100110, 11001110010, 11001011100, 11001001110, 11011100100, 11001110100, 11101101110,\n  11101001100, 11100101100, 11100100110, 11101100100, 11100110100, 11100110010, 11011011000, 11011000110,\n  11000110110, 10100011000, 10001011000, 10001000110, 10110001000, 10001101000, 10001100010, 11010001000,\n  11000101000, 11000100010, 10110111000, 10110001110, 10001101110, 10111011000, 10111000110, 10001110110,\n  11101110110, 11010001110, 11000101110, 11011101000, 11011100010, 11011101110, 11101011000, 11101000110,\n  11100010110, 11101101000, 11101100010, 11100011010, 11101111010, 11001000010, 11110001010, 10100110000,\n  10100001100, 10010110000, 10010000110, 10000101100, 10000100110, 10110010000, 10110000100, 10011010000,\n  10011000010, 10000110100, 10000110010, 11000010010, 11001010000, 11110111010, 11000010100, 10001111010,\n  10100111100, 10010111100, 10010011110, 10111100100, 10011110100, 10011110010, 11110100100, 11110010100,\n  11110010010, 11011011110, 11011110110, 11110110110, 10101111000, 10100011110, 10001011110, 10111101000,\n  10111100010, 11110101000, 11110100010, 10111011110, 10111101110, 11101011110, 11110101110, 11010000100,\n  11010010000, 11010011100, 1100011101011,\n];\nconst START_B = 104;\nconst STOP = 106;\nconst QUIET_ZONE_MODULES = 10; // ANSI/ISO minimum quiet zone: 10x module width\n\n// Shipping-label content (Subset B: full ASCII 32-126, no subset switching needed).\nconst CONTENT = \"SHIP-2024-ABC123\";\n\nconst dataValues = Array.from(CONTENT, (ch) => ch.charCodeAt(0) - 32);\nconst checksum = dataValues.reduce((sum, v, i) => sum + v * (i + 1), START_B) % 103;\nconst symbolValues = [START_B, ...dataValues, checksum, STOP];\n\nconst moduleBits = symbolValues.map((v) => String(BARS[v])).join(\"\");\nconst fullBits = \"0\".repeat(QUIET_ZONE_MODULES) + moduleBits + \"0\".repeat(QUIET_ZONE_MODULES);\nconst TOTAL_MODULES = fullBits.length;\n\n// Run-length encode into bar/space segments — each becomes one stacked series\n// so the chart draws the exact variable-width pattern, not an approximation.\nconst segments = [];\nfor (let i = 0; i < fullBits.length; ) {\n  let j = i;\n  while (j < fullBits.length && fullBits[j] === fullBits[i]) j++;\n  segments.push({ width: j - i, isBar: fullBits[i] === \"1\" });\n  i = j;\n}\n\n// --- Title chrome ------------------------------------------------------------\nconst TITLE = \"barcode-code128 · javascript · muix · anyplot.ai\";\nconst TITLE_FONT_DEFAULT = 22;\nconst titleFontSize =\n  TITLE.length > 67 ? Math.round(TITLE_FONT_DEFAULT * (67 / TITLE.length)) : TITLE_FONT_DEFAULT;\n\n// --- Layout constants (CSS px within the mount's coordinate space) ---------\nconst PADDING = 60;\nconst TITLE_H = 50;\nconst LABEL_H = 56;\nconst CAPTION_H = 28;\nconst GAP = 24;\n\n// --- Chart (default-exported component — the harness mounts it) ------------\nexport default function Chart() {\n  const chartHeight = SIZE.height - PADDING * 2 - TITLE_H - LABEL_H - CAPTION_H - GAP;\n  const chartWidth = SIZE.width - PADDING * 2;\n\n  return (\n    <div\n      style={{\n        width: SIZE.width,\n        height: SIZE.height,\n        padding: PADDING,\n        boxSizing: \"border-box\",\n        display: \"flex\",\n        flexDirection: \"column\",\n      }}\n    >\n      <div style={{ height: TITLE_H, fontSize: titleFontSize, fontWeight: 500, color: t.ink }}>{TITLE}</div>\n      <div style={{ height: GAP }} />\n      <BarChart\n        width={chartWidth}\n        height={chartHeight}\n        layout=\"horizontal\"\n        series={segments.map((seg) => ({\n          data: [seg.width],\n          stack: \"barcode\",\n          // Bars behave like structural ink (a rendered glyph), not a\n          // categorical series, so they take the theme-adaptive ink token\n          // rather than the brand-green Imprint position — the module\n          // widths themselves stay geometrically exact to real Code 128,\n          // so the pattern would still scan if printed true black-on-white.\n          color: seg.isBar ? t.ink : \"transparent\",\n        }))}\n        xAxis={[{ scaleType: \"linear\", min: 0, max: TOTAL_MODULES }]}\n        yAxis={[{ scaleType: \"band\", data: [\"code128\"], categoryGapRatio: 0 }]}\n        margin={{ top: 0, bottom: 0, left: 0, right: 0 }}\n        bottomAxis={null}\n        leftAxis={null}\n        slotProps={{ legend: { hidden: true } }}\n        tooltip={{ trigger: \"none\" }}\n        skipAnimation\n      />\n      <div style={{ height: GAP }} />\n      <div\n        style={{\n          height: LABEL_H,\n          textAlign: \"center\",\n          fontFamily: \"'Courier New', monospace\",\n          fontSize: 26,\n          letterSpacing: \"0.35em\",\n          color: t.ink,\n        }}\n      >\n        {CONTENT}\n      </div>\n      <div style={{ height: CAPTION_H, textAlign: \"center\", fontSize: 14, color: t.inkSoft }}>\n        Code 128 · Subset B (full ASCII, ANSI/ISO quiet zones)\n      </div>\n    </div>\n  );\n}\n"}