# XWUIGradientPicker

An interactive fill editor for solid, linear, radial, and conic gradients, with draggable colour stops, per-type controls (angle, shape, size, centre), and a live preview swatch. Factored out of XWUISpreadsheet so any paint app, CSS designer, or theme editor can embed it. The value is a discriminated `FillStyle` union; read it back with `getValue()` or push a new one with `setValue()`. Wire `onChange` / `onApply` / `onCancel`, hide the built-in button bar with `hideActions`, and use the exported `gradientFillStyleToCSS()` helper to render the same gradient elsewhere.

## Usage

```ts
import { XWUIGradientPicker } from './XWUIGradientPicker';

const picker = new XWUIGradientPicker(
  container,
  {
    value: {
      type: 'linear',
      angle: 90,
      stops: [
        { color: '#3b82f6', position: 0 },
        { color: '#a855f7', position: 100 },
      ],
    },
  },
  { hideActions: false, onChange: (fill) => preview(fill) }
);

const current = picker.getValue();
```

## Background fill

A linear gradient picker seeded with a blue-to-purple ramp that logs every change.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Background fill
description: A linear gradient picker seeded with a blue-to-purple ramp that logs every change.
```

## Spotlight

A radial gradient picker seeded with a warm yellow-to-orange glow, with the built-in action bar hidden.

```example
file: examples/RadialSwatch.ts
html: examples/RadialSwatch.html
title: Spotlight
description: A radial gradient picker seeded with a warm yellow-to-orange glow, with the built-in action bar hidden.
```

## Hue wheel

A conic gradient picker cycling cyan, purple, and pink that logs the fill when Apply is pressed.

```example
file: examples/ConicWheel.ts
html: examples/ConicWheel.html
title: Hue wheel
description: A conic gradient picker cycling cyan, purple, and pink that logs the fill when Apply is pressed.
```

```api
```