@spear-ai/spectral 1.17.10 → 1.18.1

package/dist/Dialog.js

@@ -52,7 +52,7 @@ const DialogContent = ({ children, className, dialogOverlay = true, onEscapeKeyD
 		"data-slot": "dialog-portal",
 		"data-testid": "spectral-dialog-portal",
 		children: [dialogOverlay && /* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
-			className: cn("max-w-xl gap-4 rounded-lg p-6 shadow-lg has-[[data-slot=dialog-footer]]:pb-0 fixed top-[50%] left-[50%] z-50 flex max-h-[90vh] w-full -translate-x-1/2 -translate-y-1/2 flex-col overflow-y-auto overscroll-contain bg-dialog-bg", "motion-safe:data-[state=open]:duration-200 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:slide-in-from-bottom-20 motion-safe:data-[state=open]:zoom-in-100!", "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95", RemoveScroll.classNames.fullWidth, className),
+			className: cn("max-w-xl gap-4 rounded-lg p-6 shadow-elevation-3 has-[[data-slot=dialog-footer]]:pb-0 fixed top-[50%] left-[50%] z-50 flex max-h-[90vh] w-full -translate-x-1/2 -translate-y-1/2 flex-col overflow-y-auto overscroll-contain bg-dialog-bg", "motion-safe:data-[state=open]:duration-200 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:slide-in-from-bottom-20 motion-safe:data-[state=open]:zoom-in-100!", "motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95", RemoveScroll.classNames.fullWidth, className),
 			"data-slot": "dialog-content",
 			"data-testid": "spectral-dialog-content",
 			onEscapeKeyDown,

package/dist/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":[],"sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { CloseIcon } from '@components/Icons/CloseIcon'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cn } from '@utils/twUtils'\nimport { isValidElement, type ComponentProps, type ReactNode } from 'react'\nimport { RemoveScroll } from 'react-remove-scroll'\n\nconst Dialog = ({\n  isOpen,\n  modal = false,\n  ...props\n}: Omit<ComponentProps<typeof DialogPrimitive.Root>, 'open'> & {\n  isOpen?: boolean\n  dialogOverlay?: boolean\n}) => {\n  return <DialogPrimitive.Root open={isOpen} modal={modal} data-slot='dialog' data-testid='spectral-dialog' {...props} />\n}\n\nconst DialogTrigger = ({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>) => {\n  return <DialogPrimitive.Trigger asChild data-testid='spectral-dialog-trigger' {...props} />\n}\n\nconst DialogPortal = ({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>) => {\n  return <DialogPrimitive.Portal data-slot='dialog-portal' data-testid='dialog-portal' {...props} />\n}\n\nconst DialogClose = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Close>) => {\n  return <DialogPrimitive.Close asChild data-slot='dialog-close' data-testid='spectral-dialog-close' {...props} className={cn('hover:cursor-pointer', className)} />\n}\n\nconst DialogOverlay = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>) => {\n  return (\n    <DialogPrimitive.Overlay\n      className={cn('inset-0 bg-black/50 backdrop-blur-sm fixed z-50 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:animate-out',\n      'motion-safe:data-[state=closed]:fade-out-0', className)}\n      data-slot='dialog-overlay'\n      data-testid='spectral-dialog-overlay'\n      {...props}\n    />\n  )\n}\n\nconst DialogContent = ({\n  children,\n  className,\n  dialogOverlay = true,\n  onEscapeKeyDown,\n  onInteractOutside,\n  onPointerDownOutside,\n  showCloseButton = true,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Content> & {\n  dialogOverlay?: boolean\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n  onInteractOutside?: (event: PointerEvent | FocusEvent) => void\n  onPointerDownOutside?: (event: PointerEvent) => void\n  showCloseButton?: boolean\n}) => {\n  return (\n    <DialogPortal data-slot='dialog-portal' data-testid='spectral-dialog-portal'>\n      {dialogOverlay && <DialogOverlay />}\n      <DialogPrimitive.Content\n        className={cn(\n          'max-w-xl gap-4 rounded-lg p-6 shadow-lg has-[[data-slot=dialog-footer]]:pb-0 fixed top-[50%] left-[50%] z-50 flex max-h-[90vh] w-full -translate-x-1/2 -translate-y-1/2 flex-col overflow-y-auto overscroll-contain bg-dialog-bg',\n          'motion-safe:data-[state=open]:duration-200 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:slide-in-from-bottom-20 motion-safe:data-[state=open]:zoom-in-100!',\n          'motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95',\n          RemoveScroll.classNames.fullWidth,\n          className,\n        )}\n        data-slot='dialog-content'\n        data-testid='spectral-dialog-content'\n        onEscapeKeyDown={onEscapeKeyDown}\n        onInteractOutside={onInteractOutside}\n        onPointerDownOutside={onPointerDownOutside}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            className={`focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-accent data-[state=open]:text-text-primary top-4 right-4 rounded-xs absolute opacity-70 transition-opacity hover:opacity-100 hover:cursor-pointer disabled:pointer-events-none data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:shrink-0`}\n            data-slot='dialog-close'\n            data-testid='spectral-dialog-close'\n          >\n            <CloseIcon size={18} />\n            <span className='sr-only'>Close dialog</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nconst DialogHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('gap-2 sm:text-left flex flex-col text-center', className)} data-slot='dialog-header' data-testid='spectral-dialog-header' {...props} />\n}\n\nconst DialogFooter = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('gap-2 sm:flex-row sm:justify-end bottom-0 py-4 px-6 -mx-6 sticky z-10 flex flex-col-reverse bg-dialog-bg/85', className)} data-slot='dialog-footer' data-testid='spectral-dialog-footer' {...props} />\n}\n\nconst hasTextContent = (value: ReactNode) => (typeof value === 'string' ? value.trim().length > 0 : typeof value === 'number')\n\nconst DialogTitle = ({ children, className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) => {\n  if (hasTextContent(children)) {\n    return <DialogPrimitive.Title className={cn('text-2xl font-semibold leading-none', className)} data-slot='dialog-title' data-testid='spectral-dialog-title' {...props}>{children}</DialogPrimitive.Title>\n  }\n\n  if (isValidElement(children)) {\n    return <DialogPrimitive.Title asChild data-slot='dialog-title' data-testid='spectral-dialog-title' {...props}>{children}</DialogPrimitive.Title>\n  }\n\n  return <DialogPrimitive.Title className={className} data-slot='dialog-title' data-testid='spectral-dialog-title' {...props}>{children}</DialogPrimitive.Title>\n}\n\nconst DialogDescription = ({ children, className, ...props }: ComponentProps<typeof DialogPrimitive.Description>) => {\n  if (hasTextContent(children)) {\n    return <DialogPrimitive.Description className={cn('text-muted-foreground text-sm', className)} data-slot='dialog-description' data-testid='spectral-dialog-description' {...props}>{children}</DialogPrimitive.Description>\n  }\n\n  if (isValidElement(children)) {\n    return <DialogPrimitive.Description asChild data-slot='dialog-description' data-testid='spectral-dialog-description' {...props}>{children}</DialogPrimitive.Description>\n  }\n\n  return <DialogPrimitive.Description className={className} data-slot='dialog-description' data-testid='spectral-dialog-description' {...props}>{children}</DialogPrimitive.Description>\n}\n\nexport { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger }\n"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","names":[],"sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { CloseIcon } from '@components/Icons/CloseIcon'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport { cn } from '@utils/twUtils'\nimport { isValidElement, type ComponentProps, type ReactNode } from 'react'\nimport { RemoveScroll } from 'react-remove-scroll'\n\nconst Dialog = ({\n  isOpen,\n  modal = false,\n  ...props\n}: Omit<ComponentProps<typeof DialogPrimitive.Root>, 'open'> & {\n  isOpen?: boolean\n  dialogOverlay?: boolean\n}) => {\n  return <DialogPrimitive.Root open={isOpen} modal={modal} data-slot='dialog' data-testid='spectral-dialog' {...props} />\n}\n\nconst DialogTrigger = ({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>) => {\n  return <DialogPrimitive.Trigger asChild data-testid='spectral-dialog-trigger' {...props} />\n}\n\nconst DialogPortal = ({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>) => {\n  return <DialogPrimitive.Portal data-slot='dialog-portal' data-testid='dialog-portal' {...props} />\n}\n\nconst DialogClose = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Close>) => {\n  return <DialogPrimitive.Close asChild data-slot='dialog-close' data-testid='spectral-dialog-close' {...props} className={cn('hover:cursor-pointer', className)} />\n}\n\nconst DialogOverlay = ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>) => {\n  return (\n    <DialogPrimitive.Overlay\n      className={cn('inset-0 bg-black/50 backdrop-blur-sm fixed z-50 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:animate-out',\n      'motion-safe:data-[state=closed]:fade-out-0', className)}\n      data-slot='dialog-overlay'\n      data-testid='spectral-dialog-overlay'\n      {...props}\n    />\n  )\n}\n\nconst DialogContent = ({\n  children,\n  className,\n  dialogOverlay = true,\n  onEscapeKeyDown,\n  onInteractOutside,\n  onPointerDownOutside,\n  showCloseButton = true,\n  ...props\n}: ComponentProps<typeof DialogPrimitive.Content> & {\n  dialogOverlay?: boolean\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n  onInteractOutside?: (event: PointerEvent | FocusEvent) => void\n  onPointerDownOutside?: (event: PointerEvent) => void\n  showCloseButton?: boolean\n}) => {\n  return (\n    <DialogPortal data-slot='dialog-portal' data-testid='spectral-dialog-portal'>\n      {dialogOverlay && <DialogOverlay />}\n      <DialogPrimitive.Content\n        className={cn(\n          'max-w-xl gap-4 rounded-lg p-6 shadow-elevation-3 has-[[data-slot=dialog-footer]]:pb-0 fixed top-[50%] left-[50%] z-50 flex max-h-[90vh] w-full -translate-x-1/2 -translate-y-1/2 flex-col overflow-y-auto overscroll-contain bg-dialog-bg',\n          'motion-safe:data-[state=open]:duration-200 motion-safe:data-[state=open]:animate-in motion-safe:data-[state=open]:slide-in-from-bottom-20 motion-safe:data-[state=open]:zoom-in-100!',\n          'motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95',\n          RemoveScroll.classNames.fullWidth,\n          className,\n        )}\n        data-slot='dialog-content'\n        data-testid='spectral-dialog-content'\n        onEscapeKeyDown={onEscapeKeyDown}\n        onInteractOutside={onInteractOutside}\n        onPointerDownOutside={onPointerDownOutside}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            className={`focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-accent data-[state=open]:text-text-primary top-4 right-4 rounded-xs absolute opacity-70 transition-opacity hover:opacity-100 hover:cursor-pointer disabled:pointer-events-none data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:shrink-0`}\n            data-slot='dialog-close'\n            data-testid='spectral-dialog-close'\n          >\n            <CloseIcon size={18} />\n            <span className='sr-only'>Close dialog</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nconst DialogHeader = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('gap-2 sm:text-left flex flex-col text-center', className)} data-slot='dialog-header' data-testid='spectral-dialog-header' {...props} />\n}\n\nconst DialogFooter = ({ className, ...props }: ComponentProps<'div'>) => {\n  return <div className={cn('gap-2 sm:flex-row sm:justify-end bottom-0 py-4 px-6 -mx-6 sticky z-10 flex flex-col-reverse bg-dialog-bg/85', className)} data-slot='dialog-footer' data-testid='spectral-dialog-footer' {...props} />\n}\n\nconst hasTextContent = (value: ReactNode) => (typeof value === 'string' ? value.trim().length > 0 : typeof value === 'number')\n\nconst DialogTitle = ({ children, className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) => {\n  if (hasTextContent(children)) {\n    return <DialogPrimitive.Title className={cn('text-2xl font-semibold leading-none', className)} data-slot='dialog-title' data-testid='spectral-dialog-title' {...props}>{children}</DialogPrimitive.Title>\n  }\n\n  if (isValidElement(children)) {\n    return <DialogPrimitive.Title asChild data-slot='dialog-title' data-testid='spectral-dialog-title' {...props}>{children}</DialogPrimitive.Title>\n  }\n\n  return <DialogPrimitive.Title className={className} data-slot='dialog-title' data-testid='spectral-dialog-title' {...props}>{children}</DialogPrimitive.Title>\n}\n\nconst DialogDescription = ({ children, className, ...props }: ComponentProps<typeof DialogPrimitive.Description>) => {\n  if (hasTextContent(children)) {\n    return <DialogPrimitive.Description className={cn('text-muted-foreground text-sm', className)} data-slot='dialog-description' data-testid='spectral-dialog-description' {...props}>{children}</DialogPrimitive.Description>\n  }\n\n  if (isValidElement(children)) {\n    return <DialogPrimitive.Description asChild data-slot='dialog-description' data-testid='spectral-dialog-description' {...props}>{children}</DialogPrimitive.Description>\n  }\n\n  return <DialogPrimitive.Description className={className} data-slot='dialog-description' data-testid='spectral-dialog-description' {...props}>{children}</DialogPrimitive.Description>\n}\n\nexport { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger }\n"],"mappings":"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"}

package/dist/DirectionalColorWheel/DirectionalColorWheelDisclosure.d.ts

@@ -0,0 +1,68 @@
+'use client';
+import { ReactNode, Ref } 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';
+interface DirectionalColorWheelDisclosureProps {
+  /** Accessible name for the collapsed trigger button (`aria-expanded` conveys the open state). */
+  accessibleName?: string;
+  /** How the panel aligns to the trigger. Defaults to `start` for a corner-anchored feed widget. */
+  align?: DisclosureAlign;
+  /** The expandable content: the bare wheel, or the wheel framed by the GRAMS controls. */
+  children: ReactNode;
+  /** Layout-only class extension for the expanded panel. */
+  className?: string;
+  /**
+   * Override the collapsed affordance. Defaults to a {@link DirectionalColorWheelGlyph} mini
+   * compass; pass a palette-matched glyph (or any node) to mirror the expanded wheel's colours.
+   */
+  collapsedIcon?: ReactNode;
+  /** Min distance (px) from the viewport edge before the panel flips/shifts. */
+  collisionPadding?: number;
+  dataTestId?: string;
+  /** Uncontrolled initial expanded state. */
+  defaultExpanded?: boolean;
+  disabled?: boolean;
+  /**
+   * Controlled expanded state. `undefined`/`null` leaves the disclosure uncontrolled, so Horizon
+   * can gate the feature with a single nullable value (PAT-028).
+   */
+  expanded?: boolean | null;
+  /** Called whenever the disclosure expands or collapses (click, Esc, or outside dismiss). */
+  onExpandedChange?: (expanded: boolean) => void;
+  ref?: Ref<HTMLButtonElement>;
+  /** Which side of the trigger the panel grows toward. Defaults to `top` (icon at a bottom corner). */
+  side?: DisclosureSide;
+  /** Gap (px) between the trigger and the panel. */
+  sideOffset?: number;
+  /** Layout-only class extension for the collapsed trigger button. */
+  triggerClassName?: string;
+  /** Panel width: a pixel number or a CSS width string. Defaults to `'fit-content'` (hugs content). */
+  width?: number | string;
+}
+declare function DirectionalColorWheelDisclosure({
+  accessibleName,
+  align,
+  children,
+  className,
+  collapsedIcon,
+  collisionPadding,
+  dataTestId,
+  defaultExpanded,
+  disabled,
+  expanded,
+  onExpandedChange,
+  ref,
+  side,
+  sideOffset,
+  triggerClassName,
+  width
+}: DirectionalColorWheelDisclosureProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace DirectionalColorWheelDisclosure {
+  var displayName: string;
+}
+//#endregion
+export { DirectionalColorWheelDisclosure, DirectionalColorWheelDisclosureProps };
+//# sourceMappingURL=DirectionalColorWheelDisclosure.d.ts.map

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

@@ -0,0 +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;EAWU;EATV,eAAA;EACA,QAAA;EAUqB;;;;EALrB,QAAA;EAlBA;EAoBA,gBAAA,IAAoB,QAAA;EACpB,GAAA,GAAM,GAAA,CAAI,iBAAA;EAdV;EAgBA,IAAA,GAAO,cAAA;EAdP;EAgBA,UAAA;EAbA;EAeA,gBAAA;EATA;EAWA,KAAA;AAAA;AAAA;EAaA,cAAA;EACA,KAAA;EACA,QAAA;EACA,SAAA;EACA,aAAA;EACA,gBAAA;EACA,UAAA;EACA,eAAA;EACA,QAAA;EACA,QAAA;EACA,gBAAA;EACA,GAAA;EACA,IAAA;EACA,UAAA;EACA,gBAAA;EACA;AAAA,GACC,oCAAA,GAAoC,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/DirectionalColorWheel/DirectionalColorWheelDisclosure.js

@@ -0,0 +1,66 @@
+'use client';
+import { cn } from "../utils/twUtils.js";
+import { Card } from "../DataCard/Card.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popover.js";
+import { DirectionalColorWheelGlyph } from "./DirectionalColorWheelGlyph.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/DirectionalColorWheel/DirectionalColorWheelDisclosure.tsx
+/**
+* Collapse/expand affordance for the {@link DirectionalColorWheel}, built on the Spectral
+* {@link Popover} primitive so it inherits corner anchoring, click-outside/Esc dismissal, focus
+* management, and `aria-expanded`/`aria-controls` for free. Collapsed it is a small compass glyph
+* (a real `<button>`); expanded it reveals whatever `children` it wraps — the bare wheel, or the
+* wheel plus the GRAMS Color Angle / Threshold / Sectors controls — inside a Spectral {@link Card}
+* 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.
+*/
+const DirectionalColorWheelDisclosure = ({ accessibleName = "Directional color legend", align = "start", children, className, collapsedIcon, collisionPadding = 8, dataTestId = "spectral-directional-color-wheel-disclosure", defaultExpanded, disabled = false, expanded, onExpandedChange, ref, side = "top", sideOffset = 8, triggerClassName, width = "fit-content" }) => {
+	const panelRef = useRef(null);
+	const panelWidth = typeof width === "number" ? `${width}px` : width;
+	return /* @__PURE__ */ jsxs(Popover, {
+		defaultOpen: defaultExpanded,
+		onOpenChange: onExpandedChange,
+		open: expanded ?? void 0,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			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),
+				"data-slot": "directional-color-wheel-disclosure-trigger",
+				"data-testid": `${dataTestId}-trigger`,
+				disabled,
+				ref,
+				type: "button",
+				children: collapsedIcon ?? /* @__PURE__ */ jsx(DirectionalColorWheelGlyph, {})
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			align,
+			className: "p-0 flex items-center justify-center overflow-visible border-none bg-transparent shadow-none",
+			collisionPadding,
+			"data-slot": "directional-color-wheel-disclosure-content",
+			"data-testid": `${dataTestId}-content`,
+			onOpenAutoFocus: (event) => {
+				event.preventDefault();
+				panelRef.current?.focus();
+			},
+			side,
+			sideOffset,
+			width: "fit-content",
+			children: /* @__PURE__ */ jsx(Card, {
+				className: cn("outline-none", className),
+				"data-slot": "directional-color-wheel-disclosure-panel",
+				ref: panelRef,
+				style: { width: panelWidth },
+				tabIndex: -1,
+				children
+			})
+		})]
+	});
+};
+DirectionalColorWheelDisclosure.displayName = "DirectionalColorWheelDisclosure";
+
+//#endregion
+export { DirectionalColorWheelDisclosure };
+//# sourceMappingURL=DirectionalColorWheelDisclosure.js.map

