ripple 0.2.215 → 0.3.0

package/tests/client/input-value.test.ripple

@@ -1,9 +1,7 @@
+import type { GetFunction, SetFunction } from 'ripple';
 import {
 	flushSync,
-	track,
-	effect,
-	untrack,
-	TrackedObject,
+	RippleObject,
 	bindValue,
 	bindChecked,
 	bindIndeterminate,
@@ -104,9 +102,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = track('');
+			const text = #ripple.track('');
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push('text changed', @text);
 			});
 
@@ -127,9 +125,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = #{ value: '' };
+			const text = #ripple{ value: '' };
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push('text changed', text.value);
 			});
 
@@ -150,9 +148,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = track('foo');
+			const text = #ripple.track('foo');
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push('text changed', @text);
 			});
 
@@ -174,8 +172,8 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = #{ value: 'foo' };
-			effect(() => {
+			const text = #ripple{ value: 'foo' };
+			#ripple.effect(() => {
 				logs.push('text changed', text.value);
 			});
 
@@ -195,7 +193,7 @@ describe('use value()', () => {
 
 	it('should update text input element when tracked value changes', () => {
 		component App() {
-			const text = track('initial');
+			const text = #ripple.track('initial');
 
 			<div>
 				<input type="text" {ref bindValue(text)} />
@@ -218,7 +216,7 @@ describe('use value()', () => {
 
 	it('should update text input element when tracked value changes with a getter and setter', () => {
 		component App() {
-			const text = #{ value: 'initial' };
+			const text = #ripple{ value: 'initial' };
 
 			<div>
 				<input type="text" {ref bindValue(() => text.value, (v) => (text.value = v))} />
@@ -243,9 +241,9 @@ describe('use value()', () => {
 		const logs: (string | boolean)[] = [];
 
 		component App() {
-			const value = track(false);
+			const value = #ripple.track(false);
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push('checked changed', @value);
 			});
 
@@ -267,8 +265,8 @@ describe('use value()', () => {
 		const logs: (string | boolean)[] = [];
 
 		component App() {
-			const obj = #{ value: false };
-			effect(() => {
+			const obj = #ripple{ value: false };
+			#ripple.effect(() => {
 				logs.push('checked changed', obj.value);
 			});
 
@@ -288,7 +286,7 @@ describe('use value()', () => {
 
 	it('should update checkbox element when tracked value changes', () => {
 		component App() {
-			const value = track(false);
+			const value = #ripple.track(false);
 
 			<div>
 				<input type="checkbox" {ref bindChecked(value)} />
@@ -311,7 +309,7 @@ describe('use value()', () => {
 
 	it('should update checkbox element when tracked value changes with a getter and setter', () => {
 		component App() {
-			const obj = #{ value: false };
+			const obj = #ripple{ value: false };
 
 			<div>
 				<input
@@ -339,9 +337,9 @@ describe('use value()', () => {
 		const logs: (string | boolean)[] = [];
 
 		component App() {
-			const value = track(false);
+			const value = #ripple.track(false);
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push('indeterminate changed', @value);
 			});
 
@@ -365,9 +363,9 @@ describe('use value()', () => {
 		const logs: (string | boolean)[] = [];
 
 		component App() {
-			const obj = #{ value: false };
+			const obj = #ripple{ value: false };
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push('indeterminate changed', obj.value);
 			});
 
@@ -392,7 +390,7 @@ describe('use value()', () => {
 
 	it('should update checkbox indeterminate element when tracked value changes', () => {
 		component App() {
-			const value = track(false);
+			const value = #ripple.track(false);
 
 			<div>
 				<input type="checkbox" {ref bindIndeterminate(value)} />
@@ -417,7 +415,7 @@ describe('use value()', () => {
 		'should update checkbox indeterminate element when tracked value changes with a getter and setter',
 		() => {
 			component App() {
-				const obj = #{ value: false };
+				const obj = #ripple{ value: false };
 
 				<div>
 					<input
@@ -446,9 +444,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const select = track('2');
+			const select = #ripple.track('2');
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push('select changed', @select);
 			});
 
@@ -475,8 +473,8 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const select = #{ value: '2' };
-			effect(() => {
+			const select = #ripple{ value: '2' };
+			#ripple.effect(() => {
 				logs.push('select changed', select.value);
 			});
 
@@ -501,7 +499,7 @@ describe('use value()', () => {
 
 	it('should update select element when tracked value changes', () => {
 		component App() {
-			const select = track('1');
+			const select = #ripple.track('1');
 
 			<div>
 				<select {ref bindValue(select)}>
@@ -529,7 +527,7 @@ describe('use value()', () => {
 
 	it('should update select element when tracked value changes with a getter and setter', () => {
 		component App() {
-			const select = #{ value: '1' };
+			const select = #ripple{ value: '1' };
 
 			<div>
 				<select {ref bindValue(() => select.value, (v) => (select.value = v))}>
@@ -559,9 +557,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const selected = track(['b']);
+			const selected = #ripple.track(['b']);
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push('selected changed', JSON.stringify(@selected));
 			});
 
@@ -607,9 +605,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const obj = #{ selected: ['b'] };
+			const obj = #ripple{ selected: ['b'] };
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push('selected changed', JSON.stringify(obj.selected));
 			});
 
@@ -667,9 +665,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const selected = track('b');
+			const selected = #ripple.track('b');
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push('selected changed', @selected);
 			});
 
@@ -714,9 +712,9 @@ describe('use value()', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const selected = #{ value: 'b' };
+			const selected = #ripple{ value: 'b' };
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push('selected changed', selected.value);
 			});
 
@@ -774,7 +772,7 @@ describe('use value()', () => {
 
 	it('should update checkbox group from tracked value change', () => {
 		component App() {
-			const selected = track(['a']);
+			const selected = #ripple.track(['a']);
 
 			<div>
 				<input type="checkbox" value="a" {ref bindGroup(selected)} />
@@ -804,7 +802,7 @@ describe('use value()', () => {
 
 	it('should update checkbox group from tracked value change with a getter and setter', () => {
 		component App() {
-			const selected = #{ value: ['a'] };
+			const selected = #ripple{ value: ['a'] };
 
 			<div>
 				<input
@@ -846,7 +844,7 @@ describe('use value()', () => {
 
 	it('should update radio group from tracked value change', () => {
 		component App() {
-			const selected = track('a');
+			const selected = #ripple.track('a');
 
 			<div>
 				<input type="radio" name="test" value="a" {ref bindGroup(selected)} />
@@ -876,7 +874,7 @@ describe('use value()', () => {
 
 	it('should update radio group from tracked value change with a getter and setter', () => {
 		component App() {
-			const selected = #{ value: 'a' };
+			const selected = #ripple{ value: 'a' };
 
 			<div>
 				<input
@@ -921,7 +919,7 @@ describe('use value()', () => {
 
 	it('should handle checkbox group with initial empty array', () => {
 		component App() {
-			const selected = track([]);
+			const selected = #ripple.track([]);
 
 			<div>
 				<input type="checkbox" value="a" {ref bindGroup(selected)} />
@@ -947,7 +945,7 @@ describe('use value()', () => {
 
 	it('should handle checkbox group with initial empty array with a getter and setter', () => {
 		component App() {
-			const selected: TrackedObject<{ value: string[] }> = #{ value: [] };
+			const selected: RippleObject<{ value: string[] }> = #ripple{ value: [] };
 
 			<div>
 				<input
@@ -981,7 +979,7 @@ describe('use value()', () => {
 
 	it('should handle number input type', () => {
 		component App() {
-			const value = track(42);
+			const value = #ripple.track(42);
 
 			<input type="number" {ref bindValue(value)} />
 		}
@@ -1001,7 +999,7 @@ describe('use value()', () => {
 
 	it('should handle number input type with a getter and setter', () => {
 		component App() {
-			const obj = #{ value: 42 };
+			const obj = #ripple{ value: 42 };
 
 			<input type="number" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
 		}
@@ -1021,7 +1019,7 @@ describe('use value()', () => {
 
 	it('should update number input element when tracked value changes', () => {
 		component App() {
-			const value = track(10);
+			const value = #ripple.track(10);
 
 			<div>
 				<input type="number" {ref bindValue(value)} />
@@ -1047,7 +1045,7 @@ describe('use value()', () => {
 		'should update number input element when tracked value changes with a getter and setter',
 		() => {
 			component App() {
-				const obj = #{ value: 10 };
+				const obj = #ripple{ value: 10 };
 
 				<div>
 					<input type="number" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
@@ -1072,7 +1070,7 @@ describe('use value()', () => {
 
 	it('should handle range input type', () => {
 		component App() {
-			const value = track(50);
+			const value = #ripple.track(50);
 
 			<input type="range" min="0" max="100" {ref bindValue(value)} />
 		}
@@ -1092,7 +1090,7 @@ describe('use value()', () => {
 
 	it('should handle range input type with a getter and setter', () => {
 		component App() {
-			const obj = #{ value: 50 };
+			const obj = #ripple{ value: 50 };
 
 			<input
 				type="range"
@@ -1117,7 +1115,7 @@ describe('use value()', () => {
 
 	it('should update range input element when tracked value changes', () => {
 		component App() {
-			const value = track(25);
+			const value = #ripple.track(25);
 
 			<div>
 				<input type="range" min="0" max="100" {ref bindValue(value)} />
@@ -1143,7 +1141,7 @@ describe('use value()', () => {
 		'should update range input element when tracked value changes with a getter and setter',
 		() => {
 			component App() {
-				const obj = #{ value: 25 };
+				const obj = #ripple{ value: 25 };
 
 				<div>
 					<input
@@ -1173,7 +1171,7 @@ describe('use value()', () => {
 
 	it('should handle empty number input as null', () => {
 		component App() {
-			const value = track(null);
+			const value = #ripple.track(null);
 
 			<input type="number" {ref bindValue(value)} />
 		}
@@ -1193,7 +1191,7 @@ describe('use value()', () => {
 
 	it('should handle empty number input as null with a getter and setter', () => {
 		component App() {
-			const obj = #{ value: null };
+			const obj = #ripple{ value: null };
 
 			<input type="number" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
 		}
@@ -1213,7 +1211,7 @@ describe('use value()', () => {
 
 	it('should handle date input type', () => {
 		component App() {
-			const value = track('2025-11-14');
+			const value = #ripple.track('2025-11-14');
 
 			<input type="date" {ref bindValue(value)} />
 		}
@@ -1233,7 +1231,7 @@ describe('use value()', () => {
 
 	it('should handle date input type with a getter and setter', () => {
 		component App() {
-			const obj = #{ value: '2025-11-14' };
+			const obj = #ripple{ value: '2025-11-14' };
 
 			<input type="date" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
 		}
@@ -1253,7 +1251,7 @@ describe('use value()', () => {
 
 	it('should update date input element when tracked value changes', () => {
 		component App() {
-			const value = track('2025-01-01');
+			const value = #ripple.track('2025-01-01');
 
 			<div>
 				<input type="date" {ref bindValue(value)} />
@@ -1277,7 +1275,7 @@ describe('use value()', () => {
 
 	it('should update date input element when tracked value changes with a getter and setter', () => {
 		component App() {
-			const obj = #{ value: '2025-01-01' };
+			const obj = #ripple{ value: '2025-01-01' };
 
 			<div>
 				<input type="date" {ref bindValue(() => obj.value, (v) => (obj.value = v))} />
@@ -1301,7 +1299,7 @@ describe('use value()', () => {
 
 	it('should handle select with multiple attribute', () => {
 		component App() {
-			const selected = track(['2', '3']);
+			const selected = #ripple.track(['2', '3']);
 
 			<select multiple {ref bindValue(selected)}>
 				<option value="1">{'One'}</option>
@@ -1335,7 +1333,7 @@ describe('use value()', () => {
 
 	it('should handle select with multiple attribute with a getter and setter', () => {
 		component App() {
-			const selected = track(['2', '3']);
+			const selected = #ripple.track(['2', '3']);
 
 			<select multiple {ref bindValue(() => @selected, (v) => (@selected = v))}>
 				<option value="1">{'One'}</option>
@@ -1369,7 +1367,7 @@ describe('use value()', () => {
 
 	it('should update multiple select element when tracked value changes', () => {
 		component App() {
-			const selected = track(['1']);
+			const selected = #ripple.track(['1']);
 
 			<div>
 				<select multiple {ref bindValue(selected)}>
@@ -1407,7 +1405,7 @@ describe('use value()', () => {
 		'should update multiple select element when tracked value changes with a getter and setter',
 		() => {
 			component App() {
-				const selected = track(['1']);
+				const selected = #ripple.track(['1']);
 
 				<div>
 					<select multiple {ref bindValue(() => @selected, (v) => (@selected = v))}>
@@ -1444,7 +1442,7 @@ describe('use value()', () => {
 
 	it('should handle select without initial value and fall back to first option', () => {
 		component App() {
-			const selected = track(undefined);
+			const selected = #ripple.track();
 
 			<select {ref bindValue(selected)}>
 				<option value="1">{'One'}</option>
@@ -1464,7 +1462,7 @@ describe('use value()', () => {
 		'should handle select without initial value and fall back to first option with a getter and setter',
 		() => {
 			component App() {
-				const selected = track(undefined);
+				const selected = #ripple.track();
 
 				<select {ref bindValue(() => @selected, (v) => (@selected = v))}>
 					<option value="1">{'One'}</option>
@@ -1483,7 +1481,7 @@ describe('use value()', () => {
 
 	it('should handle select with disabled options', () => {
 		component App() {
-			const selected = track(undefined);
+			const selected = #ripple.track();
 
 			<select {ref bindValue(selected)}>
 				<option value="1" disabled>{'One'}</option>
@@ -1501,7 +1499,7 @@ describe('use value()', () => {
 
 	it('should handle select with disabled options with a getter and setter', () => {
 		component App() {
-			const selected = track(undefined);
+			const selected = #ripple.track();
 
 			<select {ref bindValue(() => @selected, (v) => (@selected = v))}>
 				<option value="1" disabled>{'One'}</option>
@@ -1519,7 +1517,7 @@ describe('use value()', () => {
 
 	it('should accurately reflect values mutated through a tracked setter', () => {
 		component App() {
-			let value = track(
+			let value = #ripple.track(
 				'',
 				(val) => {
 					return val;
@@ -1555,7 +1553,7 @@ describe('use value()', () => {
 
 	it('should accurately reflect values when a getter modifies value', () => {
 		component App() {
-			let value = track(
+			let value = #ripple.track(
 				'',
 				(val) => {
 					if (val.includes('c')) {
@@ -1591,7 +1589,7 @@ describe('use value()', () => {
 
 	it('should always prefer what getter returns even if setter mutates next', () => {
 		component App() {
-			let value = track(
+			let value = #ripple.track(
 				'',
 				(val) => {
 					return val.replace(/[c,b]+/g, '');
@@ -1629,7 +1627,7 @@ describe('use value()', () => {
 		'should accurately reflect values mutated through an effect even after a setter mutation',
 		() => {
 			component App() {
-				let value = track(
+				let value = #ripple.track(
 					'',
 					(val) => {
 						return val;
@@ -1642,10 +1640,10 @@ describe('use value()', () => {
 					},
 				);
 
-				effect(() => {
+				#ripple.effect(() => {
 					@value;
 
-					untrack(() => {
+					#ripple.untrack(() => {
 						if (@value.includes('a')) {
 							@value = @value.replace(/a/g, '');
 						}
@@ -1675,8 +1673,8 @@ describe('use value()', () => {
 
 	it('should accurately reflect values mutated through a tracked setter via bind accessors', () => {
 		component App() {
-			let value = track('');
-			const value_accessors = [
+			let value = #ripple.track('');
+			const value_accessors: [GetFunction<string>, SetFunction<string>] = [
 				() => {
 					return @value;
 				},
@@ -1707,8 +1705,8 @@ describe('use value()', () => {
 
 	it('should prefer what getter returns via bind accessors', () => {
 		component App() {
-			let value = track('');
-			const value_accessors = [
+			let value = #ripple.track('');
+			const value_accessors: [GetFunction<string>, SetFunction<string>] = [
 				() => {
 					if (@value.includes('c')) {
 						return @value.replace(/c/g, '');
@@ -1741,8 +1739,8 @@ describe('use value()', () => {
 		'should always prefer what getter returns even if setter mutates next via bind accessors',
 		() => {
 			component App() {
-				let value = track('');
-				const value_accessors = [
+				let value = #ripple.track('');
+				const value_accessors: [GetFunction<string>, SetFunction<string>] = [
 					() => {
 						return @value.replace(/[c,b]+/g, '');
 					},
@@ -1776,8 +1774,8 @@ describe('use value()', () => {
 		'should accurately reflect values mutated through an effect even after a setter mutation via bind accessors',
 		() => {
 			component App() {
-				let value = track('');
-				const value_accessors = [
+				let value = #ripple.track('');
+				const value_accessors: [GetFunction<string>, SetFunction<string>] = [
 					() => {
 						return @value;
 					},
@@ -1789,10 +1787,10 @@ describe('use value()', () => {
 					},
 				];
 
-				effect(() => {
+				#ripple.effect(() => {
 					@value;
 
-					untrack(() => {
+					#ripple.untrack(() => {
 						if (@value.includes('a')) {
 							@value = @value.replace(/a/g, '');
 						}
@@ -1820,8 +1818,8 @@ describe('use value()', () => {
 		'should keep the input.value unchanged and synced with the tracked when the setter blocks updates to the tracked via bind accessors',
 		() => {
 			component App() {
-				let value = track('');
-				const value_accessors = [
+				let value = #ripple.track('');
+				const value_accessors: [GetFunction<string>, SetFunction<string>] = [
 					() => {
 						return @value;
 					},
@@ -1855,7 +1853,7 @@ describe('use value()', () => {
 		'should keep the input.value unchanged and synced with the tracked when the setter blocks updates to the tracked via track get / set',
 		() => {
 			component App() {
-				let value = track(
+				let value = #ripple.track(
 					'',
 					(v) => {
 						return v;
@@ -1892,9 +1890,9 @@ describe('bindClientWidth and bindClientHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const width = track(0);
+			const width = #ripple.track(0);
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(@width);
 			});
 
@@ -1923,9 +1921,9 @@ describe('bindClientWidth and bindClientHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const width = #{ value: 0 };
+			const width = #ripple{ value: 0 };
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(width.value);
 			});
 
@@ -1954,9 +1952,9 @@ describe('bindClientWidth and bindClientHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const height = track(0);
+			const height = #ripple.track(0);
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(@height);
 			});
 
@@ -1985,8 +1983,8 @@ describe('bindClientWidth and bindClientHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const height = #{ value: 0 };
-			effect(() => {
+			const height = #ripple{ value: 0 };
+			#ripple.effect(() => {
 				logs.push(height.value);
 			});
 
@@ -2017,9 +2015,9 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const width = track(0);
+			const width = #ripple.track(0);
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(@width);
 			});
 
@@ -2048,9 +2046,9 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const width = #{ value: 0 };
+			const width = #ripple{ value: 0 };
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(width.value);
 			});
 
@@ -2079,9 +2077,9 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const height = track(0);
+			const height = #ripple.track(0);
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(@height);
 			});
 
@@ -2110,8 +2108,8 @@ describe('bindOffsetWidth and bindOffsetHeight', () => {
 		const logs: number[] = [];
 
 		component App() {
-			const height = #{ value: 0 };
-			effect(() => {
+			const height = #ripple{ value: 0 };
+			#ripple.effect(() => {
 				logs.push(height.value);
 			});
 
@@ -2142,9 +2140,9 @@ describe('bindContentRect', () => {
 		const logs: DOMRectReadOnly[] = [];
 
 		component App() {
-			const rect = track(null);
+			const rect = #ripple.track(null);
 
-			effect(() => {
+			#ripple.effect(() => {
 				if (@rect) logs.push(@rect);
 			});
 
@@ -2172,8 +2170,8 @@ describe('bindContentRect', () => {
 		const logs: DOMRectReadOnly[] = [];
 
 		component App() {
-			const rect: TrackedObject<{ value: DOMRectReadOnly | null }> = #{ value: null };
-			effect(() => {
+			const rect: RippleObject<{ value: DOMRectReadOnly | null }> = #ripple{ value: null };
+			#ripple.effect(() => {
 				if (rect.value) logs.push(rect.value);
 			});
 
@@ -2208,9 +2206,9 @@ describe('bindContentBoxSize', () => {
 		const logs: any[] = [];
 
 		component App() {
-			const boxSize = track(null);
+			const boxSize = #ripple.track(null);
 
-			effect(() => {
+			#ripple.effect(() => {
 				if (@boxSize) logs.push(@boxSize);
 			});
 
@@ -2241,9 +2239,9 @@ describe('bindContentBoxSize', () => {
 		];
 
 		component App() {
-			const boxSize: TrackedObject<{ value: typeof mockBoxSize | null }> = #{ value: null };
+			const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = #ripple{ value: null };
 
-			effect(() => {
+			#ripple.effect(() => {
 				if (boxSize.value) logs.push(boxSize.value);
 			});
 
@@ -2275,9 +2273,9 @@ describe('bindBorderBoxSize', () => {
 		const logs: any[] = [];
 
 		component App() {
-			const boxSize = track(null);
+			const boxSize = #ripple.track(null);
 
-			effect(() => {
+			#ripple.effect(() => {
 				if (@boxSize) logs.push(@boxSize);
 			});
 
@@ -2308,9 +2306,9 @@ describe('bindBorderBoxSize', () => {
 		];
 
 		component App() {
-			const boxSize: TrackedObject<{ value: typeof mockBoxSize | null }> = #{ value: null };
+			const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = #ripple{ value: null };
 
-			effect(() => {
+			#ripple.effect(() => {
 				if (boxSize.value) logs.push(boxSize.value);
 			});
 
@@ -2342,9 +2340,9 @@ describe('bindDevicePixelContentBoxSize', () => {
 		const logs: any[] = [];
 
 		component App() {
-			const boxSize = track(null);
+			const boxSize = #ripple.track(null);
 
-			effect(() => {
+			#ripple.effect(() => {
 				if (@boxSize) logs.push(@boxSize);
 			});
 
@@ -2375,9 +2373,9 @@ describe('bindDevicePixelContentBoxSize', () => {
 		];
 
 		component App() {
-			const boxSize: TrackedObject<{ value: typeof mockBoxSize | null }> = #{ value: null };
+			const boxSize: RippleObject<{ value: typeof mockBoxSize | null }> = #ripple{ value: null };
 
-			effect(() => {
+			#ripple.effect(() => {
 				if (boxSize.value) logs.push(boxSize.value);
 			});
 
@@ -2409,9 +2407,9 @@ describe('bindInnerHTML', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const html = track('<strong>Hello</strong>');
+			const html = #ripple.track('<strong>Hello</strong>');
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(@html);
 			});
 
@@ -2435,9 +2433,9 @@ describe('bindInnerHTML', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const html = #{ value: '<strong>Hello</strong>' };
+			const html = #ripple{ value: '<strong>Hello</strong>' };
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(html.value);
 			});
 
@@ -2462,7 +2460,7 @@ describe('bindInnerHTML', () => {
 
 	it('should update innerHTML when tracked value changes', () => {
 		component App() {
-			const html = track('<p>Initial</p>');
+			const html = #ripple.track('<p>Initial</p>');
 
 			<div>
 				<div contenteditable="true" {ref bindInnerHTML(html)} />
@@ -2486,7 +2484,7 @@ describe('bindInnerHTML', () => {
 
 	it('should update innerHTML when tracked value changes with a getter and setter', () => {
 		component App() {
-			const html = #{ value: '<p>Initial</p>' };
+			const html = #ripple{ value: '<p>Initial</p>' };
 
 			<div>
 				<div
@@ -2513,7 +2511,7 @@ describe('bindInnerHTML', () => {
 
 	it('should handle null innerHTML value', () => {
 		component App() {
-			const html = track(null);
+			const html = #ripple.track(null);
 
 			<div contenteditable="true" {ref bindInnerHTML(html)} />
 		}
@@ -2528,7 +2526,7 @@ describe('bindInnerHTML', () => {
 
 	it('should handle null innerHTML value with a getter and setter', () => {
 		component App() {
-			const html: TrackedObject<{ value: null | string }> = #{ value: null };
+			const html: RippleObject<{ value: null | string }> = #ripple{ value: null };
 
 			<div
 				contenteditable="true"
@@ -2550,9 +2548,9 @@ describe('bindInnerText', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = track('Hello World');
+			const text = #ripple.track('Hello World');
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(@text);
 			});
 
@@ -2576,8 +2574,8 @@ describe('bindInnerText', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = #{ value: 'Hello World' };
-			effect(() => {
+			const text = #ripple{ value: 'Hello World' };
+			#ripple.effect(() => {
 				logs.push(text.value);
 			});
 
@@ -2602,7 +2600,7 @@ describe('bindInnerText', () => {
 
 	it('should update innerText when tracked value changes', () => {
 		component App() {
-			const text = track('Before');
+			const text = #ripple.track('Before');
 
 			<div>
 				<div contenteditable="true" {ref bindInnerText(text)} />
@@ -2626,7 +2624,7 @@ describe('bindInnerText', () => {
 
 	it('should update innerText when tracked value changes with a getter and setter', () => {
 		component App() {
-			const text = #{ value: 'Before' };
+			const text = #ripple{ value: 'Before' };
 
 			<div>
 				<div
@@ -2657,9 +2655,9 @@ describe('bindTextContent', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = track('Sample text');
+			const text = #ripple.track('Sample text');
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(@text);
 			});
 
@@ -2683,9 +2681,9 @@ describe('bindTextContent', () => {
 		const logs: string[] = [];
 
 		component App() {
-			const text = #{ value: 'Sample text' };
+			const text = #ripple{ value: 'Sample text' };
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(text.value);
 			});
 
@@ -2710,7 +2708,7 @@ describe('bindTextContent', () => {
 
 	it('should update textContent when tracked value changes', () => {
 		component App() {
-			const text = track('Start');
+			const text = #ripple.track('Start');
 
 			<div>
 				<div contenteditable="true" {ref bindTextContent(text)} />
@@ -2734,7 +2732,7 @@ describe('bindTextContent', () => {
 
 	it('should update textContent when tracked value changes with a getter and setter', () => {
 		component App() {
-			const text = #{ value: 'Start' };
+			const text = #ripple{ value: 'Start' };
 
 			<div>
 				<div
@@ -2761,7 +2759,7 @@ describe('bindTextContent', () => {
 
 	it('should handle null textContent value', () => {
 		component App() {
-			const text = track(null);
+			const text = #ripple.track(null);
 
 			<div contenteditable="true" {ref bindTextContent(text)} />
 		}
@@ -2776,7 +2774,7 @@ describe('bindTextContent', () => {
 
 	it('should handle null textContent value with a getter and setter', () => {
 		component App() {
-			const text: TrackedObject<{ value: string | null }> = #{ value: null };
+			const text: RippleObject<{ value: string | null }> = #ripple{ value: null };
 
 			<div
 				contenteditable="true"
@@ -2801,9 +2799,9 @@ describe('bindNode', () => {
 		let capturedNode: HTMLElement | null = null;
 
 		component App() {
-			const nodeRef = track(null);
+			const nodeRef = #ripple.track(null);
 
-			effect(() => {
+			#ripple.effect(() => {
 				capturedNode = @nodeRef;
 			});
 
@@ -2821,9 +2819,9 @@ describe('bindNode', () => {
 		let capturedNode: HTMLElement | null = null;
 
 		component App() {
-			const nodeRef: TrackedObject<{ value: HTMLElement | null }> = #{ value: null };
+			const nodeRef: RippleObject<{ value: HTMLElement | null }> = #ripple{ value: null };
 
-			effect(() => {
+			#ripple.effect(() => {
 				capturedNode = nodeRef.value;
 			});
 
@@ -2839,7 +2837,7 @@ describe('bindNode', () => {
 
 	it('should allow access to bound element', () => {
 		component App() {
-			const inputRef = track<HTMLInputElement | null>(null);
+			const inputRef = #ripple.track<HTMLInputElement | null>(null);
 
 			<div>
 				<input type="text" {ref bindNode(inputRef)} />
@@ -2871,7 +2869,7 @@ describe('bindNode', () => {
 
 	it('should allow access to bound element with a getter and setter', () => {
 		component App() {
-			const inputRef: TrackedObject<{ node: HTMLInputElement | null }> = #{ node: null };
+			const inputRef: RippleObject<{ node: HTMLInputElement | null }> = #ripple{ node: null };
 
 			<div>
 				<input
@@ -2910,9 +2908,9 @@ describe('bindFiles', () => {
 		const logs: FileList[] = [];
 
 		component App() {
-			const files = track(null);
+			const files = #ripple.track(null);
 
-			effect(() => {
+			#ripple.effect(() => {
 				@files;
 				if (@files) logs.push(@files);
 			});
@@ -2951,9 +2949,9 @@ describe('bindFiles', () => {
 		const logs: FileList[] = [];
 
 		component App() {
-			const files: TrackedObject<{ items: FileList | null }> = #{ items: null };
+			const files: RippleObject<{ items: FileList | null }> = #ripple{ items: null };
 
-			effect(() => {
+			#ripple.effect(() => {
 				files.items;
 				if (files.items) logs.push(files.items);
 			});
@@ -2996,9 +2994,9 @@ describe('bindFiles', () => {
 		let capturedFiles: FileList | null = null;
 
 		component App() {
-			const files = track<FileList | null>(null);
+			const files = #ripple.track<FileList | null>(null);
 
-			effect(() => {
+			#ripple.effect(() => {
 				capturedFiles = @files;
 			});
 
@@ -3031,9 +3029,9 @@ describe('bindFiles', () => {
 		let capturedFiles: FileList | null = null;
 
 		component App() {
-			const files: TrackedObject<{ items: FileList | null }> = #{ items: null };
+			const files: RippleObject<{ items: FileList | null }> = #ripple{ items: null };
 
-			effect(() => {
+			#ripple.effect(() => {
 				capturedFiles = files.items;
 			});
 
@@ -3069,15 +3067,15 @@ describe('bindFiles', () => {
 		let capturedFiles: FileList | null = null;
 
 		component App() {
-			const files = track<FileList | null>(null);
-			const input = track<HTMLInputElement | null>(null);
+			const files = #ripple.track<FileList | null>(null);
+			const input = #ripple.track<HTMLInputElement | null>(null);
 
-			effect(() => {
+			#ripple.effect(() => {
 				capturedFiles = @files;
 			});
 
 			<div>
-				<input type="file" {ref bindFiles<FileList>(files!)} {ref bindNode(input)} />
+				<input type="file" {ref bindFiles<FileList>(files)} {ref bindNode(input)} />
 				<button
 					onClick={() => {
 						if (@input) {
@@ -3122,10 +3120,10 @@ describe('bindFiles', () => {
 		let capturedFiles: FileList | null = null;
 
 		component App() {
-			const files: TrackedObject<{ items: FileList | null }> = #{ items: null };
-			const input = track<HTMLInputElement | null>(null);
+			const files: RippleObject<{ items: FileList | null }> = #ripple{ items: null };
+			const input = #ripple.track<HTMLInputElement | null>(null);
 
-			effect(() => {
+			#ripple.effect(() => {
 				capturedFiles = files.items;
 			});
 
@@ -3179,9 +3177,9 @@ describe('bindFiles', () => {
 		const fileCounts: number[] = [];
 
 		component App() {
-			const files = track<FileList | null>(null);
+			const files = #ripple.track<FileList | null>(null);
 
-			effect(() => {
+			#ripple.effect(() => {
 				@files;
 				if (@files) {
 					fileCounts.push(@files.length);
@@ -3228,8 +3226,8 @@ describe('bindFiles', () => {
 		const fileCounts: number[] = [];
 
 		component App() {
-			const files: TrackedObject<{ items: FileList | null }> = #{ items: null };
-			effect(() => {
+			const files: RippleObject<{ items: FileList | null }> = #ripple{ items: null };
+			#ripple.effect(() => {
 				files.items;
 				if (files.items) {
 					fileCounts.push(files.items.length);
@@ -3280,9 +3278,9 @@ describe('bindFiles', () => {
 		let capturedFile: File | null = null;
 
 		component App() {
-			const files = track<FileList | null>(null);
+			const files = #ripple.track<FileList | null>(null);
 
-			effect(() => {
+			#ripple.effect(() => {
 				@files;
 				if (@files && @files.length > 0) {
 					capturedFile = @files[0];
@@ -3317,8 +3315,8 @@ describe('bindFiles', () => {
 		let capturedFile: File | null = null;
 
 		component App() {
-			const files: TrackedObject<{ items: FileList | null }> = #{ items: null };
-			effect(() => {
+			const files: RippleObject<{ items: FileList | null }> = #ripple{ items: null };
+			#ripple.effect(() => {
 				files.items;
 				if (files.items && files.items.length > 0) {
 					capturedFile = files.items[0];
@@ -3356,9 +3354,9 @@ describe('bindFiles', () => {
 		const logs: (FileList | null)[] = [];
 
 		component App() {
-			const files = track(null);
+			const files = #ripple.track(null);
 
-			effect(() => {
+			#ripple.effect(() => {
 				logs.push(@files);
 			});
 
@@ -3398,8 +3396,8 @@ describe('bindFiles', () => {
 		const logs: (FileList | null)[] = [];
 
 		component App() {
-			const files: TrackedObject<{ items: FileList | null }> = #{ items: null };
-			effect(() => {
+			const files: RippleObject<{ items: FileList | null }> = #ripple{ items: null };
+			#ripple.effect(() => {
 				logs.push(files.items);
 			});
 
@@ -3613,7 +3611,7 @@ describe('error handling', () => {
 	it('should throw error when bindValue receives a getter but not a setter', () => {
 		expect(() => {
 			component App() {
-				const value = track('');
+				const value = #ripple.track('');
 				<input type="text" {ref bindValue(() => @value)} />
 			}
 			render(App);
@@ -3625,7 +3623,7 @@ describe('error handling', () => {
 	it('should throw error when bindValue receives a getter and setter not a function', () => {
 		expect(() => {
 			component App() {
-				const value = track('');
+				const value = #ripple.track('');
 				// @ts-expect-error invalid argument
 				<input type="text" {ref bindValue(() => @value, 5)} />
 			}