@spear-ai/spectral 1.17.10 → 1.18.0

package/dist/DirectionalColorWheel/directionalColorWheelMath.js

@@ -0,0 +1,220 @@
+'use client';
+//#region src/components/DirectionalColorWheel/directionalColorWheelMath.ts
+/**
+* Pure geometry + colour-mapping helpers for {@link DirectionalColorWheel}.
+*
+* The wheel is a *legend* for the directional spectrogram, not an independent
+* colour scheme. Its bearing→colour convention is intentionally identical to the
+* CPU compositor `bufferToDirectionalImageData` (Horizon `tile-data.ts`). Keeping
+* this in a small, dependency-free module lets it be unit-tested in isolation and
+* gives consumers (HZN-2656) a single importable source for the convention. See
+* `DirectionalColorWheel.consistency.md` for the full alignment proof.
+*/
+/** Sector counts the wheel supports, matching the GRAMS dialog. */
+const SUPPORTED_SECTOR_COUNTS = [
+	4,
+	8,
+	12,
+	16,
+	20,
+	24,
+	32
+];
+/**
+* Default palette. These are the same OKLCH stops, at the same positions, as the
+* compositor's `DIRECTIONAL_OKLCH_STOP_LIST` — so a wheel rendered with no
+* `colorStops`/`colorForBearing` prop already matches the directional feed's
+* default DIFAR palette. Consumers override this with the exact feed palette.
+*/
+const DEFAULT_DIRECTIONAL_COLOR_STOPS = [
+	{
+		color: "oklch(0.65 0.26 29)",
+		position: 0
+	},
+	{
+		color: "oklch(0.7 0.17 55)",
+		position: .083
+	},
+	{
+		color: "oklch(0.9 0.21 110)",
+		position: .167
+	},
+	{
+		color: "oklch(0.87 0.29 142)",
+		position: .333
+	},
+	{
+		color: "oklch(0.45 0.26 264)",
+		position: .556
+	},
+	{
+		color: "oklch(0.33 0.18 300)",
+		position: .722
+	},
+	{
+		color: "oklch(0.5 0.27 328)",
+		position: .889
+	},
+	{
+		color: "oklch(0.65 0.26 29)",
+		position: 1
+	}
+];
+const TWO_PI = Math.PI * 2;
+/** Wrap any angle into `[0, 360)`. */
+const normalizeBearing = (degrees) => (degrees % 360 + 360) % 360;
+/**
+* The compositor's bearing definition, verbatim: `atan2(sine, cosine)` in
+* degrees, shifted into `[0, 360)`. Exposed so consumers can derive the same
+* bearing the feed colours by, instead of re-deriving it. Mirrors
+* `bufferToDirectionalImageData` (`tile-data.ts`).
+*/
+const bearingFromComponents = (sineValue, cosineValue) => {
+	let bearingDegrees = Math.atan2(sineValue, cosineValue) * 180 / Math.PI;
+	if (bearingDegrees < 0) bearingDegrees += 360;
+	return bearingDegrees;
+};
+/**
+* Map a compass bearing to the palette position whose colour the wheel shows
+* there. With `colorAngle === 0` this is `bearing / 360` — exactly how the
+* compositor indexes its gradient (`(bearingDegrees / 360) * RESOLUTION`).
+* `colorAngle` rotates the colour assignment clockwise around the ring.
+*/
+const bearingToPalettePosition = (bearing, colorAngle) => normalizeBearing(bearing - colorAngle) / 360;
+/** Point on the wheel for a bearing, using the compass convention (0° at top, clockwise). */
+const polarToCartesian = (centerX, centerY, radius, bearing) => {
+	const radians = normalizeBearing(bearing) * TWO_PI / 360;
+	return {
+		x: centerX + radius * Math.sin(radians),
+		y: centerY - radius * Math.cos(radians)
+	};
+};
+/** Inclusive/exclusive bearing range covered by sector `index` of `count` equal sectors. */
+const sectorBearingRange = (index, count) => {
+	const span = 360 / count;
+	return {
+		endBearing: (index + 1) * span,
+		startBearing: index * span
+	};
+};
+/**
+* Stable id for sector `index`, formatted like Horizon's `DEFAULT_DIRECTION_GROUP_LIST`
+* ids (`sector-0-120`) so HZN-2656 can build a `hiddenDirectionGroupList` directly.
+*/
+const sectorId = (index, count) => {
+	const { endBearing, startBearing } = sectorBearingRange(index, count);
+	return `sector-${Math.round(startBearing)}-${Math.round(endBearing)}`;
+};
+/** Threshold (coherence, `0..1`) → CSS `saturate()` multiplier. Higher threshold → more desaturated. */
+const thresholdToSaturation = (threshold) => Math.max(0, Math.min(1, 1 - threshold));
+const arcSampleCount = (sweep) => Math.max(2, Math.ceil(Math.abs(sweep) / 6));
+/**
+* SVG path (`d`) for an annular sector (donut wedge) spanning `[startBearing, endBearing]`
+* between `innerRadius` and `outerRadius`. Used for the divider/dim/highlight overlays.
+*/
+const annularSectorPath = (centerX, centerY, innerRadius, outerRadius, startBearing, endBearing) => {
+	const sweep = endBearing - startBearing;
+	const samples = arcSampleCount(sweep);
+	const outer = [];
+	const inner = [];
+	for (let step = 0; step <= samples; step += 1) {
+		const bearing = startBearing + sweep * step / samples;
+		const outerPoint = polarToCartesian(centerX, centerY, outerRadius, bearing);
+		const innerPoint = polarToCartesian(centerX, centerY, innerRadius, bearing);
+		outer.push(`${outerPoint.x.toFixed(3)} ${outerPoint.y.toFixed(3)}`);
+		inner.push(`${innerPoint.x.toFixed(3)} ${innerPoint.y.toFixed(3)}`);
+	}
+	inner.reverse();
+	return `M ${outer[0]} L ${outer.slice(1).join(" L ")} L ${inner.join(" L ")} Z`;
+};
+/**
+* CSS `clip-path: polygon(…)` for an annular sector, in percentage coordinates of a
+* square box (centre at `50% 50%`). Lets a full-size, transparent `<button>` expose
+* only its wedge as the interactive/hit region.
+*/
+const sectorClipPath = (innerRadiusPercent, outerRadiusPercent, startBearing, endBearing) => {
+	const sweep = endBearing - startBearing;
+	const samples = arcSampleCount(sweep);
+	const outer = [];
+	const inner = [];
+	for (let step = 0; step <= samples; step += 1) {
+		const bearing = startBearing + sweep * step / samples;
+		const outerPoint = polarToCartesian(50, 50, outerRadiusPercent, bearing);
+		const innerPoint = polarToCartesian(50, 50, innerRadiusPercent, bearing);
+		outer.push(`${outerPoint.x.toFixed(3)}% ${outerPoint.y.toFixed(3)}%`);
+		inner.push(`${innerPoint.x.toFixed(3)}% ${innerPoint.y.toFixed(3)}%`);
+	}
+	inner.reverse();
+	return `polygon(${[...outer, ...inner].join(", ")})`;
+};
+const clamp01 = (value) => Math.max(0, Math.min(1, value));
+const roundTo = (value, digits) => {
+	const factor = 10 ** digits;
+	return Math.round(value * factor) / factor;
+};
+const OKLCH_PATTERN = /^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)\s+([\d.]+)/i;
+const parseOklch = (color) => {
+	const match = OKLCH_PATTERN.exec(color.trim());
+	if (match === null) return null;
+	const lightnessRaw = Number.parseFloat(match[1]);
+	return {
+		c: Number.parseFloat(match[3]),
+		h: Number.parseFloat(match[4]),
+		l: match[2] === "%" ? lightnessRaw / 100 : lightnessRaw
+	};
+};
+const formatOklch = (oklch) => `oklch(${roundTo(oklch.l, 4)} ${roundTo(oklch.c, 4)} ${roundTo(oklch.h, 2)})`;
+/**
+* Colour of a palette at a normalized position `[0, 1]`, interpolating OKLCH stops with
+* shortest-hue — the same interpolation the compositor's `buildBearingGradient` uses. Falls
+* back to the nearest stop's raw colour for non-OKLCH palettes (e.g. hsl/hex), which can't be
+* safely lerped without a full colour library.
+*/
+const colorForPalettePosition = (stops, position) => {
+	const ordered = stops.slice().sort((first, second) => first.position - second.position);
+	const first = ordered[0];
+	const last = ordered[ordered.length - 1];
+	if (first === void 0 || last === void 0) return "transparent";
+	const clamped = clamp01(position);
+	if (clamped <= first.position) return first.color;
+	if (clamped >= last.position) return last.color;
+	let lower = first;
+	let upper = last;
+	for (let index = 0; index < ordered.length - 1; index += 1) {
+		const candidate = ordered[index];
+		const next = ordered[index + 1];
+		if (candidate !== void 0 && next !== void 0 && clamped >= candidate.position && clamped <= next.position) {
+			lower = candidate;
+			upper = next;
+			break;
+		}
+	}
+	const span = upper.position - lower.position;
+	const factor = span === 0 ? 0 : (clamped - lower.position) / span;
+	const lowerOklch = parseOklch(lower.color);
+	const upperOklch = parseOklch(upper.color);
+	if (lowerOklch === null || upperOklch === null) return factor < .5 ? lower.color : upper.color;
+	let hueDelta = upperOklch.h - lowerOklch.h;
+	if (hueDelta > 180) hueDelta -= 360;
+	if (hueDelta < -180) hueDelta += 360;
+	return formatOklch({
+		c: lowerOklch.c + (upperOklch.c - lowerOklch.c) * factor,
+		h: (lowerOklch.h + hueDelta * factor + 360) % 360,
+		l: lowerOklch.l + (upperOklch.l - lowerOklch.l) * factor
+	});
+};
+/**
+* Flat colour for a sector centred at `centerBearing`, honouring `colorAngle`. Each GRAMS
+* sector is filled with one colour — the palette evaluated at
+* `bearingToPalettePosition(centerBearing, colorAngle)`, i.e. the same colour the compositor
+* would give a pixel whose bearing is the sector's centre.
+*/
+const resolveSectorColor = (source, centerBearing, colorAngle) => {
+	const rotatedBearing = normalizeBearing(centerBearing - colorAngle);
+	if (typeof source.colorForBearing === "function") return source.colorForBearing(rotatedBearing);
+	return colorForPalettePosition(source.colorStops !== void 0 && source.colorStops !== null && source.colorStops.length > 0 ? source.colorStops : DEFAULT_DIRECTIONAL_COLOR_STOPS, rotatedBearing / 360);
+};
+
+//#endregion
+export { DEFAULT_DIRECTIONAL_COLOR_STOPS, SUPPORTED_SECTOR_COUNTS, annularSectorPath, bearingFromComponents, bearingToPalettePosition, colorForPalettePosition, normalizeBearing, polarToCartesian, resolveSectorColor, sectorBearingRange, sectorClipPath, sectorId, thresholdToSaturation };
+//# sourceMappingURL=directionalColorWheelMath.js.map

