<notatio-slider-2d>

a,b -> [a, b]; a single number -> [n, n]; nothing -> undefined. */ function pair(raw: string | number | undefined): [number, number] | undefined { if (raw === undefined) return undefined; const parts = String(raw) .split(",") .map((s) => Number(s.trim().replace(/_/g, ""))); if (parts.length === 1 && Number.isFinite(parts[0])) return [parts[0], parts[0]]; if (parts.length === 2 && parts.every(Number.isFinite)) return [parts[0], parts[1]]; return undefined; }

/** <notatio-slider-2d name="p" value="0.5,0.5" min="0,0" max="1,1"> -- a square with a dot you drag about it, Wolfram's Slider2D. min/max are x,y pairs (default the unit square), step one step for both axes or dx,dy. The arrows nudge the dot in the same gears as a knob (Shift coarse, Alt fine, held arrows accelerate).

Inside a scope the binding _p is the List [x, y] -- or, with complex, the complex number x + y i, so a knob's two axes and a pad's are the same thing.

Stories in the playground·packages/notatio-lit/src/notatio-slider-2d.ts· in Vue: <Slider2D>

Attributes

Attribute	Type	Default	Notes
name	string	""	The binding this pad drives: name="p" fills the wildcard _p.reflects
value	string	"0,0"	The starting point, x,y -- or a+bi with complex.
min	string	"0,0"	The lower-left corner, x,y.
max	string	"1,1"	The upper-right corner, x,y.
step	string	""	One step for both axes, or dx,dy.
complex	boolean	false	Bind a complex number x + y i rather than a list.reflects
readout	boolean	false	Show the point's coordinates beside the pad.reflects
size	number	120	The pad's side, in CSS pixels.