@pibbl/core 0.0.1

package/dist/lib/manipulation/frame.js

@@ -0,0 +1,101 @@
+import { createElement } from "../element/create-element.js";
+import { Group } from "../components/g.js";
+import { definePrimitive } from "../define-primitive.js";
+import { GLOBAL_STATE } from "../global-state.js";
+import { useHookSlot, requireHookContext } from "../hooks/hook-slot.js";
+import { pushLayoutBox } from "../layout/context.js";
+import { getCurrentWorldTransform } from "../render-target.js";
+import { currentRootCoordinateMapping } from "./coordinates.js";
+import {
+  manipulationState,
+  detachManipulationFrame
+} from "./controller.js";
+const frames = [];
+function requireManipulationFrame(controller) {
+  const state = manipulationState(controller);
+  if (frames.at(-1) !== state)
+    throw new Error(
+      "Pibbl manipulation handles must be descendants of their controller frame."
+    );
+  return state;
+}
+function attachManipulationFrame(state, componentRefs) {
+  if (state.frame && state.frame !== componentRefs) {
+    if (GLOBAL_STATE.seenIds?.has(state.frame.id))
+      throw new Error(
+        "A manipulation controller can attach to only one frame."
+      );
+    detachManipulationFrame(state);
+  }
+  state.frame = componentRefs;
+}
+function releaseManipulationFrame(state, componentRefs) {
+  if (state.frame !== componentRefs) return;
+  state.frame = void 0;
+  detachManipulationFrame(state);
+}
+const ManipulationFrame = definePrimitive(
+  function ManipulationFrame2(props, style) {
+    const state = manipulationState(props.controller);
+    const { componentRefs, pibblInstance } = requireHookContext();
+    if (state.root.eventRoot !== pibblInstance.eventRoot)
+      throw new Error(
+        "A manipulation controller cannot attach across Pibbl roots."
+      );
+    const slot = useHookSlot("manipulationFrame", (teardowns) => {
+      const attachment2 = { state };
+      attachManipulationFrame(state, componentRefs);
+      teardowns.add(() => releaseManipulationFrame(attachment2.state, componentRefs));
+      return attachment2;
+    });
+    const attachment = slot.value;
+    if (attachment.state !== state) {
+      releaseManipulationFrame(attachment.state, componentRefs);
+      attachManipulationFrame(state, componentRefs);
+      attachment.state = state;
+    } else {
+      attachManipulationFrame(state, componentRefs);
+    }
+    const box = state.options.box.get();
+    if (![box.left, box.top, style.width, style.height].every(Number.isFinite) || style.width <= 0 || style.height <= 0)
+      throw new Error(
+        "ManipulationFrame requires finite position and positive dimensions."
+      );
+    const parent = getCurrentWorldTransform().translate(-box.left, -box.top);
+    const transaction = pibblInstance.eventRoot.renderTransaction;
+    if (!transaction)
+      throw new Error(
+        "ManipulationFrame requires an active render transaction."
+      );
+    transaction.onFinish((success) => {
+      if (success && state.alive && state.frame === componentRefs) {
+        state.parent = parent;
+        state.coordinateMapping = currentRootCoordinateMapping(state.root);
+      }
+    });
+    const releaseLayout = pushLayoutBox(
+      Object.freeze({ x: 0, y: 0, width: style.width, height: style.height })
+    );
+    frames.push(state);
+    GLOBAL_STATE.componentRefs.onAfterRender = () => {
+      frames.pop();
+      releaseLayout();
+    };
+    const rotation = state.options.rotation?.get() ?? 0;
+    if (!Number.isFinite(rotation))
+      throw new Error("ManipulationFrame rotation must be finite radians.");
+    return createElement(Group, {
+      style: {
+        rotationDegrees: rotation * 180 / Math.PI,
+        rotationOrigin: [style.width / 2, style.height / 2]
+      },
+      children: props.children
+    });
+  },
+  { childInput: "structural" }
+);
+export {
+  ManipulationFrame,
+  requireManipulationFrame
+};
+//# sourceMappingURL=frame.js.map

