@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/lib/spring-tween.js

@@ -0,0 +1,500 @@
+import { prefersReducedMotion } from "./motion.js";
+//#region src/lib/spring-tween.ts
+/** visualDuration .26s, bounce .12: presses, toggles, cursors and small indicators. */
+const SNAPPY = {
+	curve: [
+		0,
+		.043,
+		.1426,
+		.2664,
+		.3943,
+		.5144,
+		.6206,
+		.7107,
+		.7845,
+		.8433,
+		.889,
+		.9236,
+		.9492,
+		.9678,
+		.9808,
+		.9897,
+		.9956,
+		.9992,
+		1.0014,
+		1.0025,
+		1.0029,
+		1
+	],
+	ms: 336
+};
+/** visualDuration .4s, no bounce: shapes and layout that move while on screen. */
+const SMOOTH = {
+	curve: [
+		0,
+		.0191,
+		.0667,
+		.1313,
+		.2048,
+		.2816,
+		.3577,
+		.4308,
+		.4991,
+		.562,
+		.6189,
+		.67,
+		.7154,
+		.7554,
+		.7905,
+		.821,
+		.8475,
+		.8704,
+		.89,
+		.9069,
+		.9213,
+		.9336,
+		.9441,
+		.9529,
+		.9605,
+		.9668,
+		.9722,
+		.9767,
+		.9805,
+		.9837,
+		.9864,
+		.9887,
+		.9905,
+		.9921,
+		.9934,
+		.9945,
+		.9955,
+		.9962,
+		.9969,
+		.9974,
+		.9978,
+		.9982,
+		.9985,
+		.9988,
+		.999,
+		1
+	],
+	ms: 720
+};
+/** visualDuration .72s, no bounce: a first sweep that opens slowly and settles long. */
+const REVEAL = {
+	curve: [
+		0,
+		.0063,
+		.0232,
+		.0484,
+		.0799,
+		.1159,
+		.1552,
+		.1964,
+		.2388,
+		.2816,
+		.3242,
+		.366,
+		.4069,
+		.4464,
+		.4844,
+		.5207,
+		.5553,
+		.588,
+		.6189,
+		.648,
+		.6753,
+		.7009,
+		.7248,
+		.747,
+		.7676,
+		.7868,
+		.8046,
+		.821,
+		.8362,
+		.8502,
+		.8631,
+		.875,
+		.8859,
+		.8959,
+		.9052,
+		.9136,
+		.9213,
+		.9284,
+		.9349,
+		.9408,
+		.9462,
+		.9511,
+		.9556,
+		.9597,
+		.9634,
+		.9668,
+		.9699,
+		.9727,
+		.9753,
+		.9776,
+		.9797,
+		.9816,
+		.9834,
+		.985,
+		.9864,
+		.9877,
+		.9889,
+		.9899,
+		.9909,
+		.9918,
+		.9926,
+		.9933,
+		.994,
+		.9945,
+		.9951,
+		.9956,
+		.996,
+		.9964,
+		.9967,
+		.9971,
+		.9973,
+		.9976,
+		.9978,
+		.9981,
+		.9982,
+		.9984,
+		1
+	],
+	ms: 1232
+};
+/** visualDuration .5s, no bounce: parts of a whole moving to a new share. */
+const SETTLE = {
+	curve: [
+		0,
+		.0126,
+		.045,
+		.091,
+		.1455,
+		.2048,
+		.2662,
+		.3275,
+		.3874,
+		.4448,
+		.4991,
+		.5499,
+		.5969,
+		.6401,
+		.6796,
+		.7154,
+		.7478,
+		.777,
+		.8032,
+		.8266,
+		.8475,
+		.8661,
+		.8825,
+		.8971,
+		.91,
+		.9213,
+		.9313,
+		.9401,
+		.9478,
+		.9545,
+		.9605,
+		.9656,
+		.9701,
+		.9741,
+		.9775,
+		.9805,
+		.9831,
+		.9854,
+		.9873,
+		.9891,
+		.9905,
+		.9918,
+		.9929,
+		.9939,
+		.9947,
+		.9955,
+		.9961,
+		.9966,
+		.9971,
+		.9975,
+		.9978,
+		.9981,
+		.9984,
+		.9986,
+		.9988,
+		1
+	],
+	ms: 880
+};
+/** visualDuration .42s, bounce .16: things that grow into place (a bar, a width that follows new content). */
+const MORPH = {
+	curve: [
+		0,
+		.0178,
+		.0636,
+		.1279,
+		.2033,
+		.2841,
+		.366,
+		.4459,
+		.5218,
+		.5921,
+		.6562,
+		.7136,
+		.7643,
+		.8086,
+		.8466,
+		.879,
+		.9063,
+		.9289,
+		.9475,
+		.9626,
+		.9746,
+		.9841,
+		.9914,
+		.9969,
+		1.001,
+		1.0038,
+		1.0058,
+		1.0069,
+		1.0075,
+		1.0077,
+		1.0076,
+		1.0072,
+		1.0067,
+		1.0062,
+		1.0055,
+		1.0049,
+		1.0043,
+		1.0037,
+		1.0032,
+		1.0027,
+		1.0022,
+		1.0018,
+		1.0015,
+		1.0012,
+		1.0009,
+		1.0007,
+		1
+	],
+	ms: 736
+};
+/** visualDuration .9s, no bounce: the stream swells out of its centre the first time it is seen. */
+const SWELL = {
+	curve: [
+		0,
+		.0041,
+		.0153,
+		.0324,
+		.0543,
+		.0799,
+		.1084,
+		.1392,
+		.1715,
+		.2048,
+		.2388,
+		.273,
+		.3072,
+		.341,
+		.3743,
+		.4069,
+		.4386,
+		.4694,
+		.4991,
+		.5278,
+		.5553,
+		.5816,
+		.6068,
+		.6308,
+		.6536,
+		.6753,
+		.6959,
+		.7154,
+		.7338,
+		.7512,
+		.7676,
+		.7831,
+		.7976,
+		.8113,
+		.8242,
+		.8362,
+		.8475,
+		.8581,
+		.868,
+		.8773,
+		.8859,
+		.894,
+		.9016,
+		.9086,
+		.9152,
+		.9213,
+		.927,
+		.9323,
+		.9373,
+		.9419,
+		.9462,
+		.9501,
+		.9538,
+		.9573,
+		.9605,
+		.9634,
+		.9662,
+		.9687,
+		.9711,
+		.9733,
+		.9753,
+		.9772,
+		.9789,
+		.9805,
+		.982,
+		.9834,
+		.9847,
+		.9858,
+		.9869,
+		.9879,
+		.9889,
+		.9897,
+		.9905,
+		.9913,
+		.992,
+		.9926,
+		.9932,
+		.9937,
+		.9942,
+		.9947,
+		.9951,
+		.9955,
+		.9958,
+		.9962,
+		.9965,
+		.9967,
+		.997,
+		.9972,
+		.9975,
+		.9977,
+		.9978,
+		.998,
+		1
+	],
+	ms: 1472
+};
+/** visualDuration .58s, no bounce: segments of a meter growing into place once seen. */
+const FILL = {
+	curve: [
+		0,
+		.0095,
+		.0345,
+		.0707,
+		.1146,
+		.1636,
+		.2153,
+		.2683,
+		.3212,
+		.3732,
+		.4234,
+		.4715,
+		.517,
+		.5599,
+		.6,
+		.6372,
+		.6717,
+		.7034,
+		.7326,
+		.7593,
+		.7836,
+		.8058,
+		.8259,
+		.8441,
+		.8605,
+		.8754,
+		.8888,
+		.9008,
+		.9116,
+		.9213,
+		.93,
+		.9378,
+		.9447,
+		.9509,
+		.9565,
+		.9614,
+		.9658,
+		.9697,
+		.9732,
+		.9763,
+		.979,
+		.9815,
+		.9836,
+		.9855,
+		.9872,
+		.9887,
+		.9901,
+		.9912,
+		.9923,
+		.9932,
+		.994,
+		.9947,
+		.9953,
+		.9959,
+		.9964,
+		.9968,
+		.9972,
+		.9975,
+		.9978,
+		.9981,
+		.9983,
+		.9985,
+		.9987,
+		1
+	],
+	ms: 1008
+};
+const sample = ({ curve, ms }, t) => {
+	const at = t * ms / 16;
+	const i = Math.min(Math.floor(at), curve.length - 2);
+	return curve[i] + (curve[i + 1] - curve[i]) * (at - i);
+};
+/**
+* Runs `onFrame` with spring progress (0 to 1, may overshoot a little) every
+* frame until it settles (after `delay` ms), then `onDone`. Returns a cancel function. Under
+* reduced motion it jumps: one frame at 1, then done.
+*/
+function tween(spring, onFrame, onDone, delay = 0) {
+	if (prefersReducedMotion()) {
+		onFrame(1);
+		onDone?.();
+		return () => {};
+	}
+	const start = performance.now() + delay;
+	let frame = 0;
+	const tick = (now) => {
+		const t = Math.min(Math.max((now - start) / spring.ms, 0), 1);
+		onFrame(t < 1 ? sample(spring, t) : 1);
+		if (t < 1) frame = requestAnimationFrame(tick);
+		else onDone?.();
+	};
+	frame = requestAnimationFrame(tick);
+	return () => cancelAnimationFrame(frame);
+}
+const live = (value) => ({
+	value,
+	stop: () => {}
+});
+/**
+* Moves `target` to `to` on `spring`, starting from wherever it is now, so a
+* change mid-flight never jumps. `onFrame` repaints; `done` runs when it settles.
+*/
+function retarget(target, to, spring, onFrame, delay = 0, done) {
+	target.stop();
+	const from = target.value;
+	if (from === to) {
+		done?.();
+		return;
+	}
+	target.stop = tween(spring, (p) => {
+		target.value = from + (to - from) * p;
+		onFrame();
+	}, done, delay);
+}
+//#endregion
+export { FILL, MORPH, REVEAL, SETTLE, SMOOTH, SNAPPY, SWELL, live, retarget, tween };
+
+//# sourceMappingURL=spring-tween.js.map

