import { KontrolProvider } from "@kube/kontrol";

import { CommandPalette } from "@kube/kontrol/CommandPalette";
import { ControlsPanel } from "@kube/kontrol/ControlsPanel";

export const App = () => (
  <KontrolProvider plugins={[CommandPalette, ControlsPanel]}>
    <App />
  </KontrolProvider>
);

import { useMotionKontrol } from "@kube/kontrol/framer-motion";

export const App = () => {
  // This returns a Framer MotionValue
  const  = useMotionKontrol({
   type: "Number",
   label: "Scale",
   min: 0,
   max: 100,
   default: 1,
   step: 0.1,
  });

  return (
    <motion.div >
      <App />
    </motion.div>
  );
};