package/dist/lib/manipulation/frame.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/manipulation/frame.ts"],
+  "sourcesContent": ["import type { PibblManipulationFrameProps } from './controller-types.js';\nimport { createElement } from \"../element/create-element.js\";\nimport { Group } from \"../components/g.js\";\nimport { definePrimitive } from \"../define-primitive.js\";\nimport { GLOBAL_STATE } from \"../global-state.js\";\nimport { useHookSlot, requireHookContext } from \"../hooks/hook-slot.js\";\nimport { pushLayoutBox } from \"../layout/context.js\";\nimport { getCurrentWorldTransform } from \"../render-target.js\";\nimport { currentRootCoordinateMapping } from \"./coordinates.js\";\nimport type { PibblNode } from \"../element/types.js\";\nimport type { PibblComponentRefs } from \"../types.js\";\nimport type { SystemStyle } from \"../types.js\";\nimport type { PibblManipulationBox } from \"./types.js\";\nimport type { PibblManipulationController } from \"./controller-types.js\";\nimport {\n  manipulationState,\n  detachManipulationFrame,\n  type ManipulationState,\n} from \"./controller.js\";\n\nconst frames: ManipulationState[] = [];\nexport function requireManipulationFrame(\n  controller: PibblManipulationController,\n): ManipulationState {\n  const state = manipulationState(controller);\n  if (frames.at(-1) !== state)\n    throw new Error(\n      \"Pibbl manipulation handles must be descendants of their controller frame.\",\n    );\n  return state;\n}\ninterface FrameProps {\n  readonly controller: PibblManipulationController;\n  readonly children?: PibblNode;\n}\ninterface FrameStyle extends SystemStyle, PibblManipulationBox {}\ninterface FrameAttachment {\n  state: ManipulationState;\n}\n\nfunction attachManipulationFrame(\n  state: ManipulationState,\n  componentRefs: PibblComponentRefs<any>,\n): void {\n  if (state.frame && state.frame !== componentRefs) {\n    if (GLOBAL_STATE.seenIds?.has(state.frame.id))\n      throw new Error(\n        \"A manipulation controller can attach to only one frame.\",\n      );\n    detachManipulationFrame(state);\n  }\n  state.frame = componentRefs;\n}\n\nfunction releaseManipulationFrame(\n  state: ManipulationState,\n  componentRefs: PibblComponentRefs<any>,\n): void {\n  if (state.frame !== componentRefs) return;\n  state.frame = undefined;\n  detachManipulationFrame(state);\n}\n\n/**\n * Provides a manipulation controller and its presentation frame to descendant handles.\n *\n * @param props - Authored component inputs, supplied through JSX or createElement. See the linked\n * props and style types.\n * @throws When called directly; Pibbl mounts this component through JSX or createElement.\n *\n * @see {@link PibblManipulationFrameProps}\n */\nexport const ManipulationFrame = definePrimitive<FrameProps, FrameStyle>(\n  function ManipulationFrame(props, style) {\n    const state = manipulationState(props.controller);\n    const { componentRefs, pibblInstance } = requireHookContext();\n    if (state.root.eventRoot !== pibblInstance.eventRoot)\n      throw new Error(\n        \"A manipulation controller cannot attach across Pibbl roots.\",\n      );\n    const slot = useHookSlot<FrameAttachment>(\"manipulationFrame\", (teardowns) => {\n      const attachment: FrameAttachment = { state };\n      attachManipulationFrame(state, componentRefs);\n      teardowns.add(() => releaseManipulationFrame(attachment.state, componentRefs));\n      return attachment;\n    });\n    const attachment = slot.value;\n    if (attachment.state !== state) {\n      releaseManipulationFrame(attachment.state, componentRefs);\n      attachManipulationFrame(state, componentRefs);\n      attachment.state = state;\n    } else {\n      attachManipulationFrame(state, componentRefs);\n    }\n    const box = state.options.box.get();\n    if (\n      ![box.left, box.top, style.width, style.height].every(Number.isFinite) ||\n      style.width <= 0 ||\n      style.height <= 0\n    )\n      throw new Error(\n        \"ManipulationFrame requires finite position and positive dimensions.\",\n      );\n    const parent = getCurrentWorldTransform().translate(-box.left, -box.top);\n    const transaction = pibblInstance.eventRoot.renderTransaction;\n    if (!transaction)\n      throw new Error(\n        \"ManipulationFrame requires an active render transaction.\",\n      );\n    transaction.onFinish((success) => {\n      if (success && state.alive && state.frame === componentRefs) {\n        state.parent = parent;\n        state.coordinateMapping = currentRootCoordinateMapping(state.root);\n      }\n    });\n    const releaseLayout = pushLayoutBox(\n      Object.freeze({ x: 0, y: 0, width: style.width, height: style.height }),\n    );\n    frames.push(state);\n    GLOBAL_STATE.componentRefs!.onAfterRender = () => {\n      frames.pop();\n      releaseLayout();\n    };\n    const rotation = state.options.rotation?.get() ?? 0;\n    if (!Number.isFinite(rotation))\n      throw new Error(\"ManipulationFrame rotation must be finite radians.\");\n    return createElement(Group, {\n      style: {\n        rotationDegrees: (rotation * 180) / Math.PI,\n        rotationOrigin: [style.width / 2, style.height / 2],\n      },\n      children: props.children,\n    });\n  },\n  { childInput: \"structural\" },\n);\n"],
+  "mappings": "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",
+  "names": ["ManipulationFrame", "attachment"]
+}

