@agent-native/core 0.88.0 → 0.90.2

package/corpus/templates/design/app/components/design/MotionDock.tsx

@@ -1,4 +1,3 @@
-// i18n-raw-literal-disable-file — new Design Studio panel; UI strings are localized when this feature is finalized in the follow-up PR.
 /**
  * MotionDock — bottom motion timeline dock for the Design Studio (§6.3).
  *
@@ -17,44 +16,48 @@
  * All times are normalised to [0, 1] internally; the ruler maps them to px.
  */
 
-import { Button } from "@agent-native/toolkit/ui/button";
+import { useT } from "@agent-native/core/client";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@agent-native/toolkit/ui/dropdown-menu";
-import { Input } from "@agent-native/toolkit/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
+  MOTION_CURVE_PRESETS,
+  MOTION_SPRING_DEFAULT_BOUNCE,
+  MOTION_SPRING_PRESETS,
+  parseSpringToken,
+  sampleSpring,
+  springToken,
+} from "@shared/motion-easing";
 import type {
   MotionTrack,
   MotionKeyframe,
   MotionEase,
+  MotionPlaybackMode,
   MotionPropertyPreset,
 } from "@shared/motion-timeline";
 import {
+  MOTION_DEFAULT_PLAYBACK_MODE,
   MOTION_PROPERTY_PRESETS,
   createMotionTrackFromPreset,
+  getMotionTrackTiming,
   hasTrackFor,
+  readTimelinePlaybackMode,
   sampleMotionKeyframesAt,
   sortMotionKeyframes,
+  timelineTimeToTrackTime,
   upsertMotionKeyframeAtTime,
+  withTimelinePlaybackMode,
 } from "@shared/motion-timeline";
 import {
   IconPlayerPlay,
   IconPlayerPause,
   IconPlayerStop,
+  IconArrowsLeftRight,
   IconCheck,
   IconDiamond,
+  IconDiamondFilled,
   IconChevronDown,
   IconChevronRight,
   IconPlus,
+  IconRepeat,
+  IconRepeatOnce,
   IconTrash,
   IconRefresh,
   IconBolt,
@@ -65,11 +68,36 @@ import {
   useEffect,
   useRef,
   useState,
+  type KeyboardEvent as ReactKeyboardEvent,
   type PointerEvent as ReactPointerEvent,
   type TransitionEvent as ReactTransitionEvent,
 } from "react";
 import { toast } from "sonner";
 
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Slider } from "@/components/ui/slider";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
 // ─── Constants ────────────────────────────────────────────────────────────────
@@ -81,16 +109,57 @@ const PLAYHEAD_WIDTH = 2; // px
 const MIN_DOCK_HEIGHT = 160; // px
 const DEFAULT_DOCK_HEIGHT = 280; // px
 
