@hyperframes/studio 0.7.58 → 0.7.59

package/src/components/editor/GsapAnimationSection.tsx

@@ -4,7 +4,11 @@ import { Film } from "../../icons/SystemIcons";
 import { Section } from "./propertyPanelPrimitives";
 import { ADD_METHODS, ADD_METHOD_LABELS, METHOD_TOOLTIPS } from "./gsapAnimationConstants";
 import { AnimationCard } from "./AnimationCard";
-import type { GsapAnimationEditCallbacks } from "./gsapAnimationCallbacks";
+import {
+  trackAnimationMetaUpdate,
+  type GsapAnimationEditCallbacks,
+} from "./gsapAnimationCallbacks";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 
 interface GsapAnimationSectionProps extends GsapAnimationEditCallbacks {
   animations: GsapAnimation[];
@@ -34,7 +38,24 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
   onSetAllKeyframeEases,
   onUnroll,
 }: GsapAnimationSectionProps) {
+  const track = useTrackDesignInput();
   const [addMenuOpen, setAddMenuOpen] = useState(false);
+  const trackProperty = (property: string) => {
+    const control =
+      property === "visibility"
+        ? "toggle"
+        : property === "filter" || property === "clipPath"
+          ? "text"
+          : "metric";
+    track(control, property);
+  };
+  const updateMeta = (
+    animationId: string,
+    updates: { duration?: number; ease?: string; position?: number },
+  ) => {
+    trackAnimationMetaUpdate(track, updates);
+    onUpdateMeta(animationId, updates);
+  };
 
   return (
     <Section title="Animation" icon={<Film size={15} />}>
@@ -58,21 +79,94 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
               key={anim.id}
               animation={anim}
               defaultExpanded={index === 0}
-              onUpdateProperty={onUpdateProperty}
-              onUpdateMeta={onUpdateMeta}
-              onDeleteAnimation={onDeleteAnimation}
-              onAddProperty={onAddProperty}
-              onRemoveProperty={onRemoveProperty}
-              onUpdateFromProperty={onUpdateFromProperty}
-              onAddFromProperty={onAddFromProperty}
-              onRemoveFromProperty={onRemoveFromProperty}
+              onUpdateProperty={(animationId, property, value) => {
+                trackProperty(property);
+                onUpdateProperty(animationId, property, value);
+              }}
+              onUpdateMeta={updateMeta}
+              onDeleteAnimation={(animationId) => {
+                track("button", "Remove animation");
+                onDeleteAnimation(animationId);
+              }}
+              onAddProperty={(animationId, property) => {
+                track("select", "Add effect property");
+                onAddProperty(animationId, property);
+              }}
+              onRemoveProperty={(animationId, property) => {
+                track("button", `Remove ${property}`);
+                onRemoveProperty(animationId, property);
+              }}
+              onUpdateFromProperty={
+                onUpdateFromProperty
+                  ? (animationId, property, value) => {
+                      trackProperty(property);
+                      onUpdateFromProperty(animationId, property, value);
+                    }
+                  : undefined
+              }
+              onAddFromProperty={
+                onAddFromProperty
+                  ? (animationId, property) => {
+                      track("select", "Add from property");
+                      onAddFromProperty(animationId, property);
+                    }
+                  : undefined
+              }
+              onRemoveFromProperty={
+                onRemoveFromProperty
+                  ? (animationId, property) => {
+                      track("button", `Remove from ${property}`);
+                      onRemoveFromProperty(animationId, property);
+                    }
+                  : undefined
+              }
               onLivePreview={onLivePreview}
               onLivePreviewEnd={onLivePreviewEnd}
-              onSetArcPath={onSetArcPath}
-              onUpdateArcSegment={onUpdateArcSegment}
-              onUpdateKeyframeEase={onUpdateKeyframeEase}
-              onSetAllKeyframeEases={onSetAllKeyframeEases}
-              onUnroll={onUnroll}
+              onSetArcPath={
+                onSetArcPath
+                  ? (animationId, config) => {
+                      track(
+                        "toggle",
+                        config.autoRotate !== undefined ? "Auto rotate" : "Arc motion",
+                      );
+                      onSetArcPath(animationId, config);
+                    }
+                  : undefined
+              }
+              onUpdateArcSegment={
+                onUpdateArcSegment
+                  ? (animationId, segmentIndex, update) => {
+                      if (update.curviness === undefined) {
+                        track("button", `Reset arc segment ${segmentIndex + 1}`);
+                      }
+                      onUpdateArcSegment(animationId, segmentIndex, update);
+                    }
+                  : undefined
+              }
+              onUpdateKeyframeEase={
+                onUpdateKeyframeEase
+                  ? (animationId, percentage, ease) => {
+                      track("select", "Keyframe ease");
+                      onUpdateKeyframeEase(animationId, percentage, ease);
+                    }
+                  : undefined
+              }
+              onSetAllKeyframeEases={
+                onSetAllKeyframeEases
+                  ? (animationId, ease) => {
+                      track("select", "All keyframe eases");
+                      onSetAllKeyframeEases(animationId, ease);
+                    }
+                  : undefined
+              }
+              onUnroll={
+                onUnroll
+                  ? (animationId) => {
+                      track("button", "Unroll animation");
+                      onUnroll(animationId);
+                    }
+                  : undefined
+              }
             />
           ))}
 