package/dist/DirectionalColorWheel/DirectionalColorWheelDisclosure.js.map

@@ -0,0 +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 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   * 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  /** 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.\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  expanded,\n  onExpandedChange,\n  ref,\n  side = 'top',\n  sideOffset = 8,\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        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          style={{ width: panelWidth }}\n          tabIndex={-1}\n        >\n          {children}\n        </Card>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nDirectionalColorWheelDisclosure.displayName = 'DirectionalColorWheelDisclosure'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwDA,MAAa,mCAAmC,EAC9C,iBAAiB,4BACjB,QAAQ,SACR,UACA,WACA,eACA,mBAAmB,GACnB,aAAa,+CACb,iBACA,WAAW,OACX,UACA,kBACA,KACA,OAAO,OACP,aAAa,GACb,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;GAC3B,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;IACL,OAAO,EAAE,OAAO,YAAY;IAC5B,UAAU;IAET;IACI;GACQ,EACT;;;AAId,gCAAgC,cAAc"}

package/dist/DirectionalColorWheel/DirectionalColorWheelGlyph.d.ts

@@ -0,0 +1,44 @@
+'use client';
+import { DirectionalColorStop, DirectionalSectorCount } from "./directionalColorWheelMath.js";
+import { Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/DirectionalColorWheel/DirectionalColorWheelGlyph.d.ts
+interface DirectionalColorWheelGlyphProps {
+  /** Layout-only class extension (margins/padding). */
+  className?: string;
+  /** "Color Angle": degrees the colours are rotated clockwise, mirroring the full wheel. */
+  colorAngle?: number;
+  /** Same advanced parity resolver as the wheel; when set it wins over `colorStops`. */
+  colorForBearing?: ((bearingDegrees: number) => string) | null;
+  /** Palette stops; defaults to the directional DIFAR palette (matches the full wheel). */
+  colorStops?: DirectionalColorStop[] | null;
+  dataTestId?: string;
+  /**
+   * Compass bearing (degrees) the miniature needle points at. Defaults to `0` (North) so the
+   * glyph always reads as a compass; `null` still renders a North-pointing needle.
+   */
+  needleBearing?: number | null;
+  ref?: Ref<SVGSVGElement>;
+  /** Number of coloured wedges drawn in the ring. */
+  sectorCount?: DirectionalSectorCount;
+  /** Rendered diameter in pixels. */
+  size?: number;
+}
+declare function DirectionalColorWheelGlyph({
+  className,
+  colorAngle,
+  colorForBearing,
+  colorStops,
+  dataTestId,
+  needleBearing,
+  ref,
+  sectorCount,
+  size
+}: DirectionalColorWheelGlyphProps): _$react_jsx_runtime0.JSX.Element;
+declare namespace DirectionalColorWheelGlyph {
+  var displayName: string;
+}
+//#endregion
+export { DirectionalColorWheelGlyph, DirectionalColorWheelGlyphProps };
+//# sourceMappingURL=DirectionalColorWheelGlyph.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DirectionalColorWheelGlyph.d.ts","names":[],"sources":["../../src/components/DirectionalColorWheel/DirectionalColorWheelGlyph.tsx"],"mappings":";;;;;;UAIiB,+BAAA;;EAEf,SAAA;EAFe;EAIf,UAAA;;EAEA,eAAA,KAAoB,cAAA;EASV;EAPV,UAAA,GAAa,oBAAA;EACb,UAAA;EAQoC;;;;EAHpC,aAAA;EACA,GAAA,GAAM,GAAA,CAAI,aAAA;EAPV;EASA,WAAA,GAAc,sBAAA;EARd;EAUA,IAAA;AAAA;AAAA;EA0B2C,SAAA;EAAW,UAAA;EAAgB,eAAA;EAAiB,UAAA;EAAY,UAAA;EAAuD,aAAA;EAAe,GAAA;EAAK,WAAA;EAAkB;AAAA,GAAa,+BAAA,GAA+B,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/DirectionalColorWheel/DirectionalColorWheelGlyph.js

