From 98d469aba6ef974aedfbf16a3f7492961bb06298 Mon Sep 17 00:00:00 2001
From: Jack Herrington <jherr@pobox.com>
Date: Sun, 21 Sep 2025 17:58:54 -0700
Subject: [PATCH 1/6] chore: first AI pass

---
 AGENTS.md                              | 278 +++++++++++++++
 src/components/AIGradientDialog.svelte | 463 +++++++++++++++++++++++++
 src/components/Gradient.svelte         |  64 ++++
 3 files changed, 805 insertions(+)
 create mode 100644 AGENTS.md
 create mode 100644 src/components/AIGradientDialog.svelte

diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..cdc7814
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,278 @@
+# Gradient Style Application - Technical Context
+
+## Overview
+This is a **SvelteKit 5** application that provides an advanced CSS gradient builder with support for High Dynamic Range (HDR) gradients using modern CSS Color 4 specifications. The application allows users to create, customize, and export CSS gradients with multiple color stops, hints, and layers.
+
+## Technology Stack
+- **Framework**: SvelteKit (v2.37.0) with Svelte 5 (v5.38.6)
+- **Build Tools**: Vite (v7.1.4)
+- **Type System**: TypeScript/JavaScript (mixed - using JSConfig)
+- **Testing**: Vitest (v3.2.4) with Testing Library
+- **Package Manager**: pnpm (v10.15.1)
+- **Key Libraries**:
+  - colorjs.io - Advanced color manipulation and color space conversions
+  - open-props - CSS custom properties design tokens
+  - prismjs - Syntax highlighting for code display
+  - svooltip - Tooltip component library
+
+## Architecture & Data Flow
+
+### State Management Pattern
+The application uses **Svelte stores** with a layered architecture for state management:
+
+1. **Single-Value Stores** (`src/store/`):
+   - Individual writable stores for each gradient property
+   - Automatic synchronization between related values
+   - Bidirectional binding with UI components
+
+2. **Layer System** (`src/store/layers.ts`):
+   - Multi-layer gradient support
+   - Maintains an active layer index
+   - Synchronizes between single stores and layer snapshots
+   - Prevents feedback loops with guard flags
+
+3. **URL State Persistence** (`src/store/url.ts`):
+   - Serializes state to URL hash for sharing
+   - Supports both single-layer (legacy) and multi-layer formats
+   - Debounced updates during user interactions
+
+### Data Store Organization
+
+#### Core Gradient Stores (`src/store/gradient.ts`)
+- `gradient_type`: 'linear' | 'radial' | 'conic'
+- `gradient_space`: Color space (oklab, oklch, srgb, etc.)
+- `gradient_interpolation`: Hue interpolation method
+- `gradient_stops`: Array of color stops and hints
+- `active_stop_index`: Currently selected stop for editing
+
+#### Gradient Type-Specific Stores
+- **Linear** (`src/store/linear.ts`):
+  - `linear_named_angle`: Directional keywords (to right, to top, etc.)
+  - `linear_angle`: Numeric angle in degrees
+  - Auto-sync between named and numeric angles
+
+- **Radial** (`src/store/radial.ts`):
+  - `radial_shape`: circle | ellipse
+  - `radial_size`: Size keywords (farthest-corner, etc.)
+  - `radial_position`: {x, y} coordinates
+  - `radial_named_position`: Named positions (center, top left, etc.)
+
+- **Conic** (`src/store/conic.ts`):
+  - `conic_angle`: Starting angle
+  - `conic_position`: {x, y} coordinates
+  - `conic_named_position`: Named positions
+
+#### Color Picker Store (`src/store/colorpicker.ts`)
+- Individual channel stores for each color space (OKLCH, OKLAB, LAB, LCH, HSL, HWB, RGB)
+- `picker_value`: Current color value
+- `colorspace`: Active color space for picker
+
+#### Layer Management (`src/store/layers.ts`)
+- `layers`: Array of gradient layer objects
+- `active_layer_index`: Currently selected layer
+- Each layer contains a snapshot of all gradient properties
+- Cached CSS strings for performance
+
+### Component Structure
+
+#### Main Components
+- **Gradient.svelte**: Root component, orchestrates the entire UI
+- **GradientStops.svelte**: Manages color stops and hints with drag-reorder
+- **LayersPanel.svelte**: Multi-layer management interface
+- **ColorPicker.svelte**: Advanced color selection with multiple color spaces
+
+#### Overlay Components
+- **LinearOverlay.svelte**: Visual angle control for linear gradients
+- **RadialOverlay.svelte**: Position/shape control for radial gradients
+- **ConicOverlay.svelte**: Angle and position control for conic gradients
+
+#### Control Components
+- **GradientColorSpace.svelte**: Color space and gradient type selection
+- **HueInterpolation.svelte**: Hue interpolation method for cylindrical spaces
+- **Presets.svelte**: Pre-defined gradient templates
+- **GradientImportDialog.svelte**: CSS gradient import functionality
+
+### Utility Functions
+
+#### Gradient String Generation (`src/utils/gradientString.ts`)
+- Builds modern CSS (Color 4) and classic CSS gradient strings
+- Handles position optimization (removes defaults)
+- Manages color space syntax
+- Caches generated strings for performance
+
+#### Gradient Parsing (`src/lib/parseGradient.ts`)
+- Parses CSS gradient strings into structured data
+- Supports all three gradient types
+- Extracts color stops, hints, and configuration
+- Handles modern color space syntax
+
+#### Color Space Utilities (`src/utils/colorspace.ts`)
+- Identifies cylindrical color spaces
+- Determines color gamut (sRGB, P3, Rec2020, XYZ)
+- Maps between ColorJS.io and CSS color space identifiers
+
+#### Stop Management (`src/utils/stops.ts`)
+- Auto-calculates positions for stops
+- Validates and normalizes stop arrays
+- Manages hint percentages
+
+### Data Flow Patterns
+
+1. **User Interaction → Store Update**:
+   - User changes UI control
+   - Component updates relevant store
+   - Store subscription triggers layer update
+   - Layer cached CSS regenerated
+   - UI reflects changes immediately
+
+2. **Layer Selection**:
+   - User selects different layer
+   - Layer snapshot applied to all single stores
+   - UI components react to store changes
+   - Active layer marked in layers panel
+
+3. **URL Synchronization**:
+   - Store changes trigger derived store update
+   - Debounced URL hash update (350ms)
+   - Paused during active interactions (dragging, typing)
+   - Immediate write on interaction end
+
+4. **Import/Export Flow**:
+   - CSS string parsed into structured data
+   - Data mapped to store values
+   - Stores trigger UI updates
+   - New layer created with imported gradient
+
+### Key Features
+
+#### HDR Gradient Support
+- Wide gamut color spaces (Display-P3, Rec2020)
+- OKLCH/OKLAB perceptually uniform spaces
+- Color space interpolation control
+- Hue interpolation methods for cylindrical spaces
+
+#### Multi-Layer System
+- Stack multiple gradients
+- Toggle layer visibility
+- Duplicate, reorder, and delete layers
+- Each layer maintains independent configuration
+
+#### Advanced Stop Control
+- Drag-to-reorder stops
+- Dual position sliders (start/end positions)
+- Color transition hints between stops
+- Auto-position calculation
+
+#### Import/Export
+- Parse existing CSS gradients
+- Export modern (Color 4) CSS
+- Export fallback (sRGB) CSS
+- URL-based sharing
+
+#### Visual Overlays
+- Interactive angle selection for linear gradients
+- Position/size control for radial gradients
+- Rotation and position for conic gradients
+- Real-time preview updates
+
+### Performance Optimizations
+
+1. **Cached CSS Generation**: Layer CSS strings cached to avoid recalculation
+2. **Debounced URL Updates**: Prevents excessive history updates
+3. **Guard Flags**: Prevents store update feedback loops
+4. **Selective Subscriptions**: Components only subscribe to relevant stores
+5. **Lazy Component Loading**: Color picker loads on demand
+
+### File Organization
+
+```
+src/
+├── components/        # Svelte components
+├── lib/              # Library functions (parsing, import)
+├── routes/           # SvelteKit routes
+├── store/            # Svelte stores (state management)
+├── utils/            # Utility functions
+└── test/             # Test setup
+
+Key Files:
+- src/routes/+page.svelte: Main page entry
+- src/components/Gradient.svelte: Root component
+- src/store/layers.ts: Multi-layer orchestration
+- src/utils/gradientString.ts: CSS generation
+- src/lib/parseGradient.ts: CSS parsing
+```
+
+### Testing
+- Unit tests for gradient parsing
+- Stop rendering tests
+- Uses Vitest with JSDOM for browser environment simulation
+
+### Development Notes
+
+#### State Synchronization Complexity
+The application maintains complex bidirectional synchronization between:
+- Individual property stores
+- Layer snapshots
+- URL state
+- UI components
+
+This is managed through guard flags and careful subscription management to prevent infinite loops.
+
+#### Color Space Handling
+The app bridges between:
+- CSS color syntax (display-p3, a98-rgb)
+- ColorJS.io internal names (p3, a98rgb)
+- UI-friendly names
+
+#### Gradient String Optimization
+The generated CSS removes default values:
+- 0% for first stop
+- 100% for last stop
+- 50% for centered hints
+- "to bottom" or 180deg for linear gradients
+- "center" for radial/conic position
+
+#### Browser Compatibility
+- Modern CSS (Color 4) for capable browsers
+- Automatic fallback to sRGB hex colors
+- Feature detection for HDR displays
+
+## Common Tasks
+
+### Adding a New Gradient Type
+1. Create type-specific store in `src/store/`
+2. Add type to gradient_type options
+3. Create overlay component for visual control
+4. Update gradientString.ts for CSS generation
+5. Update parseGradient.ts for import support
+
+### Adding a New Color Space
+1. Update color space lists in components
+2. Add to isCylindricalSpace if applicable
+3. Update ColorJS.io space ID mapping
+4. Test gradient string generation
+
+### Modifying Layer Behavior
+1. Update layer type in `src/store/layers.ts`
+2. Modify snapshot/apply functions
+3. Update buildGradientStrings if needed
+4. Test layer switching and persistence
+
+### Debugging State Issues
+1. Check for feedback loops in store subscriptions
+2. Verify guard flags (isApplyingLayerToStores, syncing)
+3. Inspect URL serialization/deserialization
+4. Use browser DevTools to monitor store values
+
+## External Dependencies
+- ColorJS.io for color manipulation
+- Open Props for design tokens
+- PrismJS for syntax highlighting
+- Svooltip for tooltips
+
+## Build & Deploy
+- `pnpm dev`: Development server
+- `pnpm build`: Production build
+- `pnpm preview`: Preview production build
+- `pnpm test`: Run tests
+- Uses SvelteKit adapter-auto for deployment
diff --git a/src/components/AIGradientDialog.svelte b/src/components/AIGradientDialog.svelte
new file mode 100644
index 0000000..654d591
--- /dev/null
+++ b/src/components/AIGradientDialog.svelte
@@ -0,0 +1,463 @@
+<script>
+  import { onMount } from 'svelte';
+  import { gradient_type, gradient_space, gradient_stops } from '../store/gradient';
+  import { linear_angle, linear_named_angle } from '../store/linear';
+  import { radial_shape, radial_position, radial_named_position } from '../store/radial';
+  import { conic_angle, conic_position, conic_named_position } from '../store/conic';
+  
+  /** @type {HTMLDialogElement | null} */
+  let dialog = null;
+  let userPrompt = '';
+  let loading = false;
+  let error = '';
+  /** @type {any} */
+  let session = null;
+  let modelAvailable = false;
+  
+  // JSON Schema for gradient data
+  const gradientSchema = {
+    type: "object",
+    properties: {
+      gradient_type: {
+        type: "string",
+        enum: ["linear", "radial", "conic"]
+      },
+      gradient_space: {
+        type: "string",
+        enum: ["srgb", "srgb-linear", "lab", "oklab", "xyz", "xyz-d50", "xyz-d65", "hsl", "hwb", "lch", "oklch", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020"]
+      },
+      gradient_stops: {
+        type: "array",
+        items: {
+          type: "object",
+          properties: {
+            color: { type: "string" },
+            position: { type: "number", minimum: 0, maximum: 100 }
+          },
+          required: ["color", "position"]
+        },
+        minItems: 2
+      },
+      // Linear gradient specific
+      linear_angle: { type: "number" },
+      // Radial gradient specific
+      radial_shape: {
+        type: "string",
+        enum: ["circle", "ellipse"]
+      },
+      radial_position: {
+        type: "object",
+        properties: {
+          x: { type: "number", minimum: 0, maximum: 100 },
+          y: { type: "number", minimum: 0, maximum: 100 }
+        }
+      },
+      // Conic gradient specific
+      conic_angle: { type: "number" },
+      conic_position: {
+        type: "object",
+        properties: {
+          x: { type: "number", minimum: 0, maximum: 100 },
+          y: { type: "number", minimum: 0, maximum: 100 }
+        }
+      }
+    },
+    required: ["gradient_type", "gradient_stops"]
+  };
+  
+  onMount(async () => {
+    // Check if the Prompt API is available
+    // @ts-ignore - LanguageModel is a new Chrome API
+    if ('LanguageModel' in window) {
+      try {
+        // @ts-ignore - LanguageModel is a new Chrome API
+        const availability = await window.LanguageModel.availability();
+        console.log('AI Model availability:', availability);
+        
+        if (availability !== 'unavailable') {
+          modelAvailable = true;
+          
+          // If model needs to be downloaded, we can show progress
+          if (availability === 'downloadable') {
+            loading = true;
+            error = 'AI model is being downloaded. This may take a few minutes...';
+            
+            // @ts-ignore - LanguageModel is a new Chrome API
+            session = await window.LanguageModel.create({
+          monitor(m) {
+            m.addEventListener('downloadprogress', (/** @type {any} */ e) => {
+                  const progress = Math.round(e.loaded * 100);
+                  error = `Downloading AI model: ${progress}%`;
+                });
+              }
+            });
+            
+            error = '';
+            loading = false;
+          } else if (availability === 'available') {
+            // Model is ready to use
+            // @ts-ignore - LanguageModel is a new Chrome API
+            session = await window.LanguageModel.create();
+          }
+        } else {
+          error = 'AI model is not available. Please check Chrome settings and hardware requirements.';
+        }
+      } catch (err) {
+        console.error('Error initializing AI:', err);
+        error = 'Failed to initialize AI model. Make sure you are using Chrome 138+ with the Prompt API enabled.';
+      }
+    } else {
+      error = 'The Prompt API is not available in your browser. Please use Chrome 138+ and enable the API.';
+    }
+  });
+  
+  export function open() {
+    if (dialog) {
+      dialog.showModal();
+      userPrompt = '';
+      error = '';
+    }
+  }
+  
+  function close() {
+    if (dialog) {
+      dialog.close();
+    }
+  }
+  
+  async function generateGradient() {
+    if (!userPrompt.trim() || !session) return;
+    
+    loading = true;
+    error = '';
+    
+    try {
+      // Create a detailed prompt for the AI
+      const systemPrompt = `You are a CSS gradient generator. Convert the user's description into gradient data.
+      
+      Guidelines:
+      - For color descriptions like "sunset", "ocean", "forest", use appropriate colors
+      - Default to linear gradients unless the user specifies radial or conic
+      - Use modern color spaces like oklch for vibrant gradients when appropriate
+      - Position stops evenly if not specified
+      - For linear gradients, interpret directions like "left to right" as angle 90, "top to bottom" as 180
+      - For radial gradients, default to ellipse shape centered
+      - Return valid CSS color values (hex, rgb, hsl, oklch, etc.)
+      
+      User request: ${userPrompt}`;
+      
+      // Use the Prompt API with structured output
+      const result = await session.prompt(systemPrompt, {
+        responseConstraint: gradientSchema
+      });
+      
+      // Parse the JSON response
+      const gradientData = JSON.parse(result);
+      // console.log('Generated gradient data:', gradientData);
+      
+      // Update stores directly with the AI-generated gradient data
+      
+      // Update gradient type
+      if (gradientData.gradient_type) {
+        gradient_type.set(gradientData.gradient_type);
+      }
+      
+      // Update gradient space  
+      if (gradientData.gradient_space) {
+        gradient_space.set(gradientData.gradient_space);
+      }
+      
+      // Update gradient stops
+      if (gradientData.gradient_stops && Array.isArray(gradientData.gradient_stops)) {
+        // Import Color for color conversion
+        const Color = (await import('colorjs.io')).default;
+        
+        // Ensure stops have proper structure and convert colors to OKLCH
+        const formattedStops = gradientData.gradient_stops.map((/** @type {any} */ stop) => {
+          let oklchColor;
+          try {
+            // Convert any color format to OKLCH
+            const color = new Color(stop.color);
+            oklchColor = color.to('oklch').toString();
+          } catch (err) {
+            console.warn('Failed to convert color to OKLCH:', stop.color, err);
+            // Fallback to a default OKLCH color if conversion fails
+            oklchColor = 'oklch(70% 0.15 180)'; // Default blue-ish color
+          }
+          
+          return {
+            color: oklchColor,
+            position1: stop.position,
+            position2: stop.position,
+            kind: 'stop'
+          };
+        });
+        gradient_stops.set(formattedStops);
+      }
+    
+      // Handle linear gradient properties
+      if (gradientData.gradient_type === 'linear' && gradientData.linear_angle !== undefined) {
+        linear_angle.set(String(gradientData.linear_angle));
+        linear_named_angle.set('--'); // Set to custom angle indicator
+      }
+      
+      // Handle radial gradient properties
+      if (gradientData.gradient_type === 'radial') {
+        if (gradientData.radial_shape) {
+          radial_shape.set(gradientData.radial_shape);
+        }
+        if (gradientData.radial_position) {
+          radial_position.set(gradientData.radial_position);
+          radial_named_position.set('--'); // Set to custom position indicator
+        } else {
+          // Default to center if no position specified
+          radial_named_position.set('center');
+          radial_position.set({x: null, y: null});
+        }
+      }
+      
+      // Handle conic gradient properties
+      if (gradientData.gradient_type === 'conic') {
+        if (gradientData.conic_angle !== undefined) {
+          conic_angle.set(String(gradientData.conic_angle));
+        }
+        if (gradientData.conic_position) {
+          conic_position.set(gradientData.conic_position);
+          conic_named_position.set('--'); // Set to custom position indicator
+        } else {
+          // Default to center if no position specified
+          conic_named_position.set('center');
+          conic_position.set({x: null, y: null});
+        }
+      }
+      
+      close();
+    } catch (err) {
+      console.error('Error generating gradient:', err);
+      error = `Failed to generate gradient: ${err instanceof Error ? err.message : String(err)}`;
+    } finally {
+      loading = false;
+    }
+  }
+  
+  function handleKeydown(/** @type {KeyboardEvent} */ e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      generateGradient();
+    }
+  }
+</script>
+
+<dialog bind:this={dialog} class="ai-dialog">
+  <div class="dialog-content">
+    <h2>✨ AI Gradient Generator</h2>
+    
+    {#if error}
+      <div class="error-message">{error}</div>
+    {/if}
+    
+    {#if modelAvailable && !loading}
+      <p class="description">
+        Describe the gradient you want to create in natural language.
+      </p>
+      
+      <div class="examples">
+        <p class="examples-label">Try examples like:</p>
+        <ul>
+          <li>"A warm sunset gradient from orange to purple"</li>
+          <li>"Ocean blue gradient with teal highlights"</li>
+          <li>"Radial gradient like a sun burst"</li>
+          <li>"Dark purple to pink gradient at 45 degrees"</li>
+        </ul>
+      </div>
+      
+      <textarea
+        bind:value={userPrompt}
+        placeholder="Describe your gradient..."
+        rows="4"
+        on:keydown={handleKeydown}
+        disabled={loading}
+      ></textarea>
+      
+      <div class="dialog-actions">
+        <button on:click={close} disabled={loading}>
+          Cancel
+        </button>
+        <button 
+          on:click={generateGradient} 
+          disabled={loading || !userPrompt.trim()}
+          class="primary"
+        >
+          {#if loading}
+            Generating...
+          {:else}
+            Generate Gradient
+          {/if}
+        </button>
+      </div>
+    {:else if loading}
+      <div class="loading">
+        <div class="spinner"></div>
+        <p>Preparing AI model...</p>
+      </div>
+    {:else}
+      <div class="dialog-actions">
+        <button on:click={close}>Close</button>
+      </div>
+    {/if}
+  </div>
+</dialog>
+
+<style>
+  .ai-dialog {
+    border: 1px solid var(--gray-4);
+    border-radius: 8px;
+    padding: 0;
+    width: 90vw;
+    max-width: 500px;
+    background: var(--gray-1);
+    color: var(--gray-12);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  }
+  
+  .ai-dialog::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+  }
+  
+  .dialog-content {
+    padding: 1.5rem;
+  }
+  
+  h2 {
+    margin: 0 0 1rem 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+  }
+  
+  .description {
+    margin: 0 0 1rem 0;
+    color: var(--gray-11);
+  }
+  
+  .examples {
+    background: var(--gray-2);
+    border: 1px solid var(--gray-4);
+    border-radius: 6px;
+    padding: 0.75rem;
+    margin-bottom: 1rem;
+  }
+  
+  .examples-label {
+    margin: 0 0 0.5rem 0;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--gray-11);
+  }
+  
+  .examples ul {
+    margin: 0;
+    padding-left: 1.25rem;
+    color: var(--gray-10);
+    font-size: 0.875rem;
+  }
+  
+  .examples li {
+    margin: 0.25rem 0;
+  }
+  
+  textarea {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid var(--gray-6);
+    border-radius: 6px;
+    background: var(--gray-0);
+    color: var(--gray-12);
+    font-family: inherit;
+    font-size: 0.95rem;
+    resize: vertical;
+    min-height: 100px;
+  }
+  
+  textarea:focus {
+    outline: none;
+    border-color: var(--blue-7);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  }
+  
+  textarea:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .error-message {
+    background: var(--red-2);
+    color: var(--red-11);
+    padding: 0.75rem;
+    border-radius: 6px;
+    margin-bottom: 1rem;
+    font-size: 0.875rem;
+  }
+  
+  .dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 1.5rem;
+  }
+  
+  button {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--gray-6);
+    border-radius: 6px;
+    background: var(--gray-0);
+    color: var(--gray-12);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+  
+  button:hover:not(:disabled) {
+    background: var(--gray-2);
+    border-color: var(--gray-7);
+  }
+  
+  button.primary {
+    background: var(--blue-9);
+    color: white;
+    border-color: var(--blue-9);
+  }
+  
+  button.primary:hover:not(:disabled) {
+    background: var(--blue-10);
+    border-color: var(--blue-10);
+  }
+  
+  button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  
+  .loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem;
+    gap: 1rem;
+  }
+  
+  .spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--gray-4);
+    border-top-color: var(--blue-9);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+  
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>
diff --git a/src/components/Gradient.svelte b/src/components/Gradient.svelte
index 30c8087..b4abfa9 100644
--- a/src/components/Gradient.svelte
+++ b/src/components/Gradient.svelte
@@ -36,6 +36,7 @@
   import Presets from './Presets.svelte'
 import Prism from './PrismJS.svelte'
 import GradientImportDialog from './GradientImportDialog.svelte'
