@dcg-overseas/number-line 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -489,6 +489,47 @@ function computeLabelStep(containerWidth, range) {
   const candidates = [1, 2, 5, 10, 20, 25, 50, 100, 200, 500];
   return candidates.find((c) => c >= raw) ?? candidates[candidates.length - 1];
 }
+function computeMinorTickStep(majorStep, containerWidth, range) {
+  if (majorStep <= 1 || range <= 0 || containerWidth <= 0) return 0;
+  const pxPerMajor = containerWidth / range * majorStep;
+  const MIN_MINOR_PX = 8;
+  for (const divisions of [10, 5, 4, 2]) {
+    if (majorStep % divisions !== 0) continue;
+    const minorStep = majorStep / divisions;
+    if (minorStep < 1) continue;
+    if (pxPerMajor / divisions >= MIN_MINOR_PX) return minorStep;
+  }
+  if (majorStep >= 2 && pxPerMajor / Math.min(majorStep - 1, 5) >= MIN_MINOR_PX) {
+    return 1;
+  }
+  return 0;
+}
+function computeHorizontalLayout(minVal, maxVal) {
+  const gutter = 16;
+  const charWidth = 8;
+  const leftLabel = String(Math.round(minVal));
+  const rightLabel = String(Math.round(maxVal));
+  return {
+    padLeft: gutter,
+    padRight: gutter,
+    labelInsetLeft: Math.max(8, Math.ceil(leftLabel.length * charWidth / 2) + 2),
+    labelInsetRight: Math.max(12, Math.ceil(rightLabel.length * charWidth / 2) + 4)
+  };
+}
+function createValueToX(viewMin, viewMax, viewWidth, layout) {
+  const range = Math.max(viewMax - viewMin, 1e-6);
+  const usable = Math.max(viewWidth - layout.padLeft - layout.padRight, 1);
+  const innerUsable = Math.max(
+    usable - layout.labelInsetLeft - layout.labelInsetRight,
+    1
+  );
+  return (value) => layout.padLeft + layout.labelInsetLeft + (value - viewMin) / range * innerUsable;
+}
+function edgeTextAnchor(value, domainMin, domainMax) {
+  if (Math.abs(value - domainMin) < 1e-9) return "start";
+  if (Math.abs(value - domainMax) < 1e-9) return "end";
+  return "middle";
+}
 const ARC_COLORS = [
   "#7c3aed",
   "#0891b2",
@@ -496,6 +537,9 @@ const ARC_COLORS = [
   "#be185d",
   "#16a34a"
 ];
+const ARC_RY_RATIO = 0.9;
+const ARC_ANIMATION_STAGGER_MS = 400;
+const ARC_ANIMATION_DRAW_MS = 500;
 function gcd(a, b) {
   let x = Math.max(1, Math.abs(Math.round(a)));
   let y = Math.max(1, Math.abs(Math.round(b)));
@@ -504,11 +548,11 @@ function gcd(a, b) {
 }
 const AxisLayer = React.memo(function AxisLayer2({
   min,
+  max,
   viewMin,
   viewMax,
   axisY,
-  padLeft,
-  padRight,
+  horizontalLayout,
   viewWidth,
   containerWidth,
   groupSize,
@@ -520,15 +564,17 @@ const AxisLayer = React.memo(function AxisLayer2({
 }) {
   const range = viewMax - viewMin;
   if (range <= 0) return null;
-  const usable = viewWidth - padLeft - padRight;
-  const toX = (v) => padLeft + (v - viewMin) / range * usable;
+  const toX = createValueToX(viewMin, viewMax, viewWidth, horizontalLayout);
+  const axisStartX = toX(viewMin);
+  const axisEndX = toX(viewMax);
   const step = Math.max(1, Math.round(tickStep));
   const rawLabelStep = computeLabelStep(containerWidth, range);
   const labelStep = Math.max(step, Math.ceil(rawLabelStep / step) * step);
+  const minorStep = showMinorTicks ? computeMinorTickStep(step, containerWidth, range) : 0;
   const MAX_TICKS = 500;
   const capStep = Math.max(1, Math.ceil(range / MAX_TICKS));
   const visibleStep = groupSize > 0 ? gcd(step, groupSize) : step;
-  const iterStep = showMinorTicks ? capStep : Math.max(capStep, visibleStep);
+  const iterStep = showMinorTicks && minorStep > 0 ? Math.max(capStep, gcd(minorStep, capStep)) : Math.max(capStep, visibleStep);
   const startVal = Math.floor(viewMin / iterStep) * iterStep;
   const allTicks = [];
   for (let v = startVal; v <= viewMax; v += iterStep) {
@@ -538,9 +584,9 @@ const AxisLayer = React.memo(function AxisLayer2({
     /* @__PURE__ */ jsxRuntime.jsx(
       "line",
       {
-        x1: padLeft - 4,
+        x1: axisStartX - 4,
         y1: axisY,
-        x2: viewWidth - padRight,
+        x2: axisEndX,
         y2: axisY,
         stroke: "#374151",
         strokeWidth: 2
@@ -550,16 +596,18 @@ const AxisLayer = React.memo(function AxisLayer2({
       const x = toX(v);
       const offset = v - min;
       const isMajor = offset % step === 0;
+      const isOnMinorGrid = minorStep > 0 && Math.abs(offset % minorStep) < 1e-9;
       const maxGroupBoundary = min + groupCount * groupSize;
       const isGroupBoundary = groupSize > 0 && offset % groupSize === 0 && v <= maxGroupBoundary;
-      const visible = isGroupBoundary && showGroupTicks || isMajor && showMajorTicks || !isGroupBoundary && !isMajor && showMinorTicks;
+      const isMinorTick = isOnMinorGrid && !isMajor && !isGroupBoundary;
+      const visible = isGroupBoundary && showGroupTicks || isMajor && showMajorTicks || isMinorTick && showMinorTicks;
       if (!visible) return null;
       const renderAsGroup = isGroupBoundary && showGroupTicks;
       const renderAsMajor = !renderAsGroup && isMajor && showMajorTicks;
       const showLabel = (renderAsGroup || renderAsMajor) && offset % labelStep === 0;
       const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : 4;
-      const strokeW = renderAsGroup ? 1.5 : renderAsMajor ? 1 : 0.5;
-      const color = renderAsGroup || renderAsMajor ? "#374151" : "#9ca3af";
+      const strokeW = renderAsGroup ? 1.5 : renderAsMajor ? 1 : 0.75;
+      const color = renderAsGroup || renderAsMajor ? "#374151" : "#6b7280";
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "line",
@@ -577,7 +625,7 @@ const AxisLayer = React.memo(function AxisLayer2({
           {
             x,
             y: axisY + 22,
-            textAnchor: "middle",
+            textAnchor: edgeTextAnchor(v, min, max),
             fontSize: 11,
             fill: "#374151",
             pointerEvents: "none",
@@ -589,6 +637,173 @@ const AxisLayer = React.memo(function AxisLayer2({
     })
   ] });
 });
+function AnimatedArc({
+  groupIndex,
+  arcPath,
+  color,
+  isSelected,
+  x2,
+  textY,
+  axisY,
+  end,
+  min,
+  max,
+  hitCursor,
+  shouldAnimate,
+  onArcClick
+}) {
+  const measureRef = React.useRef(null);
+  const animatedRef = React.useRef(false);
+  const [pathLen, setPathLen] = React.useState(null);
+  const [dashOffset, setDashOffset] = React.useState(null);
+  const [isDrawing, setIsDrawing] = React.useState(false);
+  const [showLabels, setShowLabels] = React.useState(!shouldAnimate);
+  const [showHitArea, setShowHitArea] = React.useState(!shouldAnimate);
+  const strokeColor = isSelected ? "#1d4ed8" : color;
+  const arrowHeadH = 7;
+  const arrowHeadHW = 4;
+  React.useLayoutEffect(() => {
+    var _a;
+    const len = ((_a = measureRef.current) == null ? void 0 : _a.getTotalLength()) ?? 0;
+    if (len <= 0) return;
+    setPathLen(len);
+    if (!shouldAnimate || animatedRef.current) {
+      setDashOffset(0);
+      setShowLabels(true);
+      setShowHitArea(true);
+      setIsDrawing(false);
+      return;
+    }
+    setDashOffset(len);
+    setShowLabels(false);
+    setShowHitArea(false);
+    setIsDrawing(false);
+    const delay = groupIndex * ARC_ANIMATION_STAGGER_MS;
+    let drawTimer = 0;
+    let labelTimer = 0;
+    let completeTimer = 0;
+    const rafId = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        drawTimer = window.setTimeout(() => {
+          setIsDrawing(true);
+          setDashOffset(0);
+        }, delay);
+        labelTimer = window.setTimeout(
+          () => setShowLabels(true),
+          delay + ARC_ANIMATION_DRAW_MS
+        );
+        completeTimer = window.setTimeout(() => {
+          animatedRef.current = true;
+          setIsDrawing(false);
+          setShowHitArea(true);
+        }, delay + ARC_ANIMATION_DRAW_MS);
+      });
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.clearTimeout(drawTimer);
+      window.clearTimeout(labelTimer);
+      window.clearTimeout(completeTimer);
+    };
+  }, [arcPath, groupIndex, shouldAnimate]);
+  const strokeTransition = isDrawing ? `stroke-dashoffset ${ARC_ANIMATION_DRAW_MS}ms ease-out` : "none";
+  const arcVisible = pathLen !== null && dashOffset !== null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        ref: measureRef,
+        d: arcPath,
+        fill: "none",
+        stroke: "none",
+        visibility: "hidden",
+        pointerEvents: "none"
+      }
+    ),
+    arcVisible && isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: arcPath,
+        fill: "none",
+        stroke: "rgba(0,0,0,0.15)",
+        strokeWidth: 14,
+        strokeLinecap: "round",
+        pointerEvents: "none"
+      }
+    ),
+    arcVisible && /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: arcPath,
+        fill: "none",
+        stroke: strokeColor,
+        strokeWidth: isSelected ? 3 : 2,
+        strokeDasharray: pathLen,
+        strokeDashoffset: dashOffset,
+        style: { transition: strokeTransition },
+        pointerEvents: "none"
+      }
+    ),
+    arcVisible && showHitArea && /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: arcPath,
+        fill: "none",
+        stroke: "transparent",
+        strokeWidth: 20,
+        strokeLinecap: "round",
+        pointerEvents: "stroke",
+        style: { cursor: hitCursor },
+        onClick: (e) => {
+          onArcClick(groupIndex, e);
+        }
+      }
+    ),
+    arcVisible && /* @__PURE__ */ jsxRuntime.jsxs(
+      "g",
+      {
+        opacity: showLabels ? 1 : 0,
+        style: { transition: "opacity 220ms ease-out" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "text",
+            {
+              x: x2,
+              y: textY,
+              textAnchor: edgeTextAnchor(end, min, max),
+              fontSize: 10,
+              fill: strokeColor,
+              fontWeight: "600",
+              pointerEvents: "none",
+              style: { userSelect: "none", WebkitUserSelect: "none" },
+              children: end
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: x2,
+              y1: textY + 4,
+              x2,
+              y2: axisY - arrowHeadH,
+              stroke: strokeColor,
+              strokeWidth: 1.5,
+              pointerEvents: "none"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "polygon",
+            {
+              points: `${x2},${axisY} ${x2 - arrowHeadHW},${axisY - arrowHeadH} ${x2 + arrowHeadHW},${axisY - arrowHeadH}`,
+              fill: strokeColor,
+              pointerEvents: "none"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 const GroupArcsLayer = React.memo(function GroupArcsLayer2({
   min,
   max,
@@ -597,8 +812,7 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
   groupSize,
   groupCount,
   axisY,
-  padLeft,
-  padRight,
+  horizontalLayout,
   viewWidth,
   arcMaxHeight,
   tool,
@@ -608,10 +822,8 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
   arcColors = ARC_COLORS
 }) {
   if (groupSize <= 0 || groupCount <= 0) return null;
-  const range = viewMax - viewMin;
-  const usable = viewWidth - padLeft - padRight;
-  const toX = (v) => padLeft + (v - viewMin) / range * usable;
-  const clipId = React.useId().replace(/:/g, "_") + "-arcs-clip";
+  const shouldAnimate = groupSize > 0 && groupCount > 0;
+  const toX = createValueToX(viewMin, viewMax, viewWidth, horizontalLayout);
   const arcs = [];
   for (let g = 0; g < groupCount; g++) {
     if (deletedArcIndices.has(g)) continue;
@@ -622,105 +834,41 @@ const GroupArcsLayer = React.memo(function GroupArcsLayer2({
     const x1 = toX(start);
     const x2 = toX(end);
     const rx = (x2 - x1) / 2;
-    const ry = Math.min(rx * 0.7, arcMaxHeight);
+    const ry = Math.min(rx * ARC_RY_RATIO, arcMaxHeight);
     const color = arcColors[g % arcColors.length];
-    const arrowHeadH = 7;
-    const arrowHeadHW = 4;
     const MIN_ARROW_SPAN = 18;
     const textY = Math.min(axisY - ry - 6, axisY - MIN_ARROW_SPAN);
     const arcPath = buildArcPath({ x1, x2, y: axisY, rx, ry });
     const isSelected = selectedArcIndices.has(g);
     const hitCursor = tool === "eraser" ? "cell" : tool === "none" ? "pointer" : "default";
     arcs.push(
-      /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-        isSelected && /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: arcPath,
-            fill: "none",
-            stroke: "rgba(0,0,0,0.15)",
-            strokeWidth: 14,
-            strokeLinecap: "round",
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: arcPath,
-            fill: "none",
-            stroke: isSelected ? "#1d4ed8" : color,
-            strokeWidth: isSelected ? 3 : 2,
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: arcPath,
-            fill: "none",
-            stroke: "transparent",
-            strokeWidth: 20,
-            strokeLinecap: "round",
-            pointerEvents: "stroke",
-            style: { cursor: hitCursor },
-            onClick: (e) => {
-              if (tool === "eraser" || tool === "none") {
-                e.stopPropagation();
-                onArcClick(g, e);
-              }
+      /* @__PURE__ */ jsxRuntime.jsx(
+        AnimatedArc,
+        {
+          groupIndex: g,
+          arcPath,
+          color,
+          isSelected,
+          x2,
+          textY,
+          axisY,
+          end,
+          min,
+          max,
+          hitCursor,
+          shouldAnimate,
+          onArcClick: (index, e) => {
+            if (tool === "eraser" || tool === "none") {
+              e.stopPropagation();
+              onArcClick(index, e);
             }
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x: x2,
-            y: textY,
-            textAnchor: "middle",
-            fontSize: 10,
-            fill: isSelected ? "#1d4ed8" : color,
-            fontWeight: "600",
-            pointerEvents: "none",
-            style: { userSelect: "none", WebkitUserSelect: "none" },
-            children: end
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "line",
-          {
-            x1: x2,
-            y1: textY + 4,
-            x2,
-            y2: axisY - arrowHeadH,
-            stroke: isSelected ? "#1d4ed8" : color,
-            strokeWidth: 1.5,
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "polygon",
-          {
-            points: `${x2},${axisY} ${x2 - arrowHeadHW},${axisY - arrowHeadH} ${x2 + arrowHeadHW},${axisY - arrowHeadH}`,
-            fill: isSelected ? "#1d4ed8" : color,
-            pointerEvents: "none"
-          }
-        )
-      ] }, g)
+        },
+        g
+      )
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "nl-arcs-layer", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsxRuntime.jsx(
-      "rect",
-      {
-        x: padLeft,
-        y: 0,
-        width: usable,
-        height: axisY + 1
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${clipId})`, children: arcs })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { className: "nl-arcs-layer", children: arcs });
 });
 function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "nl-drawing-layer", transform: `scale(${width} ${height})`, children: [
@@ -788,9 +936,6 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick
     )
   ] });
 }
-const PAD_LEFT_LEGACY = 30;
-const PAD_RIGHT_LEGACY = 40;
-const PAD_X = (PAD_LEFT_LEGACY + PAD_RIGHT_LEGACY) / 2;
 const LABEL_SPACE_BELOW_AXIS = 42;
 const LABEL_ABOVE_AXIS_SLOP = 32;
 const ARC_TOP_PADDING = 16;
@@ -829,12 +974,16 @@ function NumberLine({ className }) {
   } = useNumberLineContext();
   const w = containerWidth;
   const h = containerHeight;
+  const horizontalLayout = computeHorizontalLayout(min, max);
   const range = Math.max(viewMax - viewMin, 1e-6);
-  const usable = Math.max(w - 2 * PAD_X, 1);
+  const usable = Math.max(
+    w - horizontalLayout.padLeft - horizontalLayout.padRight - horizontalLayout.labelInsetLeft - horizontalLayout.labelInsetRight,
+    1
+  );
   let ryTypical = MIN_ARC_HEIGHT * 0.5;
   if (groupSize > 0 && groupCount > 0) {
     const rx = usable * groupSize / range / 2;
-    ryTypical = Math.min(rx * 0.7, h * 0.48);
+    ryTypical = Math.min(rx * ARC_RY_RATIO, h * 0.48);
   }
   const minAxisY = MIN_ARC_HEIGHT + ARC_TOP_PADDING;
   const maxAxisY = h - LABEL_SPACE_BELOW_AXIS;
@@ -986,7 +1135,8 @@ function NumberLine({ className }) {
         display: "block",
         outline: enableZoom && isZoomActive ? "2px solid rgba(59, 130, 246, 0.5)" : "none",
         cursor: svgCursor,
-        touchAction: "none"
+        touchAction: "none",
+        overflow: "visible"
       },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
@@ -1006,8 +1156,7 @@ function NumberLine({ className }) {
             viewMin,
             viewMax,
             axisY,
-            padLeft: PAD_X,
-            padRight: PAD_X,
+            horizontalLayout,
             viewWidth: w,
             containerWidth: w,
             groupSize,
@@ -1028,8 +1177,7 @@ function NumberLine({ className }) {
             groupSize,
             groupCount,
             axisY,
-            padLeft: PAD_X,
-            padRight: PAD_X,
+            horizontalLayout,
             viewWidth: w,
             arcMaxHeight,
             tool,

package/dist/index.js

@@ -487,6 +487,47 @@ function computeLabelStep(containerWidth, range) {
   const candidates = [1, 2, 5, 10, 20, 25, 50, 100, 200, 500];
   return candidates.find((c) => c >= raw) ?? candidates[candidates.length - 1];
 }
+function computeMinorTickStep(majorStep, containerWidth, range) {
+  if (majorStep <= 1 || range <= 0 || containerWidth <= 0) return 0;
+  const pxPerMajor = containerWidth / range * majorStep;
+  const MIN_MINOR_PX = 8;
+  for (const divisions of [10, 5, 4, 2]) {
+    if (majorStep % divisions !== 0) continue;
+    const minorStep = majorStep / divisions;
+    if (minorStep < 1) continue;
+    if (pxPerMajor / divisions >= MIN_MINOR_PX) return minorStep;
+  }
+  if (majorStep >= 2 && pxPerMajor / Math.min(majorStep - 1, 5) >= MIN_MINOR_PX) {
+    return 1;
+  }
+  return 0;
+}
+function computeHorizontalLayout(minVal, maxVal) {
+  const gutter = 16;
+  const charWidth = 8;
+  const leftLabel = String(Math.round(minVal));
+  const rightLabel = String(Math.round(maxVal));
+  return {
+    padLeft: gutter,
+    padRight: gutter,
+    labelInsetLeft: Math.max(8, Math.ceil(leftLabel.length * charWidth / 2) + 2),
+    labelInsetRight: Math.max(12, Math.ceil(rightLabel.length * charWidth / 2) + 4)
+  };
+}
+function createValueToX(viewMin, viewMax, viewWidth, layout) {
+  const range = Math.max(viewMax - viewMin, 1e-6);
+  const usable = Math.max(viewWidth - layout.padLeft - layout.padRight, 1);
+  const innerUsable = Math.max(
+    usable - layout.labelInsetLeft - layout.labelInsetRight,
+    1
+  );
+  return (value) => layout.padLeft + layout.labelInsetLeft + (value - viewMin) / range * innerUsable;
+}
+function edgeTextAnchor(value, domainMin, domainMax) {
+  if (Math.abs(value - domainMin) < 1e-9) return "start";
+  if (Math.abs(value - domainMax) < 1e-9) return "end";
+  return "middle";
+}
 const ARC_COLORS = [
   "#7c3aed",
   "#0891b2",
@@ -494,6 +535,9 @@ const ARC_COLORS = [
   "#be185d",
   "#16a34a"
 ];
+const ARC_RY_RATIO = 0.9;
+const ARC_ANIMATION_STAGGER_MS = 400;
+const ARC_ANIMATION_DRAW_MS = 500;
 function gcd(a, b) {
   let x = Math.max(1, Math.abs(Math.round(a)));
   let y = Math.max(1, Math.abs(Math.round(b)));
@@ -502,11 +546,11 @@ function gcd(a, b) {
 }
 const AxisLayer = React.memo(function AxisLayer2({
   min,
+  max,
   viewMin,
   viewMax,
   axisY,
-  padLeft,
-  padRight,
+  horizontalLayout,
   viewWidth,
   containerWidth,
   groupSize,
@@ -518,15 +562,17 @@ const AxisLayer = React.memo(function AxisLayer2({
 }) {
   const range = viewMax - viewMin;
   if (range <= 0) return null;
-  const usable = viewWidth - padLeft - padRight;
-  const toX = (v) => padLeft + (v - viewMin) / range * usable;
+  const toX = createValueToX(viewMin, viewMax, viewWidth, horizontalLayout);
+  const axisStartX = toX(viewMin);
+  const axisEndX = toX(viewMax);
   const step = Math.max(1, Math.round(tickStep));
   const rawLabelStep = computeLabelStep(containerWidth, range);
   const labelStep = Math.max(step, Math.ceil(rawLabelStep / step) * step);
+  const minorStep = showMinorTicks ? computeMinorTickStep(step, containerWidth, range) : 0;
   const MAX_TICKS = 500;
   const capStep = Math.max(1, Math.ceil(range / MAX_TICKS));
   const visibleStep = groupSize > 0 ? gcd(step, groupSize) : step;
-  const iterStep = showMinorTicks ? capStep : Math.max(capStep, visibleStep);
+  const iterStep = showMinorTicks && minorStep > 0 ? Math.max(capStep, gcd(minorStep, capStep)) : Math.max(capStep, visibleStep);
   const startVal = Math.floor(viewMin / iterStep) * iterStep;
   const allTicks = [];
   for (let v = startVal; v <= viewMax; v += iterStep) {
@@ -536,9 +582,9 @@ const AxisLayer = React.memo(function AxisLayer2({
     /* @__PURE__ */ jsx(
       "line",
       {
-        x1: padLeft - 4,
+        x1: axisStartX - 4,
         y1: axisY,
-        x2: viewWidth - padRight,
+        x2: axisEndX,
         y2: axisY,
         stroke: "#374151",
         strokeWidth: 2
@@ -548,16 +594,18 @@ const AxisLayer = React.memo(function AxisLayer2({
       const x = toX(v);
       const offset = v - min;
       const isMajor = offset % step === 0;
+      const isOnMinorGrid = minorStep > 0 && Math.abs(offset % minorStep) < 1e-9;
       const maxGroupBoundary = min + groupCount * groupSize;
       const isGroupBoundary = groupSize > 0 && offset % groupSize === 0 && v <= maxGroupBoundary;
-      const visible = isGroupBoundary && showGroupTicks || isMajor && showMajorTicks || !isGroupBoundary && !isMajor && showMinorTicks;
+      const isMinorTick = isOnMinorGrid && !isMajor && !isGroupBoundary;
+      const visible = isGroupBoundary && showGroupTicks || isMajor && showMajorTicks || isMinorTick && showMinorTicks;
       if (!visible) return null;
       const renderAsGroup = isGroupBoundary && showGroupTicks;
       const renderAsMajor = !renderAsGroup && isMajor && showMajorTicks;
       const showLabel = (renderAsGroup || renderAsMajor) && offset % labelStep === 0;
       const tickH = renderAsGroup ? 7 : renderAsMajor ? 10 : 4;
-      const strokeW = renderAsGroup ? 1.5 : renderAsMajor ? 1 : 0.5;
-      const color = renderAsGroup || renderAsMajor ? "#374151" : "#9ca3af";
+      const strokeW = renderAsGroup ? 1.5 : renderAsMajor ? 1 : 0.75;
+      const color = renderAsGroup || renderAsMajor ? "#374151" : "#6b7280";
       return /* @__PURE__ */ jsxs("g", { children: [
         /* @__PURE__ */ jsx(
           "line",
@@ -575,7 +623,7 @@ const AxisLayer = React.memo(function AxisLayer2({
           {
             x,
             y: axisY + 22,
-            textAnchor: "middle",
+            textAnchor: edgeTextAnchor(v, min, max),
             fontSize: 11,
             fill: "#374151",
             pointerEvents: "none",
@@ -587,6 +635,173 @@ const AxisLayer = React.memo(function AxisLayer2({
     })
   ] });
 });
+function AnimatedArc({
+  groupIndex,
+  arcPath,
+  color,
+  isSelected,
+  x2,
+  textY,
+  axisY,
+  end,
+  min,
+  max,
+  hitCursor,
+  shouldAnimate,
+  onArcClick
+}) {
+  const measureRef = useRef(null);
+  const animatedRef = useRef(false);
+  const [pathLen, setPathLen] = useState(null);
+  const [dashOffset, setDashOffset] = useState(null);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const [showLabels, setShowLabels] = useState(!shouldAnimate);
+  const [showHitArea, setShowHitArea] = useState(!shouldAnimate);
+  const strokeColor = isSelected ? "#1d4ed8" : color;
+  const arrowHeadH = 7;
+  const arrowHeadHW = 4;
+  useLayoutEffect(() => {
+    var _a;
+    const len = ((_a = measureRef.current) == null ? void 0 : _a.getTotalLength()) ?? 0;
+    if (len <= 0) return;
+    setPathLen(len);
+    if (!shouldAnimate || animatedRef.current) {
+      setDashOffset(0);
+      setShowLabels(true);
+      setShowHitArea(true);
+      setIsDrawing(false);
+      return;
+    }
+    setDashOffset(len);
+    setShowLabels(false);
+    setShowHitArea(false);
+    setIsDrawing(false);
+    const delay = groupIndex * ARC_ANIMATION_STAGGER_MS;
+    let drawTimer = 0;
+    let labelTimer = 0;
+    let completeTimer = 0;
+    const rafId = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        drawTimer = window.setTimeout(() => {
+          setIsDrawing(true);
+          setDashOffset(0);
+        }, delay);
+        labelTimer = window.setTimeout(
+          () => setShowLabels(true),
+          delay + ARC_ANIMATION_DRAW_MS
+        );
+        completeTimer = window.setTimeout(() => {
+          animatedRef.current = true;
+          setIsDrawing(false);
+          setShowHitArea(true);
+        }, delay + ARC_ANIMATION_DRAW_MS);
+      });
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.clearTimeout(drawTimer);
+      window.clearTimeout(labelTimer);
+      window.clearTimeout(completeTimer);
+    };
+  }, [arcPath, groupIndex, shouldAnimate]);
+  const strokeTransition = isDrawing ? `stroke-dashoffset ${ARC_ANIMATION_DRAW_MS}ms ease-out` : "none";
+  const arcVisible = pathLen !== null && dashOffset !== null;
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        ref: measureRef,
+        d: arcPath,
+        fill: "none",
+        stroke: "none",
+        visibility: "hidden",
+        pointerEvents: "none"
+      }
+    ),
+    arcVisible && isSelected && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: arcPath,
+        fill: "none",
+        stroke: "rgba(0,0,0,0.15)",
+        strokeWidth: 14,
+        strokeLinecap: "round",
+        pointerEvents: "none"
+      }
+    ),
+    arcVisible && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: arcPath,
+        fill: "none",
+        stroke: strokeColor,
+        strokeWidth: isSelected ? 3 : 2,
+        strokeDasharray: pathLen,
+        strokeDashoffset: dashOffset,
+        style: { transition: strokeTransition },
+        pointerEvents: "none"
+      }
+    ),
+    arcVisible && showHitArea && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: arcPath,
+        fill: "none",
+        stroke: "transparent",
+        strokeWidth: 20,
+        strokeLinecap: "round",
+        pointerEvents: "stroke",
+        style: { cursor: hitCursor },
+        onClick: (e) => {
+          onArcClick(groupIndex, e);
+        }
+      }
+    ),
+    arcVisible && /* @__PURE__ */ jsxs(
+      "g",
+      {
+        opacity: showLabels ? 1 : 0,
+        style: { transition: "opacity 220ms ease-out" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: x2,
+              y: textY,
+              textAnchor: edgeTextAnchor(end, min, max),
+              fontSize: 10,
+              fill: strokeColor,
+              fontWeight: "600",
+              pointerEvents: "none",
+              style: { userSelect: "none", WebkitUserSelect: "none" },
+              children: end
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: x2,
+              y1: textY + 4,
+              x2,
+              y2: axisY - arrowHeadH,
+              stroke: strokeColor,
+              strokeWidth: 1.5,
+              pointerEvents: "none"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "polygon",
+            {
+              points: `${x2},${axisY} ${x2 - arrowHeadHW},${axisY - arrowHeadH} ${x2 + arrowHeadHW},${axisY - arrowHeadH}`,
+              fill: strokeColor,
+              pointerEvents: "none"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
 const GroupArcsLayer = memo(function GroupArcsLayer2({
   min,
   max,
@@ -595,8 +810,7 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
   groupSize,
   groupCount,
   axisY,
-  padLeft,
-  padRight,
+  horizontalLayout,
   viewWidth,
   arcMaxHeight,
   tool,
@@ -606,10 +820,8 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
   arcColors = ARC_COLORS
 }) {
   if (groupSize <= 0 || groupCount <= 0) return null;
-  const range = viewMax - viewMin;
-  const usable = viewWidth - padLeft - padRight;
-  const toX = (v) => padLeft + (v - viewMin) / range * usable;
-  const clipId = React.useId().replace(/:/g, "_") + "-arcs-clip";
+  const shouldAnimate = groupSize > 0 && groupCount > 0;
+  const toX = createValueToX(viewMin, viewMax, viewWidth, horizontalLayout);
   const arcs = [];
   for (let g = 0; g < groupCount; g++) {
     if (deletedArcIndices.has(g)) continue;
@@ -620,105 +832,41 @@ const GroupArcsLayer = memo(function GroupArcsLayer2({
     const x1 = toX(start);
     const x2 = toX(end);
     const rx = (x2 - x1) / 2;
-    const ry = Math.min(rx * 0.7, arcMaxHeight);
+    const ry = Math.min(rx * ARC_RY_RATIO, arcMaxHeight);
     const color = arcColors[g % arcColors.length];
-    const arrowHeadH = 7;
-    const arrowHeadHW = 4;
     const MIN_ARROW_SPAN = 18;
     const textY = Math.min(axisY - ry - 6, axisY - MIN_ARROW_SPAN);
     const arcPath = buildArcPath({ x1, x2, y: axisY, rx, ry });
     const isSelected = selectedArcIndices.has(g);
     const hitCursor = tool === "eraser" ? "cell" : tool === "none" ? "pointer" : "default";
     arcs.push(
-      /* @__PURE__ */ jsxs("g", { children: [
-        isSelected && /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: arcPath,
-            fill: "none",
-            stroke: "rgba(0,0,0,0.15)",
-            strokeWidth: 14,
-            strokeLinecap: "round",
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: arcPath,
-            fill: "none",
-            stroke: isSelected ? "#1d4ed8" : color,
-            strokeWidth: isSelected ? 3 : 2,
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: arcPath,
-            fill: "none",
-            stroke: "transparent",
-            strokeWidth: 20,
-            strokeLinecap: "round",
-            pointerEvents: "stroke",
-            style: { cursor: hitCursor },
-            onClick: (e) => {
-              if (tool === "eraser" || tool === "none") {
-                e.stopPropagation();
-                onArcClick(g, e);
-              }
+      /* @__PURE__ */ jsx(
+        AnimatedArc,
+        {
+          groupIndex: g,
+          arcPath,
+          color,
+          isSelected,
+          x2,
+          textY,
+          axisY,
+          end,
+          min,
+          max,
+          hitCursor,
+          shouldAnimate,
+          onArcClick: (index, e) => {
+            if (tool === "eraser" || tool === "none") {
+              e.stopPropagation();
+              onArcClick(index, e);
             }
           }
-        ),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: x2,
-            y: textY,
-            textAnchor: "middle",
-            fontSize: 10,
-            fill: isSelected ? "#1d4ed8" : color,
-            fontWeight: "600",
-            pointerEvents: "none",
-            style: { userSelect: "none", WebkitUserSelect: "none" },
-            children: end
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "line",
-          {
-            x1: x2,
-            y1: textY + 4,
-            x2,
-            y2: axisY - arrowHeadH,
-            stroke: isSelected ? "#1d4ed8" : color,
-            strokeWidth: 1.5,
-            pointerEvents: "none"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "polygon",
-          {
-            points: `${x2},${axisY} ${x2 - arrowHeadHW},${axisY - arrowHeadH} ${x2 + arrowHeadHW},${axisY - arrowHeadH}`,
-            fill: isSelected ? "#1d4ed8" : color,
-            pointerEvents: "none"
-          }
-        )
-      ] }, g)
+        },
+        g
+      )
     );
   }
-  return /* @__PURE__ */ jsxs("g", { className: "nl-arcs-layer", children: [
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx(
-      "rect",
-      {
-        x: padLeft,
-        y: 0,
-        width: usable,
-        height: axisY + 1
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx("g", { clipPath: `url(#${clipId})`, children: arcs })
-  ] });
+  return /* @__PURE__ */ jsx("g", { className: "nl-arcs-layer", children: arcs });
 });
 function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick }) {
   return /* @__PURE__ */ jsxs("g", { className: "nl-drawing-layer", transform: `scale(${width} ${height})`, children: [
@@ -786,9 +934,6 @@ function DrawingLayer({ strokes, liveStroke, tool, width, height, onStrokeClick
     )
   ] });
 }
-const PAD_LEFT_LEGACY = 30;
-const PAD_RIGHT_LEGACY = 40;
-const PAD_X = (PAD_LEFT_LEGACY + PAD_RIGHT_LEGACY) / 2;
 const LABEL_SPACE_BELOW_AXIS = 42;
 const LABEL_ABOVE_AXIS_SLOP = 32;
 const ARC_TOP_PADDING = 16;
@@ -827,12 +972,16 @@ function NumberLine({ className }) {
   } = useNumberLineContext();
   const w = containerWidth;
   const h = containerHeight;
+  const horizontalLayout = computeHorizontalLayout(min, max);
   const range = Math.max(viewMax - viewMin, 1e-6);
-  const usable = Math.max(w - 2 * PAD_X, 1);
+  const usable = Math.max(
+    w - horizontalLayout.padLeft - horizontalLayout.padRight - horizontalLayout.labelInsetLeft - horizontalLayout.labelInsetRight,
+    1
+  );
   let ryTypical = MIN_ARC_HEIGHT * 0.5;
   if (groupSize > 0 && groupCount > 0) {
     const rx = usable * groupSize / range / 2;
-    ryTypical = Math.min(rx * 0.7, h * 0.48);
+    ryTypical = Math.min(rx * ARC_RY_RATIO, h * 0.48);
   }
   const minAxisY = MIN_ARC_HEIGHT + ARC_TOP_PADDING;
   const maxAxisY = h - LABEL_SPACE_BELOW_AXIS;
@@ -984,7 +1133,8 @@ function NumberLine({ className }) {
         display: "block",
         outline: enableZoom && isZoomActive ? "2px solid rgba(59, 130, 246, 0.5)" : "none",
         cursor: svgCursor,
-        touchAction: "none"
+        touchAction: "none",
+        overflow: "visible"
       },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
@@ -1004,8 +1154,7 @@ function NumberLine({ className }) {
             viewMin,
             viewMax,
             axisY,
-            padLeft: PAD_X,
-            padRight: PAD_X,
+            horizontalLayout,
             viewWidth: w,
             containerWidth: w,
             groupSize,
@@ -1026,8 +1175,7 @@ function NumberLine({ className }) {
             groupSize,
             groupCount,
             axisY,
-            padLeft: PAD_X,
-            padRight: PAD_X,
+            horizontalLayout,
             viewWidth: w,
             arcMaxHeight,
             tool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dcg-overseas/number-line",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Interactive number line component with group arcs and freehand drawing",
   "type": "module",
   "license": "MIT",
@@ -23,12 +23,6 @@
     "dist"
   ],
   "sideEffects": false,
-  "scripts": {
-    "build": "vite build",
-    "build:watch": "vite build --watch",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist *.tsbuildinfo"
-  },
   "peerDependencies": {
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
@@ -43,5 +37,11 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build:watch": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist *.tsbuildinfo"
   }
-}
+}