fix stripes and add test

Author: argyleink

src/lib/roundtrip.test.ts

@@ -32,6 +32,38 @@ describe('round-trip: builder output parses back into app format', () => {
     expect(parsedClassic.stops.length).toBeGreaterThan(1)
   })
 
+  it('preserves explicit span positions for stripe-style presets', () => {
+    // Match the structure of the "Stripes" preset as a single layer
+    const stripes = makeLayer({
+      type: 'linear',
+      space: 'oklab',
+      linear: { named_angle: 'to right top', angle: null },
+      stops: [
+        stop('#fff'),                            // leading white, no positions
+        hint(0),                                 // midpoint (auto-managed)
+        stop('#000', 0, 20),
+        hint(0),
+        stop('#fff', 0, 40),
+        hint(0),
+        stop('#000', 0, 60),
+        hint(0),
+        stop('#fff', 0, 80),
+        hint(0),
+        stop('#000', 0, 100),
+      ],
+    })
+
+    const { modern } = buildGradientStrings(stripes as any)
+
+    // The output should contain both start and end positions for each black/white span,
+    // not collapse them down to a single 0% position.
+    expect(modern.replace(/\s+/g, ' ')).toContain('#000 0% 20%')
+    expect(modern.replace(/\s+/g, ' ')).toContain('#fff 0% 40%')
+    expect(modern.replace(/\s+/g, ' ')).toContain('#000 0% 60%')
+    expect(modern.replace(/\s+/g, ' ')).toContain('#fff 0% 80%')
+    expect(modern.replace(/\s+/g, ' ')).toContain('#000 0% 100%')
+  })
+
   it('radial and conic builder outputs also parse successfully', () => {
     const radial = makeLayer({ type: 'radial', radial: { shape: 'circle', size: 'farthest-corner', named_position: 'center', position: { x: 50, y: 50 } } as any })
     const conic = makeLayer({ type: 'conic', conic: { angle: 0, named_position: 'center', position: { x: 50, y: 50 } } as any })

src/utils/gradientString.ts

@@ -106,18 +106,15 @@ function stopsToStrings(stops: any[], { convert_colors, new_lines }: { convert_c
       let p1: any = s.position1
       let p2: any = s.position2
 
-      // If positions equal computed auto position, omit them
+      // Only ever suppress the "auto" value for the primary position.
+      // Secondary positions are kept even when they equal the auto value so
+      // that explicit spans from presets/URL imports (like the Stripes preset)
+      // are preserved.
       if (p1 != null && s.auto != null && String(p1) == String(s.auto)) p1 = null
-      if (p2 != null && s.auto != null && String(p2) == String(s.auto)) p2 = null
 
-      // Omit default endpoints regardless of whether value is in p1 or p2
+      // Omit browser default *leading* endpoint only when explicitly authored as 0%.
       if (i === firstStopIdx) {
         if (isPctZero(p1)) p1 = null
-        if (isPctZero(p2) && p1 == null) p2 = null
-      }
-      if (i === lastStopIdx) {
-        if (isPctHundred(p2)) p2 = null
-        if (isPctHundred(p1) && p2 == null) p1 = null
       }
 
       const colorStr = maybeConvertColor(s.color, convert_colors)