From 3358d1123e478f6731e9b644050b41a74f5c9b87 Mon Sep 17 00:00:00 2001
From: Antonio Contreras <antoniocontrerasroman@gmail.com>
Date: Tue, 21 Oct 2025 09:25:11 +0200
Subject: [PATCH 1/7] work in progress

---
 .../front-rich-components/input-stepper.tsx    | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx
index 9d60dd2a..9e341bc2 100644
--- a/src/common/components/mock-components/front-rich-components/input-stepper.tsx
+++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx
@@ -11,7 +11,7 @@ import { INPUT_SHAPE } from '../front-components/shape.const';
 // Size restrictions (igual patrón que file-tree)
 export const inputStepperShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 80,
-  minHeight: 24,
+  minHeight: 32,
   maxWidth: -1,
   maxHeight: -1,
   defaultWidth: 120,
@@ -49,6 +49,18 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth } = restrictedSize;
 
+  const getInputWidth = (restrictedWidth: number): number => {
+    const inputWidth = restrictedWidth * 0.3;
+    const minInputWidth = 30;
+    const maxInputWidth = 70;
+
+    if (inputWidth < minInputWidth) return minInputWidth;
+    if (inputWidth > maxInputWidth) return maxInputWidth;
+    return inputWidth;
+  };
+
+  const a = getInputWidth(restrictedWidth);
+
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       {/* Caja del input */}
@@ -68,12 +80,12 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
       <Text
         x={0} // Alinear a la derecha
         y={height / 2 - 8} // Centrar verticalmente
-        width={restrictedWidth}
+        width={restrictedWidth - a - 8}
         text={text}
         fontFamily="Arial"
         fontSize={16}
         fill={textColor}
-        align="center"
+        align="right"
         wrap="none"
       />
 

From e76da86b499f7dab8325a58bfbf05cc58017f67a Mon Sep 17 00:00:00 2001
From: Antonio Contreras <antoniocontrerasroman@gmail.com>
Date: Tue, 21 Oct 2025 10:14:13 +0200
Subject: [PATCH 2/7] create getTextFieldWidth business function

---
 .../input-stepper/index.ts                    |  1 +
 .../input-stepper/input-stepper.business.ts   | 13 ++++++++++
 .../{ => input-stepper}/input-stepper.tsx     | 25 ++++++-------------
 src/pods/canvas/model/shape-size.mapper.ts    |  2 +-
 .../input-stepper.renderer.tsx                |  2 +-
 5 files changed, 24 insertions(+), 19 deletions(-)
 create mode 100644 src/common/components/mock-components/front-rich-components/input-stepper/index.ts
 create mode 100644 src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.business.ts
 rename src/common/components/mock-components/front-rich-components/{ => input-stepper}/input-stepper.tsx (81%)

