Aurora AI Controls

1"use client"
2 
3import * as React from "react"
4import type { LucideIcon } from "lucide-react"
5import { cn } from "@/lib/utils"
6 
7/* ------------------------------------------------------------------ *
8 * Aurora · Controls (AI element)
9 *
10 * A toolbar cluster — a raised, rounded panel holding icon ControlButtons
11 * with an optional active (cyan ring + tint) state, separated by hairline
12 * ControlsDividers. Lays out horizontally by default; orientation="vertical"
13 * stacks the cluster and rotates the dividers.
14 *
15 * Architecture (forwardRef, displayName, compound parts, HTMLAttributes
16 * passthrough, full a11y on the button) is kept from the Aurora registry.
17 * Prefer Lucide icon components for `icon`; raw SVG strings are intentionally
18 * rejected so untrusted markup can never reach the DOM.
19 * ------------------------------------------------------------------ */
20 
21type ControlsOrientation = "horizontal" | "vertical"
22type ControlIcon = LucideIcon | React.ReactElement<React.SVGProps<SVGSVGElement>>
23 
24const OrientationContext = React.createContext<ControlsOrientation>("horizontal")
25 
26export interface ControlsProps extends React.HTMLAttributes<HTMLDivElement> {
27  orientation?: ControlsOrientation
28}
29 
30export interface ControlButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
31  /**
32   * Lucide icon component or trusted SVG element. Mutually optional with `children`
33   * (text-labelled buttons like "Fit").
34   */
35  icon?: ControlIcon
36  /** Active / selected state — cyan ring, tint fill and accent glyph. */
37  active?: boolean
38}
39 
40const Controls = ({ ref, orientation = "horizontal", className, style, children, ...props }: ControlsProps & { ref?: React.Ref<HTMLDivElement> }) => {
41    const vertical = orientation === "vertical"
42    return (
43      <OrientationContext.Provider value={orientation}>
44        <div
45          ref={ref}
46          className={cn("aurora-controls", className)}
47          data-orientation={orientation}
48          style={{
49            display: "inline-flex",
50            flexDirection: vertical ? "column" : "row",
51            alignItems: "center",
52            gap: 4,
53            boxSizing: "border-box",
54            padding: 6,
55            background: "var(--aurora-surface-raised)",
56            border: "1px solid var(--aurora-border-strong)",
57            borderRadius: "var(--aurora-radius-1)",
58            boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
59            ...style,
60          }}
61          {...props}
62// … truncated