@@ -0,0 +1,138 @@
+'use client';
+import { cn } from "../utils/twUtils.js";
+import { annularSectorPath, normalizeBearing, polarToCartesian, resolveSectorColor, sectorBearingRange } from "./directionalColorWheelMath.js";
+import { useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/DirectionalColorWheel/DirectionalColorWheelGlyph.tsx
+const CENTER = 50;
+const OUTER_RADIUS = 46;
+const INNER_RADIUS = 27;
+const TICK_INNER_RADIUS = 47.5;
+const TICK_OUTER_RADIUS = 49.5;
+const NEEDLE_TIP_RADIUS = 43;
+const NEEDLE_BASE_RADIUS = INNER_RADIUS;
+const NEEDLE_HALF_WIDTH_DEGREES = 8;
+const PIVOT_RADIUS = 5;
+const CARDINAL_TICKS = [
+	0,
+	90,
+	180,
+	270
+].map((bearing) => ({
+	bearing,
+	inner: polarToCartesian(CENTER, CENTER, TICK_INNER_RADIUS, bearing),
+	outer: polarToCartesian(CENTER, CENTER, TICK_OUTER_RADIUS, bearing)
+}));
+/**
+* Miniature, decorative render of the {@link DirectionalColorWheel} colour ring with a compass
+* needle — the collapsed affordance for {@link DirectionalColorWheelDisclosure}. It reuses the
+* wheel's geometry/colour helpers (and palette props) so it stays a true legend in miniature. It
+* is `aria-hidden`; the surrounding trigger button carries the accessible name.
+*/
+const DirectionalColorWheelGlyph = ({ className, colorAngle = 0, colorForBearing, colorStops, dataTestId = "spectral-directional-color-wheel-glyph", needleBearing, ref, sectorCount = 12, size = 28 }) => {
+	const hubGradientId = `directional-glyph-hub-${useId().replaceAll(":", "")}`;
+	const sectors = useMemo(() => Array.from({ length: sectorCount }, (_, index) => {
+		const range = sectorBearingRange(index, sectorCount);
+		return {
+			color: resolveSectorColor({
+				colorForBearing,
+				colorStops
+			}, (range.startBearing + range.endBearing) / 2, colorAngle),
+			key: `${range.startBearing}-${range.endBearing}`,
+			path: annularSectorPath(CENTER, CENTER, INNER_RADIUS, OUTER_RADIUS, range.startBearing, range.endBearing)
+		};
+	}), [
+		colorAngle,
+		colorForBearing,
+		colorStops,
+		sectorCount
+	]);
+	const bearing = normalizeBearing(typeof needleBearing === "number" && Number.isFinite(needleBearing) ? needleBearing : 0);
+	const needleTip = polarToCartesian(CENTER, CENTER, NEEDLE_TIP_RADIUS, bearing);
+	const needleBaseMid = polarToCartesian(CENTER, CENTER, NEEDLE_BASE_RADIUS, bearing);
+	const needleLeft = polarToCartesian(CENTER, CENTER, NEEDLE_BASE_RADIUS, bearing - NEEDLE_HALF_WIDTH_DEGREES);
+	const needleRight = polarToCartesian(CENTER, CENTER, NEEDLE_BASE_RADIUS, bearing + NEEDLE_HALF_WIDTH_DEGREES);
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": true,
+		className: cn("shrink-0", className),
+		"data-slot": "directional-color-wheel-glyph",
+		"data-testid": dataTestId,
+		height: size,
+		ref,
+		viewBox: "0 0 100 100",
+		width: size,
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("radialGradient", {
+				cx: "38%",
+				cy: "30%",
+				id: hubGradientId,
+				r: "75%",
+				children: [/* @__PURE__ */ jsx("stop", {
+					offset: "0%",
+					stopColor: "var(--color-level-four)"
+				}), /* @__PURE__ */ jsx("stop", {
+					offset: "82%",
+					stopColor: "var(--color-level-one)"
+				})]
+			}) }),
+			/* @__PURE__ */ jsx("g", {
+				"data-slot": "directional-color-wheel-glyph-ring",
+				children: sectors.map((sector) => /* @__PURE__ */ jsx("path", {
+					d: sector.path,
+					fill: sector.color
+				}, sector.key))
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				className: "fill-none stroke-border-primary",
+				cx: CENTER,
+				cy: CENTER,
+				r: OUTER_RADIUS,
+				strokeWidth: 1.5
+			}),
+			/* @__PURE__ */ jsx("g", {
+				"data-slot": "directional-color-wheel-glyph-ticks",
+				children: CARDINAL_TICKS.map((tick) => /* @__PURE__ */ jsx("line", {
+					className: "stroke-text-secondary",
+					strokeLinecap: "round",
+					strokeWidth: 1.5,
+					x1: tick.inner.x,
+					x2: tick.outer.x,
+					y1: tick.inner.y,
+					y2: tick.outer.y
+				}, tick.bearing))
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				className: "stroke-border-primary",
+				cx: CENTER,
+				cy: CENTER,
+				fill: `url(#${hubGradientId})`,
+				r: INNER_RADIUS,
+				strokeWidth: 1.5
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				"data-slot": "directional-color-wheel-glyph-needle",
+				children: [/* @__PURE__ */ jsx("polygon", {
+					className: "fill-danger-500",
+					points: `${needleTip.x},${needleTip.y} ${needleLeft.x},${needleLeft.y} ${needleBaseMid.x},${needleBaseMid.y}`
+				}), /* @__PURE__ */ jsx("polygon", {
+					className: "fill-danger-400",
+					points: `${needleTip.x},${needleTip.y} ${needleBaseMid.x},${needleBaseMid.y} ${needleRight.x},${needleRight.y}`
+				})]
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				className: "fill-level-four stroke-border-primary",
+				cx: CENTER,
+				cy: CENTER,
+				r: PIVOT_RADIUS,
+				strokeWidth: 1.5
+			})
+		]
+	});
+};
+DirectionalColorWheelGlyph.displayName = "DirectionalColorWheelGlyph";
+
+//#endregion
+export { DirectionalColorWheelGlyph };
+//# sourceMappingURL=DirectionalColorWheelGlyph.js.map