@@ -85,6 +179,7 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
                     type="button"
                     title={METHOD_TOOLTIPS[method]}
                     onClick={() => {
+                      track("button", `Add ${method} animation`);
                       onAddAnimation(method);
                       setAddMenuOpen(false);
                     }}

package/src/components/editor/InspectorHeaderActions.tsx

@@ -1,26 +1,58 @@
+import { Eye, EyeSlash } from "@phosphor-icons/react";
 import { X } from "../../icons/SystemIcons";
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import type { DomEditSelection } from "./domEditingTypes";
 
-/** The action buttons in the inspector header: Ungroup (groups only), copy, clear. */
+/** The action buttons in the inspector header: visibility, Ungroup (groups only), copy, clear. */
 export function InspectorHeaderActions({
   element,
   copied,
   onCopy,
   onClear,
   onUngroup,
+  selectedElementId,
+  selectedElementHidden,
+  visibilityLabel,
+  onToggleHidden,
 }: {
   element: DomEditSelection;
   copied: boolean;
   onCopy: () => void;
   onClear: () => void;
   onUngroup?: () => void;
+  selectedElementId?: string | null;
+  selectedElementHidden?: boolean;
+  visibilityLabel?: string;
+  onToggleHidden?: (id: string, hidden: boolean) => void;
 }) {
+  const track = useTrackDesignInput();
   return (
     <div className="flex items-center gap-1">
+      {selectedElementId && onToggleHidden && (
+        <button
+          type="button"
+          aria-label={visibilityLabel}
+          title={visibilityLabel}
+          onClick={() => {
+            track("toggle", "Element visibility");
+            void onToggleHidden(selectedElementId, !selectedElementHidden);
+          }}
+          className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
+        >
+          {selectedElementHidden ? (
+            <EyeSlash size={13} weight="bold" aria-hidden="true" />
+          ) : (
+            <Eye size={13} weight="bold" aria-hidden="true" />
+          )}
+        </button>
+      )}
       {onUngroup && element.dataAttributes["hf-group"] != null && (
         <button
           type="button"
-          onClick={onUngroup}
+          onClick={() => {
+            track("button", "Ungroup");
+            onUngroup();
+          }}
           title="Ungroup (⌘⇧G)"
           className="flex h-6 items-center rounded px-2 text-[11px] font-medium text-neutral-400 transition-colors hover:bg-neutral-800 hover:text-neutral-200"
         >
@@ -29,7 +61,10 @@ export function InspectorHeaderActions({
       )}
       <button
         type="button"
-        onClick={onCopy}
+        onClick={() => {
+          track("button", "Copy element info");
+          onCopy();
+        }}
         className={`flex h-6 w-6 items-center justify-center rounded transition-colors ${
           copied
             ? "text-studio-accent"
@@ -52,7 +87,10 @@ export function InspectorHeaderActions({
       <button
         type="button"
         aria-label="Clear selection"
-        onClick={onClear}
+        onClick={() => {
+          track("button", "Clear selection");
+          onClear();
+        }}
         className="flex h-6 w-6 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-800 hover:text-neutral-300"
       >
         <X size={13} />