package/dist/lib/manipulation/geometry.d.ts

@@ -0,0 +1,4 @@
+import type { PibblManipulationBox, PibblManipulationPoint } from './types.js';
+export declare function assertFiniteBox(box: PibblManipulationBox, label?: string): void;
+export declare function assertFinitePoint(point: PibblManipulationPoint, label: string): void;
+export declare function freezeBox(box: PibblManipulationBox): PibblManipulationBox;

package/dist/lib/manipulation/geometry.js

@@ -0,0 +1,26 @@
+function assertFiniteBox(box, label = "box") {
+  for (const [property, value] of Object.entries(box)) {
+    if (!Number.isFinite(value)) {
+      throw new Error(`${label}.${property} must be finite, received ${value}`);
+    }
+  }
+  if (box.width <= 0 || box.height <= 0) {
+    throw new Error(`${label}.width and ${label}.height must be greater than zero`);
+  }
+}
+function assertFinitePoint(point, label) {
+  for (const [property, value] of Object.entries(point)) {
+    if (!Number.isFinite(value)) {
+      throw new Error(`${label}.${property} must be finite, received ${value}`);
+    }
+  }
+}
+function freezeBox(box) {
+  return Object.freeze({ ...box });
+}
+export {
+  assertFiniteBox,
+  assertFinitePoint,
+  freezeBox
+};
+//# sourceMappingURL=geometry.js.map

package/dist/lib/manipulation/geometry.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/manipulation/geometry.ts"],
+  "sourcesContent": ["import type { PibblManipulationBox, PibblManipulationPoint } from './types.js';\n\nexport function assertFiniteBox(box: PibblManipulationBox, label = 'box'): void {\n  for (const [property, value] of Object.entries(box)) {\n    if (!Number.isFinite(value)) {\n      throw new Error(`${label}.${property} must be finite, received ${value}`);\n    }\n  }\n  if (box.width <= 0 || box.height <= 0) {\n    throw new Error(`${label}.width and ${label}.height must be greater than zero`);\n  }\n}\n\nexport function assertFinitePoint(point: PibblManipulationPoint, label: string): void {\n  for (const [property, value] of Object.entries(point)) {\n    if (!Number.isFinite(value)) {\n      throw new Error(`${label}.${property} must be finite, received ${value}`);\n    }\n  }\n}\n\nexport function freezeBox(box: PibblManipulationBox): PibblManipulationBox {\n  return Object.freeze({ ...box });\n}\n"],
+  "mappings": "AAEO,SAAS,gBAAgB,KAA2B,QAAQ,OAAa;AAC9E,aAAW,CAAC,UAAU,KAAK,KAAK,OAAO,QAAQ,GAAG,GAAG;AACnD,QAAI,CAAC,OAAO,SAAS,KAAK,GAAG;AAC3B,YAAM,IAAI,MAAM,GAAG,KAAK,IAAI,QAAQ,6BAA6B,KAAK,EAAE;AAAA,IAC1E;AAAA,EACF;AACA,MAAI,IAAI,SAAS,KAAK,IAAI,UAAU,GAAG;AACrC,UAAM,IAAI,MAAM,GAAG,KAAK,cAAc,KAAK,mCAAmC;AAAA,EAChF;AACF;AAEO,SAAS,kBAAkB,OAA+B,OAAqB;AACpF,aAAW,CAAC,UAAU,KAAK,KAAK,OAAO,QAAQ,KAAK,GAAG;AACrD,QAAI,CAAC,OAAO,SAAS,KAAK,GAAG;AAC3B,YAAM,IAAI,MAAM,GAAG,KAAK,IAAI,QAAQ,6BAA6B,KAAK,EAAE;AAAA,IAC1E;AAAA,EACF;AACF;AAEO,SAAS,UAAU,KAAiD;AACzE,SAAO,OAAO,OAAO,EAAE,GAAG,IAAI,CAAC;AACjC;",
+  "names": []
+}