package/dist/lib/spring-tween.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spring-tween.js","names":[],"sources":["../../src/lib/spring-tween.ts"],"sourcesContent":["import { prefersReducedMotion } from \"./motion.js\";\n\n/**\n * A spring sampled every 16ms from Motion's solver, for values a script has to\n * drive frame by frame (an SVG shape, a cursor riding a line) where a CSS\n * transition cannot reach. The same curves back the --ease-snappy and\n * --ease-smooth tokens, so scripted and CSS motion agree.\n */\nexport interface Spring {\n  readonly curve: readonly number[];\n  readonly ms: number;\n}\n\n/** visualDuration .26s, bounce .12: presses, toggles, cursors and small indicators. */\nexport const SNAPPY: Spring = {\n  curve: [\n    0, 0.043, 0.1426, 0.2664, 0.3943, 0.5144, 0.6206, 0.7107, 0.7845, 0.8433, 0.889, 0.9236, 0.9492,\n    0.9678, 0.9808, 0.9897, 0.9956, 0.9992, 1.0014, 1.0025, 1.0029, 1,\n  ],\n  ms: 336,\n};\n\n/** visualDuration .4s, no bounce: shapes and layout that move while on screen. */\nexport const SMOOTH: Spring = {\n  curve: [\n    0, 0.0191, 0.0667, 0.1313, 0.2048, 0.2816, 0.3577, 0.4308, 0.4991, 0.562, 0.6189, 0.67, 0.7154,\n    0.7554, 0.7905, 0.821, 0.8475, 0.8704, 0.89, 0.9069, 0.9213, 0.9336, 0.9441, 0.9529, 0.9605,\n    0.9668, 0.9722, 0.9767, 0.9805, 0.9837, 0.9864, 0.9887, 0.9905, 0.9921, 0.9934, 0.9945, 0.9955,\n    0.9962, 0.9969, 0.9974, 0.9978, 0.9982, 0.9985, 0.9988, 0.999, 1,\n  ],\n  ms: 720,\n};\n\n/** visualDuration .72s, no bounce: a first sweep that opens slowly and settles long. */\nexport const REVEAL: Spring = {\n  curve: [\n    0, 0.0063, 0.0232, 0.0484, 0.0799, 0.1159, 0.1552, 0.1964, 0.2388, 0.2816, 0.3242, 0.366, 0.4069,\n    0.4464, 0.4844, 0.5207, 0.5553, 0.588, 0.6189, 0.648, 0.6753, 0.7009, 0.7248, 0.747, 0.7676,\n    0.7868, 0.8046, 0.821, 0.8362, 0.8502, 0.8631, 0.875, 0.8859, 0.8959, 0.9052, 0.9136, 0.9213,\n    0.9284, 0.9349, 0.9408, 0.9462, 0.9511, 0.9556, 0.9597, 0.9634, 0.9668, 0.9699, 0.9727, 0.9753,\n    0.9776, 0.9797, 0.9816, 0.9834, 0.985, 0.9864, 0.9877, 0.9889, 0.9899, 0.9909, 0.9918, 0.9926,\n    0.9933, 0.994, 0.9945, 0.9951, 0.9956, 0.996, 0.9964, 0.9967, 0.9971, 0.9973, 0.9976, 0.9978,\n    0.9981, 0.9982, 0.9984, 1,\n  ],\n  ms: 1232,\n};\n\n/** visualDuration .5s, no bounce: parts of a whole moving to a new share. */\nexport const SETTLE: Spring = {\n  curve: [\n    0, 0.0126, 0.045, 0.091, 0.1455, 0.2048, 0.2662, 0.3275, 0.3874, 0.4448, 0.4991, 0.5499, 0.5969,\n    0.6401, 0.6796, 0.7154, 0.7478, 0.777, 0.8032, 0.8266, 0.8475, 0.8661, 0.8825, 0.8971, 0.91,\n    0.9213, 0.9313, 0.9401, 0.9478, 0.9545, 0.9605, 0.9656, 0.9701, 0.9741, 0.9775, 0.9805, 0.9831,\n    0.9854, 0.9873, 0.9891, 0.9905, 0.9918, 0.9929, 0.9939, 0.9947, 0.9955, 0.9961, 0.9966, 0.9971,\n    0.9975, 0.9978, 0.9981, 0.9984, 0.9986, 0.9988, 1,\n  ],\n  ms: 880,\n};\n\n/** visualDuration .42s, bounce .16: things that grow into place (a bar, a width that follows new content). */\nexport const MORPH: Spring = {\n  curve: [\n    0, 0.0178, 0.0636, 0.1279, 0.2033, 0.2841, 0.366, 0.4459, 0.5218, 0.5921, 0.6562, 0.7136, 0.7643,\n    0.8086, 0.8466, 0.879, 0.9063, 0.9289, 0.9475, 0.9626, 0.9746, 0.9841, 0.9914, 0.9969, 1.001,\n    1.0038, 1.0058, 1.0069, 1.0075, 1.0077, 1.0076, 1.0072, 1.0067, 1.0062, 1.0055, 1.0049, 1.0043,\n    1.0037, 1.0032, 1.0027, 1.0022, 1.0018, 1.0015, 1.0012, 1.0009, 1.0007, 1,\n  ],\n  ms: 736,\n};\n\n/** visualDuration .9s, no bounce: the stream swells out of its centre the first time it is seen. */\nexport const SWELL: Spring = {\n  curve: [\n    0, 0.0041, 0.0153, 0.0324, 0.0543, 0.0799, 0.1084, 0.1392, 0.1715, 0.2048, 0.2388, 0.273,\n    0.3072, 0.341, 0.3743, 0.4069, 0.4386, 0.4694, 0.4991, 0.5278, 0.5553, 0.5816, 0.6068, 0.6308,\n    0.6536, 0.6753, 0.6959, 0.7154, 0.7338, 0.7512, 0.7676, 0.7831, 0.7976, 0.8113, 0.8242, 0.8362,\n    0.8475, 0.8581, 0.868, 0.8773, 0.8859, 0.894, 0.9016, 0.9086, 0.9152, 0.9213, 0.927, 0.9323,\n    0.9373, 0.9419, 0.9462, 0.9501, 0.9538, 0.9573, 0.9605, 0.9634, 0.9662, 0.9687, 0.9711, 0.9733,\n    0.9753, 0.9772, 0.9789, 0.9805, 0.982, 0.9834, 0.9847, 0.9858, 0.9869, 0.9879, 0.9889, 0.9897,\n    0.9905, 0.9913, 0.992, 0.9926, 0.9932, 0.9937, 0.9942, 0.9947, 0.9951, 0.9955, 0.9958, 0.9962,\n    0.9965, 0.9967, 0.997, 0.9972, 0.9975, 0.9977, 0.9978, 0.998, 1,\n  ],\n  ms: 1472,\n};\n\n/** visualDuration .58s, no bounce: segments of a meter growing into place once seen. */\nexport const FILL: Spring = {\n  curve: [\n    0, 0.0095, 0.0345, 0.0707, 0.1146, 0.1636, 0.2153, 0.2683, 0.3212, 0.3732, 0.4234, 0.4715, 0.517,\n    0.5599, 0.6, 0.6372, 0.6717, 0.7034, 0.7326, 0.7593, 0.7836, 0.8058, 0.8259, 0.8441, 0.8605,\n    0.8754, 0.8888, 0.9008, 0.9116, 0.9213, 0.93, 0.9378, 0.9447, 0.9509, 0.9565, 0.9614, 0.9658,\n    0.9697, 0.9732, 0.9763, 0.979, 0.9815, 0.9836, 0.9855, 0.9872, 0.9887, 0.9901, 0.9912, 0.9923,\n    0.9932, 0.994, 0.9947, 0.9953, 0.9959, 0.9964, 0.9968, 0.9972, 0.9975, 0.9978, 0.9981, 0.9983,\n    0.9985, 0.9987, 1,\n  ],\n  ms: 1008,\n};\n\nconst sample = ({ curve, ms }: Spring, t: number) => {\n  const at = (t * ms) / 16;\n  const i = Math.min(Math.floor(at), curve.length - 2);\n  return curve[i]! + (curve[i + 1]! - curve[i]!) * (at - i);\n};\n\n/**\n * Runs `onFrame` with spring progress (0 to 1, may overshoot a little) every\n * frame until it settles (after `delay` ms), then `onDone`. Returns a cancel function. Under\n * reduced motion it jumps: one frame at 1, then done.\n */\nexport function tween(\n  spring: Spring,\n  onFrame: (progress: number) => void,\n  onDone?: () => void,\n  delay = 0,\n) {\n  if (prefersReducedMotion()) {\n    onFrame(1);\n    onDone?.();\n    return () => {};\n  }\n  const start = performance.now() + delay;\n  let frame = 0;\n  const tick = (now: number) => {\n    // A frame's timestamp can precede `start`; clamp so the curve is never indexed below 0.\n    const t = Math.min(Math.max((now - start) / spring.ms, 0), 1);\n    onFrame(t < 1 ? sample(spring, t) : 1);\n    if (t < 1) frame = requestAnimationFrame(tick);\n    else onDone?.();\n  };\n  frame = requestAnimationFrame(tick);\n  return () => cancelAnimationFrame(frame);\n}\n\n/** A value driven by `retarget`. Read `.value` when painting; it is never React state. */\nexport interface Live {\n  value: number;\n  stop: () => void;\n}\n\nexport const live = (value: number): Live => ({ value, stop: () => {} });\n\n/**\n * Moves `target` to `to` on `spring`, starting from wherever it is now, so a\n * change mid-flight never jumps. `onFrame` repaints; `done` runs when it settles.\n */\nexport function retarget(\n  target: Live,\n  to: number,\n  spring: Spring,\n  onFrame: () => void,\n  delay = 0,\n  done?: () => void,\n) {\n  target.stop();\n  const from = target.value;\n  if (from === to) {\n    done?.();\n    return;\n  }\n  target.stop = tween(\n    spring,\n    (p) => {\n      target.value = from + (to - from) * p;\n      onFrame();\n    },\n    done,\n    delay,\n  );\n}\n"],"mappings":";;;AAcA,MAAa,SAAiB;CAC5B,OAAO;EACL;EAAG;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EACzF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;CAClE;CACA,IAAI;AACN;;AAGA,MAAa,SAAiB;CAC5B,OAAO;EACL;EAAG;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAM;EACxF;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAM;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACrF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;CACjE;CACA,IAAI;AACN;;AAGA,MAAa,SAAiB;CAC5B,OAAO;EACL;EAAG;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAC1F;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAO;EACrF;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EACtF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACtF;EAAQ;EAAQ;EAAQ;CAC1B;CACA,IAAI;AACN;;AAGA,MAAa,SAAiB;CAC5B,OAAO;EACL;EAAG;EAAQ;EAAO;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACzF;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;CAClD;CACA,IAAI;AACN;;AAGA,MAAa,QAAgB;CAC3B,OAAO;EACL;EAAG;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAC1F;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;CAC1E;CACA,IAAI;AACN;;AAGA,MAAa,QAAgB;CAC3B,OAAO;EACL;EAAG;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACnF;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EACrF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACxF;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAO;CAChE;CACA,IAAI;AACN;;AAGA,MAAa,OAAe;CAC1B,OAAO;EACL;EAAG;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAC3F;EAAQ;EAAK;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACrF;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAM;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACtF;EAAQ;EAAQ;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAO;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EAAQ;EACvF;EAAQ;EAAQ;CAClB;CACA,IAAI;AACN;AAEA,MAAM,UAAU,EAAE,OAAO,MAAc,MAAc;CACnD,MAAM,KAAM,IAAI,KAAM;CACtB,MAAM,IAAI,KAAK,IAAI,KAAK,MAAM,EAAE,GAAG,MAAM,SAAS,CAAC;CACnD,OAAO,MAAM,MAAO,MAAM,IAAI,KAAM,MAAM,OAAQ,KAAK;AACzD;;;;;;AAOA,SAAgB,MACd,QACA,SACA,QACA,QAAQ,GACR;CACA,IAAI,qBAAqB,GAAG;EAC1B,QAAQ,CAAC;EACT,SAAS;EACT,aAAa,CAAC;CAChB;CACA,MAAM,QAAQ,YAAY,IAAI,IAAI;CAClC,IAAI,QAAQ;CACZ,MAAM,QAAQ,QAAgB;EAE5B,MAAM,IAAI,KAAK,IAAI,KAAK,KAAK,MAAM,SAAS,OAAO,IAAI,CAAC,GAAG,CAAC;EAC5D,QAAQ,IAAI,IAAI,OAAO,QAAQ,CAAC,IAAI,CAAC;EACrC,IAAI,IAAI,GAAG,QAAQ,sBAAsB,IAAI;OACxC,SAAS;CAChB;CACA,QAAQ,sBAAsB,IAAI;CAClC,aAAa,qBAAqB,KAAK;AACzC;AAQA,MAAa,QAAQ,WAAyB;CAAE;CAAO,YAAY,CAAC;AAAE;;;;;AAMtE,SAAgB,SACd,QACA,IACA,QACA,SACA,QAAQ,GACR,MACA;CACA,OAAO,KAAK;CACZ,MAAM,OAAO,OAAO;CACpB,IAAI,SAAS,IAAI;EACf,OAAO;EACP;CACF;CACA,OAAO,OAAO,MACZ,SACC,MAAM;EACL,OAAO,QAAQ,QAAQ,KAAK,QAAQ;EACpC,QAAQ;CACV,GACA,MACA,KACF;AACF"}

