entangle-ui 0.3.0 → 0.5.0

package/dist/types/components/editor/ViewportGizmo/ViewportGizmo.types.d.ts

@@ -0,0 +1,146 @@
+import { Prettify } from '../../../types/utilities.js';
+import { BaseComponent, Size } from '../../../types/common.js';
+
+type ViewportGizmoSize = Size;
+/**
+ * Camera/viewport orientation as Euler angles (degrees).
+ * Convention: intrinsic YXZ (heading-pitch-roll), matching Three.js default.
+ */
+interface GizmoOrientation {
+    /** Rotation around Y axis (heading/yaw) in degrees */
+    yaw: number;
+    /** Rotation around X axis (pitch) in degrees */
+    pitch: number;
+    /** Rotation around Z axis (roll) in degrees @default 0 */
+    roll?: number;
+}
+/**
+ * Orbital rotation delta during a drag gesture.
+ * The app applies this to its camera orbit controller.
+ */
+interface OrbitDelta {
+    /** Yaw change in degrees (horizontal drag) */
+    deltaYaw: number;
+    /** Pitch change in degrees (vertical drag) */
+    deltaPitch: number;
+}
+/**
+ * Preset axis color conventions.
+ * - `blender`: X=red, Y=green, Z=blue
+ * - `unreal`: X=red, Y=green, Z=blue (same colors, Z-up)
+ * - `custom`: use `axisConfig` prop
+ */
+type GizmoAxisColorPreset = 'blender' | 'unreal' | 'custom';
+/**
+ * Up axis convention.
+ * - `y-up`: Y is vertical (Three.js, Babylon, Maya)
+ * - `z-up`: Z is vertical (Blender, Unreal, CAD)
+ */
+type GizmoUpAxis = 'y-up' | 'z-up';
+/** Custom per-axis configuration. */
+interface GizmoAxisConfig {
+    /** Axis label text @default "X"/"Y"/"Z" */
+    label?: string;
+    /** Axis color (CSS color string) */
+    color?: string;
+    /** Whether this axis arm is visible @default true */
+    visible?: boolean;
+}
+/** Named preset camera views for snap navigation. */
+type GizmoPresetView = 'front' | 'back' | 'left' | 'right' | 'top' | 'bottom';
+interface ViewportGizmoBaseProps extends Omit<BaseComponent, 'onChange'> {
+    /**
+     * Current viewport orientation (controlled).
+     * The gizmo always reflects this — it never owns orientation state.
+     */
+    orientation: GizmoOrientation;
+    /**
+     * Which axis points up.
+     * @default "y-up"
+     */
+    upAxis?: GizmoUpAxis;
+    /**
+     * Axis color convention.
+     * @default "blender"
+     */
+    axisColorPreset?: GizmoAxisColorPreset;
+    /**
+     * Per-axis customization [X, Y, Z].
+     * Used when `axisColorPreset="custom"`.
+     */
+    axisConfig?: [GizmoAxisConfig, GizmoAxisConfig, GizmoAxisConfig];
+    /**
+     * Whether to show axis labels at arm tips.
+     * @default true
+     */
+    showLabels?: boolean;
+    /**
+     * Whether to show negative axis arms (dimmed, shorter).
+     * @default true
+     */
+    showNegativeAxes?: boolean;
+    /**
+     * Whether to show a thin orbit ring around the gizmo.
+     * @default true
+     */
+    showOrbitRing?: boolean;
+    /**
+     * Whether to show an origin handle (home button).
+     * @default true
+     */
+    showOriginHandle?: boolean;
+    /**
+     * Background style.
+     * @default "subtle"
+     */
+    background?: 'transparent' | 'subtle' | 'solid';
+    /**
+     * Interaction mode.
+     * @default "full"
+     */
+    interactionMode?: 'full' | 'snap-only' | 'orbit-only' | 'display-only';
+    /**
+     * Orbit speed multiplier.
+     * @default 1
+     */
+    orbitSpeed?: number;
+    /**
+     * Whether to constrain pitch to [-90, 90].
+     * @default true
+     */
+    constrainPitch?: boolean;
+    /** Called continuously while the user drags to orbit. */
+    onOrbit?: (delta: OrbitDelta) => void;
+    /** Called when the user finishes an orbit drag. */
+    onOrbitEnd?: (finalOrientation: GizmoOrientation) => void;
+    /** Called when the user clicks an axis to snap to a preset view. */
+    onSnapToView?: (view: GizmoPresetView) => void;
+    /** Called when the user clicks a specific axis arm. */
+    onAxisClick?: (axis: 'x' | 'y' | 'z', positive: boolean) => void;
+    /** Called when the user clicks the origin handle. */
+    onOriginClick?: () => void;
+    /**
+     * Gizmo diameter in pixels.
+     * @default 120
+     */
+    diameter?: number;
+    /**
+     * Component size — affects label font size.
+     * @default "md"
+     */
+    size?: ViewportGizmoSize;
+    /**
+     * Whether the gizmo is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+}
+type ViewportGizmoProps = Prettify<ViewportGizmoBaseProps>;
+/** Axis arm hit region for interaction. */
+interface GizmoHitRegion {
+    type: 'axis-positive' | 'axis-negative' | 'label' | 'origin' | 'ring' | 'none';
+    axis?: 'x' | 'y' | 'z';
+    distance: number;
+}
+
+export type { GizmoAxisColorPreset, GizmoAxisConfig, GizmoHitRegion, GizmoOrientation, GizmoPresetView, GizmoUpAxis, OrbitDelta, ViewportGizmoBaseProps, ViewportGizmoProps, ViewportGizmoSize };

package/dist/types/components/editor/ViewportGizmo/gizmoMath.d.ts

@@ -0,0 +1,73 @@
+import { GizmoUpAxis, GizmoPresetView, GizmoOrientation, GizmoHitRegion } from './ViewportGizmo.types.js';
+
+/** 3D vector */
+interface Vec3 {
+    x: number;
+    y: number;
+    z: number;
+}
+/**
+ * Build a 3×3 rotation matrix from Euler angles (YXZ intrinsic order).
+ * Matches Three.js default Euler order.
+ *
+ * @param yaw  - Y-axis rotation in degrees
+ * @param pitch - X-axis rotation in degrees
+ * @param roll  - Z-axis rotation in degrees
+ * @returns [right, up, forward] basis vectors (columns of rotation matrix)
+ */
+declare function eulerToRotationMatrix(yaw: number, pitch: number, roll?: number): [Vec3, Vec3, Vec3];
+/**
+ * Project a 3D point to 2D canvas coordinates using orthographic projection.
+ *
+ * @param point   - 3D point to project
+ * @param orientation - Camera orientation
+ * @param center  - Canvas center in pixels
+ * @param scale   - Pixels per unit
+ * @returns Projected position { x, y, depth }
+ */
+declare function projectToCanvas(point: Vec3, orientation: GizmoOrientation, center: {
+    x: number;
+    y: number;
+}, scale: number): {
+    x: number;
+    y: number;
+    depth: number;
+};
+/** Projected axis arm data */
+interface ProjectedArm {
+    axis: 'x' | 'y' | 'z';
+    positive: boolean;
+    screenX: number;
+    screenY: number;
+    depth: number;
+}
+/**
+ * Get all 6 axis arm endpoints projected to 2D, sorted by depth (furthest first).
+ */
+declare function projectAxes(orientation: GizmoOrientation, center: {
+    x: number;
+    y: number;
+}, armLength: number, upAxis: GizmoUpAxis): ProjectedArm[];
+/**
+ * Hit test a screen position against the gizmo geometry.
+ */
+declare function gizmoHitTest(px: number, py: number, orientation: GizmoOrientation, center: {
+    x: number;
+    y: number;
+}, armLength: number, upAxis: GizmoUpAxis, tolerancePx?: number, originRadius?: number): GizmoHitRegion;
+/**
+ * Convert a preset view name to Euler angles.
+ */
+declare function presetViewToOrientation(view: GizmoPresetView, upAxis: GizmoUpAxis): GizmoOrientation;
+/**
+ * Convert quaternion [x, y, z, w] to Euler representation (YXZ order, degrees).
+ * Utility for Three.js integration where `camera.quaternion` is available.
+ */
+declare function quaternionToEuler(qx: number, qy: number, qz: number, qw: number): GizmoOrientation;
+/**
+ * Map an axis tip click to the corresponding preset view.
+ */
+declare function axisToPresetView(axis: 'x' | 'y' | 'z', positive: boolean, upAxis: GizmoUpAxis): GizmoPresetView | null;
+
+export { axisToPresetView, eulerToRotationMatrix, gizmoHitTest, presetViewToOrientation, projectAxes, projectToCanvas, quaternionToEuler };
+export type { ProjectedArm, Vec3 };

package/dist/types/components/form/FormHelperText.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Theme } from '../../theme/types.js';
-import { Prettify } from '../../types/utilities.js';
 import { BaseComponent } from '../../types/common.js';
