diff --git a/src/components/App.vue b/src/components/App.vue
index 465eb2f..d5abf39 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -38,6 +38,7 @@ const testNumber = ref(Math.PI)
 const testBoolean = ref(false)
 const testAlign = ref<'left' | 'center' | 'right'>('left')
 const colorSpace = ref<'r|g|b' | 'svh' | 'hsv' | 'hvs' | 'hsvr'>('hsv')
+const cubicBezier = ref([0, 0.5, 0.5, 1] as const)
 
 // interface PaperDesc {
 // 	id?: string
@@ -438,6 +439,9 @@ window.addEventListener('drop', async e => {
 				<Tq.Parameter label="Button">
 					<Tq.InputButton label="Hey" />
 				</Tq.Parameter>
+				<Tq.Parameter label="Button">
+					<Tq.InputCubicBezierPicker v-model="cubicBezier" />
+				</Tq.Parameter>
 			</Tq.ParameterGrid>
 		</Tq.FloatingPane>
 	</div>
diff --git a/src/tweeq/FloatingPane/FloatingPane.vue b/src/tweeq/FloatingPane/FloatingPane.vue
index 6e3fc79..27ace6b 100644
--- a/src/tweeq/FloatingPane/FloatingPane.vue
+++ b/src/tweeq/FloatingPane/FloatingPane.vue
@@ -243,6 +243,7 @@ onMounted(() => {
 	right 0
 	bottom 0
 	left 0
+	overflow hidden
 
 	&:has(.resize:hover)
 		border-color var(--tq-color-primary)
diff --git a/src/tweeq/InputCubicBezier/InputCubicBezier.vue b/src/tweeq/InputCubicBezier/InputCubicBezier.vue
index cfa0db6..e00a094 100644
--- a/src/tweeq/InputCubicBezier/InputCubicBezier.vue
+++ b/src/tweeq/InputCubicBezier/InputCubicBezier.vue
@@ -1,40 +1,18 @@
-<template>
-	<button
-		ref="buttonEl"
-		class="InputCubicBezier"
-		:class="{opened}"
-		v-bind="$attrs"
-		@click="opened = true"
-	>
-		<svg class="InputCubicBezier__icon" viewBox="0 0 1 1">
-			<path :d="easingPath" />
-		</svg>
-	</button>
-	<Popover ref="$button" v-model:open="opened" placement="bottom">
-		<div class="InputCubicBezier__popover-frame">
-			<InputCubicBezierPicker
-				:modelValue="modelValue"
-				@update:modelValue="$emit('update:modelValue', $event)"
-			/>
-		</div>
-	</Popover>
-</template>
-
 <script lang="ts" setup>
 import {computed, ref} from 'vue'
 
 import Popover from '../Popover.vue'
 import InputCubicBezierPicker from './InputCubicBezierPicker.vue'
-import {CubicBezier} from './types'
+import {CubicBezierValue} from './util'
 
 interface Props {
-	modelValue: CubicBezier
+	modelValue: CubicBezierValue
 }
 
 const props = defineProps<Props>()
 
-defineEmits<{
-	'update:modelValue': [CubicBezier]
+const emit = defineEmits<{
+	'update:modelValue': [CubicBezierValue]
 }>()
 
 defineOptions({
@@ -42,15 +20,36 @@ defineOptions({
 })
 
 const $button = ref<HTMLElement | null>(null)
-const opened = ref(false)
+const open = ref(false)
 
 const easingPath = computed(() => {
 	const [x1, y1, x2, y2] = props.modelValue
-
 	return `M 0,0 C ${x1},${y1} ${x2},${y2} 1,1`
 })
 </script>
 
+<template>
+	<button
+		ref="buttonEl"
+		class="InputCubicBezier"
+		:class="{open}"
+		v-bind="$attrs"
+		@click="open = true"
+	>
+		<svg class="InputCubicBezier__icon" viewBox="0 0 1 1">
+			<path :d="easingPath" />
+		</svg>
+	</button>
+	<Popover v-model:open="open" :reference="$button" placement="bottom">
+		<div class="InputCubicBezier__popover-frame">
+			<InputCubicBezierPicker
+				:modelValue="modelValue"
+				@update:modelValue="emit('update:modelValue', $event)"
+			/>
+		</div>
+	</Popover>
+</template>
+
 <style lang="stylus">
 @import '../common.styl'
 
@@ -65,8 +64,8 @@ const easingPath = computed(() => {
 	&:focus
 		background base16('01')
 
-	&:hover, &.opened
-		background base16('accent', 0.5)
+	&:hover, &.open
+		background red
 
 	&__icon
 		margin $subcontrol-margin
diff --git a/src/tweeq/InputCubicBezier/InputCubicBezierPicker.vue b/src/tweeq/InputCubicBezier/InputCubicBezierPicker.vue
index 19a22ab..0c021eb 100644
--- a/src/tweeq/InputCubicBezier/InputCubicBezierPicker.vue
+++ b/src/tweeq/InputCubicBezier/InputCubicBezierPicker.vue
@@ -1,107 +1,103 @@
-<template>
-	<div class="InputCubicBezierPicker">
-		<svg ref="editor" viewBox="0 0 1 1" class="InputCubicBezierPicker__editor">
-			<g>
-				<line :x1="0" :y1="0" :x2="x1" :y2="y1" />
-				<line :x1="1" :y1="1" :x2="x2" :y2="y2" />
-				<path :d="easingPath" />
-				<circle :cx="x1" :cy="y1" r=".035" @mousedown="draggingPoint = 0" />
-				<circle :cx="x2" :cy="y2" r=".035" @mousedown="draggingPoint = 1" />
-			</g>
-		</svg>
-	</div>
-</template>
-
-<script lang="ts">
+<script lang="ts" setup>
 import {templateRef} from '@vueuse/core'
-import {clamp} from 'lodash'
-import {computed, defineComponent, PropType, ref} from 'vue-demi'
+import {CubicBezierPoints} from '@vueuse/core'
+import {vec2} from 'linearly'
+import {computed, ref} from 'vue-demi'
 
 import useDrag from '@/tweeq/useDragV1'
 
-export default defineComponent({
-	name: 'InputCubicBezierPicker',
-	props: {
-		modelValue: {
-			type: Array as PropType<number[]>,
-			required: true,
-		},
-	},
-	emit: ['update:modelValue'],
-	setup(props, context) {
-		const editorEl = templateRef<HTMLElement>('editor')
-
-		useDrag(editorEl, {
-			onDrag({pos, left, right, top, bottom}) {
-				if (draggingPoint.value === null) return
+import {CubicBezierValue} from './util'
 
-				let x = (pos[0] - left) / (right - left)
-				let y = 1 - (pos[1] - top) / (bottom - top)
+interface Props {
+	modelValue: CubicBezierValue
+}
 
-				x = clamp(x, 0, 1)
-				y = clamp(y, 0, 1)
+const props = defineProps<Props>()
 
-				const newValue = [...props.modelValue]
+const emit = defineEmits<{
+	'update:modelValue': [CubicBezierValue]
+}>()
 
-				newValue[draggingPoint.value * 2 + 0] = x
-				newValue[draggingPoint.value * 2 + 1] = y
+const $editor = templateRef<HTMLElement>('$editor')
 
-				context.emit('update:modelValue', newValue)
-			},
-			onDragEnd() {
-				draggingPoint.value = null
-			},
-		})
+useDrag($editor, {
+	onDrag({pos, left, right, top, bottom}) {
+		if (draggingPoint.value === null) return
 
-		const easingPath = computed(() => {
-			const [x1, y1, x2, y2] = props.modelValue
-			return `M 0,0 C ${x1},${y1} ${x2},${y2} 1,1`
-		})
+		const uv = vec2.invlerp([left, bottom], [right, top], pos)
+		const [x, y] = vec2.clamp(uv, [0, 0], [1, 1])
 
-		const x1 = computed(() => props.modelValue[0])
-		const y1 = computed(() => props.modelValue[1])
-		const x2 = computed(() => props.modelValue[2])
-		const y2 = computed(() => props.modelValue[3])
+		const newValue: CubicBezierPoints = [...props.modelValue]
 
-		const draggingPoint = ref<number | null>(null)
+		newValue[draggingPoint.value * 2 + 0] = x
+		newValue[draggingPoint.value * 2 + 1] = y
 
-		return {easingPath, x1, y1, x2, y2, draggingPoint}
+		emit('update:modelValue', newValue)
+	},
+	onDragEnd() {
+		draggingPoint.value = null
 	},
 })
+
+const easingPath = computed(() => {
+	const [x1, y1, x2, y2] = props.modelValue
+	return `M 0,0 C ${x1},${y1} ${x2},${y2} 1,1`
+})
+
+const x1 = computed(() => props.modelValue[0])
+const y1 = computed(() => props.modelValue[1])
+const x2 = computed(() => props.modelValue[2])
+const y2 = computed(() => props.modelValue[3])
+
+const draggingPoint = ref<number | null>(null)
 </script>
 
+<template>
+	<div class="InputCubicBezierPicker">
+		<svg ref="$editor" viewBox="0 0 1 1" class="pad">
+			<g>
+				<line :x1="0" :y1="0" :x2="x1" :y2="y1" />
+				<line :x1="1" :y1="1" :x2="x2" :y2="y2" />
+				<path :d="easingPath" />
+				<circle :cx="x1" :cy="y1" r=".035" @mousedown="draggingPoint = 0" />
+				<circle :cx="x2" :cy="y2" r=".035" @mousedown="draggingPoint = 1" />
+			</g>
+		</svg>
+	</div>
+</template>
+
 <style lang="stylus">
 @import '../common.styl'
 
-.InputCubicBezierPicker
-	&__editor
-		overflow visible
-		margin 0.8em
-		width calc(100% - 1.6em)
+.pad
+	overflow visible
+	margin 0.8em
+	width calc(100% - 1.6em)
 
-		*
-			vector-effect non-scaling-stroke
+	*
+		vector-effect non-scaling-stroke
 
-		g
-			transform scaleY(-1)
-			transform-origin 50% 50%
+	g
+		transform scaleY(-1)
+		transform-origin 50% 50%
 
-		path, line, circle
-			fill none
-			stroke-linecap round
+	path, line, circle
+		fill none
+		stroke-linecap round
 
-		path, circle
-			stroke-width 2
-			stroke base16('05')
+	path, circle
+		stroke-width 2
+		stroke var(--tq-color-primary)
 
-		line
-			stroke-width 1
-			stroke base16('03')
+	line
+		stroke-width 1
+		stroke var(--md-sys-color-outline)
 
-		circle
-			fill var(--tq-color-text)
+	circle
+		fill var(--tq-color-bg)
+		hover-transition(fill, stroke)
 
-			&:hover
-				fill var(--tq-color-primary)
-				stroke var(--tq-color-primary)
+		&:hover
+			fill var(--tq-color-primary)
+			stroke var(--tq-color-primary)
 </style>
diff --git a/src/tweeq/InputCubicBezier/index.ts b/src/tweeq/InputCubicBezier/index.ts
index 90dfab4..893796b 100644
--- a/src/tweeq/InputCubicBezier/index.ts
+++ b/src/tweeq/InputCubicBezier/index.ts
@@ -1,3 +1,4 @@
 import InputCubicBezier from './InputCubicBezier.vue'
+import InputCubicBezierPicker from './InputCubicBezierPicker.vue'
 
-export default InputCubicBezier
+export {InputCubicBezier, InputCubicBezierPicker}
diff --git a/src/tweeq/InputCubicBezier/types.ts b/src/tweeq/InputCubicBezier/types.ts
deleted file mode 100644
index c6691a2..0000000
--- a/src/tweeq/InputCubicBezier/types.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type CubicBezier = [number, number, number, number]
diff --git a/src/tweeq/InputCubicBezier/util.ts b/src/tweeq/InputCubicBezier/util.ts
new file mode 100644
index 0000000..0b8e001
--- /dev/null
+++ b/src/tweeq/InputCubicBezier/util.ts
@@ -0,0 +1 @@
+export type CubicBezierValue = readonly [number, number, number, number]
diff --git a/src/tweeq/InputNumber/InputNumber.vue b/src/tweeq/InputNumber/InputNumber.vue
index 257d45c..9106620 100644
--- a/src/tweeq/InputNumber/InputNumber.vue
+++ b/src/tweeq/InputNumber/InputNumber.vue
@@ -2,7 +2,7 @@
 import {useElementBounding, useFocus, useKeyModifier} from '@vueuse/core'
 import {useWheel} from '@vueuse/gesture'
 import {scalar, Vec2} from 'linearly'
-import {computed, ref, watch, watchEffect} from 'vue'
+import {computed, ref, watch} from 'vue'
 
 import {useDrag} from '../useDrag'
 import {toFixed, unsignedMod} from '../util'
@@ -222,11 +222,16 @@ const onBlur = () => {
 	}
 }
 
-watchEffect(() => {
-	if (tweaking.value) {
-		display.value = props.modelValue.toFixed(tweakPrecision.value)
+watch(
+	() => [props.modelValue, tweaking.value, tweakPrecision.value] as const,
+	([modelValue, tweaking]) => {
+		if (tweaking) {
+			display.value = modelValue.toFixed(tweakPrecision.value)
+		} else {
+			display.value = toFixed(modelValue, props.precision)
+		}
 	}
-})
+)
 
 const scaleOffset = ref(0)
 
diff --git a/src/tweeq/InputRotery/InputRotery.vue b/src/tweeq/InputRotery/InputRotery.vue
index 0056bb2..9ebf444 100644
--- a/src/tweeq/InputRotery/InputRotery.vue
+++ b/src/tweeq/InputRotery/InputRotery.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import {some} from 'fp-ts/lib/Option'
 import {checkIntersection} from 'line-intersect'
 import {Vec2, vec2} from 'linearly'
 import _ from 'lodash'
@@ -7,7 +6,6 @@ import {computed, Ref, ref} from 'vue'
 
 import SvgIcon from '../SvgIcon.vue'
 import useDrag from '../useDragV1'
-import useModelLocalDisplay from '../useModelLocalDisplay'
 import {unsignedMod} from '../util'
 
 interface Props {
@@ -37,14 +35,9 @@ function addDirectionVector(from: Vec2, rads: number, radius: number): Vec2 {
 const PI = Math.PI
 const PI_2 = Math.PI * 2
 
-const {local, display} = useModelLocalDisplay({
-	props,
-	emit,
-	print(rad) {
-		const deg = (rad / PI) * 180
-		return deg.toFixed(1) + '°'
-	},
-	parse: v => some(parseFloat(v)),
+const display = computed(() => {
+	const deg = (props.modelValue / PI) * 180
+	return deg.toFixed(1) + '°'
 })
 
 const el: Ref<null | HTMLElement> = ref(null)
@@ -52,8 +45,7 @@ const el: Ref<null | HTMLElement> = ref(null)
 const tweakMode = ref<'relative' | 'absolute'>('relative')
 
 let alreadyEmitted = false
-const tweakOrigin = ref(local.value)
-let tweakRawLocal = local.value
+const tweakOrigin = ref(props.modelValue)
 
 const {
 	isDragging: tweaking,
@@ -66,16 +58,13 @@ const {
 		if (tweakMode.value === 'absolute') {
 			const p = vec2.sub(pos, origin)
 			const angle = Math.atan2(p[1], p[0])
-			const delta = signedAngleBetween(angle, local.value)
-			tweakRawLocal = local.value + delta
-
-			tweakOrigin.value = tweakRawLocal
-			local.set(tweakRawLocal)
+			const delta = signedAngleBetween(angle, props.modelValue)
+			tweakOrigin.value = props.modelValue + delta
+			emit('update:modelValue', tweakOrigin.value)
 			alreadyEmitted = true
 		} else {
 			// Relative
-			tweakRawLocal = local.value
-			tweakOrigin.value = local.value
+			tweakOrigin.value = props.modelValue
 		}
 	},
 	onDrag({pos, prevPos, origin}) {
@@ -90,12 +79,11 @@ const {
 		const prevAngle = Math.atan2(pp[1], pp[0])
 		const alignedPos = vec2.rotate(p, -prevAngle)
 		const delta = Math.atan2(alignedPos[1], alignedPos[0])
-		tweakRawLocal += delta
-		local.set(tweakRawLocal)
+		tweakOrigin.value += delta
+		emit('update:modelValue', tweakOrigin.value)
 	},
 	onDragEnd() {
 		tweakMode.value = 'relative'
-		local.conform()
 	},
 })
 
@@ -113,7 +101,7 @@ const overlayArcPath = computed(() => {
 	const radiusStep = rem.value * 0.6
 
 	const start = tweakOrigin.value
-	const end = local.value
+	const end = props.modelValue
 
 	const tweakingPositive = end - start > 0
 
@@ -196,7 +184,7 @@ function clampPos(p: Vec2): Vec2 {
 
 const overlayLineTo = computed(() => {
 	const dist = vec2.distance(origin.value, pos.value)
-	const dir: Vec2 = [Math.cos(local.value), Math.sin(local.value)]
+	const dir: Vec2 = [Math.cos(props.modelValue), Math.sin(props.modelValue)]
 
 	const p = vec2.scaleAndAdd(origin.value, dir, dist)
 
@@ -231,7 +219,7 @@ const overlayLineFrom = computed(() => {
 			<line
 				class="InputRotery__scale"
 				:style="{
-					transform: `rotate(${local}rad)`,
+					transform: `rotate(${props.modelValue}rad)`,
 				}"
 				x1="20"
 				y1="16"
diff --git a/src/tweeq/InputString/InputString.vue b/src/tweeq/InputString/InputString.vue
index 78c65d2..38a27e8 100644
--- a/src/tweeq/InputString/InputString.vue
+++ b/src/tweeq/InputString/InputString.vue
@@ -34,7 +34,6 @@ function onInput(e: Event) {
 			:value="modelValue"
 			:disabled="disabled"
 			:invalid="invalid"
-			popovertarget="mypopover"
 			@focus="onFocus"
 			@blur="emit('blur', $event)"
 			@input.stop="onInput"
diff --git a/src/tweeq/Popover.vue b/src/tweeq/Popover.vue
index 01e8459..5e031fc 100644
--- a/src/tweeq/Popover.vue
+++ b/src/tweeq/Popover.vue
@@ -1,6 +1,5 @@
 <template>
 	<div
-		id="mypopover"
 		ref="$popover"
 		popover
 		:style="{left: offset[0] + 'px', top: offset[1] + 'px'}"
diff --git a/src/tweeq/index.ts b/src/tweeq/index.ts
index aa160f4..09409d3 100644
--- a/src/tweeq/index.ts
+++ b/src/tweeq/index.ts
@@ -6,7 +6,7 @@ import FloatingPane from './FloatingPane'
 import InputButton from './InputButton.vue'
 import InputCheckbox from './InputCheckbox'
 import InputColorPicker from './InputColorPicker'
-import InputCubicBezier from './InputCubicBezier'
+import {InputCubicBezier, InputCubicBezierPicker} from './InputCubicBezier'
 import InputDropdown from './InputDropdown.vue'
 import InputNumber from './InputNumber'
 import InputRadio from './InputRadio.vue'
@@ -30,6 +30,7 @@ export default {
 	InputColorPicker,
 	InputCheckbox,
 	InputCubicBezier,
+	InputCubicBezierPicker,
 	InputDropdown,
 	InputNumber,
 	InputRadio,