From be4394e25c9fe6744627f3a1e0b54f215b0fee60 Mon Sep 17 00:00:00 2001
From: cocopon <cocopon@me.com>
Date: Sat, 29 Apr 2023 22:31:50 +0900
Subject: [PATCH] Upgrade Tweakpane to v4

---
 .eslintrc.js                                  | 42 ------------
 .eslintrc.json                                | 42 ++++++++++++
 .prettierrc.js                                |  7 --
 .prettierrc.json                              |  7 ++
 README.md                                     | 15 ++--
 package.json                                  | 12 ++--
 rollup.config.js                              | 21 ++----
 scripts/assets-append-version.js              | 14 ++--
 scripts/dist-name.js                          |  9 ++-
 src/button-grid/api/button-grid.ts            | 23 +++----
 src/button-grid/api/tp-button-grid-event.ts   |  2 +-
 .../controller/button-grid-blade.ts           | 37 ++++++++++
 src/button-grid/controller/button-grid.ts     |  1 +
 src/button-grid/plugin.ts                     | 36 +++++-----
 src/cubic-bezier/api/cubic-bezier.ts          | 28 ++++----
 .../controller/cubic-bezier-graph.ts          | 28 ++++----
 .../controller/cubic-bezier-picker.ts         |  9 ++-
 src/cubic-bezier/controller/cubic-bezier.ts   | 16 ++---
 src/cubic-bezier/converter/cubic-bezier.ts    |  2 +-
 src/cubic-bezier/model/cubic-bezier.ts        |  2 +-
 src/cubic-bezier/plugin.ts                    | 31 +++++----
 src/cubic-bezier/view/cubic-bezier-graph.ts   |  4 +-
 src/cubic-bezier/view/cubic-bezier-preview.ts |  4 +-
 src/fps-graph/api/fps-graph.ts                | 12 ++--
 src/fps-graph/controller/fps-graph-blade.ts   | 38 +++++++++++
 src/fps-graph/controller/fps-graph.ts         | 12 ++--
 src/fps-graph/plugin.ts                       | 35 +++++-----
 src/index.ts                                  | 68 +++++++++----------
 src/interval/constraint/interval.ts           |  2 +-
 src/interval/controller/range-slider-text.ts  | 22 +++---
 src/interval/controller/range-slider.ts       | 16 ++---
 src/interval/converter/interval.ts            |  2 +-
 src/interval/model/interval-test.ts           |  2 +-
 src/interval/model/interval.ts                |  2 +-
 src/interval/plugin.ts                        | 66 +++++++-----------
 src/interval/view/range-slider-text.ts        |  4 +-
 src/interval/view/range-slider.ts             |  6 +-
 src/radio-grid/api/radio-cell-api.ts          |  2 +-
 src/radio-grid/api/radio-grid.ts              | 27 ++++----
 src/radio-grid/api/tp-radio-grid-event.ts     |  6 +-
 src/radio-grid/blade-plugin.ts                | 32 +++++----
 src/radio-grid/controller/radio-grid.ts       |  4 +-
 src/radio-grid/controller/radio.ts            |  2 +-
 src/radio-grid/input-plugin.ts                | 19 +++---
 src/sass/_button-grid.scss                    | 14 ++--
 src/sass/_cubic-bezier.scss                   | 59 ++++++++--------
 src/sass/_fps.scss                            |  6 +-
 src/sass/_interval.scss                       | 29 ++++----
 src/sass/_radio-grid.scss                     | 10 +--
 src/sass/_radio.scss                          | 12 ++--
 src/sass/plugin.scss                          | 15 ++--
 src/tsconfig.json                             |  2 +-
 test/browser.html                             | 17 ++---
 53 files changed, 494 insertions(+), 441 deletions(-)
 delete mode 100644 .eslintrc.js
 create mode 100644 .eslintrc.json
 delete mode 100644 .prettierrc.js
 create mode 100644 .prettierrc.json
 create mode 100644 src/button-grid/controller/button-grid-blade.ts
 create mode 100644 src/fps-graph/controller/fps-graph-blade.ts

diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 3937025..0000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,42 +0,0 @@
-module.exports = {
-	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/eslint-recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:prettier/recommended',
-	],
-	parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint', 'simple-import-sort'],
-	root: true,
-	rules: {
-		camelcase: 'off',
-		'no-unused-vars': 'off',
-		'sort-imports': 'off',
-
-		'prettier/prettier': 'error',
-		'simple-import-sort/imports': 'error',
-		'@typescript-eslint/naming-convention': [
-			'error',
-			{
-				selector: 'variable',
-				format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
-				custom: {
-					regex: '^opt_',
-					match: false,
-				},
-			},
-		],
-		'@typescript-eslint/explicit-function-return-type': 'off',
-		'@typescript-eslint/no-empty-function': 'off',
-		'@typescript-eslint/no-explicit-any': 'off',
-		'@typescript-eslint/no-unused-vars': [
-			'error',
-			{
-				argsIgnorePattern: '^_',
-			},
-		],
-
-		// TODO: Resolve latest lint warnings
-		'@typescript-eslint/explicit-module-boundary-types': 'off',
-	},
-};
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..f233856
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,42 @@
+{
+	"extends": [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/eslint-recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:prettier/recommended"
+	],
+	"parser": "@typescript-eslint/parser",
+	"plugins": ["@typescript-eslint", "simple-import-sort"],
+	"root": true,
+	"rules": {
+		"camelcase": "off",
+		"no-unused-vars": "off",
+		"sort-imports": "off",
+
+		"prettier/prettier": "error",
+		"simple-import-sort/imports": "error",
+		"@typescript-eslint/naming-convention": [
+			"error",
+			{
+				"selector": "variable",
+				"format": ["camelCase", "PascalCase", "UPPER_CASE"],
+				"custom": {
+					"regex": "^opt_",
+					"match": false
+				}
+			}
+		],
+		"@typescript-eslint/explicit-function-return-type": "off",
+		"@typescript-eslint/no-empty-function": "off",
+		"@typescript-eslint/no-explicit-any": "off",
+		"@typescript-eslint/no-unused-vars": [
+			"error",
+			{
+				"argsIgnorePattern": "^_"
+			}
+		],
+
+		// TODO: Resolve latest lint warnings
+		"@typescript-eslint/explicit-module-boundary-types": "off"
+	}
+}
diff --git a/.prettierrc.js b/.prettierrc.js
deleted file mode 100644
index 9aebbb4..0000000
--- a/.prettierrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-	arrowParens: 'always',
-	bracketSpacing: false,
-	singleQuote: true,
-	trailingComma: 'all',
-	useTabs: true,
-};
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..6c53cb3
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+	"arrowParens": "always",
+	"bracketSpacing": false,
+	"singleQuote": true,
+	"trailingComma": "all",
+	"useTabs": true
+}
diff --git a/README.md b/README.md
index fd4a366..7e70770 100644
--- a/README.md
+++ b/README.md
@@ -9,10 +9,11 @@ Essential components for [Tweakpane][tweakpane].
 
 ### Browser
 ```html
-<script src="tweakpane.min.js"></script>
-<script src="tweakpane-plugin-essentials.min.js"></script>
-<script>
-  const pane = new Tweakpane.Pane();
+<script type="module">
+  import {Pane} as Tweakpane from './tweakpane.min.js';
+  import * as TweakpaneEssentialsPlugin from './tweakpane-plugin-essentials.min.js';
+
+  const pane = new Pane();
   pane.registerPlugin(TweakpaneEssentialsPlugin);
 </script>
 ```
@@ -39,7 +40,7 @@ const params = {
   range: {min: 16, max: 48},
 };
 
