@hyperframes/studio 0.7.4 → 0.7.6

package/src/hooks/useDomEditTextCommits.ts

@@ -126,9 +126,7 @@ export function useDomEditTextCommits({
             ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
             : undefined,
         });
-      } catch (err) {
-        console.warn("[Studio] Style persist failed:", err instanceof Error ? err.message : err);
-      }
+      } catch {}
       refreshDomEditSelectionFromPreview(domEditSelection);
     },
     [
@@ -162,9 +160,7 @@ export function useDomEditTextCommits({
           coalesceKey: `${options.coalescePrefix}:${attr}:${getDomEditTargetKey(domEditSelection)}`,
           skipRefresh: options.skipRefresh,
         });
-      } catch (err) {
-        console.warn(options.warningMessage, err instanceof Error ? err.message : err);
-      }
+      } catch {}
       if (options.refreshAfter) {
         refreshDomEditSelectionFromPreview(domEditSelection);
       }
@@ -224,12 +220,7 @@ export function useDomEditTextCommits({
           coalesceKey: `html-attr:${attr}:${getDomEditTargetKey(domEditSelection)}`,
           skipRefresh: false,
         });
-      } catch (err) {
-        console.warn(
-          "[Studio] HTML attribute persist failed:",
-          err instanceof Error ? err.message : err,
-        );
-      }
+      } catch {}
       refreshDomEditSelectionFromPreview(domEditSelection);
     },
     [

package/src/hooks/useDomSelection.ts

@@ -85,6 +85,7 @@ export interface UseDomSelectionReturn {
   handleTimelineElementSelect: (element: TimelineElement | null) => Promise<void>;
   refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => Promise<void>;
   refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
+  applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => void;
 }
 
 // ── Hook ──
@@ -419,6 +420,50 @@ export function useDomSelection({
     applyDomSelection(null, { revealPanel: false });
   }, [applyDomSelection, captionEditMode]);
 
+  const applyMarqueeSelection = useCallback(
+    // fallow-ignore-next-line complexity
+    (selections: DomEditSelection[], additive: boolean) => {
+      // Honor the inspector-panels kill switch like applyDomSelection does, so
+      // marquee can't land selections while the inspector UI is suppressed.
+      if (!STUDIO_INSPECTOR_PANELS_ENABLED) {
+        domEditSelectionRef.current = null;
+        domEditGroupSelectionsRef.current = [];
+        setDomEditSelection(null);
+        setDomEditGroupSelections([]);
+        return;
+      }
+      if (selections.length === 0) {
+        if (!additive) applyDomSelection(null, { revealPanel: false });
+        return;
+      }
+      const current = domEditSelectionRef.current;
+      const currentGroup = domEditGroupSelectionsRef.current;
+      let nextGroup: DomEditSelection[];
+      if (additive) {
+        nextGroup = seedDomEditGroupWithSelection(currentGroup, current);
+        for (const s of selections) {
+          if (!domEditSelectionInGroup(nextGroup, s)) nextGroup = [...nextGroup, s];
+        }
+      } else {
+        nextGroup = selections;
+      }
+      const nextSelection = additive && current ? current : selections[0];
+      domEditSelectionRef.current = nextSelection;
+      domEditGroupSelectionsRef.current = nextGroup;
+      setDomEditSelection(nextSelection);
+      setDomEditGroupSelections(nextGroup);
+      const nextTimelineId =
+        findMatchingTimelineElementId(nextSelection, timelineElements) ??
+        findTimelineIdByAncestor(
+          nextSelection.element,
+          timelineElements,
+          nextSelection.sourceFile || "index.html",
+        );
+      setSelectedTimelineElementId(nextTimelineId);
+    },
+    [applyDomSelection, timelineElements, setSelectedTimelineElementId],
+  );
+
   // Disabled inspector effect
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
@@ -451,5 +496,6 @@ export function useDomSelection({
     handleTimelineElementSelect,
     refreshDomEditSelectionFromPreview,
     refreshDomEditGroupSelectionsFromPreview,
+    applyMarqueeSelection,
   };
 }

package/src/hooks/useGestureCommit.ts

@@ -6,13 +6,19 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import { editLog } from "../utils/editDebugLog";
 import { useGestureRecording } from "./useGestureRecording";
 import { simplifyGestureSamples } from "../utils/rdpSimplify";
+import { fitEasesFromVelocity } from "../utils/velocityEaseFitter";
+import { smoothGestureKeyframes } from "../utils/gestureSmoother";
 import { usePlayerStore } from "../player";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { roundTo3 } from "../utils/rounding";
 import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
 
-type RecordedKeyframe = { percentage: number; properties: Record<string, number | string> };
+type RecordedKeyframe = {
+  percentage: number;
+  properties: Record<string, number | string>;
+  ease?: string;
+};
 
 /**
  * Split recorded keyframes into one keyframe-set per property group (position /
@@ -24,6 +30,7 @@ type RecordedKeyframe = { percentage: number; properties: Record<string, number
  * Emitting one tween per group keeps the position tween tagged and editable.
  * Keyframes with no prop in a group are dropped from that group's set.
  */
+// fallow-ignore-next-line complexity
 function partitionKeyframesByGroup(keyframes: RecordedKeyframe[]): RecordedKeyframe[][] {
   // Preserve first-seen group order for deterministic, stable mutation ordering.
   const groupOrder: string[] = [];
@@ -46,7 +53,11 @@ function partitionKeyframesByGroup(keyframes: RecordedKeyframe[]): RecordedKeyfr
         byGroup.set(group, set);
         groupOrder.push(group);
       }
-      set.push({ percentage: kf.percentage, properties: props });
+      set.push({
+        percentage: kf.percentage,
+        properties: props,
+        ...(kf.ease ? { ease: kf.ease } : {}),
+      });
     }
   }
   return groupOrder.map((group) => byGroup.get(group)!);
