more tests, more resilient imports, fix 'start new' action

Author: argyleink

src/components/GradientImportDialog.svelte

@@ -93,7 +93,7 @@
           inputId={inputId}
           bind:this={textareaEl}
         />
-        <ImportActions {canImport} primaryType="submit" on:cancel={close} on:import={onImportClick} />
+        <ImportActions {canImport} primaryType="submit" on:cancel={close} />
       </form>
     </section>
   </dialog>

src/components/import/ImportActions.svelte

@@ -7,7 +7,7 @@
 
 <div class="actions">
   <button type="reset" class="btn secondary" on:click={() => dispatch('cancel')}>Cancel</button>
-  <button type={primaryType} class="btn primary" disabled={!canImport} aria-disabled={!canImport} on:click={() => canImport && dispatch('import')}>Import</button>
+  <button type={primaryType} class="btn primary" disabled={!canImport} aria-disabled={!canImport}>Import</button>
 </div>
 
 <style>

src/lib/importGradient.ts

@@ -21,6 +21,7 @@ function toDegreesString(valueWithUnit: string): string {
     // assume degrees if unitless numeric
     deg = parseFloat(v)
   }
+  if (isNaN(deg)) return '0'
   // format: trim insignificant decimals
   const fixed = deg.toFixed(4)
   return String(parseFloat(fixed))