package/dist/lib/manipulation/handles.d.ts

@@ -0,0 +1,298 @@
+import type { PibblResizePosition } from "./types.js";
+import type { PibblManipulationWhen } from "./types.js";
+import type { PibblManipulableProps } from "./manipulable.js";
+import type { GStyle } from "../components/g.js";
+import type { PibblNode } from "../element/types.js";
+import type { SystemStyle } from "../types.js";
+import type { PibblManipulationController } from "./controller-types.js";
+/**
+ * Authored inputs for DragHandle, including the declared data and presentation options.
+ *
+ * @see {@link PibblManipulationController}
+ * @see {@link PibblNode}
+ * @see {@link DragHandle}
+ * @see {@link PibblManipulationWhen}
+ */
+export interface PibblDragHandleProps {
+    /**
+     * Formats the value shown by the manipulation readout. See {@link PibblDragHandleProps}.
+     * @param value - Current left and top coordinates.
+     * @returns Text to display in the drag readout.
+     */
+    readonly formatReadout?: (value: {
+        /** Left edge coordinate or inset. See {@link PibblDragHandleProps}. */
+        readonly left: number;
+        /** Top edge value or top envelope guide. See {@link PibblDragHandleProps}. */
+        readonly top: number;
+    }) => string;
+    /**
+     * Controller owning the current interaction or mounted scenario. See
+     * {@link PibblManipulationController}.
+     */
+    readonly controller: PibblManipulationController;
+    /** Descendant content or the callback that supplies it. See {@link PibblNode}. */
+    readonly children?: PibblNode;
+}
+/**
+ * Supported geometry and presentation properties for DragHandle.
+ *
+ * @see {@link GStyle}
+ * @see {@link PibblManipulationReadoutStyle}
+ * @see {@link DragHandle}
+ * @see {@link PibblManipulableProps}
+ */
+export interface PibblDragHandleStyle extends GStyle {
+    /** Presentation of the manipulation value readout. See {@link PibblManipulationReadoutStyle}. */
+    readonly readout?: false | true | PibblManipulationReadoutStyle;
+}
+/**
+ * Draws an interactive handle that starts translation of its manipulation target.
+ *
+ * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
+ * props and style types.
+ * @throws When called directly; Pibbl mounts this component through JSX or createElement.
+ *
+ * @see {@link PibblDragHandleProps}
+ * @see {@link PibblDragHandleStyle}
+ */
+export declare const DragHandle: import("@pibbl/core").PibblPrimitiveComponent<PibblDragHandleProps, import("@pibbl/core").PrimitiveInput<PibblDragHandleProps, PibblDragHandleStyle>>;
+/**
+ * Supported geometry and presentation properties for ManipulationReadoutState.
+ *
+ * @see {@link PibblManipulationReadoutStyle}
+ */
+export interface PibblManipulationReadoutStateStyle {
+    /** Minimum outward spacing in CSS pixels; defaults to 40 for drag, 5 otherwise. */
+    readonly gap?: number;
+    /**
+     * Canvas font string used to draw or measure text. See {@link PibblManipulationReadoutStateStyle}
+     * .
+     */
+    readonly font?: string;
+    /** Paint used for the interior. See {@link PibblManipulationReadoutStateStyle}. */
+    readonly fill?: string;
+    /** Paint used for the outline. See {@link PibblManipulationReadoutStateStyle}. */
+    readonly stroke?: string;
+    /** Width of the painted outline. See {@link PibblManipulationReadoutStateStyle}. */
+    readonly strokeWidth?: number;
+    /** Opacity of the painted result. See {@link PibblManipulationReadoutStateStyle}. */
+    readonly opacity?: number;
+    /** Whether this presentation is visible. See {@link PibblManipulationReadoutStateStyle}. */
+    readonly visible?: boolean;
+}
+/**
+ * Supported geometry and presentation properties for ManipulationReadout.
+ *
+ * @see {@link PibblManipulationReadoutStateStyle}
+ * @see {@link PibblDragHandleStyle}
+ * @see {@link PibblResizeHandleStyle}
+ * @see {@link PibblRotationHandleStyle}
+ */
+export interface PibblManipulationReadoutStyle extends PibblManipulationReadoutStateStyle {
+    /**
+     * Readout presentation while no interaction is active. See
+     * {@link PibblManipulationReadoutStateStyle}.
+     */
+    readonly inactive?: PibblManipulationReadoutStateStyle;
+    /**
+     * Readout presentation while the handle has keyboard focus. See
+     * {@link PibblManipulationReadoutStateStyle}.
+     */
+    readonly focused?: PibblManipulationReadoutStateStyle;
+    /**
+     * Current active operation or its presentation configuration. See
+     * {@link PibblManipulationReadoutStateStyle}.
+     */
+    readonly active?: PibblManipulationReadoutStateStyle;
+}
+/**
+ * Supported geometry and presentation properties for ResizeHandle.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link PibblManipulationReadoutStyle}
+ * @see {@link ResizeHandle}
+ * @see {@link PibblResizeHandlesProps}
+ */
+export interface PibblResizeHandleStyle extends SystemStyle {
+    /** Presentation of the manipulation value readout. See {@link PibblManipulationReadoutStyle}. */
+    readonly readout?: false | true | PibblManipulationReadoutStyle;
+}
+/**
+ * Supported geometry and presentation properties for RotationConnector.
+ *
+ * @see {@link PibblRotationHandleStyle}
+ */
+export interface PibblRotationConnectorStyle {
+    /** Paint used for the outline. See {@link PibblRotationConnectorStyle}. */
+    readonly stroke?: string;
+    /** Width of the painted outline. See {@link PibblRotationConnectorStyle}. */
+    readonly strokeWidth?: number;
+    /** Opacity of the painted result. See {@link PibblRotationConnectorStyle}. */
+    readonly opacity?: number;
+}
+/**
+ * Supported geometry and presentation properties for RotationArc.
+ *
+ * @see {@link PibblRotationHandleStyle}
+ */
+export interface PibblRotationArcStyle {
+    /** Color used by the mark or effect. See {@link PibblRotationArcStyle}. */
+    readonly color?: string;
+    /** Angular extent of the arc. See {@link PibblRotationArcStyle}. */
+    readonly sweep?: number;
+    /** Width of the painted outline. See {@link PibblRotationArcStyle}. */
+    readonly strokeWidth?: number;
+    /** Opacity of the painted result. See {@link PibblRotationArcStyle}. */
+    readonly opacity?: number;
+}
+/**
+ * Supported geometry and presentation properties for RotationHandle.
+ *
+ * @see {@link SystemStyle}
+ * @see {@link PibblRotationConnectorStyle}
+ * @see {@link PibblRotationArcStyle}
+ * @see {@link PibblManipulationReadoutStyle}
+ * @see {@link RotationHandle}
+ * @see {@link PibblManipulableProps}
+ */
+export interface PibblRotationHandleStyle extends SystemStyle {
+    /**
+     * Presentation of the line connecting the rotation handle to its target. See
+     * {@link PibblRotationConnectorStyle}.
+     */
+    readonly connector?: false | true | PibblRotationConnectorStyle;
+    /** Presentation of the rotation-angle arc. See {@link PibblRotationArcStyle}. */
+    readonly arc?: false | true | PibblRotationArcStyle;
+    /** Presentation of the manipulation value readout. See {@link PibblManipulationReadoutStyle}. */
+    readonly readout?: false | true | PibblManipulationReadoutStyle;
+}
+/**
+ * Authored inputs for ResizeHandle, including the declared data and presentation options.
+ *
+ * @see {@link PibblManipulationController}
+ * @see {@link PibblNode}
+ * @see {@link ResizeHandle}
+ * @see {@link PibblResizeHandlesProps}
+ * @see {@link PibblResizePosition}
+ */
+export interface PibblResizeHandleProps {
+    /**
+     * Controller owning the current interaction or mounted scenario. See
+     * {@link PibblManipulationController}.
+     */
+    readonly controller: PibblManipulationController;
+    /**
+     * Position of the geometry, source, or selected resize handle. See {@link PibblResizeHandleProps}
+     * .
+     */
+    readonly position: import("./types.js").PibblResizePosition;
+    /** Size of the handle's interactive hit region. See {@link PibblResizeHandleProps}. */
+    readonly hitSize?: number;
+    /**
+     * Formats the value shown by the manipulation readout. See {@link PibblResizeHandleProps}.
+     * @param value - Current width and height.
+     * @returns Text to display in the resize readout.
+     */
+    readonly formatReadout?: (value: {
+        /**
+         * Horizontal extent in the units of the containing geometry or surface. See
+         * {@link PibblResizeHandleProps}.
+         */
+        readonly width: number;
+        /**
+         * Vertical extent in the units of the containing geometry or surface. See
+         * {@link PibblResizeHandleProps}.
+         */
+        readonly height: number;
+    }) => string;
+    /** Descendant content or the callback that supplies it. See {@link PibblNode}. */
+    readonly children?: PibblNode;
+}
+/**
+ * Authored inputs for ResizeHandles, including the declared data and presentation options.
+ *
+ * @see {@link PibblManipulationController}
+ * @see {@link PibblResizeHandleStyle}
+ * @see {@link PibblResizeHandleProps}
+ * @see {@link ResizeHandles}
+ * @see {@link PibblManipulableProps}
+ * @see {@link PibblResizePosition}
+ */
+export interface PibblResizeHandlesProps {
+    /**
+     * Controller owning the current interaction or mounted scenario. See
+     * {@link PibblManipulationController}.
+     */
+    readonly controller: PibblManipulationController;
+    /** Edges and corners at which resize handles are created. See {@link PibblResizeHandlesProps}. */
+    readonly positions?: "corners" | "edges-and-corners" | readonly import("./types.js").PibblResizePosition[];
+    /** Size of the handle's interactive hit region. See {@link PibblResizeHandlesProps}. */
+    readonly hitSize?: number;
+    /** Declared presentation and layout properties. See {@link PibblResizeHandleStyle}. */
+    readonly style?: PibblResizeHandleStyle;
+    /** Formats the value shown by the manipulation readout. See {@link PibblResizeHandleProps}. */
+    readonly formatReadout?: PibblResizeHandleProps["formatReadout"];
+}
+/**
+ * Draws an interactive handle for one edge or corner of a manipulation target.
+ *
+ * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
+ * props and style types.
+ * @throws When called directly; Pibbl mounts this component through JSX or createElement.
+ *
+ * @see {@link PibblResizeHandleProps}
+ * @see {@link PibblResizeHandleStyle}
+ */
+export declare const ResizeHandle: import("@pibbl/core").PibblPrimitiveComponent<PibblResizeHandleProps, import("@pibbl/core").PrimitiveInput<PibblResizeHandleProps, PibblResizeHandleStyle>>;
+/**
+ * Creates the configured collection of resize handles around a manipulation target.
+ *
+ * @param props - Controller, handle placement, and presentation options. See
+ * {@link PibblResizeHandlesProps} .
+ * @returns Pibbl nodes rendering the resize handles. See {@link PibblNode}.
+ *
+ * @see {@link PibblResizeHandlesProps}
+ * @see {@link PibblNode}
+ */
+export declare function ResizeHandles(props: PibblResizeHandlesProps): PibblNode;
+/**
+ * Authored inputs for RotationHandle, including the declared data and presentation options.
+ *
+ * @see {@link PibblManipulationController}
+ * @see {@link PibblNode}
+ * @see {@link RotationHandle}
+ * @see {@link PibblManipulableProps}
+ */
+export interface PibblRotationHandleProps {
+    /**
+     * Controller owning the current interaction or mounted scenario. See
+     * {@link PibblManipulationController}.
+     */
+    readonly controller: PibblManipulationController;
+    /** Size of the handle's interactive hit region. See {@link PibblRotationHandleProps}. */
+    readonly hitSize?: number;
+    /** Selects `"degrees"`, `"radians"` for readout unit. See {@link PibblRotationHandleProps}. */
+    readonly readoutUnit?: "degrees" | "radians";
+    /**
+     * Formats the value shown by the manipulation readout. See {@link PibblRotationHandleProps}.
+     * @param value - Current rotation.
+     * @returns Text to display in the rotation readout.
+     */
+    readonly formatReadout?: (value: {
+        /** Rotation applied to the containing geometry. See {@link PibblRotationHandleProps}. */
+        readonly rotation: number;
+    }) => string;
+    /** Descendant content or the callback that supplies it. See {@link PibblNode}. */
+    readonly children?: PibblNode;
+}
+/**
+ * Draws an interactive handle for rotating a manipulation target.
+ *
+ * @param props - Authored component inputs, supplied through JSX or createElement. See the linked
+ * props and style types.
+ * @throws When called directly; Pibbl mounts this component through JSX or createElement.
+ *
+ * @see {@link PibblRotationHandleProps}
+ * @see {@link PibblRotationHandleStyle}
+ */
+export declare const RotationHandle: import("@pibbl/core").PibblPrimitiveComponent<PibblRotationHandleProps, import("@pibbl/core").PrimitiveInput<PibblRotationHandleProps, PibblRotationHandleStyle>>;