@zyncat/ui 0.8.0

package/dist/motion-devtools.css

@@ -0,0 +1,265 @@
+/* MotionDevtools - a floating dev overlay, styled on-brand with the design system's own
+   surface tokens so the <Button>/<Checkbox>/<Collapse> it dogfoods render natively.
+
+   Collapsed it's a small pill (gauge + current factor); opening morphs it into the full panel.
+   The width eases (CSS transition) in step with the <Collapse>-driven body height, so it grows
+   as one piece and never teleports. Everything that would change size on open lives INSIDE the
+   Collapse, so nothing clips while the pill is still narrow.
+
+   The one non-negotiable trick: it RESETS --duration-* to their canonical values on its own
+   root. The engine scales those tokens globally to slow the app; without this local reset the
+   panel's own controls - and this very expand/collapse - would slow down with everything else.
+   A motion debugger must stay crisp while the app runs in slow-mo. Token fallbacks keep it
+   legible if dropped in without the base layer. */
+
+.mdt {
+  /* immune to the global slow-mo the engine applies to --duration-* */
+  --duration-fast: 140ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 450ms;
+  --duration-slowest: 900ms;
+  --duration-spin: 600ms;
+  --duration-pulse: 1600ms;
+
+  --mdt-offset: 16px;
+  --mdt-surface: color-mix(in oklab, var(--bg-surface, #fff) 88%, transparent);
+
+  position: fixed;
+  z-index: 2147483000; /* above every app layer, including tooltips */
+  display: flex;
+  color: var(--text-body, oklch(0.35 0.01 264));
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
+  -webkit-font-smoothing: antialiased;
+}
+
+.mdt--top-left {
+  top: var(--mdt-offset);
+  left: var(--mdt-offset);
+}
+.mdt--top-right {
+  top: var(--mdt-offset);
+  right: var(--mdt-offset);
+}
+.mdt--bottom-left {
+  bottom: var(--mdt-offset);
+  left: var(--mdt-offset);
+}
+.mdt--bottom-right {
+  bottom: var(--mdt-offset);
+  right: var(--mdt-offset);
+}
+
+/* ---------- card (pill when collapsed, panel when open) ---------- */
+
+.mdt__panel {
+  box-sizing: border-box;
+  /* Compact pill when collapsed; eases to the full panel width in step with the <Collapse>
+     body height below, so the whole thing morphs open and never teleports. */
+  width: 128px;
+  padding: 5px;
+  border: 1px solid var(--border-subtle, oklch(0.92 0.004 264));
+  border-radius: var(--radius-xl, 0.75rem);
+  background: var(--mdt-surface);
+  backdrop-filter: blur(16px) saturate(1.6);
+  -webkit-backdrop-filter: blur(16px) saturate(1.6);
+  box-shadow: var(--shadow-lg, 0 12px 28px oklch(0 0 0 / 0.1));
+  animation: mdt-in var(--duration-base) var(--ease-entrance, ease);
+  transition:
+    width var(--duration-slow) var(--ease-entrance, ease),
+    box-shadow var(--duration-slow) var(--ease-entrance, ease);
+}
+.mdt__panel.is-open {
+  width: 232px;
+  box-shadow: var(--shadow-xl, 0 24px 48px oklch(0 0 0 / 0.16));
+}
+
+@keyframes mdt-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.985);
+  }
+}
+
+/* ---------- pill / header (the toggle) ---------- */
+
+.mdt__head {
+  appearance: none;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3125rem 0.4375rem;
+  border: 0;
+  border-radius: var(--radius-md, 0.375rem);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: background var(--duration-fast) var(--ease-standard, ease);
+}
+.mdt__head:hover {
+  background: var(--neutral-wash, oklch(0.5 0.01 264 / 0.07));
+}
+.mdt__head:focus-visible {
+  outline: none;
+  box-shadow: var(--ring-accent, 0 0 0 3px oklch(0.7 0.12 185 / 0.35));
+}
+
+.mdt__glyph {
+  color: var(--text-subtle, oklch(0.6 0.01 264));
+  flex: none;
+  display: block;
+}
+.mdt--active .mdt__glyph {
+  color: var(--accent, oklch(0.62 0.12 185));
+}
+.mdt--paused .mdt__glyph {
+  color: var(--warning, oklch(0.72 0.13 75));
+}
+.mdt__spacer {
+  flex: 1;
+}
+.mdt__badge {
+  font-size: 0.75rem;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  padding: 0.1875rem 0.4375rem;
+  border-radius: var(--radius-full, 999px);
+  color: var(--text-muted, oklch(0.55 0.01 264));
+  background: var(--neutral-wash, oklch(0.5 0.01 264 / 0.08));
+  white-space: nowrap;
+}
+.mdt--active .mdt__badge {
+  color: var(--text-on-accent, #fff);
+  background: var(--accent, oklch(0.62 0.12 185));
+}
+.mdt--paused .mdt__badge {
+  color: var(--text-on-accent, #fff);
+  background: var(--warning, oklch(0.72 0.13 75));
+}
+.mdt__chevron {
+  color: var(--text-subtle, oklch(0.6 0.01 264));
+  flex: none;
+  transition: transform var(--duration-base) var(--ease-standard, ease);
+}
+.mdt__chevron--open {
+  transform: rotate(180deg);
+}
+
+/* ---------- body (inside <Collapse>) ---------- */
+
+.mdt__body {
+  box-sizing: border-box;
+  /* Hold a stable layout width so controls don't reflow as the card animates open; the
+     collapsed pill is narrower, so this overflows and is clipped by <Collapse>'s overflow. */
+  width: 100%;
+  min-width: 208px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8125rem;
+  padding: 0.625rem 0.375rem 0.375rem;
+}
+
+.mdt__title {
+  font-size: 0.6875rem;
+  font-weight: 650;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-subtle, oklch(0.6 0.01 264));
+}
+.mdt__readout {
+  display: flex;
+  align-items: baseline;
+  gap: 0.375rem;
+  margin-top: -0.375rem;
+}
+.mdt__value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--text-strong, oklch(0.25 0.01 264));
+}
+.mdt__unit {
+  font-size: 0.75rem;
+  color: var(--text-muted, oklch(0.55 0.01 264));
+  font-weight: 500;
+}
+
+.mdt__slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  border-radius: 999px;
+  background: linear-gradient(
+    to right,
+    var(--accent, oklch(0.62 0.12 185)) 0%,
+    var(--accent, oklch(0.62 0.12 185)) var(--mdt-fill, 0%),
+    var(--bg-muted, oklch(0.93 0.004 264)) var(--mdt-fill, 0%)
+  );
+  cursor: pointer;
+  margin: 0;
+}
+.mdt__slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--bg-surface, #fff);
+  border: 2px solid var(--accent, oklch(0.62 0.12 185));
+  box-shadow: var(--shadow-sm, 0 1px 2px oklch(0 0 0 / 0.15));
+}
+.mdt__slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--bg-surface, #fff);
+  border: 2px solid var(--accent, oklch(0.62 0.12 185));
+  box-shadow: var(--shadow-sm, 0 1px 2px oklch(0 0 0 / 0.15));
+}
+.mdt__slider:focus-visible {
+  outline: none;
+}
+.mdt__slider:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--ring-accent, 0 0 0 3px oklch(0.7 0.12 185 / 0.35));
+}
+.mdt__slider:focus-visible::-moz-range-thumb {
+  box-shadow: var(--ring-accent, 0 0 0 3px oklch(0.7 0.12 185 / 0.35));
+}
+
+/* preset chip grid + action row - children are DS <Button>s */
+.mdt__chips {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 0.25rem;
+}
+.mdt__chips .btn {
+  padding-inline: 0;
+  min-width: 0;
+}
+.mdt__row {
+  display: flex;
+  gap: 0.375rem;
+}
+.mdt__row .btn {
+  flex: 1;
+}
+
+.mdt__opt {
+  border-top: 1px solid var(--border-subtle, oklch(0.92 0.004 264));
+  padding-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.mdt__hint {
+  font-size: 0.6875rem;
+  line-height: 1.45;
+  color: var(--text-subtle, oklch(0.6 0.01 264));
+  margin: 0;
+}

package/dist/motion-devtools.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+
+interface SlowmoState {
+    /** 1 = real time. >1 = that many times slower (4 = quarter speed). */
+    factor: number;
+    /** Freeze motion in place - useful for inspecting a transition mid-flight. */
+    paused: boolean;
+}
+interface SlowmoOptions {
+    /** Also scale setTimeout/setInterval so duration-coupled JS cleanups don't truncate
+     *  slowed CSS. Turn off if stretched app timers get in your way. @default true */
+    scaleTimers: boolean;
+}
+/** Imperative control surface - drive slow-mo from a console, a hotkey, or the panel.
+ *  Safe to call during SSR (no-ops the DOM work, still tracks state for hydration). */
+declare const motionSlowmo: {
+    /** Current state (a copy). */
+    get(): SlowmoState;
+    /** Merge a partial state. factor is clamped to [1, 64]. */
+    set(patch: Partial<SlowmoState>): void;
+    /** Tune engine behaviour (e.g. stop scaling timers). Applies immediately if active. */
+    configure(patch: Partial<SlowmoOptions>): void;
+    /** Convenience: back to real time and unpaused. */
+    reset(): void;
+    /** Subscribe to state changes; returns an unsubscribe fn. */
+    subscribe(cb: (s: SlowmoState) => void): () => void;
+};
+
+type MotionDevtoolsPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface MotionDevtoolsProps {
+    /** Which corner of the viewport to pin to. @default 'bottom-right' */
+    placement?: MotionDevtoolsPlacement;
+    /** Distance from the viewport edges, in px. @default 16 */
+    offset?: number;
+    /** Quick-select slow-down factors (1 = real time). @default [1, 2, 4, 8, 16] */
+    presets?: number[];
+    /** Upper bound of the fine slider. @default 16 */
+    maxFactor?: number;
+    /** Slow-down factor to start at. @default 1 */
+    defaultFactor?: number;
+    /** Scale setTimeout/setInterval too, so duration-coupled JS cleanups don't truncate
+     *  slowed CSS. Exposed as a live toggle in the panel. @default true */
+    scaleTimers?: boolean;
+    /** Remember the chosen factor across reloads (localStorage). @default true */
+    persist?: boolean;
+    /** Start with the full panel open rather than collapsed to its header. @default false */
+    defaultOpen?: boolean;
+}
+declare function MotionDevtools({ placement, offset, presets, maxFactor, defaultFactor, scaleTimers, persist, defaultOpen, }: MotionDevtoolsProps): react.ReactPortal;
+
+export { MotionDevtools, type MotionDevtoolsPlacement, type MotionDevtoolsProps, type SlowmoState, MotionDevtools as default, motionSlowmo };

package/dist/motion-devtools.js

@@ -0,0 +1,354 @@
+'use client';import { clock } from './chunk-L3Q3VDIW.js';
+import { Button } from './chunk-U5QQZC3U.js';
+import { Checkbox } from './chunk-QDK66S4G.js';
+import './chunk-NNXJCLTV.js';
+import { Collapse } from './chunk-7SZCJ7WI.js';
+import './chunk-VTJTGVZZ.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './motion-devtools.css';
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/dev/slowmo-engine.ts
+var CANONICAL = {
+  "--duration-fast": 140,
+  "--duration-base": 200,
+  "--duration-slow": 300,
+  "--duration-slower": 450,
+  "--duration-slowest": 900,
+  "--duration-spin": 600,
+  "--duration-pulse": 1600
+};
+var DURATION_TOKENS = Object.keys(CANONICAL);
+var COLLAPSED_MS = 4;
+var FROZEN_MS = 6e5;
+var MAX_TIMER_DELAY = 2 ** 30;
+var clamp = (min, max, v) => v < min ? min : v > max ? max : v;
+var hasDOM = typeof document !== "undefined" && typeof window !== "undefined";
+var state = { factor: 1, paused: false };
+var options = { scaleTimers: true };
+var listeners = /* @__PURE__ */ new Set();
+var active = false;
+var baseMs = {};
+var origSetTimeout = null;
+var origSetInterval = null;
+var origAnimate = null;
+var trackedRates = /* @__PURE__ */ new Map();
+function readBaseMs(token) {
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(token).trim();
+  const n = raw.endsWith("ms") ? parseFloat(raw) : raw.endsWith("s") ? parseFloat(raw) * 1e3 : parseFloat(raw);
+  if (isNaN(n) || n <= COLLAPSED_MS) return CANONICAL[token];
+  return n;
+}
+function applyCssTokens() {
+  const root = document.documentElement.style;
+  for (const token of DURATION_TOKENS) {
+    const ms = state.paused ? FROZEN_MS : baseMs[token] * state.factor;
+    root.setProperty(token, `${ms}ms`);
+  }
+}
+function clearCssTokens() {
+  const root = document.documentElement.style;
+  for (const token of DURATION_TOKENS) root.removeProperty(token);
+}
+function scaleDelay(delay) {
+  if (typeof delay !== "number" || !isFinite(delay)) return delay;
+  return Math.min(delay * state.factor, MAX_TIMER_DELAY);
+}
+function patchTimers() {
+  if (origSetTimeout) return;
+  origSetTimeout = window.setTimeout;
+  origSetInterval = window.setInterval;
+  const nativeTimeout = origSetTimeout.bind(window);
+  const nativeInterval = origSetInterval.bind(window);
+  window.setTimeout = ((h, t, ...a) => nativeTimeout(h, scaleDelay(t), ...a));
+  window.setInterval = ((h, t, ...a) => nativeInterval(h, scaleDelay(t), ...a));
+}
+function restoreTimers() {
+  if (origSetTimeout) window.setTimeout = origSetTimeout;
+  if (origSetInterval) window.setInterval = origSetInterval;
+  origSetTimeout = origSetInterval = null;
+}
+function liveRate() {
+  return state.paused ? 0 : 1 / state.factor;
+}
+function track(anim, original) {
+  if (trackedRates.has(anim)) return;
+  trackedRates.set(anim, original);
+  const forget = () => trackedRates.delete(anim);
+  anim.finished.then(forget).catch(forget);
+}
+function patchAnimate() {
+  if (origAnimate) return;
+  origAnimate = Element.prototype.animate;
+  const original = origAnimate;
+  Element.prototype.animate = function(...args) {
+    const anim = original.apply(this, args);
+    try {
+      track(anim, anim.playbackRate);
+      anim.playbackRate = liveRate();
+    } catch {
+    }
+    return anim;
+  };
+}
+function restoreAnimate() {
+  if (origAnimate) Element.prototype.animate = origAnimate;
+  origAnimate = null;
+}
+function sweepExisting() {
+  const rate = liveRate();
+  for (const anim of document.getAnimations()) {
+    try {
+      track(anim, anim.playbackRate);
+      anim.playbackRate = rate;
+    } catch {
+    }
+  }
+}
+function applyTrackedRates() {
+  const rate = liveRate();
+  for (const anim of trackedRates.keys()) {
+    try {
+      anim.playbackRate = rate;
+    } catch {
+    }
+  }
+}
+function restoreTrackedRates() {
+  for (const [anim, original] of trackedRates) {
+    try {
+      anim.playbackRate = original;
+    } catch {
+    }
+  }
+  trackedRates.clear();
+}
+function applyEngineClock() {
+  clock.scale = state.paused ? Infinity : state.factor;
+}
+function install() {
+  active = true;
+  baseMs = {};
+  for (const token of DURATION_TOKENS) baseMs[token] = readBaseMs(token);
+  applyCssTokens();
+  applyEngineClock();
+  if (options.scaleTimers) patchTimers();
+  patchAnimate();
+  sweepExisting();
+}
+function reconfigure() {
+  applyCssTokens();
+  applyEngineClock();
+  applyTrackedRates();
+}
+function uninstall() {
+  active = false;
+  clearCssTokens();
+  clock.scale = 1;
+  restoreTimers();
+  restoreAnimate();
+  restoreTrackedRates();
+}
+function notify() {
+  const snapshot = { ...state };
+  for (const cb of listeners) cb(snapshot);
+}
+function shouldBeActive(factor, paused) {
+  return factor > 1 || paused;
+}
+var motionSlowmo = {
+  /** Current state (a copy). */
+  get() {
+    return { ...state };
+  },
+  /** Merge a partial state. factor is clamped to [1, 64]. */
+  set(patch) {
+    if (typeof patch.factor === "number") state.factor = clamp(1, 64, patch.factor);
+    if (typeof patch.paused === "boolean") state.paused = patch.paused;
+    if (hasDOM) {
+      const wantActive = shouldBeActive(state.factor, state.paused);
+      if (!active && wantActive) install();
+      else if (active && !wantActive) uninstall();
+      else if (active) reconfigure();
+    }
+    notify();
+  },
+  /** Tune engine behaviour (e.g. stop scaling timers). Applies immediately if active. */
+  configure(patch) {
+    if (typeof patch.scaleTimers === "boolean" && patch.scaleTimers !== options.scaleTimers) {
+      options.scaleTimers = patch.scaleTimers;
+      if (active) options.scaleTimers ? patchTimers() : restoreTimers();
+    }
+  },
+  /** Convenience: back to real time and unpaused. */
+  reset() {
+    this.set({ factor: 1, paused: false });
+  },
+  /** Subscribe to state changes; returns an unsubscribe fn. */
+  subscribe(cb) {
+    listeners.add(cb);
+    return () => listeners.delete(cb);
+  }
+};
+var STORAGE_KEY = "zyncat-ui:motion-devtools";
+var fmt = (n) => Number.isInteger(n) ? String(n) : n.toFixed(1);
+function GaugeGlyph() {
+  return /* @__PURE__ */ jsxs("svg", { className: "mdt__glyph", width: "15", height: "15", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 4a8 8 0 0 1 8 8 8 8 0 0 1-.6 3",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 4a8 8 0 0 0-8 8 8 8 0 0 0 .6 3",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        opacity: "0.35"
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M12 12l4-2.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.6", fill: "currentColor" })
+  ] });
+}
+function MotionDevtools({
+  placement = "bottom-right",
+  offset = 16,
+  presets = [1, 2, 4, 8, 16],
+  maxFactor = 16,
+  defaultFactor = 1,
+  scaleTimers = true,
+  persist = true,
+  defaultOpen = false
+}) {
+  const [mounted, setMounted] = useState(false);
+  const [open, setOpen] = useState(defaultOpen);
+  const [snap, setSnap] = useState(() => motionSlowmo.get());
+  const [timers, setTimers] = useState(scaleTimers);
+  useEffect(() => motionSlowmo.subscribe(setSnap), []);
+  useEffect(() => {
+    setMounted(true);
+    let initial = { factor: defaultFactor, paused: false };
+    if (persist) {
+      try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (raw) initial = { ...initial, ...JSON.parse(raw) };
+      } catch {
+      }
+    }
+    motionSlowmo.set(initial);
+    if ((initial.factor ?? 1) > 1 || initial.paused) setOpen(true);
+  }, []);
+  useEffect(() => {
+    motionSlowmo.configure({ scaleTimers: timers });
+  }, [timers]);
+  useEffect(() => {
+    if (!persist) return;
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify({ factor: snap.factor, paused: snap.paused }));
+    } catch {
+    }
+  }, [snap.factor, snap.paused, persist]);
+  if (!mounted) return null;
+  const active2 = shouldBeActive(snap.factor, snap.paused);
+  const rootClass = cx("mdt", `mdt--${placement}`, active2 && "mdt--active", snap.paused && "mdt--paused");
+  const setFactor = (factor) => motionSlowmo.set({ factor, paused: false });
+  const fill = `${(Math.min(snap.factor, maxFactor) - 1) / Math.max(1, maxFactor - 1) * 100}%`;
+  const pillBadge = snap.factor === 1 ? "1\xD7" : `${fmt(snap.factor)}\xD7`;
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { className: rootClass, style: { "--mdt-offset": `${offset}px` }, children: /* @__PURE__ */ jsxs("div", { className: "mdt__panel" + (open ? " is-open" : ""), role: "group", "aria-label": "Motion devtools", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "mdt__head",
+          onClick: () => setOpen((o) => !o),
+          "aria-expanded": open,
+          title: "Motion devtools",
+          "aria-label": open ? "Collapse motion devtools" : "Expand motion devtools",
+          children: [
+            /* @__PURE__ */ jsx(GaugeGlyph, {}),
+            /* @__PURE__ */ jsx("span", { className: "mdt__spacer" }),
+            /* @__PURE__ */ jsx("span", { className: "mdt__badge", children: pillBadge }),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                className: "mdt__chevron" + (open ? " mdt__chevron--open" : ""),
+                width: "12",
+                height: "12",
+                viewBox: "0 0 12 12",
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("path", { d: "M2.5 4.5 6 8l3.5-3.5", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" })
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Collapse, { open, fade: true, children: /* @__PURE__ */ jsxs("div", { className: "mdt__body", children: [
+        /* @__PURE__ */ jsx("span", { className: "mdt__title", children: "Motion" }),
+        /* @__PURE__ */ jsxs("div", { className: "mdt__readout", children: [
+          /* @__PURE__ */ jsx("span", { className: "mdt__value", children: snap.paused ? "Paused" : snap.factor === 1 ? "Normal" : `${fmt(snap.factor)}\xD7` }),
+          /* @__PURE__ */ jsx("span", { className: "mdt__unit", children: snap.paused ? "frozen" : snap.factor === 1 ? "real-time" : "slower" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "mdt__slider",
+            type: "range",
+            min: 1,
+            max: maxFactor,
+            step: 0.5,
+            value: Math.min(snap.factor, maxFactor),
+            onChange: (e) => setFactor(Number(e.target.value)),
+            style: { "--mdt-fill": fill },
+            "aria-label": "Slow-down factor"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "mdt__chips", children: presets.map((p) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            size: "sm",
+            variant: !snap.paused && snap.factor === p ? "primary" : "secondary",
+            onClick: () => setFactor(p),
+            children: [
+              p,
+              "\xD7"
+            ]
+          },
+          p
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "mdt__row", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: snap.paused ? "primary" : "secondary",
+              onClick: () => motionSlowmo.set({ paused: !snap.paused }),
+              children: snap.paused ? "Resume" : "Freeze"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", disabled: !active2, onClick: () => motionSlowmo.reset(), children: "Reset" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mdt__opt", children: [
+          /* @__PURE__ */ jsx(Checkbox, { size: "sm", checked: timers, onChange: (e) => setTimers(e.target.checked), label: "Scale timers" }),
+          /* @__PURE__ */ jsx("p", { className: "mdt__hint", children: "Slows CSS, Motion & WAAPI together. Timer scaling keeps duration-based cleanups from cutting animations short." })
+        ] })
+      ] }) })
+    ] }) }),
+    document.body
+  );
+}
+var MotionDevtools_default = MotionDevtools;
+
+export { MotionDevtools, MotionDevtools_default as default, motionSlowmo };
+//# sourceMappingURL=motion-devtools.js.map
+//# sourceMappingURL=motion-devtools.js.map