package/dist/DirectionalColorWheel/DirectionalColorWheelGlyph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectionalColorWheelGlyph.js","names":[],"sources":["../../src/components/DirectionalColorWheel/DirectionalColorWheelGlyph.tsx"],"sourcesContent":["import { cn } from '@utils/twUtils'\nimport { useId, useMemo, type Ref } from 'react'\nimport { annularSectorPath, normalizeBearing, polarToCartesian, resolveSectorColor, sectorBearingRange, type DirectionalColorStop, type DirectionalSectorCount } from './directionalColorWheelMath'\n\nexport interface DirectionalColorWheelGlyphProps {\n  /** Layout-only class extension (margins/padding). */\n  className?: string\n  /** \"Color Angle\": degrees the colours are rotated clockwise, mirroring the full wheel. */\n  colorAngle?: number\n  /** Same advanced parity resolver as the wheel; when set it wins over `colorStops`. */\n  colorForBearing?: ((bearingDegrees: number) => string) | null\n  /** Palette stops; defaults to the directional DIFAR palette (matches the full wheel). */\n  colorStops?: DirectionalColorStop[] | null\n  dataTestId?: string\n  /**\n   * Compass bearing (degrees) the miniature needle points at. Defaults to `0` (North) so the\n   * glyph always reads as a compass; `null` still renders a North-pointing needle.\n   */\n  needleBearing?: number | null\n  ref?: Ref<SVGSVGElement>\n  /** Number of coloured wedges drawn in the ring. */\n  sectorCount?: DirectionalSectorCount\n  /** Rendered diameter in pixels. */\n  size?: number\n}\n\n// 0..100 viewBox mirroring the wheel: coloured ring, cardinal ticks, gradient hub, two-facet needle.\nconst CENTER = 50\nconst OUTER_RADIUS = 46\nconst INNER_RADIUS = 27\nconst TICK_INNER_RADIUS = 47.5\nconst TICK_OUTER_RADIUS = 49.5\nconst NEEDLE_TIP_RADIUS = 43\nconst NEEDLE_BASE_RADIUS = INNER_RADIUS\nconst NEEDLE_HALF_WIDTH_DEGREES = 8\nconst PIVOT_RADIUS = 5\n// Short rim ticks at N/E/S/W orient the glyph as a compass without crowding it with labels.\nconst CARDINAL_TICKS = [0, 90, 180, 270].map((bearing) => ({\n  bearing,\n  inner: polarToCartesian(CENTER, CENTER, TICK_INNER_RADIUS, bearing),\n  outer: polarToCartesian(CENTER, CENTER, TICK_OUTER_RADIUS, bearing),\n}))\n\n/**\n * Miniature, decorative render of the {@link DirectionalColorWheel} colour ring with a compass\n * needle — the collapsed affordance for {@link DirectionalColorWheelDisclosure}. It reuses the\n * wheel's geometry/colour helpers (and palette props) so it stays a true legend in miniature. It\n * is `aria-hidden`; the surrounding trigger button carries the accessible name.\n */\nexport const DirectionalColorWheelGlyph = ({ className, colorAngle = 0, colorForBearing, colorStops, dataTestId = 'spectral-directional-color-wheel-glyph', needleBearing, ref, sectorCount = 12, size = 28 }: DirectionalColorWheelGlyphProps) => {\n  const hubGradientId = `directional-glyph-hub-${useId().replaceAll(':', '')}`\n\n  const sectors = useMemo(\n    () =>\n      Array.from({ length: sectorCount }, (_, index) => {\n        const range = sectorBearingRange(index, sectorCount)\n        return {\n          color: resolveSectorColor({ colorForBearing, colorStops }, (range.startBearing + range.endBearing) / 2, colorAngle),\n          key: `${range.startBearing}-${range.endBearing}`,\n          path: annularSectorPath(CENTER, CENTER, INNER_RADIUS, OUTER_RADIUS, range.startBearing, range.endBearing),\n        }\n      }),\n    [colorAngle, colorForBearing, colorStops, sectorCount],\n  )\n\n  const bearing = normalizeBearing(typeof needleBearing === 'number' && Number.isFinite(needleBearing) ? needleBearing : 0)\n  const needleTip = polarToCartesian(CENTER, CENTER, NEEDLE_TIP_RADIUS, bearing)\n  const needleBaseMid = polarToCartesian(CENTER, CENTER, NEEDLE_BASE_RADIUS, bearing)\n  const needleLeft = polarToCartesian(CENTER, CENTER, NEEDLE_BASE_RADIUS, bearing - NEEDLE_HALF_WIDTH_DEGREES)\n  const needleRight = polarToCartesian(CENTER, CENTER, NEEDLE_BASE_RADIUS, bearing + NEEDLE_HALF_WIDTH_DEGREES)\n\n  return (\n    <svg\n      aria-hidden\n      className={cn('shrink-0', className)}\n      data-slot='directional-color-wheel-glyph'\n      data-testid={dataTestId}\n      height={size}\n      ref={ref}\n      viewBox='0 0 100 100'\n      width={size}\n      xmlns='http://www.w3.org/2000/svg'\n    >\n      <defs>\n        <radialGradient\n          cx='38%'\n          cy='30%'\n          id={hubGradientId}\n          r='75%'\n        >\n          <stop\n            offset='0%'\n            stopColor='var(--color-level-four)'\n          />\n          <stop\n            offset='82%'\n            stopColor='var(--color-level-one)'\n          />\n        </radialGradient>\n      </defs>\n      <g data-slot='directional-color-wheel-glyph-ring'>\n        {sectors.map((sector) => (\n          <path\n            d={sector.path}\n            fill={sector.color}\n            key={sector.key}\n          />\n        ))}\n      </g>\n      <circle\n        className='fill-none stroke-border-primary'\n        cx={CENTER}\n        cy={CENTER}\n        r={OUTER_RADIUS}\n        strokeWidth={1.5}\n      />\n      <g data-slot='directional-color-wheel-glyph-ticks'>\n        {CARDINAL_TICKS.map((tick) => (\n          <line\n            className='stroke-text-secondary'\n            key={tick.bearing}\n            strokeLinecap='round'\n            strokeWidth={1.5}\n            x1={tick.inner.x}\n            x2={tick.outer.x}\n            y1={tick.inner.y}\n            y2={tick.outer.y}\n          />\n        ))}\n      </g>\n      <circle\n        className='stroke-border-primary'\n        cx={CENTER}\n        cy={CENTER}\n        fill={`url(#${hubGradientId})`}\n        r={INNER_RADIUS}\n        strokeWidth={1.5}\n      />\n      <g data-slot='directional-color-wheel-glyph-needle'>\n        <polygon\n          className='fill-danger-500'\n          points={`${needleTip.x},${needleTip.y} ${needleLeft.x},${needleLeft.y} ${needleBaseMid.x},${needleBaseMid.y}`}\n        />\n        <polygon\n          className='fill-danger-400'\n          points={`${needleTip.x},${needleTip.y} ${needleBaseMid.x},${needleBaseMid.y} ${needleRight.x},${needleRight.y}`}\n        />\n      </g>\n      <circle\n        className='fill-level-four stroke-border-primary'\n        cx={CENTER}\n        cy={CENTER}\n        r={PIVOT_RADIUS}\n        strokeWidth={1.5}\n      />\n    </svg>\n  )\n}\n\nDirectionalColorWheelGlyph.displayName = 'DirectionalColorWheelGlyph'\n"],"mappings":"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"}