diff --git a/src/common/components/mock-components/front-rich-components/input-stepper/index.ts b/src/common/components/mock-components/front-rich-components/input-stepper/index.ts
new file mode 100644
index 00000000..e5f35ccf
--- /dev/null
+++ b/src/common/components/mock-components/front-rich-components/input-stepper/index.ts
@@ -0,0 +1 @@
+export * from './input-stepper';
diff --git a/src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.business.ts b/src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.business.ts
new file mode 100644
index 00000000..d0d29298
--- /dev/null
+++ b/src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.business.ts
@@ -0,0 +1,13 @@
+export const getTextFieldWidth = (restrictedWidth: number): number => {
+  const inputWidth = restrictedWidth * 0.3;
+  const minInputWidth = 30;
+  const maxInputWidth = 70;
+
+  if (inputWidth < minInputWidth) {
+    return minInputWidth;
+  } else if (inputWidth > maxInputWidth) {
+    return maxInputWidth;
+  }
+
+  return inputWidth;
+};
diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.tsx
similarity index 81%
rename from src/common/components/mock-components/front-rich-components/input-stepper.tsx
rename to src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.tsx
index 9e341bc2..e27459b7 100644
--- a/src/common/components/mock-components/front-rich-components/input-stepper.tsx
+++ b/src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.tsx
@@ -1,12 +1,13 @@
 import { forwardRef } from 'react';
 import { Group, Rect, Text } from 'react-konva';
 import { ShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
-import { useGroupShapeProps } from '../mock-components.utils';
+import { useGroupShapeProps } from '../../mock-components.utils';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { ShapeType } from '@/core/model';
-import { ShapeProps } from '../shape.model';
-import { useShapeProps } from '../../shapes/use-shape-props.hook';
-import { INPUT_SHAPE } from '../front-components/shape.const';
+import { ShapeProps } from '../../shape.model';
+import { useShapeProps } from '../../../shapes/use-shape-props.hook';
+import { INPUT_SHAPE } from '../../front-components/shape.const';
+import { getTextFieldWidth } from './input-stepper.business';
 
 // Size restrictions (igual patrón que file-tree)
 export const inputStepperShapeRestrictions: ShapeSizeRestrictions = {
@@ -49,17 +50,7 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth } = restrictedSize;
 
-  const getInputWidth = (restrictedWidth: number): number => {
-    const inputWidth = restrictedWidth * 0.3;
-    const minInputWidth = 30;
-    const maxInputWidth = 70;
-
-    if (inputWidth < minInputWidth) return minInputWidth;
-    if (inputWidth > maxInputWidth) return maxInputWidth;
-    return inputWidth;
-  };
-
-  const a = getInputWidth(restrictedWidth);
+  const textFieldWidth = getTextFieldWidth(restrictedWidth);
 
   return (
     <Group {...commonGroupProps} {...shapeProps}>
@@ -78,9 +69,9 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
 
       {/* Texto del input */}
       <Text
-        x={0} // Alinear a la derecha
+        x={0}
         y={height / 2 - 8} // Centrar verticalmente
-        width={restrictedWidth - a - 8}
+        width={restrictedWidth - textFieldWidth - 8}
         text={text}
         fontFamily="Arial"
         fontSize={16}
diff --git a/src/pods/canvas/model/shape-size.mapper.ts b/src/pods/canvas/model/shape-size.mapper.ts
index 19dcbf18..88f05c21 100644
--- a/src/pods/canvas/model/shape-size.mapper.ts
+++ b/src/pods/canvas/model/shape-size.mapper.ts
@@ -1,6 +1,6 @@
 // src/common/shape-utils/shapeSizeMap.ts
 import { ShapeType, ShapeSizeRestrictions } from '@/core/model';
-import { getInputStepperShapeSizeRestrictions } from '@/common/components/mock-components/front-rich-components/input-stepper';
+import { getInputStepperShapeSizeRestrictions } from '@/common/components/mock-components/front-rich-components/input-stepper/input-stepper';
 import {
   getButtonShapeSizeRestrictions,
   getCheckboxShapeSizeRestrictions,
diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx
index 2cbc2e8f..fff2d9c7 100644
--- a/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx
@@ -1,4 +1,4 @@
-import { InputWithStepper } from '@/common/components/mock-components/front-rich-components/input-stepper';
+import { InputWithStepper } from '@/common/components/mock-components/front-rich-components/input-stepper/input-stepper';
 import { ShapeRendererProps } from '../model';
 import { ShapeModel } from '@/core/model';
 

From eaa798859b393a3e1910ff959d63544a73ed1043 Mon Sep 17 00:00:00 2001
From: Antonio Contreras <antoniocontrerasroman@gmail.com>
Date: Tue, 21 Oct 2025 10:54:07 +0200
Subject: [PATCH 3/7] remove business function

---
 .../{input-stepper => }/input-stepper.tsx         | 15 ++++++---------
 .../front-rich-components/input-stepper/index.ts  |  1 -
 .../input-stepper/input-stepper.business.ts       | 13 -------------
 src/pods/canvas/model/shape-size.mapper.ts        |  2 +-
 .../input-stepper.renderer.tsx                    |  2 +-
 5 files changed, 8 insertions(+), 25 deletions(-)
 rename src/common/components/mock-components/front-rich-components/{input-stepper => }/input-stepper.tsx (87%)
 delete mode 100644 src/common/components/mock-components/front-rich-components/input-stepper/index.ts
 delete mode 100644 src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.business.ts

diff --git a/src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx
similarity index 87%
rename from src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.tsx
rename to src/common/components/mock-components/front-rich-components/input-stepper.tsx
index e27459b7..74ed914b 100644
--- a/src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.tsx
+++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx
@@ -1,13 +1,12 @@
 import { forwardRef } from 'react';
 import { Group, Rect, Text } from 'react-konva';
 import { ShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
-import { useGroupShapeProps } from '../../mock-components.utils';
+import { useGroupShapeProps } from '../mock-components.utils';
 import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
 import { ShapeType } from '@/core/model';
-import { ShapeProps } from '../../shape.model';
-import { useShapeProps } from '../../../shapes/use-shape-props.hook';
-import { INPUT_SHAPE } from '../../front-components/shape.const';
-import { getTextFieldWidth } from './input-stepper.business';
+import { ShapeProps } from '../shape.model';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { INPUT_SHAPE } from '../front-components/shape.const';
 
 // Size restrictions (igual patrón que file-tree)
 export const inputStepperShapeRestrictions: ShapeSizeRestrictions = {
@@ -50,8 +49,6 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
 
   const { width: restrictedWidth } = restrictedSize;
 
-  const textFieldWidth = getTextFieldWidth(restrictedWidth);
-
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       {/* Caja del input */}
@@ -71,12 +68,12 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
       <Text
         x={0}
         y={height / 2 - 8} // Centrar verticalmente
-        width={restrictedWidth - textFieldWidth - 8}
+        width={restrictedWidth}
         text={text}
         fontFamily="Arial"
         fontSize={16}
         fill={textColor}
-        align="right"
+        align="left"
         wrap="none"
       />
 
diff --git a/src/common/components/mock-components/front-rich-components/input-stepper/index.ts b/src/common/components/mock-components/front-rich-components/input-stepper/index.ts
deleted file mode 100644
index e5f35ccf..00000000
--- a/src/common/components/mock-components/front-rich-components/input-stepper/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './input-stepper';
diff --git a/src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.business.ts b/src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.business.ts
deleted file mode 100644
index d0d29298..00000000
--- a/src/common/components/mock-components/front-rich-components/input-stepper/input-stepper.business.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const getTextFieldWidth = (restrictedWidth: number): number => {
-  const inputWidth = restrictedWidth * 0.3;
-  const minInputWidth = 30;
-  const maxInputWidth = 70;
-
-  if (inputWidth < minInputWidth) {
-    return minInputWidth;
-  } else if (inputWidth > maxInputWidth) {
-    return maxInputWidth;
-  }
-
-  return inputWidth;
-};
diff --git a/src/pods/canvas/model/shape-size.mapper.ts b/src/pods/canvas/model/shape-size.mapper.ts
index 88f05c21..19dcbf18 100644
--- a/src/pods/canvas/model/shape-size.mapper.ts
+++ b/src/pods/canvas/model/shape-size.mapper.ts
@@ -1,6 +1,6 @@
 // src/common/shape-utils/shapeSizeMap.ts
 import { ShapeType, ShapeSizeRestrictions } from '@/core/model';
-import { getInputStepperShapeSizeRestrictions } from '@/common/components/mock-components/front-rich-components/input-stepper/input-stepper';
+import { getInputStepperShapeSizeRestrictions } from '@/common/components/mock-components/front-rich-components/input-stepper';
 import {
   getButtonShapeSizeRestrictions,
   getCheckboxShapeSizeRestrictions,
diff --git a/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx b/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx
index fff2d9c7..2cbc2e8f 100644
--- a/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx
+++ b/src/pods/canvas/shape-renderer/simple-rich-components/input-stepper.renderer.tsx
@@ -1,4 +1,4 @@
-import { InputWithStepper } from '@/common/components/mock-components/front-rich-components/input-stepper/input-stepper';
+import { InputWithStepper } from '@/common/components/mock-components/front-rich-components/input-stepper';
 import { ShapeRendererProps } from '../model';
 import { ShapeModel } from '@/core/model';
 

From 4e08da72dcd159430cef18222f90c349b30699d8 Mon Sep 17 00:00:00 2001
From: Antonio Contreras <antoniocontrerasroman@gmail.com>
Date: Tue, 21 Oct 2025 10:55:00 +0200
Subject: [PATCH 4/7] remove business function

---
 .../mock-components/front-rich-components/input-stepper.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx
index 74ed914b..f0a37f7e 100644
--- a/src/common/components/mock-components/front-rich-components/input-stepper.tsx
+++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx
@@ -11,7 +11,7 @@ import { INPUT_SHAPE } from '../front-components/shape.const';
 // Size restrictions (igual patrón que file-tree)
 export const inputStepperShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 80,
-  minHeight: 32,
+  minHeight: 24,
   maxWidth: -1,
   maxHeight: -1,
   defaultWidth: 120,

From 70fd33b3e2349a34fa1f1dd569cd8baf9299e94a Mon Sep 17 00:00:00 2001
From: Antonio Contreras <antoniocontrerasroman@gmail.com>
Date: Tue, 21 Oct 2025 11:01:45 +0200
Subject: [PATCH 5/7] align item to left

---
 .../mock-components/front-rich-components/input-stepper.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx
index f0a37f7e..e8c2c976 100644
--- a/src/common/components/mock-components/front-rich-components/input-stepper.tsx
+++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx
@@ -66,9 +66,9 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
 
       {/* Texto del input */}
       <Text
-        x={0}
+        x={INPUT_SHAPE.DEFAULT_PADDING}
         y={height / 2 - 8} // Centrar verticalmente
-        width={restrictedWidth}
+        width={width - INPUT_SHAPE.DEFAULT_PADDING * 2}
         text={text}
         fontFamily="Arial"
         fontSize={16}

From 3bc19616b23cd7f386cb94e5c0a53d6d2218480b Mon Sep 17 00:00:00 2001
From: Antonio Contreras <antoniocontrerasroman@gmail.com>
Date: Tue, 21 Oct 2025 11:12:28 +0200
Subject: [PATCH 6/7] fix svg

---
 public/rich-components/input-stepper.svg | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/rich-components/input-stepper.svg b/public/rich-components/input-stepper.svg
index be747f48..bc0939a8 100644
--- a/public/rich-components/input-stepper.svg
+++ b/public/rich-components/input-stepper.svg
@@ -3,7 +3,7 @@
   <rect x="10" y="10" width="60" height="30" style="fill:white;stroke:black;stroke-width:2"/>
 
   <!-- Texto del input -->
-  <text x="60" y="30" font-family="Arial" font-size="16" fill="black" text-anchor="end">0</text>
+  <text x="15" y="30" font-family="Arial" font-size="16" fill="black" text-anchor="start">0</text>
 
   <!-- Botón de incremento (flecha arriba) -->
   <rect x="70" y="10" width="20" height="15" style="fill:lightgray;stroke:black;stroke-width:2"/>
@@ -12,4 +12,4 @@
   <!-- Botón de decremento (flecha abajo) -->
   <rect x="70" y="25" width="20" height="15" style="fill:lightgray;stroke:black;stroke-width:2"/>
   <text x="77" y="37" font-family="Arial" font-size="14" fill="black">▼</text>
-</svg>
\ No newline at end of file
+</svg>

From 59de555731a2e350fc4d2604ab91151664788acb Mon Sep 17 00:00:00 2001
From: Antonio Contreras <antoniocontrerasroman@gmail.com>
Date: Tue, 21 Oct 2025 11:39:46 +0200
Subject: [PATCH 7/7] fix

---
 .../mock-components/front-rich-components/input-stepper.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/components/mock-components/front-rich-components/input-stepper.tsx b/src/common/components/mock-components/front-rich-components/input-stepper.tsx
index e8c2c976..35797245 100644
--- a/src/common/components/mock-components/front-rich-components/input-stepper.tsx
+++ b/src/common/components/mock-components/front-rich-components/input-stepper.tsx
@@ -68,7 +68,7 @@ export const InputWithStepper = forwardRef<any, ShapeProps>((props, ref) => {
       <Text
         x={INPUT_SHAPE.DEFAULT_PADDING}
         y={height / 2 - 8} // Centrar verticalmente
-        width={width - INPUT_SHAPE.DEFAULT_PADDING * 2}
+        width={restrictedWidth - INPUT_SHAPE.DEFAULT_PADDING * 2}
         text={text}
         fontFamily="Arial"
         fontSize={16}