fix: correct p-adic digit ordering in Extended Monna Mapping digit display

animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding-tree-vis.component.spec.ts

@@ -101,16 +101,17 @@ describe('BerkovichEncodingTreeVisComponent', () => {
 
     // When rho normalization is disabled
     fixture.componentRef.setInput('useRhoNormalization', false);
+    fixture.componentRef.setInput('biasedValue', 0.6875);
     fixture.detectChanges();
 
     bluePinGroup = svgEl.querySelector('.blue-pin-group');
     expect(bluePinGroup).toBeTruthy();
     expect(bluePinGroup?.querySelector('text')?.textContent).toContain('x_padic = 0.6875');
   });
 
-  it('should render movable digit-display with blue outline placed underneath the blue pin', () => {
+  it('should render centered digit-display with blue outline placed underneath the tree vis', () => {
     const hostEl: HTMLElement = fixture.nativeElement;
-    const digitDisplayWrapper = hostEl.querySelector('.movable-digit-display');
+    const digitDisplayWrapper = hostEl.querySelector('.centered-digit-display');
     expect(digitDisplayWrapper).toBeTruthy();
 
     const digitDisplayComponent = hostEl.querySelector('app-berkovich-digit-display');

animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding-tree-vis.component.ts

@@ -63,10 +63,7 @@ export interface EncodingTreeEdge {
     <div class="tree-vis-wrapper">
       <div class="svg-container" #svgContainer>
         <svg #svgRef class="tree-svg"></svg>
-        <div
-          class="movable-digit-display"
-          [style.left.%]="bluePinPercentX()"
-        >
+        <div class="centered-digit-display">
           <app-berkovich-digit-display
             [center]="currentRationalCenter()"
             [rho]="padicRho()"
@@ -107,11 +104,11 @@ export interface EncodingTreeEdge {
         user-select: none;
       }
 
-      .movable-digit-display {
+      .centered-digit-display {
         position: absolute;
         bottom: 0px;
+        left: 50%;
         transform: translateX(-50%);
-        transition: left 0.12s ease-out;
         z-index: 10;
         display: flex;
         justify-content: center;
@@ -138,19 +135,7 @@ export class BerkovichEncodingTreeVisComponent {
   @ViewChild('svgRef', { static: true }) svgRef!: ElementRef<SVGSVGElement>;
 
   readonly bluePinVal = computed<number>(() => {
-    const useRho = this.useRhoNormalization();
-    if (useRho) {
-      return this.biasedValue() ?? this.targetValue();
-    }
-    const r = this.currentRationalCenter();
-    const den = Number(r.den);
-    return den > 0 ? Number(r.num) / den : 0.5;
-  });
-
-  readonly bluePinPercentX = computed<number>(() => {
-    const val = Math.max(0, Math.min(1, this.bluePinVal()));
-    const svgX = 65 + val * 640;
-    return (svgX / 770) * 100;
+    return this.biasedValue() ?? this.targetValue();
   });
 
   constructor() {

animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding.component.spec.ts

@@ -65,7 +65,8 @@ describe('BerkovichEncodingComponent', () => {
   });
 
   it('should update both realTarget and reverseReal when digit-display center is edited', () => {
-    component.onDigitDisplayCenterChange({ num: 3n, den: 4n }); // 0.75
+    // 0.75 in real is 1100_2. In reversed p-adic digit display, the digits are 0011_2 = 3/16.
+    component.onDigitDisplayCenterChange({ num: 3n, den: 16n }); // 0.75
     expect(component.realTarget()).toBe(0.75);
     expect(component.reverseReal()).toBe(0.75);
     expect(component.binaryString()).toBe('1100');
@@ -163,7 +164,7 @@ describe('BerkovichEncodingComponent', () => {
   it('should correctly encode x = 0.4160 to 0110 binary digits and 13/32 rational center', () => {
     component.setRealTarget(0.4160);
     expect(component.binaryString()).toBe('0110');
-    expect(component.currentRationalCenter()).toEqual({ num: 13n, den: 32n });
+    expect(component.currentRationalCenter()).toEqual({ num: 3n, den: 8n });
     const steps = component.steps();
     expect(steps.length).toBe(4);
     expect(steps[0].bit).toBe(0);

animated-transformer/src/app/berkovich-hub/berkovich-encoding/berkovich-encoding.component.ts

@@ -30,7 +30,7 @@ import { MarkdownComponent } from 'ngx-markdown';
 
 import { BerkovichHeaderComponent } from '../berkovich-header/berkovich-header.component';
 import { BerkovichEncodingTreeVisComponent } from './berkovich-encoding-tree-vis.component';
-import { Rational, formatRational } from '../../../lib/berkovich/berkovich';
+import { Rational, formatRational, getAlignedDigits, simplify } from '../../../lib/berkovich/berkovich';
 import {
   BkBinarySearchStep as BinarySearchStep,
   computeBkBinarySearchSteps,
@@ -96,10 +96,21 @@ export class BerkovichEncodingComponent {
     return list.length > 0 ? list[list.length - 1] : null;
   });
 
-  // Current Rational Center at selected precision depth K
+  // Current Rational Center in p-adic digit order for digit display
   readonly currentRationalCenter = computed<Rational>(() => {
-    const final = this.finalStep();
-    return final ? final.rationalCenter : { num: 11n, den: 16n };
+    const stepList = this.steps();
+    const N = this.depth() * 2;
+    const p = BigInt(this.prime());
+    if (!stepList || stepList.length === 0) {
+      return { num: 13n, den: 16n };
+    }
+    let num = 0n;
+    const den = p ** BigInt(N);
+    for (let i = 0; i < stepList.length && i < N; i++) {
+      const bit = BigInt(stepList[i].bit);
+      num += bit * (p ** BigInt(i));
+    }
+    return simplify({ num, den });
   });
 
   readonly binaryString = computed<string>(() => {
@@ -161,12 +172,18 @@ When **use rho normalization** is enabled, the Berkovich radius parameter $\\rho
 
   // Reactive updates when user edits digits directly in BerkovichDigitDisplayComponent
   onDigitDisplayCenterChange(newRational: Rational) {
-    const den = Number(newRational.den);
-    if (den > 0) {
-      const newX = Math.max(0, Math.min(1, Number(newRational.num) / den));
-      this.reverseReal.set(newX);
-      this.realTarget.set(newX);
+    const N = this.depth() * 2;
+    const p = BigInt(this.prime());
+    const aligned = getAlignedDigits(newRational, p, -N, -1);
+    let realX = 0;
+    for (let i = 0; i < N; i++) {
+      const d = aligned.find((item) => item.power === -(i + 1))?.digit ?? 0;
+      const realPower = N - i;
+      realX += d * Math.pow(this.prime(), -realPower);
     }
+    const clamped = Math.max(0, Math.min(1, realX));
+    this.reverseReal.set(clamped);
+    this.realTarget.set(clamped);
   }
 
   onDigitDisplayRhoChange(newRho: number) {