feat: implement color control focus feature with context and highlight animation

- Added SectionContext to manage expanded state for ControlSection components.
- Enhanced ColorPicker to support programmatic focus and highlight animations.
- Introduced useColorControlFocus hook for managing color control references.
- Updated ColorPreview to utilize new focus functionality for color items.
- Added name prop to ColorPicker for identifying color controls in the focus store.

Author: jnsahaj

components/editor/color-picker.tsx

@@ -1,11 +1,25 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo, useRef, useContext } from "react";
 import { Label } from "@/components/ui/label";
 import { ColorPickerProps } from "@/types";
 import { debounce } from "@/utils/debounce";
+import { useColorControlFocus } from "@/store/color-control-focus-store";
+import { cn } from "@/lib/utils";
+import { SectionContext } from "./section-context";
 
-const ColorPicker = ({ color, onChange, label }: ColorPickerProps) => {
+const ColorPicker = ({ color, onChange, label, name }: ColorPickerProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [localColor, setLocalColor] = useState(color);
+  const [shouldAnimate, setShouldAnimate] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const sectionCtx = useContext(SectionContext);
+  const { registerColor, unregisterColor, highlightTarget } = useColorControlFocus();
+
+  // Register/unregister this color control with the focus store
+  useEffect(() => {
+    if (!name) return;
+    registerColor(name, rootRef.current);
+    return () => unregisterColor(name);
+  }, [name, registerColor, unregisterColor]);
 
   // Update localColor if the prop changes externally
   useEffect(() => {
@@ -31,9 +45,39 @@ const ColorPicker = ({ color, onChange, label }: ColorPickerProps) => {
     };
   }, [debouncedOnChange]);
 
+  const isHighlighted = name && highlightTarget === name;
+
+  useEffect(() => {
+    if (isHighlighted) {
+      // Trigger animation
+      setShouldAnimate(true);
+
+      sectionCtx?.setIsExpanded(true);
+      setTimeout(
+        () => {
+          rootRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+        },
+        sectionCtx?.isExpanded ? 0 : 100
+      );
+
+      // Reset animation after it completes
+      const timer = setTimeout(() => {
+        setShouldAnimate(false);
+      }, 1000); // Duration should match the animation duration
+
+      return () => clearTimeout(timer);
+    }
+  }, [isHighlighted, sectionCtx]);
+
   return (
-    <div className="mb-3">
-      <div className="flex items-center justify-between mb-1.5">
+    <div
+      ref={rootRef}
+      className={cn(
+        "mb-3 transition-all duration-300",
+        shouldAnimate && "bg-border/50 -m-1.5 mb-1.5 rounded-sm p-1.5"
+      )}
+    >
+      <div className="mb-1.5 flex items-center justify-between">
         <Label
           htmlFor={`color-${label.replace(/\s+/g, "-").toLowerCase()}`}
           className="text-xs font-medium"
@@ -43,7 +87,7 @@ const ColorPicker = ({ color, onChange, label }: ColorPickerProps) => {
       </div>
       <div className="flex items-center gap-1">
         <div
-          className="h-8 w-8 border cursor-pointer overflow-hidden relative flex items-center justify-center rounded"
+          className="relative flex h-8 w-8 cursor-pointer items-center justify-center overflow-hidden rounded border"
           style={{ backgroundColor: localColor }}
           onClick={() => setIsOpen(!isOpen)}
         >
@@ -52,14 +96,14 @@ const ColorPicker = ({ color, onChange, label }: ColorPickerProps) => {
             id={`color-${label.replace(/\s+/g, "-").toLowerCase()}`}
             value={localColor}
             onChange={handleColorChange}
-            className="absolute inset-0 opacity-0 cursor-pointer w-full h-full"
+            className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
           />
         </div>
         <input
           type="text"
           value={localColor}
           onChange={handleColorChange}
-          className="flex-1 h-8 px-2 text-sm rounded bg-input/25 border border-border/20"
+          className="bg-input/25 border-border/20 h-8 flex-1 rounded border px-2 text-sm"
         />
       </div>
     </div>

components/editor/control-section.tsx

@@ -2,48 +2,44 @@ import React, { useState } from "react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { ControlSectionProps } from "@/types";
+import { SectionContext } from "./section-context";
 
-const ControlSection = ({
-  title,
-  children,
-  expanded = false,
-  className,
-  id,
-}: ControlSectionProps) => {
+const ControlSection = ({ title, children, expanded = false, className }: ControlSectionProps) => {
   const [isExpanded, setIsExpanded] = useState(expanded);
 
   return (
-    <div
-      id={id}
-      className={cn("mb-4 border rounded-lg overflow-hidden", className)}
+    <SectionContext.Provider
+      value={{
+        isExpanded,
+        setIsExpanded,
+        toggleExpanded: () => setIsExpanded((prev) => !prev),
+      }}
     >
-      <div
-        className="flex items-center justify-between p-3 cursor-pointer bg-background hover:bg-muted"
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        <h3 className="font-medium text-sm">{title}</h3>
-        <button
-          type="button"
-          className="text-muted-foreground hover:text-foreground transition-colors"
-          aria-label={isExpanded ? "Collapse section" : "Expand section"}
+      <div id={id} className={cn("mb-4 overflow-hidden rounded-lg border", className)}>
+        <div
+          className="bg-background hover:bg-muted flex cursor-pointer items-center justify-between p-3"
+          onClick={() => setIsExpanded(!isExpanded)}
         >
-          {isExpanded ? (
-            <ChevronUp className="h-4 w-4" />
-          ) : (
-            <ChevronDown className="h-4 w-4" />
-          )}
-        </button>
-      </div>
+          <h3 className="text-sm font-medium">{title}</h3>
+          <button
+            type="button"
+            className="text-muted-foreground hover:text-foreground transition-colors"
+            aria-label={isExpanded ? "Collapse section" : "Expand section"}
+          >
+            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+          </button>
+        </div>
 
-      <div
-        className={cn(
-          "overflow-hidden transition-all duration-200",
-          isExpanded ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"
-        )}
-      >
-        <div className="p-3 bg-background border-t">{children}</div>
+        <div
+          className={cn(
+            "overflow-hidden transition-all duration-200",
+            isExpanded ? "max-h-[2000px] opacity-100" : "max-h-0 opacity-0"
+          )}
+        >
+          <div className="bg-background border-t p-3">{children}</div>
+        </div>
       </div>
-    </div>
+    </SectionContext.Provider>
   );
 };
 

components/editor/section-context.tsx

@@ -0,0 +1,16 @@
+import { createContext } from "react";
+
+interface SectionContextType {
+  /** Whether the parent ControlSection is currently expanded */
+  isExpanded: boolean;
+  /** Set the expanded state explicitly */
+  setIsExpanded: (expanded: boolean) => void;
+  /** Helper to toggle the expanded state */
+  toggleExpanded: () => void;
+}
+
+/**
+ * Context that allows descendants of a ControlSection to query or mutate
+ * the expanded / collapsed state of their parent section.
+ */
+export const SectionContext = createContext<SectionContextType | undefined>(undefined);

components/editor/shadow-control.tsx

@@ -25,6 +25,7 @@ const ShadowControl: React.FC<ShadowControlProps> = ({
     <div className="space-y-4">
       <div>
         <ColorPicker
+          name="shadow-color"
           color={shadowColor}
           onChange={(color) => onChange("shadow-color", color)}
           label="Shadow Color"