+import { Prettify } from '../../types/utilities.js';
 
 interface FormHelperTextBaseProps extends BaseComponent<HTMLDivElement> {
     /**
@@ -37,7 +36,6 @@ declare const FormHelperText: React.NamedExoticComponent<{
     className?: string | undefined | undefined;
     testId?: string | undefined;
     style?: React.CSSProperties | undefined;
-    css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
     ref?: React.Ref<HTMLDivElement> | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -83,7 +81,7 @@ declare const FormHelperText: React.NamedExoticComponent<{
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
     popoverTarget?: string | undefined | undefined;
     inert?: boolean | undefined | undefined;
@@ -163,18 +161,18 @@ declare const FormHelperText: React.NamedExoticComponent<{
     onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
     onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onError?: React.ReactEventHandler<HTMLDivElement> | undefined;

package/dist/types/components/form/FormLabel.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Theme } from '../../theme/types.js';
-import { Prettify } from '../../types/utilities.js';
 import { BaseComponent } from '../../types/common.js';
+import { Prettify } from '../../types/utilities.js';
 
 interface FormLabelBaseProps extends BaseComponent<HTMLLabelElement> {
     /**
@@ -47,7 +46,6 @@ declare const FormLabel: React.NamedExoticComponent<{
     className?: string | undefined | undefined;
     testId?: string | undefined;
     style?: React.CSSProperties | undefined;
-    css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
     ref?: React.Ref<HTMLLabelElement> | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -93,7 +91,7 @@ declare const FormLabel: React.NamedExoticComponent<{
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
     popoverTarget?: string | undefined | undefined;
     inert?: boolean | undefined | undefined;
@@ -173,18 +171,18 @@ declare const FormLabel: React.NamedExoticComponent<{
     onFocusCapture?: React.FocusEventHandler<HTMLLabelElement> | undefined;
     onBlur?: React.FocusEventHandler<HTMLLabelElement> | undefined;
     onBlurCapture?: React.FocusEventHandler<HTMLLabelElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLLabelElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLLabelElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLLabelElement, Element> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLLabelElement, Element> | undefined;
     onBeforeInput?: React.InputEventHandler<HTMLLabelElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLLabelElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLLabelElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLLabelElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLLabelElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLLabelElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLLabelElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLLabelElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLLabelElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLLabelElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLLabelElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLLabelElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLLabelElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLLabelElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLLabelElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLLabelElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLLabelElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLLabelElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLLabelElement> | undefined;
     onLoad?: React.ReactEventHandler<HTMLLabelElement> | undefined;
     onLoadCapture?: React.ReactEventHandler<HTMLLabelElement> | undefined;
     onError?: React.ReactEventHandler<HTMLLabelElement> | undefined;

package/dist/types/components/form/InputWrapper.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Theme } from '../../theme/types.js';
-import { Prettify } from '../../types/utilities.js';
 import { Size, BaseComponent } from '../../types/common.js';
+import { Prettify } from '../../types/utilities.js';
 
 interface InputWrapperBaseProps extends BaseComponent<HTMLDivElement> {
     /**
@@ -62,7 +61,6 @@ declare const InputWrapper: React.NamedExoticComponent<{
     className?: string | undefined | undefined;
     testId?: string | undefined;
     style?: React.CSSProperties | undefined;
-    css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
     ref?: React.Ref<HTMLDivElement> | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -108,7 +106,7 @@ declare const InputWrapper: React.NamedExoticComponent<{
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
     popoverTarget?: string | undefined | undefined;
     inert?: boolean | undefined | undefined;
@@ -188,18 +186,18 @@ declare const InputWrapper: React.NamedExoticComponent<{
     onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
     onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onError?: React.ReactEventHandler<HTMLDivElement> | undefined;

package/dist/types/components/layout/PanelSurface/PanelSurface.d.ts

@@ -1,13 +1,17 @@
-import React from 'react';
-import { Theme } from '../../../theme/types.js';
 import { PanelSurfaceSize } from './PanelSurface.types.js';
+import React from 'react';
 
 declare const PanelSurface: React.FC<{
     children?: React.ReactNode;
     size?: PanelSurfaceSize | undefined;
     bordered?: boolean | undefined;
     background?: string | undefined;
-    css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
+    id?: string | undefined | undefined;
+    className?: string | undefined | undefined;
+    testId?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: React.Ref<HTMLDivElement> | undefined;
     defaultChecked?: boolean | undefined | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined | undefined;
@@ -15,19 +19,16 @@ declare const PanelSurface: React.FC<{
     accessKey?: string | undefined | undefined;
     autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
     autoFocus?: boolean | undefined | undefined;
-    className?: string | undefined | undefined;
     contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined | undefined;
     dir?: string | undefined | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     hidden?: boolean | undefined | undefined;
-    id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     slot?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
-    style?: React.CSSProperties | undefined;
     tabIndex?: number | undefined | undefined;
     title?: string | undefined | undefined;
     translate?: "yes" | "no" | undefined | undefined;
@@ -55,7 +56,6 @@ declare const PanelSurface: React.FC<{
     results?: number | undefined | undefined;
     security?: string | undefined | undefined;
     unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | undefined | undefined;
     popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
     popoverTarget?: string | undefined | undefined;
     inert?: boolean | undefined | undefined;
@@ -135,18 +135,18 @@ declare const PanelSurface: React.FC<{
     onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
     onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-    onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+    onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
     onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-    onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+    onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+    onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+    onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+    onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
     onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
@@ -287,8 +287,6 @@ declare const PanelSurface: React.FC<{
     onTransitionRunCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStart?: React.TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionStartCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
-    testId?: string | undefined;
-    ref?: React.Ref<HTMLDivElement> | undefined;
 }> & {
     Header: React.FC<{
         children?: React.ReactNode;
@@ -297,7 +295,6 @@ declare const PanelSurface: React.FC<{
         className?: string | undefined | undefined;
         testId?: string | undefined;
         style?: React.CSSProperties | undefined;
-        css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
         ref?: React.Ref<HTMLDivElement> | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -343,7 +340,7 @@ declare const PanelSurface: React.FC<{
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -423,18 +420,18 @@ declare const PanelSurface: React.FC<{
         onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
         onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
@@ -584,7 +581,6 @@ declare const PanelSurface: React.FC<{
         className?: string | undefined | undefined;
         testId?: string | undefined;
         style?: React.CSSProperties | undefined;
-        css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
         ref?: React.Ref<HTMLDivElement> | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -630,7 +626,7 @@ declare const PanelSurface: React.FC<{
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -710,18 +706,18 @@ declare const PanelSurface: React.FC<{
         onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
         onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
@@ -869,7 +865,6 @@ declare const PanelSurface: React.FC<{
         className?: string | undefined | undefined;
         testId?: string | undefined;
         style?: React.CSSProperties | undefined;
-        css?: React.CSSProperties | ((theme: Theme) => React.CSSProperties) | undefined;
         ref?: React.Ref<HTMLDivElement> | undefined;
         defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
@@ -915,7 +910,7 @@ declare const PanelSurface: React.FC<{
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -995,18 +990,18 @@ declare const PanelSurface: React.FC<{
         onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
         onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
-        onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onChange?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
+        onChangeCapture?: React.ChangeEventHandler<HTMLDivElement, Element> | undefined;
         onBeforeInput?: React.InputEventHandler<HTMLDivElement> | undefined;
-        onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
-        onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
+        onBeforeInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onInput?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onInputCapture?: React.InputEventHandler<HTMLDivElement> | undefined;
+        onReset?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onResetCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onSubmit?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+        onSubmitCapture?: React.SubmitEventHandler<HTMLDivElement> | undefined;
+        onInvalid?: React.ReactEventHandler<HTMLDivElement> | undefined;
+        onInvalidCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
         onError?: React.ReactEventHandler<HTMLDivElement> | undefined;