package/dist/DirectionalColorWheel/directionalColorWheelMath.d.ts

@@ -0,0 +1,93 @@
+'use client';
+//#region src/components/DirectionalColorWheel/directionalColorWheelMath.d.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. */
+declare const SUPPORTED_SECTOR_COUNTS: readonly [4, 8, 12, 16, 20, 24, 32];
+type DirectionalSectorCount = (typeof SUPPORTED_SECTOR_COUNTS)[number];
+/** A palette stop, mirroring the shape of Horizon's `DIRECTIONAL_OKLCH_STOP_LIST`. */
+interface DirectionalColorStop {
+  /** Any CSS colour (an `oklch(…)` string keeps parity with the compositor's palette). */
+  color: string;
+  /** Position along the palette, `0` (bearing 0°) to `1` (bearing 360°). */
+  position: number;
+}
+/**
+ * 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.
+ */
+declare const DEFAULT_DIRECTIONAL_COLOR_STOPS: DirectionalColorStop[];
+/** Wrap any angle into `[0, 360)`. */
+declare const normalizeBearing: (degrees: number) => number;
+/**
+ * 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`).
+ */
+declare const bearingFromComponents: (sineValue: number, cosineValue: number) => number;
+/**
+ * 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.
+ */
+declare const bearingToPalettePosition: (bearing: number, colorAngle: number) => number;
+/** Point on the wheel for a bearing, using the compass convention (0° at top, clockwise). */
+declare const polarToCartesian: (centerX: number, centerY: number, radius: number, bearing: number) => {
+  x: number;
+  y: number;
+};
+/** Inclusive/exclusive bearing range covered by sector `index` of `count` equal sectors. */
+declare const sectorBearingRange: (index: number, count: number) => {
+  endBearing: number;
+  startBearing: number;
+};
+/**
+ * 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.
+ */
+declare const sectorId: (index: number, count: number) => string;
+/** Threshold (coherence, `0..1`) → CSS `saturate()` multiplier. Higher threshold → more desaturated. */
+declare const thresholdToSaturation: (threshold: number) => number;
+/**
+ * SVG path (`d`) for an annular sector (donut wedge) spanning `[startBearing, endBearing]`
+ * between `innerRadius` and `outerRadius`. Used for the divider/dim/highlight overlays.
+ */
+declare const annularSectorPath: (centerX: number, centerY: number, innerRadius: number, outerRadius: number, startBearing: number, endBearing: number) => string;
+/**
+ * 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.
+ */
+declare const sectorClipPath: (innerRadiusPercent: number, outerRadiusPercent: number, startBearing: number, endBearing: number) => string;
+/**
+ * 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.
+ */
+declare const colorForPalettePosition: (stops: DirectionalColorStop[], position: number) => string;
+/**
+ * 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.
+ */
+declare const resolveSectorColor: (source: {
+  colorForBearing?: ((bearing: number) => string) | null;
+  colorStops?: DirectionalColorStop[] | null;
+}, centerBearing: number, colorAngle: number) => string;
+//#endregion
+export { DEFAULT_DIRECTIONAL_COLOR_STOPS, DirectionalColorStop, DirectionalSectorCount, SUPPORTED_SECTOR_COUNTS, annularSectorPath, bearingFromComponents, bearingToPalettePosition, colorForPalettePosition, normalizeBearing, polarToCartesian, resolveSectorColor, sectorBearingRange, sectorClipPath, sectorId, thresholdToSaturation };
+//# sourceMappingURL=directionalColorWheelMath.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"directionalColorWheelMath.d.ts","names":[],"sources":["../../src/components/DirectionalColorWheel/directionalColorWheelMath.ts"],"mappings":";;;AAYA;;;;;AAEA;;;;;cAFa,uBAAA;AAAA,KAED,sBAAA,WAAiC,uBAAA;;UAG5B,oBAAA;EAIP;EAFR,KAAA;EAoBD;EAlBC,QAAA;AAAA;;AAuBF;;;;;cAda,+BAAA,EAAiC,oBAAA;;cAcjC,gBAAA,GAAgB,OAAA;;;AAsB7B;;;;cAda,qBAAA,GAAqB,SAAA,UAAqB,WAAA;AAiBvD;;;;;;AAAA,cAHa,wBAAA,GAAwB,OAAA,UAAmB,UAAA;;cAG3C,gBAAA,GAAgB,OAAA,UAAmB,OAAA,UAAiB,MAAA,UAAgB,OAAA;EAAsB,CAAA;EAAW,CAAA;AAAA;AASlH;AAAA,cAAa,kBAAA,GAAkB,KAAA,UAAiB,KAAA;EAAoB,UAAA;EAAoB,YAAA;AAAA;;;;;cAS3E,QAAA,GAAQ,KAAA,UAAiB,KAAA;AAAtC;AAAA,cAMa,qBAAA,GAAqB,SAAA;;;;AAAlC;cAQa,iBAAA,GAAiB,OAAA,UAAmB,OAAA,UAAiB,WAAA,UAAqB,WAAA,UAAqB,YAAA,UAAsB,UAAA;;;;AAAlI;;cAqBa,cAAA,GAAc,kBAAA,UAA8B,kBAAA,UAA4B,YAAA,UAAsB,UAAA;;;;;;;cAwC9F,uBAAA,GAAuB,KAAA,EAAW,oBAAA,IAAsB,QAAA;;;AAxCrE;;;;cAmFa,kBAAA,GAAkB,MAAA;EAAc,eAAA,KAAoB,OAAA;EAAoC,UAAA,GAAa,oBAAA;AAAA,GAA+B,aAAA,UAAuB,UAAA"}