package/dist/DirectionalColorWheel/directionalColorWheelMath.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"directionalColorWheelMath.js","names":[],"sources":["../../src/components/DirectionalColorWheel/directionalColorWheelMath.ts"],"sourcesContent":["/**\n * Pure geometry + colour-mapping helpers for {@link DirectionalColorWheel}.\n *\n * The wheel is a *legend* for the directional spectrogram, not an independent\n * colour scheme. Its bearing→colour convention is intentionally identical to the\n * CPU compositor `bufferToDirectionalImageData` (Horizon `tile-data.ts`). Keeping\n * this in a small, dependency-free module lets it be unit-tested in isolation and\n * gives consumers (HZN-2656) a single importable source for the convention. See\n * `DirectionalColorWheel.consistency.md` for the full alignment proof.\n */\n\n/** Sector counts the wheel supports, matching the GRAMS dialog. */\nexport const SUPPORTED_SECTOR_COUNTS = [4, 8, 12, 16, 20, 24, 32] as const\n\nexport type DirectionalSectorCount = (typeof SUPPORTED_SECTOR_COUNTS)[number]\n\n/** A palette stop, mirroring the shape of Horizon's `DIRECTIONAL_OKLCH_STOP_LIST`. */\nexport interface DirectionalColorStop {\n  /** Any CSS colour (an `oklch(…)` string keeps parity with the compositor's palette). */\n  color: string\n  /** Position along the palette, `0` (bearing 0°) to `1` (bearing 360°). */\n  position: number\n}\n\n/**\n * Default palette. These are the same OKLCH stops, at the same positions, as the\n * compositor's `DIRECTIONAL_OKLCH_STOP_LIST` — so a wheel rendered with no\n * `colorStops`/`colorForBearing` prop already matches the directional feed's\n * default DIFAR palette. Consumers override this with the exact feed palette.\n */\nexport const DEFAULT_DIRECTIONAL_COLOR_STOPS: DirectionalColorStop[] = [\n  { color: 'oklch(0.65 0.26 29)', position: 0 },\n  { color: 'oklch(0.7 0.17 55)', position: 0.083 },\n  { color: 'oklch(0.9 0.21 110)', position: 0.167 },\n  { color: 'oklch(0.87 0.29 142)', position: 0.333 },\n  { color: 'oklch(0.45 0.26 264)', position: 0.556 },\n  { color: 'oklch(0.33 0.18 300)', position: 0.722 },\n  { color: 'oklch(0.5 0.27 328)', position: 0.889 },\n  { color: 'oklch(0.65 0.26 29)', position: 1 },\n]\n\nconst TWO_PI = Math.PI * 2\n\n/** Wrap any angle into `[0, 360)`. */\nexport const normalizeBearing = (degrees: number): number => ((degrees % 360) + 360) % 360\n\n/**\n * The compositor's bearing definition, verbatim: `atan2(sine, cosine)` in\n * degrees, shifted into `[0, 360)`. Exposed so consumers can derive the same\n * bearing the feed colours by, instead of re-deriving it. Mirrors\n * `bufferToDirectionalImageData` (`tile-data.ts`).\n */\nexport const bearingFromComponents = (sineValue: number, cosineValue: number): number => {\n  let bearingDegrees = (Math.atan2(sineValue, cosineValue) * 180) / Math.PI\n  if (bearingDegrees < 0) {\n    bearingDegrees += 360\n  }\n  return bearingDegrees\n}\n\n/**\n * Map a compass bearing to the palette position whose colour the wheel shows\n * there. With `colorAngle === 0` this is `bearing / 360` — exactly how the\n * compositor indexes its gradient (`(bearingDegrees / 360) * RESOLUTION`).\n * `colorAngle` rotates the colour assignment clockwise around the ring.\n */\nexport const bearingToPalettePosition = (bearing: number, colorAngle: number): number => normalizeBearing(bearing - colorAngle) / 360\n\n/** Point on the wheel for a bearing, using the compass convention (0° at top, clockwise). */\nexport const polarToCartesian = (centerX: number, centerY: number, radius: number, bearing: number): { x: number; y: number } => {\n  const radians = (normalizeBearing(bearing) * TWO_PI) / 360\n  return {\n    x: centerX + radius * Math.sin(radians),\n    y: centerY - radius * Math.cos(radians),\n  }\n}\n\n/** Inclusive/exclusive bearing range covered by sector `index` of `count` equal sectors. */\nexport const sectorBearingRange = (index: number, count: number): { endBearing: number; startBearing: number } => {\n  const span = 360 / count\n  return { endBearing: (index + 1) * span, startBearing: index * span }\n}\n\n/**\n * Stable id for sector `index`, formatted like Horizon's `DEFAULT_DIRECTION_GROUP_LIST`\n * ids (`sector-0-120`) so HZN-2656 can build a `hiddenDirectionGroupList` directly.\n */\nexport const sectorId = (index: number, count: number): string => {\n  const { endBearing, startBearing } = sectorBearingRange(index, count)\n  return `sector-${Math.round(startBearing)}-${Math.round(endBearing)}`\n}\n\n/** Threshold (coherence, `0..1`) → CSS `saturate()` multiplier. Higher threshold → more desaturated. */\nexport const thresholdToSaturation = (threshold: number): number => Math.max(0, Math.min(1, 1 - threshold))\n\nconst arcSampleCount = (sweep: number): number => Math.max(2, Math.ceil(Math.abs(sweep) / 6))\n\n/**\n * SVG path (`d`) for an annular sector (donut wedge) spanning `[startBearing, endBearing]`\n * between `innerRadius` and `outerRadius`. Used for the divider/dim/highlight overlays.\n */\nexport const annularSectorPath = (centerX: number, centerY: number, innerRadius: number, outerRadius: number, startBearing: number, endBearing: number): string => {\n  const sweep = endBearing - startBearing\n  const samples = arcSampleCount(sweep)\n  const outer: string[] = []\n  const inner: string[] = []\n  for (let step = 0; step <= samples; step += 1) {\n    const bearing = startBearing + (sweep * step) / samples\n    const outerPoint = polarToCartesian(centerX, centerY, outerRadius, bearing)\n    const innerPoint = polarToCartesian(centerX, centerY, innerRadius, bearing)\n    outer.push(`${outerPoint.x.toFixed(3)} ${outerPoint.y.toFixed(3)}`)\n    inner.push(`${innerPoint.x.toFixed(3)} ${innerPoint.y.toFixed(3)}`)\n  }\n  inner.reverse()\n  return `M ${outer[0]} L ${outer.slice(1).join(' L ')} L ${inner.join(' L ')} Z`\n}\n\n/**\n * CSS `clip-path: polygon(…)` for an annular sector, in percentage coordinates of a\n * square box (centre at `50% 50%`). Lets a full-size, transparent `<button>` expose\n * only its wedge as the interactive/hit region.\n */\nexport const sectorClipPath = (innerRadiusPercent: number, outerRadiusPercent: number, startBearing: number, endBearing: number): string => {\n  const sweep = endBearing - startBearing\n  const samples = arcSampleCount(sweep)\n  const outer: string[] = []\n  const inner: string[] = []\n  for (let step = 0; step <= samples; step += 1) {\n    const bearing = startBearing + (sweep * step) / samples\n    const outerPoint = polarToCartesian(50, 50, outerRadiusPercent, bearing)\n    const innerPoint = polarToCartesian(50, 50, innerRadiusPercent, bearing)\n    outer.push(`${outerPoint.x.toFixed(3)}% ${outerPoint.y.toFixed(3)}%`)\n    inner.push(`${innerPoint.x.toFixed(3)}% ${innerPoint.y.toFixed(3)}%`)\n  }\n  inner.reverse()\n  return `polygon(${[...outer, ...inner].join(', ')})`\n}\n\nconst clamp01 = (value: number): number => Math.max(0, Math.min(1, value))\n\nconst roundTo = (value: number, digits: number): number => {\n  const factor = 10 ** digits\n  return Math.round(value * factor) / factor\n}\n\nconst OKLCH_PATTERN = /^oklch\\(\\s*([\\d.]+)(%?)\\s+([\\d.]+)\\s+([\\d.]+)/i\n\nconst parseOklch = (color: string): { c: number; h: number; l: number } | null => {\n  const match = OKLCH_PATTERN.exec(color.trim())\n  if (match === null) return null\n  const lightnessRaw = Number.parseFloat(match[1])\n  return { c: Number.parseFloat(match[3]), h: Number.parseFloat(match[4]), l: match[2] === '%' ? lightnessRaw / 100 : lightnessRaw }\n}\n\nconst formatOklch = (oklch: { c: number; h: number; l: number }): string => `oklch(${roundTo(oklch.l, 4)} ${roundTo(oklch.c, 4)} ${roundTo(oklch.h, 2)})`\n\n/**\n * Colour of a palette at a normalized position `[0, 1]`, interpolating OKLCH stops with\n * shortest-hue — the same interpolation the compositor's `buildBearingGradient` uses. Falls\n * back to the nearest stop's raw colour for non-OKLCH palettes (e.g. hsl/hex), which can't be\n * safely lerped without a full colour library.\n */\nexport const colorForPalettePosition = (stops: DirectionalColorStop[], position: number): string => {\n  const ordered = stops.slice().sort((first, second) => first.position - second.position)\n  const first = ordered[0]\n  const last = ordered[ordered.length - 1]\n  if (first === undefined || last === undefined) return 'transparent'\n  const clamped = clamp01(position)\n  if (clamped <= first.position) return first.color\n  if (clamped >= last.position) return last.color\n\n  let lower = first\n  let upper = last\n  for (let index = 0; index < ordered.length - 1; index += 1) {\n    const candidate = ordered[index]\n    const next = ordered[index + 1]\n    if (candidate !== undefined && next !== undefined && clamped >= candidate.position && clamped <= next.position) {\n      lower = candidate\n      upper = next\n      break\n    }\n  }\n\n  const span = upper.position - lower.position\n  const factor = span === 0 ? 0 : (clamped - lower.position) / span\n  const lowerOklch = parseOklch(lower.color)\n  const upperOklch = parseOklch(upper.color)\n  if (lowerOklch === null || upperOklch === null) return factor < 0.5 ? lower.color : upper.color\n\n  let hueDelta = upperOklch.h - lowerOklch.h\n  if (hueDelta > 180) hueDelta -= 360\n  if (hueDelta < -180) hueDelta += 360\n  return formatOklch({\n    c: lowerOklch.c + (upperOklch.c - lowerOklch.c) * factor,\n    h: (lowerOklch.h + hueDelta * factor + 360) % 360,\n    l: lowerOklch.l + (upperOklch.l - lowerOklch.l) * factor,\n  })\n}\n\n/**\n * Flat colour for a sector centred at `centerBearing`, honouring `colorAngle`. Each GRAMS\n * sector is filled with one colour — the palette evaluated at\n * `bearingToPalettePosition(centerBearing, colorAngle)`, i.e. the same colour the compositor\n * would give a pixel whose bearing is the sector's centre.\n */\nexport const resolveSectorColor = (source: { colorForBearing?: ((bearing: number) => string) | null; colorStops?: DirectionalColorStop[] | null }, centerBearing: number, colorAngle: number): string => {\n  const rotatedBearing = normalizeBearing(centerBearing - colorAngle)\n  if (typeof source.colorForBearing === 'function') return source.colorForBearing(rotatedBearing)\n  const stops = source.colorStops !== undefined && source.colorStops !== null && source.colorStops.length > 0 ? source.colorStops : DEFAULT_DIRECTIONAL_COLOR_STOPS\n  return colorForPalettePosition(stops, rotatedBearing / 360)\n}\n"],"mappings":"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"}

