@pixerate/editor-svelte 0.105.0 → 0.106.0

package/dist/color/DualColorPicker.svelte

@@ -0,0 +1,296 @@
+<script lang="ts">
+  import ColorPicker from './ColorPicker.svelte';
+  import {
+    type ColorScheme,
+    type ColorValue,
+    type DualColor,
+    DEFAULT_SCHEME_SURFACES,
+    normalizeDualColor,
+    resolveColor,
+    setDualColorSide,
+    deriveDualColor,
+    checkDualColorContrast,
+    isSameInBothSchemes
+  } from '@pixerate/editor/color';
+
+  interface Props {
+    /** Dual colour value (CSS string, light-dark(), or { light, dark }) */
+    value?: ColorValue;
+    /** Called when the dual colour value changes */
+    onchange?: (value: DualColor) => void;
+    onChange?: (value: DualColor) => void;
+    /** Controlled active scheme mode ('light' | 'dark') */
+    scheme?: ColorScheme;
+    /** Called when the user toggles active scheme tab */
+    onschemechange?: (scheme: ColorScheme) => void;
+    onSchemeChange?: (scheme: ColorScheme) => void;
+    /** Expected background surfaces for derivation and preview */
+    surfaces?: DualColor;
+    /** Optional background colour to evaluate contrast against in both modes */
+    contrastAgainst?: ColorValue;
+    /** Whether alpha slider is shown */
+    alpha?: boolean;
+    /** Preset swatches */
+    swatches?: readonly string[];
+    /** Whether picker is disabled */
+    disabled?: boolean;
+    /** Additional CSS class name */
+    class?: string;
+    className?: string;
+    /** Gesture callbacks */
+    ongesturestart?: () => void;
+    onGestureStart?: () => void;
+    ongestureend?: () => void;
+    onGestureEnd?: () => void;
+  }
+
+  let {
+    value = DEFAULT_SCHEME_SURFACES,
+    onchange,
+    onChange,
+    scheme: controlledScheme,
+    onschemechange,
+    onSchemeChange,
+    surfaces = DEFAULT_SCHEME_SURFACES,
+    contrastAgainst,
+    alpha = false,
+    swatches,
+    disabled = false,
+    class: classProp,
+    className: classNameProp,
+    ongesturestart,
+    onGestureStart,
+    ongestureend,
+    onGestureEnd
+  }: Props = $props();
+
+  const className = $derived(classProp || classNameProp || '');
+
+  const triggerChange = (val: DualColor) => {
+    onchange?.(val);
+    onChange?.(val);
+  };
+
+  const triggerSchemeChange = (s: ColorScheme) => {
+    onschemechange?.(s);
+    onSchemeChange?.(s);
+  };
+
+  const triggerGestureStart = () => {
+    ongesturestart?.();
+    onGestureStart?.();
+  };
+
+  const triggerGestureEnd = () => {
+    ongestureend?.();
+    onGestureEnd?.();
+  };
+
+  // Internal active scheme state
+  let internalScheme = $state<ColorScheme>('light');
+  const activeScheme = $derived(controlledScheme ?? internalScheme);
+
+  // Normalised dual value
+  const dual = $derived<DualColor>(
+    normalizeDualColor(value) ?? DEFAULT_SCHEME_SURFACES
+  );
+
+  // Same in both mode state
+  let sameInBoth = $state<boolean>(false);
+  let initializedSame = false;
+
+  $effect(() => {
+    if (!initializedSame) {
+      sameInBoth = isSameInBothSchemes(dual);
+      initializedSame = true;
+    } else if (isSameInBothSchemes(dual)) {
+      sameInBoth = true;
+    }
+  });
+
+  const handleSchemeSelect = (nextScheme: ColorScheme) => {
+    if (disabled) return;
+    internalScheme = nextScheme;
+    triggerSchemeChange(nextScheme);
+  };
+
+  const handleToggleSameInBoth = (checked: boolean) => {
+    if (disabled) return;
+    sameInBoth = checked;
+    if (checked) {
+      const activeColor = activeScheme === 'dark' ? dual.dark : dual.light;
+      triggerChange({ light: activeColor, dark: activeColor });
+    }
+  };
+
+  const handleDerive = () => {
+    if (disabled) return;
+    triggerGestureStart();
+    const currentActive = activeScheme === 'dark' ? dual.dark : dual.light;
+    const derived = deriveDualColor(currentActive, {
+      from: activeScheme,
+      // An unreadable surfaces prop falls back to the defaults rather than throwing.
+      surfaces: normalizeDualColor(surfaces) ?? DEFAULT_SCHEME_SURFACES
+    });
+    triggerChange(derived);
+    triggerGestureEnd();
+  };
+
+  const handleInnerChange = (hex: string) => {
+    if (sameInBoth) {
+      triggerChange({ light: hex, dark: hex });
+    } else {
+      const updated = setDualColorSide(dual, activeScheme, hex);
+      triggerChange(updated);
+    }
+  };
+
+  const activeColor = $derived(activeScheme === 'dark' ? dual.dark : dual.light);
+  const activeContrastTarget = $derived(
+    contrastAgainst ? resolveColor(contrastAgainst, activeScheme) ?? undefined : undefined
+  );
+
+  const dualContrast = $derived(
+    // An unreadable contrastAgainst shows no badges rather than throwing during render.
+    contrastAgainst && normalizeDualColor(contrastAgainst)
+      ? checkDualColorContrast(dual, contrastAgainst)
+      : null
+  );
+
+  const CHECKERBOARD_BG =
+    'linear-gradient(45deg, #2a2e39 25%, transparent 25%), linear-gradient(-45deg, #2a2e39 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #2a2e39 75%), linear-gradient(-45deg, transparent 75%, #2a2e39 75%)';
+</script>
+
+<div
+  class="pixerate-dual-color-picker {className}"
+  style="display: flex; flex-direction: column; gap: 12px; padding: 12px; background: #1a1d24; color: #e2e8f0; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); width: 260px; font-family: system-ui, -apple-system, sans-serif; font-size: 13px; box-sizing: border-box;"
+>
+  <!-- Segmented Control -->
+  <div
+    role="tablist"
+    aria-label="Color scheme mode"
+    style="display: flex; background: #111318; border-radius: 6px; padding: 2px; gap: 2px;"
+  >
+    <button
+      type="button"
+      role="tab"
+      aria-selected={activeScheme === 'light'}
+      onclick={() => handleSchemeSelect('light')}
+      {disabled}
+      style="flex: 1; padding: 6px 8px; border: none; border-radius: 4px; background: {activeScheme === 'light' ? '#2d3342' : 'transparent'}; color: {activeScheme === 'light' ? '#ffffff' : '#8c95a6'}; font-weight: {activeScheme === 'light' ? 600 : 400}; cursor: {disabled ? 'not-allowed' : 'pointer'}; font-size: 12px; transition: all 0.15s ease;"
+    >
+      Light
+    </button>
+    <button
+      type="button"
+      role="tab"
+      aria-selected={activeScheme === 'dark'}
+      onclick={() => handleSchemeSelect('dark')}
+      {disabled}
+      style="flex: 1; padding: 6px 8px; border: none; border-radius: 4px; background: {activeScheme === 'dark' ? '#2d3342' : 'transparent'}; color: {activeScheme === 'dark' ? '#ffffff' : '#8c95a6'}; font-weight: {activeScheme === 'dark' ? 600 : 400}; cursor: {disabled ? 'not-allowed' : 'pointer'}; font-size: 12px; transition: all 0.15s ease;"
+    >
+      Dark
+    </button>
+  </div>
+
+  <!-- Dual Preview Swatches -->
+  <div style="display: flex; gap: 8px;">
+    <!-- Light preview button -->
+    <button
+      type="button"
+      onclick={() => handleSchemeSelect('light')}
+      {disabled}
+      title="Light scheme colour preview"
+      style="flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: {activeScheme === 'light' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.2)'}; border: 1px solid {activeScheme === 'light' ? '#4f46e5' : 'rgba(255,255,255,0.08)'}; border-radius: 6px; cursor: {disabled ? 'not-allowed' : 'pointer'}; text-align: left;"
+    >
+      <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #8c95a6;">
+        <span>Light</span>
+        <span style="font-family: monospace; font-size: 10px;">{dual.light}</span>
+      </div>
+      <div
+        style="height: 24px; border-radius: 4px; background-image: {CHECKERBOARD_BG}; background-size: 8px 8px; overflow: hidden; border: 1px solid rgba(0,0,0,0.15);"
+      >
+        <div style="width: 100%; height: 100%; background: {dual.light};"></div>
+      </div>
+    </button>
+
+    <!-- Dark preview button -->
+    <button
+      type="button"
+      onclick={() => handleSchemeSelect('dark')}
+      {disabled}
+      title="Dark scheme colour preview"
+      style="flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: {activeScheme === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.2)'}; border: 1px solid {activeScheme === 'dark' ? '#4f46e5' : 'rgba(255,255,255,0.08)'}; border-radius: 6px; cursor: {disabled ? 'not-allowed' : 'pointer'}; text-align: left;"
+    >
+      <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #8c95a6;">
+        <span>Dark</span>
+        <span style="font-family: monospace; font-size: 10px;">{dual.dark}</span>
+      </div>
+      <div
+        style="height: 24px; border-radius: 4px; background-image: {CHECKERBOARD_BG}; background-size: 8px 8px; overflow: hidden; border: 1px solid rgba(0,0,0,0.15);"
+      >
+        <div style="width: 100%; height: 100%; background: {dual.dark};"></div>
+      </div>
+    </button>
+  </div>
+
+  <!-- Dual Toolbar: Same in both toggle and Derive button -->
+  <div style="display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #cbd5e1;">
+    <label style="display: flex; align-items: center; gap: 6px; cursor: {disabled ? 'not-allowed' : 'pointer'}; user-select: none;">
+      <input
+        type="checkbox"
+        checked={sameInBoth}
+        onchange={(e) => handleToggleSameInBoth(e.currentTarget.checked)}
+        {disabled}
+        style="margin: 0; cursor: {disabled ? 'not-allowed' : 'pointer'};"
+      />
+      Same in both
+    </label>
+
+    <button
+      type="button"
+      onclick={handleDerive}
+      {disabled}
+      title="Automatically derive the opposing scheme colour preserving contrast"
+      style="padding: 2px 8px; font-size: 11px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; color: #cbd5e1; cursor: {disabled ? 'not-allowed' : 'pointer'};"
+    >
+      Derive {activeScheme === 'light' ? 'Dark' : 'Light'}
+    </button>
+  </div>
+
+  <!-- Embedded Headless ColorPicker for the active scheme side -->
+  <ColorPicker
+    value={activeColor}
+    onchange={handleInnerChange}
+    contrastAgainst={activeContrastTarget}
+    {alpha}
+    {swatches}
+    {disabled}
+    ongesturestart={triggerGestureStart}
+    ongestureend={triggerGestureEnd}
+  />
+
+  <!-- Optional Dual Contrast Badge Summary -->
+  {#if dualContrast}
+    <div
+      style="display: flex; gap: 8px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 11px;"
+    >
+      <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;">
+        <span style="color: #8c95a6;">Light:</span>
+        <span
+          style="padding: 1px 4px; border-radius: 3px; font-weight: 600; font-family: monospace; background: {dualContrast.light.level === 'fail' ? '#7f1d1d' : '#14532d'}; color: {dualContrast.light.level === 'fail' ? '#fca5a5' : '#86efac'};"
+        >
+          {dualContrast.light.ratio}:1 ({dualContrast.light.level.toUpperCase()})
+        </span>
+      </div>
+      <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;">
+        <span style="color: #8c95a6;">Dark:</span>
+        <span
+          style="padding: 1px 4px; border-radius: 3px; font-weight: 600; font-family: monospace; background: {dualContrast.dark.level === 'fail' ? '#7f1d1d' : '#14532d'}; color: {dualContrast.dark.level === 'fail' ? '#fca5a5' : '#86efac'};"
+        >
+          {dualContrast.dark.ratio}:1 ({dualContrast.dark.level.toUpperCase()})
+        </span>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/color/DualColorPicker.svelte.d.ts

@@ -0,0 +1,34 @@
+import { type ColorScheme, type ColorValue, type DualColor } from '@pixerate/editor/color';
+interface Props {
+    /** Dual colour value (CSS string, light-dark(), or { light, dark }) */
+    value?: ColorValue;
+    /** Called when the dual colour value changes */
+    onchange?: (value: DualColor) => void;
+    onChange?: (value: DualColor) => void;
+    /** Controlled active scheme mode ('light' | 'dark') */
+    scheme?: ColorScheme;
+    /** Called when the user toggles active scheme tab */
+    onschemechange?: (scheme: ColorScheme) => void;
+    onSchemeChange?: (scheme: ColorScheme) => void;
+    /** Expected background surfaces for derivation and preview */
+    surfaces?: DualColor;
+    /** Optional background colour to evaluate contrast against in both modes */
+    contrastAgainst?: ColorValue;
+    /** Whether alpha slider is shown */
+    alpha?: boolean;
+    /** Preset swatches */
+    swatches?: readonly string[];
+    /** Whether picker is disabled */
+    disabled?: boolean;
+    /** Additional CSS class name */
+    class?: string;
+    className?: string;
+    /** Gesture callbacks */
+    ongesturestart?: () => void;
+    onGestureStart?: () => void;
+    ongestureend?: () => void;
+    onGestureEnd?: () => void;
+}
+declare const DualColorPicker: import("svelte").Component<Props, {}, "">;
+type DualColorPicker = ReturnType<typeof DualColorPicker>;
+export default DualColorPicker;

package/dist/color/colorScheme.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { ColorScheme, ColorValue } from '@pixerate/editor/color';
+export interface ColorSchemeOptions {
+    /** Explicit scheme override ('light' or 'dark') */
+    override?: ColorScheme | null;
+    /** Attribute on document.documentElement to monitor for theme changes (default: 'data-theme') */
+    attribute?: string;
+}
+export interface ColorSchemeStore {
+    readonly current: ColorScheme;
+    destroy(): void;
+}
+/**
+ * Headless Svelte 5 rune tracking active colour scheme across media query and document attribute.
+ */
+export declare function createColorScheme(options?: ColorSchemeOptions): ColorSchemeStore;
+/**
+ * Pure helper resolving a ColorValue against a specific scheme.
+ */
+export declare function resolvedColor(value: ColorValue, scheme: ColorScheme): string | null;

package/dist/color/colorScheme.svelte.js

@@ -0,0 +1,76 @@
+import { resolveColor } from '@pixerate/editor/color';
+/**
+ * Headless Svelte 5 rune tracking active colour scheme across media query and document attribute.
+ */
+export function createColorScheme(options = {}) {
+    let system = $state('light');
+    let attrValue = $state(null);
+    const attributeName = options.attribute ?? 'data-theme';
+    function readSystem() {
+        if (typeof window === 'undefined' || !window.matchMedia)
+            return 'light';
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    function readAttribute() {
+        if (typeof document === 'undefined')
+            return null;
+        const val = document.documentElement.getAttribute(attributeName)?.toLowerCase();
+        if (val === 'dark' || val === 'light')
+            return val;
+        return null;
+    }
+    system = readSystem();
+    attrValue = readAttribute();
+    let mqlListener = null;
+    let observer = null;
+    if (typeof window !== 'undefined' && window.matchMedia) {
+        const mql = window.matchMedia('(prefers-color-scheme: dark)');
+        mqlListener = (e) => {
+            system = e.matches ? 'dark' : 'light';
+        };
+        if (mql.addEventListener) {
+            mql.addEventListener('change', mqlListener);
+        }
+        else {
+            mql.addListener(mqlListener);
+        }
+    }
+    if (typeof document !== 'undefined' && typeof MutationObserver !== 'undefined') {
+        observer = new MutationObserver(() => {
+            attrValue = readAttribute();
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: [attributeName]
+        });
+    }
+    function destroy() {
+        if (mqlListener && typeof window !== 'undefined' && window.matchMedia) {
+            const mql = window.matchMedia('(prefers-color-scheme: dark)');
+            if (mql.removeEventListener) {
+                mql.removeEventListener('change', mqlListener);
+            }
+            else {
+                mql.removeListener(mqlListener);
+            }
+            mqlListener = null;
+        }
+        if (observer) {
+            observer.disconnect();
+            observer = null;
+        }
+    }
+    const current = $derived(options.override ?? attrValue ?? system);
+    return {
+        get current() {
+            return current;
+        },
+        destroy
+    };
+}
+/**
+ * Pure helper resolving a ColorValue against a specific scheme.
+ */
+export function resolvedColor(value, scheme) {
+    return resolveColor(value, scheme);
+}

package/dist/color/index.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'svelte';
+import type ColorPickerComponent from './ColorPicker.svelte';
+import type DualColorPickerComponent from './DualColorPicker.svelte';
+export { default as ColorPicker } from './ColorPicker.svelte';
+export { default as DualColorPicker } from './DualColorPicker.svelte';
+export type ColorPickerProps = ComponentProps<typeof ColorPickerComponent>;
+export type DualColorPickerProps = ComponentProps<typeof DualColorPickerComponent>;
+export { createColorScheme, resolvedColor, type ColorSchemeOptions, type ColorSchemeStore } from './colorScheme.svelte.js';
+export * from '@pixerate/editor/color';

package/dist/color/index.js

@@ -0,0 +1,5 @@
+export { default as ColorPicker } from './ColorPicker.svelte';
+export { default as DualColorPicker } from './DualColorPicker.svelte';
+export { createColorScheme, resolvedColor } from './colorScheme.svelte.js';
+// Re-export core colour module for consumer convenience
+export * from '@pixerate/editor/color';

package/dist/gradient/FillPicker.svelte

@@ -0,0 +1,236 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import type { FillMode } from './types.js';
+	import {
+		GradientController,
+		createGradient,
+		gradientToCss,
+		parseCssGradient
+	} from '@pixerate/editor/gradient';
+	import { formatHex, mixColors, parseColor, resolveColor } from '@pixerate/editor/color';
+	import ColorPicker from '../color/ColorPicker.svelte';
+	import GradientEditor from './GradientEditor.svelte';
+
+	interface Props {
+		/** Active CSS colour (hex/rgb/hsl etc.) or CSS gradient string. */
+		value: string;
+		/** Called when the fill value changes. */
+		onchange?: (value: string) => void;
+		onChange?: (value: string) => void;
+		/** Called when a continuous pointer drag starts. */
+		ongesturestart?: () => void;
+		onGestureStart?: () => void;
+		/** Called when a continuous pointer drag ends. */
+		ongestureend?: () => void;
+		onGestureEnd?: () => void;
+		/** Allowed fill modes. Default: ['solid', 'gradient']. */
+		modes?: readonly FillMode[];
+		/** Whether the alpha channel slider is shown on ColorPicker. Default: false. */
+		alpha?: boolean;
+		/** Preset swatches for ColorPicker. */
+		swatches?: readonly string[];
+		/** Whether the gradient editor shows preset buttons. Default: true. */
+		showPresets?: boolean;
+		/** Whether the gradient editor shows the CSS output with a copy button. Default: false. */
+		showCss?: boolean;
+		/** Additional CSS class names. */
+		class?: string;
+		className?: string;
+		/** Whether the picker is disabled. */
+		disabled?: boolean;
+	}
+
+	let {
+		value,
+		onchange,
+		onChange,
+		ongesturestart,
+		onGestureStart,
+		ongestureend,
+		onGestureEnd,
+		modes = ['solid', 'gradient'],
+		alpha = false,
+		swatches,
+		showPresets = true,
+		showCss = false,
+		class: klass = '',
+		className = '',
+		disabled = false
+	}: Props = $props();
+
+	function emitChange(v: string) {
+		onchange?.(v);
+		onChange?.(v);
+	}
+
+	function emitGestureStart() {
+		ongesturestart?.();
+		onGestureStart?.();
+	}
+
+	function emitGestureEnd() {
+		ongestureend?.();
+		onGestureEnd?.();
+	}
+
+	function createDefaultGradientFromColor(colorStr: string) {
+		const parsed = parseColor(colorStr);
+		const baseHex = parsed ? formatHex(parsed) : '#3b82f6';
+		const lighterHex = mixColors(baseHex, '#ffffff', 0.35, { space: 'oklab' }) ?? '#ffffff';
+		return createGradient([baseHex, lighterHex]);
+	}
+
+	// The controller and mode start from the first value; the effect below follows later ones.
+	const initialValue = untrack(() => value);
+	const initialGradient = parseCssGradient(initialValue);
+	const allows = (m: FillMode) => untrack(() => modes).includes(m);
+
+	let mode = $state<FillMode>(
+		initialGradient && allows('gradient') ? 'gradient' : allows('solid') ? 'solid' : 'gradient'
+	);
+	let isDragging = false;
+	// The last CSS this picker emitted, so the echo of our own change isn't loaded back in.
+	let emitted: string | null = null;
+	let loading = false;
+
+	const controller = new GradientController({
+		value: initialGradient ?? createDefaultGradientFromColor(initialValue),
+		readOnly: () => disabled,
+		onChange: (g) => {
+			if (loading || mode !== 'gradient') return;
+			emit(gradientToCss(g));
+		}
+	});
+
+	function emit(v: string) {
+		emitted = v;
+		emitChange(v);
+	}
+
+	function loadQuietly(next: unknown) {
+		loading = true;
+		try {
+			controller.load(next);
+		} finally {
+			loading = false;
+		}
+	}
+
+	// Follow the incoming value, without an undo step, unless it is our own change coming back.
+	$effect(() => {
+		const incoming = parseCssGradient(value);
+		const allowsGradient = modes.includes('gradient');
+		const allowsSolid = modes.includes('solid');
+		untrack(() => {
+			if (isDragging) return;
+			if (incoming && allowsGradient) {
+				mode = 'gradient';
+				if (value !== emitted) loadQuietly(incoming);
+			} else if (!incoming && allowsSolid) {
+				mode = 'solid';
+			}
+		});
+	});
+
+	function switchToSolid() {
+		if (mode === 'solid') return;
+		mode = 'solid';
+		const first = controller.getGradient().stops[0]?.color ?? '#000000';
+		// A dual stop has no single solid equivalent; keep its light half.
+		emit(resolveColor(first, 'light') ?? '#000000');
+	}
+
+	function switchToGradient() {
+		if (mode === 'gradient') return;
+		mode = 'gradient';
+		loadQuietly(createDefaultGradientFromColor(value));
+		emit(gradientToCss(controller.getGradient()));
+	}
+
+	function gradientGestureStart() {
+		isDragging = true;
+		emitGestureStart();
+	}
+
+	function gradientGestureEnd() {
+		isDragging = false;
+		emitGestureEnd();
+	}
+
+	const buttonClass =
+		'inline-flex h-7 items-center justify-center rounded border border-border bg-background px-2.5 text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground';
+</script>
+
+{#if modes.length === 1 && modes[0] === 'solid'}
+	<div class="{klass} {className}" data-testid="fill-picker">
+		<ColorPicker
+			{value}
+			onchange={emitChange}
+			ongesturestart={emitGestureStart}
+			ongestureend={emitGestureEnd}
+			{alpha}
+			{swatches}
+			{disabled}
+		/>
+	</div>
+{:else if modes.length === 1 && modes[0] === 'gradient'}
+	<div class="{klass} {className}" data-testid="fill-picker">
+		<GradientEditor
+			{controller}
+			{showPresets}
+			{showCss}
+			ongesturestart={gradientGestureStart}
+			ongestureend={gradientGestureEnd}
+		/>
+	</div>
+{:else}
+	<div class="flex flex-col gap-2.5 {klass} {className}" data-testid="fill-picker">
+		<!-- Mode toggle tabs -->
+		<div class="flex rounded-md border border-border p-0.5">
+			<button
+				type="button"
+				class="flex-1 {buttonClass}"
+				aria-pressed={mode === 'solid'}
+				{disabled}
+				onclick={switchToSolid}
+			>
+				Solid
+			</button>
+			<button
+				type="button"
+				class="flex-1 {buttonClass}"
+				aria-pressed={mode === 'gradient'}
+				{disabled}
+				onclick={switchToGradient}
+			>
+				Gradient
+			</button>
+		</div>
+
+		{#if mode === 'solid'}
+			<ColorPicker
+				{value}
+				onchange={emitChange}
+				ongesturestart={() => {
+					isDragging = true;
+					emitGestureStart();
+				}}
+				ongestureend={() => {
+					isDragging = false;
+					emitGestureEnd();
+				}}
+				{alpha}
+				{swatches}
+				{disabled}
+			/>
+		{:else}
+			<GradientEditor
+			{controller}
+			{showPresets}
+			{showCss}
+			ongesturestart={gradientGestureStart}
+			ongestureend={gradientGestureEnd}
+		/>
+		{/if}
+	</div>
+{/if}