-pane.addInput(params, 'range', {
+pane.addBinding(params, 'range', {
   min: 0,
   max: 100,
 
@@ -56,7 +57,7 @@ const fpsGraph = pane.addBlade({
   view: 'fpsgraph',
 
   label: 'fpsgraph',
-  lineCount: 2,
+  rows: 2,
 });
 
 function render() {
@@ -79,7 +80,7 @@ const params = {
 };
 
 const scales = [10, 20, 25, 50, 75, 100];
-pane.addInput(params, 'scale', {
+pane.addBinding(params, 'scale', {
   view: 'radiogrid',
   groupName: 'scale',
   size: [3, 2],
diff --git a/package.json b/package.json
index 34ad284..7aee53b 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.8",
   "description": "Essential components for Tweakpane",
   "main": "dist/tweakpane-plugin-essentials.js",
+  "type": "module",
   "types": "dist/types/index.d.ts",
   "author": "cocopon",
   "license": "MIT",
@@ -12,7 +13,7 @@
   "scripts": {
     "prepack": "run-s clean build",
     "prepublishOnly": "npm test",
-    "start": "npm run watch",
+    "start": "run-p watch server",
     "test": "eslint --ext .ts 'src/**/*.ts'",
     "assets": "run-s clean build assets:version assets:zip",
     "assets:version": "node scripts/assets-append-version.js",
@@ -25,6 +26,7 @@
     "format": "run-p format:*",
     "format:scss": "prettier --parser scss --write 'src/sass/**/*.scss'",
     "format:ts": "eslint --ext .ts --fix 'src/**/*.ts'",
+    "server": "http-server -c-1 -o /test/browser.html",
     "watch": "run-p watch:*",
     "watch:sass": "onchange --initial --kill 'src/sass/**/*.scss' -- npm run build:dev",
     "watch:ts": "onchange --initial --kill 'src/**/*.ts' -- rollup --config rollup.config.js"
@@ -34,14 +36,14 @@
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^2.4.1",
     "@rollup/plugin-typescript": "^8.2.0",
-    "@tweakpane/core": "^1.1.4",
+    "@tweakpane/core": "^2.0.0-alpha.0",
     "@types/chai": "^4.2.18",
     "@types/mocha": "^8.2.2",
     "@typescript-eslint/eslint-plugin": "5.33",
     "@typescript-eslint/parser": "^5.33.0",
     "autoprefixer": "^10.2.4",
     "chai": "^4.3.4",
-    "eslint": "^7.20.0",
+    "eslint": "^8.39.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-simple-import-sort": "^7.0.0",
@@ -49,7 +51,7 @@
     "npm-run-all": "^4.1.5",
     "onchange": "^7.1.0",
     "postcss": "^8.2.6",
-    "prettier": "^2.2.1",
+    "prettier": "^2.8.8",
     "rimraf": "^3.0.2",
     "rollup": "^2.39.1",
     "rollup-plugin-cleanup": "^3.2.1",
@@ -58,6 +60,6 @@
     "typescript": "4.7"
   },
   "peerDependencies": {
-    "tweakpane": "^3.1.4"
+    "tweakpane": "^4.0.0-alpha.0"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
index 0b7eb71..1ded5d1 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 import Alias from '@rollup/plugin-alias';
 import {nodeResolve} from '@rollup/plugin-node-resolve';
 import Replace from '@rollup/plugin-replace';
@@ -24,12 +26,11 @@ async function compileCss() {
 
 function getPlugins(css, shouldMinify) {
 	const plugins = [
-		// Use ES6 source files to avoid CommonJS transpiling
 		Alias({
 			entries: [
 				{
 					find: '@tweakpane/core',
-					replacement: './node_modules/@tweakpane/core/dist/es6/index.js',
+					replacement: './node_modules/@tweakpane/core/dist/esm/index.js',
 				},
 			],
 		}),
@@ -63,19 +64,6 @@ function getDistName(packageName) {
 		.join('-');
 }
 
-function getUmdName(packageName) {
-	// `@tweakpane/plugin-foobar` -> `TweakpaneFoobarPlugin`
-	// `tweakpane-plugin-foobar`  -> `TweakpaneFoobarPlugin`
-	return (
-		packageName
-			.split(/[@/-]/)
-			.map((comp) =>
-				comp !== 'plugin' ? comp.charAt(0).toUpperCase() + comp.slice(1) : '',
-			)
-			.join('') + 'Plugin'
-	);
-}
-
 export default async () => {
 	const production = process.env.BUILD === 'production';
 	const postfix = production ? '.min' : '';
@@ -87,11 +75,10 @@ export default async () => {
 		external: ['tweakpane'],
 		output: {
 			file: `dist/${distName}${postfix}.js`,
-			format: 'umd',
+			format: 'esm',
 			globals: {
 				tweakpane: 'Tweakpane',
 			},
-			name: getUmdName(Package.name),
 		},
 		plugins: getPlugins(css, production),
 
diff --git a/scripts/assets-append-version.js b/scripts/assets-append-version.js
index 811c5cc..61141dc 100644
--- a/scripts/assets-append-version.js
+++ b/scripts/assets-append-version.js
@@ -1,9 +1,13 @@
-'use strict';
+/* eslint-disable no-console */
+/* eslint-env node */
 
-const Fs = require('fs');
-const Glob = require('glob');
-const Path = require('path');
-const Package = require('../package');
+import Fs from 'fs';
+import Glob from 'glob';
+import Path from 'path';
+
+const Package = JSON.parse(
+	Fs.readFileSync(new URL('../package.json', import.meta.url)),
+);
 
 const PATTERN = 'dist/*';
 
diff --git a/scripts/dist-name.js b/scripts/dist-name.js
index c575b45..792e8b1 100644
--- a/scripts/dist-name.js
+++ b/scripts/dist-name.js
@@ -1,6 +1,11 @@
-'use strict';
+/* eslint-disable no-console */
+/* eslint-env node */
 
-const Package = require('../package.json');
+import Fs from 'fs';
+
+const Package = JSON.parse(
+	Fs.readFileSync(new URL('../package.json', import.meta.url)),
+);
 
 // `@tweakpane/plugin-foobar` -> `tweakpane-plugin-foobar`
 // `tweakpane-plugin-foobar`  -> `tweakpane-plugin-foobar`
diff --git a/src/button-grid/api/button-grid.ts b/src/button-grid/api/button-grid.ts
index 4eba4a8..895a9b9 100644
--- a/src/button-grid/api/button-grid.ts
+++ b/src/button-grid/api/button-grid.ts
@@ -1,13 +1,8 @@
-import {
-	BladeApi,
-	ButtonController,
-	Emitter,
-	LabelController,
-} from '@tweakpane/core';
+import {BladeApi, ButtonController, Emitter} from '@tweakpane/core';
 
-import {ButtonGridController} from '../controller/button-grid';
-import {ButtonCellApi} from './button-cell';
-import {TpButtonGridEvent} from './tp-button-grid-event';
+import {ButtonGridBladeController} from '../controller/button-grid-blade.js';
+import {ButtonCellApi} from './button-cell.js';
+import {TpButtonGridEvent} from './tp-button-grid-event.js';
 
 interface ButtonGridApiEvents {
 	click: {
@@ -15,18 +10,16 @@ interface ButtonGridApiEvents {
 	};
 }
 
-export class ButtonGridApi extends BladeApi<
-	LabelController<ButtonGridController>
-> {
+export class ButtonGridApi extends BladeApi<ButtonGridBladeController> {
 	private emitter_: Emitter<ButtonGridApiEvents>;
 	private cellToApiMap_: Map<ButtonController, ButtonCellApi> = new Map();
 
-	constructor(controller: LabelController<ButtonGridController>) {
+	constructor(controller: ButtonGridBladeController) {
 		super(controller);
 
 		this.emitter_ = new Emitter();
 
-		const gc = this.controller_.valueController;
+		const gc = this.controller.valueController;
 		gc.cellControllers.forEach((cc, i) => {
 			const api = new ButtonCellApi(cc);
 			this.cellToApiMap_.set(cc, api);
@@ -42,7 +35,7 @@ export class ButtonGridApi extends BladeApi<
 	}
 
 	public cell(x: number, y: number): ButtonCellApi | undefined {
-		const gc = this.controller_.valueController;
+		const gc = this.controller.valueController;
 		const cc = gc.cellControllers[y * gc.size[0] + x];
 		return this.cellToApiMap_.get(cc);
 	}
diff --git a/src/button-grid/api/tp-button-grid-event.ts b/src/button-grid/api/tp-button-grid-event.ts
index bf1cb1c..43e8f55 100644
--- a/src/button-grid/api/tp-button-grid-event.ts
+++ b/src/button-grid/api/tp-button-grid-event.ts
@@ -1,6 +1,6 @@
 import {TpEvent} from '@tweakpane/core';
 
-import {ButtonCellApi} from './button-cell';
+import {ButtonCellApi} from './button-cell.js';
 
 export class TpButtonGridEvent extends TpEvent {
 	public readonly cell: ButtonCellApi;
diff --git a/src/button-grid/controller/button-grid-blade.ts b/src/button-grid/controller/button-grid-blade.ts
new file mode 100644
index 0000000..2ce7a71
--- /dev/null
+++ b/src/button-grid/controller/button-grid-blade.ts
@@ -0,0 +1,37 @@
+import {
+	Blade,
+	BladeController,
+	LabelController,
+	LabelProps,
+	LabelView,
+} from '@tweakpane/core';
+
+import {ButtonGridController} from './button-grid.js';
+
+interface Config {
+	blade: Blade;
+	labelProps: LabelProps;
+	valueController: ButtonGridController;
+}
+
+export class ButtonGridBladeController extends BladeController<LabelView> {
+	public readonly labelController: LabelController<ButtonGridController>;
+	public readonly valueController: ButtonGridController;
+
+	constructor(doc: Document, config: Config) {
+		const bc = config.valueController;
+		const lc = new LabelController(doc, {
+			blade: config.blade,
+			props: config.labelProps,
+			valueController: bc,
+		});
+		super({
+			blade: config.blade,
+			view: lc.view,
+			viewProps: bc.viewProps,
+		});
+
+		this.valueController = bc;
+		this.labelController = lc;
+	}
+}
diff --git a/src/button-grid/controller/button-grid.ts b/src/button-grid/controller/button-grid.ts
index a318a16..87d43eb 100644
--- a/src/button-grid/controller/button-grid.ts
+++ b/src/button-grid/controller/button-grid.ts
@@ -15,6 +15,7 @@ interface Config {
 	size: [number, number];
 	cellConfig: (x: number, y: number) => CellConfig;
 }
+export type ButtonGridControllerConfig = Config;
 
 export class ButtonGridController implements Controller<PlainView> {
 	public readonly size: [number, number];
diff --git a/src/button-grid/plugin.ts b/src/button-grid/plugin.ts
index 2ccbfff..74f3a49 100644
--- a/src/button-grid/plugin.ts
+++ b/src/button-grid/plugin.ts
@@ -1,16 +1,16 @@
 import {
 	BaseBladeParams,
 	BladePlugin,
-	LabelController,
 	LabelPropsObject,
-	ParamsParser,
-	ParamsParsers,
-	parseParams,
+	MicroParser,
+	parseRecord,
 	ValueMap,
+	VERSION,
 } from '@tweakpane/core';
 
-import {ButtonGridApi} from './api/button-grid';
-import {ButtonGridController} from './controller/button-grid';
+import {ButtonGridApi} from './api/button-grid.js';
+import {ButtonGridController} from './controller/button-grid.js';
+import {ButtonGridBladeController} from './controller/button-grid-blade.js';
 
 export interface ButtonGridBladeParams extends BaseBladeParams {
 	cells: (x: number, y: number) => {title: string};
@@ -23,28 +23,27 @@ export interface ButtonGridBladeParams extends BaseBladeParams {
 export const ButtonGridBladePlugin: BladePlugin<ButtonGridBladeParams> = {
 	id: 'buttongrid',
 	type: 'blade',
-	// TODO:
 	css: '__css__',
+	core: VERSION,
 
 	accept(params) {
-		const p = ParamsParsers;
-		const result = parseParams<ButtonGridBladeParams>(params, {
-			cells: p.required.function as ParamsParser<
+		const result = parseRecord<ButtonGridBladeParams>(params, (p) => ({
+			cells: p.required.function as MicroParser<
 				(x: number, y: number) => {title: string}
 			>,
-			size: p.required.array(p.required.number) as ParamsParser<
+			size: p.required.array(p.required.number) as MicroParser<
 				[number, number]
 			>,
 			view: p.required.constant('buttongrid'),
 
 			label: p.optional.string,
-		});
+		}));
 		return result ? {params: result} : null;
 	},
 	controller(args) {
-		return new LabelController(args.document, {
+		return new ButtonGridBladeController(args.document, {
 			blade: args.blade,
-			props: ValueMap.fromObject<LabelPropsObject>({
+			labelProps: ValueMap.fromObject<LabelPropsObject>({
 				label: args.params.label,
 			}),
 			valueController: new ButtonGridController(args.document, {
@@ -54,12 +53,9 @@ export const ButtonGridBladePlugin: BladePlugin<ButtonGridBladeParams> = {
 		});
 	},
 	api(args) {
-		if (!(args.controller instanceof LabelController)) {
-			return null;
-		}
-		if (!(args.controller.valueController instanceof ButtonGridController)) {
-			return null;
+		if (args.controller instanceof ButtonGridBladeController) {
+			return new ButtonGridApi(args.controller);
 		}
-		return new ButtonGridApi(args.controller);
+		return null;
 	},
 };
diff --git a/src/cubic-bezier/api/cubic-bezier.ts b/src/cubic-bezier/api/cubic-bezier.ts
index 2122244..8b4c87a 100644
--- a/src/cubic-bezier/api/cubic-bezier.ts
+++ b/src/cubic-bezier/api/cubic-bezier.ts
@@ -1,7 +1,11 @@
-import {BladeApi, LabeledValueController, TpChangeEvent} from '@tweakpane/core';
+import {
+	BladeApi,
+	LabeledValueBladeController,
+	TpChangeEvent,
+} from '@tweakpane/core';
 
-import {CubicBezierController} from '../controller/cubic-bezier';
-import {CubicBezier} from '../model/cubic-bezier';
+import {CubicBezierController} from '../controller/cubic-bezier.js';
+import {CubicBezier} from '../model/cubic-bezier.js';
 
 export interface CubicBezierApiEvents {
 	change: {
@@ -10,22 +14,22 @@ export interface CubicBezierApiEvents {
 }
 
 export class CubicBezierApi extends BladeApi<
-	LabeledValueController<CubicBezier, CubicBezierController>
+	LabeledValueBladeController<CubicBezier, CubicBezierController>
 > {
-	get label(): string | undefined {
-		return this.controller_.props.get('label');
+	get label(): string | null | undefined {
+		return this.controller.labelController.props.get('label');
 	}
 
-	set label(label: string | undefined) {
-		this.controller_.props.set('label', label);
+	set label(label: string | null | undefined) {
+		this.controller.labelController.props.set('label', label);
 	}
 
 	get value(): CubicBezier {
-		return this.controller_.valueController.value.rawValue;
+		return this.controller.valueController.value.rawValue;
 	}
 
 	set value(value: CubicBezier) {
-		this.controller_.valueController.value.rawValue = value;
+		this.controller.valueController.value.rawValue = value;
 	}
 
 	public on<EventName extends keyof CubicBezierApiEvents>(
@@ -33,8 +37,8 @@ export class CubicBezierApi extends BladeApi<
 		handler: (ev: CubicBezierApiEvents[EventName]['event']) => void,
 	): this {
 		const bh = handler.bind(this);
-		this.controller_.valueController.value.emitter.on(eventName, (ev) => {
-			bh(new TpChangeEvent(this, ev.rawValue, undefined, ev.options.last));
+		this.controller.valueController.value.emitter.on(eventName, (ev) => {
+			bh(new TpChangeEvent(this, ev.rawValue, ev.options.last));
 		});
 		return this;
 	}
diff --git a/src/cubic-bezier/controller/cubic-bezier-graph.ts b/src/cubic-bezier/controller/cubic-bezier-graph.ts
index 60d1ead..ff85d31 100644
--- a/src/cubic-bezier/controller/cubic-bezier-graph.ts
+++ b/src/cubic-bezier/controller/cubic-bezier-graph.ts
@@ -12,12 +12,12 @@ import {
 	ViewProps,
 } from '@tweakpane/core';
 
-import {CubicBezier} from '../model/cubic-bezier';
-import {CubicBezierGraphView} from '../view/cubic-bezier-graph';
-import {CubicBezierPreviewView} from '../view/cubic-bezier-preview';
+import {CubicBezier} from '../model/cubic-bezier.js';
+import {CubicBezierGraphView} from '../view/cubic-bezier-graph.js';
+import {CubicBezierPreviewView} from '../view/cubic-bezier-preview.js';
 
 interface Config {
-	baseStep: number;
+	keyScale: Value<number>;
 	value: Value<CubicBezier>;
 	viewProps: ViewProps;
 }
@@ -51,7 +51,7 @@ export class CubicBezierGraphController
 	public readonly viewProps: ViewProps;
 	private readonly prevView_: CubicBezierPreviewView;
 	private sel_: Value<number>;
-	private baseStep_: number;
+	private keyScale_: Value<number>;
 
 	constructor(doc: Document, config: Config) {
 		this.onKeyDown_ = this.onKeyDown_.bind(this);
@@ -60,7 +60,7 @@ export class CubicBezierGraphController
 		this.onPointerMove_ = this.onPointerMove_.bind(this);
 		this.onPointerUp_ = this.onPointerUp_.bind(this);
 
-		this.baseStep_ = config.baseStep;
+		this.keyScale_ = config.keyScale;
 		this.value = config.value;
 		this.sel_ = createValue(0);
 
@@ -158,14 +158,9 @@ export class CubicBezierGraphController
 
 		const index = this.sel_.rawValue;
 		const comps = this.value.rawValue.toObject();
-		comps[index * 2] += getStepForKey(
-			this.baseStep_,
-			getHorizontalStepKeys(ev),
-		);
-		comps[index * 2 + 1] += getStepForKey(
-			this.baseStep_,
-			getVerticalStepKeys(ev),
-		);
+		const keyScale = this.keyScale_.rawValue;
+		comps[index * 2] += getStepForKey(keyScale, getHorizontalStepKeys(ev));
+		comps[index * 2 + 1] += getStepForKey(keyScale, getVerticalStepKeys(ev));
 		this.value.setRawValue(new CubicBezier(...comps), {
 			forceEmit: false,
 			last: false,
@@ -177,8 +172,9 @@ export class CubicBezierGraphController
 			ev.preventDefault();
 		}
 
-		const xStep = getStepForKey(this.baseStep_, getHorizontalStepKeys(ev));
-		const yStep = getStepForKey(this.baseStep_, getVerticalStepKeys(ev));
+		const keyScale = this.keyScale_.rawValue;
+		const xStep = getStepForKey(keyScale, getHorizontalStepKeys(ev));
+		const yStep = getStepForKey(keyScale, getVerticalStepKeys(ev));
 		if (xStep === 0 && yStep === 0) {
 			return;
 		}
diff --git a/src/cubic-bezier/controller/cubic-bezier-picker.ts b/src/cubic-bezier/controller/cubic-bezier-picker.ts
index 661f0ba..7689303 100644
--- a/src/cubic-bezier/controller/cubic-bezier-picker.ts
+++ b/src/cubic-bezier/controller/cubic-bezier-picker.ts
@@ -8,12 +8,11 @@ import {
 	ViewProps,
 } from '@tweakpane/core';
 
-import {CubicBezier, CubicBezierAssembly} from '../model/cubic-bezier';
-import {CubicBezierPickerView} from '../view/cubic-bezier-picker';
-import {CubicBezierGraphController} from './cubic-bezier-graph';
+import {CubicBezier, CubicBezierAssembly} from '../model/cubic-bezier.js';
+import {CubicBezierPickerView} from '../view/cubic-bezier-picker.js';
+import {CubicBezierGraphController} from './cubic-bezier-graph.js';
 
 interface Axis {
-	baseStep: number;
 	textProps: NumberTextProps;
 }
 
@@ -41,7 +40,7 @@ export class CubicBezierPickerController
 		});
 
 		this.gc_ = new CubicBezierGraphController(doc, {
-			baseStep: config.axis.baseStep,
+			keyScale: config.axis.textProps.value('keyScale'),
 			value: this.value,
 			viewProps: this.viewProps,
 		});
diff --git a/src/cubic-bezier/controller/cubic-bezier.ts b/src/cubic-bezier/controller/cubic-bezier.ts
index 9537282..047d876 100644
--- a/src/cubic-bezier/controller/cubic-bezier.ts
+++ b/src/cubic-bezier/controller/cubic-bezier.ts
@@ -2,7 +2,6 @@ import {
 	bindFoldable,
 	bindValue,
 	connectValues,
-	createFoldable,
 	findNextTarget,
 	Foldable,
 	forceCast,
@@ -20,13 +19,12 @@ import {
 import {
 	cubicBezierFromString,
 	cubicBezierToString,
-} from '../converter/cubic-bezier';
-import {CubicBezier} from '../model/cubic-bezier';
-import {CubicBezierView} from '../view/cubic-bezier';
-import {CubicBezierPickerController} from './cubic-bezier-picker';
+} from '../converter/cubic-bezier.js';
+import {CubicBezier} from '../model/cubic-bezier.js';
+import {CubicBezierView} from '../view/cubic-bezier.js';
+import {CubicBezierPickerController} from './cubic-bezier-picker.js';
 
 interface Axis {
-	baseStep: number;
 	textProps: NumberTextProps;
 }
 
@@ -57,7 +55,7 @@ export class CubicBezierController
 
 		this.value = config.value;
 		this.viewProps = config.viewProps;
-		this.foldable_ = createFoldable(config.expanded);
+		this.foldable_ = Foldable.create(config.expanded);
 
 		this.view = new CubicBezierView(doc, {
 			foldable: this.foldable_,
@@ -106,8 +104,8 @@ export class CubicBezierController
 			connectValues({
 				primary: this.foldable_.value('expanded'),
 				secondary: this.popC_.shows,
-				forward: (p) => p.rawValue,
-				backward: (_, s) => s.rawValue,
+				forward: (p) => p,
+				backward: (_, s) => s,
 			});
 		} else if (this.view.pickerElement) {
 			this.view.pickerElement.appendChild(this.pickerC_.view.element);
diff --git a/src/cubic-bezier/converter/cubic-bezier.ts b/src/cubic-bezier/converter/cubic-bezier.ts
index edac22a..b530f51 100644
--- a/src/cubic-bezier/converter/cubic-bezier.ts
+++ b/src/cubic-bezier/converter/cubic-bezier.ts
@@ -1,6 +1,6 @@
 import {createNumberFormatter} from '@tweakpane/core';
 
-import {CubicBezier} from '../model/cubic-bezier';
+import {CubicBezier} from '../model/cubic-bezier.js';
 
 export function cubicBezierToString(cb: CubicBezier): string {
 	const formatter = createNumberFormatter(2);
diff --git a/src/cubic-bezier/model/cubic-bezier.ts b/src/cubic-bezier/model/cubic-bezier.ts
index a0b8e66..6b98c7f 100644
--- a/src/cubic-bezier/model/cubic-bezier.ts
+++ b/src/cubic-bezier/model/cubic-bezier.ts
@@ -1,5 +1,5 @@
 import {constrainRange, isEmpty, mapRange} from '@tweakpane/core';
-import {PointNdAssembly} from '@tweakpane/core/dist/cjs/input-binding/common/model/point-nd';
+import {PointNdAssembly} from '@tweakpane/core/dist/esm/input-binding/common/model/point-nd.js';
 
 export type CubicBezierObject = [number, number, number, number];
 
diff --git a/src/cubic-bezier/plugin.ts b/src/cubic-bezier/plugin.ts
index 5638baf..2b274d6 100644
--- a/src/cubic-bezier/plugin.ts
+++ b/src/cubic-bezier/plugin.ts
@@ -3,19 +3,20 @@ import {
 	Constraint,
 	createNumberFormatter,
 	createValue,
-	LabeledValueController,
-	ParamsParsers,
-	parseParams,
+	LabeledValueBladeController,
+	LabelPropsObject,
+	parseRecord,
 	PickerLayout,
 	PointNdConstraint,
 	RangeConstraint,
 	ValueMap,
+	VERSION,
 } from '@tweakpane/core';
 import {BaseBladeParams} from 'tweakpane';
 
-import {CubicBezierApi} from './api/cubic-bezier';
-import {CubicBezierController} from './controller/cubic-bezier';
-import {CubicBezier, CubicBezierAssembly} from './model/cubic-bezier';
+import {CubicBezierApi} from './api/cubic-bezier.js';
+import {CubicBezierController} from './controller/cubic-bezier.js';
+import {CubicBezier, CubicBezierAssembly} from './model/cubic-bezier.js';
 
 export interface CubicBezierBladeParams extends BaseBladeParams {
 	value: [number, number, number, number];
@@ -43,11 +44,10 @@ function createConstraint(): Constraint<CubicBezier> {
 export const CubicBezierBladePlugin: BladePlugin<CubicBezierBladeParams> = {
 	id: 'cubic-bezier',
 	type: 'blade',
-	css: '__css__',
+	core: VERSION,
 
 	accept(params) {
-		const p = ParamsParsers;
-		const result = parseParams(params, {
+		const result = parseRecord(params, (p) => ({
 			value: p.required.array(p.required.number),
 			view: p.required.constant('cubicbezier'),
 
@@ -56,7 +56,7 @@ export const CubicBezierBladePlugin: BladePlugin<CubicBezierBladeParams> = {
 			picker: p.optional.custom<PickerLayout>((v) => {
 				return v === 'inline' || v === 'popup' ? v : undefined;
 			}),
-		});
+		}));
 		return result ? {params: result} : null;
 	},
 	controller(args) {
@@ -67,9 +67,9 @@ export const CubicBezierBladePlugin: BladePlugin<CubicBezierBladeParams> = {
 		});
 		const vc = new CubicBezierController(args.document, {
 			axis: {
-				baseStep: 0.1,
 				textProps: ValueMap.fromObject({
-					draggingScale: 0.01,
+					keyScale: 0.1,
+					pointerScale: 0.01,
 					formatter: createNumberFormatter(2),
 				}),
 			},
@@ -78,16 +78,17 @@ export const CubicBezierBladePlugin: BladePlugin<CubicBezierBladeParams> = {
 			value: v,
 			viewProps: args.viewProps,
 		});
-		return new LabeledValueController(args.document, {
+		return new LabeledValueBladeController(args.document, {
 			blade: args.blade,
 			props: ValueMap.fromObject({
 				label: args.params.label,
-			}),
+			} as LabelPropsObject),
+			value: v,
 			valueController: vc,
 		});
 	},
 	api(args) {
-		if (!(args.controller instanceof LabeledValueController)) {
+		if (!(args.controller instanceof LabeledValueBladeController)) {
 			return null;
 		}
 		if (!(args.controller.valueController instanceof CubicBezierController)) {
diff --git a/src/cubic-bezier/view/cubic-bezier-graph.ts b/src/cubic-bezier/view/cubic-bezier-graph.ts
index 8e8b76e..16f2533 100644
--- a/src/cubic-bezier/view/cubic-bezier-graph.ts
+++ b/src/cubic-bezier/view/cubic-bezier-graph.ts
@@ -10,8 +10,8 @@ import {
 	ViewProps,
 } from '@tweakpane/core';
 
-import {CubicBezier} from '../model/cubic-bezier';
-import {waitToBeAddedToDom} from './util';
+import {CubicBezier} from '../model/cubic-bezier.js';
+import {waitToBeAddedToDom} from './util.js';
 
 interface Config {
 	selection: Value<number>;
diff --git a/src/cubic-bezier/view/cubic-bezier-preview.ts b/src/cubic-bezier/view/cubic-bezier-preview.ts
index ac59d10..e49254f 100644
--- a/src/cubic-bezier/view/cubic-bezier-preview.ts
+++ b/src/cubic-bezier/view/cubic-bezier-preview.ts
@@ -8,8 +8,8 @@ import {
 	ViewProps,
 } from '@tweakpane/core';
 
-import {CubicBezier} from '../model/cubic-bezier';
-import {waitToBeAddedToDom} from './util';
+import {CubicBezier} from '../model/cubic-bezier.js';
+import {waitToBeAddedToDom} from './util.js';
 
 interface Config {
 	value: Value<CubicBezier>;
diff --git a/src/fps-graph/api/fps-graph.ts b/src/fps-graph/api/fps-graph.ts
index d728b50..187a544 100644
--- a/src/fps-graph/api/fps-graph.ts
+++ b/src/fps-graph/api/fps-graph.ts
@@ -1,15 +1,13 @@
-import {BladeApi, LabelController} from '@tweakpane/core';
+import {BladeApi} from '@tweakpane/core';
 
-import {FpsGraphController} from '../controller/fps-graph';
+import {FpsGraphBladeController} from '../controller/fps-graph-blade.js';
 
-export class FpsGraphBladeApi extends BladeApi<
-	LabelController<FpsGraphController>
-> {
+export class FpsGraphBladeApi extends BladeApi<FpsGraphBladeController> {
 	public begin(): void {
-		this.controller_.valueController.begin();
+		this.controller.valueController.begin();
 	}
 
 	public end(): void {
-		this.controller_.valueController.end();
+		this.controller.valueController.end();
 	}
 }
diff --git a/src/fps-graph/controller/fps-graph-blade.ts b/src/fps-graph/controller/fps-graph-blade.ts
new file mode 100644
index 0000000..1ab7f8e
--- /dev/null
+++ b/src/fps-graph/controller/fps-graph-blade.ts
@@ -0,0 +1,38 @@
+import {
+	Blade,
+	BladeController,
+	LabelController,
+	LabelProps,
+	LabelView,
+} from '@tweakpane/core';
+
+import {FpsGraphController} from './fps-graph.js';
+
+interface Config {
+	blade: Blade;
+	labelProps: LabelProps;
+	valueController: FpsGraphController;
+}
+
+export class FpsGraphBladeController extends BladeController<LabelView> {
+	public readonly labelController: LabelController<FpsGraphController>;
+	public readonly valueController: FpsGraphController;
+
+	constructor(doc: Document, config: Config) {
+		const fc = config.valueController;
+		const lc = new LabelController(doc, {
+			blade: config.blade,
+			props: config.labelProps,
+			valueController: fc,
+		});
+
+		super({
+			blade: config.blade,
+			view: lc.view,
+			viewProps: fc.viewProps,
+		});
+
+		this.valueController = fc;
+		this.labelController = lc;
+	}
+}
diff --git a/src/fps-graph/controller/fps-graph.ts b/src/fps-graph/controller/fps-graph.ts
index 99b0ba4..f3eb3b5 100644
--- a/src/fps-graph/controller/fps-graph.ts
+++ b/src/fps-graph/controller/fps-graph.ts
@@ -9,13 +9,13 @@ import {
 	ViewProps,
 } from '@tweakpane/core';
 
-import {Fpswatch} from '../model/stopwatch';
-import {FpsView} from '../view/fps';
+import {Fpswatch} from '../model/stopwatch.js';
+import {FpsView} from '../view/fps.js';
 
 interface Config {
-	lineCount: number;
 	maxValue: number;
 	minValue: number;
+	rows: number;
 	ticker: Ticker;
 	value: BufferedValue<number>;
 	viewProps: ViewProps;
@@ -44,11 +44,11 @@ export class FpsGraphController implements Controller<FpsView> {
 
 		this.graphC_ = new GraphLogController(doc, {
 			formatter: createNumberFormatter(0),
-			lineCount: config.lineCount,
 			props: ValueMap.fromObject({
-				maxValue: config.maxValue,
-				minValue: config.minValue,
+				max: config.maxValue,
+				min: config.minValue,
 			}),
+			rows: config.rows,
 			value: this.value_,
 			viewProps: this.viewProps,
 		});
diff --git a/src/fps-graph/plugin.ts b/src/fps-graph/plugin.ts
index 3e44378..8be8e4c 100644
--- a/src/fps-graph/plugin.ts
+++ b/src/fps-graph/plugin.ts
@@ -2,28 +2,29 @@ import {
 	BaseBladeParams,
 	BladePlugin,
 	Constants,
+	createValue,
 	initializeBuffer,
 	IntervalTicker,
-	LabelController,
 	LabelPropsObject,
 	ManualTicker,
-	ParamsParsers,
-	parseParams,
+	parseRecord,
 	Ticker,
 	ValueMap,
+	VERSION,
 } from '@tweakpane/core';
 
-import {FpsGraphBladeApi} from './api/fps-graph';
-import {FpsGraphController} from './controller/fps-graph';
+import {FpsGraphBladeApi} from './api/fps-graph.js';
+import {FpsGraphController} from './controller/fps-graph.js';
+import {FpsGraphBladeController} from './controller/fps-graph-blade.js';
 
 export interface FpsGraphBladeParams extends BaseBladeParams {
 	view: 'fpsgraph';
 
 	interval?: number;
 	label?: string;
-	lineCount?: number;
 	max?: number;
 	min?: number;
+	rows?: number;
 }
 
 function createTicker(
@@ -41,41 +42,39 @@ function createTicker(
 export const FpsGraphBladePlugin: BladePlugin<FpsGraphBladeParams> = {
 	id: 'fpsgraph',
 	type: 'blade',
+	core: VERSION,
+
 	accept(params) {
-		const p = ParamsParsers;
-		const result = parseParams<FpsGraphBladeParams>(params, {
+		const result = parseRecord<FpsGraphBladeParams>(params, (p) => ({
 			view: p.required.constant('fpsgraph'),
 
 			interval: p.optional.number,
 			label: p.optional.string,
-			lineCount: p.optional.number,
+			rows: p.optional.number,
 			max: p.optional.number,
 			min: p.optional.number,
-		});
+		}));
 		return result ? {params: result} : null;
 	},
 	controller(args) {
 		const interval = args.params.interval ?? 500;
-		return new LabelController(args.document, {
+		return new FpsGraphBladeController(args.document, {
 			blade: args.blade,
-			props: ValueMap.fromObject<LabelPropsObject>({
+			labelProps: ValueMap.fromObject<LabelPropsObject>({
 				label: args.params.label,
 			}),
 			valueController: new FpsGraphController(args.document, {
-				lineCount: args.params.lineCount ?? 2,
+				rows: args.params.rows ?? 2,
 				maxValue: args.params.max ?? 90,
 				minValue: args.params.min ?? 0,
 				ticker: createTicker(args.document, interval),
-				value: initializeBuffer(80),
+				value: createValue(initializeBuffer(80)),
 				viewProps: args.viewProps,
 			}),
 		});
 	},
 	api(args) {
-		if (!(args.controller instanceof LabelController)) {
-			return null;
-		}
-		if (!(args.controller.valueController instanceof FpsGraphController)) {
+		if (!(args.controller instanceof FpsGraphBladeController)) {
 			return null;
 		}
 		return new FpsGraphBladeApi(args.controller);
diff --git a/src/index.ts b/src/index.ts
index 39bbf91..8d21d5c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,15 +1,15 @@
 import {TpPlugin} from '@tweakpane/core';
 
-import {ButtonGridBladePlugin} from './button-grid/plugin';
-import {CubicBezierBladePlugin} from './cubic-bezier/plugin';
-import {FpsGraphBladePlugin} from './fps-graph/plugin';
-import {IntervalInputPlugin} from './interval/plugin';
-import {RadioGridBladePlugin} from './radio-grid/blade-plugin';
+import {ButtonGridBladePlugin} from './button-grid/plugin.js';
+import {CubicBezierBladePlugin} from './cubic-bezier/plugin.js';
+import {FpsGraphBladePlugin} from './fps-graph/plugin.js';
+import {IntervalInputPlugin} from './interval/plugin.js';
+import {RadioGridBladePlugin} from './radio-grid/blade-plugin.js';
 import {
 	RadioGruidBooleanInputPlugin,
 	RadioGruidNumberInputPlugin,
 	RadioGruidStringInputPlugin,
-} from './radio-grid/input-plugin';
+} from './radio-grid/input-plugin.js';
 
 export const plugins: TpPlugin[] = [
 	ButtonGridBladePlugin,
@@ -22,35 +22,35 @@ export const plugins: TpPlugin[] = [
 	RadioGruidStringInputPlugin,
 ];
 
-export * from './button-grid/api/button-cell';
-export * from './button-grid/api/button-grid';
-export * from './button-grid/controller/button-grid';
+export * from './button-grid/api/button-cell.js';
+export * from './button-grid/api/button-grid.js';
+export * from './button-grid/controller/button-grid.js';
 
-export * from './cubic-bezier/api/cubic-bezier';
-export * from './cubic-bezier/controller/cubic-bezier';
-export * from './cubic-bezier/controller/cubic-bezier-graph';
-export * from './cubic-bezier/controller/cubic-bezier-picker';
-export * from './cubic-bezier/model/cubic-bezier';
-export * from './cubic-bezier/view/cubic-bezier';
-export * from './cubic-bezier/view/cubic-bezier-graph';
-export * from './cubic-bezier/view/cubic-bezier-picker';
-export * from './cubic-bezier/view/cubic-bezier-preview';
+export * from './cubic-bezier/api/cubic-bezier.js';
+export * from './cubic-bezier/controller/cubic-bezier.js';
+export * from './cubic-bezier/controller/cubic-bezier-graph.js';
+export * from './cubic-bezier/controller/cubic-bezier-picker.js';
+export * from './cubic-bezier/model/cubic-bezier.js';
+export * from './cubic-bezier/view/cubic-bezier.js';
+export * from './cubic-bezier/view/cubic-bezier-graph.js';
+export * from './cubic-bezier/view/cubic-bezier-picker.js';
+export * from './cubic-bezier/view/cubic-bezier-preview.js';
 
-export * from './fps-graph/api/fps-graph';
-export * from './fps-graph/controller/fps-graph';
-export * from './fps-graph/model/stopwatch';
-export * from './fps-graph/view/fps';
+export * from './fps-graph/api/fps-graph.js';
+export * from './fps-graph/controller/fps-graph.js';
+export * from './fps-graph/model/stopwatch.js';
+export * from './fps-graph/view/fps.js';
 
-export * from './interval/constraint/interval';
-export * from './interval/controller/range-slider';
-export * from './interval/controller/range-slider-text';
-export * from './interval/model/interval';
-export * from './interval/view/range-slider';
-export * from './interval/view/range-slider-text';
+export * from './interval/constraint/interval.js';
+export * from './interval/controller/range-slider.js';
+export * from './interval/controller/range-slider-text.js';
+export * from './interval/model/interval.js';
+export * from './interval/view/range-slider.js';
+export * from './interval/view/range-slider-text.js';
 
-export * from './radio-grid/api/radio-cell-api';
-export * from './radio-grid/api/radio-grid';
-export * from './radio-grid/api/tp-radio-grid-event';
-export * from './radio-grid/controller/radio';
-export * from './radio-grid/controller/radio-grid';
-export * from './radio-grid/view/radio';
+export * from './radio-grid/api/radio-cell-api.js';
+export * from './radio-grid/api/radio-grid.js';
+export * from './radio-grid/api/tp-radio-grid-event.js';
+export * from './radio-grid/controller/radio.js';
+export * from './radio-grid/controller/radio-grid.js';
+export * from './radio-grid/view/radio.js';
diff --git a/src/interval/constraint/interval.ts b/src/interval/constraint/interval.ts
index 875deec..9773b49 100644
--- a/src/interval/constraint/interval.ts
+++ b/src/interval/constraint/interval.ts
@@ -1,6 +1,6 @@
 import {Constraint} from '@tweakpane/core';
 
-import {Interval} from '../model/interval';
+import {Interval} from '../model/interval.js';
 
 export class IntervalConstraint implements Constraint<Interval> {
 	public readonly edge: Constraint<number> | undefined;
diff --git a/src/interval/controller/range-slider-text.ts b/src/interval/controller/range-slider-text.ts
index 5b4c40d..e15f8ae 100644
--- a/src/interval/controller/range-slider-text.ts
+++ b/src/interval/controller/range-slider-text.ts
@@ -1,26 +1,24 @@
 import {
 	Constraint,
-	Formatter,
+	NumberTextProps,
 	Parser,
 	PointNdTextController,
 	SliderProps,
 	Value,
 	ValueController,
-	ValueMap,
 	ViewProps,
 } from '@tweakpane/core';
+import {PointAxis} from '@tweakpane/core/dist/esm/common/point-nd/point-axis.js';
 
-import {Interval, IntervalAssembly} from '../model/interval';
-import {RangeSliderTextView} from '../view/range-slider-text';
-import {RangeSliderController} from './range-slider';
+import {Interval, IntervalAssembly} from '../model/interval.js';
+import {RangeSliderTextView} from '../view/range-slider-text.js';
+import {RangeSliderController} from './range-slider.js';
 
 interface Config {
-	baseStep: number;
 	constraint: Constraint<number> | undefined;
-	draggingScale: number;
-	formatter: Formatter<number>;
 	parser: Parser<number>;
 	sliderProps: SliderProps;
+	textProps: NumberTextProps;
 	value: Value<Interval>;
 	viewProps: ViewProps;
 }
@@ -41,13 +39,9 @@ export class RangeSliderTextController
 		this.sc_ = new RangeSliderController(doc, config);
 
 		const axis = {
-			baseStep: config.baseStep,
 			constraint: config.constraint,
-			textProps: ValueMap.fromObject({
-				draggingScale: config.draggingScale,
-				formatter: config.formatter,
-			}),
-		};
+			textProps: config.textProps,
+		} as PointAxis;
 		this.tc_ = new PointNdTextController(doc, {
 			assembly: IntervalAssembly,
 			axes: [axis, axis],
diff --git a/src/interval/controller/range-slider.ts b/src/interval/controller/range-slider.ts
index ca00680..29d78fd 100644
--- a/src/interval/controller/range-slider.ts
+++ b/src/interval/controller/range-slider.ts
@@ -10,8 +10,8 @@ import {
 	ViewProps,
 } from '@tweakpane/core';
 
-import {Interval} from '../model/interval';
-import {RangeSliderView} from '../view/range-slider';
+import {Interval} from '../model/interval.js';
+import {RangeSliderView} from '../view/range-slider.js';
 
 interface Config {
 	sliderProps: SliderProps;
@@ -68,8 +68,8 @@ export class RangeSliderController
 		}
 
 		const p = (data.point.x + this.ofs_()) / data.bounds.width;
-		const min = this.sliderProps.get('minValue');
-		const max = this.sliderProps.get('maxValue');
+		const min = this.sliderProps.get('min');
+		const max = this.sliderProps.get('max');
 		return mapRange(p, 0, 1, min, max);
 	}
 
@@ -80,8 +80,8 @@ export class RangeSliderController
 
 		const p = ev.data.point.x / ev.data.bounds.width;
 		const v = this.value.rawValue;
-		const min = this.sliderProps.get('minValue');
-		const max = this.sliderProps.get('maxValue');
+		const min = this.sliderProps.get('min');
+		const max = this.sliderProps.get('max');
 		const pmin = mapRange(v.min, min, max, 0, 1);
 		const pmax = mapRange(v.max, min, max, 0, 1);
 
@@ -110,8 +110,8 @@ export class RangeSliderController
 			return;
 		}
 
-		const rmin = this.sliderProps.get('minValue');
-		const rmax = this.sliderProps.get('maxValue');
+		const rmin = this.sliderProps.get('min');
+		const rmax = this.sliderProps.get('max');
 		if (this.grabbing_ === 'min') {
 			this.value.setRawValue(new Interval(v, this.value.rawValue.max), opts);
 		} else if (this.grabbing_ === 'max') {
diff --git a/src/interval/converter/interval.ts b/src/interval/converter/interval.ts
index 28c838f..c64cdb8 100644
--- a/src/interval/converter/interval.ts
+++ b/src/interval/converter/interval.ts
@@ -1,6 +1,6 @@
 import {BindingTarget} from '@tweakpane/core';
 
-import {Interval} from '../model/interval';
+import {Interval} from '../model/interval.js';
 
 export function intervalFromUnknown(value: unknown): Interval {
 	return Interval.isObject(value)
diff --git a/src/interval/model/interval-test.ts b/src/interval/model/interval-test.ts
index f75b89d..cf42a85 100644
--- a/src/interval/model/interval-test.ts
+++ b/src/interval/model/interval-test.ts
@@ -1,7 +1,7 @@
 import {assert} from 'chai';
 import {describe as context, describe, it} from 'mocha';
 
-import {Interval} from './interval';
+import {Interval} from './interval.js';
 
 describe(Interval.name, () => {
 	[
diff --git a/src/interval/model/interval.ts b/src/interval/model/interval.ts
index e5e2c8d..4d9f1b9 100644
--- a/src/interval/model/interval.ts
+++ b/src/interval/model/interval.ts
@@ -1,4 +1,4 @@
-import {PointNdAssembly} from '@tweakpane/core/dist/cjs/input-binding/common/model/point-nd';
+import {PointNdAssembly} from '@tweakpane/core/dist/esm/input-binding/common/model/point-nd.js';
 
 export interface IntervalObject {
 	max: number;
diff --git a/src/interval/plugin.ts b/src/interval/plugin.ts
index 8d54de3..3501ef7 100644
--- a/src/interval/plugin.ts
+++ b/src/interval/plugin.ts
@@ -2,36 +2,29 @@ import {
 	BaseInputParams,
 	CompositeConstraint,
 	Constraint,
-	createNumberFormatter,
+	createNumberTextInputParamsParser,
+	createNumberTextPropsObject,
 	createRangeConstraint,
 	createStepConstraint,
 	DefiniteRangeConstraint,
 	findConstraint,
-	Formatter,
-	getBaseStep,
-	getSuitableDecimalDigits,
-	getSuitableDraggingScale,
 	InputBindingPlugin,
-	ParamsParser,
-	ParamsParsers,
+	NumberInputParams,
 	parseNumber,
-	parseParams,
+	parseRecord,
 	PointNdTextController,
 	TpError,
 	ValueMap,
+	VERSION,
 } from '@tweakpane/core';
+import {PointAxis} from '@tweakpane/core/dist/esm/common/point-nd/point-axis.js';
 
-import {IntervalConstraint} from './constraint/interval';
-import {RangeSliderTextController} from './controller/range-slider-text';
-import {intervalFromUnknown, writeInterval} from './converter/interval';
-import {Interval, IntervalAssembly, IntervalObject} from './model/interval';
+import {IntervalConstraint} from './constraint/interval.js';
+import {RangeSliderTextController} from './controller/range-slider-text.js';
+import {intervalFromUnknown, writeInterval} from './converter/interval.js';
+import {Interval, IntervalAssembly, IntervalObject} from './model/interval.js';
 
-interface IntervalInputParams extends BaseInputParams {
-	format?: Formatter<number>;
-	max?: number;
-	min?: number;
-	step?: number;
-}
+interface IntervalInputParams extends NumberInputParams, BaseInputParams {}
 
 function createConstraint(params: IntervalInputParams): Constraint<Interval> {
 	const constraints = [];
@@ -54,20 +47,17 @@ export const IntervalInputPlugin: InputBindingPlugin<
 > = {
 	id: 'input-interval',
 	type: 'input',
-	css: '__css__',
+	core: VERSION,
 
 	accept: (exValue, params) => {
 		if (!Interval.isObject(exValue)) {
 			return null;
 		}
 
-		const p = ParamsParsers;
-		const result = parseParams<IntervalInputParams>(params, {
-			format: p.optional.function as ParamsParser<Formatter<number>>,
-			max: p.optional.number,
-			min: p.optional.number,
-			step: p.optional.number,
-		});
+		const result = parseRecord<IntervalInputParams>(params, (p) => ({
+			...createNumberTextInputParamsParser(p),
+			readonly: p.optional.constant(false),
+		}));
 		return result
 			? {
 					initialValue: new Interval(exValue.min, exValue.max),
@@ -89,35 +79,29 @@ export const IntervalInputPlugin: InputBindingPlugin<
 		}
 
 		const midValue = (v.rawValue.min + v.rawValue.max) / 2;
-		const formatter =
-			args.params.format ??
-			createNumberFormatter(getSuitableDecimalDigits(c.edge, midValue));
-
+		const textProps = ValueMap.fromObject(
+			createNumberTextPropsObject(args.params, midValue),
+		);
 		const drc = c.edge && findConstraint(c.edge, DefiniteRangeConstraint);
 		if (drc) {
 			return new RangeSliderTextController(args.document, {
-				baseStep: getBaseStep(c.edge),
 				constraint: c.edge,
-				draggingScale: getSuitableDraggingScale(c.edge, midValue),
-				formatter: formatter,
 				parser: parseNumber,
 				sliderProps: new ValueMap({
-					maxValue: drc.values.value('max'),
-					minValue: drc.values.value('min'),
+					keyScale: textProps.value('keyScale'),
+					max: drc.values.value('max'),
+					min: drc.values.value('min'),
 				}),
+				textProps: textProps,
 				value: v,
 				viewProps: args.viewProps,
 			});
 		}
 
 		const axis = {
-			baseStep: getBaseStep(c.edge),
 			constraint: c.edge,
-			textProps: ValueMap.fromObject({
-				draggingScale: midValue,
-				formatter: formatter,
-			}),
-		};
+			textProps: textProps,
+		} as PointAxis;
 		return new PointNdTextController(args.document, {
 			assembly: IntervalAssembly,
 			axes: [axis, axis],
diff --git a/src/interval/view/range-slider-text.ts b/src/interval/view/range-slider-text.ts
index 3f0b3ba..15dd746 100644
--- a/src/interval/view/range-slider-text.ts
+++ b/src/interval/view/range-slider-text.ts
@@ -1,7 +1,7 @@
 import {ClassName, PointNdTextController, View} from '@tweakpane/core';
 
-import {Interval} from '../model/interval';
-import {RangeSliderView} from './range-slider';
+import {Interval} from '../model/interval.js';
+import {RangeSliderView} from './range-slider.js';
 
 interface Config {
 	sliderView: RangeSliderView;
diff --git a/src/interval/view/range-slider.ts b/src/interval/view/range-slider.ts
index be45e08..42091c3 100644
--- a/src/interval/view/range-slider.ts
+++ b/src/interval/view/range-slider.ts
@@ -8,7 +8,7 @@ import {
 	ViewProps,
 } from '@tweakpane/core';
 
-import {Interval} from '../model/interval';
+import {Interval} from '../model/interval.js';
 
 interface Config {
 	sliderProps: SliderProps;
@@ -62,8 +62,8 @@ export class RangeSliderView implements View {
 	}
 
 	private valueToX_(value: number): number {
-		const min = this.sliderProps_.get('minValue');
-		const max = this.sliderProps_.get('maxValue');
+		const min = this.sliderProps_.get('min');
+		const max = this.sliderProps_.get('max');
 		return constrainRange(mapRange(value, min, max, 0, 1), 0, 1) * 100;
 	}
 
diff --git a/src/radio-grid/api/radio-cell-api.ts b/src/radio-grid/api/radio-cell-api.ts
index 4b8338a..24b6b82 100644
--- a/src/radio-grid/api/radio-cell-api.ts
+++ b/src/radio-grid/api/radio-cell-api.ts
@@ -1,4 +1,4 @@
-import {RadioController} from '../controller/radio';
+import {RadioController} from '../controller/radio.js';
 
 export class RadioCellApi {
 	private controller_: RadioController;
diff --git a/src/radio-grid/api/radio-grid.ts b/src/radio-grid/api/radio-grid.ts
index 997b45d..73a0a4c 100644
--- a/src/radio-grid/api/radio-grid.ts
+++ b/src/radio-grid/api/radio-grid.ts
@@ -1,9 +1,9 @@
-import {BladeApi, LabeledValueController, Value} from '@tweakpane/core';
+import {BladeApi, LabeledValueBladeController, Value} from '@tweakpane/core';
 
-import {RadioController} from '../controller/radio';
-import {RadioGridController} from '../controller/radio-grid';
-import {RadioCellApi} from './radio-cell-api';
-import {TpRadioGridChangeEvent} from './tp-radio-grid-event';
+import {RadioController} from '../controller/radio.js';
+import {RadioGridController} from '../controller/radio-grid.js';
+import {RadioCellApi} from './radio-cell-api.js';
+import {TpRadioGridChangeEvent} from './tp-radio-grid-event.js';
 
 interface RadioGridApiEvents<T> {
 	change: {
@@ -12,14 +12,16 @@ interface RadioGridApiEvents<T> {
 }
 
 export class RadioGridApi<T> extends BladeApi<
-	LabeledValueController<T, RadioGridController<T>>
+	LabeledValueBladeController<T, RadioGridController<T>>
 > {
 	private cellToApiMap_: Map<RadioController, RadioCellApi> = new Map();
 
-	constructor(controller: LabeledValueController<T, RadioGridController<T>>) {
+	constructor(
+		controller: LabeledValueBladeController<T, RadioGridController<T>>,
+	) {
 		super(controller);
 
-		const gc = this.controller_.valueController;
+		const gc = this.controller.valueController;
 		gc.cellControllers.forEach((cc) => {
 			const api = new RadioCellApi(cc);
 			this.cellToApiMap_.set(cc, api);
@@ -27,11 +29,11 @@ export class RadioGridApi<T> extends BladeApi<
 	}
 
 	get value(): Value<T> {
-		return this.controller_.value;
+		return this.controller.value;
 	}
 
 	public cell(x: number, y: number): RadioCellApi | undefined {
-		const gc = this.controller_.valueController;
+		const gc = this.controller.valueController;
 		const cc = gc.cellControllers[y * gc.size[0] + x];
 		return this.cellToApiMap_.get(cc);
 	}
@@ -41,8 +43,8 @@ export class RadioGridApi<T> extends BladeApi<
 		handler: (ev: RadioGridApiEvents<T>[EventName]['event']) => void,
 	): void {
 		const bh = handler.bind(this);
-		this.controller_.value.emitter.on(eventName, (ev) => {
-			const gc = this.controller_.valueController;
+		this.controller.value.emitter.on(eventName, (ev) => {
+			const gc = this.controller.valueController;
 			const cc = gc.findCellByValue(ev.rawValue);
 			if (!cc) {
 				return;
@@ -58,7 +60,6 @@ export class RadioGridApi<T> extends BladeApi<
 					capi,
 					[i % gc.size[0], Math.floor(i / gc.size[0])],
 					ev.rawValue,
-					undefined,
 				),
 			);
 		});
diff --git a/src/radio-grid/api/tp-radio-grid-event.ts b/src/radio-grid/api/tp-radio-grid-event.ts
index b5fa498..a450c83 100644
--- a/src/radio-grid/api/tp-radio-grid-event.ts
+++ b/src/radio-grid/api/tp-radio-grid-event.ts
@@ -1,6 +1,6 @@
 import {TpChangeEvent} from '@tweakpane/core';
 
-import {RadioCellApi} from './radio-cell-api';
+import {RadioCellApi} from './radio-cell-api.js';
 
 export class TpRadioGridChangeEvent<T> extends TpChangeEvent<T> {
 	public readonly cell: RadioCellApi;
@@ -11,9 +11,9 @@ export class TpRadioGridChangeEvent<T> extends TpChangeEvent<T> {
 		cell: RadioCellApi,
 		index: [number, number],
 		value: T,
-		presetKey?: string,
+		last?: boolean,
 	) {
-		super(target, value, presetKey);
+		super(target, value, last);
 
 		this.cell = cell;
 		this.index = index;
diff --git a/src/radio-grid/blade-plugin.ts b/src/radio-grid/blade-plugin.ts
index fef3506..6102e85 100644
--- a/src/radio-grid/blade-plugin.ts
+++ b/src/radio-grid/blade-plugin.ts
@@ -2,16 +2,16 @@ import {
 	BaseBladeParams,
 	BladePlugin,
 	createValue,
-	LabeledValueController,
+	LabeledValueBladeController,
 	LabelPropsObject,
-	ParamsParser,
-	ParamsParsers,
-	parseParams,
+	MicroParser,
+	parseRecord,
 	ValueMap,
+	VERSION,
 } from '@tweakpane/core';
 
-import {RadioGridApi} from './api/radio-grid';
-import {RadioGridController} from './controller/radio-grid';
+import {RadioGridApi} from './api/radio-grid.js';
+import {RadioGridController} from './controller/radio-grid.js';
 
 export interface RadioGridBladeParams<T> extends BaseBladeParams {
 	cells: (
@@ -35,11 +35,11 @@ export const RadioGridBladePlugin = (function <T>(): BladePlugin<
 	return {
 		id: 'radiogrid',
 		type: 'blade',
+		core: VERSION,
 
 		accept(params) {
-			const p = ParamsParsers;
-			const result = parseParams<RadioGridBladeParams<T>>(params, {
-				cells: p.required.function as ParamsParser<
+			const result = parseRecord<RadioGridBladeParams<T>>(params, (p) => ({
+				cells: p.required.function as MicroParser<
 					(
 						x: number,
 						y: number,
@@ -49,32 +49,34 @@ export const RadioGridBladePlugin = (function <T>(): BladePlugin<
 					}
 				>,
 				groupName: p.required.string,
-				size: p.required.array(p.required.number) as ParamsParser<
+				size: p.required.array(p.required.number) as MicroParser<
 					[number, number]
 				>,
-				value: p.required.raw as ParamsParser<T>,
+				value: p.required.raw as MicroParser<T>,
 				view: p.required.constant('radiogrid'),
 
 				label: p.optional.string,
-			});
+			}));
 			return result ? {params: result} : null;
 		},
 		controller(args) {
-			return new LabeledValueController(args.document, {
+			const value = createValue(args.params.value);
+			return new LabeledValueBladeController(args.document, {
 				blade: args.blade,
 				props: ValueMap.fromObject<LabelPropsObject>({
 					label: args.params.label,
 				}),
+				value: value,
 				valueController: new RadioGridController(args.document, {
 					groupName: args.params.groupName,
 					cellConfig: args.params.cells,
 					size: args.params.size,
-					value: createValue(args.params.value),
+					value: value,
 				}),
 			});
 		},
 		api(args) {
-			if (!(args.controller instanceof LabeledValueController)) {
+			if (!(args.controller instanceof LabeledValueBladeController)) {
 				return null;
 			}
 			if (!(args.controller.valueController instanceof RadioGridController)) {
diff --git a/src/radio-grid/controller/radio-grid.ts b/src/radio-grid/controller/radio-grid.ts
index d933690..742bc64 100644
--- a/src/radio-grid/controller/radio-grid.ts
+++ b/src/radio-grid/controller/radio-grid.ts
@@ -7,8 +7,8 @@ import {
 	ViewProps,
 } from '@tweakpane/core';
 
-import {RadioPropsObject} from '../view/radio';
-import {RadioController} from './radio';
+import {RadioPropsObject} from '../view/radio.js';
+import {RadioController} from './radio.js';
 
 interface CellConfig<T> {
 	title: string;
diff --git a/src/radio-grid/controller/radio.ts b/src/radio-grid/controller/radio.ts
index fe7b8ed..18b0f5b 100644
--- a/src/radio-grid/controller/radio.ts
+++ b/src/radio-grid/controller/radio.ts
@@ -1,6 +1,6 @@
 import {Controller, ViewProps} from '@tweakpane/core';
 
-import {RadioProps, RadioView} from '../view/radio';
+import {RadioProps, RadioView} from '../view/radio.js';
 
 interface Config {
 	name: string;
diff --git a/src/radio-grid/input-plugin.ts b/src/radio-grid/input-plugin.ts
index 82bd16b..40bb440 100644
--- a/src/radio-grid/input-plugin.ts
+++ b/src/radio-grid/input-plugin.ts
@@ -2,15 +2,15 @@ import {
 	BaseInputParams,
 	boolFromUnknown,
 	InputBindingPlugin,
+	MicroParser,
 	numberFromUnknown,
-	ParamsParser,
-	ParamsParsers,
-	parseParams,
+	parseRecord,
 	stringFromUnknown,
+	VERSION,
 	writePrimitive,
 } from '@tweakpane/core';
 
-import {RadioGridController} from './controller/radio-grid';
+import {RadioGridController} from './controller/radio-grid.js';
 
 interface RadioGridInputParams<T> extends BaseInputParams {
 	cells: (
@@ -32,14 +32,15 @@ function createRadioGridInputPlugin<T>(config: {
 	return {
 		id: 'input-radiogrid',
 		type: 'input',
+		core: VERSION,
+
 		accept(value, params) {
 			if (!config.isType(value)) {
 				return null;
 			}
 
-			const p = ParamsParsers;
-			const result = parseParams<RadioGridInputParams<T>>(params, {
-				cells: p.required.function as ParamsParser<
+			const result = parseRecord<RadioGridInputParams<T>>(params, (p) => ({
+				cells: p.required.function as MicroParser<
 					(
 						x: number,
 						y: number,
@@ -49,11 +50,11 @@ function createRadioGridInputPlugin<T>(config: {
 					}
 				>,
 				groupName: p.required.string,
-				size: p.required.array(p.required.number) as ParamsParser<
+				size: p.required.array(p.required.number) as MicroParser<
 					[number, number]
 				>,
 				view: p.required.constant('radiogrid'),
-			});
+			}));
 			return result
 				? {
 						initialValue: value,
diff --git a/src/sass/_button-grid.scss b/src/sass/_button-grid.scss
index 1f3fcd0..c6a10e4 100644
--- a/src/sass/_button-grid.scss
+++ b/src/sass/_button-grid.scss
@@ -1,20 +1,22 @@
-.#{$prefix}-btngridv {
-	border-radius: var(--elm-br);
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
+
+.#{tp.$prefix}-btngridv {
+	border-radius: tp.cssVar('blade-border-radius');
 	display: grid;
 	overflow: hidden;
 	gap: 2px;
 
-	&.#{$prefix}-v-disabled {
+	&.#{tp.$prefix}-v-disabled {
 		opacity: 0.5;
 	}
 
-	& .#{$prefix}-btnv_b:disabled {
+	& .#{tp.$prefix}-btnv_b:disabled {
 		opacity: 1;
 	}
-	& .#{$prefix}-btnv_b:disabled .#{$prefix}-btnv_t {
+	& .#{tp.$prefix}-btnv_b:disabled .#{tp.$prefix}-btnv_t {
 		opacity: 0.5;
 	}
-	& .#{$prefix}-btnv_b {
+	& .#{tp.$prefix}-btnv_b {
 		border-radius: 0;
 	}
 }
diff --git a/src/sass/_cubic-bezier.scss b/src/sass/_cubic-bezier.scss
index f546953..5a6bcef 100644
--- a/src/sass/_cubic-bezier.scss
+++ b/src/sass/_cubic-bezier.scss
@@ -1,4 +1,7 @@
-.#{$prefix}-cbzv {
+@use 'sass:math';
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
+
+.#{tp.$prefix}-cbzv {
 	position: relative;
 
 	// Head
@@ -7,24 +10,24 @@
 	}
 	// Button
 	&_b {
-		@extend %button;
+		@extend %tp-button;
 
 		margin-right: 4px;
 		position: relative;
-		width: var(--bld-us);
+		width: tp.cssVar('container-unit-size');
 
 		svg {
 			display: block;
 			height: 16px;
 			left: 50%;
-			margin-left: -(16px / 2);
-			margin-top: -(16px / 2);
+			margin-left: math.div(-16px, 2);
+			margin-top: math.div(-16px, 2);
 			position: absolute;
 			top: 50%;
 			width: 16px;
 
 			path {
-				stroke: var(--bs-bg);
+				stroke: tp.cssVar('base-bg');
 				stroke-width: 2;
 			}
 		}
@@ -39,12 +42,12 @@
 		margin-top: 0;
 		opacity: 0;
 		overflow: hidden;
-		transition: height $fold-transition-duration ease-in-out,
-			opacity $fold-transition-duration linear,
-			margin $fold-transition-duration ease-in-out;
+		transition: height tp.$fold-transition-duration ease-in-out,
+			opacity tp.$fold-transition-duration linear,
+			margin tp.$fold-transition-duration ease-in-out;
 	}
 	&#{&}-expanded &_p {
-		margin-top: var(--bld-s);
+		margin-top: tp.cssVar('container-unit-spacing');
 		opacity: 1;
 	}
 	&#{&}-cpl &_p {
@@ -52,30 +55,30 @@
 	}
 
 	// Popup
-	.#{$prefix}-popv {
-		left: calc(-1 * var(--cnt-h-p));
+	.#{tp.$prefix}-popv {
+		left: calc(-1 * #{tp.cssVar('container-h-padding')});
 		position: absolute;
-		right: calc(-1 * var(--cnt-h-p));
-		top: var(--bld-us);
+		right: calc(-1 * #{tp.cssVar('container-h-padding')});
+		top: tp.cssVar('container-unit-size');
 	}
 }
 
 // Picker
-.#{$prefix}-cbzpv {
+.#{tp.$prefix}-cbzpv {
 	&_t {
-		margin-top: var(--bld-s);
+		margin-top: tp.cssVar('container-unit-spacing');
 	}
 }
 
 // Graph
-.#{$prefix}-cbzgv {
-	@extend %input;
+.#{tp.$prefix}-cbzgv {
+	@extend %tp-input;
 
 	height: auto;
 	overflow: hidden;
 	position: relative;
 
-	&.#{$prefix}-v-disabled {
+	&.#{tp.$prefix}-v-disabled {
 		opacity: 0.5;
 	}
 
@@ -90,29 +93,29 @@
 	&_g {
 		cursor: pointer;
 		display: block;
-		height: calc(var(--bld-us) * 5);
+		height: calc(#{tp.cssVar('container-unit-size')} * 5);
 		width: 100%;
 	}
 	// Guide
 	&_u {
 		opacity: 0.1;
-		stroke: var(--in-fg);
+		stroke: tp.cssVar('input-fg');
 		stroke-dasharray: 1;
 	}
 	// Curve
 	&_l {
 		fill: transparent;
-		stroke: var(--in-fg);
+		stroke: tp.cssVar('input-fg');
 	}
 	// Vectors
 	&_v {
 		opacity: 0.5;
-		stroke: var(--in-fg);
+		stroke: tp.cssVar('input-fg');
 		stroke-dasharray: 1;
 	}
 	// Handles
 	&_h {
-		border: var(--in-fg) solid 1px;
+		border: tp.cssVar('input-fg') solid 1px;
 		border-radius: 50%;
 		box-sizing: border-box;
 		height: 4px;
@@ -124,13 +127,13 @@
 	}
 
 	&:focus &_h-sel {
-		background-color: var(--in-fg);
+		background-color: tp.cssVar('input-fg');
 		border-width: 0;
 	}
 }
 
 // Preview
-.#{$prefix}-cbzprvv {
+.#{tp.$prefix}-cbzprvv {
 	cursor: pointer;
 	height: 4px;
 	padding: 4px 0;
@@ -146,11 +149,11 @@
 	// Ticks
 	&_t {
 		opacity: 0.5;
-		stroke: var(--mo-fg);
+		stroke: tp.cssVar('monitor-fg');
 	}
 	// Marker
 	&_m {
-		background-color: var(--mo-fg);
+		background-color: tp.cssVar('monitor-fg');
 		border-radius: 50%;
 		height: 4px;
 		margin-left: -2px;
diff --git a/src/sass/_fps.scss b/src/sass/_fps.scss
index 2818d53..7a7b159 100644
--- a/src/sass/_fps.scss
+++ b/src/sass/_fps.scss
@@ -1,9 +1,11 @@
-.#{$prefix}-fpsv {
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
+
+.#{tp.$prefix}-fpsv {
 	position: relative;
 
 	&_l {
 		bottom: 4px;
-		color: var(--mo-fg);
+		color: tp.cssVar('monitor-fg');
 		line-height: 1;
 		right: 4px;
 		pointer-events: none;
diff --git a/src/sass/_interval.scss b/src/sass/_interval.scss
index 11f8bb9..9dddf63 100644
--- a/src/sass/_interval.scss
+++ b/src/sass/_interval.scss
@@ -1,28 +1,31 @@
-.#{$prefix}-rslv {
+@use 'sass:math';
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
+
+.#{tp.$prefix}-rslv {
 	$slider-knob-width: 8px;
 
 	cursor: pointer;
 	padding-left: $slider-knob-width;
 	padding-right: $slider-knob-width;
 
-	&.#{$prefix}-v-disabled {
+	&.#{tp.$prefix}-v-disabled {
 		opacity: 0.5;
 	}
 
 	&_t {
-		height: calc(var(--bld-us));
+		height: calc(#{tp.cssVar('container-unit-size')});
 		position: relative;
 
 		&::before {
-			background-color: var(--in-bg);
+			background-color: tp.cssVar('input-bg');
 			border-radius: 1px;
 			content: '';
 			height: 2px;
-			margin-top: (-2px / 2);
+			margin-top: math.div(-2px, 2);
 			position: absolute;
 			top: 50%;
-			left: (-$slider-knob-width / 2);
-			right: (-$slider-knob-width / 2);
+			left: math.div(-$slider-knob-width, 2);
+			right: math.div(-$slider-knob-width, 2);
 		}
 	}
 	&_b {
@@ -31,10 +34,10 @@
 		position: absolute;
 
 		&::before {
-			background-color: var(--in-fg);
+			background-color: tp.cssVar('input-fg');
 			content: '';
 			height: 2px;
-			margin-top: (-2px / 2);
+			margin-top: math.div(-2px, 2);
 			position: absolute;
 			top: 50%;
 			left: 0;
@@ -42,10 +45,10 @@
 		}
 	}
 	&_k {
-		@extend %button;
+		@extend %tp-button;
 
-		height: calc(var(--bld-us) - 8px);
-		margin-top: calc((var(--bld-us) - 8px) / -2);
+		height: calc(#{tp.cssVar('container-unit-size')} - 8px);
+		margin-top: calc((#{tp.cssVar('container-unit-size')} - 8px) / -2);
 		position: absolute;
 		top: 50%;
 		width: $slider-knob-width;
@@ -67,7 +70,7 @@
 	}
 }
 
-.#{$prefix}-rsltxtv {
+.#{tp.$prefix}-rsltxtv {
 	display: flex;
 
 	&_s {
diff --git a/src/sass/_radio-grid.scss b/src/sass/_radio-grid.scss
index 24976a7..457790b 100644
--- a/src/sass/_radio-grid.scss
+++ b/src/sass/_radio-grid.scss
@@ -1,14 +1,16 @@
-.#{$prefix}-radgridv {
-	border-radius: var(--elm-br);
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
+
+.#{tp.$prefix}-radgridv {
+	border-radius: tp.cssVar('blade-border-radius');
 	display: grid;
 	overflow: hidden;
 	gap: 2px;
 
-	&.#{$prefix}-v-disabled {
+	&.#{tp.$prefix}-v-disabled {
 		opacity: 0.5;
 	}
 
-	& .#{$prefix}-radv_b {
+	& .#{tp.$prefix}-radv_b {
 		border-radius: 0;
 	}
 }
diff --git a/src/sass/_radio.scss b/src/sass/_radio.scss
index 611d3be..9b4e2c5 100644
--- a/src/sass/_radio.scss
+++ b/src/sass/_radio.scss
@@ -1,4 +1,6 @@
-.#{$prefix}-radv {
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
+
+.#{tp.$prefix}-radv {
 	&_l {
 		display: block;
 		position: relative;
@@ -10,18 +12,18 @@
 		top: 0;
 	}
 	&_b {
-		@extend %button;
+		@extend %tp-button;
 
 		opacity: 0.5;
 	}
 	&_i:hover + &_b {
-		background-color: var(--btn-bg-h);
+		background-color: tp.cssVar('button-bg-hover');
 	}
 	&_i:focus + &_b {
-		background-color: var(--btn-bg-f);
+		background-color: tp.cssVar('button-bg-focus');
 	}
 	&_i:active + &_b {
-		background-color: var(--btn-bg-a);
+		background-color: tp.cssVar('button-bg-active');
 	}
 	&_i:checked + &_b {
 		opacity: 1;
diff --git a/src/sass/plugin.scss b/src/sass/plugin.scss
index bb6feae..95ea49d 100644
--- a/src/sass/plugin.scss
+++ b/src/sass/plugin.scss
@@ -1,9 +1,6 @@
-// Import core styles
-@import '../../node_modules/@tweakpane/core/lib/sass/plugin';
-
-@import './button-grid';
-@import './cubic-bezier';
-@import './fps';
-@import './interval';
-@import './radio';
-@import './radio-grid';
+@use './button-grid';
+@use './cubic-bezier';
+@use './fps';
+@use './interval';
+@use './radio';
+@use './radio-grid';
diff --git a/src/tsconfig.json b/src/tsconfig.json
index f324fce..dbc2b33 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
 		"lib": ["DOM", "ES2015"],
-		"moduleResolution": "Node",
+		"module": "node16",
 		"strict": true,
 		"target": "ES6"
 	}
diff --git a/test/browser.html b/test/browser.html
index d95b2e9..8a68cec 100644
--- a/test/browser.html
+++ b/test/browser.html
@@ -26,9 +26,10 @@
 <body>
 	<div class="wrapper">
 	</div>
-	<script src="../node_modules/tweakpane/dist/tweakpane.js"></script>
-	<script src="../dist/tweakpane-plugin-essentials.js"></script>
-	<script>
+	<script type="module">
+		import {Pane} from '../node_modules/tweakpane/dist/tweakpane.js';
+		import * as TweakpaneEssentialsPlugin from '../dist/tweakpane-plugin-essentials.js';
+
 		const params = {
 			interval: {min: 40, max: 60},
 			radiogrid: 25,
@@ -37,7 +38,7 @@
 			'Input bindings',
 			'Blades',
 		].map((title) => {
-			const pane = new Tweakpane.Pane({
+			const pane = new Pane({
 				container: document.querySelector('.wrapper'),
 				title: title,
 			});
@@ -49,7 +50,7 @@
 		});
 
 		// Input bindings
-		panes[0].addInput(params, 'interval', {
+		panes[0].addBinding(params, 'interval', {
 			format: (v) => v.toFixed(1),
 			min: 20,
 			max: 80,
@@ -58,7 +59,7 @@
 		});
 
 		const scales = [10, 20, 25, 50, 75, 100];
-		panes[0].addInput(params, 'radiogrid', {
+		panes[0].addBinding(params, 'radiogrid', {
 			view: 'radiogrid',
 			groupName: 'scale',
 			size: [3, 2],
@@ -76,7 +77,7 @@
 			view: 'fpsgraph',
 
 			label: 'fpsgraph',
-			lineCount: 2,
+			rows: 2,
 		});
 		function render() {
 			fpsGraph.begin();
@@ -123,7 +124,7 @@
 					wrapperElem.classList.add('wrapper');
 					document.body.appendChild(wrapperElem);
 
-					const newPane = new Tweakpane.Pane({
+					const newPane = new Pane({
 						container: wrapperElem,
 					});
 					newPane.registerPlugin(TweakpaneEssentialsPlugin);