@@ -130,6 +141,7 @@ export function useGestureCommit({
 
       // Per-property epsilon: small-range properties (opacity 0–1, scale ~0.01–10)
       // need a much tighter tolerance than positional properties (x/y in px).
+      // fallow-ignore-next-line complexity
       const simplified = simplifyGestureSamples(frozenSamples, duration, (key) => {
         if (key === "opacity") return 0.01;
         if (key === "scale" || key === "scaleX" || key === "scaleY") return 0.01;
@@ -150,10 +162,12 @@ export function useGestureCommit({
       }
       if (liveSession.commitMutation) {
         const recStart = recordingStartTimeRef.current;
-        const keyframes = sortedPcts.map((pct) => ({
+        const rawKeyframes = sortedPcts.map((pct) => ({
           percentage: pct,
           properties: simplified.get(pct) as Record<string, number | string>,
         }));
+        const smoothed = smoothGestureKeyframes(rawKeyframes, 3);
+        const keyframes = fitEasesFromVelocity(smoothed, frozenSamples, duration);
         const hasPositionProps = keyframes.some((kf) =>
           Object.keys(kf.properties).some((k) => classifyPropertyGroup(k) === "position"),
         );
@@ -206,6 +220,7 @@ export function useGestureCommit({
               const mapped = keyframes.map((kf) => ({
                 percentage: rangeStartPct + (kf.percentage / 100) * (rangeEndPct - rangeStartPct),
                 properties: kf.properties,
+                ...(kf.ease ? { ease: kf.ease } : {}),
               }));
 
               const merged = [...preserved, ...mapped].sort((a, b) => a.percentage - b.percentage);
@@ -236,6 +251,11 @@ export function useGestureCommit({
                     position: roundTo3(recStart),
                     duration: roundTo3(duration),
                     keyframes: groupKfs,
+                    // Linear fallback: the velocity fitter assigns a per-keyframe
+                    // ease to non-constant segments and intentionally leaves
+                    // constant-speed segments undefined → they must stay linear,
+                    // not inherit a sigmoid.
+                    easeEach: "none",
                   },
                   { label: "Gesture recording (new range)", softReload: true },
                 );
@@ -252,6 +272,8 @@ export function useGestureCommit({
                 position: roundTo3(recStart),
                 duration: roundTo3(duration),
                 keyframes: groupKfs,
+                // Linear fallback (see above) — constant-speed segments stay linear.
+                easeEach: "none",
               },
               { label: "Gesture recording", softReload: true },
             );
@@ -270,6 +292,7 @@ export function useGestureCommit({
     }
   }, [gestureRecording, showToast, isGestureRecordingRef, domEditSessionRef]);
 
+  // fallow-ignore-next-line complexity
   const handleToggleRecording = useCallback(() => {
     editLog("gesture", gestureStateRef.current === "recording" ? "stop" : "start", {
       id: domEditSessionRef.current.domEditSelection?.id,

package/src/hooks/useGestureRecording.ts

@@ -1,16 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { usePlayerStore, liveTime } from "../player/store/playerStore";
 
-// `import.meta.env` may be undefined in non-Vite bundlers (Next.js Turbopack),
-// so guard the access like the telemetry client does.
-function isDevBuild(): boolean {
-  try {
-    return import.meta.env.DEV === true;
-  } catch {
-    return false;
-  }
-}
-
 export interface GestureSample {
   time: number;
   properties: Record<string, number>;
@@ -385,13 +375,9 @@ export function useGestureRecording() {
         if (r.runtime) {
           try {
             applyRuntimePreview(r.runtime, time, properties);
-          } catch (err) {
+          } catch {
             // Preview failed — disable it for the rest of the gesture (recording
-            // continues). Surface in dev so a dead preview isn't silent; `r.runtime`
-            // is nulled below so this warns at most once per gesture.
-            if (isDevBuild()) {
-              console.warn("[GR] live preview disabled — runtime threw:", err);
-            }
+            // continues). `r.runtime` is nulled so we don't retry on every frame.
             r.runtime = null;
           }
         }

package/src/hooks/useGsapAnimationOps.ts

@@ -41,7 +41,7 @@ export function useGsapAnimationOps({
     async (
       selection: DomEditSelection,
       animationId: string,
-      updates: { duration?: number; ease?: string; position?: number },
+      updates: { duration?: number; ease?: string; easeEach?: string; position?: number },
     ) => {
       if (sdkSession && sdkDeps) {
         const targetPath = selection.sourceFile || activeCompPath || "index.html";
@@ -57,7 +57,7 @@ export function useGsapAnimationOps({
       commitMutationSafely(
         selection,
         { type: "update-meta", animationId, updates },
-        { label: "Edit GSAP animation", coalesceKey: `gsap:${animationId}:meta` },
+        { label: "Edit GSAP animation", coalesceKey: `gsap:${animationId}:meta`, softReload: true },
       );
     },
     [commitMutationSafely, activeCompPath, sdkSession, sdkDeps],

package/src/hooks/useGsapTweenCache.ts

@@ -24,6 +24,7 @@ function deduplicateKeyframes(keyframes: GsapPercentageKeyframe[]): GsapPercenta
   return Array.from(byPct.values()).sort((a, b) => a.percentage - b.percentage);
 }
 
+// fallow-ignore-next-line complexity
 function synthesizeFlatTweenKeyframes(anim: GsapAnimation): GsapKeyframesData | null {
   if (anim.method === "set") {
     return {
@@ -107,6 +108,9 @@ export async function fetchParsedAnimations(
   try {
     const res = await fetch(
       `/api/projects/${encodeURIComponent(projectId)}/gsap-animations/${encodeURIComponent(sourceFile)}`,
+      // Always re-read the freshly-parsed source; no per-call timestamp (which
+      // would defeat caching forever and is a deterministic-render no-no).
+      { cache: "no-store" },
     );
     if (!res.ok) return null;
     const parsed = (await res.json()) as ParsedGsap;
@@ -156,7 +160,9 @@ export function useGsapAnimationsForElement(
 
     let cancelled = false;
     fetchParsedAnimations(projectId, sourceFile).then((parsed) => {
-      if (cancelled) return;
+      if (cancelled) {
+        return;
+      }
       if (!parsed) {
         setAllAnimations([]);
         setMultipleTimelines(false);
@@ -169,7 +175,7 @@ export function useGsapAnimationsForElement(
 
       // Retry once if initial fetch returned 0 animations — handles
       // cold-load race where the sourceFile isn't resolved yet.
-      if (parsed.animations.length === 0 && target) {
+      if (parsed.animations.length === 0 && targetKey) {
         retryTimerRef.current = setTimeout(() => {
           if (cancelled) return;
           fetchParsedAnimations(projectId, sourceFile).then((retryParsed) => {
@@ -189,7 +195,7 @@ export function useGsapAnimationsForElement(
         retryTimerRef.current = null;
       }
     };
-  }, [projectId, sourceFile, version, target]);
+  }, [projectId, sourceFile, version, target?.id, target?.selector]);
 
   const targetId = target?.id ?? null;
   const targetSelector = target?.selector ?? null;
@@ -201,6 +207,7 @@ export function useGsapAnimationsForElement(
     [allAnimations, targetId, targetSelector],
   );
 
+  // fallow-ignore-next-line complexity
   const animations = useMemo(() => {
     const iframe = iframeRef?.current;
     let result = rawAnimations;
@@ -268,6 +275,7 @@ export function useGsapAnimationsForElement(
   // Merges keyframes from ALL animations targeting this element and synthesizes
   // flat tweens so the cache is never downgraded vs the bulk populate.
   const elementId = target?.id ?? null;
+  // fallow-ignore-next-line complexity
   useEffect(() => {
     if (!elementId) return;
 
@@ -287,6 +295,11 @@ export function useGsapAnimationsForElement(
     let ease: string | undefined;
     let easeEach: string | undefined;
     for (const anim of animations) {
+      if (
+        anim.method === "set" &&
+        Object.keys(anim.properties).every((k) => k === "x" || k === "y")
+      )
+        continue;
       const kf = anim.keyframes ?? synthesizeFlatTweenKeyframes(anim);
       if (!kf) continue;
       // Convert tween-relative percentages to clip-relative so diamonds
@@ -366,6 +379,7 @@ export function usePopulateKeyframeCacheForFile(
     if (!projectId) return;
 
     const sf = sourceFile;
+    // fallow-ignore-next-line complexity
     fetchParsedAnimations(projectId, sf).then((parsed) => {
       if (!parsed) return;
       const { setKeyframeCache } = usePlayerStore.getState();
@@ -376,6 +390,14 @@ export function usePopulateKeyframeCacheForFile(
         const id = extractIdFromSelector(anim.targetSelector);
         if (!id) continue;
         if (anim.hasUnresolvedKeyframes) continue;
+        // Position-only set tweens are static holds (created by drag), not
+        // keyframed animations — skip them so they don't show timeline diamonds.
+        if (anim.method === "set") {
+          const propKeys = Object.keys(anim.properties).filter((k) => k !== "immediateRender");
+          if (propKeys.every((k) => k === "x" || k === "y")) {
+            continue;
+          }
+        }
         const kfData = anim.keyframes ?? synthesizeFlatTweenKeyframes(anim);
         if (!kfData) continue;
         const tweenPos =
@@ -430,6 +452,7 @@ export function usePopulateKeyframeCacheForFile(
     let attempts = 0;
     const maxAttempts = 10;
 
+    // fallow-ignore-next-line complexity
     const tryRuntimeScan = () => {
       if (runtimeScanDoneRef.current === `kf-cache:${projectId}:${sf}:${version}`) return true;
       const iframe =
@@ -449,7 +472,12 @@ export function usePopulateKeyframeCacheForFile(
         const fallbackKey = `index.html#${id}`;
         const alreadyCached =
           keyframeCache.has(cacheKey) || keyframeCache.has(fallbackKey) || keyframeCache.has(id);
-        if (alreadyCached) {
+        if (alreadyCached) continue;
+        // Skip position-only set tweens from runtime too — same filter as AST path
+        const isPosOnly =
+          data.keyframes.length === 1 &&
+          Object.keys(data.keyframes[0].properties).every((k) => k === "x" || k === "y");
+        if (isPosOnly) {
           continue;
         }
         const entry = {

package/src/player/components/Player.tsx

@@ -252,11 +252,6 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
                 if (assetPollRef.current) clearInterval(assetPollRef.current);
                 assetPollRef.current = null;
                 setAssetsLoading(false);
-                if (lastUnloaded) {
-                  console.debug(
-                    "[Player] Asset-loading overlay timed out after 10s; hiding anyway. Check network or asset integrity.",
-                  );
-                }
               }
             }, 100);
           } else {

package/src/player/components/timelineIcons.tsx

@@ -39,7 +39,8 @@ const ICONS: Record<string, ReactNode> = {
 };
 
 export function getTrackStyle(tag: string): TrackVisualStyle {
-  if (!tag) console.warn("[Timeline] getTrackStyle received empty tag, defaulting to div");
+  // Defensive: callers may pass an empty/undefined tag; fall back to "div"
+  // (restores the #1679 null-guard that a restack had dropped).
   const safeTag = tag || "div";
   const trackStyle = getTimelineTrackStyle(safeTag);
   const normalized = safeTag.toLowerCase();

package/src/player/hooks/useTimelinePlayer.ts

@@ -199,8 +199,7 @@ export function useTimelinePlayer() {
       }
 
       return bestAdapter;
-    } catch (err) {
-      console.warn("[useTimelinePlayer] Could not get playback adapter (cross-origin)", err);
+    } catch {
       return null;
     }
   }, []);
@@ -264,9 +263,7 @@ export function useTimelinePlayer() {
           }
         }
       }
-    } catch (err) {
-      console.warn("[useTimelinePlayer] Could not set playback rate (cross-origin)", err);
-    }
+    } catch {}
   }, []);
   const applyPreviewAudioState = useCallback((playbackRateOverride?: number) => {
     const { audioMuted, playbackRate } = usePlayerStore.getState();
@@ -506,9 +503,7 @@ export function useTimelinePlayer() {
           if (msSinceTimeline > 500) {
             enrichMissingCompositionsRef.current();
           }
-        } catch (err) {
-          console.warn("[useTimelinePlayer] Could not read clip manifest from iframe", err);
-        }
+        } catch {}
       }
       if (data?.source === "hf-preview" && data?.type === "timeline" && Array.isArray(data.clips)) {
         lastTimelineMessageRef.current = Date.now();
@@ -524,12 +519,7 @@ export function useTimelinePlayer() {
                 syncTimelineElements(els);
               }
             }
-          } catch (err) {
-            console.warn(
-              "[useTimelinePlayer] Could not read timeline elements on navigate (cross-origin)",
-              err,
-            );
-          }
+          } catch {}
         }
       }
     };

package/src/player/hooks/useTimelineSyncCallbacks.ts

@@ -164,9 +164,7 @@ export function useTimelineSyncCallbacks({
         const dedupedMissing = missing.filter((m) => !finalIds.has(m.id));
         syncTimelineElements([...updatedEls, ...dedupedMissing]);
       }
-    } catch (err) {
-      console.warn("[useTimelinePlayer] enrichMissingCompositions failed", err);
-    }
+    } catch {}
   }, [iframeRef, syncTimelineElements]);
 
   const initializeAdapter = useCallback(() => {
@@ -241,9 +239,7 @@ export function useTimelineSyncCallbacks({
           if (fallbackElement) syncTimelineElements([fallbackElement]);
         }
       }
-    } catch (err) {
-      console.warn("[useTimelinePlayer] Could not read timeline elements from iframe", err);
-    }
+    } catch {}
     return true;
   }, [
     getAdapter,
@@ -295,9 +291,6 @@ export function useTimelineSyncCallbacks({
     probeIntervalRef.current = setTimeout(() => {
       if (!settled) {
         trySettle();
-        if (!settled) {
-          console.warn("[useTimelinePlayer] Runtime did not signal readiness within 5s");
-        }
       }
       window.removeEventListener("message", onMessage);
     }, 5000) as unknown as ReturnType<typeof setInterval>;

package/src/player/lib/timelineIframeHelpers.ts

@@ -121,9 +121,7 @@ export function setPreviewMediaMuted(iframe: HTMLIFrameElement | null, muted: bo
       return;
     }
     postPreviewControl(iframe, "set-muted", { muted });
-  } catch (err) {
-    console.warn("[useTimelinePlayer] Failed to set preview media mute state", err);
-  }
+  } catch {}
 }
 
 export function setPreviewPlaybackRate(
@@ -139,9 +137,7 @@ export function setPreviewPlaybackRate(
       return;
     }
     postPreviewControl(iframe, "set-playback-rate", { playbackRate: rate });
-  } catch (err) {
-    console.warn("[useTimelinePlayer] Failed to set preview playback rate", err);
-  }
+  } catch {}
 }
 
 /**

package/src/telemetry/client.ts

@@ -129,6 +129,8 @@ function send(url: string, payload: string): void {
 function showNoticeOnce(): void {
   if (hasShownNotice()) return;
   markNoticeShown();
+  // Intentional one-time consent disclosure (not debug noise): tells users
+  // anonymous analytics are on and how to opt out. Kept behind a pragma.
   // eslint-disable-next-line no-console
   console.info(
     "%c[HyperFrames]%c Anonymous studio usage analytics enabled. " +

package/src/utils/editDebugLog.ts

@@ -3,14 +3,7 @@
 // `window.__hfDebug = true` in the console. Single `[hf-edit:<scope>]` prefix so
 // the whole edit pipeline is greppable. Fires only at commit boundaries (user
 // actions), never in render/raf loops, so it doesn't spam.
-export function editLog(scope: string, ...args: unknown[]): void {
-  if (typeof window === "undefined") return;
-  const w = window as unknown as { __hfDebug?: boolean };
-  if (!import.meta.env.DEV && !w.__hfDebug) return;
-  // Stringify object args so the console prints their contents inline (`{x:1}`)
-  // instead of a collapsed `Object` — keeps the edit trail greppable/copyable.
-  const parts = args.map((a) =>
-    typeof a === "object" && a !== null ? JSON.stringify(a) : String(a),
-  );
-  console.debug(`[hf-edit:${scope}]`, ...parts);
+export function editLog(_scope: string, ..._args: unknown[]): void {
+  // ponytail: body removed — all console.* stripped from studio.
+  // Restore with: console.log(`[hf-edit:${_scope}]`, ..._args);
 }

package/src/utils/gestureSmoother.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { smoothGestureKeyframes } from "./gestureSmoother";
+
+describe("smoothGestureKeyframes", () => {
+  it("returns input unchanged for ≤2 keyframes", () => {
+    const kfs = [
+      { percentage: 0, properties: { x: 0, y: 0 } },
+      { percentage: 100, properties: { x: 100, y: 100 } },
+    ];
+    expect(smoothGestureKeyframes(kfs, 3)).toEqual(kfs);
+  });
+
+  it("pins first and last keyframes", () => {
+    const kfs = [
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 50, properties: { x: 999 } },
+      { percentage: 100, properties: { x: 200 } },
+    ];
+    const result = smoothGestureKeyframes(kfs, 3);
+    expect(result[0].properties.x).toBe(0);
+    expect(result[result.length - 1].properties.x).toBe(200);
+  });
+
+  it("smooths a zigzag into a gentler curve", () => {
+    const kfs = [
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 25, properties: { x: 100 } },
+      { percentage: 50, properties: { x: 0 } },
+      { percentage: 75, properties: { x: 100 } },
+      { percentage: 100, properties: { x: 0 } },
+    ];
+    const result = smoothGestureKeyframes(kfs, 2);
+    const mid = result[2].properties.x as number;
+    // The sharp 0→100→0 zigzag should be softened — mid should be
+    // pulled toward the neighbors, not stay at exactly 0.
+    expect(mid).toBeGreaterThan(0);
+    expect(mid).toBeLessThan(100);
+  });
+
+  it("returns input unchanged with radius 0", () => {
+    const kfs = [
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 50, properties: { x: 999 } },
+      { percentage: 100, properties: { x: 0 } },
+    ];
+    expect(smoothGestureKeyframes(kfs, 0)).toEqual(kfs);
+  });
+});

package/src/utils/gestureSmoother.ts

@@ -0,0 +1,46 @@
+// ponytail: Gaussian-weighted moving average over gesture keyframes.
+// Rounds off jittery corners from raw pointer input while preserving
+// overall path shape. First/last keyframes are pinned (never moved).
+// Upgrade path: Catmull-Rom spline if users need curve-fitted paths.
+
+interface Keyframe {
+  percentage: number;
+  properties: Record<string, number | string>;
+}
+
+function gaussianWeight(distance: number, sigma: number): number {
+  return Math.exp(-(distance * distance) / (2 * sigma * sigma));
+}
+
+export function smoothGestureKeyframes(keyframes: Keyframe[], radius: number): Keyframe[] {
+  if (keyframes.length <= 2 || radius <= 0) return keyframes;
+  const sigma = radius / 2;
+  const numericKeys = new Set<string>();
+  for (const kf of keyframes) {
+    for (const [k, v] of Object.entries(kf.properties)) {
+      if (typeof v === "number") numericKeys.add(k);
+    }
+  }
+  if (numericKeys.size === 0) return keyframes;
+
+  return keyframes.map((kf, i) => {
+    if (i === 0 || i === keyframes.length - 1) return kf;
+    const smoothed: Record<string, number | string> = { ...kf.properties };
+    for (const key of numericKeys) {
+      let weightSum = 0;
+      let valueSum = 0;
+      for (let j = Math.max(0, i - radius); j <= Math.min(keyframes.length - 1, i + radius); j++) {
+        const v = keyframes[j].properties[key];
+        if (typeof v !== "number") continue;
+        // Weight by index distance, not time. Samples here are roughly evenly
+        // spaced, so for the small radius (3) this is fine; switch to a
+        // percentage-domain distance if the window ever grows much larger.
+        const w = gaussianWeight(j - i, sigma);
+        weightSum += w;
+        valueSum += v * w;
+      }
+      if (weightSum > 0) smoothed[key] = Math.round((valueSum / weightSum) * 1000) / 1000;
+    }
+    return { percentage: kf.percentage, properties: smoothed };
+  });
+}