@kyralabs/m3e-motion 1.3.0 → 1.4.0

package/dist/index.js

@@ -437,6 +437,226 @@ function menuNavigationTarget(key, count, current) {
   }
 }
 
+// src/toolbar-navigation.ts
+function toolbarNavigationTarget(key, count, current, orientation = "horizontal", rtl = false) {
+  if (count === 0) return null;
+  let step;
+  switch (key) {
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    case "ArrowRight":
+    case "ArrowLeft":
+      if (orientation !== "horizontal") return null;
+      step = key === "ArrowRight" !== rtl ? 1 : -1;
+      break;
+    case "ArrowDown":
+    case "ArrowUp":
+      if (orientation !== "vertical") return null;
+      step = key === "ArrowDown" ? 1 : -1;
+      break;
+    default:
+      return null;
+  }
+  if (current < 0) return step > 0 ? 0 : count - 1;
+  return Math.min(Math.max(current + step, 0), count - 1);
+}
+
+// src/cubic-bezier.ts
+var bezier = (p1, p2, t) => 3 * (1 - t) * (1 - t) * t * p1 + 3 * (1 - t) * t * t * p2 + t * t * t;
+var cubicBezier = (a, b, c, d) => (fraction) => {
+  if (!(fraction > 0 && fraction < 1)) return fraction;
+  let lo = 0;
+  let hi = 1;
+  for (let i = 0; i < 30; i++) {
+    const mid = (lo + hi) / 2;
+    if (bezier(a, c, mid) < fraction) lo = mid;
+    else hi = mid;
+  }
+  return bezier(b, d, (lo + hi) / 2);
+};
+function parseCubicBezier(css) {
+  const values = /cubic-bezier\(([^)]*)\)/.exec(css)?.[1]?.split(",").map(Number);
+  return values?.length === 4 && values.every(Number.isFinite) ? cubicBezier(...values) : null;
+}
+
+// src/app-bar-scroll.ts
+function appBarScrollState(height) {
+  return { heightOffsetLimit: -height, heightOffset: 0, contentOffset: 0, atStart: true };
+}
+function withHeightOffset(state, offset) {
+  return { ...state, heightOffset: Math.min(Math.max(offset, state.heightOffsetLimit), 0) };
+}
+function withHeight(state, height) {
+  return withHeightOffset({ ...state, heightOffsetLimit: -height }, state.heightOffset);
+}
+function collapsedFraction(state) {
+  return state.heightOffsetLimit !== 0 ? state.heightOffset / state.heightOffsetLimit + 0 : 0;
+}
+function overlappedFraction(state) {
+  if (!state.atStart && state.contentOffset === 0) return 1;
+  if (state.heightOffsetLimit === 0) return 0;
+  const limit = state.heightOffsetLimit;
+  const clamped = Math.min(Math.max(limit + Math.abs(state.contentOffset), limit), 0);
+  return 1 - clamped / limit;
+}
+function isScrolledUnder(state) {
+  return overlappedFraction(state) > 0.01;
+}
+function scrollAppBar(state, behavior, scrollTop, delta) {
+  const next = { ...state, contentOffset: -scrollTop, atStart: scrollTop <= 0 };
+  if (behavior === "pinned") return next;
+  if (behavior === "enter-always" || delta < 0) {
+    return withHeightOffset(next, state.heightOffset + delta);
+  }
+  const below = (top) => Math.max(0, -state.heightOffset - top);
+  return withHeightOffset(next, state.heightOffset + below(scrollTop) - below(scrollTop + delta));
+}
+function settleTarget(state) {
+  const fraction = collapsedFraction(state);
+  if (fraction < 0.01 || fraction === 1) return null;
+  if (!(state.heightOffset < 0 && state.heightOffset > state.heightOffsetLimit)) return null;
+  return fraction < 0.5 ? 0 : state.heightOffsetLimit;
+}
+var TOP_TITLE_ALPHA_EASING = [0.8, 0, 0.8, 0.15];
+var FAST_OUT_LINEAR_IN_EASING = [0.4, 0, 1, 1];
+var topTitleAlpha = /* @__PURE__ */ cubicBezier(...TOP_TITLE_ALPHA_EASING);
+var fastOutLinearIn = /* @__PURE__ */ cubicBezier(...FAST_OUT_LINEAR_IN_EASING);
+function twoRowsFrame(fraction) {
+  return {
+    collapsedTitleAlpha: topTitleAlpha(fraction),
+    expandedTitleAlpha: 1 - fraction,
+    containerColorFraction: fastOutLinearIn(fraction),
+    collapsedTitleHidden: fraction < 0.5
+  };
+}
+
+// src/floating-toolbar-scroll.ts
+function floatingToolbarScrollState(offsetLimit = -Number.MAX_VALUE, offset = 0, contentOffset = 0) {
+  return withToolbarOffset({ offsetLimit, offset: 0, contentOffset }, offset);
+}
+function withToolbarOffset(state, offset) {
+  return { ...state, offset: Math.min(Math.max(offset, state.offsetLimit), 0) };
+}
+function withToolbarOffsetLimit(state, distance) {
+  return withToolbarOffset({ ...state, offsetLimit: -Math.max(distance, 0) }, state.offset);
+}
+function scrollFloatingToolbar(state, delta) {
+  return withToolbarOffset(
+    { ...state, contentOffset: state.contentOffset + delta },
+    state.offset + delta
+  );
+}
+function toolbarCollapsedFraction(state) {
+  return state.offsetLimit !== 0 ? state.offset / state.offsetLimit + 0 : 0;
+}
+function toolbarSettleTarget(state) {
+  return settleTarget({
+    heightOffsetLimit: state.offsetLimit,
+    heightOffset: state.offset,
+    contentOffset: state.contentOffset});
+}
+function toolbarExpansionScroll(expanded, collapseThreshold, expandThreshold, contentOffset = 0) {
+  return {
+    contentOffset,
+    threshold: expanded ? contentOffset - collapseThreshold : contentOffset + expandThreshold
+  };
+}
+function scrollToolbarExpansion(state, delta, collapseThreshold, expandThreshold) {
+  const contentOffset = state.contentOffset + delta;
+  if (delta < 0 && contentOffset <= state.threshold) {
+    return {
+      state: { contentOffset, threshold: contentOffset + expandThreshold },
+      change: "collapse"
+    };
+  }
+  if (delta > 0 && contentOffset >= state.threshold) {
+    return {
+      state: { contentOffset, threshold: contentOffset - collapseThreshold },
+      change: "expand"
+    };
+  }
+  return { state: { contentOffset, threshold: state.threshold }, change: null };
+}
+
+// src/progress-indicator.ts
+var line = (t, [delay, duration], easing) => t <= delay ? 0 : t >= delay + duration ? 1 : easing((t - delay) / duration);
+function linearIndeterminateFractions(elapsedMillis, timing) {
+  const t = Math.max(0, elapsedMillis) % timing.durationMillis;
+  return [
+    line(t, timing.firstTail, timing.easing),
+    line(t, timing.firstHead, timing.easing),
+    line(t, timing.secondTail, timing.easing),
+    line(t, timing.secondHead, timing.easing)
+  ];
+}
+function circularIndeterminateFrame(elapsedMillis, timing) {
+  const d = timing.durationMillis;
+  const t = Math.max(0, elapsedMillis) % d;
+  const steps = Math.round(d / timing.additionalDelayMillis);
+  const step = timing.additionalRotation / steps;
+  const index = Math.floor(t / timing.additionalDelayMillis);
+  const within = t - index * timing.additionalDelayMillis;
+  const additional = step * index + step * Math.min(1, within / timing.additionalDurationMillis);
+  const half = d / 2;
+  const range = timing.maxProgress - timing.minProgress;
+  const sweep = t <= half ? timing.minProgress + range * (t / half) : timing.maxProgress - range * timing.easing((t - half) / half);
+  return { rotation: timing.rotation * t / d + additional, sweep };
+}
+function waveTravelMillis(wavelength, waveSpeed, minMillis, vertexCount = 1) {
+  if (!(waveSpeed > 0 && wavelength > 0)) return Number.POSITIVE_INFINITY;
+  return Math.max(minMillis, Math.round(wavelength / waveSpeed * 1e3 * vertexCount));
+}
+var waveOffset = (elapsedMillis, travelMillis) => Number.isFinite(travelMillis) ? Math.max(0, elapsedMillis) % travelMillis / travelMillis : 0;
+var indicatorAmplitude = (progress, minProgress, maxProgress) => progress <= minProgress || progress >= maxProgress ? 0 : 1;
+var AmplitudeAnimation = class {
+  #from;
+  #to;
+  #start = 0;
+  #tween = null;
+  #value;
+  constructor(initial) {
+    this.#from = initial;
+    this.#to = initial;
+    this.#value = initial;
+  }
+  get value() {
+    return this.#value;
+  }
+  get target() {
+    return this.#to;
+  }
+  get isRunning() {
+    return this.#tween !== null;
+  }
+  /** Advances to `now` (ms). */
+  sample(now) {
+    const tween = this.#tween;
+    if (tween === null) return this.#value;
+    const fraction = tween.durationMillis > 0 ? (now - this.#start) / tween.durationMillis : 1;
+    if (fraction >= 1) {
+      this.#tween = null;
+      this.#value = this.#to;
+    } else {
+      this.#value = this.#from + (this.#to - this.#from) * tween.easing(Math.max(0, fraction));
+    }
+    return this.#value;
+  }
+  /** Requests `target` at `now`; returns true when a tween started. */
+  update(target, now, increase, decrease) {
+    this.sample(now);
+    if (this.#tween !== null || target === this.#to) return false;
+    const tween = this.#value < target ? increase : decrease;
+    this.#from = this.#value;
+    this.#to = target;
+    this.#start = now;
+    this.#tween = tween;
+    if (tween.durationMillis <= 0) this.sample(now);
+    return true;
+  }
+};
+
 // src/loading-indicator.ts
 var FULL_ROTATION = 360;
 var QUARTER_ROTATION = FULL_ROTATION / 4;
@@ -572,38 +792,197 @@ function menuPosition(input) {
   };
 }
 
-// src/app-bar-scroll.ts
-function appBarScrollState(height) {
-  return { heightOffsetLimit: -height, heightOffset: 0, contentOffset: 0, atStart: true };
-}
-function withHeightOffset(state, offset) {
-  return { ...state, heightOffset: Math.min(Math.max(offset, state.heightOffsetLimit), 0) };
-}
-function withHeight(state, height) {
-  return withHeightOffset({ ...state, heightOffsetLimit: -height }, state.heightOffset);
-}
-function collapsedFraction(state) {
-  return state.heightOffsetLimit !== 0 ? state.heightOffset / state.heightOffsetLimit + 0 : 0;
-}
-function overlappedFraction(state) {
-  if (!state.atStart && state.contentOffset === 0) return 1;
-  if (state.heightOffsetLimit === 0) return 0;
-  const limit = state.heightOffsetLimit;
-  const clamped = Math.min(Math.max(limit + Math.abs(state.contentOffset), limit), 0);
-  return 1 - clamped / limit;
-}
-function isScrolledUnder(state) {
-  return overlappedFraction(state) > 0.01;
-}
-function scrollAppBar(state, behavior, scrollTop, delta) {
-  const next = { ...state, contentOffset: -scrollTop, atStart: scrollTop <= 0 };
-  return behavior === "enter-always" ? withHeightOffset(next, state.heightOffset + delta) : next;
+// src/search-bar.ts
+var SEARCH_BAR_EXPANDED_THRESHOLD = 0.02;
+var SEARCH_DROPDOWN_VISIBLE_PROGRESS = 0.1;
+var TweenAnimatable = class {
+  #value;
+  #from;
+  #target;
+  #start = 0;
+  #spec = null;
+  constructor(value) {
+    this.#value = value;
+    this.#from = value;
+    this.#target = value;
+  }
+  get value() {
+    return this.#value;
+  }
+  get target() {
+    return this.#target;
+  }
+  get isRunning() {
+    return this.#spec !== null;
+  }
+  snapTo(value) {
+    this.#spec = null;
+    this.#value = value;
+    this.#from = value;
+    this.#target = value;
+  }
+  animateTo(target, spec, now) {
+    this.sample(now);
+    if (spec === null || spec.delay + spec.duration <= 0) {
+      this.snapTo(target);
+      return;
+    }
+    this.#from = this.#value;
+    this.#target = target;
+    this.#start = now;
+    this.#spec = spec;
+  }
+  sample(now) {
+    const spec = this.#spec;
+    if (spec === null) return this.#value;
+    const elapsed = now - this.#start - spec.delay;
+    if (elapsed >= spec.duration) {
+      this.snapTo(this.#target);
+      return this.#value;
+    }
+    const fraction = elapsed <= 0 ? 0 : spec.easing(elapsed / spec.duration);
+    this.#value = this.#from + (this.#target - this.#from) * fraction;
+    return this.#value;
+  }
+};
+var SearchBarAnimation = class {
+  #progress;
+  #content;
+  #slide = new SpringAnimatable(0);
+  #specs = null;
+  #dropdownShown = false;
+  #dropdownVisible = false;
+  constructor(expanded = false) {
+    this.#progress = new SpringAnimatable(expanded ? 1 : 0);
+    this.#content = new TweenAnimatable(expanded ? 1 : 0);
+    this.#dropdownShown = expanded;
+    this.#dropdownVisible = expanded;
+  }
+  /** SearchBarState.targetValue. */
+  get isTargetExpanded() {
+    return this.#progress.target === 1;
+  }
+  /** SearchBarState.currentValue: expanded until the value drops to the 0.02 tolerance. */
+  get isExpanded() {
+    return this.#progress.value > SEARCH_BAR_EXPANDED_THRESHOLD;
+  }
+  get isRunning() {
+    return this.#progress.isRunning || this.#content.isRunning || this.#slide.isRunning;
+  }
+  /** animateToExpanded() at `now` (ms). */
+  expand(specs, now) {
+    this.#specs = specs;
+    this.#progress.animateTo(1, specs.expand, now);
+    this.#content.animateTo(1, specs.contentFadeIn, now);
+  }
+  /** animateToCollapsed() at `now` (ms). */
+  collapse(specs, now) {
+    this.#specs = specs;
+    this.#content.animateTo(0, specs.contentFadeOut, now);
+    this.#progress.animateTo(0, specs.collapse, now);
+  }
+  /** Jumps to collapsed (0) or expanded (1), stopping every animation. */
+  snapTo(expanded) {
+    this.#progress.snapTo(expanded ? 1 : 0);
+    this.#content.snapTo(expanded ? 1 : 0);
+    this.#slide.snapTo(0);
+    this.#dropdownShown = expanded;
+    this.#dropdownVisible = expanded;
+  }
+  /**
+   * Advances to `now`. `dropdownHeight` (px, the drop-down's full height) enables the with-gap
+   * slide: AnimatedVisibility(visible = progress > 0.1 && target == Expanded) slides in from minus
+   * half the height on the expand spring and out to it on the collapse spring.
+   */
+  sample(now, dropdownHeight) {
+    const value = this.#progress.sample(now);
+    const progress = Math.min(Math.max(value, 0), 1);
+    const contentProgress = Math.min(Math.max(this.#content.sample(now), 0), 1);
+    if (dropdownHeight !== void 0) {
+      const hidden = Math.round(-dropdownHeight / 2);
+      const visible = progress > SEARCH_DROPDOWN_VISIBLE_PROGRESS && this.isTargetExpanded;
+      if (visible !== this.#dropdownVisible) {
+        this.#dropdownVisible = visible;
+        if (visible) {
+          if (!this.#dropdownShown) this.#slide.snapTo(hidden);
+          this.#dropdownShown = true;
+          this.#slide.animateTo(0, this.#specs?.expand ?? null, now);
+        } else if (this.#dropdownShown) {
+          this.#slide.animateTo(hidden, this.#specs?.collapse ?? null, now);
+        }
+      }
+      this.#slide.sample(now);
+      if (!visible && this.#dropdownShown && !this.#slide.isRunning) this.#dropdownShown = false;
+    }
+    return {
+      value,
+      progress,
+      contentProgress,
+      slide: this.#slide.value,
+      dropdownShown: this.#dropdownShown
+    };
+  }
+};
+var lerp = (a, b, t) => a + (b - a) * t;
+function searchViewFrame(input) {
+  const { variant, collapsed: c, window: w, insetTop, metrics: m } = input;
+  const { value, progress: p } = input.sample;
+  const none = { radius: 0, alpha: 1, minHeight: 0, maxHeight: 0 };
+  if (variant === "docked" || variant === "docked-with-gap") {
+    const ratio = variant === "docked" ? m.dockedMaxHeightRatio : m.withGapMaxHeightRatio;
+    const tableMax = w.height * ratio;
+    const maxHeight = lerp(c.height, tableMax, Math.max(value, 0));
+    const minHeight = Math.min(Math.min(m.dockedMinHeight, tableMax), maxHeight);
+    if (variant === "docked") {
+      return {
+        surface: { ...c, radius: 0, alpha: 1, minHeight, maxHeight },
+        field: { x: c.x, y: c.y, width: c.width },
+        results: { x: c.x, y: c.y + c.height, width: c.width, maxHeight: maxHeight - c.height }
+      };
+    }
+    return {
+      surface: { x: 0, y: 0, width: w.width, height: w.height, ...none, alpha: p },
+      field: { x: c.x, y: c.y, width: c.width },
+      results: {
+        x: c.x,
+        y: c.y + c.height + m.dropdownGap,
+        width: c.width,
+        maxHeight: Math.max(0, maxHeight - c.height - m.dropdownGap)
+      }
+    };
+  }
+  const contained = variant === "full-screen-contained";
+  const width = contained ? w.width : lerp(c.width, w.width, p);
+  const height = contained ? w.height : lerp(c.height, w.height, p);
+  const offsetX = contained ? 0 : lerp(c.x, 0, p);
+  const padding = contained ? m.containedHorizontalPadding : 0;
+  const fieldWidth = lerp(c.width, width - 2 * padding, value);
+  const centerX2 = lerp(c.x + c.width / 2, offsetX + width / 2, value);
+  const topPadding = insetTop + (contained ? m.containedTopPadding : m.verticalPadding);
+  const animatedTopPadding = topPadding * Math.min(p, 1);
+  const bottomPadding = contained ? m.verticalPadding : m.verticalPadding * p;
+  const offsetY = lerp(c.y, 0, p);
+  const fieldY = offsetY + animatedTopPadding;
+  return {
+    surface: contained ? { x: 0, y: 0, width, height, ...none, alpha: p } : { x: offsetX, y: offsetY, width, height, ...none, radius: m.cornerRadius * (1 - p) },
+    field: { x: Math.round(centerX2 - fieldWidth / 2), y: fieldY, width: fieldWidth },
+    results: {
+      x: offsetX,
+      y: fieldY + c.height + bottomPadding,
+      width,
+      maxHeight: Math.max(0, height - (c.height + animatedTopPadding + bottomPadding))
+    }
+  };
 }
-function settleTarget(state) {
-  const fraction = collapsedFraction(state);
-  if (fraction < 0.01 || fraction === 1) return null;
-  if (!(state.heightOffset < 0 && state.heightOffset > state.heightOffsetLimit)) return null;
-  return fraction < 0.5 ? 0 : state.heightOffsetLimit;
+function searchNavigationTarget(key, enabled, active) {
+  const indices = enabled.flatMap((on, i) => on ? [i] : []);
+  const first = indices[0];
+  const last = indices.at(-1);
+  if (first === void 0 || last === void 0) return null;
+  const at2 = indices.indexOf(active);
+  if (key === "ArrowDown") return at2 === -1 ? first : indices[at2 + 1] ?? last;
+  if (key === "ArrowUp") return at2 === -1 ? last : at2 === 0 ? -1 : indices[at2 - 1] ?? first;
+  return null;
 }
 
 // src/button-group.ts
@@ -652,6 +1031,6 @@ function buttonGroupWidths(items, pressed, expandedRatio, visibleCount = items.l
   return widths.slice(0, last);
 }
 
-export { DEFAULT_DISPLACEMENT_THRESHOLD, SpringAnimatable, SpringSimulation, animatedInt, appBarScrollState, buttonGroupVisibleCount, buttonGroupWidths, collapsedFraction, dampingCoefficient, dampingRatioFromCoefficient, estimateAnimationDurationMillis, estimateAnimationDurationMillisDouble, fabMenuItemVisible, indeterminateFrame, initialIndeterminateFrame, isScrolledUnder, menuNavigationTarget, menuPosition, menuTransformOrigin, morphSpringDurationMillis, overlappedFraction, scrollAppBar, settleTarget, springDurationMillis, springToLinear, springValue, springVelocity, withHeight, withHeightOffset };
+export { AmplitudeAnimation, DEFAULT_DISPLACEMENT_THRESHOLD, FAST_OUT_LINEAR_IN_EASING, SEARCH_BAR_EXPANDED_THRESHOLD, SEARCH_DROPDOWN_VISIBLE_PROGRESS, SearchBarAnimation, SpringAnimatable, SpringSimulation, TOP_TITLE_ALPHA_EASING, TweenAnimatable, animatedInt, appBarScrollState, buttonGroupVisibleCount, buttonGroupWidths, circularIndeterminateFrame, collapsedFraction, cubicBezier, dampingCoefficient, dampingRatioFromCoefficient, estimateAnimationDurationMillis, estimateAnimationDurationMillisDouble, fabMenuItemVisible, floatingToolbarScrollState, indeterminateFrame, indicatorAmplitude, initialIndeterminateFrame, isScrolledUnder, linearIndeterminateFractions, menuNavigationTarget, menuPosition, menuTransformOrigin, morphSpringDurationMillis, overlappedFraction, parseCubicBezier, scrollAppBar, scrollFloatingToolbar, scrollToolbarExpansion, searchNavigationTarget, searchViewFrame, settleTarget, springDurationMillis, springToLinear, springValue, springVelocity, toolbarCollapsedFraction, toolbarExpansionScroll, toolbarNavigationTarget, toolbarSettleTarget, twoRowsFrame, waveOffset, waveTravelMillis, withHeight, withHeightOffset, withToolbarOffset, withToolbarOffsetLimit };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map