package/dist/lib/svg-id.js

@@ -0,0 +1,10 @@
+import { useId } from "react";
+//#region src/lib/svg-id.ts
+/** An id safe inside url(#...), for masks and clip paths: React's own ids hold characters (colons, underscores) that break the reference. */
+function useSvgId() {
+	return useId().replace(/[^a-zA-Z0-9-]/g, "");
+}
+//#endregion
+export { useSvgId };
+
+//# sourceMappingURL=svg-id.js.map

package/dist/lib/svg-id.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg-id.js","names":[],"sources":["../../src/lib/svg-id.ts"],"sourcesContent":["import { useId } from \"react\";\n\n/** An id safe inside url(#...), for masks and clip paths: React's own ids hold characters (colons, underscores) that break the reference. */\nexport function useSvgId() {\n  return useId().replace(/[^a-zA-Z0-9-]/g, \"\");\n}\n"],"mappings":";;;AAGA,SAAgB,WAAW;CACzB,OAAO,MAAM,CAAC,CAAC,QAAQ,kBAAkB,EAAE;AAC7C"}

package/dist/lib/swap-text.js

@@ -0,0 +1,79 @@
+import { cn } from "./cn.js";
+import { useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from "./motion.js";
+import { useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/swap-text.tsx
+const LEAVING = {
+	rise: "absolute motion-safe:animate-field-swap-out motion-reduce:animate-fade-out",
+	roll: "absolute motion-safe:animate-field-swap-out motion-reduce:animate-fade-out",
+	slide: "absolute motion-safe:animate-calendar-title-out motion-reduce:animate-fade-out",
+	word: "absolute motion-safe:animate-range-word-out motion-reduce:animate-range-word-fade-out",
+	glyph: "absolute motion-safe:animate-glyph-swap-out motion-reduce:animate-fade-out",
+	dot: "absolute motion-safe:animate-avatar-dot-out motion-reduce:animate-fade-out"
+};
+const ARRIVING = {
+	rise: "inline-block motion-safe:animate-field-swap-in motion-reduce:animate-field-swap-fade-in",
+	roll: "inline-block motion-safe:animate-select-value-in motion-reduce:animate-fade-in",
+	slide: "inline-block motion-safe:animate-calendar-title-in motion-reduce:animate-fade-in",
+	word: "inline-block motion-safe:animate-range-word-in motion-reduce:animate-fade-in",
+	glyph: "inline-block motion-safe:animate-glyph-swap-in motion-reduce:animate-fade-in",
+	dot: "inline-block motion-safe:animate-avatar-dot-in motion-reduce:animate-fade-in"
+};
+/** A replaced piece of content on its way out, popped out of flow where it stood and lifting away. */
+function Leaving({ id, empty, rect, motion, onDone, children }) {
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	useIsomorphicLayoutEffect(() => {
+		if (empty) remove();
+	}, [empty, remove]);
+	if (empty) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-leaving": "",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		style: rect,
+		className: LEAVING[motion],
+		children
+	});
+}
+/**
+* Content that is replaced as a whole when `swapKey` changes: the new content
+* rises in from `dir` (1 from below, -1 from above; one variable shared with the
+* leaving content so both follow the newest direction) while the old content,
+* kept where it stood, lifts away the other way. An empty `swapKey` shows nothing
+* (and the content before it leaves). Nothing animates on first mount, and
+* reduced motion fades instead of moving. This is for the eye only: a screen
+* reader reads the caller's own copy. The wrapper is `position: relative`, which
+* the popped-out content is placed against.
+*/
+function SwapText({ swapKey, dir = 1, motion = "rise", delay, className, children }) {
+	const ref = useRef(null);
+	const { leaving, changed, remove } = useLeavingItems(swapKey, {
+		key: swapKey,
+		node: children
+	}, () => ref.current);
+	return /* @__PURE__ */ jsxs("span", {
+		style: { "--dir": dir },
+		className: cn("relative", className),
+		children: [leaving.map((item) => /* @__PURE__ */ jsx(Leaving, {
+			id: item.id,
+			empty: item.value.key === "",
+			rect: item.rect,
+			motion,
+			onDone: remove,
+			children: item.value.node
+		}, item.id)), swapKey ? /* @__PURE__ */ jsx("span", {
+			ref,
+			"data-arriving": changed ? "" : void 0,
+			style: changed && delay ? { animationDelay: `${delay}ms` } : void 0,
+			className: changed ? ARRIVING[motion] : "inline-block",
+			children
+		}, swapKey) : null]
+	});
+}
+//#endregion
+export { SwapText };
+
+//# sourceMappingURL=swap-text.js.map

