@spear-ai/spectral 1.19.1 → 1.20.0

package/dist/DirectionalColorWheel/DirectionalColorWheelDisclosure.d.ts

@@ -1,10 +1,17 @@
 'use client';
-import { CSSProperties, ReactNode, Ref } from "react";
+import { CSSProperties, ReactNode, Ref, RefObject } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/DirectionalColorWheel/DirectionalColorWheelDisclosure.d.ts
 type DisclosureAlign = 'start' | 'center' | 'end';
 type DisclosureSide = 'top' | 'right' | 'bottom' | 'left';
+/** Pixel offset of the draggable disclosure from where it is mounted (default `{ x: 0, y: 0 }`). */
+interface DirectionalColorWheelDisclosurePosition {
+  /** Horizontal offset in px (positive moves right). */
+  x: number;
+  /** Vertical offset in px (positive moves down). */
+  y: number;
+}
 interface DirectionalColorWheelDisclosureProps {
   /** Accessible name for the collapsed trigger button (`aria-expanded` conveys the open state). */
   accessibleName?: string;
@@ -22,9 +29,23 @@ interface DirectionalColorWheelDisclosureProps {
   /** Min distance (px) from the viewport edge before the panel flips/shifts. */
   collisionPadding?: number;
   dataTestId?: string;
+  /**
+   * Element the drag is clamped to so the glyph can't be parked off the feed. Pass a ref to the
+   * container the disclosure is mounted over (e.g. the plot surface). `undefined`/`null` = no clamp
+   * (free drag). Only used when `draggable`.
+   */
+  dragBoundsRef?: RefObject<HTMLElement | null> | null;
   /** Uncontrolled initial expanded state. */
   defaultExpanded?: boolean;
+  /** Uncontrolled initial position offset (px) from the mount point. Defaults to the corner it is mounted at. */
+  defaultPosition?: DirectionalColorWheelDisclosurePosition;
   disabled?: boolean;
+  /**
+   * When `true`, the operator can drag the collapsed glyph to reposition the whole widget (the
+   * expanded panel reflows with it in real time). A tap still toggles; only a drag past a small
+   * slop repositions. Defaults to `false` (fixed at its mount point).
+   */
+  draggable?: boolean;
   /**
    * When `false`, the panel stays open during outside interaction and Esc — it toggles only via the
    * trigger (or a controlled `expanded`). Use this for a feed-mounted wheel so clicking/scrubbing the
@@ -38,6 +59,13 @@ interface DirectionalColorWheelDisclosureProps {
   expanded?: boolean | null;
   /** Called whenever the disclosure expands or collapses (click, Esc, or outside dismiss). */
   onExpandedChange?: (expanded: boolean) => void;
+  /** Called as the glyph is dragged with the next position offset (px). Pair with `position` to persist it. */
+  onPositionChange?: (position: DirectionalColorWheelDisclosurePosition) => void;
+  /**
+   * Controlled position offset (px) from the mount point. `undefined`/`null` leaves it uncontrolled,
+   * so Horizon can gate the feature with a single nullable value (PAT-028). Requires `draggable` to move.
+   */
+  position?: DirectionalColorWheelDisclosurePosition | null;
   ref?: Ref<HTMLButtonElement>;
   /** Which side of the trigger the panel grows toward. Defaults to `top` (icon at a bottom corner). */
   side?: DisclosureSide;
@@ -63,10 +91,15 @@ declare function DirectionalColorWheelDisclosure({
   collisionPadding,
   dataTestId,
   defaultExpanded,
+  defaultPosition,
   disabled,
   dismissOnInteractOutside,
+  draggable,
+  dragBoundsRef,
   expanded,
   onExpandedChange,
+  onPositionChange,
+  position,
   ref,
   side,
   sideOffset,
@@ -78,5 +111,5 @@ declare namespace DirectionalColorWheelDisclosure {
   var displayName: string;
 }
 //#endregion
-export { DirectionalColorWheelDisclosure, DirectionalColorWheelDisclosureProps };
+export { DirectionalColorWheelDisclosure, DirectionalColorWheelDisclosurePosition, DirectionalColorWheelDisclosureProps };
 //# sourceMappingURL=DirectionalColorWheelDisclosure.d.ts.map

package/dist/DirectionalColorWheel/DirectionalColorWheelDisclosure.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DirectionalColorWheelDisclosure.d.ts","names":[],"sources":["../../src/components/DirectionalColorWheel/DirectionalColorWheelDisclosure.tsx"],"mappings":";;;;;KAMK,eAAA;AAAA,KACA,cAAA;AAAA,UAEY,oCAAA;EAHZ;EAKH,cAAA;;EAEA,KAAA,GAAQ,eAAA;EAPU;EASlB,QAAA,EAAU,SAAA;EARO;EAUjB,SAAA;EAViB;;AAEnB;;EAaE,aAAA,GAAgB,SAAA;EATR;EAWR,gBAAA;EACA,UAAA;EAiBU;EAfV,eAAA;EACA,QAAA;EAwBQ;;;;;EAlBR,wBAAA;EAnBA;;;;EAwBA,QAAA;EAfA;EAiBA,gBAAA,IAAoB,QAAA;EACpB,GAAA,GAAM,GAAA,CAAI,iBAAA;EAdV;EAgBA,IAAA,GAAO,cAAA;EALP;EAOA,UAAA;EALoB;;;;;EAWpB,KAAA,GAAQ,aAAA;EANR;EAQA,gBAAA;EAFQ;EAIR,KAAA;AAAA;AAAA;EAcA,cAAA;EACA,KAAA;EACA,QAAA;EACA,SAAA;EACA,aAAA;EACA,gBAAA;EACA,UAAA;EACA,eAAA;EACA,QAAA;EACA,wBAAA;EACA,QAAA;EACA,gBAAA;EACA,GAAA;EACA,IAAA;EACA,UAAA;EACA,KAAA;EACA,gBAAA;EACA;AAAA,GACC,oCAAA,GAAoC,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}
+{"version":3,"file":"DirectionalColorWheelDisclosure.d.ts","names":[],"sources":["../../src/components/DirectionalColorWheel/DirectionalColorWheelDisclosure.tsx"],"mappings":";;;;;KAOK,eAAA;AAAA,KACA,cAAA;;UAGY,uCAAA;EAJG;EAMlB,CAAA;EANkB;EAQlB,CAAA;AAAA;AAAA,UAOe,oCAAA;;EAEf,cAAA;EAhBiB;EAkBjB,KAAA,GAAQ,eAAA;EAf8C;EAiBtD,QAAA,EAAU,SAAA;EAfV;EAiBA,SAAA;EARe;;;;EAaf,aAAA,GAAgB,SAAA;EAAA;EAEhB,gBAAA;EACA,UAAA;EAUkB;;;;;EAJlB,aAAA,GAAgB,SAAA,CAAU,WAAA;EA0ClB;EAxCR,eAAA;EAwCqB;EAtCrB,eAAA,GAAkB,uCAAA;EAClB,QAAA;EAvBQ;;;;;EA6BR,SAAA;EAlBA;;;;;EAwBA,wBAAA;EAbA;;;;EAkBA,QAAA;EAAA;EAEA,gBAAA,IAAoB,QAAA;EAAA;EAEpB,gBAAA,IAAoB,QAAA,EAAU,uCAAA;EAAA;;;;EAK9B,QAAA,GAAW,uCAAA;EACX,GAAA,GAAM,GAAA,CAAI,iBAAA;EAAA;EAEV,IAAA,GAAO,cAAA;EAAA;EAEP,UAAA;EAMA;;;;;EAAA,KAAA,GAAQ,aAAA;;EAER,gBAAA;;EAEA,KAAA;AAAA;AAAA;EAoBA,cAAA;EACA,KAAA;EACA,QAAA;EACA,SAAA;EACA,aAAA;EACA,gBAAA;EACA,UAAA;EACA,eAAA;EACA,eAAA;EACA,QAAA;EACA,wBAAA;EACA,SAAA;EACA,aAAA;EACA,QAAA;EACA,gBAAA;EACA,gBAAA;EACA,QAAA;EACA,GAAA;EACA,IAAA;EACA,UAAA;EACA,KAAA;EACA,gBAAA;EACA;AAAA,GACC,oCAAA,GAAoC,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/DirectionalColorWheel/DirectionalColorWheelDisclosure.js

@@ -1,12 +1,18 @@
 'use client';
 import { cn } from "../utils/twUtils.js";
+import { useUncontrolledState } from "../hooks/useUncontrolledState.js";
 import { Card } from "../DataCard/Card.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popover.js";
 import { DirectionalColorWheelGlyph } from "./DirectionalColorWheelGlyph.js";
-import { useRef } from "react";
+import { useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/DirectionalColorWheel/DirectionalColorWheelDisclosure.tsx
+const DRAG_SLOP_PX = 4;
+const ORIGIN = {
+	x: 0,
+	y: 0
+};
 /**
 * Collapse/expand affordance for the {@link DirectionalColorWheel}, built on the Spectral
 * {@link Popover} primitive so it inherits corner anchoring, click-outside/Esc dismissal, focus
@@ -16,10 +22,83 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * panel, growing from the icon with a `transform-origin`-anchored zoom+fade that is automatically
 * skipped under `prefers-reduced-motion`. `className` extends the Card panel's classes and `style`
 * applies inline overrides to it (background, border, shadow, …).
+*
+* Pass `draggable` to let the operator drag the glyph to reposition the whole widget on a feed; the
+* expanded panel reflows with it in real time, and `dragBoundsRef` clamps it inside its container so
+* it can't be parked off the feed. Position is controlled+uncontrolled via
+* `position` / `defaultPosition` / `onPositionChange` (a nullable px offset from the mount point,
+* PAT-028) so a consumer can persist where the operator parked it.
 */
-const DirectionalColorWheelDisclosure = ({ accessibleName = "Directional color legend", align = "start", children, className, collapsedIcon, collisionPadding = 8, dataTestId = "spectral-directional-color-wheel-disclosure", defaultExpanded, disabled = false, dismissOnInteractOutside = true, expanded, onExpandedChange, ref, side = "top", sideOffset = 8, style, triggerClassName, width = "fit-content" }) => {
+const DirectionalColorWheelDisclosure = ({ accessibleName = "Directional color legend", align = "start", children, className, collapsedIcon, collisionPadding = 8, dataTestId = "spectral-directional-color-wheel-disclosure", defaultExpanded, defaultPosition, disabled = false, dismissOnInteractOutside = true, draggable = false, dragBoundsRef, expanded, onExpandedChange, onPositionChange, position, ref, side = "top", sideOffset = 8, style, triggerClassName, width = "fit-content" }) => {
 	const panelRef = useRef(null);
 	const panelWidth = typeof width === "number" ? `${width}px` : width;
+	const [positionValue, setPositionValue] = useUncontrolledState({
+		defaultValue: defaultPosition ?? ORIGIN,
+		onChange: onPositionChange,
+		value: position ?? void 0
+	});
+	const [dragging, setDragging] = useState(false);
+	const dragRef = useRef(null);
+	const suppressClickRef = useRef(false);
+	const handleTriggerPointerDown = useCallback((event) => {
+		suppressClickRef.current = false;
+		if (!draggable || disabled) return;
+		try {
+			event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+		const triggerRect = event.currentTarget.getBoundingClientRect();
+		dragRef.current = {
+			baseX: positionValue.x,
+			baseY: positionValue.y,
+			bounds: dragBoundsRef?.current?.getBoundingClientRect() ?? null,
+			height: triggerRect.height,
+			homeLeft: triggerRect.left - positionValue.x,
+			homeTop: triggerRect.top - positionValue.y,
+			moved: false,
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startY: event.clientY,
+			width: triggerRect.width
+		};
+	}, [
+		disabled,
+		draggable,
+		dragBoundsRef,
+		positionValue.x,
+		positionValue.y
+	]);
+	const handleTriggerPointerMove = useCallback((event) => {
+		const drag = dragRef.current;
+		if (drag === null || drag.pointerId !== event.pointerId) return;
+		const deltaX = event.clientX - drag.startX;
+		const deltaY = event.clientY - drag.startY;
+		if (!drag.moved) {
+			if (Math.hypot(deltaX, deltaY) <= DRAG_SLOP_PX) return;
+			drag.moved = true;
+			suppressClickRef.current = true;
+			setDragging(true);
+		}
+		let nextX = drag.baseX + deltaX;
+		let nextY = drag.baseY + deltaY;
+		if (drag.bounds !== null) {
+			nextX = Math.min(Math.max(nextX, drag.bounds.left - drag.homeLeft), drag.bounds.right - drag.homeLeft - drag.width);
+			nextY = Math.min(Math.max(nextY, drag.bounds.top - drag.homeTop), drag.bounds.bottom - drag.homeTop - drag.height);
+		}
+		setPositionValue({
+			x: nextX,
+			y: nextY
+		});
+	}, [setPositionValue]);
+	const endDrag = useCallback(() => {
+		dragRef.current = null;
+		setDragging(false);
+	}, []);
+	const handleTriggerClick = useCallback((event) => {
+		if (suppressClickRef.current) {
+			suppressClickRef.current = false;
+			event.preventDefault();
+		}
+	}, []);
 	return /* @__PURE__ */ jsxs(Popover, {
 		defaultOpen: defaultExpanded,
 		onOpenChange: onExpandedChange,
@@ -28,11 +107,20 @@ const DirectionalColorWheelDisclosure = ({ accessibleName = "Directional color l
 			asChild: true,
 			children: /* @__PURE__ */ jsx("button", {
 				"aria-label": accessibleName,
-				className: cn("inline-flex items-center justify-center rounded-full text-text-primary outline-none hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50 motion-safe:transition-opacity motion-safe:duration-150", triggerClassName),
+				className: cn("inline-flex items-center justify-center rounded-full text-text-primary outline-none hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50 motion-safe:transition-opacity motion-safe:duration-150", draggable && "touch-none", draggable && (dragging ? "cursor-grabbing" : "cursor-grab"), triggerClassName),
 				"data-slot": "directional-color-wheel-disclosure-trigger",
 				"data-testid": `${dataTestId}-trigger`,
 				disabled,
+				onClick: handleTriggerClick,
+				onLostPointerCapture: endDrag,
+				onPointerDown: handleTriggerPointerDown,
+				onPointerMove: handleTriggerPointerMove,
+				onPointerUp: endDrag,
 				ref,
+				style: draggable ? {
+					transform: `translate(${positionValue.x}px, ${positionValue.y}px)`,
+					willChange: dragging ? "transform" : void 0
+				} : void 0,
 				type: "button",
 				children: collapsedIcon ?? /* @__PURE__ */ jsx(DirectionalColorWheelGlyph, {})
 			})
@@ -50,6 +138,7 @@ const DirectionalColorWheelDisclosure = ({ accessibleName = "Directional color l
 			},
 			side,
 			sideOffset,
+			updatePositionStrategy: dragging ? "always" : "optimized",
 			width: "fit-content",
 			children: /* @__PURE__ */ jsx(Card, {
 				className: cn("outline-none", className),

package/dist/DirectionalColorWheel/DirectionalColorWheelDisclosure.js.map

@@ -1 +1 @@
-{"version":3,"file":"DirectionalColorWheelDisclosure.js","names":[],"sources":["../../src/components/DirectionalColorWheel/DirectionalColorWheelDisclosure.tsx"],"sourcesContent":["import { Card } from '@components/DataCard/Card'\nimport { Popover, PopoverContent, PopoverTrigger } from '@components/Popover/Popover'\nimport { cn } from '@utils/twUtils'\nimport { useRef, type CSSProperties, type ReactNode, type Ref } from 'react'\nimport { DirectionalColorWheelGlyph } from './DirectionalColorWheelGlyph'\n\ntype DisclosureAlign = 'start' | 'center' | 'end'\ntype DisclosureSide = 'top' | 'right' | 'bottom' | 'left'\n\nexport interface DirectionalColorWheelDisclosureProps {\n  /** Accessible name for the collapsed trigger button (`aria-expanded` conveys the open state). */\n  accessibleName?: string\n  /** How the panel aligns to the trigger. Defaults to `start` for a corner-anchored feed widget. */\n  align?: DisclosureAlign\n  /** The expandable content: the bare wheel, or the wheel framed by the GRAMS controls. */\n  children: ReactNode\n  /** Layout-only class extension for the expanded panel. */\n  className?: string\n  /**\n   * Override the collapsed affordance. Defaults to a {@link DirectionalColorWheelGlyph} mini\n   * compass; pass a palette-matched glyph (or any node) to mirror the expanded wheel's colours.\n   */\n  collapsedIcon?: ReactNode\n  /** Min distance (px) from the viewport edge before the panel flips/shifts. */\n  collisionPadding?: number\n  dataTestId?: string\n  /** Uncontrolled initial expanded state. */\n  defaultExpanded?: boolean\n  disabled?: boolean\n  /**\n   * When `false`, the panel stays open during outside interaction and Esc — it toggles only via the\n   * trigger (or a controlled `expanded`). Use this for a feed-mounted wheel so clicking/scrubbing the\n   * feed underneath doesn't dismiss the legend. Defaults to `true` (standard popover dismissal).\n   */\n  dismissOnInteractOutside?: boolean\n  /**\n   * Controlled expanded state. `undefined`/`null` leaves the disclosure uncontrolled, so Horizon\n   * can gate the feature with a single nullable value (PAT-028).\n   */\n  expanded?: boolean | null\n  /** Called whenever the disclosure expands or collapses (click, Esc, or outside dismiss). */\n  onExpandedChange?: (expanded: boolean) => void\n  ref?: Ref<HTMLButtonElement>\n  /** Which side of the trigger the panel grows toward. Defaults to `top` (icon at a bottom corner). */\n  side?: DisclosureSide\n  /** Gap (px) between the trigger and the panel. */\n  sideOffset?: number\n  /**\n   * Inline styles merged onto the expanded panel (the {@link Card}). Use this for visual overrides\n   * — background, border, shadow — that the `card-effects` base class doesn't expose to `className`\n   * utilities. The default panel width is applied first, so a `width` set here wins over the `width` prop.\n   */\n  style?: CSSProperties\n  /** Layout-only class extension for the collapsed trigger button. */\n  triggerClassName?: string\n  /** Panel width: a pixel number or a CSS width string. Defaults to `'fit-content'` (hugs content). */\n  width?: number | string\n}\n\n/**\n * Collapse/expand affordance for the {@link DirectionalColorWheel}, built on the Spectral\n * {@link Popover} primitive so it inherits corner anchoring, click-outside/Esc dismissal, focus\n * management, and `aria-expanded`/`aria-controls` for free. Collapsed it is a small compass glyph\n * (a real `<button>`); expanded it reveals whatever `children` it wraps — the bare wheel, or the\n * wheel plus the GRAMS Color Angle / Threshold / Sectors controls — inside a Spectral {@link Card}\n * panel, growing from the icon with a `transform-origin`-anchored zoom+fade that is automatically\n * skipped under `prefers-reduced-motion`. `className` extends the Card panel's classes and `style`\n * applies inline overrides to it (background, border, shadow, …).\n */\nexport const DirectionalColorWheelDisclosure = ({\n  accessibleName = 'Directional color legend',\n  align = 'start',\n  children,\n  className,\n  collapsedIcon,\n  collisionPadding = 8,\n  dataTestId = 'spectral-directional-color-wheel-disclosure',\n  defaultExpanded,\n  disabled = false,\n  dismissOnInteractOutside = true,\n  expanded,\n  onExpandedChange,\n  ref,\n  side = 'top',\n  sideOffset = 8,\n  style,\n  triggerClassName,\n  width = 'fit-content',\n}: DirectionalColorWheelDisclosureProps) => {\n  const panelRef = useRef<HTMLDivElement>(null)\n  // `width` sizes the Card panel; the popover hugs it (fit-content) so there is no empty gap.\n  const panelWidth = typeof width === 'number' ? `${width}px` : width\n\n  return (\n    <Popover\n      defaultOpen={defaultExpanded}\n      onOpenChange={onExpandedChange}\n      open={expanded ?? undefined}\n    >\n      <PopoverTrigger asChild>\n        <button\n          aria-label={accessibleName}\n          className={cn(\n            'inline-flex items-center justify-center rounded-full text-text-primary outline-none hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50 motion-safe:transition-opacity motion-safe:duration-150',\n            triggerClassName,\n          )}\n          data-slot='directional-color-wheel-disclosure-trigger'\n          data-testid={`${dataTestId}-trigger`}\n          disabled={disabled}\n          ref={ref}\n          type='button'\n        >\n          {collapsedIcon ?? <DirectionalColorWheelGlyph />}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        align={align}\n        // Chrome-less positioning/animation layer; the visible panel is the Spectral Card below.\n        className='p-0 flex items-center justify-center overflow-visible border-none bg-transparent shadow-none'\n        collisionPadding={collisionPadding}\n        data-slot='directional-color-wheel-disclosure-content'\n        data-testid={`${dataTestId}-content`}\n        // When dismissal is off, swallow Radix's outside-pointer/Esc dismiss so the panel stays open\n        // while the user interacts with whatever sits under it (e.g. the feed); the trigger still toggles.\n        onEscapeKeyDown={dismissOnInteractOutside ? undefined : (event) => event.preventDefault()}\n        onInteractOutside={dismissOnInteractOutside ? undefined : (event) => event.preventDefault()}\n        onOpenAutoFocus={(event) => {\n          // Focus the panel, not the first sector wedge (which would paint an accent ring on a sector).\n          event.preventDefault()\n          panelRef.current?.focus()\n        }}\n        side={side}\n        sideOffset={sideOffset}\n        width='fit-content'\n      >\n        <Card\n          className={cn('outline-none', className)}\n          data-slot='directional-color-wheel-disclosure-panel'\n          ref={panelRef}\n          // The default width is applied first so a caller-supplied `style.width` (or any other\n          // visual override the `card-effects` base class locks down) takes precedence.\n          style={{ width: panelWidth, ...style }}\n          tabIndex={-1}\n        >\n          {children}\n        </Card>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nDirectionalColorWheelDisclosure.displayName = 'DirectionalColorWheelDisclosure'\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqEA,MAAa,mCAAmC,EAC9C,iBAAiB,4BACjB,QAAQ,SACR,UACA,WACA,eACA,mBAAmB,GACnB,aAAa,+CACb,iBACA,WAAW,OACX,2BAA2B,MAC3B,UACA,kBACA,KACA,OAAO,OACP,aAAa,GACb,OACA,kBACA,QAAQ,oBACkC;CAC1C,MAAM,WAAW,OAAuB,KAAK;CAE7C,MAAM,aAAa,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;AAE9D,QACE,qBAAC,SAAD;EACE,aAAa;EACb,cAAc;EACd,MAAM,YAAY;YAHpB,CAKE,oBAAC,gBAAD;GAAgB;aACd,oBAAC,UAAD;IACE,cAAY;IACZ,WAAW,GACT,qSACA,iBACD;IACD,aAAU;IACV,eAAa,GAAG,WAAW;IACjB;IACL;IACL,MAAK;cAEJ,iBAAiB,oBAAC,4BAAD,EAA8B;IACzC;GACM,GACjB,oBAAC,gBAAD;GACS;GAEP,WAAU;GACQ;GAClB,aAAU;GACV,eAAa,GAAG,WAAW;GAG3B,iBAAiB,2BAA2B,UAAa,UAAU,MAAM,gBAAgB;GACzF,mBAAmB,2BAA2B,UAAa,UAAU,MAAM,gBAAgB;GAC3F,kBAAkB,UAAU;AAE1B,UAAM,gBAAgB;AACtB,aAAS,SAAS,OAAO;;GAErB;GACM;GACZ,OAAM;aAEN,oBAAC,MAAD;IACE,WAAW,GAAG,gBAAgB,UAAU;IACxC,aAAU;IACV,KAAK;IAGL,OAAO;KAAE,OAAO;KAAY,GAAG;KAAO;IACtC,UAAU;IAET;IACI;GACQ,EACT;;;AAId,gCAAgC,cAAc"}
+{"version":3,"file":"DirectionalColorWheelDisclosure.js","names":[],"sources":["../../src/components/DirectionalColorWheel/DirectionalColorWheelDisclosure.tsx"],"sourcesContent":["import { Card } from '@components/DataCard/Card'\nimport { Popover, PopoverContent, PopoverTrigger } from '@components/Popover/Popover'\nimport { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { cn } from '@utils/twUtils'\nimport { useCallback, useRef, useState, type CSSProperties, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, type Ref, type RefObject } from 'react'\nimport { DirectionalColorWheelGlyph } from './DirectionalColorWheelGlyph'\n\ntype DisclosureAlign = 'start' | 'center' | 'end'\ntype DisclosureSide = 'top' | 'right' | 'bottom' | 'left'\n\n/** Pixel offset of the draggable disclosure from where it is mounted (default `{ x: 0, y: 0 }`). */\nexport interface DirectionalColorWheelDisclosurePosition {\n  /** Horizontal offset in px (positive moves right). */\n  x: number\n  /** Vertical offset in px (positive moves down). */\n  y: number\n}\n\n// Drag distance (px) below which a press on the glyph is a tap (toggle), not a reposition drag.\nconst DRAG_SLOP_PX = 4\nconst ORIGIN: DirectionalColorWheelDisclosurePosition = { x: 0, y: 0 }\n\nexport interface DirectionalColorWheelDisclosureProps {\n  /** Accessible name for the collapsed trigger button (`aria-expanded` conveys the open state). */\n  accessibleName?: string\n  /** How the panel aligns to the trigger. Defaults to `start` for a corner-anchored feed widget. */\n  align?: DisclosureAlign\n  /** The expandable content: the bare wheel, or the wheel framed by the GRAMS controls. */\n  children: ReactNode\n  /** Layout-only class extension for the expanded panel. */\n  className?: string\n  /**\n   * Override the collapsed affordance. Defaults to a {@link DirectionalColorWheelGlyph} mini\n   * compass; pass a palette-matched glyph (or any node) to mirror the expanded wheel's colours.\n   */\n  collapsedIcon?: ReactNode\n  /** Min distance (px) from the viewport edge before the panel flips/shifts. */\n  collisionPadding?: number\n  dataTestId?: string\n  /**\n   * Element the drag is clamped to so the glyph can't be parked off the feed. Pass a ref to the\n   * container the disclosure is mounted over (e.g. the plot surface). `undefined`/`null` = no clamp\n   * (free drag). Only used when `draggable`.\n   */\n  dragBoundsRef?: RefObject<HTMLElement | null> | null\n  /** Uncontrolled initial expanded state. */\n  defaultExpanded?: boolean\n  /** Uncontrolled initial position offset (px) from the mount point. Defaults to the corner it is mounted at. */\n  defaultPosition?: DirectionalColorWheelDisclosurePosition\n  disabled?: boolean\n  /**\n   * When `true`, the operator can drag the collapsed glyph to reposition the whole widget (the\n   * expanded panel reflows with it in real time). A tap still toggles; only a drag past a small\n   * slop repositions. Defaults to `false` (fixed at its mount point).\n   */\n  draggable?: boolean\n  /**\n   * When `false`, the panel stays open during outside interaction and Esc — it toggles only via the\n   * trigger (or a controlled `expanded`). Use this for a feed-mounted wheel so clicking/scrubbing the\n   * feed underneath doesn't dismiss the legend. Defaults to `true` (standard popover dismissal).\n   */\n  dismissOnInteractOutside?: boolean\n  /**\n   * Controlled expanded state. `undefined`/`null` leaves the disclosure uncontrolled, so Horizon\n   * can gate the feature with a single nullable value (PAT-028).\n   */\n  expanded?: boolean | null\n  /** Called whenever the disclosure expands or collapses (click, Esc, or outside dismiss). */\n  onExpandedChange?: (expanded: boolean) => void\n  /** Called as the glyph is dragged with the next position offset (px). Pair with `position` to persist it. */\n  onPositionChange?: (position: DirectionalColorWheelDisclosurePosition) => void\n  /**\n   * Controlled position offset (px) from the mount point. `undefined`/`null` leaves it uncontrolled,\n   * so Horizon can gate the feature with a single nullable value (PAT-028). Requires `draggable` to move.\n   */\n  position?: DirectionalColorWheelDisclosurePosition | null\n  ref?: Ref<HTMLButtonElement>\n  /** Which side of the trigger the panel grows toward. Defaults to `top` (icon at a bottom corner). */\n  side?: DisclosureSide\n  /** Gap (px) between the trigger and the panel. */\n  sideOffset?: number\n  /**\n   * Inline styles merged onto the expanded panel (the {@link Card}). Use this for visual overrides\n   * — background, border, shadow — that the `card-effects` base class doesn't expose to `className`\n   * utilities. The default panel width is applied first, so a `width` set here wins over the `width` prop.\n   */\n  style?: CSSProperties\n  /** Layout-only class extension for the collapsed trigger button. */\n  triggerClassName?: string\n  /** Panel width: a pixel number or a CSS width string. Defaults to `'fit-content'` (hugs content). */\n  width?: number | string\n}\n\n/**\n * Collapse/expand affordance for the {@link DirectionalColorWheel}, built on the Spectral\n * {@link Popover} primitive so it inherits corner anchoring, click-outside/Esc dismissal, focus\n * management, and `aria-expanded`/`aria-controls` for free. Collapsed it is a small compass glyph\n * (a real `<button>`); expanded it reveals whatever `children` it wraps — the bare wheel, or the\n * wheel plus the GRAMS Color Angle / Threshold / Sectors controls — inside a Spectral {@link Card}\n * panel, growing from the icon with a `transform-origin`-anchored zoom+fade that is automatically\n * skipped under `prefers-reduced-motion`. `className` extends the Card panel's classes and `style`\n * applies inline overrides to it (background, border, shadow, …).\n *\n * Pass `draggable` to let the operator drag the glyph to reposition the whole widget on a feed; the\n * expanded panel reflows with it in real time, and `dragBoundsRef` clamps it inside its container so\n * it can't be parked off the feed. Position is controlled+uncontrolled via\n * `position` / `defaultPosition` / `onPositionChange` (a nullable px offset from the mount point,\n * PAT-028) so a consumer can persist where the operator parked it.\n */\nexport const DirectionalColorWheelDisclosure = ({\n  accessibleName = 'Directional color legend',\n  align = 'start',\n  children,\n  className,\n  collapsedIcon,\n  collisionPadding = 8,\n  dataTestId = 'spectral-directional-color-wheel-disclosure',\n  defaultExpanded,\n  defaultPosition,\n  disabled = false,\n  dismissOnInteractOutside = true,\n  draggable = false,\n  dragBoundsRef,\n  expanded,\n  onExpandedChange,\n  onPositionChange,\n  position,\n  ref,\n  side = 'top',\n  sideOffset = 8,\n  style,\n  triggerClassName,\n  width = 'fit-content',\n}: DirectionalColorWheelDisclosureProps) => {\n  const panelRef = useRef<HTMLDivElement>(null)\n  // `width` sizes the Card panel; the popover hugs it (fit-content) so there is no empty gap.\n  const panelWidth = typeof width === 'number' ? `${width}px` : width\n\n  const [positionValue, setPositionValue] = useUncontrolledState<DirectionalColorWheelDisclosurePosition>({ defaultValue: defaultPosition ?? ORIGIN, onChange: onPositionChange, value: position ?? undefined })\n  const [dragging, setDragging] = useState(false)\n  // Live reposition drag (a ref so rapid moves don't hinge on re-render timing). `bounds` is the\n  // clamp rect (the dragBoundsRef element); `homeLeft`/`homeTop` are the trigger's viewport position\n  // at translate 0, so the allowed offset range keeps the glyph fully inside `bounds`.\n  const dragRef = useRef<{ baseX: number; baseY: number; bounds: DOMRect | null; height: number; homeLeft: number; homeTop: number; moved: boolean; pointerId: number; startX: number; startY: number; width: number } | null>(null)\n  // Set when a drag passes the slop so the trailing click is swallowed (preventDefault → Radix's\n  // composed trigger toggle bails) instead of also expanding/collapsing the panel.\n  const suppressClickRef = useRef(false)\n\n  const handleTriggerPointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLButtonElement>) => {\n      suppressClickRef.current = false\n      if (!draggable || disabled) return\n      try {\n        event.currentTarget.setPointerCapture(event.pointerId)\n      } catch {\n        // setPointerCapture can throw without an active pointer (e.g. synthetic test events).\n      }\n      const triggerRect = event.currentTarget.getBoundingClientRect()\n      dragRef.current = {\n        baseX: positionValue.x,\n        baseY: positionValue.y,\n        bounds: dragBoundsRef?.current?.getBoundingClientRect() ?? null,\n        height: triggerRect.height,\n        // Subtract the active translate to recover the trigger's home (translate-0) position.\n        homeLeft: triggerRect.left - positionValue.x,\n        homeTop: triggerRect.top - positionValue.y,\n        moved: false,\n        pointerId: event.pointerId,\n        startX: event.clientX,\n        startY: event.clientY,\n        width: triggerRect.width,\n      }\n    },\n    [disabled, draggable, dragBoundsRef, positionValue.x, positionValue.y],\n  )\n\n  const handleTriggerPointerMove = useCallback(\n    (event: ReactPointerEvent<HTMLButtonElement>) => {\n      const drag = dragRef.current\n      if (drag === null || drag.pointerId !== event.pointerId) return\n      const deltaX = event.clientX - drag.startX\n      const deltaY = event.clientY - drag.startY\n      if (!drag.moved) {\n        if (Math.hypot(deltaX, deltaY) <= DRAG_SLOP_PX) return\n        drag.moved = true\n        suppressClickRef.current = true\n        // Promote the trigger to its own compositor layer and poll the popover position every frame\n        // (`updatePositionStrategy='always'`) so the panel reflows with the glyph rather than snapping.\n        setDragging(true)\n      }\n      let nextX = drag.baseX + deltaX\n      let nextY = drag.baseY + deltaY\n      // Clamp the offset so the glyph stays fully inside the bounds element (can't be lost off the feed).\n      if (drag.bounds !== null) {\n        nextX = Math.min(Math.max(nextX, drag.bounds.left - drag.homeLeft), drag.bounds.right - drag.homeLeft - drag.width)\n        nextY = Math.min(Math.max(nextY, drag.bounds.top - drag.homeTop), drag.bounds.bottom - drag.homeTop - drag.height)\n      }\n      setPositionValue({ x: nextX, y: nextY })\n    },\n    [setPositionValue],\n  )\n\n  const endDrag = useCallback(() => {\n    dragRef.current = null\n    setDragging(false)\n  }, [])\n\n  const handleTriggerClick = useCallback((event: ReactMouseEvent<HTMLButtonElement>) => {\n    if (suppressClickRef.current) {\n      suppressClickRef.current = false\n      event.preventDefault()\n    }\n  }, [])\n\n  return (\n    <Popover\n      defaultOpen={defaultExpanded}\n      onOpenChange={onExpandedChange}\n      open={expanded ?? undefined}\n    >\n      <PopoverTrigger asChild>\n        <button\n          aria-label={accessibleName}\n          className={cn(\n            'inline-flex items-center justify-center rounded-full text-text-primary outline-none hover:opacity-80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent disabled:pointer-events-none disabled:opacity-50 motion-safe:transition-opacity motion-safe:duration-150',\n            draggable && 'touch-none',\n            draggable && (dragging ? 'cursor-grabbing' : 'cursor-grab'),\n            triggerClassName,\n          )}\n          data-slot='directional-color-wheel-disclosure-trigger'\n          data-testid={`${dataTestId}-trigger`}\n          disabled={disabled}\n          onClick={handleTriggerClick}\n          onLostPointerCapture={endDrag}\n          onPointerDown={handleTriggerPointerDown}\n          onPointerMove={handleTriggerPointerMove}\n          onPointerUp={endDrag}\n          ref={ref}\n          // A pure translate (no left/top) keeps the reposition on the compositor; `will-change`\n          // promotes it for the duration of the drag.\n          style={draggable ? { transform: `translate(${positionValue.x}px, ${positionValue.y}px)`, willChange: dragging ? 'transform' : undefined } : undefined}\n          type='button'\n        >\n          {collapsedIcon ?? <DirectionalColorWheelGlyph />}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        align={align}\n        // Chrome-less positioning/animation layer; the visible panel is the Spectral Card below.\n        className='p-0 flex items-center justify-center overflow-visible border-none bg-transparent shadow-none'\n        collisionPadding={collisionPadding}\n        data-slot='directional-color-wheel-disclosure-content'\n        data-testid={`${dataTestId}-content`}\n        // When dismissal is off, swallow Radix's outside-pointer/Esc dismiss so the panel stays open\n        // while the user interacts with whatever sits under it (e.g. the feed); the trigger still toggles.\n        onEscapeKeyDown={dismissOnInteractOutside ? undefined : (event) => event.preventDefault()}\n        onInteractOutside={dismissOnInteractOutside ? undefined : (event) => event.preventDefault()}\n        onOpenAutoFocus={(event) => {\n          // Focus the panel, not the first sector wedge (which would paint an accent ring on a sector).\n          event.preventDefault()\n          panelRef.current?.focus()\n        }}\n        side={side}\n        sideOffset={sideOffset}\n        // While dragging, poll the anchor position every animation frame so the panel tracks the\n        // glyph in real time; back to the cheaper 'optimized' strategy at rest.\n        updatePositionStrategy={dragging ? 'always' : 'optimized'}\n        width='fit-content'\n      >\n        <Card\n          className={cn('outline-none', className)}\n          data-slot='directional-color-wheel-disclosure-panel'\n          ref={panelRef}\n          // The default width is applied first so a caller-supplied `style.width` (or any other\n          // visual override the `card-effects` base class locks down) takes precedence.\n          style={{ width: panelWidth, ...style }}\n          tabIndex={-1}\n        >\n          {children}\n        </Card>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nDirectionalColorWheelDisclosure.displayName = 'DirectionalColorWheelDisclosure'\n"],"mappings":"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"}

package/dist/DirectionalColorWheel.d.ts.map

@@ -1 +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"}
+{"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;EAkGV;EAhGA,WAAA,GAAc,sBAAA;EAkGd;EAhGA,IAAA;EAkGA;;;;;EA5FA,SAAA;EAkGA;EAhGA,aAAA;AAAA;AAAA;EAsFA,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"}

package/dist/DirectionalColorWheel.js

@@ -60,6 +60,7 @@ const pointerBearing = (clientX, clientY, rect) => {
 	const deltaY = clientY - (rect.top + rect.height / 2);
 	return normalizeBearing(Math.atan2(deltaX, -deltaY) * 180 / Math.PI);
 };
+const sectorIndexForBearing = (bearing, count) => Math.floor(normalizeBearing(bearing) / (360 / count)) % count;
 const DirectionalColorWheel = ({ accessibleName = "Directional bearing color wheel", bearing, className, colorAngle, colorForBearing, colorStops, dataTestId = "spectral-directional-color-wheel", defaultColorAngle, defaultDisabledSectors, defaultThreshold = 0, disabled = false, disabledSectors, onColorAngleChange, onDisabledSectorsChange, onSectorToggle, onThresholdChange, ref, sectorCount = 12, size = 240, threshold, thresholdStep = .05 }) => {
 	const rootRef = useRef(null);
 	const wedgeRefs = useRef([]);
@@ -87,7 +88,10 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 	const [draggingDial, setDraggingDial] = useState(false);
 	const [dialFocused, setDialFocused] = useState(false);
 	const [rotatingRing, setRotatingRing] = useState(false);
+	const [brushing, setBrushing] = useState(false);
+	const [brushedIndices, setBrushedIndices] = useState([]);
 	const rotationRef = useRef(null);
+	const brushRef = useRef(null);
 	const suppressClickRef = useRef(false);
 	const canRotate = !disabled && (colorAngle === void 0 || onColorAngleChange !== void 0);
 	const disabledSet = useMemo(() => new Set(disabledValue.filter((index) => index >= 0 && index < sectorCount)), [disabledValue, sectorCount]);
@@ -121,11 +125,74 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 		sectorCount,
 		setDisabledValue
 	]);
-	const handleRingPointerDown = useCallback((event) => {
+	const commitDisabledSet = useCallback((next) => {
+		setDisabledValue([...next].filter((value) => value >= 0 && value < sectorCount).sort((first, second) => first - second));
+	}, [sectorCount, setDisabledValue]);
+	const setSectorDisabled = useCallback((index, nextDisabled) => {
+		if (disabled || disabledSet.has(index) === nextDisabled) return;
+		const next = new Set(disabledSet);
+		if (nextDisabled) next.add(index);
+		else next.delete(index);
+		commitDisabledSet(next);
+		onSectorToggle?.(index, nextDisabled);
+	}, [
+		commitDisabledSet,
+		disabled,
+		disabledSet,
+		onSectorToggle
+	]);
+	const paintBrushSector = useCallback((brush, index) => {
+		brush.brushed.add(index);
+		if (brush.disabled.has(index) === brush.targetDisabled) return;
+		if (brush.targetDisabled) brush.disabled.add(index);
+		else brush.disabled.delete(index);
+		commitDisabledSet(brush.disabled);
+		onSectorToggle?.(index, brush.targetDisabled);
+	}, [commitDisabledSet, onSectorToggle]);
+	const startBrush = useCallback((event, index, rect) => {
+		if (disabled) return;
+		try {
+			event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+		const targetDisabled = !disabledSet.has(index);
+		const working = new Set(disabledSet);
+		if (targetDisabled) working.add(index);
+		else working.delete(index);
+		brushRef.current = {
+			brushed: new Set([index]),
+			disabled: working,
+			lastBearing: pointerBearing(event.clientX, event.clientY, rect),
+			pointerId: event.pointerId,
+			rect,
+			targetDisabled
+		};
+		suppressClickRef.current = true;
+		setBrushing(true);
+		setBrushedIndices([index]);
+		commitDisabledSet(working);
+		onSectorToggle?.(index, targetDisabled);
+	}, [
+		commitDisabledSet,
+		disabled,
+		disabledSet,
+		onSectorToggle
+	]);
+	const endBrush = useCallback(() => {
+		if (brushRef.current === null) return;
+		brushRef.current = null;
+		setBrushing(false);
+		setBrushedIndices([]);
+		setFocusedSectorIndex(null);
+	}, []);
+	const handleSectorPointerDown = useCallback((event, index) => {
 		suppressClickRef.current = false;
-		if (!canRotate) return;
 		const rect = rootRef.current?.getBoundingClientRect();
 		if (!rect) return;
+		if (event.shiftKey) {
+			startBrush(event, index, rect);
+			return;
+		}
+		if (!canRotate) return;
 		try {
 			event.currentTarget.setPointerCapture(event.pointerId);
 		} catch {}
@@ -139,8 +206,30 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 			startY: event.clientY,
 			wedge: event.currentTarget
 		};
-	}, [canRotate, colorAngleValue]);
+	}, [
+		canRotate,
+		colorAngleValue,
+		startBrush
+	]);
 	const handleRingPointerMove = useCallback((event) => {
+		const brush = brushRef.current;
+		if (brush !== null) {
+			if (brush.pointerId !== event.pointerId) return;
+			const bearingNow = pointerBearing(event.clientX, event.clientY, brush.rect);
+			let delta = bearingNow - brush.lastBearing;
+			if (delta > 180) delta -= 360;
+			if (delta < -180) delta += 360;
+			const step = delta >= 0 ? 1 : -1;
+			const toIndex = sectorIndexForBearing(bearingNow, sectorCount);
+			let index = sectorIndexForBearing(brush.lastBearing, sectorCount);
+			while (index !== toIndex) {
+				index = (index + step + sectorCount) % sectorCount;
+				paintBrushSector(brush, index);
+			}
+			brush.lastBearing = bearingNow;
+			setBrushedIndices([...brush.brushed]);
+			return;
+		}
 		const drag = rotationRef.current;
 		if (drag === null || drag.pointerId !== event.pointerId) return;
 		const bearingNow = pointerBearing(event.clientX, event.clientY, drag.rect);
@@ -157,7 +246,11 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 			drag.wedge.blur();
 		}
 		setColorAngleValue(drag.angle);
-	}, [setColorAngleValue]);
+	}, [
+		paintBrushSector,
+		sectorCount,
+		setColorAngleValue
+	]);
 	const endRingRotation = useCallback(() => {
 		rotationRef.current = null;
 		setRotatingRing(false);
@@ -168,16 +261,20 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 	}, []);
 	const handleWedgeKeyDown = useCallback((event, index) => {
 		if (disabled) return;
+		const moveFocus = (next) => {
+			if (event.shiftKey) setSectorDisabled(next, disabledSet.has(index));
+			focusSector(next);
+		};
 		switch (event.key) {
 			case "ArrowRight":
 			case "ArrowDown":
 				event.preventDefault();
-				focusSector((index + 1) % sectorCount);
+				moveFocus((index + 1) % sectorCount);
 				break;
 			case "ArrowLeft":
 			case "ArrowUp":
 				event.preventDefault();
-				focusSector((index - 1 + sectorCount) % sectorCount);
+				moveFocus((index - 1 + sectorCount) % sectorCount);
 				break;
 			case "Home":
 				event.preventDefault();
@@ -191,8 +288,10 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 		}
 	}, [
 		disabled,
+		disabledSet,
 		focusSector,
-		sectorCount
+		sectorCount,
+		setSectorDisabled
 	]);
 	const setThresholdClamped = useCallback((next) => {
 		setThresholdValue(clampUnit(next));
@@ -256,6 +355,7 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 	const ringDiameterPercent = clampedThreshold * 100 * THRESHOLD_TRACK_FRACTION;
 	const dotTopPercent = 50 - clampedThreshold * 50 * THRESHOLD_TRACK_FRACTION;
 	const hoverHighlightIndex = !rotatingRing && hoveredSectorIndex !== null && hoveredSectorIndex !== focusedSectorIndex ? hoveredSectorIndex : null;
+	const ringIndices = brushing ? brushedIndices : focusedSectorIndex !== null && !rotatingRing ? [focusedSectorIndex] : [];
 	const safeActiveIndex = Math.min(activeSectorIndex, sectorCount - 1);
 	const saturation = thresholdToSaturation(clampedThreshold);
 	const hasNeedle = typeof bearing === "number" && Number.isFinite(bearing);
@@ -280,6 +380,7 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "col-start-1 row-start-1 grid size-full",
+				"data-brushing": brushing || void 0,
 				"data-rotatable": canRotate || void 0,
 				"data-rotating": rotatingRing || void 0,
 				"data-slot": "directional-color-wheel-sectors",
@@ -290,7 +391,7 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 					return /* @__PURE__ */ jsx("button", {
 						"aria-label": `Bearing sector ${Math.round(sector.startBearing)}° to ${Math.round(sector.endBearing)}°`,
 						"aria-pressed": isEnabled,
-						className: cn("col-start-1 row-start-1 size-full cursor-pointer outline-none motion-safe:transition-opacity motion-safe:duration-150", !isEnabled && "opacity-25", canRotate && "touch-none", canRotate && (rotatingRing ? "cursor-grabbing" : "cursor-grab")),
+						className: cn("col-start-1 row-start-1 size-full cursor-pointer outline-none motion-safe:transition-opacity motion-safe:duration-150", !isEnabled && "opacity-25", canRotate && "touch-none", canRotate && (rotatingRing ? "cursor-grabbing" : "cursor-grab"), brushing && "cursor-crosshair"),
 						"data-sector-id": sector.id,
 						"data-slot": "directional-color-wheel-sector",
 						"data-testid": `${dataTestId}-sector-${sector.index}`,
@@ -312,8 +413,13 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 						onKeyDown: (event) => {
 							handleWedgeKeyDown(event, sector.index);
 						},
-						onLostPointerCapture: endRingRotation,
-						onPointerDown: handleRingPointerDown,
+						onLostPointerCapture: () => {
+							endRingRotation();
+							endBrush();
+						},
+						onPointerDown: (event) => {
+							handleSectorPointerDown(event, sector.index);
+						},
 						onPointerEnter: () => {
 							setHoveredSectorIndex(sector.index);
 						},
@@ -321,7 +427,10 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 							setHoveredSectorIndex((current) => current === sector.index ? null : current);
 						},
 						onPointerMove: handleRingPointerMove,
-						onPointerUp: endRingRotation,
+						onPointerUp: () => {
+							endRingRotation();
+							endBrush();
+						},
 						ref: (node) => {
 							wedgeRefs.current[sector.index] = node;
 						},
@@ -342,21 +451,21 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 				viewBox: "0 0 100 100",
 				children: [
 					/* @__PURE__ */ jsx("circle", {
-						className: "fill-none stroke-border-primary",
+						className: "fill-none stroke-border-secondary",
 						cx: CENTER,
 						cy: CENTER,
 						r: OUTER_RADIUS,
-						strokeWidth: .6
+						strokeWidth: .7
 					}),
 					/* @__PURE__ */ jsx("circle", {
-						className: "fill-none stroke-border-primary",
+						className: "fill-none stroke-border-secondary",
 						cx: CENTER,
 						cy: CENTER,
 						r: INNER_RADIUS,
-						strokeWidth: .6
+						strokeWidth: .7
 					}),
 					/* @__PURE__ */ jsx("circle", {
-						className: "fill-none stroke-border-primary/50",
+						className: "fill-none stroke-border-secondary/60",
 						cx: CENTER,
 						cy: CENTER,
 						r: TICK_OUTER_RADIUS,
@@ -365,9 +474,9 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 					/* @__PURE__ */ jsx("g", {
 						"data-testid": `${dataTestId}-degree-ticks`,
 						children: DEGREE_TICKS.map((tick) => /* @__PURE__ */ jsx("line", {
-							className: tick.isMajor ? "stroke-text-secondary" : "stroke-border-primary/80",
+							className: tick.isMajor ? "stroke-text-secondary" : "stroke-text-disabled",
 							strokeLinecap: "round",
-							strokeWidth: tick.isMajor ? .8 : .4,
+							strokeWidth: tick.isMajor ? .8 : .5,
 							x1: tick.inner.x,
 							x2: tick.outer.x,
 							y1: tick.inner.y,
@@ -378,12 +487,12 @@ const DirectionalColorWheel = ({ accessibleName = "Directional bearing color whe
 						className: "fill-text-primary/15",
 						d: annularSectorPath(CENTER, CENTER, INNER_RADIUS, OUTER_RADIUS, sectors[hoverHighlightIndex].startBearing, sectors[hoverHighlightIndex].endBearing)
 					}) : null,
-					focusedSectorIndex !== null && !rotatingRing && sectors[focusedSectorIndex] ? /* @__PURE__ */ jsx("path", {
+					ringIndices.map((ringIndex) => sectors[ringIndex] ? /* @__PURE__ */ jsx("path", {
 						className: "fill-none stroke-accent",
-						d: annularSectorPath(CENTER, CENTER, INNER_RADIUS + FOCUS_RADIAL_INSET, OUTER_RADIUS - FOCUS_RADIAL_INSET, sectors[focusedSectorIndex].startBearing + FOCUS_ANGULAR_INSET, sectors[focusedSectorIndex].endBearing - FOCUS_ANGULAR_INSET),
+						d: annularSectorPath(CENTER, CENTER, INNER_RADIUS + FOCUS_RADIAL_INSET, OUTER_RADIUS - FOCUS_RADIAL_INSET, sectors[ringIndex].startBearing + FOCUS_ANGULAR_INSET, sectors[ringIndex].endBearing - FOCUS_ANGULAR_INSET),
 						strokeLinejoin: "round",
 						strokeWidth: FOCUS_STROKE_WIDTH
-					}) : null,
+					}, ringIndex) : null),
 					BEZEL_LABELS.map((label) => /* @__PURE__ */ jsx("text", {
 						className: label.isCardinal ? "font-medium fill-text-secondary text-[6px]" : "fill-text-secondary text-[4px] tabular-nums",
 						dominantBaseline: "central",