From 1d2d4c27451532ff82740bc24d85e9464d96c171 Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Sun, 18 Jan 2026 11:15:17 +0100
Subject: [PATCH] [dyad] Enhance sequential numbering options - wrote 1 file(s)

---
 src/components/image-converter.tsx | 35 ++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index 2f38ee5..6331d85 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -42,6 +42,7 @@ export function ImageConverter() {
   const [prefix, setPrefix] = useState<string>("");
   const [suffix, setSuffix] = useState<string>("");
   const [useCounter, setUseCounter] = useState<boolean>(false);
+  const [counterStart, setCounterStart] = useState<number>(1);
   const [counterDigits, setCounterDigits] = useState<number>(3);
 
   const [isConverting, setIsConverting] = useState(false);
@@ -133,7 +134,7 @@ export function ImageConverter() {
 
   const generateFinalFilename = (index: number) => {
     if (useCounter) {
-      const counter = (index + 1).toString().padStart(counterDigits, '0');
+      const counter = (index + counterStart).toString().padStart(counterDigits, '0');
       return `${prefix}${counter}${suffix}`;
     }
     const baseName = filenames[index] || "filename";
@@ -271,17 +272,27 @@ export function ImageConverter() {
                     <Label htmlFor="use-counter">Add sequential number</Label>
                   </div>
                   {useCounter && (
-                    <div className="space-y-2 pl-8">
-                      <Label htmlFor="counter-digits">Number of digits</Label>
-                      <Select value={String(counterDigits)} onValueChange={(val) => setCounterDigits(Number(val))}>
-                        <SelectTrigger id="counter-digits"><SelectValue /></SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="1">1 (e.g., 1)</SelectItem>
-                          <SelectItem value="2">2 (e.g., 01)</SelectItem>
-                          <SelectItem value="3">3 (e.g., 001)</SelectItem>
-                          <SelectItem value="4">4 (e.g., 0001)</SelectItem>
-                        </SelectContent>
-                      </Select>
+                    <div className="grid grid-cols-2 gap-4 pl-8 pt-2">
+                      <div className="space-y-2">
+                        <Label htmlFor="counter-start">Start number</Label>
+                        <Input
+                          id="counter-start"
+                          type="number"
+                          value={counterStart}
+                          onChange={(e) => setCounterStart(Math.max(0, Number(e.target.value)))}
+                          min="0"
+                        />
+                      </div>
+                      <div className="space-y-2">
+                        <Label htmlFor="counter-digits">Padding digits</Label>
+                        <Input
+                          id="counter-digits"
+                          type="number"
+                          value={counterDigits}
+                          onChange={(e) => setCounterDigits(Math.max(1, Number(e.target.value)))}
+                          min="1"
+                        />
+                      </div>
                     </div>
                   )}
                 </div>