package/dist/lib/swap-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swap-text.js","names":[],"sources":["../../src/lib/swap-text.tsx"],"sourcesContent":["import { useCallback, useRef, type CSSProperties, type ReactNode } from \"react\";\n\nimport { cn } from \"./cn.js\";\nimport { useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from \"./motion.js\";\nimport type { Rect } from \"./motion.js\";\n\n/**\n * How replaced content moves. `rise`: up or down a little (a field message). `roll`:\n * a little further, and a 120ms fade under reduced motion (the value a picker shows).\n * `slide`: sideways (a calendar's month title). `word`: a word of a rolling label.\n * `glyph`: an icon, which grows in from small and blurred. `dot`: a presence dot.\n */\nexport type SwapMotion = \"rise\" | \"roll\" | \"slide\" | \"word\" | \"glyph\" | \"dot\";\n\n// Static strings: Tailwind scans source text, so a class built at runtime would never be emitted.\nconst LEAVING: Record<SwapMotion, string> = {\n  rise: \"absolute motion-safe:animate-field-swap-out motion-reduce:animate-fade-out\",\n  roll: \"absolute motion-safe:animate-field-swap-out motion-reduce:animate-fade-out\",\n  slide: \"absolute motion-safe:animate-calendar-title-out motion-reduce:animate-fade-out\",\n  word: \"absolute motion-safe:animate-range-word-out motion-reduce:animate-range-word-fade-out\",\n  glyph: \"absolute motion-safe:animate-glyph-swap-out motion-reduce:animate-fade-out\",\n  dot: \"absolute motion-safe:animate-avatar-dot-out motion-reduce:animate-fade-out\",\n};\n\nconst ARRIVING: Record<SwapMotion, string> = {\n  rise: \"inline-block motion-safe:animate-field-swap-in motion-reduce:animate-field-swap-fade-in\",\n  roll: \"inline-block motion-safe:animate-select-value-in motion-reduce:animate-fade-in\",\n  slide: \"inline-block motion-safe:animate-calendar-title-in motion-reduce:animate-fade-in\",\n  word: \"inline-block motion-safe:animate-range-word-in motion-reduce:animate-fade-in\",\n  glyph: \"inline-block motion-safe:animate-glyph-swap-in motion-reduce:animate-fade-in\",\n  dot: \"inline-block motion-safe:animate-avatar-dot-in motion-reduce:animate-fade-in\",\n};\n\n/** A replaced piece of content on its way out, popped out of flow where it stood and lifting away. */\nfunction Leaving({\n  id,\n  empty,\n  rect,\n  motion,\n  onDone,\n  children,\n}: {\n  id: number;\n  empty: boolean;\n  rect: Rect;\n  motion: SwapMotion;\n  onDone: (id: number) => void;\n  children: ReactNode;\n}) {\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  // The empty value of \"nothing shown\" has nothing to lift away.\n  useIsomorphicLayoutEffect(() => {\n    if (empty) remove();\n  }, [empty, remove]);\n  if (empty) return null;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-leaving=\"\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      style={rect}\n      className={LEAVING[motion]}\n    >\n      {children}\n    </span>\n  );\n}\n\n/**\n * Content that is replaced as a whole when `swapKey` changes: the new content\n * rises in from `dir` (1 from below, -1 from above; one variable shared with the\n * leaving content so both follow the newest direction) while the old content,\n * kept where it stood, lifts away the other way. An empty `swapKey` shows nothing\n * (and the content before it leaves). Nothing animates on first mount, and\n * reduced motion fades instead of moving. This is for the eye only: a screen\n * reader reads the caller's own copy. The wrapper is `position: relative`, which\n * the popped-out content is placed against.\n */\nexport function SwapText({\n  swapKey,\n  dir = 1,\n  motion = \"rise\",\n  delay,\n  className,\n  children,\n}: {\n  swapKey: string;\n  dir?: number;\n  /** How it moves. `dir` is 1 from below or forward, -1 from above or back. @default \"rise\" */\n  motion?: SwapMotion;\n  /** Milliseconds the arriving content waits before it comes in (a stagger). The leaving content never waits. */\n  delay?: number;\n  className?: string;\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLSpanElement>(null);\n  const { leaving, changed, remove } = useLeavingItems(\n    swapKey,\n    { key: swapKey, node: children },\n    () => ref.current,\n  );\n  return (\n    <span style={{ \"--dir\": dir } as CSSProperties} className={cn(\"relative\", className)}>\n      {leaving.map((item) => (\n        <Leaving\n          key={item.id}\n          id={item.id}\n          empty={item.value.key === \"\"}\n          rect={item.rect}\n          motion={motion}\n          onDone={remove}\n        >\n          {item.value.node}\n        </Leaving>\n      ))}\n      {swapKey ? (\n        <span\n          key={swapKey}\n          ref={ref}\n          data-arriving={changed ? \"\" : undefined}\n          style={changed && delay ? { animationDelay: `${delay}ms` } : undefined}\n          className={changed ? ARRIVING[motion] : \"inline-block\"}\n        >\n          {children}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAeA,MAAM,UAAsC;CAC1C,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,MAAM,WAAuC;CAC3C,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;AACP;;AAGA,SAAS,QAAQ,EACf,IACA,OACA,MACA,QACA,QACA,YAQC;CACD,MAAM,SAAS,kBAAkB,OAAO,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;CACzD,gBAAgB,MAAM,MAAM;CAE5B,gCAAgC;EAC9B,IAAI,OAAO,OAAO;CACpB,GAAG,CAAC,OAAO,MAAM,CAAC;CAClB,IAAI,OAAO,OAAO;CAClB,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,gBAAa;EACb,iBAAiB,UAAU;GACzB,IAAI,MAAM,WAAW,MAAM,eAAe,OAAO;EACnD;EACA,OAAO;EACP,WAAW,QAAQ;EAElB;CACG,CAAA;AAEV;;;;;;;;;;;AAYA,SAAgB,SAAS,EACvB,SACA,MAAM,GACN,SAAS,QACT,OACA,WACA,YAUC;CACD,MAAM,MAAM,OAAwB,IAAI;CACxC,MAAM,EAAE,SAAS,SAAS,WAAW,gBACnC,SACA;EAAE,KAAK;EAAS,MAAM;CAAS,SACzB,IAAI,OACZ;CACA,OACE,qBAAC,QAAD;EAAM,OAAO,EAAE,SAAS,IAAI;EAAoB,WAAW,GAAG,YAAY,SAAS;EAAnF,UAAA,CACG,QAAQ,KAAK,SACZ,oBAAC,SAAD;GAEE,IAAI,KAAK;GACT,OAAO,KAAK,MAAM,QAAQ;GAC1B,MAAM,KAAK;GACH;GACR,QAAQ;GAEP,UAAA,KAAK,MAAM;EACL,GARF,KAAK,EAQH,CACV,GACA,UACC,oBAAC,QAAD;GAEO;GACL,iBAAe,UAAU,KAAK,KAAA;GAC9B,OAAO,WAAW,QAAQ,EAAE,gBAAgB,GAAG,MAAM,IAAI,IAAI,KAAA;GAC7D,WAAW,UAAU,SAAS,UAAU;GAEvC;EACG,GAPC,OAOD,IACJ,IACA;;AAEV"}

