react-math-blocks 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PrintNum
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,64 @@
+# react-math-blocks
+
+## Live Demo & Full Customization available at [PrintNum.com](https://printnum.com).
+
+Lightweight open-source React components for Number Blocks and Ten-Frame visuals.
+
+## Install
+
+```bash
+npm install react-math-blocks
+```
+
+## Quick Start
+
+```tsx
+import { MathBlocks, TenFrame } from "react-math-blocks";
+
+export default function Demo() {
+  return (
+    <div style={{ display: "grid", gap: 24 }}>
+      <MathBlocks value={12} layout="array" colorStyle="Rainbow" showCountingDots />
+      <TenFrame value={17} colorStyle="Pastel" showCountingDots />
+    </div>
+  );
+}
+```
+
+## API
+
+### MathBlocks
+
+Props:
+- value: number (1 to 100)
+- layout: "auto" | "stack" | "grid" | "ten-frame" | "array"
+- colorStyle: "Rainbow" | "Single Color" | "Warm" | "Cool" | "Pastel" | "B&W (Coloring)"
+- face: "Happy" | "Smile" | "Surprised" | "Thinking"
+- showNumberLabel: boolean
+- showCountingDots: boolean
+- size: number (pixel output size)
+- className: string
+- title: string
+
+### TenFrame
+
+Convenience wrapper with layout fixed to ten-frame.
+
+## Development
+
+```bash
+npm run typecheck
+npm run build
+```
+
+## Publishing
+
+```bash
+npm login
+npm run build
+npm publish --access public
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+type ColorStyle = "Rainbow" | "Single Color" | "Warm" | "Cool" | "Pastel" | "B&W (Coloring)";
+declare function getBlockColor(index: number, style: ColorStyle): string;
+
+type LayoutMode = "auto" | "stack" | "grid" | "ten-frame" | "array";
+interface BlockPosition {
+    x: number;
+    y: number;
+    index: number;
+}
+interface LayoutResult {
+    positions: BlockPosition[];
+    width: number;
+    height: number;
+}
+declare function generateBlockPositions(value: number, layout: LayoutMode): LayoutResult;
+
+type FaceStyle = "Happy" | "Smile" | "Surprised" | "Thinking";
+interface MathBlocksProps {
+    value: number;
+    layout?: LayoutMode;
+    colorStyle?: ColorStyle;
+    face?: FaceStyle;
+    showNumberLabel?: boolean;
+    showCountingDots?: boolean;
+    size?: number;
+    className?: string;
+    title?: string;
+}
+interface TenFrameProps {
+    value: number;
+    colorStyle?: ColorStyle;
+    showNumberLabel?: boolean;
+    showCountingDots?: boolean;
+    className?: string;
+    title?: string;
+}
+
+declare function MathBlocks({ value, layout, colorStyle, face, showNumberLabel, showCountingDots, size, className, title, }: MathBlocksProps): React.JSX.Element;
+
+declare function TenFrame({ value, colorStyle, showNumberLabel, showCountingDots, className, title, }: TenFrameProps): React.JSX.Element;
+
+export { type BlockPosition, type ColorStyle, type FaceStyle, type LayoutMode, type LayoutResult, MathBlocks, type MathBlocksProps, TenFrame, type TenFrameProps, generateBlockPositions, getBlockColor };

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+
+type ColorStyle = "Rainbow" | "Single Color" | "Warm" | "Cool" | "Pastel" | "B&W (Coloring)";
+declare function getBlockColor(index: number, style: ColorStyle): string;
+
+type LayoutMode = "auto" | "stack" | "grid" | "ten-frame" | "array";
+interface BlockPosition {
+    x: number;
+    y: number;
+    index: number;
+}
+interface LayoutResult {
+    positions: BlockPosition[];
+    width: number;
+    height: number;
+}
+declare function generateBlockPositions(value: number, layout: LayoutMode): LayoutResult;
+
+type FaceStyle = "Happy" | "Smile" | "Surprised" | "Thinking";
+interface MathBlocksProps {
+    value: number;
+    layout?: LayoutMode;
+    colorStyle?: ColorStyle;
+    face?: FaceStyle;
+    showNumberLabel?: boolean;
+    showCountingDots?: boolean;
+    size?: number;
+    className?: string;
+    title?: string;
+}
+interface TenFrameProps {
+    value: number;
+    colorStyle?: ColorStyle;
+    showNumberLabel?: boolean;
+    showCountingDots?: boolean;
+    className?: string;
+    title?: string;
+}
+
+declare function MathBlocks({ value, layout, colorStyle, face, showNumberLabel, showCountingDots, size, className, title, }: MathBlocksProps): React.JSX.Element;
+
+declare function TenFrame({ value, colorStyle, showNumberLabel, showCountingDots, className, title, }: TenFrameProps): React.JSX.Element;
+
+export { type BlockPosition, type ColorStyle, type FaceStyle, type LayoutMode, type LayoutResult, MathBlocks, type MathBlocksProps, TenFrame, type TenFrameProps, generateBlockPositions, getBlockColor };

package/dist/index.js

@@ -0,0 +1,245 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/colors.ts
+var rainbow = ["#EF4444", "#F97316", "#EAB308", "#22C55E", "#3B82F6", "#8B5CF6", "#EC4899"];
+var warm = ["#EF4444", "#F97316", "#F59E0B", "#EAB308", "#FB923C", "#F87171"];
+var cool = ["#3B82F6", "#06B6D4", "#10B981", "#22C55E", "#6366F1", "#8B5CF6"];
+var pastel = ["#FCA5A5", "#FDBA74", "#FDE047", "#86EFAC", "#93C5FD", "#C4B5FD", "#F9A8D4"];
+function getBlockColor(index, style) {
+  switch (style) {
+    case "Single Color":
+      return "#3B82F6";
+    case "Warm":
+      return warm[index % warm.length];
+    case "Cool":
+      return cool[index % cool.length];
+    case "Pastel":
+      return pastel[index % pastel.length];
+    case "B&W (Coloring)":
+      return "#FFFFFF";
+    case "Rainbow":
+    default:
+      return rainbow[index % rainbow.length];
+  }
+}
+
+// src/layout.ts
+function generateBlockPositions(value, layout) {
+  let normalized = Math.max(1, Math.floor(value));
+  if (layout === "auto") {
+    if (normalized <= 5) layout = "stack";
+    else if (normalized <= 20) layout = "ten-frame";
+    else layout = "grid";
+  }
+  const block = 60;
+  const gap = 4;
+  const cell = block + gap;
+  let cols = 1;
+  let rows = 1;
+  const positions = [];
+  if (layout === "stack") {
+    cols = 1;
+    rows = normalized;
+    for (let i = 0; i < normalized; i++) {
+      positions.push({ x: 0, y: (normalized - 1 - i) * cell, index: i });
+    }
+  } else if (layout === "grid") {
+    cols = Math.ceil(Math.sqrt(normalized));
+    rows = Math.ceil(normalized / cols);
+    for (let i = 0; i < normalized; i++) {
+      const c = i % cols;
+      const r = Math.floor(i / cols);
+      positions.push({ x: c * cell, y: (rows - 1 - r) * cell, index: i });
+    }
+  } else if (layout === "ten-frame") {
+    cols = Math.min(normalized, 5);
+    const groupSize = 10;
+    rows = 0;
+    for (let i = 0; i < normalized; i++) {
+      const groupIndex = Math.floor(i / groupSize);
+      const indexInGroup = i % groupSize;
+      const c = indexInGroup % 5;
+      const rInGroup = Math.floor(indexInGroup / 5);
+      const r = groupIndex * 3 + rInGroup;
+      if (r > rows) rows = r;
+      positions.push({ x: c * cell, y: r * cell, index: i });
+    }
+    rows += 1;
+    cols = Math.max(cols, Math.min(normalized, 5));
+  } else if (layout === "array") {
+    cols = Math.floor(Math.sqrt(normalized));
+    while (normalized % cols !== 0 && cols > 1) cols -= 1;
+    if (cols === 1 && normalized > 3) cols = Math.ceil(Math.sqrt(normalized));
+    rows = Math.ceil(normalized / cols);
+    for (let i = 0; i < normalized; i++) {
+      const c = i % cols;
+      const r = Math.floor(i / cols);
+      positions.push({ x: c * cell, y: (rows - 1 - r) * cell, index: i });
+    }
+  }
+  return {
+    positions,
+    width: cols * cell - gap,
+    height: rows * cell - gap
+  };
+}
+function MathBlocks({
+  value,
+  layout = "auto",
+  colorStyle = "Rainbow",
+  face = "Happy",
+  showNumberLabel = true,
+  showCountingDots = false,
+  size = 320,
+  className,
+  title
+}) {
+  const safeValue = Math.max(1, Math.min(100, Math.floor(value || 1)));
+  const { positions, width, height } = generateBlockPositions(safeValue, layout);
+  const view = 800;
+  const padding = 120;
+  const scale = Math.min((view - padding * 2) / Math.max(width, height), 1.5);
+  const contentWidth = width * scale;
+  const contentHeight = height * scale;
+  const offsetX = (view - contentWidth) / 2;
+  const offsetY = (view - contentHeight) / 2;
+  const blockSize = 60;
+  const topBlock = positions.reduce((prev, curr) => {
+    if (curr.y < prev.y) return curr;
+    if (curr.y === prev.y && curr.x < prev.x) return curr;
+    return prev;
+  }, positions[0]);
+  const isBW = colorStyle === "B&W (Coloring)";
+  const strokeColor = isBW ? "#111827" : "rgba(0,0,0,0.15)";
+  const strokeWidth = isBW ? 4 : 2;
+  const label = title || `Math blocks ${safeValue}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${view} ${view}`,
+      width: size,
+      height: size,
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("title", { children: label }),
+        /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${offsetX}, ${offsetY}) scale(${scale})`, children: [
+          positions.map((pos) => {
+            const color = getBlockColor(pos.index, colorStyle);
+            const isTop = pos.index === topBlock.index;
+            return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${pos.x}, ${pos.y})`, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: 0,
+                  y: 0,
+                  width: blockSize,
+                  height: blockSize,
+                  rx: 12,
+                  fill: color,
+                  stroke: strokeColor,
+                  strokeWidth
+                }
+              ),
+              !isBW && /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: 0,
+                  y: 0,
+                  width: blockSize,
+                  height: blockSize,
+                  rx: 12,
+                  fill: "url(#rmb-highlight)",
+                  opacity: 0.3
+                }
+              ),
+              showCountingDots && /* @__PURE__ */ jsxRuntime.jsx(
+                "circle",
+                {
+                  cx: blockSize / 2,
+                  cy: blockSize / 2,
+                  r: 8,
+                  fill: isBW ? "none" : "rgba(255,255,255,0.6)",
+                  stroke: isBW ? "#111827" : "none",
+                  strokeWidth: isBW ? 3 : 0
+                }
+              ),
+              isTop && /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "translate(10, 15)", children: [
+                face === "Happy" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 10, cy: 10, r: 4, fill: "#1F2937" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 30, cy: 10, r: 4, fill: "#1F2937" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 10 20 Q 20 28 30 20", fill: "none", stroke: "#1F2937", strokeWidth: 2.5, strokeLinecap: "round" })
+                ] }),
+                face === "Smile" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 8 10 Q 12 6 16 10", fill: "none", stroke: "#1F2937", strokeWidth: 2.5, strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 24 10 Q 28 6 32 10", fill: "none", stroke: "#1F2937", strokeWidth: 2.5, strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 14 20 Q 20 26 26 20", fill: "none", stroke: "#1F2937", strokeWidth: 2.5, strokeLinecap: "round" })
+                ] }),
+                face === "Surprised" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 10, cy: 10, r: 3, fill: isBW ? "white" : "#1F2937", stroke: "#1F2937", strokeWidth: isBW ? 2 : 0 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 30, cy: 10, r: 3, fill: isBW ? "white" : "#1F2937", stroke: "#1F2937", strokeWidth: isBW ? 2 : 0 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("ellipse", { cx: 20, cy: 22, rx: 4, ry: 6, fill: isBW ? "white" : "#1F2937", stroke: "#1F2937", strokeWidth: isBW ? 2 : 0 })
+                ] }),
+                face === "Thinking" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 10, cy: 10, r: 3, fill: "#1F2937" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 30, cy: 10, r: 3, fill: "#1F2937" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 15 22 L 25 22", fill: "none", stroke: "#1F2937", strokeWidth: 2.5, strokeLinecap: "round" })
+                ] })
+              ] })
+            ] }, pos.index);
+          }),
+          showNumberLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: topBlock.x + blockSize / 2,
+              y: topBlock.y - 12,
+              fontSize: 36,
+              fontWeight: "bold",
+              textAnchor: "middle",
+              fill: "#1F2937",
+              fontFamily: "ui-sans-serif, system-ui, sans-serif",
+              children: safeValue
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("linearGradient", { id: "rmb-highlight", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: 0.8 }),
+          /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: 0 })
+        ] }) })
+      ]
+    }
+  );
+}
+function TenFrame({
+  value,
+  colorStyle = "Pastel",
+  showNumberLabel = true,
+  showCountingDots = true,
+  className,
+  title
+}) {
+  const safeValue = Math.max(1, Math.min(100, Math.floor(value || 1)));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MathBlocks,
+    {
+      value: safeValue,
+      layout: "ten-frame",
+      colorStyle,
+      showNumberLabel,
+      showCountingDots,
+      className,
+      title: title || `Ten-frame ${safeValue}`
+    }
+  );
+}
+
+exports.MathBlocks = MathBlocks;
+exports.TenFrame = TenFrame;
+exports.generateBlockPositions = generateBlockPositions;
+exports.getBlockColor = getBlockColor;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/colors.ts","../src/layout.ts","../src/components/MathBlocks.tsx","../src/components/TenFrame.tsx"],"names":["jsxs","jsx","Fragment"],"mappings":"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","file":"index.js","sourcesContent":["export type ColorStyle =\n  | \"Rainbow\"\n  | \"Single Color\"\n  | \"Warm\"\n  | \"Cool\"\n  | \"Pastel\"\n  | \"B&W (Coloring)\";\n\nconst rainbow = [\"#EF4444\", \"#F97316\", \"#EAB308\", \"#22C55E\", \"#3B82F6\", \"#8B5CF6\", \"#EC4899\"];\nconst warm = [\"#EF4444\", \"#F97316\", \"#F59E0B\", \"#EAB308\", \"#FB923C\", \"#F87171\"];\nconst cool = [\"#3B82F6\", \"#06B6D4\", \"#10B981\", \"#22C55E\", \"#6366F1\", \"#8B5CF6\"];\nconst pastel = [\"#FCA5A5\", \"#FDBA74\", \"#FDE047\", \"#86EFAC\", \"#93C5FD\", \"#C4B5FD\", \"#F9A8D4\"];\n\nexport function getBlockColor(index: number, style: ColorStyle): string {\n  switch (style) {\n    case \"Single Color\":\n      return \"#3B82F6\";\n    case \"Warm\":\n      return warm[index % warm.length];\n    case \"Cool\":\n      return cool[index % cool.length];\n    case \"Pastel\":\n      return pastel[index % pastel.length];\n    case \"B&W (Coloring)\":\n      return \"#FFFFFF\";\n    case \"Rainbow\":\n    default:\n      return rainbow[index % rainbow.length];\n  }\n}\n","export type LayoutMode = \"auto\" | \"stack\" | \"grid\" | \"ten-frame\" | \"array\";\n\nexport interface BlockPosition {\n  x: number;\n  y: number;\n  index: number;\n}\n\nexport interface LayoutResult {\n  positions: BlockPosition[];\n  width: number;\n  height: number;\n}\n\nexport function generateBlockPositions(value: number, layout: LayoutMode): LayoutResult {\n  let normalized = Math.max(1, Math.floor(value));\n  if (layout === \"auto\") {\n    if (normalized <= 5) layout = \"stack\";\n    else if (normalized <= 20) layout = \"ten-frame\";\n    else layout = \"grid\";\n  }\n\n  const block = 60;\n  const gap = 4;\n  const cell = block + gap;\n\n  let cols = 1;\n  let rows = 1;\n  const positions: BlockPosition[] = [];\n\n  if (layout === \"stack\") {\n    cols = 1;\n    rows = normalized;\n    for (let i = 0; i < normalized; i++) {\n      positions.push({ x: 0, y: (normalized - 1 - i) * cell, index: i });\n    }\n  } else if (layout === \"grid\") {\n    cols = Math.ceil(Math.sqrt(normalized));\n    rows = Math.ceil(normalized / cols);\n    for (let i = 0; i < normalized; i++) {\n      const c = i % cols;\n      const r = Math.floor(i / cols);\n      positions.push({ x: c * cell, y: (rows - 1 - r) * cell, index: i });\n    }\n  } else if (layout === \"ten-frame\") {\n    cols = Math.min(normalized, 5);\n    const groupSize = 10;\n    rows = 0;\n    for (let i = 0; i < normalized; i++) {\n      const groupIndex = Math.floor(i / groupSize);\n      const indexInGroup = i % groupSize;\n      const c = indexInGroup % 5;\n      const rInGroup = Math.floor(indexInGroup / 5);\n      const r = groupIndex * 3 + rInGroup;\n      if (r > rows) rows = r;\n      positions.push({ x: c * cell, y: r * cell, index: i });\n    }\n    rows += 1;\n    cols = Math.max(cols, Math.min(normalized, 5));\n  } else if (layout === \"array\") {\n    cols = Math.floor(Math.sqrt(normalized));\n    while (normalized % cols !== 0 && cols > 1) cols -= 1;\n    if (cols === 1 && normalized > 3) cols = Math.ceil(Math.sqrt(normalized));\n    rows = Math.ceil(normalized / cols);\n    for (let i = 0; i < normalized; i++) {\n      const c = i % cols;\n      const r = Math.floor(i / cols);\n      positions.push({ x: c * cell, y: (rows - 1 - r) * cell, index: i });\n    }\n  }\n\n  return {\n    positions,\n    width: cols * cell - gap,\n    height: rows * cell - gap,\n  };\n}\n","import * as React from \"react\";\nimport { getBlockColor } from \"../colors\";\nimport { generateBlockPositions } from \"../layout\";\nimport type { MathBlocksProps } from \"../types\";\n\nexport function MathBlocks({\n  value,\n  layout = \"auto\",\n  colorStyle = \"Rainbow\",\n  face = \"Happy\",\n  showNumberLabel = true,\n  showCountingDots = false,\n  size = 320,\n  className,\n  title,\n}: MathBlocksProps): React.JSX.Element {\n  const safeValue = Math.max(1, Math.min(100, Math.floor(value || 1)));\n  const { positions, width, height } = generateBlockPositions(safeValue, layout);\n\n  const view = 800;\n  const padding = 120;\n  const scale = Math.min((view - padding * 2) / Math.max(width, height), 1.5);\n  const contentWidth = width * scale;\n  const contentHeight = height * scale;\n  const offsetX = (view - contentWidth) / 2;\n  const offsetY = (view - contentHeight) / 2;\n\n  const blockSize = 60;\n  const topBlock = positions.reduce((prev, curr) => {\n    if (curr.y < prev.y) return curr;\n    if (curr.y === prev.y && curr.x < prev.x) return curr;\n    return prev;\n  }, positions[0]);\n\n  const isBW = colorStyle === \"B&W (Coloring)\";\n  const strokeColor = isBW ? \"#111827\" : \"rgba(0,0,0,0.15)\";\n  const strokeWidth = isBW ? 4 : 2;\n  const label = title || `Math blocks ${safeValue}`;\n\n  return (\n    <svg\n      viewBox={`0 0 ${view} ${view}`}\n      width={size}\n      height={size}\n      className={className}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      aria-label={label}\n    >\n      <title>{label}</title>\n      <g transform={`translate(${offsetX}, ${offsetY}) scale(${scale})`}>\n        {positions.map((pos) => {\n          const color = getBlockColor(pos.index, colorStyle);\n          const isTop = pos.index === topBlock.index;\n\n          return (\n            <g key={pos.index} transform={`translate(${pos.x}, ${pos.y})`}>\n              <rect\n                x={0}\n                y={0}\n                width={blockSize}\n                height={blockSize}\n                rx={12}\n                fill={color}\n                stroke={strokeColor}\n                strokeWidth={strokeWidth}\n              />\n\n              {!isBW && (\n                <rect\n                  x={0}\n                  y={0}\n                  width={blockSize}\n                  height={blockSize}\n                  rx={12}\n                  fill=\"url(#rmb-highlight)\"\n                  opacity={0.3}\n                />\n              )}\n\n              {showCountingDots && (\n                <circle\n                  cx={blockSize / 2}\n                  cy={blockSize / 2}\n                  r={8}\n                  fill={isBW ? \"none\" : \"rgba(255,255,255,0.6)\"}\n                  stroke={isBW ? \"#111827\" : \"none\"}\n                  strokeWidth={isBW ? 3 : 0}\n                />\n              )}\n\n              {isTop && (\n                <g transform=\"translate(10, 15)\">\n                  {face === \"Happy\" && (\n                    <>\n                      <circle cx={10} cy={10} r={4} fill=\"#1F2937\" />\n                      <circle cx={30} cy={10} r={4} fill=\"#1F2937\" />\n                      <path d=\"M 10 20 Q 20 28 30 20\" fill=\"none\" stroke=\"#1F2937\" strokeWidth={2.5} strokeLinecap=\"round\" />\n                    </>\n                  )}\n                  {face === \"Smile\" && (\n                    <>\n                      <path d=\"M 8 10 Q 12 6 16 10\" fill=\"none\" stroke=\"#1F2937\" strokeWidth={2.5} strokeLinecap=\"round\" />\n                      <path d=\"M 24 10 Q 28 6 32 10\" fill=\"none\" stroke=\"#1F2937\" strokeWidth={2.5} strokeLinecap=\"round\" />\n                      <path d=\"M 14 20 Q 20 26 26 20\" fill=\"none\" stroke=\"#1F2937\" strokeWidth={2.5} strokeLinecap=\"round\" />\n                    </>\n                  )}\n                  {face === \"Surprised\" && (\n                    <>\n                      <circle cx={10} cy={10} r={3} fill={isBW ? \"white\" : \"#1F2937\"} stroke=\"#1F2937\" strokeWidth={isBW ? 2 : 0} />\n                      <circle cx={30} cy={10} r={3} fill={isBW ? \"white\" : \"#1F2937\"} stroke=\"#1F2937\" strokeWidth={isBW ? 2 : 0} />\n                      <ellipse cx={20} cy={22} rx={4} ry={6} fill={isBW ? \"white\" : \"#1F2937\"} stroke=\"#1F2937\" strokeWidth={isBW ? 2 : 0} />\n                    </>\n                  )}\n                  {face === \"Thinking\" && (\n                    <>\n                      <circle cx={10} cy={10} r={3} fill=\"#1F2937\" />\n                      <circle cx={30} cy={10} r={3} fill=\"#1F2937\" />\n                      <path d=\"M 15 22 L 25 22\" fill=\"none\" stroke=\"#1F2937\" strokeWidth={2.5} strokeLinecap=\"round\" />\n                    </>\n                  )}\n                </g>\n              )}\n            </g>\n          );\n        })}\n\n        {showNumberLabel && (\n          <text\n            x={topBlock.x + blockSize / 2}\n            y={topBlock.y - 12}\n            fontSize={36}\n            fontWeight=\"bold\"\n            textAnchor=\"middle\"\n            fill=\"#1F2937\"\n            fontFamily=\"ui-sans-serif, system-ui, sans-serif\"\n          >\n            {safeValue}\n          </text>\n        )}\n      </g>\n\n      <defs>\n        <linearGradient id=\"rmb-highlight\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor=\"white\" stopOpacity={0.8} />\n          <stop offset=\"100%\" stopColor=\"white\" stopOpacity={0} />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n}\n","import * as React from \"react\";\nimport { MathBlocks } from \"./MathBlocks\";\nimport type { TenFrameProps } from \"../types\";\n\nexport function TenFrame({\n  value,\n  colorStyle = \"Pastel\",\n  showNumberLabel = true,\n  showCountingDots = true,\n  className,\n  title,\n}: TenFrameProps): React.JSX.Element {\n  const safeValue = Math.max(1, Math.min(100, Math.floor(value || 1)));\n\n  return (\n    <MathBlocks\n      value={safeValue}\n      layout=\"ten-frame\"\n      colorStyle={colorStyle}\n      showNumberLabel={showNumberLabel}\n      showCountingDots={showCountingDots}\n      className={className}\n      title={title || `Ten-frame ${safeValue}`}\n    />\n  );\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,240 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/colors.ts
+var rainbow = ["#EF4444", "#F97316", "#EAB308", "#22C55E", "#3B82F6", "#8B5CF6", "#EC4899"];
+var warm = ["#EF4444", "#F97316", "#F59E0B", "#EAB308", "#FB923C", "#F87171"];
+var cool = ["#3B82F6", "#06B6D4", "#10B981", "#22C55E", "#6366F1", "#8B5CF6"];
+var pastel = ["#FCA5A5", "#FDBA74", "#FDE047", "#86EFAC", "#93C5FD", "#C4B5FD", "#F9A8D4"];
+function getBlockColor(index, style) {
+  switch (style) {
+    case "Single Color":
+      return "#3B82F6";
+    case "Warm":
+      return warm[index % warm.length];
+    case "Cool":
+      return cool[index % cool.length];
+    case "Pastel":
+      return pastel[index % pastel.length];
+    case "B&W (Coloring)":
+      return "#FFFFFF";
+    case "Rainbow":
+    default:
+      return rainbow[index % rainbow.length];
+  }
+}
+
+// src/layout.ts
+function generateBlockPositions(value, layout) {
+  let normalized = Math.max(1, Math.floor(value));
+  if (layout === "auto") {
+    if (normalized <= 5) layout = "stack";
+    else if (normalized <= 20) layout = "ten-frame";
+    else layout = "grid";
+  }
+  const block = 60;
+  const gap = 4;
+  const cell = block + gap;
+  let cols = 1;
+  let rows = 1;
+  const positions = [];
+  if (layout === "stack") {
+    cols = 1;
+    rows = normalized;
+    for (let i = 0; i < normalized; i++) {
+      positions.push({ x: 0, y: (normalized - 1 - i) * cell, index: i });
+    }
+  } else if (layout === "grid") {
+    cols = Math.ceil(Math.sqrt(normalized));
+    rows = Math.ceil(normalized / cols);
+    for (let i = 0; i < normalized; i++) {
+      const c = i % cols;
+      const r = Math.floor(i / cols);
+      positions.push({ x: c * cell, y: (rows - 1 - r) * cell, index: i });
+    }
+  } else if (layout === "ten-frame") {
+    cols = Math.min(normalized, 5);
+    const groupSize = 10;
+    rows = 0;
+    for (let i = 0; i < normalized; i++) {
+      const groupIndex = Math.floor(i / groupSize);
+      const indexInGroup = i % groupSize;
+      const c = indexInGroup % 5;
+      const rInGroup = Math.floor(indexInGroup / 5);
+      const r = groupIndex * 3 + rInGroup;
+      if (r > rows) rows = r;
+      positions.push({ x: c * cell, y: r * cell, index: i });
+    }
+    rows += 1;
+    cols = Math.max(cols, Math.min(normalized, 5));
+  } else if (layout === "array") {
+    cols = Math.floor(Math.sqrt(normalized));
+    while (normalized % cols !== 0 && cols > 1) cols -= 1;
+    if (cols === 1 && normalized > 3) cols = Math.ceil(Math.sqrt(normalized));
+    rows = Math.ceil(normalized / cols);
+    for (let i = 0; i < normalized; i++) {
+      const c = i % cols;
+      const r = Math.floor(i / cols);
+      positions.push({ x: c * cell, y: (rows - 1 - r) * cell, index: i });
+    }
+  }
+  return {
+    positions,
+    width: cols * cell - gap,
+    height: rows * cell - gap
+  };
+}
+function MathBlocks({
+  value,
+  layout = "auto",
+  colorStyle = "Rainbow",
+  face = "Happy",
+  showNumberLabel = true,
+  showCountingDots = false,
+  size = 320,
+  className,
+  title
+}) {
+  const safeValue = Math.max(1, Math.min(100, Math.floor(value || 1)));
+  const { positions, width, height } = generateBlockPositions(safeValue, layout);
+  const view = 800;
+  const padding = 120;
+  const scale = Math.min((view - padding * 2) / Math.max(width, height), 1.5);
+  const contentWidth = width * scale;
+  const contentHeight = height * scale;
+  const offsetX = (view - contentWidth) / 2;
+  const offsetY = (view - contentHeight) / 2;
+  const blockSize = 60;
+  const topBlock = positions.reduce((prev, curr) => {
+    if (curr.y < prev.y) return curr;
+    if (curr.y === prev.y && curr.x < prev.x) return curr;
+    return prev;
+  }, positions[0]);
+  const isBW = colorStyle === "B&W (Coloring)";
+  const strokeColor = isBW ? "#111827" : "rgba(0,0,0,0.15)";
+  const strokeWidth = isBW ? 4 : 2;
+  const label = title || `Math blocks ${safeValue}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${view} ${view}`,
+      width: size,
+      height: size,
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx("title", { children: label }),
+        /* @__PURE__ */ jsxs("g", { transform: `translate(${offsetX}, ${offsetY}) scale(${scale})`, children: [
+          positions.map((pos) => {
+            const color = getBlockColor(pos.index, colorStyle);
+            const isTop = pos.index === topBlock.index;
+            return /* @__PURE__ */ jsxs("g", { transform: `translate(${pos.x}, ${pos.y})`, children: [
+              /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: 0,
+                  y: 0,
+                  width: blockSize,
+                  height: blockSize,
+                  rx: 12,
+                  fill: color,
+                  stroke: strokeColor,
+                  strokeWidth
+                }
+              ),
+              !isBW && /* @__PURE__ */ jsx(
+                "rect",
+                {
+                  x: 0,
+                  y: 0,
+                  width: blockSize,
+                  height: blockSize,
+                  rx: 12,
+                  fill: "url(#rmb-highlight)",
+                  opacity: 0.3
+                }
+              ),
+              showCountingDots && /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: blockSize / 2,
+                  cy: blockSize / 2,
+                  r: 8,
+                  fill: isBW ? "none" : "rgba(255,255,255,0.6)",
+                  stroke: isBW ? "#111827" : "none",
+                  strokeWidth: isBW ? 3 : 0
+                }
+              ),
+              isTop && /* @__PURE__ */ jsxs("g", { transform: "translate(10, 15)", children: [
+                face === "Happy" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("circle", { cx: 10, cy: 10, r: 4, fill: "#1F2937" }),
+                  /* @__PURE__ */ jsx("circle", { cx: 30, cy: 10, r: 4, fill: "#1F2937" }),
+                  /* @__PURE__ */ jsx("path", { d: "M 10 20 Q 20 28 30 20", fill: "none", stroke: "#1F2937", strokeWidth: 2.5, strokeLinecap: "round" })
+                ] }),
+                face === "Smile" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("path", { d: "M 8 10 Q 12 6 16 10", fill: "none", stroke: "#1F2937", strokeWidth: 2.5, strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsx("path", { d: "M 24 10 Q 28 6 32 10", fill: "none", stroke: "#1F2937", strokeWidth: 2.5, strokeLinecap: "round" }),
+                  /* @__PURE__ */ jsx("path", { d: "M 14 20 Q 20 26 26 20", fill: "none", stroke: "#1F2937", strokeWidth: 2.5, strokeLinecap: "round" })
+                ] }),
+                face === "Surprised" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("circle", { cx: 10, cy: 10, r: 3, fill: isBW ? "white" : "#1F2937", stroke: "#1F2937", strokeWidth: isBW ? 2 : 0 }),
+                  /* @__PURE__ */ jsx("circle", { cx: 30, cy: 10, r: 3, fill: isBW ? "white" : "#1F2937", stroke: "#1F2937", strokeWidth: isBW ? 2 : 0 }),
+                  /* @__PURE__ */ jsx("ellipse", { cx: 20, cy: 22, rx: 4, ry: 6, fill: isBW ? "white" : "#1F2937", stroke: "#1F2937", strokeWidth: isBW ? 2 : 0 })
+                ] }),
+                face === "Thinking" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("circle", { cx: 10, cy: 10, r: 3, fill: "#1F2937" }),
+                  /* @__PURE__ */ jsx("circle", { cx: 30, cy: 10, r: 3, fill: "#1F2937" }),
+                  /* @__PURE__ */ jsx("path", { d: "M 15 22 L 25 22", fill: "none", stroke: "#1F2937", strokeWidth: 2.5, strokeLinecap: "round" })
+                ] })
+              ] })
+            ] }, pos.index);
+          }),
+          showNumberLabel && /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: topBlock.x + blockSize / 2,
+              y: topBlock.y - 12,
+              fontSize: 36,
+              fontWeight: "bold",
+              textAnchor: "middle",
+              fill: "#1F2937",
+              fontFamily: "ui-sans-serif, system-ui, sans-serif",
+              children: safeValue
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "rmb-highlight", x1: "0", y1: "0", x2: "0", y2: "1", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "white", stopOpacity: 0.8 }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "white", stopOpacity: 0 })
+        ] }) })
+      ]
+    }
+  );
+}
+function TenFrame({
+  value,
+  colorStyle = "Pastel",
+  showNumberLabel = true,
+  showCountingDots = true,
+  className,
+  title
+}) {
+  const safeValue = Math.max(1, Math.min(100, Math.floor(value || 1)));
+  return /* @__PURE__ */ jsx(
+    MathBlocks,
+    {
+      value: safeValue,
+      layout: "ten-frame",
+      colorStyle,
+      showNumberLabel,
+      showCountingDots,
+      className,
+      title: title || `Ten-frame ${safeValue}`
+    }
+  );
+}
+
+export { MathBlocks, TenFrame, generateBlockPositions, getBlockColor };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/colors.ts","../src/layout.ts","../src/components/MathBlocks.tsx","../src/components/TenFrame.tsx"],"names":["jsx"],"mappings":"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","file":"index.mjs","sourcesContent":["export type ColorStyle =\n  | \"Rainbow\"\n  | \"Single Color\"\n  | \"Warm\"\n  | \"Cool\"\n  | \"Pastel\"\n  | \"B&W (Coloring)\";\n\nconst rainbow = [\"#EF4444\", \"#F97316\", \"#EAB308\", \"#22C55E\", \"#3B82F6\", \"#8B5CF6\", \"#EC4899\"];\nconst warm = [\"#EF4444\", \"#F97316\", \"#F59E0B\", \"#EAB308\", \"#FB923C\", \"#F87171\"];\nconst cool = [\"#3B82F6\", \"#06B6D4\", \"#10B981\", \"#22C55E\", \"#6366F1\", \"#8B5CF6\"];\nconst pastel = [\"#FCA5A5\", \"#FDBA74\", \"#FDE047\", \"#86EFAC\", \"#93C5FD\", \"#C4B5FD\", \"#F9A8D4\"];\n\nexport function getBlockColor(index: number, style: ColorStyle): string {\n  switch (style) {\n    case \"Single Color\":\n      return \"#3B82F6\";\n    case \"Warm\":\n      return warm[index % warm.length];\n    case \"Cool\":\n      return cool[index % cool.length];\n    case \"Pastel\":\n      return pastel[index % pastel.length];\n    case \"B&W (Coloring)\":\n      return \"#FFFFFF\";\n    case \"Rainbow\":\n    default:\n      return rainbow[index % rainbow.length];\n  }\n}\n","export type LayoutMode = \"auto\" | \"stack\" | \"grid\" | \"ten-frame\" | \"array\";\n\nexport interface BlockPosition {\n  x: number;\n  y: number;\n  index: number;\n}\n\nexport interface LayoutResult {\n  positions: BlockPosition[];\n  width: number;\n  height: number;\n}\n\nexport function generateBlockPositions(value: number, layout: LayoutMode): LayoutResult {\n  let normalized = Math.max(1, Math.floor(value));\n  if (layout === \"auto\") {\n    if (normalized <= 5) layout = \"stack\";\n    else if (normalized <= 20) layout = \"ten-frame\";\n    else layout = \"grid\";\n  }\n\n  const block = 60;\n  const gap = 4;\n  const cell = block + gap;\n\n  let cols = 1;\n  let rows = 1;\n  const positions: BlockPosition[] = [];\n\n  if (layout === \"stack\") {\n    cols = 1;\n    rows = normalized;\n    for (let i = 0; i < normalized; i++) {\n      positions.push({ x: 0, y: (normalized - 1 - i) * cell, index: i });\n    }\n  } else if (layout === \"grid\") {\n    cols = Math.ceil(Math.sqrt(normalized));\n    rows = Math.ceil(normalized / cols);\n    for (let i = 0; i < normalized; i++) {\n      const c = i % cols;\n      const r = Math.floor(i / cols);\n      positions.push({ x: c * cell, y: (rows - 1 - r) * cell, index: i });\n    }\n  } else if (layout === \"ten-frame\") {\n    cols = Math.min(normalized, 5);\n    const groupSize = 10;\n    rows = 0;\n    for (let i = 0; i < normalized; i++) {\n      const groupIndex = Math.floor(i / groupSize);\n      const indexInGroup = i % groupSize;\n      const c = indexInGroup % 5;\n      const rInGroup = Math.floor(indexInGroup / 5);\n      const r = groupIndex * 3 + rInGroup;\n      if (r > rows) rows = r;\n      positions.push({ x: c * cell, y: r * cell, index: i });\n    }\n    rows += 1;\n    cols = Math.max(cols, Math.min(normalized, 5));\n  } else if (layout === \"array\") {\n    cols = Math.floor(Math.sqrt(normalized));\n    while (normalized % cols !== 0 && cols > 1) cols -= 1;\n    if (cols === 1 && normalized > 3) cols = Math.ceil(Math.sqrt(normalized));\n    rows = Math.ceil(normalized / cols);\n    for (let i = 0; i < normalized; i++) {\n      const c = i % cols;\n      const r = Math.floor(i / cols);\n      positions.push({ x: c * cell, y: (rows - 1 - r) * cell, index: i });\n    }\n  }\n\n  return {\n    positions,\n    width: cols * cell - gap,\n    height: rows * cell - gap,\n  };\n}\n","import * as React from \"react\";\nimport { getBlockColor } from \"../colors\";\nimport { generateBlockPositions } from \"../layout\";\nimport type { MathBlocksProps } from \"../types\";\n\nexport function MathBlocks({\n  value,\n  layout = \"auto\",\n  colorStyle = \"Rainbow\",\n  face = \"Happy\",\n  showNumberLabel = true,\n  showCountingDots = false,\n  size = 320,\n  className,\n  title,\n}: MathBlocksProps): React.JSX.Element {\n  const safeValue = Math.max(1, Math.min(100, Math.floor(value || 1)));\n  const { positions, width, height } = generateBlockPositions(safeValue, layout);\n\n  const view = 800;\n  const padding = 120;\n  const scale = Math.min((view - padding * 2) / Math.max(width, height), 1.5);\n  const contentWidth = width * scale;\n  const contentHeight = height * scale;\n  const offsetX = (view - contentWidth) / 2;\n  const offsetY = (view - contentHeight) / 2;\n\n  const blockSize = 60;\n  const topBlock = positions.reduce((prev, curr) => {\n    if (curr.y < prev.y) return curr;\n    if (curr.y === prev.y && curr.x < prev.x) return curr;\n    return prev;\n  }, positions[0]);\n\n  const isBW = colorStyle === \"B&W (Coloring)\";\n  const strokeColor = isBW ? \"#111827\" : \"rgba(0,0,0,0.15)\";\n  const strokeWidth = isBW ? 4 : 2;\n  const label = title || `Math blocks ${safeValue}`;\n\n  return (\n    <svg\n      viewBox={`0 0 ${view} ${view}`}\n      width={size}\n      height={size}\n      className={className}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"img\"\n      aria-label={label}\n    >\n      <title>{label}</title>\n      <g transform={`translate(${offsetX}, ${offsetY}) scale(${scale})`}>\n        {positions.map((pos) => {\n          const color = getBlockColor(pos.index, colorStyle);\n          const isTop = pos.index === topBlock.index;\n\n          return (\n            <g key={pos.index} transform={`translate(${pos.x}, ${pos.y})`}>\n              <rect\n                x={0}\n                y={0}\n                width={blockSize}\n                height={blockSize}\n                rx={12}\n                fill={color}\n                stroke={strokeColor}\n                strokeWidth={strokeWidth}\n              />\n\n              {!isBW && (\n                <rect\n                  x={0}\n                  y={0}\n                  width={blockSize}\n                  height={blockSize}\n                  rx={12}\n                  fill=\"url(#rmb-highlight)\"\n                  opacity={0.3}\n                />\n              )}\n\n              {showCountingDots && (\n                <circle\n                  cx={blockSize / 2}\n                  cy={blockSize / 2}\n                  r={8}\n                  fill={isBW ? \"none\" : \"rgba(255,255,255,0.6)\"}\n                  stroke={isBW ? \"#111827\" : \"none\"}\n                  strokeWidth={isBW ? 3 : 0}\n                />\n              )}\n\n              {isTop && (\n                <g transform=\"translate(10, 15)\">\n                  {face === \"Happy\" && (\n                    <>\n                      <circle cx={10} cy={10} r={4} fill=\"#1F2937\" />\n                      <circle cx={30} cy={10} r={4} fill=\"#1F2937\" />\n                      <path d=\"M 10 20 Q 20 28 30 20\" fill=\"none\" stroke=\"#1F2937\" strokeWidth={2.5} strokeLinecap=\"round\" />\n                    </>\n                  )}\n                  {face === \"Smile\" && (\n                    <>\n                      <path d=\"M 8 10 Q 12 6 16 10\" fill=\"none\" stroke=\"#1F2937\" strokeWidth={2.5} strokeLinecap=\"round\" />\n                      <path d=\"M 24 10 Q 28 6 32 10\" fill=\"none\" stroke=\"#1F2937\" strokeWidth={2.5} strokeLinecap=\"round\" />\n                      <path d=\"M 14 20 Q 20 26 26 20\" fill=\"none\" stroke=\"#1F2937\" strokeWidth={2.5} strokeLinecap=\"round\" />\n                    </>\n                  )}\n                  {face === \"Surprised\" && (\n                    <>\n                      <circle cx={10} cy={10} r={3} fill={isBW ? \"white\" : \"#1F2937\"} stroke=\"#1F2937\" strokeWidth={isBW ? 2 : 0} />\n                      <circle cx={30} cy={10} r={3} fill={isBW ? \"white\" : \"#1F2937\"} stroke=\"#1F2937\" strokeWidth={isBW ? 2 : 0} />\n                      <ellipse cx={20} cy={22} rx={4} ry={6} fill={isBW ? \"white\" : \"#1F2937\"} stroke=\"#1F2937\" strokeWidth={isBW ? 2 : 0} />\n                    </>\n                  )}\n                  {face === \"Thinking\" && (\n                    <>\n                      <circle cx={10} cy={10} r={3} fill=\"#1F2937\" />\n                      <circle cx={30} cy={10} r={3} fill=\"#1F2937\" />\n                      <path d=\"M 15 22 L 25 22\" fill=\"none\" stroke=\"#1F2937\" strokeWidth={2.5} strokeLinecap=\"round\" />\n                    </>\n                  )}\n                </g>\n              )}\n            </g>\n          );\n        })}\n\n        {showNumberLabel && (\n          <text\n            x={topBlock.x + blockSize / 2}\n            y={topBlock.y - 12}\n            fontSize={36}\n            fontWeight=\"bold\"\n            textAnchor=\"middle\"\n            fill=\"#1F2937\"\n            fontFamily=\"ui-sans-serif, system-ui, sans-serif\"\n          >\n            {safeValue}\n          </text>\n        )}\n      </g>\n\n      <defs>\n        <linearGradient id=\"rmb-highlight\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n          <stop offset=\"0%\" stopColor=\"white\" stopOpacity={0.8} />\n          <stop offset=\"100%\" stopColor=\"white\" stopOpacity={0} />\n        </linearGradient>\n      </defs>\n    </svg>\n  );\n}\n","import * as React from \"react\";\nimport { MathBlocks } from \"./MathBlocks\";\nimport type { TenFrameProps } from \"../types\";\n\nexport function TenFrame({\n  value,\n  colorStyle = \"Pastel\",\n  showNumberLabel = true,\n  showCountingDots = true,\n  className,\n  title,\n}: TenFrameProps): React.JSX.Element {\n  const safeValue = Math.max(1, Math.min(100, Math.floor(value || 1)));\n\n  return (\n    <MathBlocks\n      value={safeValue}\n      layout=\"ten-frame\"\n      colorStyle={colorStyle}\n      showNumberLabel={showNumberLabel}\n      showCountingDots={showCountingDots}\n      className={className}\n      title={title || `Ten-frame ${safeValue}`}\n    />\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "react-math-blocks",
+  "version": "0.1.0",
+  "description": "Live Demo & Full Customization available at PrintNum.com. Lightweight React components for Number Blocks and Ten-Frame math visuals.",
+  "keywords": [
+    "react",
+    "math",
+    "ten-frame",
+    "number-blocks",
+    "education",
+    "homeschool",
+    "teachers"
+  ],
+  "author": "PrintNum",
+  "license": "MIT",
+  "homepage": "https://printnum.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/printnum/react-math-blocks.git"
+  },
+  "bugs": {
+    "url": "https://github.com/printnum/react-math-blocks/issues"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "prepublishOnly": "npm run typecheck && npm run build"
+  }
+}