@@ -43,11 +44,16 @@ export function applyParsedToStores(parsed: ParsedGradient) {
 
   if (parsed.type === 'linear') {
     if (parsed.linear?.angleKeyword) {
+      // Just set the named angle - the store's subscriber will automatically
+      // sync the numeric angle based on the nameToDeg mapping
       linear_named_angle.set(parsed.linear.angleKeyword)
-      linear_angle.set(null)
     } else if (parsed.linear?.angleDeg) {
+      // For numeric angles, set the angle value
+      // The store will determine if it matches a named direction
       linear_angle.set(toDegreesString(parsed.linear.angleDeg))
-      linear_named_angle.set('--')
+    } else {
+      // No angle specified, use default "to bottom" (180deg)
+      linear_named_angle.set('to bottom')
     }
   } else if (parsed.type === 'radial') {
     radial_shape.set(parsed.radial?.shape ?? 'circle')
@@ -71,11 +77,28 @@ export function applyParsedToStores(parsed: ParsedGradient) {
     }
   }
 
+  // Normalize position values: strip % suffix to get numeric strings
+  const normalizedStops = (parsed.stops as any[]).map(s => {
+    if (s.kind === 'stop') {
+      return {
+        ...s,
+        position1: s.position1 ? String(s.position1).replace(/%$/, '') : null,
+        position2: s.position2 ? String(s.position2).replace(/%$/, '') : null,
+      }
+    } else if (s.kind === 'hint') {
+      return {
+        ...s,
+        percentage: s.percentage ? String(s.percentage).replace(/%$/, '') : null,
+      }
+    }
+    return s
+  })
+
   // Ensure a hint exists between each adjacent pair of color stops when none were provided
-  const hasAnyHints = (parsed.stops as any[]).some(s => s.kind === 'hint')
-  let stopsWithHints = parsed.stops as any[]
+  const hasAnyHints = normalizedStops.some(s => s.kind === 'hint')
+  let stopsWithHints = normalizedStops
   if (!hasAnyHints) {
-    const colors = (parsed.stops as any[]).filter(s => s.kind === 'stop')
+    const colors = normalizedStops.filter(s => s.kind === 'stop')
     const rebuilt: any[] = []
     colors.forEach((st, idx) => {
       rebuilt.push({ ...st })

src/lib/parseGradient.test.ts

@@ -19,6 +19,13 @@ const valid = [
   'conic-gradient(from 0deg at 0% 100% in oklab,#fff, 2%, #f00 0%, 8%, #fff 0%, 13%, #f00 0%, 18%, #fff 0%, 21%, #f00 0%, 24%, #fff 0%)',
   'linear-gradient(to right in oklab,#0ff 12%, #111 0% 24%, #ff0 0% 36%, #111 0% 48%, #f0f 0% 60%, #111 0% 72%, #0ff 0%, #111 0% 100%)',
   'radial-gradient(farthest-corner circle at 0% 0% in oklch,oklch(95% .25 160), 26%, oklch(75% .5 180) 0%, 46%, oklch(75% .5 210) 0%, 60%, oklch(75% .5 230) 0%, 82%, oklch(75% .5 260) 0%)',
+  // Multi-line gradient with semicolon and directional keyword
+  `linear-gradient(
+    to right in oklab,
+    oklch(70% 0.5 340),
+    oklch(80% 0.3 89)  64%,
+    oklch(90% 0.5 200)
+  );`,
 ]
 
 const invalid = [
@@ -64,5 +71,34 @@ describe('parseGradient', () => {
     expect(stopsB[1].position1).toBeNull()
     expect(stopsB[1].position2).toBeNull()
   })
+
+  it('strips trailing semicolons and correctly parses directional keywords', () => {
+    const withSemi = parseGradient('linear-gradient(to right, red, blue);')
+    expect(withSemi.type).toBe('linear')
+    expect(withSemi.linear?.angleKeyword).toBe('to right')
+    expect(withSemi.stops.length).toBeGreaterThanOrEqual(2)
+
+    const multiline = parseGradient(`linear-gradient(
+      to right in oklab,
+      oklch(70% 0.5 340),
+      oklch(80% 0.3 89) 64%,
+      oklch(90% 0.5 200)
+    );`)
+    expect(multiline.type).toBe('linear')
+    expect(multiline.linear?.angleKeyword).toBe('to right')
+    expect(multiline.space).toBe('oklab')
+    expect(multiline.stops.length).toBe(3)
+  })
+
+  it('correctly parses all directional keywords', () => {
+    const keywords = [
+      'to top', 'to top right', 'to right', 'to bottom right',
+      'to bottom', 'to bottom left', 'to left', 'to top left'
+    ]
+    keywords.forEach(kw => {
+      const parsed = parseGradient(`linear-gradient(${kw}, red, blue)`)
+      expect(parsed.linear?.angleKeyword).toBe(kw)
+    })
+  })
 })
 

src/lib/parseGradient.ts

@@ -87,8 +87,10 @@ function innerContent(input: string): string {
 }
 
 export function parseGradient(input: string): ParsedGradient {
-  const type = classifyFunction(input)
-  const body = innerContent(input)
+  // Strip trailing semicolons that may be present when copying from CSS rules
+  const cleanedInput = input.trim().replace(/;+$/, '')
+  const type = classifyFunction(cleanedInput)
+  const body = innerContent(cleanedInput)
 
   // split by top-level commas
   const segments = splitTopLevel(body, ',')
@@ -156,9 +158,9 @@ export function parseGradient(input: string): ParsedGradient {
     if (/(circle|ellipse|closest-|farthest-| at )/.test(lowerPrelude)) {
       throw new ParseError('Invalid radial/conic tokens in linear-gradient prelude')
     }
-    // angle keyword
+    // angle keyword - match "to <direction>" patterns
     const kw = prelude.match(/\bto\s+(top|bottom|left|right)(?:\s+(left|right|top|bottom))?/i)
-    const ang = prelude.match(/([-+]?\d*\.?\d+(?:deg|turn|grad|rad))/i)
+    const ang = prelude.match(/(?:^|\s)([-+]?\d*\.?\d+(?:deg|turn|grad|rad))(?:\s|$)/i)
     linear = { angleKeyword: null, angleDeg: null }
     if (kw) {
       linear.angleKeyword = kw[0].toLowerCase()

src/store/layers.ts

@@ -263,7 +263,7 @@ export function defaultLayer(): GradientLayer {
       { kind: 'hint', auto: '50', percentage: '50' },
       { kind: 'stop', color: '#fff', auto: '100', position1: '100', position2: '100' },
     ],
-    linear: { named_angle: 'to right', angle: null },
+    linear: { named_angle: 'to right', angle: '90' },
     radial: { shape: 'circle', size: 'farthest-corner', named_position: 'center', position: { x: null, y: null } },
     conic: { angle: '0', named_position: 'center', position: { x: null, y: null } },
   }