package/dist/lib/use-copy-feedback.js

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/lib/use-copy-feedback.ts
+/** Clipboard state for actions that render their own button: copy, show copied or failed for a while, then go back to idle. */
+function useCopyFeedback(duration = 1900) {
+	const [state, setState] = useState("idle");
+	const timeout = useRef(null);
+	const reset = useCallback(() => {
+		if (timeout.current) clearTimeout(timeout.current);
+		timeout.current = null;
+		setState("idle");
+	}, []);
+	useEffect(() => () => {
+		if (timeout.current) clearTimeout(timeout.current);
+	}, []);
+	return {
+		state,
+		copy: useCallback(async (value) => {
+			if (timeout.current) clearTimeout(timeout.current);
+			try {
+				await navigator.clipboard.writeText(value);
+				setState("copied");
+				timeout.current = setTimeout(reset, duration);
+				return true;
+			} catch {
+				setState("error");
+				timeout.current = setTimeout(reset, duration);
+				return false;
+			}
+		}, [duration, reset]),
+		reset
+	};
+}
+//#endregion
+export { useCopyFeedback };
+
+//# sourceMappingURL=use-copy-feedback.js.map

package/dist/lib/use-copy-feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-copy-feedback.js","names":[],"sources":["../../src/lib/use-copy-feedback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport type CopyFeedbackState = \"idle\" | \"copied\" | \"error\";\n\n/** Clipboard state for actions that render their own button: copy, show copied or failed for a while, then go back to idle. */\nexport function useCopyFeedback(duration = 1900) {\n  const [state, setState] = useState<CopyFeedbackState>(\"idle\");\n  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const reset = useCallback(() => {\n    if (timeout.current) clearTimeout(timeout.current);\n    timeout.current = null;\n    setState(\"idle\");\n  }, []);\n\n  useEffect(\n    () => () => {\n      if (timeout.current) clearTimeout(timeout.current);\n    },\n    [],\n  );\n\n  /** Resolves true if the text reached the clipboard. */\n  const copy = useCallback(\n    async (value: string) => {\n      if (timeout.current) clearTimeout(timeout.current);\n      try {\n        await navigator.clipboard.writeText(value);\n        setState(\"copied\");\n        timeout.current = setTimeout(reset, duration);\n        return true;\n      } catch {\n        setState(\"error\");\n        timeout.current = setTimeout(reset, duration);\n        return false;\n      }\n    },\n    [duration, reset],\n  );\n\n  return { state, copy, reset };\n}\n"],"mappings":";;;AAKA,SAAgB,gBAAgB,WAAW,MAAM;CAC/C,MAAM,CAAC,OAAO,YAAY,SAA4B,MAAM;CAC5D,MAAM,UAAU,OAA6C,IAAI;CAEjE,MAAM,QAAQ,kBAAkB;EAC9B,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;EACjD,QAAQ,UAAU;EAClB,SAAS,MAAM;CACjB,GAAG,CAAC,CAAC;CAEL,sBACc;EACV,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;CACnD,GACA,CAAC,CACH;CAoBA,OAAO;EAAE;EAAO,MAjBH,YACX,OAAO,UAAkB;GACvB,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;GACjD,IAAI;IACF,MAAM,UAAU,UAAU,UAAU,KAAK;IACzC,SAAS,QAAQ;IACjB,QAAQ,UAAU,WAAW,OAAO,QAAQ;IAC5C,OAAO;GACT,QAAQ;IACN,SAAS,OAAO;IAChB,QAAQ,UAAU,WAAW,OAAO,QAAQ;IAC5C,OAAO;GACT;EACF,GACA,CAAC,UAAU,KAAK,CAGC;EAAG;CAAM;AAC9B"}

package/dist/line-chart/index.d.ts

@@ -0,0 +1,2 @@
+import { LINE_CHART_DRAW_MS, LineChart, LineChartDatum, LineChartProps, LineChartSeries } from "./line-chart.js";
+export { LINE_CHART_DRAW_MS, LineChart, type LineChartDatum, type LineChartProps, type LineChartSeries };

package/dist/line-chart/index.js

@@ -0,0 +1,2 @@
+import { LINE_CHART_DRAW_MS, LineChart } from "./line-chart.js";
+export { LINE_CHART_DRAW_MS, LineChart };