-/** Named easing presets for the keyframe editor. */
-const EASE_PRESETS: { label: string; value: MotionEase }[] = [
-  { label: "Linear", value: "linear" },
-  { label: "Ease", value: "ease" },
-  { label: "Ease In", value: "ease-in" },
-  { label: "Ease Out", value: "ease-out" },
-  { label: "Ease In/Out", value: "ease-in-out" },
-  { label: "Spring", value: "cubic-bezier(0.34,1.56,0.64,1)" },
+/**
+ * Playback-mode cycling order + chrome, matching Figma Motion's cycling
+ * toolbar button (Loop / Once / Ping-pong).
+ */
+const PLAYBACK_MODES: {
+  mode: MotionPlaybackMode;
+  labelKey: "loop" | "once" | "pingPong";
+  Icon: typeof IconRepeat;
+}[] = [
+  { mode: "loop", labelKey: "loop", Icon: IconRepeat },
+  { mode: "once", labelKey: "once", Icon: IconRepeatOnce },
+  { mode: "ping-pong", labelKey: "pingPong", Icon: IconArrowsLeftRight },
 ];
 
+/**
+ * Row-identity key for a track. Uses the unit-separator delimiter (same
+ * convention as apply-motion-edit's motionTrackKey) so distinct
+ * (nodeId, property) pairs can never collide.
+ */
+function trackKey(track: MotionTrack): string {
+  return `${track.targetNodeId}\u001f${track.property}`;
+}
+
+/** Compact ruler tick label: "250ms" under a second, "1.5s" above. */
+function formatMsTick(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  const s = (ms / 1000).toFixed(2).replace(/\.?0+$/, "");
+  return `${s}s`;
+}
+
+/** Human label for an ease value: preset name when recognised, else raw. */
+function easeLabel(
+  ease: MotionEase | undefined,
+  t: (key: string) => string,
+): string {
+  if (ease === undefined) return t("designEditor.motion.defaultEase");
+  const curve = MOTION_CURVE_PRESETS.find((preset) => preset.value === ease);
+  if (curve) return curve.label;
+  const springPreset = MOTION_SPRING_PRESETS.find(
+    (preset) => preset.value === ease,
+  );
+  if (springPreset) return springPreset.label;
+  if (parseSpringToken(String(ease))) {
+    return t("designEditor.motion.customSpring");
+  }
+  if (/^cubic-bezier\(/.test(String(ease))) {
+    return t("designEditor.motion.customBezier");
+  }
+  return String(ease);
+}
+
 // ─── Types ────────────────────────────────────────────────────────────────────
 
 export interface MotionDockTrack extends MotionTrack {
@@ -115,6 +184,15 @@ export interface MotionDockProps {
   onTracksChange?: (tracks: MotionDockTrack[]) => void;
   /** Called when durationMs is edited. */
   onDurationChange?: (ms: number) => void;
+  /**
+   * Controlled playback mode (Loop / Once / Ping-pong). When omitted, the
+   * dock reads the mode stamped in `tracks` (timelinePlaybackMode on the
+   * first track) and persists changes by re-stamping the tracks through
+   * `onTracksChange` — no extra parent wiring needed.
+   */
+  playbackMode?: MotionPlaybackMode;
+  /** Called when the playback-mode cycling button changes the mode. */
+  onPlaybackModeChange?: (mode: MotionPlaybackMode) => void;
   /**
    * Reference to the canvas iframe element. Used to send preview postMessages.
    * If not provided, preview messages are skipped (no crash).
@@ -165,6 +243,8 @@ export function MotionDock({
   onExitComplete,
   onTracksChange,
   onDurationChange,
+  playbackMode: playbackModeProp,
+  onPlaybackModeChange,
   canvasIframeRef,
   applying = false,
   autoKeyframe: autoKeyframeProp,
@@ -174,6 +254,8 @@ export function MotionDock({
   livePlayheadRef,
   selectedTarget = null,
 }: MotionDockProps) {
+  const t = useT();
+
   // Controlled / uncontrolled open state.
   const [openInternal, setOpenInternal] = useState(false);
   const isOpen = openProp !== undefined ? openProp : openInternal;
@@ -218,6 +300,36 @@ export function MotionDock({
     },
     [autoKeyframe, onAutoKeyframeChange],
   );
+
+  // Playback mode (Loop / Once / Ping-pong). Controlled by the parent when
+  // provided; otherwise read from the stamp persisted in the tracks JSON.
+  // Cycling the button re-stamps the tracks through onTracksChange, so the
+  // mode persists via the parent's existing autosave without extra wiring.
+  const [playbackModeInternal, setPlaybackModeInternal] =
+    useState<MotionPlaybackMode | null>(null);
+  const playbackMode: MotionPlaybackMode =
+    playbackModeProp ??
+    readTimelinePlaybackMode(tracks) ??
+    playbackModeInternal ??
+    MOTION_DEFAULT_PLAYBACK_MODE;
+  const cyclePlaybackMode = useCallback(() => {
+    const index = PLAYBACK_MODES.findIndex((m) => m.mode === playbackMode);
+    const next = PLAYBACK_MODES[(index + 1) % PLAYBACK_MODES.length].mode;
+    setPlaybackModeInternal(next);
+    onPlaybackModeChange?.(next);
+    if (onTracksChange && tracks.length > 0) {
+      onTracksChange(withTimelinePlaybackMode(tracks, next));
+    }
+  }, [onPlaybackModeChange, onTracksChange, playbackMode, tracks]);
+
+  // Selected property row — the target of the toolbar's add-keyframe ◆
+  // button (Figma keys the selected track at the playhead).
+  const [selectedTrackKey, setSelectedTrackKey] = useState<string | null>(null);
+  const selectedTrack =
+    tracks.find((track) => trackKey(track) === selectedTrackKey) ?? null;
+
+  // Current-time field draft (null = displaying the live playhead).
+  const [timeDraft, setTimeDraft] = useState<string | null>(null);
   /** Internal high-frequency playhead update — does NOT notify the parent. */
   const setPlayheadLocal = useCallback(
     (next: number) => {
@@ -309,20 +421,40 @@ export function MotionDock({
     playStartRef.current = { wallMs: performance.now(), startT };
     setPlaying(true);
 
+    // Loop and ping-pong run until explicitly paused; once stops at the end
+    // (matching the compiled CSS's animation-iteration-count / -direction).
     const tick = (now: number) => {
       if (!playStartRef.current) return;
       const elapsed = now - playStartRef.current.wallMs;
-      const t = Math.min(1, playStartRef.current.startT + elapsed / durationMs);
+      const progressed = playStartRef.current.startT + elapsed / durationMs;
+      let t: number;
+      let done = false;
+      if (playbackMode === "loop") {
+        t = progressed % 1;
+      } else if (playbackMode === "ping-pong") {
+        const phase = progressed % 2;
+        t = phase <= 1 ? phase : 2 - phase;
+      } else {
+        t = Math.min(1, progressed);
+        done = progressed >= 1;
+      }
       setPlayheadLocal(t);
       sendPreview(t);
-      if (t < 1) {
+      if (!done) {
         playRafRef.current = requestAnimationFrame(tick);
       } else {
         stopPlayback();
       }
     };
     playRafRef.current = requestAnimationFrame(tick);
-  }, [durationMs, playhead, sendPreview, setPlayheadLocal, stopPlayback]);
+  }, [
+    durationMs,
+    playbackMode,
+    playhead,
+    sendPreview,
+    setPlayheadLocal,
+    stopPlayback,
+  ]);
 
   useEffect(() => {
     return () => {
@@ -414,16 +546,23 @@ export function MotionDock({
 
   const addKeyframe = useCallback(
     (track: MotionDockTrack) => {
-      // Seed the new keyframe with the track's interpolated value at the
-      // playhead (what the preview currently shows) — a hardcoded "0" is
-      // invalid CSS for transform/filter/color tracks and snaps the preview.
+      // Map the timeline playhead into the track's own span (tracks may be
+      // offset/scaled via delayMs/durationMs), then seed the new keyframe
+      // with the track's interpolated value at that local time (what the
+      // preview currently shows) — a hardcoded "0" is invalid CSS for
+      // transform/filter/color tracks and snaps the preview.
+      const localT = timelineTimeToTrackTime(
+        track,
+        playhead * durationMs,
+        durationMs,
+      );
       const sampled = sampleMotionKeyframesAt(
         track.keyframes,
-        playhead,
+        localT,
         defaultEase,
       );
       const newKf: MotionKeyframe = {
-        t: playhead,
+        t: localT,
         value: sampled || "0",
         ease: defaultEase,
       };
@@ -435,7 +574,7 @@ export function MotionDock({
         keyframes: upsertMotionKeyframeAtTime(tr.keyframes, newKf),
       }));
     },
-    [defaultEase, playhead, updateTrack],
+    [defaultEase, durationMs, playhead, updateTrack],
   );
 
   // ── Create a brand-new track (the "first track" path) ──────────────────────
@@ -462,14 +601,24 @@ export function MotionDock({
         // presets can target the same property, e.g. slide + scale are both
         // "transform").
         toast.info(
-          `A "${preset.property}" track already exists for ${label}. Edit its keyframes in the timeline instead.`,
+          t("designEditor.motion.trackExists", {
+            property: preset.property,
+            label,
+          }),
         );
         return;
       }
 
       const seeded = createMotionTrackFromPreset(nodeId, preset, defaultEase);
       const newTrack: MotionDockTrack = { ...seeded, label };
-      onTracksChange([...tracks, newTrack]);
+      // Figma parity: brand-new timelines default to Loop. Existing
+      // timelines keep whatever mode is already stamped/resolved.
+      const nextTracks =
+        tracks.length === 0
+          ? withTimelinePlaybackMode([newTrack], "loop")
+          : [...tracks, newTrack];
+      onTracksChange(nextTracks);
+      setSelectedTrackKey(trackKey(newTrack));
     },
     [defaultEase, onTracksChange, selectedTarget, tracks],
   );
@@ -537,15 +686,105 @@ export function MotionDock({
     [updateTrack],
   );
 
-  // ── Ruler tick marks ──────────────────────────────────────────────────────
+  // ── Layer span-bar gestures (drag to offset, edge-drag to scale) ─────────
+  // Given the layer's NEW span, remap every track of that layer
+  // proportionally from the OLD span so per-track relative offsets survive.
+  const updateLayerSpan = useCallback(
+    (nodeId: string, nextSpan: { startMs: number; durationMs: number }) => {
+      if (!onTracksChange) return;
+      const timingsByKey = new Map<
+        string,
+        { startMs: number; endMs: number; durationMs: number }
+      >();
+      for (const tr of tracks) {
+        if (tr.targetNodeId === nodeId) {
+          timingsByKey.set(trackKey(tr), getMotionTrackTiming(tr, durationMs));
+        }
+      }
+      if (timingsByKey.size === 0) return;
+      const timings = [...timingsByKey.values()];
+      const spanStart = Math.min(...timings.map((t) => t.startMs));
+      const spanEnd = Math.max(...timings.map((t) => t.endMs));
+      const spanDur = Math.max(1, spanEnd - spanStart);
+      const factor = Math.max(0.01, nextSpan.durationMs / spanDur);
+      onTracksChange(
+        tracks.map((tr) => {
+          const timing = timingsByKey.get(trackKey(tr));
+          if (!timing) return tr;
+          const startMs = Math.max(
+            0,
+            Math.round(
+              nextSpan.startMs + (timing.startMs - spanStart) * factor,
+            ),
+          );
+          const trackDur = Math.max(20, Math.round(timing.durationMs * factor));
+          const out: MotionDockTrack = { ...tr };
+          if (startMs > 0) out.delayMs = startMs;
+          else delete out.delayMs;
+          if (trackDur !== durationMs) out.durationMs = trackDur;
+          else delete out.durationMs;
+          return out;
+        }),
+      );
+    },
+    [durationMs, onTracksChange, tracks],
+  );
+
+  // ── Current-time field ────────────────────────────────────────────────────
+  const commitTimeDraft = useCallback(() => {
+    if (timeDraft === null) return;
+    const ms = parseInt(timeDraft, 10);
+    setTimeDraft(null);
+    if (isNaN(ms)) return;
+    const t = Math.max(0, Math.min(1, ms / durationMs));
+    stopPlayback();
+    setPlayheadLocal(t);
+    commitPlayhead();
+    sendPreview(t);
+  }, [
+    commitPlayhead,
+    durationMs,
+    sendPreview,
+    setPlayheadLocal,
+    stopPlayback,
+    timeDraft,
+  ]);
+
+  // ── Space plays/pauses while the dock has focus (Figma parity) ───────────
+  const handleDockKeyDown = useCallback(
+    (e: ReactKeyboardEvent<HTMLDivElement>) => {
+      if (e.code !== "Space") return;
+      const target = e.target as HTMLElement | null;
+      if (target?.closest("input, textarea, select, [contenteditable]")) {
+        return;
+      }
+      e.preventDefault();
+      if (playing) stopPlayback();
+      else startPlayback();
+    },
+    [playing, startPlayback, stopPlayback],
+  );
+
+  // ── Ruler tick marks (ms, nice steps — Figma-style ms ruler) ─────────────
   function rulerTicks(): { t: number; label: string }[] {
-    const count = 10;
-    return Array.from({ length: count + 1 }, (_, i) => {
-      const t = i / count;
-      const ms = Math.round(t * durationMs);
-      const s = (ms / 1000).toFixed(1);
-      return { t, label: `${s}s` };
-    });
+    const NICE_STEPS = [
+      10, 25, 50, 100, 200, 250, 500, 1000, 2000, 2500, 5000, 10000,
+    ];
+    // Plain loop (rather than Array#find with an inline arrow function) so a
+    // `<=` comparison never sits directly after a `>` character — the i18n
+    // raw-literal guard's regex heuristic treats `>...<` runs as JSX text.
+    let step = Math.ceil(durationMs / 10);
+    for (const candidate of NICE_STEPS) {
+      if (durationMs / candidate <= 10) {
+        step = candidate;
+        break;
+      }
+    }
+    const ticks: { t: number; label: string }[] = [];
+    for (let ms = 0; ms <= durationMs; ms += step) {
+      ticks.push({ t: ms / durationMs, label: formatMsTick(ms) });
+    }
+    return ticks;
   }
 
   // ── Group tracks by layer (nodeId) ────────────────────────────────────────
@@ -579,10 +818,14 @@ export function MotionDock({
       style={{ height: isOpen ? dockHeight : 0 }}
     >
       <div
-        aria-label="Motion dock"
+        aria-label={t("designEditor.motion.dockLabel")}
         aria-hidden={!isOpen ? true : undefined}
+        // Focusable so Space can play/pause while the dock is focused
+        // (Figma parity); -1 keeps it out of the tab order.
+        tabIndex={-1}
+        onKeyDown={handleDockKeyDown}
         className={cn(
-          "design-motion-dock absolute inset-x-0 bottom-0 z-40 flex min-h-0 transform-gpu flex-col overflow-hidden border-t bg-background select-none",
+          "design-motion-dock absolute inset-x-0 bottom-0 z-40 flex min-h-0 transform-gpu flex-col overflow-hidden border-t bg-background outline-none select-none",
           isOpen
             ? "translate-y-0 border-border opacity-100"
             : "translate-y-full border-transparent pointer-events-none",
@@ -605,7 +848,7 @@ export function MotionDock({
             type="button"
             className="-ml-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)]"
             onClick={() => setOpen(false)}
-            aria-label="Collapse motion dock"
+            aria-label={t("designEditor.motion.collapseDock")}
           >
             <IconChevronDown className="size-3.5" />
           </button>
@@ -620,7 +863,11 @@ export function MotionDock({
                   size="icon"
                   className="size-6 shrink-0"
                   onClick={playing ? stopPlayback : startPlayback}
-                  aria-label={playing ? "Pause" : "Play"}
+                  aria-label={
+                    playing
+                      ? t("designEditor.motion.pause")
+                      : t("designEditor.motion.play")
+                  }
                 >
                   {playing ? (
                     <IconPlayerPause className="size-3.5" />
@@ -630,7 +877,9 @@ export function MotionDock({
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="top">
-                {playing ? "Pause" : "Play"}
+                {playing
+                  ? t("designEditor.motion.pause")
+                  : t("designEditor.motion.play")}
               </TooltipContent>
             </Tooltip>
 
@@ -648,18 +897,74 @@ export function MotionDock({
                     commitPlayhead();
                     sendPreview(0);
                   }}
-                  aria-label="Reset playhead"
+                  aria-label={t("designEditor.motion.resetPlayhead")}
                 >
                   <IconPlayerStop className="size-3.5" />
                 </Button>
               </TooltipTrigger>
-              <TooltipContent side="top">Reset</TooltipContent>
+              <TooltipContent side="top">
+                {t("designEditor.motion.reset")}
+              </TooltipContent>
+            </Tooltip>
+
+            {/* Add keyframe at playhead (selected property row) */}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="inline-flex">
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-6 shrink-0"
+                    disabled={!selectedTrack}
+                    onClick={() => {
+                      if (selectedTrack) addKeyframe(selectedTrack);
+                    }}
+                    aria-label={t("designEditor.motion.addKeyframeAtPlayhead")}
+                  >
+                    <IconDiamondFilled className="size-3" />
+                  </Button>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="top">
+                {selectedTrack
+                  ? t("designEditor.motion.addKeyframeAtPlayheadForProperty", {
+                      property: selectedTrack.property,
+                    })
+                  : t("designEditor.motion.selectPropertyRowFirst")}
+              </TooltipContent>
             </Tooltip>
 
+            {/* Current time (ms) — click to jump the playhead */}
+            <div className="flex items-center gap-1 ml-1">
+              <Input
+                type="number"
+                min={0}
+                max={durationMs}
+                step={10}
+                value={timeDraft ?? String(Math.round(playhead * durationMs))}
+                onFocus={() =>
+                  setTimeDraft(String(Math.round(playhead * durationMs)))
+                }
+                onChange={(e) => setTimeDraft(e.target.value)}
+                onBlur={commitTimeDraft}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitTimeDraft();
+                    (e.target as HTMLInputElement).blur();
+                  }
+                }}
+                className="h-5 w-14 px-1 !text-[11px] md:!text-[11px]"
+                aria-label={t("designEditor.motion.currentTimeMs")}
+              />
+              <span className="text-[10px] text-muted-foreground">/</span>
+            </div>
+
             {/* Duration */}
             <div className="flex items-center gap-1 ml-1">
               <span className="text-[10px] text-muted-foreground">
-                Duration
+                {t("designEditor.motion.duration")}
               </span>
               <Input
                 type="number"
@@ -676,12 +981,42 @@ export function MotionDock({
                   }
                 }}
                 className="h-5 w-16 px-1 !text-[11px] md:!text-[11px]"
-                aria-label="Duration in ms"
+                aria-label={t("designEditor.motion.durationMs")}
               />
               <span className="text-[10px] text-muted-foreground">ms</span>
             </div>
 
-            {/* Add track — the "create first track" entry point. */}
+            {/* Playback mode — cycling button (Loop / Once / Ping-pong) */}
+            {(() => {
+              const current =
+                PLAYBACK_MODES.find((m) => m.mode === playbackMode) ??
+                PLAYBACK_MODES[0];
+              const ModeIcon = current.Icon;
+              const modeLabel = t(`designEditor.motion.${current.labelKey}`);
+              return (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="size-6 shrink-0"
+                      onClick={cyclePlaybackMode}
+                      aria-label={t("designEditor.motion.playbackMode", {
+                        mode: modeLabel,
+                      })}
+                    >
+                      <ModeIcon className="size-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    {t("designEditor.motion.playback", { mode: modeLabel })}
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })()}
+
+            {/* Add motion — the "create first track" entry point. */}
             <div className="ml-2">
               <AddTrackMenu
                 selectedTarget={selectedTarget}
@@ -702,13 +1037,15 @@ export function MotionDock({
                       autoKeyframe && "text-primary",
                     )}
                     onClick={() => setAutoKeyframe((v) => !v)}
-                    aria-label="Toggle auto-keyframe"
+                    aria-label={t("designEditor.motion.toggleAutoKeyframe")}
                     aria-pressed={autoKeyframe}
                   >
                     <IconBolt className="size-3.5" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent side="top">Auto-keyframe</TooltipContent>
+                <TooltipContent side="top">
+                  {t("designEditor.motion.autoKeyframe")}
+                </TooltipContent>
               </Tooltip>
 
               {applying ? (
@@ -716,13 +1053,15 @@ export function MotionDock({
                   <TooltipTrigger asChild>
                     <span
                       role="status"
-                      aria-label="Saving motion"
+                      aria-label={t("designEditor.motion.savingMotion")}
                       className="flex size-6 items-center justify-center rounded text-muted-foreground"
                     >
                       <IconRefresh className="size-3 animate-spin" />
                     </span>
                   </TooltipTrigger>
-                  <TooltipContent side="top">Saving motion</TooltipContent>
+                  <TooltipContent side="top">
+                    {t("designEditor.motion.savingMotion")}
+                  </TooltipContent>
                 </Tooltip>
               ) : null}
             </div>
@@ -748,11 +1087,11 @@ export function MotionDock({
                 {selectedTarget ? (
                   <>
                     <p className="!text-[11px] text-muted-foreground/70 leading-snug">
-                      Animate{" "}
+                      {t("designEditor.motion.emptyStateAnimate")}{" "}
                       <span className="font-medium text-foreground/80">
                         {selectedTarget.label}
                       </span>
-                      . Pick a property to add the first track.
+                      {t("designEditor.motion.emptyStatePickProperty")}
                     </p>
                     <AddTrackMenu
                       selectedTarget={selectedTarget}
@@ -762,8 +1101,7 @@ export function MotionDock({
                   </>
                 ) : (
                   <p className="!text-[11px] text-muted-foreground/70 leading-snug">
-                    Select an element on the canvas, then add a track to animate
-                    it.
+                    {t("designEditor.motion.emptyStateNoSelection")}
                   </p>
                 )}
               </div>
@@ -782,6 +1120,10 @@ export function MotionDock({
                     })
                   }
                   onAddKeyframe={(track) => addKeyframe(track)}
+                  selectedTrackKey={selectedTrackKey}
+                  onSelectTrack={(track) =>
+                    setSelectedTrackKey(trackKey(track))
+                  }
                 />
               ))
             )}
@@ -824,10 +1166,17 @@ export function MotionDock({
                   layer={layer}
                   expanded={expandedNodeIds.has(layer.nodeId)}
                   playhead={playhead}
+                  timelineDurationMs={durationMs}
+                  defaultEase={defaultEase}
+                  selectedTrackKey={selectedTrackKey}
+                  onSelectTrack={(track) =>
+                    setSelectedTrackKey(trackKey(track))
+                  }
                   onDeleteKeyframe={deleteKeyframe}
                   onMoveKeyframe={moveKeyframe}
                   onMoveKeyframeEnd={moveKeyframeEnd}
                   onEaseKeyframe={easeKeyframe}
+                  onLayerSpanChange={updateLayerSpan}
                 />
               ))}
 
@@ -862,16 +1211,21 @@ interface AddTrackMenuProps {
 }
 
 /**
- * Property-preset dropdown that creates a new motion track for the selected
- * element. Disabled (with a hint) when nothing is selected, which is the only
- * state where a first track cannot be created.
+ * "Add motion" dropdown — creates a new motion track for the selected
+ * element. Matches Figma Motion's submenu verbatim: Position / Scale /
+ * Rotation / Opacity directly, with the remaining keyframeable properties
+ * under a "More" submenu (Corner radius, Fill, Stroke paint, Stroke weight,
+ * Drop shadow). Disabled (with a hint) when nothing is selected, which is
+ * the only state where a first track cannot be created.
  */
 function AddTrackMenu({
   selectedTarget,
   onCreateTrack,
   variant = "toolbar",
 }: AddTrackMenuProps) {
+  const t = useT();
   const disabled = !selectedTarget;
+  const addMotionLabel = t("designEditor.motion.addMotion");
   const trigger =
     variant === "cta" ? (
       <Button
@@ -882,7 +1236,7 @@ function AddTrackMenu({
         disabled={disabled}
       >
         <IconPlus className="size-3.5" />
-        Add track
+        {addMotionLabel}
       </Button>
     ) : (
       <Button
@@ -893,7 +1247,7 @@ function AddTrackMenu({
         disabled={disabled}
       >
         <IconPlus className="size-3.5" />
-        Add track
+        {addMotionLabel}
       </Button>
     );
 
@@ -906,21 +1260,30 @@ function AddTrackMenu({
           <span className="inline-flex">{trigger}</span>
         </TooltipTrigger>
         <TooltipContent side="top">
-          Select an element on the canvas first
+          {t("designEditor.motion.selectElementFirst")}
         </TooltipContent>
       </Tooltip>
     );
   }
 
+  const primaryPresets = MOTION_PROPERTY_PRESETS.filter(
+    (preset) => preset.group === "primary",
+  );
+  const morePresets = MOTION_PROPERTY_PRESETS.filter(
+    (preset) => preset.group === "more",
+  );
+
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
       <DropdownMenuContent align="start" className="w-48 p-1">
         <DropdownMenuLabel className="truncate px-2 py-1 text-[10px] font-medium leading-none text-muted-foreground">
-          Animate “{selectedTarget.label}”
+          {t("designEditor.motion.animateLayer", {
+            label: selectedTarget.label,
+          })}
         </DropdownMenuLabel>
         <DropdownMenuSeparator className="my-1" />
-        {MOTION_PROPERTY_PRESETS.map((preset) => (
+        {primaryPresets.map((preset) => (
           <DropdownMenuItem
             key={`${preset.property}-${preset.label}`}
             className="h-7 px-2 text-[12px] leading-none"
@@ -929,6 +1292,22 @@ function AddTrackMenu({
             {preset.label}
           </DropdownMenuItem>
         ))}
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger className="h-7 px-2 text-[12px] leading-none">
+            {t("designEditor.motion.more")}
+          </DropdownMenuSubTrigger>
+          <DropdownMenuSubContent className="w-44 p-1">
+            {morePresets.map((preset) => (
+              <DropdownMenuItem
+                key={`${preset.property}-${preset.label}`}
+                className="h-7 px-2 text-[12px] leading-none"
+                onSelect={() => onCreateTrack(preset)}
+              >
+                {preset.label}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuSubContent>
+        </DropdownMenuSub>
       </DropdownMenuContent>
     </DropdownMenu>
   );
@@ -966,6 +1345,9 @@ interface LayerGroupProps {
   expanded: boolean;
   onToggleExpand: () => void;
   onAddKeyframe: (track: MotionDockTrack) => void;
+  /** Key of the selected property row (toolbar ◆ target). */
+  selectedTrackKey: string | null;
+  onSelectTrack: (track: MotionDockTrack) => void;
 }
 
 function LayerGroup({
@@ -973,7 +1355,10 @@ function LayerGroup({
   expanded,
   onToggleExpand,
   onAddKeyframe,
+  selectedTrackKey,
+  onSelectTrack,
 }: LayerGroupProps) {
+  const t = useT();
   return (
     <>
       {/* Layer header row */}
@@ -1003,13 +1388,23 @@ function LayerGroup({
         </span>
       </div>
 
-      {/* Property sub-rows */}
+      {/* Property sub-rows — click to select (toolbar ◆ keys the selection) */}
       {expanded &&
         layer.tracks.map((track) => (
           <div
             key={`${track.targetNodeId}-${track.property}`}
-            className="group flex items-center gap-1 pl-5 pr-2 hover:bg-accent/20"
+            className={cn(
+              "group flex items-center gap-1 pl-5 pr-2 cursor-pointer hover:bg-accent/20",
+              trackKey(track) === selectedTrackKey && "bg-accent/40",
+            )}
             style={{ height: ROW_HEIGHT }}
+            role="button"
+            tabIndex={0}
+            onClick={() => onSelectTrack(track)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") onSelectTrack(track);
+            }}
+            aria-pressed={trackKey(track) === selectedTrackKey}
           >
             <IconDiamond className="size-2.5 shrink-0 text-primary/70" />
             <span className="flex-1 truncate text-[10px] text-muted-foreground">
@@ -1026,13 +1421,13 @@ function LayerGroup({
                     e.stopPropagation();
                     onAddKeyframe(track);
                   }}
-                  aria-label="Add keyframe"
+                  aria-label={t("designEditor.motion.addKeyframe")}
                 >
                   <IconPlus className="size-3" />
                 </Button>
               </TooltipTrigger>
               <TooltipContent side="right">
-                Add keyframe at playhead
+                {t("designEditor.motion.addKeyframeAtPlayhead")}
               </TooltipContent>
             </Tooltip>
           </div>
@@ -1045,6 +1440,10 @@ interface LayerTrackRowsProps {
   layer: { nodeId: string; label: string; tracks: MotionDockTrack[] };
   expanded: boolean;
   playhead: number;
+  timelineDurationMs: number;
+  defaultEase: MotionEase;
+  selectedTrackKey: string | null;
+  onSelectTrack: (track: MotionDockTrack) => void;
   onDeleteKeyframe: (track: MotionDockTrack, index: number) => void;
   onMoveKeyframe: (track: MotionDockTrack, index: number, newT: number) => void;
   onMoveKeyframeEnd: (track: MotionDockTrack) => void;
@@ -1053,24 +1452,56 @@ interface LayerTrackRowsProps {
     index: number,
     ease: MotionEase,
   ) => void;
+  /** Layer span-bar gesture commit: drag to offset, edge-drag to scale. */
+  onLayerSpanChange: (
+    nodeId: string,
+    span: { startMs: number; durationMs: number },
+  ) => void;
 }
 
 function LayerTrackRows({
   layer,
   expanded,
   playhead: _playhead,
+  timelineDurationMs,
+  defaultEase,
+  selectedTrackKey,
+  onSelectTrack,
   onDeleteKeyframe,
   onMoveKeyframe,
   onMoveKeyframeEnd,
   onEaseKeyframe,
+  onLayerSpanChange,
 }: LayerTrackRowsProps) {
+  // Layer span = earliest track start … latest track end (Figma's parent
+  // layer bar). Dragging it offsets every track; edge handles scale them.
+  const timings = layer.tracks.map((track) =>
+    getMotionTrackTiming(track, timelineDurationMs),
+  );
+  const spanStartMs =
+    timings.length > 0 ? Math.min(...timings.map((t) => t.startMs)) : 0;
+  const spanEndMs =
+    timings.length > 0
+      ? Math.max(...timings.map((t) => t.endMs))
+      : timelineDurationMs;
+
   return (
     <>
-      {/* Layer header spacer row */}
+      {/* Layer header row: the draggable span bar */}
       <div
         className="relative border-b border-border/40"
         style={{ height: ROW_HEIGHT }}
-      />
+      >
+        {layer.tracks.length > 0 && (
+          <LayerSpanBar
+            spanStartMs={spanStartMs}
+            spanEndMs={spanEndMs}
+            timelineDurationMs={timelineDurationMs}
+            label={layer.label}
+            onSpanChange={(span) => onLayerSpanChange(layer.nodeId, span)}
+          />
+        )}
+      </div>
 
       {/* Property track rows */}
       {expanded &&
@@ -1078,6 +1509,10 @@ function LayerTrackRows({
           <TrackRow
             key={`${track.targetNodeId}-${track.property}`}
             track={track}
+            timelineDurationMs={timelineDurationMs}
+            defaultEase={defaultEase}
+            selected={trackKey(track) === selectedTrackKey}
+            onSelect={() => onSelectTrack(track)}
             onDeleteKeyframe={(index) => onDeleteKeyframe(track, index)}
             onMoveKeyframe={(index, newT) => onMoveKeyframe(track, index, newT)}
             onMoveKeyframeEnd={() => onMoveKeyframeEnd(track)}
@@ -1088,8 +1523,122 @@ function LayerTrackRows({
   );
 }
 
+// ─── Layer span bar (drag = offset, edge-drag = scale) ────────────────────────
+
+interface LayerSpanBarProps {
+  spanStartMs: number;
+  spanEndMs: number;
+  timelineDurationMs: number;
+  label: string;
+  onSpanChange: (span: { startMs: number; durationMs: number }) => void;
+}
+
+function LayerSpanBar({
+  spanStartMs,
+  spanEndMs,
+  timelineDurationMs,
+  label,
+  onSpanChange,
+}: LayerSpanBarProps) {
+  const t = useT();
+  const barRef = useRef<HTMLDivElement>(null);
+  const gesture = useRef<{
+    kind: "move" | "left" | "right";
+    startX: number;
+    startMs: number;
+    durMs: number;
+    pxPerMs: number;
+  } | null>(null);
+
+  const beginGesture = useCallback(
+    (e: ReactPointerEvent<HTMLElement>, kind: "move" | "left" | "right") => {
+      const row = barRef.current?.parentElement;
+      if (!row) return;
+      e.stopPropagation();
+      const rect = row.getBoundingClientRect();
+      if (rect.width <= 0) return;
+      gesture.current = {
+        kind,
+        startX: e.clientX,
+        startMs: spanStartMs,
+        durMs: Math.max(1, spanEndMs - spanStartMs),
+        pxPerMs: rect.width / timelineDurationMs,
+      };
+      (e.target as Element).setPointerCapture(e.pointerId);
+    },
+    [spanEndMs, spanStartMs, timelineDurationMs],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: ReactPointerEvent<HTMLElement>) => {
+      const g = gesture.current;
+      if (!g) return;
+      const deltaMs = (e.clientX - g.startX) / g.pxPerMs;
+      if (g.kind === "move") {
+        const maxStart = Math.max(0, timelineDurationMs - g.durMs);
+        const startMs = Math.min(Math.max(0, g.startMs + deltaMs), maxStart);
+        onSpanChange({ startMs, durationMs: g.durMs });
+      } else if (g.kind === "right") {
+        const durationMs = Math.max(
+          50,
+          Math.min(g.durMs + deltaMs, timelineDurationMs - g.startMs),
+        );
+        onSpanChange({ startMs: g.startMs, durationMs });
+      } else {
+        const endMs = g.startMs + g.durMs;
+        const startMs = Math.max(0, Math.min(g.startMs + deltaMs, endMs - 50));
+        onSpanChange({ startMs, durationMs: endMs - startMs });
+      }
+    },
+    [onSpanChange, timelineDurationMs],
+  );
+
+  const endGesture = useCallback(() => {
+    gesture.current = null;
+  }, []);
+
+  const leftPct = (spanStartMs / timelineDurationMs) * 100;
+  const widthPct = Math.max(
+    0.5,
+    ((spanEndMs - spanStartMs) / timelineDurationMs) * 100,
+  );
+
+  return (
+    <div
+      ref={barRef}
+      className="group absolute top-1/2 h-4 -translate-y-1/2 cursor-grab active:cursor-grabbing rounded-sm bg-primary/20 hover:bg-primary/30 border border-primary/40"
+      style={{ left: `${leftPct}%`, width: `${widthPct}%` }}
+      onPointerDown={(e) => beginGesture(e, "move")}
+      onPointerMove={handlePointerMove}
+      onPointerUp={endGesture}
+      onPointerCancel={endGesture}
+      role="slider"
+      aria-label={t("designEditor.motion.layerAnimationSpan", { label })}
+      aria-valuemin={0}
+      aria-valuemax={timelineDurationMs}
+      aria-valuenow={Math.round(spanStartMs)}
+      aria-valuetext={`${Math.round(spanStartMs)}ms – ${Math.round(spanEndMs)}ms`}
+      tabIndex={-1}
+    >
+      {/* Edge handles: scale the layer's animations */}
+      <div
+        className="absolute left-0 top-0 h-full w-1.5 cursor-ew-resize rounded-l-sm bg-primary/50 opacity-0 group-hover:opacity-100"
+        onPointerDown={(e) => beginGesture(e, "left")}
+      />
+      <div
+        className="absolute right-0 top-0 h-full w-1.5 cursor-ew-resize rounded-r-sm bg-primary/50 opacity-0 group-hover:opacity-100"
+        onPointerDown={(e) => beginGesture(e, "right")}
+      />
+    </div>
+  );
+}
+
 interface TrackRowProps {
   track: MotionDockTrack;
+  timelineDurationMs: number;
+  defaultEase: MotionEase;
+  selected: boolean;
+  onSelect: () => void;
   onDeleteKeyframe: (index: number) => void;
   onMoveKeyframe: (index: number, newT: number) => void;
   onMoveKeyframeEnd: () => void;
@@ -1098,12 +1647,23 @@ interface TrackRowProps {
 
 function TrackRow({
   track,
+  timelineDurationMs,
+  defaultEase,
+  selected,
+  onSelect,
   onDeleteKeyframe,
   onMoveKeyframe,
   onMoveKeyframeEnd,
   onEaseKeyframe,
 }: TrackRowProps) {
   const rowRef = useRef<HTMLDivElement>(null);
+  // The track's own span within the timeline (delayMs/durationMs offsets).
+  // Keyframe t is normalised to THIS span; positions on the ruler are
+  // (startMs + t * span) / timelineDurationMs.
+  const timing = getMotionTrackTiming(track, timelineDurationMs);
+  const fractionFor = (kfT: number) =>
+    (timing.startMs + kfT * timing.durationMs) / timelineDurationMs;
+
   // Identify the dragged keyframe by its INDEX in track.keyframes, not object
   // identity: the parent replaces keyframe objects on every move (immutable
   // update), so a captured object reference goes stale after the first move
@@ -1122,6 +1682,7 @@ function TrackRow({
       kf: MotionKeyframe,
     ) => {
       e.stopPropagation();
+      onSelect();
       dragging.current = {
         index,
         startX: e.clientX,
@@ -1130,7 +1691,7 @@ function TrackRow({
       };
       (e.target as Element).setPointerCapture(e.pointerId);
     },
-    [],
+    [onSelect],
   );
 
   const handlePointerMove = useCallback(
@@ -1138,12 +1699,13 @@ function TrackRow({
       if (!dragging.current || !rowRef.current) return;
       const rect = rowRef.current.getBoundingClientRect();
       const dx = e.clientX - dragging.current.startX;
-      const dt = dx / rect.width;
+      // Pixel delta → timeline fraction → track-local time delta.
+      const dt = (dx / rect.width) * (timelineDurationMs / timing.durationMs);
       const newT = Math.max(0, Math.min(1, dragging.current.startT + dt));
       dragging.current.moved = true;
       onMoveKeyframe(dragging.current.index, newT);
     },
-    [onMoveKeyframe],
+    [onMoveKeyframe, timelineDurationMs, timing.durationMs],
   );
 
   const handlePointerUp = useCallback(() => {
@@ -1154,11 +1716,22 @@ function TrackRow({
     if (wasMoved) onMoveKeyframeEnd();
   }, [onMoveKeyframeEnd]);
 
+  // Segments connect consecutive keyframes; clicking one opens the easing
+  // panel for the transition (stored on the LEAVING keyframe, CSS-style).
+  const orderedIndices = track.keyframes
+    .map((kf, index) => ({ t: kf.t, index }))
+    .sort((a, b) => a.t - b.t)
+    .map((entry) => entry.index);
+
   return (
     <div
       ref={rowRef}
-      className="relative border-b border-border/30"
+      className={cn(
+        "relative border-b border-border/30",
+        selected && "bg-accent/20",
+      )}
       style={{ height: ROW_HEIGHT }}
+      onClick={onSelect}
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}
       onPointerCancel={handlePointerUp}
@@ -1166,14 +1739,34 @@ function TrackRow({
       {/* Track baseline */}
       <div className="absolute inset-y-1/2 left-0 right-0 h-px bg-border/50" />
 
+      {/* Easing segments between consecutive keyframes */}
+      {orderedIndices.slice(0, -1).map((kfIndex, order) => {
+        const from = track.keyframes[kfIndex];
+        const to = track.keyframes[orderedIndices[order + 1]];
+        if (!from || !to) return null;
+        const left = fractionFor(from.t);
+        const width = Math.max(0, fractionFor(to.t) - left);
+        return (
+          <EasingSegment
+            key={`segment-${kfIndex}`}
+            left={left}
+            width={width}
+            ease={from.ease}
+            defaultEase={defaultEase}
+            onEaseChange={(ease) => onEaseKeyframe(kfIndex, ease)}
+          />
+        );
+      })}
+
       {/* Keyframe diamonds */}
       {track.keyframes.map((kf, i) => (
         <KeyframeDiamond
           key={i}
           kf={kf}
+          leftFraction={fractionFor(kf.t)}
+          timeMs={Math.round(timing.startMs + kf.t * timing.durationMs)}
           onPointerDown={(e) => handleDiamondPointerDown(e, i, kf)}
           onDelete={() => onDeleteKeyframe(i)}
-          onEaseChange={(ease) => onEaseKeyframe(i, ease)}
         />
       ))}
     </div>
@@ -1182,27 +1775,32 @@ function TrackRow({
 
 interface KeyframeDiamondProps {
   kf: MotionKeyframe;
+  /** Horizontal position as a fraction of the whole timeline (offset-aware). */
+  leftFraction: number;
+  /** Absolute keyframe time on the timeline, ms (for the tooltip). */
+  timeMs: number;
   onPointerDown: (e: ReactPointerEvent<SVGSVGElement>) => void;
   onDelete: () => void;
-  onEaseChange: (ease: MotionEase) => void;
 }
 
+/**
+ * Draggable keyframe diamond. Easing is edited on the SEGMENT between two
+ * diamonds (click the connecting bar), matching Figma Motion.
+ */
 function KeyframeDiamond({
   kf,
+  leftFraction,
+  timeMs,
   onPointerDown,
   onDelete,
-  onEaseChange,
 }: KeyframeDiamondProps) {
+  const t = useT();
   const [hovered, setHovered] = useState(false);
-  const currentEase = kf.ease ?? "ease";
-  const currentPreset = EASE_PRESETS.find(
-    (preset) => preset.value === currentEase,
-  );
 
   return (
     <div
       className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 group"
-      style={{ left: `${kf.t * 100}%` }}
+      style={{ left: `${leftFraction * 100}%` }}
     >
       <Tooltip>
         <TooltipTrigger asChild>
@@ -1214,7 +1812,7 @@ function KeyframeDiamond({
             onPointerDown={onPointerDown}
             onPointerEnter={() => setHovered(true)}
             onPointerLeave={() => setHovered(false)}
-            aria-label={`Keyframe at ${Math.round(kf.t * 100)}%`}
+            aria-label={t("designEditor.motion.keyframeAt", { ms: timeMs })}
           >
             <rect
               x={1}
@@ -1238,53 +1836,476 @@ function KeyframeDiamond({
           className="flex items-center gap-1 text-[10px]"
         >
           <span>
-            {Math.round(kf.t * 100)}% — {kf.value} —{" "}
-            {currentPreset?.label ?? currentEase}
+            {timeMs}ms — {kf.value}
           </span>
           <button
             type="button"
             className="ml-1 text-destructive hover:text-destructive/80"
             onClick={onDelete}
-            aria-label="Delete keyframe"
+            aria-label={t("designEditor.motion.deleteKeyframe")}
           >
             <IconTrash className="size-3" />
           </button>
         </TooltipContent>
       </Tooltip>
+    </div>
+  );
+}
+
+// ─── Segment easing (click the connector between two keyframes) ──────────────
+
+interface EasingSegmentProps {
+  /** Left edge as a fraction of the timeline. */
+  left: number;
+  /** Width as a fraction of the timeline. */
+  width: number;
+  /** The LEAVING keyframe's ease (undefined = timeline default). */
+  ease: MotionEase | undefined;
+  defaultEase: MotionEase;
+  onEaseChange: (ease: MotionEase) => void;
+}
+
+/**
+ * The clickable bar between two keyframe diamonds. Opens the easing panel
+ * (Curve / Spring tabs) for the transition into the next keyframe — matching
+ * Figma Motion's "click the connecting line" flow.
+ */
+function EasingSegment({
+  left,
+  width,
+  ease,
+  defaultEase,
+  onEaseChange,
+}: EasingSegmentProps) {
+  const t = useT();
+  const effective = ease ?? defaultEase;
+  const effectiveLabel = easeLabel(effective, t);
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="absolute top-1/2 h-1.5 -translate-y-1/2 cursor-pointer rounded-full bg-primary/25 hover:bg-primary/50 data-[state=open]:bg-primary/60"
+          style={{
+            left: `${left * 100}%`,
+            width: `${width * 100}%`,
+            minWidth: 8,
+          }}
+          onPointerDown={(e) => e.stopPropagation()}
+          aria-label={t("designEditor.motion.segmentEasing", {
+            ease: effectiveLabel,
+          })}
+          title={effectiveLabel}
+        />
+      </PopoverTrigger>
+      <PopoverContent
+        side="top"
+        align="center"
+        className="w-60 p-2"
+        onPointerDown={(e) => e.stopPropagation()}
+      >
+        <EasingPanel ease={effective} onChange={onEaseChange} />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+// ─── Easing panel (Curve / Spring tabs) ───────────────────────────────────────
+
+interface EasingPanelProps {
+  ease: MotionEase;
+  onChange: (ease: MotionEase) => void;
+}
+
+/**
+ * Figma-Motion-parity easing editor:
+ * - Curve tab: Hold, Linear, Ease in/out variants, back curves, and Custom
+ *   bezier with editable x1,y1,x2,y2 + a draggable curve editor.
+ * - Spring tab: Gentle / Quick / Bouncy / Slow presets and Custom spring
+ *   with a single Bounce control (0–1, default 0.25).
+ */
+function EasingPanel({ ease, onChange }: EasingPanelProps) {
+  const t = useT();
+  const easeStr = String(ease);
+  const spring = parseSpringToken(easeStr);
+  const [tab, setTab] = useState<"curve" | "spring">(
+    spring ? "spring" : "curve",
+  );
+
+  const isCurvePreset = MOTION_CURVE_PRESETS.some(
+    (preset) => preset.value === easeStr,
+  );
+  const bezierMatch = /^cubic-bezier\(([^)]+)\)$/.exec(easeStr);
+  const bezierPoints: [number, number, number, number] = (() => {
+    if (bezierMatch) {
+      const parts = bezierMatch[1].split(",").map((part) => parseFloat(part));
+      if (parts.length === 4 && parts.every((n) => Number.isFinite(n))) {
+        return [parts[0], parts[1], parts[2], parts[3]];
+      }
+    }
+    return [0.42, 0, 0.58, 1];
+  })();
+  const isCustomBezier = bezierMatch !== null && !isCurvePreset;
+
+  const springPreset = MOTION_SPRING_PRESETS.find(
+    (preset) => preset.value === easeStr,
+  );
+  const isCustomSpring = spring !== null && !springPreset;
+  const bounce = spring?.bounce ?? MOTION_SPRING_DEFAULT_BOUNCE;
+  const settle = spring?.settle ?? 1;
+
+  const itemClass = (active: boolean) =>
+    cn(
+      "flex h-6 w-full cursor-pointer items-center gap-1 rounded px-2 text-left text-[11px] leading-none hover:bg-accent",
+      active && "font-medium",
+    );
+  const checkClass = (active: boolean) =>
+    cn("size-3 shrink-0", active ? "opacity-100" : "opacity-0");
 
-      {/* Easing picker — appears under the diamond on hover. */}
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
+  return (
+    <div className="flex flex-col gap-2">
+      {/* Pill tab switch: Curve | Spring */}
+      <div className="flex gap-0.5 rounded-md bg-muted p-0.5">
+        {(
+          [
+            ["curve", t("designEditor.motion.curveTab")],
+            ["spring", t("designEditor.motion.springTab")],
+          ] as const
+        ).map(([key, label]) => (
           <button
+            key={key}
             type="button"
-            className="absolute left-1/2 top-full flex size-3 -translate-x-1/2 cursor-pointer items-center justify-center rounded-sm text-muted-foreground opacity-0 transition-opacity hover:bg-accent hover:text-foreground group-hover:opacity-100 data-[state=open]:opacity-100"
-            aria-label={`Change easing (currently ${currentPreset?.label ?? currentEase})`}
+            className={cn(
+              "flex-1 cursor-pointer rounded px-2 py-1 text-[11px] leading-none",
+              tab === key
+                ? "bg-background font-medium shadow-sm"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+            onClick={() => setTab(key)}
+            aria-pressed={tab === key}
           >
-            <IconChevronDown className="size-2.5" />
+            {label}
           </button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="w-40 p-1">
-          <DropdownMenuLabel className="px-2 py-1 text-[10px] font-medium leading-none text-muted-foreground">
-            Easing
-          </DropdownMenuLabel>
-          <DropdownMenuSeparator className="my-1" />
-          {EASE_PRESETS.map((preset) => (
-            <DropdownMenuItem
-              key={preset.value}
-              className="h-7 px-2 text-[12px] leading-none"
-              onSelect={() => onEaseChange(preset.value)}
+        ))}
+      </div>
+
+      {tab === "curve" ? (
+        <div className="flex flex-col gap-2">
+          <div className="flex flex-col">
+            {MOTION_CURVE_PRESETS.map((preset) => (
+              <button
+                key={preset.label}
+                type="button"
+                className={itemClass(preset.value === easeStr)}
+                onClick={() => onChange(preset.value)}
+              >
+                <IconCheck className={checkClass(preset.value === easeStr)} />
+                {preset.label}
+              </button>
+            ))}
+            <button
+              type="button"
+              className={itemClass(isCustomBezier)}
+              onClick={() =>
+                onChange(
+                  `cubic-bezier(${bezierPoints
+                    .map((n) => Math.round(n * 100) / 100)
+                    .join(", ")})`,
+                )
+              }
             >
-              <IconCheck
-                className={cn(
-                  "mr-1 size-3",
-                  preset.value === currentEase ? "opacity-100" : "opacity-0",
-                )}
+              <IconCheck className={checkClass(isCustomBezier)} />
+              {t("designEditor.motion.customBezier")}
+            </button>
+          </div>
+          {isCustomBezier && (
+            <CurveEditor
+              value={bezierPoints}
+              onChange={(points) =>
+                onChange(
+                  `cubic-bezier(${points
+                    .map((n) => Math.round(n * 100) / 100)
+                    .join(", ")})`,
+                )
+              }
+            />
+          )}
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          <div className="flex flex-col">
+            {MOTION_SPRING_PRESETS.map((preset) => (
+              <button
+                key={preset.label}
+                type="button"
+                className={itemClass(preset.value === easeStr)}
+                onClick={() => onChange(preset.value)}
+              >
+                <IconCheck className={checkClass(preset.value === easeStr)} />
+                {preset.label}
+              </button>
+            ))}
+            <button
+              type="button"
+              className={itemClass(isCustomSpring)}
+              onClick={() =>
+                onChange(
+                  springToken({
+                    bounce: MOTION_SPRING_DEFAULT_BOUNCE,
+                    settle: 1,
+                  }),
+                )
+              }
+            >
+              <IconCheck className={checkClass(isCustomSpring)} />
+              {t("designEditor.motion.customSpring")}
+            </button>
+          </div>
+          {isCustomSpring && (
+            <div className="flex flex-col gap-1 px-1">
+              <div className="flex items-center justify-between">
+                <span className="text-[10px] text-muted-foreground">
+                  {t("designEditor.motion.bounce")}
+                </span>
+                <span className="text-[10px] tabular-nums">
+                  {bounce.toFixed(2)}
+                </span>
+              </div>
+              <Slider
+                value={[bounce]}
+                min={0}
+                max={1}
+                step={0.01}
+                onValueChange={(values) =>
+                  onChange(springToken({ bounce: values[0] ?? bounce, settle }))
+                }
+                aria-label={t("designEditor.motion.bounce")}
               />
-              {preset.label}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
+            </div>
+          )}
+          {spring !== null && (
+            <SpringCurvePreview bounce={bounce} settle={settle} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Custom bezier curve editor (draggable control points) ────────────────────
+
+const CURVE_W = 216;
+const CURVE_H = 132;
+const CURVE_PAD = 10;
+// Vertical view range: y ∈ [-0.25, 1.25] so overshoot handles stay visible.
+const CURVE_Y_MIN = -0.25;
+const CURVE_Y_MAX = 1.25;
+
+interface CurveEditorProps {
+  value: [number, number, number, number];
+  onChange: (value: [number, number, number, number]) => void;
+}
+
+function CurveEditor({ value, onChange }: CurveEditorProps) {
+  const t = useT();
+  const [x1, y1, x2, y2] = value;
+  const svgRef = useRef<SVGSVGElement>(null);
+  const draggingHandle = useRef<1 | 2 | null>(null);
+
+  const xPx = (x: number) => CURVE_PAD + x * (CURVE_W - 2 * CURVE_PAD);
+  const yPx = (y: number) =>
+    CURVE_PAD +
+    ((CURVE_Y_MAX - y) / (CURVE_Y_MAX - CURVE_Y_MIN)) *
+      (CURVE_H - 2 * CURVE_PAD);
+
+  const fromEvent = (e: ReactPointerEvent<SVGSVGElement>) => {
+    const rect = svgRef.current?.getBoundingClientRect();
+    if (!rect) return null;
+    const px = ((e.clientX - rect.left) / rect.width) * CURVE_W;
+    const py = ((e.clientY - rect.top) / rect.height) * CURVE_H;
+    // CSS requires x control points in [0, 1]; y may overshoot.
+    const x = Math.max(
+      0,
+      Math.min(1, (px - CURVE_PAD) / (CURVE_W - 2 * CURVE_PAD)),
+    );
+    const y =
+      CURVE_Y_MAX -
+      ((py - CURVE_PAD) / (CURVE_H - 2 * CURVE_PAD)) *
+        (CURVE_Y_MAX - CURVE_Y_MIN);
+    return [x, Math.max(-1, Math.min(2, y))] as const;
+  };
+
+  const handleMove = (e: ReactPointerEvent<SVGSVGElement>) => {
+    if (!draggingHandle.current) return;
+    const point = fromEvent(e);
+    if (!point) return;
+    onChange(
+      draggingHandle.current === 1
+        ? [point[0], point[1], x2, y2]
+        : [x1, y1, point[0], point[1]],
+    );
+  };
+
+  const numberField = (
+    label: string,
+    fieldValue: number,
+    apply: (n: number) => [number, number, number, number],
+  ) => (
+    <label className="flex flex-col items-stretch gap-0.5">
+      <span className="text-center text-[9px] text-muted-foreground">
+        {label}
+      </span>
+      <Input
+        type="number"
+        step={0.01}
+        value={String(Math.round(fieldValue * 100) / 100)}
+        onChange={(e) => {
+          const n = parseFloat(e.target.value);
+          if (Number.isFinite(n)) onChange(apply(n));
+        }}
+        className="h-5 px-1 !text-[10px] md:!text-[10px]"
+        aria-label={label}
+      />
+    </label>
+  );
+
+  return (
+    <div className="flex flex-col gap-1">
+      <svg
+        ref={svgRef}
+        width="100%"
+        viewBox={`0 0 ${CURVE_W} ${CURVE_H}`}
+        className="rounded border border-border bg-muted/40 touch-none"
+        onPointerMove={handleMove}
+        onPointerUp={() => (draggingHandle.current = null)}
+        onPointerCancel={() => (draggingHandle.current = null)}
+        role="application"
+        aria-label={t("designEditor.motion.bezierCurveEditor")}
+      >
+        {/* Unit box (0..1) */}
+        <rect
+          x={xPx(0)}
+          y={yPx(1)}
+          width={xPx(1) - xPx(0)}
+          height={yPx(0) - yPx(1)}
+          className="fill-transparent stroke-border"
+          strokeDasharray="3 3"
+        />
+        {/* Handle arms */}
+        <line
+          x1={xPx(0)}
+          y1={yPx(0)}
+          x2={xPx(Math.max(0, Math.min(1, x1)))}
+          y2={yPx(y1)}
+          className="stroke-primary/50"
+        />
+        <line
+          x1={xPx(1)}
+          y1={yPx(1)}
+          x2={xPx(Math.max(0, Math.min(1, x2)))}
+          y2={yPx(y2)}
+          className="stroke-primary/50"
+        />
+        {/* The curve itself */}
+        <path
+          d={`M ${xPx(0)} ${yPx(0)} C ${xPx(Math.max(0, Math.min(1, x1)))} ${yPx(y1)}, ${xPx(Math.max(0, Math.min(1, x2)))} ${yPx(y2)}, ${xPx(1)} ${yPx(1)}`}
+          className="fill-none stroke-primary"
+          strokeWidth={1.5}
+        />
+        {/* Draggable control points */}
+        <circle
+          cx={xPx(Math.max(0, Math.min(1, x1)))}
+          cy={yPx(y1)}
+          r={5}
+          className="cursor-grab fill-primary stroke-background active:cursor-grabbing"
+          onPointerDown={(e) => {
+            draggingHandle.current = 1;
+            (e.target as Element).setPointerCapture(e.pointerId);
+          }}
+        />
+        <circle
+          cx={xPx(Math.max(0, Math.min(1, x2)))}
+          cy={yPx(y2)}
+          r={5}
+          className="cursor-grab fill-primary stroke-background active:cursor-grabbing"
+          onPointerDown={(e) => {
+            draggingHandle.current = 2;
+            (e.target as Element).setPointerCapture(e.pointerId);
+          }}
+        />
+      </svg>
+      <div className="grid grid-cols-4 gap-1">
+        {numberField("x1", x1, (n) => [
+          Math.max(0, Math.min(1, n)),
+          y1,
+          x2,
+          y2,
+        ])}
+        {numberField("y1", y1, (n) => [x1, n, x2, y2])}
+        {numberField("x2", x2, (n) => [
+          x1,
+          y1,
+          Math.max(0, Math.min(1, n)),
+          y2,
+        ])}
+        {numberField("y2", y2, (n) => [x1, y1, x2, n])}
+      </div>
     </div>
   );
 }
+
+// ─── Spring curve preview ─────────────────────────────────────────────────────
+
+function SpringCurvePreview({
+  bounce,
+  settle,
+}: {
+  bounce: number;
+  settle: number;
+}) {
+  const t = useT();
+  const points: string[] = [];
+  const samples = 72;
+  for (let i = 0; i <= samples; i++) {
+    const x = i / samples;
+    const y = sampleSpring({ bounce, settle }, x);
+    points.push(
+      `${(CURVE_PAD + x * (CURVE_W - 2 * CURVE_PAD)).toFixed(1)},${(
+        CURVE_PAD +
+        ((CURVE_Y_MAX - y) / (CURVE_Y_MAX - CURVE_Y_MIN)) *
+          (CURVE_H - 2 * CURVE_PAD)
+      ).toFixed(1)}`,
+    );
+  }
+  return (
+    <svg
+      width="100%"
+      viewBox={`0 0 ${CURVE_W} ${CURVE_H}`}
+      className="rounded border border-border bg-muted/40"
+      aria-label={t("designEditor.motion.springCurvePreview")}
+      role="img"
+    >
+      <line
+        x1={CURVE_PAD}
+        y1={
+          CURVE_PAD +
+          ((CURVE_Y_MAX - 1) / (CURVE_Y_MAX - CURVE_Y_MIN)) *
+            (CURVE_H - 2 * CURVE_PAD)
+        }
+        x2={CURVE_W - CURVE_PAD}
+        y2={
+          CURVE_PAD +
+          ((CURVE_Y_MAX - 1) / (CURVE_Y_MAX - CURVE_Y_MIN)) *
+            (CURVE_H - 2 * CURVE_PAD)
+        }
+        className="stroke-border"
+        strokeDasharray="3 3"
+      />
+      <polyline
+        points={points.join(" ")}
+        className="fill-none stroke-primary"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+}