+import AIGradientDialog from './AIGradientDialog.svelte'
 
   import Hint from './Hint.svelte'
 
@@ -47,6 +48,7 @@ import GradientImportDialog from './GradientImportDialog.svelte'
   let svgicon
   let restoring = $state(true)
   let importRef
+  let aiDialogRef
 
   onMount(async () => {
     // preview_hd = window.matchMedia('(dynamic-range: high)').matches
@@ -234,6 +236,10 @@ import GradientImportDialog from './GradientImportDialog.svelte'
   function openImport() {
     importRef?.show()
   }
+  
+  function openAI() {
+    aiDialogRef?.open()
+  }
 
   const gensyntax = {
     'linear': () =>
@@ -555,6 +561,12 @@ let user_gradient = $derived(gensyntax[$gradient_type](
   <contain-er style="container: control-panel / inline-size; z-index: var(--layer-1)">
     <section class="controls">
       <div class="menu-bar">
+        <button class="ai-button" onclick={() => openAI()} use:tooltip={{content: "Generate gradient with AI"}}>
+          <span class="sr-only">AI Generate</span>
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M12 2L13.09 8.26L19 7L15.45 11.82L21.8 14L16 16.5L19.53 22L13.17 18.45L9 24L8.89 17.74L3 19L6.55 14.18L0.2 12L6 9.5L2.47 4L8.83 7.55L13 2Z"/>
+          </svg>
+        </button>
         <button class="global-actions">
           <select tabindex="-1" onchange={globalAction}>
             <option disabled selected>Global Actions</option>
@@ -595,6 +607,7 @@ let user_gradient = $derived(gensyntax[$gradient_type](
     </section>
   </contain-er>
   <GradientImportDialog bind:this={importRef} />
+  <AIGradientDialog bind:this={aiDialogRef} />
 </main>
 </div>
 
@@ -1086,4 +1099,55 @@ let user_gradient = $derived(gensyntax[$gradient_type](
   .global-actions > select {
     position: absolute;
   }
+  
+  .menu-bar {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem;
+  }
+  
+  .ai-button {
+    position: relative;
+    inline-size: var(--size-7);
+    overflow: hidden;
+    border-radius: var(--radius-round);
+    padding-inline: 0;
+    aspect-ratio: 1;
+    border: none;
+    box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight);
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  }
+  
+  .ai-button:hover {
+    transform: scale(1.05);
+    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
+  }
+  
+  .ai-button:active {
+    transform: scale(0.95);
+  }
+  
+  .ai-button svg {
+    color: white;
+    width: 60%;
+    height: 60%;
+    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
+    animation: sparkle 3s ease-in-out infinite;
+  }
+  
+  @keyframes sparkle {
+    0%, 100% {
+      transform: scale(1) rotate(0deg);
+      filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
+    }
+    50% {
+      transform: scale(1.1) rotate(180deg);
+      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
+    }
+  }
 </style>

From cfabca1ea9363cbc099e4fdd6f7bbbadbee26a7b Mon Sep 17 00:00:00 2001
From: Jack Herrington <jherr@pobox.com>
Date: Sun, 21 Sep 2025 18:05:55 -0700
Subject: [PATCH 2/6] chore: better AI icon

---
 src/components/Gradient.svelte | 38 +++++++---------------------------
 1 file changed, 8 insertions(+), 30 deletions(-)

diff --git a/src/components/Gradient.svelte b/src/components/Gradient.svelte
index b4abfa9..b0ef3e5 100644
--- a/src/components/Gradient.svelte
+++ b/src/components/Gradient.svelte
@@ -6,8 +6,7 @@
   import { tooltip } from 'svooltip'
   import 'svooltip/styles.css'
 
-  import {gradient_type, gradient_space, gradient_interpolation,
-          gradient_stops, gradient_positions
+  import {gradient_type, gradient_space, gradient_interpolation, gradient_stops
   } from '../store/gradient.ts'
   import {linear_named_angle, linear_angle
   } from '../store/linear.ts'
@@ -16,7 +15,6 @@
   import {conic_angle, conic_position, conic_named_position
   } from '../store/conic.ts'
   import {layers, active_layer_index, selectLayer} from '../store/layers.ts'
-  import {stateAsString, deserializeUrl, restoreStateFromUrl} from '../store/url.ts'
   import { buildGradientStrings } from '../utils/gradientString'
 
   import {linearAngleToString} from '../utils/linear.ts'
@@ -34,9 +32,9 @@
   import ColorPicker from './ColorPicker.svelte'
   import LayersPanel from './LayersPanel.svelte'
   import Presets from './Presets.svelte'
-import Prism from './PrismJS.svelte'
-import GradientImportDialog from './GradientImportDialog.svelte'
-import AIGradientDialog from './AIGradientDialog.svelte'
+  import Prism from './PrismJS.svelte'
+  import GradientImportDialog from './GradientImportDialog.svelte'
+  import AIGradientDialog from './AIGradientDialog.svelte'
 
   import Hint from './Hint.svelte'
 
@@ -563,9 +561,6 @@ let user_gradient = $derived(gensyntax[$gradient_type](
       <div class="menu-bar">
         <button class="ai-button" onclick={() => openAI()} use:tooltip={{content: "Generate gradient with AI"}}>
           <span class="sr-only">AI Generate</span>
-          <svg width="24" height="24" viewBox="0 0 24 24">
-            <path fill="currentColor" d="M12 2L13.09 8.26L19 7L15.45 11.82L21.8 14L16 16.5L19.53 22L13.17 18.45L9 24L8.89 17.74L3 19L6.55 14.18L0.2 12L6 9.5L2.47 4L8.83 7.55L13 2Z"/>
-          </svg>
         </button>
         <button class="global-actions">
           <select tabindex="-1" onchange={globalAction}>
@@ -1116,9 +1111,10 @@ let user_gradient = $derived(gensyntax[$gradient_type](
     border: none;
     box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight);
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    background-image: url(https://api.iconify.design/material-symbols:auto-awesome.svg?color=%23ffffff);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 75%;
     cursor: pointer;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
   }
@@ -1132,22 +1128,4 @@ let user_gradient = $derived(gensyntax[$gradient_type](
     transform: scale(0.95);
   }
   
-  .ai-button svg {
-    color: white;
-    width: 60%;
-    height: 60%;
-    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
-    animation: sparkle 3s ease-in-out infinite;
-  }
-  
-  @keyframes sparkle {
-    0%, 100% {
-      transform: scale(1) rotate(0deg);
-      filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
-    }
-    50% {
-      transform: scale(1.1) rotate(180deg);
-      filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
-    }
-  }
 </style>

From 27d735b25e4e949ebae65d240a9ee6e570777ddd Mon Sep 17 00:00:00 2001
From: Jack Herrington <jherr@pobox.com>
Date: Sun, 21 Sep 2025 18:19:27 -0700
Subject: [PATCH 3/6] chore: use zod for the AI JSON response schema

---
 package.json                           |    9 +-
 pnpm-lock.yaml                         | 1937 ++++++++++++++++++++++++
 src/components/AIGradientDialog.svelte |   80 +-
 3 files changed, 1972 insertions(+), 54 deletions(-)
 create mode 100644 pnpm-lock.yaml

diff --git a/package.json b/package.json
index 8f50be8..974cd90 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,8 @@
 		"@sveltejs/adapter-auto": "^6.1.0",
 		"@sveltejs/kit": "^2.37.0",
 		"@sveltejs/vite-plugin-svelte": "^6.1.3",
+		"@testing-library/jest-dom": "^6.8.0",
+		"@testing-library/svelte": "^5.2.8",
 		"@types/cookie": "^1.0.0",
 		"@types/node": "^24.3.0",
 		"jsdom": "^26.1.0",
@@ -27,16 +29,15 @@
 		"svooltip": "^0.9.0",
 		"typescript": "^5.9.2",
 		"vite": "^7.1.4",
-		"vitest": "^3.2.4",
-		"@testing-library/svelte": "^5.2.8",
-		"@testing-library/jest-dom": "^6.8.0"
+		"vitest": "^3.2.4"
 	},
 	"type": "module",
 	"dependencies": {
 		"colorjs.io": "^0.5.2",
 		"open-props": "^1.7.16",
 		"prism-themes": "^1.9.0",
-		"prismjs": "^1.30.0"
+		"prismjs": "^1.30.0",
+		"zod": "4.1.6-beta.1"
 	},
 	"packageManager": "pnpm@10.15.1"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
new file mode 100644
index 0000000..7b64475
--- /dev/null
+++ b/pnpm-lock.yaml
@@ -0,0 +1,1937 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      colorjs.io:
+        specifier: ^0.5.2
+        version: 0.5.2
+      open-props:
+        specifier: ^1.7.16
+        version: 1.7.16
+      prism-themes:
+        specifier: ^1.9.0
+        version: 1.9.0
+      prismjs:
+        specifier: ^1.30.0
+        version: 1.30.0
+      zod:
+        specifier: 4.1.6-beta.1
+        version: 4.1.6-beta.1
+    devDependencies:
+      '@fontsource/fira-mono':
+        specifier: ^5.2.6
+        version: 5.2.7
+      '@sveltejs/adapter-auto':
+        specifier: ^6.1.0
+        version: 6.1.0(@sveltejs/kit@2.42.2(@sveltejs/vite-plugin-svelte@6.2.0(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2)))(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2)))
+      '@sveltejs/kit':
+        specifier: ^2.37.0
+        version: 2.42.2(@sveltejs/vite-plugin-svelte@6.2.0(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2)))(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2))
+      '@sveltejs/vite-plugin-svelte':
+        specifier: ^6.1.3
+        version: 6.2.0(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2))
+      '@testing-library/jest-dom':
+        specifier: ^6.8.0
+        version: 6.8.0
+      '@testing-library/svelte':
+        specifier: ^5.2.8
+        version: 5.2.8(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2))(vitest@3.2.4(@types/node@24.5.2)(jsdom@26.1.0))
+      '@types/cookie':
+        specifier: ^1.0.0
+        version: 1.0.0
+      '@types/node':
+        specifier: ^24.3.0
+        version: 24.5.2
+      jsdom:
+        specifier: ^26.1.0
+        version: 26.1.0
+      prettier:
+        specifier: ^3.6.2
+        version: 3.6.2
+      prettier-plugin-svelte:
+        specifier: ^3.4.0
+        version: 3.4.0(prettier@3.6.2)(svelte@5.39.4)
+      svelte:
+        specifier: ^5.38.6
+        version: 5.39.4
+      svelte-check:
+        specifier: ^4.3.1
+        version: 4.3.1(picomatch@4.0.3)(svelte@5.39.4)(typescript@5.9.2)
+      svooltip:
+        specifier: ^0.9.0
+        version: 0.9.0(svelte@5.39.4)
+      typescript:
+        specifier: ^5.9.2
+        version: 5.9.2
+      vite:
+        specifier: ^7.1.4
+        version: 7.1.6(@types/node@24.5.2)
+      vitest:
+        specifier: ^3.2.4
+        version: 3.2.4(@types/node@24.5.2)(jsdom@26.1.0)
+
+packages:
+
+  '@adobe/css-tools@4.4.4':
+    resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
+
+  '@asamuzakjp/css-color@3.2.0':
+    resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==}
+
+  '@babel/code-frame@7.27.1':
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.27.1':
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@csstools/color-helpers@5.1.0':
+    resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-color-parser@3.1.0':
+    resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
+  '@esbuild/aix-ppc64@0.25.10':
+    resolution: {integrity: sha512-0NFWnA+7l41irNuaSVlLfgNT12caWJVLzp5eAVhZ0z1qpxbockccEt3s+149rE64VUI3Ml2zt8Nv5JVc4QXTsw==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.25.10':
+    resolution: {integrity: sha512-LSQa7eDahypv/VO6WKohZGPSJDq5OVOo3UoFR1E4t4Gj1W7zEQMUhI+lo81H+DtB+kP+tDgBp+M4oNCwp6kffg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.25.10':
+    resolution: {integrity: sha512-dQAxF1dW1C3zpeCDc5KqIYuZ1tgAdRXNoZP7vkBIRtKZPYe2xVr/d3SkirklCHudW1B45tGiUlz2pUWDfbDD4w==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.25.10':
+    resolution: {integrity: sha512-MiC9CWdPrfhibcXwr39p9ha1x0lZJ9KaVfvzA0Wxwz9ETX4v5CHfF09bx935nHlhi+MxhA63dKRRQLiVgSUtEg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.25.10':
+    resolution: {integrity: sha512-JC74bdXcQEpW9KkV326WpZZjLguSZ3DfS8wrrvPMHgQOIEIG/sPXEN/V8IssoJhbefLRcRqw6RQH2NnpdprtMA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.25.10':
+    resolution: {integrity: sha512-tguWg1olF6DGqzws97pKZ8G2L7Ig1vjDmGTwcTuYHbuU6TTjJe5FXbgs5C1BBzHbJ2bo1m3WkQDbWO2PvamRcg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.25.10':
+    resolution: {integrity: sha512-3ZioSQSg1HT2N05YxeJWYR+Libe3bREVSdWhEEgExWaDtyFbbXWb49QgPvFH8u03vUPX10JhJPcz7s9t9+boWg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.25.10':
+    resolution: {integrity: sha512-LLgJfHJk014Aa4anGDbh8bmI5Lk+QidDmGzuC2D+vP7mv/GeSN+H39zOf7pN5N8p059FcOfs2bVlrRr4SK9WxA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.25.10':
+    resolution: {integrity: sha512-5luJWN6YKBsawd5f9i4+c+geYiVEw20FVW5x0v1kEMWNq8UctFjDiMATBxLvmmHA4bf7F6hTRaJgtghFr9iziQ==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.25.10':
+    resolution: {integrity: sha512-oR31GtBTFYCqEBALI9r6WxoU/ZofZl962pouZRTEYECvNF/dtXKku8YXcJkhgK/beU+zedXfIzHijSRapJY3vg==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.25.10':
+    resolution: {integrity: sha512-NrSCx2Kim3EnnWgS4Txn0QGt0Xipoumb6z6sUtl5bOEZIVKhzfyp/Lyw4C1DIYvzeW/5mWYPBFJU3a/8Yr75DQ==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.25.10':
+    resolution: {integrity: sha512-xoSphrd4AZda8+rUDDfD9J6FUMjrkTz8itpTITM4/xgerAZZcFW7Dv+sun7333IfKxGG8gAq+3NbfEMJfiY+Eg==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.25.10':
+    resolution: {integrity: sha512-ab6eiuCwoMmYDyTnyptoKkVS3k8fy/1Uvq7Dj5czXI6DF2GqD2ToInBI0SHOp5/X1BdZ26RKc5+qjQNGRBelRA==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.25.10':
+    resolution: {integrity: sha512-NLinzzOgZQsGpsTkEbdJTCanwA5/wozN9dSgEl12haXJBzMTpssebuXR42bthOF3z7zXFWH1AmvWunUCkBE4EA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.25.10':
+    resolution: {integrity: sha512-FE557XdZDrtX8NMIeA8LBJX3dC2M8VGXwfrQWU7LB5SLOajfJIxmSdyL/gU1m64Zs9CBKvm4UAuBp5aJ8OgnrA==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.25.10':
+    resolution: {integrity: sha512-3BBSbgzuB9ajLoVZk0mGu+EHlBwkusRmeNYdqmznmMc9zGASFjSsxgkNsqmXugpPk00gJ0JNKh/97nxmjctdew==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.25.10':
+    resolution: {integrity: sha512-QSX81KhFoZGwenVyPoberggdW1nrQZSvfVDAIUXr3WqLRZGZqWk/P4T8p2SP+de2Sr5HPcvjhcJzEiulKgnxtA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.25.10':
+    resolution: {integrity: sha512-AKQM3gfYfSW8XRk8DdMCzaLUFB15dTrZfnX8WXQoOUpUBQ+NaAFCP1kPS/ykbbGYz7rxn0WS48/81l9hFl3u4A==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.25.10':
+    resolution: {integrity: sha512-7RTytDPGU6fek/hWuN9qQpeGPBZFfB4zZgcz2VK2Z5VpdUxEI8JKYsg3JfO0n/Z1E/6l05n0unDCNc4HnhQGig==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.25.10':
+    resolution: {integrity: sha512-5Se0VM9Wtq797YFn+dLimf2Zx6McttsH2olUBsDml+lm0GOCRVebRWUvDtkY4BWYv/3NgzS8b/UM3jQNh5hYyw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.25.10':
+    resolution: {integrity: sha512-XkA4frq1TLj4bEMB+2HnI0+4RnjbuGZfet2gs/LNs5Hc7D89ZQBHQ0gL2ND6Lzu1+QVkjp3x1gIcPKzRNP8bXw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.25.10':
+    resolution: {integrity: sha512-AVTSBhTX8Y/Fz6OmIVBip9tJzZEUcY8WLh7I59+upa5/GPhh2/aM6bvOMQySspnCCHvFi79kMtdJS1w0DXAeag==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.25.10':
+    resolution: {integrity: sha512-fswk3XT0Uf2pGJmOpDB7yknqhVkJQkAQOcW/ccVOtfx05LkbWOaRAtn5SaqXypeKQra1QaEa841PgrSL9ubSPQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.25.10':
+    resolution: {integrity: sha512-ah+9b59KDTSfpaCg6VdJoOQvKjI33nTaQr4UluQwW7aEwZQsbMCfTmfEO4VyewOxx4RaDT/xCy9ra2GPWmO7Kw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.25.10':
+    resolution: {integrity: sha512-QHPDbKkrGO8/cz9LKVnJU22HOi4pxZnZhhA2HYHez5Pz4JeffhDjf85E57Oyco163GnzNCVkZK0b/n4Y0UHcSw==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.25.10':
+    resolution: {integrity: sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@fontsource/fira-mono@5.2.7':
+    resolution: {integrity: sha512-wYrAn6i3nH6luqQBZxtWUpl4UTUvs9AEbEeZxksPMwIqyjRRaxHTNW3c2VfM50gabS2IS7pT8lVWS2USB4ukYA==}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@polka/url@1.0.0-next.29':
+    resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
+
+  '@rollup/rollup-android-arm-eabi@4.52.0':
+    resolution: {integrity: sha512-VxDYCDqOaR7NXzAtvRx7G1u54d2kEHopb28YH/pKzY6y0qmogP3gG7CSiWsq9WvDFxOQMpNEyjVAHZFXfH3o/A==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.52.0':
+    resolution: {integrity: sha512-pqDirm8koABIKvzL59YI9W9DWbRlTX7RWhN+auR8HXJxo89m4mjqbah7nJZjeKNTNYopqL+yGg+0mhCpf3xZtQ==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.52.0':
+    resolution: {integrity: sha512-YCdWlY/8ltN6H78HnMsRHYlPiKvqKagBP1r+D7SSylxX+HnsgXGCmLiV3Y4nSyY9hW8qr8U9LDUx/Lo7M6MfmQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.52.0':
+    resolution: {integrity: sha512-z4nw6y1j+OOSGzuVbSWdIp1IUks9qNw4dc7z7lWuWDKojY38VMWBlEN7F9jk5UXOkUcp97vA1N213DF+Lz8BRg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.52.0':
+    resolution: {integrity: sha512-Q/dv9Yvyr5rKlK8WQJZVrp5g2SOYeZUs9u/t2f9cQ2E0gJjYB/BWoedXfUT0EcDJefi2zzVfhcOj8drWCzTviw==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.52.0':
+    resolution: {integrity: sha512-kdBsLs4Uile/fbjZVvCRcKB4q64R+1mUq0Yd7oU1CMm1Av336ajIFqNFovByipciuUQjBCPMxwJhCgfG2re3rg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.52.0':
+    resolution: {integrity: sha512-aL6hRwu0k7MTUESgkg7QHY6CoqPgr6gdQXRJI1/VbFlUMwsSzPGSR7sG5d+MCbYnJmJwThc2ol3nixj1fvI/zQ==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.52.0':
+    resolution: {integrity: sha512-BTs0M5s1EJejgIBJhCeiFo7GZZ2IXWkFGcyZhxX4+8usnIo5Mti57108vjXFIQmmJaRyDwmV59Tw64Ap1dkwMw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.52.0':
+    resolution: {integrity: sha512-uj672IVOU9m08DBGvoPKPi/J8jlVgjh12C9GmjjBxCTQc3XtVmRkRKyeHSmIKQpvJ7fIm1EJieBUcnGSzDVFyw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.52.0':
+    resolution: {integrity: sha512-/+IVbeDMDCtB/HP/wiWsSzduD10SEGzIZX2945KSgZRNi4TSkjHqRJtNTVtVb8IRwhJ65ssI56krlLik+zFWkw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-gnu@4.52.0':
+    resolution: {integrity: sha512-U1vVzvSWtSMWKKrGoROPBXMh3Vwn93TA9V35PldokHGqiUbF6erSzox/5qrSMKp6SzakvyjcPiVF8yB1xKr9Pg==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.52.0':
+    resolution: {integrity: sha512-X/4WfuBAdQRH8cK3DYl8zC00XEE6aM472W+QCycpQJeLWVnHfkv7RyBFVaTqNUMsTgIX8ihMjCvFF9OUgeABzw==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.52.0':
+    resolution: {integrity: sha512-xIRYc58HfWDBZoLmWfWXg2Sq8VCa2iJ32B7mqfWnkx5mekekl0tMe7FHpY8I72RXEcUkaWawRvl3qA55og+cwQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.52.0':
+    resolution: {integrity: sha512-mbsoUey05WJIOz8U1WzNdf+6UMYGwE3fZZnQqsM22FZ3wh1N887HT6jAOjXs6CNEK3Ntu2OBsyQDXfIjouI4dw==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.52.0':
+    resolution: {integrity: sha512-qP6aP970bucEi5KKKR4AuPFd8aTx9EF6BvutvYxmZuWLJHmnq4LvBfp0U+yFDMGwJ+AIJEH5sIP+SNypauMWzg==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.52.0':
+    resolution: {integrity: sha512-nmSVN+F2i1yKZ7rJNKO3G7ZzmxJgoQBQZ/6c4MuS553Grmr7WqR7LLDcYG53Z2m9409z3JLt4sCOhLdbKQ3HmA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.52.0':
+    resolution: {integrity: sha512-2d0qRo33G6TfQVjaMR71P+yJVGODrt5V6+T0BDYH4EMfGgdC/2HWDVjSSFw888GSzAZUwuska3+zxNUCDco6rQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openharmony-arm64@4.52.0':
+    resolution: {integrity: sha512-A1JalX4MOaFAAyGgpO7XP5khquv/7xKzLIyLmhNrbiCxWpMlnsTYr8dnsWM7sEeotNmxvSOEL7F65j0HXFcFsw==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.52.0':
+    resolution: {integrity: sha512-YQugafP/rH0eOOHGjmNgDURrpYHrIX0yuojOI8bwCyXwxC9ZdTd3vYkmddPX0oHONLXu9Rb1dDmT0VNpjkzGGw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.52.0':
+    resolution: {integrity: sha512-zYdUYhi3Qe2fndujBqL5FjAFzvNeLxtIqfzNEVKD1I7C37/chv1VxhscWSQHTNfjPCrBFQMnynwA3kpZpZ8w4A==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.52.0':
+    resolution: {integrity: sha512-fGk03kQylNaCOQ96HDMeT7E2n91EqvCDd3RwvT5k+xNdFCeMGnj5b5hEgTGrQuyidqSsD3zJDQ21QIaxXqTBJw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.52.0':
+    resolution: {integrity: sha512-6iKDCVSIUQ8jPMoIV0OytRKniaYyy5EbY/RRydmLW8ZR3cEBhxbWl5ro0rkUNe0ef6sScvhbY79HrjRm8i3vDQ==}
+    cpu: [x64]
+    os: [win32]
+
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
+  '@sveltejs/acorn-typescript@1.0.5':
+    resolution: {integrity: sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==}
+    peerDependencies:
+      acorn: ^8.9.0
+
+  '@sveltejs/adapter-auto@6.1.0':
+    resolution: {integrity: sha512-shOuLI5D2s+0zTv2ab5M5PqfknXqWbKi+0UwB9yLTRIdzsK1R93JOO8jNhIYSHdW+IYXIYnLniu+JZqXs7h9Wg==}
+    peerDependencies:
+      '@sveltejs/kit': ^2.0.0
+
+  '@sveltejs/kit@2.42.2':
+    resolution: {integrity: sha512-FcNICFvlSYjPiAgk8BpqTEnXkaUj6I6wDwpQBxKMpsYhUc2Q5STgsVpXOG5LqwFpUAoLAXQ4wdWul7EcAG67JQ==}
+    engines: {node: '>=18.13'}
+    hasBin: true
+    peerDependencies:
+      '@opentelemetry/api': ^1.0.0
+      '@sveltejs/vite-plugin-svelte': ^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      vite: ^5.0.3 || ^6.0.0 || ^7.0.0-beta.0
+    peerDependenciesMeta:
+      '@opentelemetry/api':
+        optional: true
+
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.1':
+    resolution: {integrity: sha512-ubWshlMk4bc8mkwWbg6vNvCeT7lGQojE3ijDh3QTR6Zr/R+GXxsGbyH4PExEPpiFmqPhYiVSVmHBjUcVc1JIrA==}
+    engines: {node: ^20.19 || ^22.12 || >=24}
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^6.0.0-next.0
+      svelte: ^5.0.0
+      vite: ^6.3.0 || ^7.0.0
+
+  '@sveltejs/vite-plugin-svelte@6.2.0':
+    resolution: {integrity: sha512-nJsV36+o7rZUDlrnSduMNl11+RoDE1cKqOI0yUEBCcqFoAZOk47TwD3dPKS2WmRutke9StXnzsPBslY7prDM9w==}
+    engines: {node: ^20.19 || ^22.12 || >=24}
+    peerDependencies:
+      svelte: ^5.0.0
+      vite: ^6.3.0 || ^7.0.0
+
+  '@testing-library/dom@10.4.1':
+    resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
+    engines: {node: '>=18'}
+
+  '@testing-library/jest-dom@6.8.0':
+    resolution: {integrity: sha512-WgXcWzVM6idy5JaftTVC8Vs83NKRmGJz4Hqs4oyOuO2J4r/y79vvKZsb+CaGyCSEbUPI6OsewfPd0G1A0/TUZQ==}
+    engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
+
+  '@testing-library/svelte@5.2.8':
+    resolution: {integrity: sha512-ucQOtGsJhtawOEtUmbR4rRh53e6RbM1KUluJIXRmh6D4UzxR847iIqqjRtg9mHNFmGQ8Vkam9yVcR5d1mhIHKA==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      svelte: ^3 || ^4 || ^5 || ^5.0.0-next.0
+      vite: '*'
+      vitest: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+      vitest:
+        optional: true
+
+  '@types/aria-query@5.0.4':
+    resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
+
+  '@types/chai@5.2.2':
+    resolution: {integrity: sha512-8kB30R7Hwqf40JPiKhVzodJs2Qc1ZJ5zuT3uzw5Hq/dhNCl3G3l83jfpdI1e20BP348+fV7VIL/+FxaXkqBmWg==}
+
+  '@types/cookie@0.6.0':
+    resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
+
+  '@types/cookie@1.0.0':
+    resolution: {integrity: sha512-mGFXbkDQJ6kAXByHS7QAggRXgols0mAdP4MuXgloGY1tXokvzaFFM4SMqWvf7AH0oafI7zlFJwoGWzmhDqTZ9w==}
+    deprecated: This is a stub types definition. cookie provides its own type definitions, so you do not need this installed.
+
+  '@types/deep-eql@4.0.2':
+    resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/node@24.5.2':
+    resolution: {integrity: sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==}
+
+  '@vitest/expect@3.2.4':
+    resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
+
+  '@vitest/mocker@3.2.4':
+    resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
+  '@vitest/pretty-format@3.2.4':
+    resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
+
+  '@vitest/runner@3.2.4':
+    resolution: {integrity: sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==}
+
+  '@vitest/snapshot@3.2.4':
+    resolution: {integrity: sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==}
+
+  '@vitest/spy@3.2.4':
+    resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
+
+  '@vitest/utils@3.2.4':
+    resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
+
+  acorn@8.15.0:
+    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@5.2.0:
+    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
+    engines: {node: '>=10'}
+
+  aria-query@5.3.0:
+    resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
+
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
+    engines: {node: '>= 0.4'}
+
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
+  chai@5.3.3:
+    resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
+    engines: {node: '>=18'}
+
+  check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
+
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  colorjs.io@0.5.2:
+    resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
+
+  cookie@0.6.0:
+    resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==}
+    engines: {node: '>= 0.6'}
+
+  cookie@1.0.2:
+    resolution: {integrity: sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==}
+    engines: {node: '>=18'}
+
+  css.escape@1.5.1:
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+
+  cssstyle@4.6.0:
+    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
+    engines: {node: '>=18'}
+
+  data-urls@5.0.0:
+    resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
+    engines: {node: '>=18'}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  decimal.js@10.6.0:
+    resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
+
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  dequal@2.0.3:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
+  devalue@5.3.2:
+    resolution: {integrity: sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw==}
+
+  dom-accessibility-api@0.5.16:
+    resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
+
+  dom-accessibility-api@0.6.3:
+    resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  esbuild@0.25.10:
+    resolution: {integrity: sha512-9RiGKvCwaqxO2owP61uQ4BgNborAQskMR6QusfWzQqv7AZOg5oGehdY2pRJMTKuwxd1IDBP4rSbI5lHzU7SMsQ==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  esm-env@1.2.2:
+    resolution: {integrity: sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==}
+
+  esrap@2.1.0:
+    resolution: {integrity: sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA==}
+
+  estree-walker@3.0.3:
+    resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+
+  expect-type@1.2.2:
+    resolution: {integrity: sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==}
+    engines: {node: '>=12.0.0'}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
+  http-proxy-agent@7.0.2:
+    resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
+    engines: {node: '>= 14'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-tokens@9.0.1:
+    resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==}
+
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
+  locate-character@3.0.0:
+    resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+
+  loupe@3.2.1:
+    resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==}
+
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
+  lz-string@1.5.0:
+    resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
+    hasBin: true
+
+  magic-string@0.30.19:
+    resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
+
+  min-indent@1.0.1:
+    resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
+    engines: {node: '>=4'}
+
+  mri@1.2.0:
+    resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
+    engines: {node: '>=4'}
+
+  mrmime@2.0.1:
+    resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
+    engines: {node: '>=10'}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  nwsapi@2.2.22:
+    resolution: {integrity: sha512-ujSMe1OWVn55euT1ihwCI1ZcAaAU3nxUiDwfDQldc51ZXaB9m2AyOn6/jh1BLe2t/G8xd6uKG1UBF2aZJeg2SQ==}
+
+  open-props@1.7.16:
+    resolution: {integrity: sha512-9dGv6wtah34stwweJytNEcCB0NG9HeV9wVsyr7Bs8RkKgrx2v0qIRi+9LQa5569nPbOpCOFF5nOxCPdKw30RAA==}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  pathval@2.0.1:
+    resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==}
+    engines: {node: '>= 14.16'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prettier-plugin-svelte@3.4.0:
+    resolution: {integrity: sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ==}
+    peerDependencies:
+      prettier: ^3.0.0
+      svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
+
+  prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  pretty-format@27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+
+  prism-themes@1.9.0:
+    resolution: {integrity: sha512-tX2AYsehKDw1EORwBps+WhBFKc2kxfoFpQAjxBndbZKr4fRmMkv47XN0BghC/K1qwodB1otbe4oF23vUTFDokw==}
+
+  prismjs@1.30.0:
+    resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
+    engines: {node: '>=6'}
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  react-is@17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  redent@3.0.0:
+    resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
+    engines: {node: '>=8'}
+
+  rollup@4.52.0:
+    resolution: {integrity: sha512-+IuescNkTJQgX7AkIDtITipZdIGcWF0pnVvZTWStiazUmcGA2ag8dfg0urest2XlXUi9kuhfQ+qmdc5Stc3z7g==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
+
+  sade@1.8.1:
+    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
+    engines: {node: '>=6'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
+  set-cookie-parser@2.7.1:
+    resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==}
+
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
+  sirv@3.0.2:
+    resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
+    engines: {node: '>=18'}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
+  std-env@3.9.0:
+    resolution: {integrity: sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==}
+
+  strip-indent@3.0.0:
+    resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
+    engines: {node: '>=8'}
+
+  strip-literal@3.0.0:
+    resolution: {integrity: sha512-TcccoMhJOM3OebGhSBEmp3UZ2SfDMZUEBdRA/9ynfLi8yYajyWX3JiXArcJt4Umh4vISpspkQIY8ZZoCqjbviA==}
+
+  svelte-check@4.3.1:
+    resolution: {integrity: sha512-lkh8gff5gpHLjxIV+IaApMxQhTGnir2pNUAqcNgeKkvK5bT/30Ey/nzBxNLDlkztCH4dP7PixkMt9SWEKFPBWg==}
+    engines: {node: '>= 18.0.0'}
+    hasBin: true
+    peerDependencies:
+      svelte: ^4.0.0 || ^5.0.0-next.0
+      typescript: '>=5.0.0'
+
+  svelte@5.39.4:
+    resolution: {integrity: sha512-VU729KzEau1l6d6d25EnRQhdkwwYdTQxQrF8gdUfjZ3dCjrG7VmRMylMxx92ayO9/z5PKWpDrShJdzc4PGW1uA==}
+    engines: {node: '>=18'}
+
+  svooltip@0.9.0:
+    resolution: {integrity: sha512-vBQZRj4xf+eLMMXSutyGQuZ1wJDzj39AQZotvoBajWKiDGBT11oL+/nX3hHj0QuS9K8oXVqdNqevfqFTKziE8A==}
+    peerDependencies:
+      svelte: ^5.0.0
+
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinyexec@0.3.2:
+    resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  tinypool@1.1.1:
+    resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@2.0.0:
+    resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@4.0.4:
+    resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==}
+    engines: {node: '>=14.0.0'}
+
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
+  totalist@3.0.1:
+    resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
+    engines: {node: '>=6'}
+
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
+  typescript@5.9.2:
+    resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  undici-types@7.12.0:
+    resolution: {integrity: sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==}
+
+  vite-node@3.2.4:
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+
+  vite@7.1.6:
+    resolution: {integrity: sha512-SRYIB8t/isTwNn8vMB3MR6E+EQZM/WG1aKmmIUCfDXfVvKfc20ZpamngWHKzAmmu9ppsgxsg4b2I7c90JZudIQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitefu@1.1.1:
+    resolution: {integrity: sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  vitest@3.2.4:
+    resolution: {integrity: sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/debug': ^4.1.12
+      '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0
+      '@vitest/browser': 3.2.4
+      '@vitest/ui': 3.2.4
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/debug':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
+  ws@8.18.3:
+    resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
+  zimmerframe@1.1.4:
+    resolution: {integrity: sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ==}
+
+  zod@4.1.6-beta.1:
+    resolution: {integrity: sha512-sTARD/5Eb6CKRuz/bAk3BrCnJA9xpfPUAHqZrIGoEzctf5hkTP67MpmoUNX8QokOzCM3DOuxYYckM6b24lpGuA==}
+
+snapshots:
+
+  '@adobe/css-tools@4.4.4': {}
+
+  '@asamuzakjp/css-color@3.2.0':
+    dependencies:
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
+
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/helper-validator-identifier@7.27.1': {}
+
+  '@babel/runtime@7.28.4': {}
+
+  '@csstools/color-helpers@5.1.0': {}
+
+  '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.1.0
+      '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+
+  '@csstools/css-tokenizer@3.0.4': {}
+
+  '@esbuild/aix-ppc64@0.25.10':
+    optional: true
+
+  '@esbuild/android-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/android-arm@0.25.10':
+    optional: true
+
+  '@esbuild/android-x64@0.25.10':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/darwin-x64@0.25.10':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.25.10':
+    optional: true
+
+  '@esbuild/linux-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/linux-arm@0.25.10':
+    optional: true
+
+  '@esbuild/linux-ia32@0.25.10':
+    optional: true
+
+  '@esbuild/linux-loong64@0.25.10':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.25.10':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.25.10':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.25.10':
+    optional: true
+
+  '@esbuild/linux-s390x@0.25.10':
+    optional: true
+
+  '@esbuild/linux-x64@0.25.10':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.25.10':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.25.10':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/sunos-x64@0.25.10':
+    optional: true
+
+  '@esbuild/win32-arm64@0.25.10':
+    optional: true
+
+  '@esbuild/win32-ia32@0.25.10':
+    optional: true
+
+  '@esbuild/win32-x64@0.25.10':
+    optional: true
+
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/utils@0.2.10': {}
+
+  '@fontsource/fira-mono@5.2.7': {}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@polka/url@1.0.0-next.29': {}
+
+  '@rollup/rollup-android-arm-eabi@4.52.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.52.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.52.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.52.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.52.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.52.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.52.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.52.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.52.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.52.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.52.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.52.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.52.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.52.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.52.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.52.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.52.0':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.52.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.52.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.52.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.52.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.52.0':
+    optional: true
+
+  '@standard-schema/spec@1.0.0': {}
+
+  '@sveltejs/acorn-typescript@1.0.5(acorn@8.15.0)':
+    dependencies:
+      acorn: 8.15.0
+
+  '@sveltejs/adapter-auto@6.1.0(@sveltejs/kit@2.42.2(@sveltejs/vite-plugin-svelte@6.2.0(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2)))(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2)))':
+    dependencies:
+      '@sveltejs/kit': 2.42.2(@sveltejs/vite-plugin-svelte@6.2.0(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2)))(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2))
+
+  '@sveltejs/kit@2.42.2(@sveltejs/vite-plugin-svelte@6.2.0(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2)))(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2))':
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      '@sveltejs/acorn-typescript': 1.0.5(acorn@8.15.0)
+      '@sveltejs/vite-plugin-svelte': 6.2.0(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2))
+      '@types/cookie': 0.6.0
+      acorn: 8.15.0
+      cookie: 0.6.0
+      devalue: 5.3.2
+      esm-env: 1.2.2
+      kleur: 4.1.5
+      magic-string: 0.30.19
+      mrmime: 2.0.1
+      sade: 1.8.1
+      set-cookie-parser: 2.7.1
+      sirv: 3.0.2
+      svelte: 5.39.4
+      vite: 7.1.6(@types/node@24.5.2)
+
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.1(@sveltejs/vite-plugin-svelte@6.2.0(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2)))(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 6.2.0(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2))
+      debug: 4.4.3
+      svelte: 5.39.4
+      vite: 7.1.6(@types/node@24.5.2)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@sveltejs/vite-plugin-svelte@6.2.0(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2))':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 5.0.1(@sveltejs/vite-plugin-svelte@6.2.0(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2)))(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2))
+      debug: 4.4.3
+      deepmerge: 4.3.1
+      magic-string: 0.30.19
+      svelte: 5.39.4
+      vite: 7.1.6(@types/node@24.5.2)
+      vitefu: 1.1.1(vite@7.1.6(@types/node@24.5.2))
+    transitivePeerDependencies:
+      - supports-color
+
+  '@testing-library/dom@10.4.1':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/runtime': 7.28.4
+      '@types/aria-query': 5.0.4
+      aria-query: 5.3.0
+      dom-accessibility-api: 0.5.16
+      lz-string: 1.5.0
+      picocolors: 1.1.1
+      pretty-format: 27.5.1
+
+  '@testing-library/jest-dom@6.8.0':
+    dependencies:
+      '@adobe/css-tools': 4.4.4
+      aria-query: 5.3.2
+      css.escape: 1.5.1
+      dom-accessibility-api: 0.6.3
+      picocolors: 1.1.1
+      redent: 3.0.0
+
+  '@testing-library/svelte@5.2.8(svelte@5.39.4)(vite@7.1.6(@types/node@24.5.2))(vitest@3.2.4(@types/node@24.5.2)(jsdom@26.1.0))':
+    dependencies:
+      '@testing-library/dom': 10.4.1
+      svelte: 5.39.4
+    optionalDependencies:
+      vite: 7.1.6(@types/node@24.5.2)
+      vitest: 3.2.4(@types/node@24.5.2)(jsdom@26.1.0)
+
+  '@types/aria-query@5.0.4': {}
+
+  '@types/chai@5.2.2':
+    dependencies:
+      '@types/deep-eql': 4.0.2
+
+  '@types/cookie@0.6.0': {}
+
+  '@types/cookie@1.0.0':
+    dependencies:
+      cookie: 1.0.2
+
+  '@types/deep-eql@4.0.2': {}
+
+  '@types/estree@1.0.8': {}
+
+  '@types/node@24.5.2':
+    dependencies:
+      undici-types: 7.12.0
+
+  '@vitest/expect@3.2.4':
+    dependencies:
+      '@types/chai': 5.2.2
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      tinyrainbow: 2.0.0
+
+  '@vitest/mocker@3.2.4(vite@7.1.6(@types/node@24.5.2))':
+    dependencies:
+      '@vitest/spy': 3.2.4
+      estree-walker: 3.0.3
+      magic-string: 0.30.19
+    optionalDependencies:
+      vite: 7.1.6(@types/node@24.5.2)
+
+  '@vitest/pretty-format@3.2.4':
+    dependencies:
+      tinyrainbow: 2.0.0
+
+  '@vitest/runner@3.2.4':
+    dependencies:
+      '@vitest/utils': 3.2.4
+      pathe: 2.0.3
+      strip-literal: 3.0.0
+
+  '@vitest/snapshot@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      magic-string: 0.30.19
+      pathe: 2.0.3
+
+  '@vitest/spy@3.2.4':
+    dependencies:
+      tinyspy: 4.0.4
+
+  '@vitest/utils@3.2.4':
+    dependencies:
+      '@vitest/pretty-format': 3.2.4
+      loupe: 3.2.1
+      tinyrainbow: 2.0.0
+
+  acorn@8.15.0: {}
+
+  agent-base@7.1.4: {}
+
+  ansi-regex@5.0.1: {}
+
+  ansi-styles@5.2.0: {}
+
+  aria-query@5.3.0:
+    dependencies:
+      dequal: 2.0.3
+
+  aria-query@5.3.2: {}
+
+  assertion-error@2.0.1: {}
+
+  axobject-query@4.1.0: {}
+
+  cac@6.7.14: {}
+
+  chai@5.3.3:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.1
+      deep-eql: 5.0.2
+      loupe: 3.2.1
+      pathval: 2.0.1
+
+  check-error@2.1.1: {}
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
+  clsx@2.1.1: {}
+
+  colorjs.io@0.5.2: {}
+
+  cookie@0.6.0: {}
+
+  cookie@1.0.2: {}
+
+  css.escape@1.5.1: {}
+
+  cssstyle@4.6.0:
+    dependencies:
+      '@asamuzakjp/css-color': 3.2.0
+      rrweb-cssom: 0.8.0
+
+  data-urls@5.0.0:
+    dependencies:
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  decimal.js@10.6.0: {}
+
+  deep-eql@5.0.2: {}
+
+  deepmerge@4.3.1: {}
+
+  dequal@2.0.3: {}
+
+  devalue@5.3.2: {}
+
+  dom-accessibility-api@0.5.16: {}
+
+  dom-accessibility-api@0.6.3: {}
+
+  entities@6.0.1: {}
+
+  es-module-lexer@1.7.0: {}
+
+  esbuild@0.25.10:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.25.10
+      '@esbuild/android-arm': 0.25.10
+      '@esbuild/android-arm64': 0.25.10
+      '@esbuild/android-x64': 0.25.10
+      '@esbuild/darwin-arm64': 0.25.10
+      '@esbuild/darwin-x64': 0.25.10
+      '@esbuild/freebsd-arm64': 0.25.10
+      '@esbuild/freebsd-x64': 0.25.10
+      '@esbuild/linux-arm': 0.25.10
+      '@esbuild/linux-arm64': 0.25.10
+      '@esbuild/linux-ia32': 0.25.10
+      '@esbuild/linux-loong64': 0.25.10
+      '@esbuild/linux-mips64el': 0.25.10
+      '@esbuild/linux-ppc64': 0.25.10
+      '@esbuild/linux-riscv64': 0.25.10
+      '@esbuild/linux-s390x': 0.25.10
+      '@esbuild/linux-x64': 0.25.10
+      '@esbuild/netbsd-arm64': 0.25.10
+      '@esbuild/netbsd-x64': 0.25.10
+      '@esbuild/openbsd-arm64': 0.25.10
+      '@esbuild/openbsd-x64': 0.25.10
+      '@esbuild/openharmony-arm64': 0.25.10
+      '@esbuild/sunos-x64': 0.25.10
+      '@esbuild/win32-arm64': 0.25.10
+      '@esbuild/win32-ia32': 0.25.10
+      '@esbuild/win32-x64': 0.25.10
+
+  esm-env@1.2.2: {}
+
+  esrap@2.1.0:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  expect-type@1.2.2: {}
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  fsevents@2.3.3:
+    optional: true
+
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  indent-string@4.0.0: {}
+
+  is-potential-custom-element-name@1.0.1: {}
+
+  is-reference@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
+
+  js-tokens@4.0.0: {}
+
+  js-tokens@9.0.1: {}
+
+  jsdom@26.1.0:
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 4.0.0
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      is-potential-custom-element-name: 1.0.1
+      nwsapi: 2.2.22
+      parse5: 7.3.0
+      rrweb-cssom: 0.8.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.18.3
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  kleur@4.1.5: {}
+
+  locate-character@3.0.0: {}
+
+  loupe@3.2.1: {}
+
+  lru-cache@10.4.3: {}
+
+  lz-string@1.5.0: {}
+
+  magic-string@0.30.19:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  min-indent@1.0.1: {}
+
+  mri@1.2.0: {}
+
+  mrmime@2.0.1: {}
+
+  ms@2.1.3: {}
+
+  nanoid@3.3.11: {}
+
+  nwsapi@2.2.22: {}
+
+  open-props@1.7.16: {}
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
+  pathe@2.0.3: {}
+
+  pathval@2.0.1: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@4.0.3: {}
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prettier-plugin-svelte@3.4.0(prettier@3.6.2)(svelte@5.39.4):
+    dependencies:
+      prettier: 3.6.2
+      svelte: 5.39.4
+
+  prettier@3.6.2: {}
+
+  pretty-format@27.5.1:
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+
+  prism-themes@1.9.0: {}
+
+  prismjs@1.30.0: {}
+
+  punycode@2.3.1: {}
+
+  react-is@17.0.2: {}
+
+  readdirp@4.1.2: {}
+
+  redent@3.0.0:
+    dependencies:
+      indent-string: 4.0.0
+      strip-indent: 3.0.0
+
+  rollup@4.52.0:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.52.0
+      '@rollup/rollup-android-arm64': 4.52.0
+      '@rollup/rollup-darwin-arm64': 4.52.0
+      '@rollup/rollup-darwin-x64': 4.52.0
+      '@rollup/rollup-freebsd-arm64': 4.52.0
+      '@rollup/rollup-freebsd-x64': 4.52.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.52.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.52.0
+      '@rollup/rollup-linux-arm64-gnu': 4.52.0
+      '@rollup/rollup-linux-arm64-musl': 4.52.0
+      '@rollup/rollup-linux-loong64-gnu': 4.52.0
+      '@rollup/rollup-linux-ppc64-gnu': 4.52.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.52.0
+      '@rollup/rollup-linux-riscv64-musl': 4.52.0
+      '@rollup/rollup-linux-s390x-gnu': 4.52.0
+      '@rollup/rollup-linux-x64-gnu': 4.52.0
+      '@rollup/rollup-linux-x64-musl': 4.52.0
+      '@rollup/rollup-openharmony-arm64': 4.52.0
+      '@rollup/rollup-win32-arm64-msvc': 4.52.0
+      '@rollup/rollup-win32-ia32-msvc': 4.52.0
+      '@rollup/rollup-win32-x64-gnu': 4.52.0
+      '@rollup/rollup-win32-x64-msvc': 4.52.0
+      fsevents: 2.3.3
+
+  rrweb-cssom@0.8.0: {}
+
+  sade@1.8.1:
+    dependencies:
+      mri: 1.2.0
+
+  safer-buffer@2.1.2: {}
+
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
+  set-cookie-parser@2.7.1: {}
+
+  siginfo@2.0.0: {}
+
+  sirv@3.0.2:
+    dependencies:
+      '@polka/url': 1.0.0-next.29
+      mrmime: 2.0.1
+      totalist: 3.0.1
+
+  source-map-js@1.2.1: {}
+
+  stackback@0.0.2: {}
+
+  std-env@3.9.0: {}
+
+  strip-indent@3.0.0:
+    dependencies:
+      min-indent: 1.0.1
+
+  strip-literal@3.0.0:
+    dependencies:
+      js-tokens: 9.0.1
+
+  svelte-check@4.3.1(picomatch@4.0.3)(svelte@5.39.4)(typescript@5.9.2):
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.31
+      chokidar: 4.0.3
+      fdir: 6.5.0(picomatch@4.0.3)
+      picocolors: 1.1.1
+      sade: 1.8.1
+      svelte: 5.39.4
+      typescript: 5.9.2
+    transitivePeerDependencies:
+      - picomatch
+
+  svelte@5.39.4:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@sveltejs/acorn-typescript': 1.0.5(acorn@8.15.0)
+      '@types/estree': 1.0.8
+      acorn: 8.15.0
+      aria-query: 5.3.2
+      axobject-query: 4.1.0
+      clsx: 2.1.1
+      esm-env: 1.2.2
+      esrap: 2.1.0
+      is-reference: 3.0.3
+      locate-character: 3.0.0
+      magic-string: 0.30.19
+      zimmerframe: 1.1.4
+
+  svooltip@0.9.0(svelte@5.39.4):
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      svelte: 5.39.4
+
+  symbol-tree@3.2.4: {}
+
+  tinybench@2.9.0: {}
+
+  tinyexec@0.3.2: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  tinypool@1.1.1: {}
+
+  tinyrainbow@2.0.0: {}
+
+  tinyspy@4.0.4: {}
+
+  tldts-core@6.1.86: {}
+
+  tldts@6.1.86:
+    dependencies:
+      tldts-core: 6.1.86
+
+  totalist@3.0.1: {}
+
+  tough-cookie@5.1.2:
+    dependencies:
+      tldts: 6.1.86
+
+  tr46@5.1.1:
+    dependencies:
+      punycode: 2.3.1
+
+  typescript@5.9.2: {}
+
+  undici-types@7.12.0: {}
+
+  vite-node@3.2.4(@types/node@24.5.2):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 7.1.6(@types/node@24.5.2)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vite@7.1.6(@types/node@24.5.2):
+    dependencies:
+      esbuild: 0.25.10
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.52.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.5.2
+      fsevents: 2.3.3
+
+  vitefu@1.1.1(vite@7.1.6(@types/node@24.5.2)):
+    optionalDependencies:
+      vite: 7.1.6(@types/node@24.5.2)
+
+  vitest@3.2.4(@types/node@24.5.2)(jsdom@26.1.0):
+    dependencies:
+      '@types/chai': 5.2.2
+      '@vitest/expect': 3.2.4
+      '@vitest/mocker': 3.2.4(vite@7.1.6(@types/node@24.5.2))
+      '@vitest/pretty-format': 3.2.4
+      '@vitest/runner': 3.2.4
+      '@vitest/snapshot': 3.2.4
+      '@vitest/spy': 3.2.4
+      '@vitest/utils': 3.2.4
+      chai: 5.3.3
+      debug: 4.4.3
+      expect-type: 1.2.2
+      magic-string: 0.30.19
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.9.0
+      tinybench: 2.9.0
+      tinyexec: 0.3.2
+      tinyglobby: 0.2.15
+      tinypool: 1.1.1
+      tinyrainbow: 2.0.0
+      vite: 7.1.6(@types/node@24.5.2)
+      vite-node: 3.2.4(@types/node@24.5.2)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 24.5.2
+      jsdom: 26.1.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
+  webidl-conversions@7.0.0: {}
+
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@4.0.0: {}
+
+  whatwg-url@14.2.0:
+    dependencies:
+      tr46: 5.1.1
+      webidl-conversions: 7.0.0
+
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
+  ws@8.18.3: {}
+
+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
+  zimmerframe@1.1.4: {}
+
+  zod@4.1.6-beta.1: {}
diff --git a/src/components/AIGradientDialog.svelte b/src/components/AIGradientDialog.svelte
index 654d591..d7f4e4f 100644
--- a/src/components/AIGradientDialog.svelte
+++ b/src/components/AIGradientDialog.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount } from 'svelte';
+  import * as z from 'zod';
   import { gradient_type, gradient_space, gradient_stops } from '../store/gradient';
   import { linear_angle, linear_named_angle } from '../store/linear';
   import { radial_shape, radial_position, radial_named_position } from '../store/radial';
@@ -14,56 +15,35 @@
   let session = null;
   let modelAvailable = false;
   
-  // JSON Schema for gradient data
-  const gradientSchema = {
-    type: "object",
-    properties: {
-      gradient_type: {
-        type: "string",
-        enum: ["linear", "radial", "conic"]
-      },
-      gradient_space: {
-        type: "string",
-        enum: ["srgb", "srgb-linear", "lab", "oklab", "xyz", "xyz-d50", "xyz-d65", "hsl", "hwb", "lch", "oklch", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020"]
-      },
-      gradient_stops: {
-        type: "array",
-        items: {
-          type: "object",
-          properties: {
-            color: { type: "string" },
-            position: { type: "number", minimum: 0, maximum: 100 }
-          },
-          required: ["color", "position"]
-        },
-        minItems: 2
-      },
-      // Linear gradient specific
-      linear_angle: { type: "number" },
-      // Radial gradient specific
-      radial_shape: {
-        type: "string",
-        enum: ["circle", "ellipse"]
-      },
-      radial_position: {
-        type: "object",
-        properties: {
-          x: { type: "number", minimum: 0, maximum: 100 },
-          y: { type: "number", minimum: 0, maximum: 100 }
-        }
-      },
-      // Conic gradient specific
-      conic_angle: { type: "number" },
-      conic_position: {
-        type: "object",
-        properties: {
-          x: { type: "number", minimum: 0, maximum: 100 },
-          y: { type: "number", minimum: 0, maximum: 100 }
-        }
-      }
-    },
-    required: ["gradient_type", "gradient_stops"]
-  };
+  // Zod Schema for gradient data
+  const gradientZodSchema = z.object({
+    gradient_type: z.enum(["linear", "radial", "conic"]),
+    gradient_space: z.enum([
+      "srgb", "srgb-linear", "lab", "oklab", "xyz", "xyz-d50", "xyz-d65", 
+      "hsl", "hwb", "lch", "oklch", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020"
+    ]),
+    gradient_stops: z.array(z.object({
+      color: z.string(),
+      position: z.number().min(0).max(100)
+    })).min(2),
+    // Linear gradient specific
+    linear_angle: z.number().optional(),
+    // Radial gradient specific
+    radial_shape: z.enum(["circle", "ellipse"]).optional(),
+    radial_position: z.object({
+      x: z.number().min(0).max(100).optional(),
+      y: z.number().min(0).max(100).optional()
+    }).optional(),
+    // Conic gradient specific
+    conic_angle: z.number().optional(),
+    conic_position: z.object({
+      x: z.number().min(0).max(100).optional(),
+      y: z.number().min(0).max(100).optional()
+    }).optional()
+  });
+
+  // Convert Zod schema to JSON Schema for AI model
+  const gradientSchema = z.toJSONSchema(gradientZodSchema);
   
   onMount(async () => {
     // Check if the Prompt API is available

From 7d7f50fdaecde92dc848c74938ca0c8faaff7f3a Mon Sep 17 00:00:00 2001
From: Adam Argyle <atom@argyleink.com>
Date: Sun, 21 Sep 2025 19:29:23 -0700
Subject: [PATCH 4/6] buttons fixes, timing fixes to wait for user interaction

---
 src/components/AIGradientDialog.svelte | 92 +++++++++++++++-----------
 src/components/Gradient.svelte         | 13 +---
 2 files changed, 58 insertions(+), 47 deletions(-)

diff --git a/src/components/AIGradientDialog.svelte b/src/components/AIGradientDialog.svelte
index d7f4e4f..9d211a1 100644
--- a/src/components/AIGradientDialog.svelte
+++ b/src/components/AIGradientDialog.svelte
@@ -14,6 +14,8 @@
   /** @type {any} */
   let session = null;
   let modelAvailable = false;
+  /** @type {'unknown' | 'unavailable' | 'downloadable' | 'downloading' | 'available'} */
+  let availability = 'unknown';
   
   // Zod Schema for gradient data
   const gradientZodSchema = z.object({
@@ -51,40 +53,13 @@
     if ('LanguageModel' in window) {
       try {
         // @ts-ignore - LanguageModel is a new Chrome API
-        const availability = await window.LanguageModel.availability();
-        console.log('AI Model availability:', availability);
-        
-        if (availability !== 'unavailable') {
-          modelAvailable = true;
-          
-          // If model needs to be downloaded, we can show progress
-          if (availability === 'downloadable') {
-            loading = true;
-            error = 'AI model is being downloaded. This may take a few minutes...';
-            
-            // @ts-ignore - LanguageModel is a new Chrome API
-            session = await window.LanguageModel.create({
-          monitor(m) {
-            m.addEventListener('downloadprogress', (/** @type {any} */ e) => {
-                  const progress = Math.round(e.loaded * 100);
-                  error = `Downloading AI model: ${progress}%`;
-                });
-              }
-            });
-            
-            error = '';
-            loading = false;
-          } else if (availability === 'available') {
-            // Model is ready to use
-            // @ts-ignore - LanguageModel is a new Chrome API
-            session = await window.LanguageModel.create();
-          }
-        } else {
-          error = 'AI model is not available. Please check Chrome settings and hardware requirements.';
-        }
+        const avail = await window.LanguageModel.availability();
+        console.log('AI Model availability:', avail);
+        availability = /** @type {any} */ (avail);
+        modelAvailable = avail !== 'unavailable';
       } catch (err) {
-        console.error('Error initializing AI:', err);
-        error = 'Failed to initialize AI model. Make sure you are using Chrome 138+ with the Prompt API enabled.';
+        console.error('Error checking AI availability:', err);
+        error = 'Failed to check AI availability. Make sure you are using Chrome 138+ with the Prompt API enabled.';
       }
     } else {
       error = 'The Prompt API is not available in your browser. Please use Chrome 138+ and enable the API.';
@@ -105,22 +80,65 @@
     }
   }
   
+  async function ensureSession() {
+    if (session) return;
+    // @ts-ignore - LanguageModel is a new Chrome API
+    if (!('LanguageModel' in window)) {
+      throw new Error('The Prompt API is not available in your browser. Please use Chrome 138+ and enable the API.');
+    }
+    try {
+      // @ts-ignore - LanguageModel is a new Chrome API
+      const avail = availability === 'unknown' ? await window.LanguageModel.availability() : availability;
+      availability = /** @type {any} */ (avail);
+      if (avail === 'unavailable') {
+        throw new Error('AI model is not available. Please check Chrome settings and hardware requirements.');
+      }
+      if (avail === 'downloadable' || avail === 'downloading') {
+        loading = true;
+        error = 'Preparing AI model...';
+        // @ts-ignore - LanguageModel is a new Chrome API
+        session = await window.LanguageModel.create({
+          monitor(m) {
+            m.addEventListener('downloadprogress', (/** @type {any} */ e) => {
+              const progress = Math.round(e.loaded * 100);
+              error = `Downloading AI model: ${progress}%`;
+            });
+          }
+        });
+        error = '';
+        loading = false;
+      } else {
+        // available
+        loading = true;
+        // @ts-ignore - LanguageModel is a new Chrome API
+        session = await window.LanguageModel.create();
+        loading = false;
+      }
+    } catch (err) {
+      console.error('Error preparing AI model:', err);
+      throw err instanceof Error ? err : new Error(String(err));
+    }
+  }
+  
   async function generateGradient() {
-    if (!userPrompt.trim() || !session) return;
+    if (!userPrompt.trim()) return;
     
     loading = true;
     error = '';
     
     try {
+      // Lazily create session on first use (user gesture), including downloads
+      await ensureSession();
+      
       // Create a detailed prompt for the AI
       const systemPrompt = `You are a CSS gradient generator. Convert the user's description into gradient data.
       
       Guidelines:
-      - For color descriptions like "sunset", "ocean", "forest", use appropriate colors
+      - For color descriptions like \"sunset\", \"ocean\", \"forest\" use appropriate colors
       - Default to linear gradients unless the user specifies radial or conic
       - Use modern color spaces like oklch for vibrant gradients when appropriate
       - Position stops evenly if not specified
-      - For linear gradients, interpret directions like "left to right" as angle 90, "top to bottom" as 180
+      - For linear gradients, interpret directions like \"left to right\" as angle 90, \"top to bottom\" as 180
       - For radial gradients, default to ellipse shape centered
       - Return valid CSS color values (hex, rgb, hsl, oklch, etc.)
       
@@ -266,7 +284,7 @@
         <button 
           on:click={generateGradient} 
           disabled={loading || !userPrompt.trim()}
-          class="primary"
+          type="submit"
         >
           {#if loading}
             Generating...
diff --git a/src/components/Gradient.svelte b/src/components/Gradient.svelte
index b0ef3e5..275e2df 100644
--- a/src/components/Gradient.svelte
+++ b/src/components/Gradient.svelte
@@ -1102,21 +1102,14 @@ let user_gradient = $derived(gensyntax[$gradient_type](
   }
   
   .ai-button {
-    position: relative;
-    inline-size: var(--size-7);
-    overflow: hidden;
+    inline-size: var(--size-6);
     border-radius: var(--radius-round);
     padding-inline: 0;
     aspect-ratio: 1;
-    border: none;
-    box-shadow: 0 0 0 var(--_highlight-size) var(--_highlight);
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    background-image: url(https://api.iconify.design/material-symbols:auto-awesome.svg?color=%23ffffff);
+    background-image: url(https://api.iconify.design/material-symbols:auto-awesome.svg?color=%23777777);
     background-position: center;
     background-repeat: no-repeat;
-    background-size: 75%;
-    cursor: pointer;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    background-size: 50%;
   }
   
   .ai-button:hover {

From 3e6c1550d0af068018c187e2d27d533227b92077 Mon Sep 17 00:00:00 2001
From: Adam Argyle <atom@argyleink.com>
Date: Sun, 21 Sep 2025 19:43:12 -0700
Subject: [PATCH 5/6] fixes dark mode

---
 src/components/AIGradientDialog.svelte | 123 ++++++++++---------------
 1 file changed, 49 insertions(+), 74 deletions(-)

diff --git a/src/components/AIGradientDialog.svelte b/src/components/AIGradientDialog.svelte
index 9d211a1..8348f6f 100644
--- a/src/components/AIGradientDialog.svelte
+++ b/src/components/AIGradientDialog.svelte
@@ -18,16 +18,23 @@
   let availability = 'unknown';
   
   // Zod Schema for gradient data
+  const stopItemSchema = z.object({
+    kind: z.literal('stop').optional(),
+    color: z.string(),
+    position: z.number().min(0).max(100)
+  })
+  const hintItemSchema = z.object({
+    kind: z.literal('hint'),
+    percentage: z.number().min(0).max(100)
+  })
   const gradientZodSchema = z.object({
     gradient_type: z.enum(["linear", "radial", "conic"]),
     gradient_space: z.enum([
       "srgb", "srgb-linear", "lab", "oklab", "xyz", "xyz-d50", "xyz-d65", 
       "hsl", "hwb", "lch", "oklch", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020"
     ]),
-    gradient_stops: z.array(z.object({
-      color: z.string(),
-      position: z.number().min(0).max(100)
-    })).min(2),
+    // An ordered list mixing color stops and transition hints
+    gradient_stops: z.array(z.union([stopItemSchema, hintItemSchema])).min(2),
     // Linear gradient specific
     linear_angle: z.number().optional(),
     // Radial gradient specific
@@ -165,31 +172,34 @@
         gradient_space.set(gradientData.gradient_space);
       }
       
-      // Update gradient stops
+      // Update gradient stops (supports both color stops and transition hints)
       if (gradientData.gradient_stops && Array.isArray(gradientData.gradient_stops)) {
         // Import Color for color conversion
         const Color = (await import('colorjs.io')).default;
         
-        // Ensure stops have proper structure and convert colors to OKLCH
-        const formattedStops = gradientData.gradient_stops.map((/** @type {any} */ stop) => {
-          let oklchColor;
-          try {
-            // Convert any color format to OKLCH
-            const color = new Color(stop.color);
-            oklchColor = color.to('oklch').toString();
-          } catch (err) {
-            console.warn('Failed to convert color to OKLCH:', stop.color, err);
-            // Fallback to a default OKLCH color if conversion fails
-            oklchColor = 'oklch(70% 0.15 180)'; // Default blue-ish color
+        const formattedStops = [];
+        for (const item of gradientData.gradient_stops) {
+          if (item && item.kind === 'hint') {
+            // Transition hint between adjacent color stops
+            formattedStops.push({ kind: 'hint', percentage: item.percentage });
+          } else if (item) {
+            // Treat as a color stop (with or without explicit kind)
+            let oklchColor;
+            try {
+              const color = new Color(item.color);
+              oklchColor = color.to('oklch').toString();
+            } catch (err) {
+              console.warn('Failed to convert color to OKLCH:', item.color, err);
+              oklchColor = 'oklch(70% 0.15 180)';
+            }
+            formattedStops.push({
+              kind: 'stop',
+              color: oklchColor,
+              position1: item.position,
+              position2: item.position,
+            });
           }
-          
-          return {
-            color: oklchColor,
-            position1: stop.position,
-            position2: stop.position,
-            kind: 'stop'
-          };
-        });
+        }
         gradient_stops.set(formattedStops);
       }
     
@@ -308,18 +318,17 @@
 
 <style>
   .ai-dialog {
-    border: 1px solid var(--gray-4);
-    border-radius: 8px;
+    border: 1px solid var(--surface-2);
+    border-radius: var(--radius-3);
     padding: 0;
-    width: 90vw;
-    max-width: 500px;
-    background: var(--gray-1);
-    color: var(--gray-12);
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+    inline-size: 90vw;
+    max-inline-size: var(--size-content-2);
+    background: var(--surface-1);
+    box-shadow: var(--shadow-6);
   }
   
   .ai-dialog::backdrop {
-    background: rgba(0, 0, 0, 0.5);
+    background: radial-gradient(circle, #0001, #000e);
   }
   
   .dialog-content {
@@ -334,12 +343,11 @@
   
   .description {
     margin: 0 0 1rem 0;
-    color: var(--gray-11);
   }
   
   .examples {
-    background: var(--gray-2);
-    border: 1px solid var(--gray-4);
+    background: var(--surface-2);
+    border: 1px solid var(--surface-3);
     border-radius: 6px;
     padding: 0.75rem;
     margin-bottom: 1rem;
@@ -349,13 +357,11 @@
     margin: 0 0 0.5rem 0;
     font-size: 0.875rem;
     font-weight: 500;
-    color: var(--gray-11);
   }
   
   .examples ul {
     margin: 0;
     padding-left: 1.25rem;
-    color: var(--gray-10);
     font-size: 0.875rem;
   }
   
@@ -366,14 +372,12 @@
   textarea {
     width: 100%;
     padding: 0.75rem;
-    border: 1px solid var(--gray-6);
     border-radius: 6px;
-    background: var(--gray-0);
-    color: var(--gray-12);
+    background: var(--surface-3);
     font-family: inherit;
     font-size: 0.95rem;
     resize: vertical;
-    min-height: 100px;
+    min-height: 3lh;
   }
   
   textarea:focus {
@@ -386,6 +390,10 @@
     opacity: 0.5;
     cursor: not-allowed;
   }
+
+  button[type="submit"] {
+    --link: light-dark(var(--indigo-6), var(--indigo-3));
+  }
   
   .error-message {
     background: var(--red-2);
@@ -403,39 +411,6 @@
     margin-top: 1.5rem;
   }
   
-  button {
-    padding: 0.5rem 1rem;
-    border: 1px solid var(--gray-6);
-    border-radius: 6px;
-    background: var(--gray-0);
-    color: var(--gray-12);
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.15s ease;
-  }
-  
-  button:hover:not(:disabled) {
-    background: var(--gray-2);
-    border-color: var(--gray-7);
-  }
-  
-  button.primary {
-    background: var(--blue-9);
-    color: white;
-    border-color: var(--blue-9);
-  }
-  
-  button.primary:hover:not(:disabled) {
-    background: var(--blue-10);
-    border-color: var(--blue-10);
-  }
-  
-  button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  
   .loading {
     display: flex;
     flex-direction: column;

From c2efe612f8654b5d786b5befd34052357ba66bcc Mon Sep 17 00:00:00 2001
From: Adam Argyle <atom@argyleink.com>
Date: Sun, 21 Sep 2025 19:59:55 -0700
Subject: [PATCH 6/6] fixes missing gradient hints

but also, this code is looking way more complex than it needs to be
---
 src/components/AIGradientDialog.svelte | 146 +++++++++++++++++++------
 1 file changed, 115 insertions(+), 31 deletions(-)

diff --git a/src/components/AIGradientDialog.svelte b/src/components/AIGradientDialog.svelte
index 8348f6f..1a5aed8 100644
--- a/src/components/AIGradientDialog.svelte
+++ b/src/components/AIGradientDialog.svelte
@@ -5,6 +5,7 @@
   import { linear_angle, linear_named_angle } from '../store/linear';
   import { radial_shape, radial_position, radial_named_position } from '../store/radial';
   import { conic_angle, conic_position, conic_named_position } from '../store/conic';
+  import { updateStops } from '../utils/stops.ts';
   
   /** @type {HTMLDialogElement | null} */
   let dialog = null;
@@ -18,9 +19,13 @@
   let availability = 'unknown';
   
   // Zod Schema for gradient data
+  const colorString = z.string().regex(
+    /^(#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b|(?:oklch|oklab|lab|lch|hsl|hsla|hwb|rgb|rgba|color)\s*\()/i,
+    'color must be a valid CSS color string (hex or function)'
+  )
   const stopItemSchema = z.object({
     kind: z.literal('stop').optional(),
-    color: z.string(),
+    color: colorString,
     position: z.number().min(0).max(100)
   })
   const hintItemSchema = z.object({
@@ -36,7 +41,7 @@
     // An ordered list mixing color stops and transition hints
     gradient_stops: z.array(z.union([stopItemSchema, hintItemSchema])).min(2),
     // Linear gradient specific
-    linear_angle: z.number().optional(),
+    linear_angle: z.number().min(0).max(360).optional(),
     // Radial gradient specific
     radial_shape: z.enum(["circle", "ellipse"]).optional(),
     radial_position: z.object({
@@ -44,7 +49,7 @@
       y: z.number().min(0).max(100).optional()
     }).optional(),
     // Conic gradient specific
-    conic_angle: z.number().optional(),
+    conic_angle: z.number().min(0).max(360).optional(),
     conic_position: z.object({
       x: z.number().min(0).max(100).optional(),
       y: z.number().min(0).max(100).optional()
@@ -137,6 +142,29 @@
       // Lazily create session on first use (user gesture), including downloads
       await ensureSession();
       
+      // Helpers
+      const clamp01 = (n) => Math.max(0, Math.min(100, Number(n)));
+      const clamp360 = (n) => {
+        const v = Number(n);
+        if (!Number.isFinite(v)) return 0;
+        let x = v % 360;
+        if (x < 0) x += 360;
+        return x;
+      };
+      function sanitizeJsonLike(text) {
+        if (typeof text !== 'string') return text;
+        // Strip code fences and surrounding text, keep the outermost JSON object/array
+        const start = text.indexOf('{');
+        const startArr = text.indexOf('[');
+        const s = start >= 0 && (startArr < 0 || start < startArr) ? start : startArr;
+        if (s < 0) return text.trim();
+        let end = text.lastIndexOf('}');
+        let endArr = text.lastIndexOf(']');
+        const e = end >= 0 && (endArr < 0 || end > endArr) ? end : endArr;
+        if (e < 0) return text.slice(s).trim();
+        return text.slice(s, e + 1).trim();
+      }
+      
       // Create a detailed prompt for the AI
       const systemPrompt = `You are a CSS gradient generator. Convert the user's description into gradient data.
       
@@ -145,19 +173,42 @@
       - Default to linear gradients unless the user specifies radial or conic
       - Use modern color spaces like oklch for vibrant gradients when appropriate
       - Position stops evenly if not specified
+      - Interleave transition hints between adjacent color stops (as {\"kind\":\"hint\",\"percentage\":number})
       - For linear gradients, interpret directions like \"left to right\" as angle 90, \"top to bottom\" as 180
       - For radial gradients, default to ellipse shape centered
       - Return valid CSS color values (hex, rgb, hsl, oklch, etc.)
+      - Allowed positions and percentages are 0–100 inclusive
+      - Allowed angles are 0–360 inclusive
       
       User request: ${userPrompt}`;
       
-      // Use the Prompt API with structured output
-      const result = await session.prompt(systemPrompt, {
-        responseConstraint: gradientSchema
-      });
+      let result;
+      try {
+        // Try structured output first
+        result = await session.prompt(systemPrompt, {
+          responseConstraint: gradientSchema
+        });
+      } catch (err) {
+        // Fallback: request plain JSON without constraint to avoid UnknownError
+        console.warn('Structured Prompt failed, retrying without constraint:', err);
+        const fallbackPrompt = systemPrompt + `\n\nOutput ONLY JSON with this exact shape (no markdown fences, no extra text):\n{\n  \"gradient_type\": \"linear|radial|conic\",\n  \"gradient_space\": \"oklab|oklch|srgb|display-p3|...\",\n  \"gradient_stops\": [\n    {\"kind\":\"stop\",\"color\":\"...\",\"position\":number},\n    {\"kind\":\"hint\",\"percentage\":number},\n    ...\n  ],\n  \"linear_angle\": number (optional),\n  \"radial_shape\": \"circle|ellipse\" (optional),\n  \"radial_position\": {\"x\":number,\"y\":number} (optional),\n  \"conic_angle\": number (optional),\n  \"conic_position\": {\"x\":number,\"y\":number} (optional)\n}`;
+        result = await session.prompt(fallbackPrompt);
+      }
       
-      // Parse the JSON response
-      const gradientData = JSON.parse(result);
+      // Parse the response (could be an object or a string)
+      let gradientData = null;
+      if (typeof result === 'string') {
+        const cleaned = sanitizeJsonLike(result);
+        try {
+          gradientData = JSON.parse(cleaned);
+        } catch (e) {
+          throw new Error('AI returned non-JSON output. Please try again.');
+        }
+      } else if (result && typeof result === 'object') {
+        gradientData = result;
+      } else {
+        throw new Error('Unexpected AI response format.');
+      }
       // console.log('Generated gradient data:', gradientData);
       
       // Update stores directly with the AI-generated gradient data
@@ -177,35 +228,64 @@
         // Import Color for color conversion
         const Color = (await import('colorjs.io')).default;
         
-        const formattedStops = [];
-        for (const item of gradientData.gradient_stops) {
-          if (item && item.kind === 'hint') {
-            // Transition hint between adjacent color stops
-            formattedStops.push({ kind: 'hint', percentage: item.percentage });
-          } else if (item) {
+        
+        // First pass: normalize items, drop invalid colors, clamp positions
+        const normalized = [];
+        for (const raw of gradientData.gradient_stops) {
+          if (!raw) continue;
+          if (raw.kind === 'hint') {
+            // Clamp to [0, 100]
+            const pct = clamp01(raw.percentage);
+            normalized.push({ kind: 'hint', percentage: pct });
+          } else {
             // Treat as a color stop (with or without explicit kind)
-            let oklchColor;
             try {
-              const color = new Color(item.color);
-              oklchColor = color.to('oklch').toString();
+              const color = new Color(raw.color);
+              const oklchColor = color.to('oklch').toString();
+              const pos = clamp01(raw.position);
+              normalized.push({ kind: 'stop', color: oklchColor, position1: pos, position2: pos });
             } catch (err) {
-              console.warn('Failed to convert color to OKLCH:', item.color, err);
-              oklchColor = 'oklch(70% 0.15 180)';
+              console.warn('Dropping invalid color from AI output:', raw.color, err);
             }
-            formattedStops.push({
-              kind: 'stop',
-              color: oklchColor,
-              position1: item.position,
-              position2: item.position,
-            });
           }
         }
-        gradient_stops.set(formattedStops);
+        
+        // Ensure we start and end with a color stop and have at least two stops
+        const stopsOnly = normalized.filter((i) => i.kind === 'stop');
+        if (stopsOnly.length < 2) {
+          // Fallback to a simple gradient if AI output was unusable
+          gradient_stops.set([
+            { kind: 'stop', color: 'oklch(80% 0.2 20)', position1: 0, position2: 0 },
+            { kind: 'hint', percentage: 50 },
+            { kind: 'stop', color: 'oklch(60% 0.2 200)', position1: 100, position2: 100 },
+          ]);
+          return;
+        }
+        
+        // Second pass: interleave hints between each adjacent pair of stops if missing
+        const interleaved = [];
+        for (let i = 0; i < normalized.length; i++) {
+          const cur = normalized[i];
+          interleaved.push(cur);
+          if (cur.kind === 'stop') {
+            const next = normalized[i + 1];
+            const hasNextStop = normalized.slice(i + 1).find((x) => x.kind === 'stop');
+            const nextIsHint = next?.kind === 'hint';
+            // Insert a hint if the next item is not a hint but there is another stop later
+            if (!nextIsHint && hasNextStop) {
+              interleaved.push({ kind: 'hint', percentage: null });
+            }
+          }
+        }
+        
+        // Final normalization using existing utility to compute auto positions and default hint percentages
+        const finalList = updateStops(interleaved);
+        gradient_stops.set(finalList);
       }
     
       // Handle linear gradient properties
       if (gradientData.gradient_type === 'linear' && gradientData.linear_angle !== undefined) {
-        linear_angle.set(String(gradientData.linear_angle));
+        linear_angle.set(String(clamp360(gradientData.linear_angle)));
         linear_named_angle.set('--'); // Set to custom angle indicator
       }
       
@@ -215,7 +295,9 @@
           radial_shape.set(gradientData.radial_shape);
         }
         if (gradientData.radial_position) {
-          radial_position.set(gradientData.radial_position);
+          const rx = gradientData.radial_position.x;
+          const ry = gradientData.radial_position.y;
+          radial_position.set({ x: rx == null ? null : clamp01(rx), y: ry == null ? null : clamp01(ry) });
           radial_named_position.set('--'); // Set to custom position indicator
         } else {
           // Default to center if no position specified
@@ -227,10 +309,12 @@
       // Handle conic gradient properties
       if (gradientData.gradient_type === 'conic') {
         if (gradientData.conic_angle !== undefined) {
-          conic_angle.set(String(gradientData.conic_angle));
+          conic_angle.set(String(clamp360(gradientData.conic_angle)));
         }
         if (gradientData.conic_position) {
-          conic_position.set(gradientData.conic_position);
+          const cx = gradientData.conic_position.x;
+          const cy = gradientData.conic_position.y;
+          conic_position.set({ x: cx == null ? null : clamp01(cx), y: cy == null ? null : clamp01(cy) });
           conic_named_position.set('--'); // Set to custom position indicator
         } else {
           // Default to center if no position specified