expo-interface 0.1.0 → 0.2.0

package/src/collapsible/index.android.tsx

@@ -0,0 +1,34 @@
+import type {CollapsibleProps} from './types';
+
+import {Collapsible as UICollapsible} from '@expo/ui';
+import {Column} from '@expo/ui/jetpack-compose';
+import {fillMaxWidth, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {useColor} from '../theme';
+import {useExpanded} from './shared';
+
+/**
+ * Android renders `@expo/ui`'s universal `Collapsible`, which is already the
+ * Material 3 Expressive expandable list item (rounded card whose container
+ * tints from transparent to `surfaceContainer` while open, animated chevron).
+ * It reads the seeded Host palette, so it matches the rest of the screen.
+ */
+export function Collapsible({
+  label,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  children,
+  testID,
+}: CollapsibleProps) {
+  const [open, setOpen] = useExpanded(expanded, defaultExpanded, onExpandedChange);
+  const labelColor = useColor('label');
+  const collapsible = (
+    <UICollapsible isOpen={open} onOpenChange={setOpen} label={label} labelStyle={{color: labelColor}}>
+      {children}
+    </UICollapsible>
+  );
+  // `@expo/ui`'s universal Collapsible takes no testID, so a full-width
+  // Compose wrapper carries it.
+  if (testID == null) return collapsible;
+  return <Column modifiers={[fillMaxWidth(), testIDModifier(testID)]}>{collapsible}</Column>;
+}

package/src/collapsible/index.ios.tsx

@@ -0,0 +1,31 @@
+import type {CollapsibleProps} from './types';
+
+import {DisclosureGroup, Text} from '@expo/ui/swift-ui';
+import {foregroundStyle} from '@expo/ui/swift-ui/modifiers';
+import {useColor} from '../theme';
+import {useExpanded} from './shared';
+
+/**
+ * iOS renders SwiftUI's `DisclosureGroup`: a row with the label and a
+ * trailing chevron that rotates open, with the content revealed below. Drop
+ * it straight into a `FieldGroup.Section`.
+ */
+export function Collapsible({
+  label,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  children,
+  testID,
+}: CollapsibleProps) {
+  const [open, setOpen] = useExpanded(expanded, defaultExpanded, onExpandedChange);
+  const labelColor = useColor('label');
+  return (
+    <DisclosureGroup isExpanded={open} onIsExpandedChange={setOpen} testID={testID}>
+      <DisclosureGroup.Label>
+        <Text modifiers={[foregroundStyle(labelColor)]}>{label}</Text>
+      </DisclosureGroup.Label>
+      {children}
+    </DisclosureGroup>
+  );
+}

package/src/collapsible/index.tsx

@@ -0,0 +1,41 @@
+import './collapsible.css';
+import type {SyntheticEvent} from 'react';
+import type {CollapsibleProps} from './types';
+import {Label} from '../typography';
+import {useExpanded} from './shared';
+
+/**
+ * On web the disclosure is a real `<details>` element: the header is its
+ * `<summary>` with a trailing chevron that rotates while open, mirroring the
+ * iOS `DisclosureGroup` row.
+ */
+export function Collapsible({
+  label,
+  expanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  children,
+  testID,
+}: CollapsibleProps) {
+  const [open, setOpen] = useExpanded(expanded, defaultExpanded, onExpandedChange);
+  const onToggle = (event: SyntheticEvent<HTMLDetailsElement>) => {
+    const next = event.currentTarget.open;
+    if (next === open) return;
+    // Controlled: snap the DOM back to the prop so `expanded` stays the
+    // source of truth — React re-applies the parent's decision on the next
+    // render, or the element stays put when the change was ignored.
+    if (expanded !== undefined) event.currentTarget.open = open;
+    setOpen(next);
+  };
+  return (
+    <details className="ui-collapsible" open={open} onToggle={onToggle} data-testid={testID}>
+      <summary className="ui-collapsible__summary">
+        <Label color="label" style={{flexShrink: 1}}>{label}</Label>
+        <svg className="ui-collapsible__chevron" width="8" height="14" viewBox="0 0 8 14" fill="none" aria-hidden="true">
+          <path d="M1.5 1.5 L6.5 7 L1.5 12.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </summary>
+      <div className="ui-collapsible__content">{children}</div>
+    </details>
+  );
+}

package/src/collapsible/shared.ts

@@ -0,0 +1,21 @@
+import {useCallback, useState} from 'react';
+
+/**
+ * Bridges controlled and uncontrolled expansion, mirroring `useSelectedValue`.
+ */
+export function useExpanded(
+  expanded: boolean | undefined,
+  defaultExpanded: boolean,
+  onChange: ((expanded: boolean) => void) | undefined,
+): [boolean, (next: boolean) => void] {
+  const [internal, setInternal] = useState(defaultExpanded);
+  const current = expanded ?? internal;
+  const setExpanded = useCallback(
+    (next: boolean) => {
+      if (expanded === undefined) setInternal(next);
+      onChange?.(next);
+    },
+    [expanded, onChange],
+  );
+  return [current, setExpanded];
+}

package/src/collapsible/types.ts

@@ -0,0 +1,24 @@
+import type {ReactNode} from 'react';
+
+/**
+ * Cross-platform disclosure: a tappable header that shows or hides content.
+ *
+ * Bridges the SwiftUI `DisclosureGroup` on iOS, the Jetpack Compose
+ * expandable list item on Android (via `@expo/ui`'s universal `Collapsible`),
+ * and the HTML `<details>` element on web. May be used controlled
+ * (`expanded` + `onExpandedChange`) or uncontrolled (`defaultExpanded`).
+ */
+export interface CollapsibleProps {
+  /** Text rendered in the tappable header. */
+  label: string;
+  /** Whether the content is shown (controlled). */
+  expanded?: boolean;
+  /** Initial state when uncontrolled. */
+  defaultExpanded?: boolean;
+  /** Called when the user toggles the header. */
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Content shown while expanded. Must be native (`@expo/ui`) content on iOS/Android. */
+  children?: ReactNode;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+}

package/src/color-picker/color-picker.css

@@ -0,0 +1,66 @@
+/*
+ * The iOS ColorPicker row: label on the leading edge, the 28pt color well on
+ * the trailing edge. The well is a 3pt rainbow ring (yellow up, red right,
+ * blue down, green left), a 2pt transparent gap and an 18pt swatch.
+ */
+.ui-color-picker {
+  -webkit-appearance: none;
+  appearance: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-label);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.ui-color-picker:disabled {
+  cursor: default;
+}
+
+.ui-color-picker--disabled {
+  opacity: 0.4;
+}
+
+.ui-color-picker__well {
+  position: relative;
+  flex-shrink: 0;
+  display: block;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 0deg,
+    hsl(60 100% 50%),
+    hsl(0 100% 50%) 60deg,
+    hsl(300 100% 50%) 120deg,
+    hsl(240 100% 50%) 180deg,
+    hsl(180 100% 50%) 240deg,
+    hsl(120 100% 50%) 300deg,
+    hsl(60 100% 50%)
+  );
+  -webkit-mask: radial-gradient(circle, transparent 10.5px, #000 11px);
+  mask: radial-gradient(circle, transparent 10.5px, #000 11px);
+}
+
+.ui-color-picker__swatch {
+  position: absolute;
+  inset: 5px;
+  display: block;
+  border-radius: 50%;
+  background: var(--ui-color-picker-value);
+}
+
+.ui-color-picker:focus-visible {
+  outline: 2px solid var(--color-tint);
+  outline-offset: 2px;
+  border-radius: 4px;
+}

package/src/color-picker/index.android.tsx

@@ -0,0 +1,117 @@
+import type {ColorPickerProps} from './types';
+import type {ModifierConfig} from '@expo/ui/jetpack-compose/modifiers';
+
+import {useEffect, useRef, useState} from 'react';
+import {StyleSheet, useWindowDimensions, View} from 'react-native';
+import {Image} from 'expo-image';
+import {
+  Column,
+  Host,
+  ModalBottomSheet,
+  RNHostView,
+  Row,
+  Spacer,
+  Text,
+  useMaterialColors,
+  type ModalBottomSheetRef,
+} from '@expo/ui/jetpack-compose';
+import {alpha, clickable, fillMaxWidth, padding, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {ColorPickerSheet} from './sheet';
+import {parseColor, ringSvg, svgDataUri, toCss, toHex, useColorValue, well} from './shared';
+
+const RING = svgDataUri(ringSvg());
+/** Horizontal inset of the sheet content (the `@expo/ui` `BottomSheet` default). */
+const SHEET_INSET = 16;
+
+/**
+ * Android redraws the iOS row: a Compose `Row` with the label and, hosted as
+ * a React Native view, the 28dp color well (rainbow ring, transparent gap,
+ * color swatch). Tapping the row opens the iOS picker redrawn in a Material
+ * `ModalBottomSheet`, fully expanded and with the sheet's own swipe gestures
+ * off so that dragging across the spectrum and sliders stays with the picker.
+ * The sheet lives in the same hosted subtree as the well, so the row stays a
+ * plain Compose child of its `Host`.
+ */
+export function ColorPicker({
+  label,
+  value,
+  onValueChange,
+  supportsOpacity = true,
+  disabled,
+  testID,
+}: ColorPickerProps) {
+  const colors = useMaterialColors();
+  const {width} = useWindowDimensions();
+  const [open, setOpen] = useState(false);
+  const [current, setCurrent] = useColorValue(value, onValueChange, supportsOpacity);
+  const modifiers: ModifierConfig[] = [fillMaxWidth()];
+  if (!disabled) modifiers.push(clickable(() => setOpen(true)));
+  if (testID) modifiers.push(testIDModifier(testID));
+
+  return (
+    <Row verticalAlignment="center" horizontalArrangement="spaceBetween" modifiers={modifiers}>
+      {label != null ? (
+        <Text color={disabled ? colors.onSurfaceVariant : colors.onSurface}>{label}</Text>
+      ) : <Spacer/>}
+      <RNHostView matchContents modifiers={disabled ? [alpha(0.4)] : []}>
+        {/* `box-none` lets the tap fall through to the Compose row's `clickable`. */}
+        <View style={styles.well} pointerEvents="box-none" accessibilityLabel={`Selected color ${toHex(current, supportsOpacity)}`}>
+          <View style={styles.face} pointerEvents="none">
+            <Image source={{uri: RING}} style={StyleSheet.absoluteFill} contentFit="fill"/>
+            <View style={[styles.swatch, {backgroundColor: toCss(current)}]}/>
+          </View>
+          <PickerSheet open={open} onClose={() => setOpen(false)}>
+            <ColorPickerSheet
+              title={label ?? 'Colors'}
+              value={toHex(current, true)}
+              supportsOpacity={supportsOpacity}
+              onValueChange={hex => setCurrent(parseColor(hex))}
+              onClose={() => setOpen(false)}
+              width={width - SHEET_INSET * 2}
+              testID={testID ? `${testID}-sheet` : undefined}
+            />
+          </PickerSheet>
+        </View>
+      </RNHostView>
+    </Row>
+  );
+}
+
+/**
+ * The Material bottom sheet hosting the picker, mounted while `open` and
+ * unmounted after its hide animation (the `@expo/ui` `BottomSheet` pattern).
+ */
+function PickerSheet({open, onClose, children}: React.PropsWithChildren<{open: boolean; onClose: () => void}>) {
+  const ref = useRef<ModalBottomSheetRef>(null);
+  const [mounted, setMounted] = useState(open);
+  if (open && !mounted) setMounted(true);
+  useEffect(() => {
+    if (open) return;
+    let cancelled = false;
+    ref.current?.hide().then(() => {
+      if (!cancelled) setMounted(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+  if (!mounted) return null;
+  return (
+    <Host style={styles.sheetHost} pointerEvents="none">
+      <ModalBottomSheet ref={ref} onDismissRequest={onClose} skipPartiallyExpanded sheetGesturesEnabled={false}>
+        <Column modifiers={[padding(SHEET_INSET, 0, SHEET_INSET, 0)]}>
+          <RNHostView matchContents>{children as React.ReactElement}</RNHostView>
+        </Column>
+      </ModalBottomSheet>
+    </Host>
+  );
+}
+
+const inner = well.size - 2 * (well.ring + well.gap);
+
+const styles = StyleSheet.create({
+  well: {width: well.size, height: well.size},
+  face: {position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center'},
+  swatch: {width: inner, height: inner, borderRadius: inner / 2},
+  sheetHost: {position: 'absolute'},
+});

package/src/color-picker/index.ios.tsx

@@ -0,0 +1,33 @@
+import type {ColorPickerProps} from './types';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+
+import {ColorPicker as SwiftUIColorPicker} from '@expo/ui/swift-ui';
+import {disabled as disabledMod} from '@expo/ui/swift-ui/modifiers';
+
+/**
+ * iOS renders SwiftUI's `ColorPicker`: the label with the rainbow-ringed
+ * color well at the trailing edge, which opens the system color picker.
+ * SwiftUI reports the selection as `#RRGGBBAA` when opacity is supported and
+ * `#RRGGBB` otherwise; the other platforms mirror both formats.
+ */
+export function ColorPicker({
+  label,
+  value,
+  onValueChange,
+  supportsOpacity = true,
+  disabled,
+  testID,
+}: ColorPickerProps) {
+  const modifiers: ViewModifier[] = [];
+  if (disabled) modifiers.push(disabledMod(true));
+  return (
+    <SwiftUIColorPicker
+      label={label}
+      selection={value}
+      supportsOpacity={supportsOpacity}
+      onSelectionChange={onValueChange}
+      modifiers={modifiers}
+      testID={testID}
+    />
+  );
+}

package/src/color-picker/index.tsx

@@ -0,0 +1,62 @@
+import './color-picker.css';
+import type {CSSProperties} from 'react';
+import type {ColorPickerProps} from './types';
+
+import {useState} from 'react';
+import {StyleSheet, type TextStyle} from 'react-native';
+import {Label} from '../typography';
+import {Sheet} from '../sheet';
+import {flatten} from '../theme';
+import {ColorPickerSheet} from './sheet';
+import {parseColor, toCss, toHex, useColorValue} from './shared';
+
+/**
+ * On web the row is a native `<button>` holding the label and the color
+ * well — a conic rainbow ring around the selected color, as on iOS — which
+ * opens the iOS picker redrawn in the kit's `Sheet`.
+ */
+export function ColorPicker({
+  label,
+  value,
+  onValueChange,
+  supportsOpacity = true,
+  disabled,
+  testID,
+  style,
+}: ColorPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [current, setCurrent] = useColorValue(value, onValueChange, supportsOpacity);
+  const vars = {
+    '--ui-color-picker-value': toCss(current),
+    ...flatten(StyleSheet.flatten(style) as TextStyle),
+  } as CSSProperties;
+  return (
+    <>
+      <button
+        type="button"
+        className={['ui-color-picker', disabled && 'ui-color-picker--disabled'].filter(Boolean).join(' ')}
+        style={vars}
+        disabled={disabled}
+        aria-label={label == null ? 'Color' : undefined}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={() => setOpen(true)}
+        data-testid={testID}>
+        {label != null ? <Label color="label" style={{flexShrink: 1}}>{label}</Label> : null}
+        <span className="ui-color-picker__well" aria-hidden="true">
+          <span className="ui-color-picker__swatch"/>
+        </span>
+      </button>
+      <Sheet isPresented={open} onDismiss={() => setOpen(false)}>
+        <ColorPickerSheet
+          title={label ?? 'Colors'}
+          value={toHex(current, true)}
+          supportsOpacity={supportsOpacity}
+          onValueChange={hex => setCurrent(parseColor(hex))}
+          onClose={() => setOpen(false)}
+          testID={testID ? `${testID}-sheet` : undefined}
+        />
+      </Sheet>
+    </>
+  );
+}

package/src/color-picker/shared.ts

@@ -0,0 +1,204 @@
+import {useCallback, useState} from 'react';
+
+/** Color channels: `r`, `g`, `b` in `0…255`, `a` in `0…1`. */
+export interface RGBA {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+/** Geometry of the iOS color well, in points: a 28pt circle ringed by hues. */
+export const well = {size: 28, ring: 3, gap: 2} as const;
+
+/** iOS color grid: 12 hue columns, a gray row above 9 lightness rows. */
+export const grid = {columns: 12, rows: 10} as const;
+
+const HUES = [0, 30, 55, 80, 120, 160, 190, 210, 240, 270, 300, 330];
+
+const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
+const byte = (n: number) => clamp(Math.round(n), 0, 255);
+const hex2 = (n: number) => byte(n).toString(16).padStart(2, '0').toUpperCase();
+
+/** Parses `#RGB`, `#RGBA`, `#RRGGBB` or `#RRGGBBAA`; anything else is opaque black. */
+export function parseColor(input: string): RGBA {
+  const hex = /^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(input.trim())?.[1];
+  if (!hex) return {r: 0, g: 0, b: 0, a: 1};
+  const long = hex.length <= 4 ? hex.split('').map(c => c + c).join('') : hex;
+  const channel = (i: number) => parseInt(long.slice(i, i + 2), 16);
+  return {
+    r: channel(0),
+    g: channel(2),
+    b: channel(4),
+    a: long.length === 8 ? channel(6) / 255 : 1,
+  };
+}
+
+/** Formats as `#RRGGBBAA` when `alpha` is set, `#RRGGBB` otherwise (the iOS formats). */
+export function toHex({r, g, b, a}: RGBA, alpha: boolean): string {
+  const rgb = `#${hex2(r)}${hex2(g)}${hex2(b)}`;
+  return alpha ? `${rgb}${hex2(a * 255)}` : rgb;
+}
+
+/** CSS `rgba()` for the color, usable in DOM and React Native styles. */
+export function toCss({r, g, b, a}: RGBA): string {
+  return `rgba(${byte(r)}, ${byte(g)}, ${byte(b)}, ${Math.round(a * 1000) / 1000})`;
+}
+
+/** Hue `0…360`, saturation and value `0…1`. */
+export function rgbToHsv({r, g, b}: Pick<RGBA, 'r' | 'g' | 'b'>): {h: number; s: number; v: number} {
+  const max = Math.max(r, g, b) / 255;
+  const min = Math.min(r, g, b) / 255;
+  const delta = max - min;
+  let h = 0;
+  if (delta > 0) {
+    if (max === r / 255) h = ((g - b) / 255 / delta) % 6;
+    else if (max === g / 255) h = (b - r) / 255 / delta + 2;
+    else h = (r - g) / 255 / delta + 4;
+    h = (h * 60 + 360) % 360;
+  }
+  return {h, s: max === 0 ? 0 : delta / max, v: max};
+}
+
+export function hsvToRgb(h: number, s: number, v: number): Pick<RGBA, 'r' | 'g' | 'b'> {
+  const hue = ((h % 360) + 360) % 360;
+  const c = v * s;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = v - c;
+  const sector = Math.floor(hue / 60);
+  const [r, g, b] = [
+    [c, x, 0],
+    [x, c, 0],
+    [0, c, x],
+    [0, x, c],
+    [x, 0, c],
+    [c, 0, x],
+  ][sector];
+  return {r: byte((r + m) * 255), g: byte((g + m) * 255), b: byte((b + m) * 255)};
+}
+
+export function hslToRgb(h: number, s: number, l: number): Pick<RGBA, 'r' | 'g' | 'b'> {
+  const v = l + s * Math.min(l, 1 - l);
+  return hsvToRgb(h, v === 0 ? 0 : 2 * (1 - l / v), v);
+}
+
+/** Color of a cell of the iOS grid: grays on the first row, then hues from light to dark. */
+export function gridColor(row: number, column: number): Pick<RGBA, 'r' | 'g' | 'b'> {
+  if (row === 0) {
+    const level = byte(255 * (1 - column / (grid.columns - 1)));
+    return {r: level, g: level, b: level};
+  }
+  const lightness = 0.9 - ((row - 1) / (grid.rows - 2)) * 0.75;
+  return hslToRgb(HUES[column], 1, lightness);
+}
+
+/**
+ * Color at a point of the iOS spectrum: hue runs down the vertical axis, and
+ * the horizontal axis goes from white through the pure hue to black.
+ */
+export function spectrumColor(x: number, y: number): Pick<RGBA, 'r' | 'g' | 'b'> {
+  const fx = clamp(x, 0, 1);
+  const h = clamp(y, 0, 1) * 360;
+  return fx <= 0.5 ? hsvToRgb(h, fx * 2, 1) : hsvToRgb(h, 1, (1 - fx) * 2);
+}
+
+/** Closest spectrum point (`0…1` each) for a color. */
+export function spectrumPosition(color: Pick<RGBA, 'r' | 'g' | 'b'>): {x: number; y: number} {
+  const {h, s, v} = rgbToHsv(color);
+  return {x: v < 1 ? 1 - v / 2 : s / 2, y: h / 360};
+}
+
+/** Base64 of an ASCII string (no `btoa` on every React Native runtime). */
+function base64(ascii: string): string {
+  const table = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+  let out = '';
+  for (let i = 0; i < ascii.length; i += 3) {
+    const a = ascii.charCodeAt(i);
+    const b = ascii.charCodeAt(i + 1);
+    const c = ascii.charCodeAt(i + 2);
+    const bits = (a << 16) | ((b || 0) << 8) | (c || 0);
+    out += table[bits >> 18] + table[(bits >> 12) & 63];
+    out += Number.isNaN(b) ? '=' : table[(bits >> 6) & 63];
+    out += Number.isNaN(c) ? '=' : table[bits & 63];
+  }
+  return out;
+}
+
+export function svgDataUri(svg: string): string {
+  return `data:image/svg+xml;base64,${base64(svg)}`;
+}
+
+/** Hue at a clockwise angle from the top of the well ring (yellow up, red right, blue down, green left). */
+export const ringHue = (angle: number) => (60 - angle + 360) % 360;
+
+/** The well's rainbow ring as an SVG: 60 arc segments around a transparent center. */
+export function ringSvg(): string {
+  const r = 50 - (well.ring / well.size) * 50;
+  const stroke = (well.ring / well.size) * 100;
+  const step = 6;
+  const point = (deg: number) => {
+    const a = ((deg - 90) * Math.PI) / 180;
+    return `${(50 + r * Math.cos(a)).toFixed(2)} ${(50 + r * Math.sin(a)).toFixed(2)}`;
+  };
+  let paths = '';
+  for (let deg = 0; deg < 360; deg += step) {
+    const {r: cr, g: cg, b: cb} = hsvToRgb(ringHue(deg + step / 2), 1, 1);
+    paths += `<path d="M${point(deg)}A${r} ${r} 0 0 1 ${point(deg + step + 0.5)}" stroke="rgb(${cr},${cg},${cb})"/>`;
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" stroke-width="${stroke}">${paths}</svg>`;
+}
+
+/** The spectrum as an SVG: a vertical hue gradient under a white→clear→black one. */
+export function spectrumSvg(): string {
+  const hues = [0, 60, 120, 180, 240, 300, 360]
+    .map(h => {
+      const {r, g, b} = hsvToRgb(h, 1, 1);
+      return `<stop offset="${h / 3.6}%" stop-color="rgb(${r},${g},${b})"/>`;
+    })
+    .join('');
+  return (
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">' +
+    `<linearGradient id="h" x1="0" y1="0" x2="0" y2="1">${hues}</linearGradient>` +
+    '<linearGradient id="l" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#fff"/>' +
+    '<stop offset="0.5" stop-color="#fff" stop-opacity="0"/><stop offset="0.5" stop-color="#000" stop-opacity="0"/>' +
+    '<stop offset="1" stop-color="#000"/></linearGradient>' +
+    '<rect width="100" height="100" fill="url(#h)"/><rect width="100" height="100" fill="url(#l)"/></svg>'
+  );
+}
+
+/** Checkerboard shown behind translucent colors. */
+export function checkerSvg(): string {
+  return (
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">' +
+    '<rect width="16" height="16" fill="#fff"/><rect width="8" height="8" fill="#d9d9d9"/>' +
+    '<rect x="8" y="8" width="8" height="8" fill="#d9d9d9"/></svg>'
+  );
+}
+
+/**
+ * Controlled color state for the pickers: the picked color is kept locally so
+ * the sheet follows the user's drag even before the parent re-renders, and
+ * every change is reported in the iOS hex format.
+ */
+export function useColorValue(
+  value: string,
+  onValueChange: (hex: string) => void,
+  supportsOpacity: boolean,
+): [RGBA, (next: RGBA) => void] {
+  const [current, setCurrent] = useState(() => parseColor(value));
+  // Re-derive the local color when the controlling parent changes `value`.
+  const [seen, setSeen] = useState(value);
+  if (seen !== value) {
+    setSeen(value);
+    setCurrent(parseColor(value));
+  }
+  const update = useCallback(
+    (next: RGBA) => {
+      const color = supportsOpacity ? next : {...next, a: 1};
+      setCurrent(color);
+      onValueChange(toHex(color, supportsOpacity));
+    },
+    [onValueChange, supportsOpacity],
+  );
+  return [current, update];
+}