Inspector Position

import { InspectorPosition } from "@/components/beste/component/inspector-position";

// Uncontrolled. The value is two percentages from the top left corner.
<InspectorPosition label="Focal Point" defaultValue={{ x: 50, y: 30 }} />

// Controlled, with a separate commit for expensive work
<InspectorPosition
  label="Focal Point"
  value={point}
  onValueChange={setPoint}
  onValueCommit={(value) => save(value)}
/>

// Pass the picture and the pad stops being a diagram of the surface
<InspectorPosition
  label="Focal Point"
  preview={`url(${image})`}
  value={point}
  onValueChange={setPoint}
/>

<InspectorPosition
  label="Origin"
  icon={CrosshairIcon}   // optional leading icon
  tone="outline"         // "muted" (default) | "outline" | "ghost"
  size="sm"              // "sm" | "default" | "lg"
  snap={false}           // stop pulling towards the thirds
  step={5}               // percent a key press moves; Shift moves ten of them
  name="origin"          // submits as origin-x and origin-y
  value={point}
  onValueChange={setPoint}
/>

// What the value turns into
<div style={{ objectPosition: `${point.x}% ${point.y}%` }} />
<div style={{ backgroundPosition: `${point.x}% ${point.y}%` }} />
<div style={{ transformOrigin: `${point.x}% ${point.y}%` }} />

// A radial gradient's centre, which is the one thing inspector-gradient cannot say
const background = `radial-gradient(circle at ${point.x}% ${point.y}%, #6366f1, #0ea5e9)`;