package/dist/DirectionalColorWheel.d.ts

@@ -0,0 +1,96 @@
+'use client';
+import { DirectionalColorStop, DirectionalSectorCount } from "./DirectionalColorWheel/directionalColorWheelMath.js";
+import { Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/DirectionalColorWheel/DirectionalColorWheel.d.ts
+interface DirectionalColorWheelProps {
+  /** Accessible name for the wheel group. */
+  accessibleName?: string;
+  /**
+   * Read-only bearing (degrees) the needle points at, using the compositor's `atan2(sine, cosine)`
+   * convention (0° = N, clockwise). The consumer drives it (e.g. from the feed hover cursor) so the
+   * needle follows the cursor; the wheel only displays it — there is no drag interaction.
+   * `null`/`undefined` hides the needle — keep it nullable so Horizon can gate the feature flag with
+   * a single `null` (PAT-028).
+   */
+  bearing?: number | null;
+  /** Layout-only class extension (margins/padding). */
+  className?: string;
+  /**
+   * "Color Angle": degrees the colours are rotated clockwise around the ring. Controlled+uncontrolled
+   * (pair it with `defaultColorAngle` / `onColorAngleChange`). The colours can also be spun directly by
+   * dragging the colour ring — that gesture reports through `onColorAngleChange` and is only active when
+   * the value can take effect (uncontrolled, or controlled *with* an `onColorAngleChange` handler). Sector
+   * geometry and the N/E/S/W bezel stay fixed to compass bearings; only the colours rotate.
+   */
+  colorAngle?: number;
+  /**
+   * Advanced parity hook: resolver mapping a bearing in `[0, 360)` to a CSS colour. When
+   * provided it wins over `colorStops`; pass the same resolver the feed colours by so the
+   * legend samples the identical colours.
+   */
+  colorForBearing?: ((bearingDegrees: number) => string) | null;
+  /** Palette stops (position `0..1`). Defaults to the directional DIFAR palette. */
+  colorStops?: DirectionalColorStop[] | null;
+  dataTestId?: string;
+  /** Uncontrolled initial Color Angle (degrees). */
+  defaultColorAngle?: number;
+  /** Uncontrolled initial set of disabled (hidden) sector indices. */
+  defaultDisabledSectors?: number[];
+  /** Uncontrolled initial threshold. */
+  defaultThreshold?: number;
+  disabled?: boolean;
+  /** Controlled set of disabled (hidden) sector indices, in `[0, sectorCount)`. */
+  disabledSectors?: number[] | null;
+  /** Called with the next Color Angle (degrees, `[0, 360)`) as the colour ring is dragged. */
+  onColorAngleChange?: (colorAngle: number) => void;
+  /** Called with the next set of disabled sector indices whenever a wedge is toggled. */
+  onDisabledSectorsChange?: (disabledSectors: number[]) => void;
+  /** Called when a single wedge is toggled: its index and whether it is now disabled. */
+  onSectorToggle?: (sectorIndex: number, nextDisabled: boolean) => void;
+  /** Called with the threshold (`0..1`) as the centre dial changes. */
+  onThresholdChange?: (threshold: number) => void;
+  ref?: Ref<HTMLDivElement>;
+  /** Number of toggleable wedges. */
+  sectorCount?: DirectionalSectorCount;
+  /** Diameter in pixels. */
+  size?: number;
+  /**
+   * Coherence threshold (`0..1`). Coherence is how reliable the bearing estimate is; this dial
+   * maps it to saturation — higher threshold desaturates the legend. The component only reports
+   * the value via `onThresholdChange`; the consumer decides what it drives.
+   */
+  threshold?: number;
+  /** Keyboard step for the threshold dial. */
+  thresholdStep?: number;
+}
+declare function DirectionalColorWheel({
+  accessibleName,
+  bearing,
+  className,
+  colorAngle,
+  colorForBearing,
+  colorStops,
+  dataTestId,
+  defaultColorAngle,
+  defaultDisabledSectors,
+  defaultThreshold,
+  disabled,
+  disabledSectors,
+  onColorAngleChange,
+  onDisabledSectorsChange,
+  onSectorToggle,
+  onThresholdChange,
+  ref,
+  sectorCount,
+  size,
+  threshold,
+  thresholdStep
+}: DirectionalColorWheelProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace DirectionalColorWheel {
+  var displayName: string;
+}
+//#endregion
+export { DirectionalColorWheel, DirectionalColorWheelProps };
+//# sourceMappingURL=DirectionalColorWheel.d.ts.map

package/dist/DirectionalColorWheel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectionalColorWheel.d.ts","names":[],"sources":["../src/components/DirectionalColorWheel/DirectionalColorWheel.tsx"],"mappings":";;;;;;UAKiB,0BAAA;;EAEf,cAAA;EAFe;;;;;;;EAUf,OAAA;EAuCoC;EArCpC,SAAA;EAFA;;;;;;;EAUA,UAAA;EAWA;;;;;EALA,eAAA,KAAoB,cAAA;EAcE;EAZtB,UAAA,GAAa,oBAAA;EACb,UAAA;EAeA;EAbA,iBAAA;EAauC;EAXvC,sBAAA;EAaqB;EAXrB,gBAAA;EACA,QAAA;EAWU;EATV,eAAA;EAWc;EATd,kBAAA,IAAsB,UAAA;EAiBtB;EAfA,uBAAA,IAA2B,eAAA;EAiBd;EAfb,cAAA,IAAkB,WAAA,UAAqB,YAAA;;EAEvC,iBAAA,IAAqB,SAAA;EACrB,GAAA,GAAM,GAAA,CAAI,cAAA;EA+FV;EA7FA,WAAA,GAAc,sBAAA;EA+Fd;EA7FA,IAAA;EA+FA;;;;;EAzFA,SAAA;EA+FA;EA7FA,aAAA;AAAA;AAAA;EAmFA,cAAA;EACA,OAAA;EACA,SAAA;EACA,UAAA;EACA,eAAA;EACA,UAAA;EACA,UAAA;EACA,iBAAA;EACA,sBAAA;EACA,gBAAA;EACA,QAAA;EACA,eAAA;EACA,kBAAA;EACA,uBAAA;EACA,cAAA;EACA,iBAAA;EACA,GAAA;EACA,WAAA;EACA,IAAA;EACA,SAAA;EACA;AAAA,GACC,0BAAA,GAA0B,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}