From 49426f19cd8eaed7cf6c47999b66fee7ee637a56 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Fri, 27 Feb 2026 16:33:57 +0100
Subject: feat: implement keyframe animation system

Add keyframe support for transform, opacity, and volume properties.
Includes animation engine (interpolation, mutations, resolvers), timeline
markers with selection/snapping, properties panel toggles, keyframe-aware
renderer, and full undo/redo command support.

Also refactor element command constructors to object params, extract
timeline pixel math to pixel-utils.ts, and update cursor rules.
---
 .../editor/panels/properties/keyframe-toggle.tsx   | 32 ++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 apps/web/src/components/editor/panels/properties/keyframe-toggle.tsx

(limited to 'apps/web/src/components/editor/panels/properties/keyframe-toggle.tsx')

diff --git a/apps/web/src/components/editor/panels/properties/keyframe-toggle.tsx b/apps/web/src/components/editor/panels/properties/keyframe-toggle.tsx
new file mode 100644
index 00000000..b5b8685f
--- /dev/null
+++ b/apps/web/src/components/editor/panels/properties/keyframe-toggle.tsx
@@ -0,0 +1,32 @@
+import { Button } from "@/components/ui/button";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { KeyframeIcon } from "@hugeicons/core-free-icons";
+import { cn } from "@/utils/ui";
+
+export function KeyframeToggle({
+	isActive,
+	isDisabled = false,
+	title,
+	onToggle,
+}: {
+	isActive: boolean;
+	isDisabled?: boolean;
+	title: string;
+	onToggle: () => void;
+}) {
+	return (
+		<Button
+			variant="text"
+			aria-pressed={isActive}
+			disabled={isDisabled}
+			title={title}
+			onClick={onToggle}
+			className="[&>svg]:size-3.5 mb-0.5"
+		>
+			<HugeiconsIcon
+				icon={KeyframeIcon}
+				className={cn(isActive && "text-primary fill-primary")}
+			/>
+		</Button>
+	);
+}
-- 
cgit v1.3.1