@heyramzi/ui 2.15.0 → 2.15.1

package/dist/lib/motion.js

@@ -0,0 +1,22 @@
+/**
+* Motion tokens for code that needs a number: a Svelte `flip`, `slide` or `fade`, a timer. The
+* CSS in `tokens/craft.css` owns the values; these mirror it for the server render and for a
+* page that never loaded the tokens.
+*/
+export const DURATION_MS = {
+	quick: 150,
+	fast: 250,
+	slow: 300
+};
+/** A duration token in ms, read off a mounted element; both `ms` and `s` parse. */
+export function tokenMs(el, name, fallback) {
+	const raw = getComputedStyle(el).getPropertyValue(name).trim();
+	const n = Number.parseFloat(raw);
+	if (Number.isNaN(n)) return fallback;
+	return raw.endsWith("ms") ? n : n * 1e3;
+}
+/** `--duration-<token>` in ms off the root, so a token edit retimes the JS motion too. */
+export function durationMs(token) {
+	if (typeof document === "undefined") return DURATION_MS[token];
+	return tokenMs(document.documentElement, `--duration-${token}`, DURATION_MS[token]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",

package/src/lib/motion.ts

@@ -0,0 +1,26 @@
+/**
+ * Motion tokens for code that needs a number: a Svelte `flip`, `slide` or `fade`, a timer. The
+ * CSS in `tokens/craft.css` owns the values; these mirror it for the server render and for a
+ * page that never loaded the tokens.
+ */
+export const DURATION_MS = {
+  quick: 150,
+  fast: 250,
+  slow: 300,
+} as const;
+
+export type DurationToken = keyof typeof DURATION_MS;
+
+/** A duration token in ms, read off a mounted element; both `ms` and `s` parse. */
+export function tokenMs(el: Element, name: string, fallback: number): number {
+  const raw = getComputedStyle(el).getPropertyValue(name).trim();
+  const n = Number.parseFloat(raw);
+  if (Number.isNaN(n)) return fallback;
+  return raw.endsWith("ms") ? n : n * 1000;
+}
+
+/** `--duration-<token>` in ms off the root, so a token edit retimes the JS motion too. */
+export function durationMs(token: DurationToken): number {
+  if (typeof document === "undefined") return DURATION_MS[token];
+  return tokenMs(document.documentElement, `--duration-${token}`, DURATION_MS[token]);
+}