experimental: Live animation setting update (#5005)

## Description

1. What is this PR about (link the issue and add a short description)

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory

Author: istarkov

apps/builder/app/builder/features/inspector/inspector.tsx

@@ -31,7 +31,11 @@ import { MetaIcon } from "~/builder/shared/meta-icon";
 import { getInstanceLabel } from "~/shared/instance-utils";
 import { BindingPopoverProvider } from "~/builder/shared/binding-popover";
 import { $activeInspectorPanel } from "~/builder/shared/nano-states";
-import { $selectedInstance, $selectedPage } from "~/shared/awareness";
+import {
+  $selectedInstance,
+  $selectedInstanceKey,
+  $selectedPage,
+} from "~/shared/awareness";
 
 const InstanceInfo = ({ instance }: { instance: Instance }) => {
   const metas = useStore($registeredComponentMetas);
@@ -64,6 +68,7 @@ const $isDragging = computed([$dragAndDropState], (state) => state.isDragging);
 
 export const Inspector = ({ navigatorLayout }: InspectorProps) => {
   const selectedInstance = useStore($selectedInstance);
+  const selectedInstanceKey = useStore($selectedInstanceKey);
   const tabsRef = useRef<HTMLDivElement>(null);
   const isDragging = useStore($isDragging);
   const metas = useStore($registeredComponentMetas);
@@ -75,7 +80,7 @@ export const Inspector = ({ navigatorLayout }: InspectorProps) => {
     return <NavigatorTree />;
   }
 
-  if (selectedInstance === undefined) {
+  if (selectedInstance === undefined || selectedInstanceKey === undefined) {
     return (
       <Flex css={{ p: theme.spacing[9] }}>
         {/* @todo: use this space for something more usefull: a-la figma's no instance selected sate, maybe create an issue with a more specific proposal? */}
@@ -196,6 +201,7 @@ export const Inspector = ({ navigatorLayout }: InspectorProps) => {
                     // Re-render when instance changes
                     key={selectedInstance.id}
                     selectedInstance={selectedInstance}
+                    selectedInstanceKey={selectedInstanceKey}
                   />
                 </ScrollArea>
               </PanelTabsContent>

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-keyframes.tsx

@@ -128,7 +128,10 @@ const Keyframe = ({
 }: {
   value: AnimationKeyframe;
   offsetPlaceholder: number;
-  onChange: (value: AnimationKeyframe | undefined) => void;
+  onChange: (
+    value: AnimationKeyframe | undefined,
+    isEphemeral: boolean
+  ) => void;
 }) => {
   const ids = useIds(["offset"]);
   const apiRef = useRef<CssEditorApi>();
@@ -164,11 +167,11 @@ const Keyframe = ({
           value={value.offset}
           placeholder={offsetPlaceholder}
           onChange={(offset) => {
-            onChange({ ...value, offset });
+            onChange({ ...value, offset }, false);
           }}
         />
         <Tooltip content="Remove keyframe">
-          <IconButton onClick={() => onChange(undefined)}>
+          <IconButton onClick={() => onChange(undefined, false)}>
             <MinusIcon />
           </IconButton>
         </Tooltip>
@@ -185,24 +188,24 @@ const Keyframe = ({
             for (const [property, value] of addedStyleMap) {
               styles[property] = value;
             }
-            onChange({ ...value, styles });
+            onChange({ ...value, styles }, false);
           }}
           onDeleteProperty={(property, options = {}) => {
             if (options.isEphemeral === true) {
               return;
             }
             const styles = { ...value.styles };
             delete styles[property];
-            onChange({ ...value, styles });
+            onChange({ ...value, styles }, false);
           }}
           onSetProperty={(property) => {
-            return (newValue) => {
+            return (newValue, options) => {
               const styles = { ...value.styles, [property]: newValue };
-              onChange({ ...value, styles });
+              onChange({ ...value, styles }, options?.isEphemeral ?? false);
             };
           }}
           onDeleteAllDeclarations={() => {
-            onChange({ ...value, styles: {} });
+            onChange({ ...value, styles: {} }, false);
           }}
         />
       </Grid>
@@ -226,7 +229,8 @@ export const Keyframes = ({
   onChange,
 }: {
   value: AnimationKeyframe[];
-  onChange: (value: AnimationKeyframe[]) => void;
+  onChange: ((value: undefined, isEphemeral: true) => void) &
+    ((value: AnimationKeyframe[], isEphemeral: boolean) => void);
 }) => {
   // To preserve focus on children swap
   const keyRefs = useRef(
@@ -251,7 +255,10 @@ export const Keyframes = ({
             tabIndex={0}
             prefix={<PlusIcon />}
             onClick={() => {
-              onChange([...keyframes, { offset: undefined, styles: {} }]);
+              onChange(
+                [...keyframes, { offset: undefined, styles: {} }],
+                false
+              );
               keyRefs.current = [...keyRefs.current, keyframes.length];
             }}
           />
@@ -268,11 +275,16 @@ export const Keyframes = ({
                 key={keyRefs.current[index]}
                 value={value}
                 offsetPlaceholder={offsets[index]}
-                onChange={(newValue) => {
+                onChange={(newValue, isEphemeral) => {
+                  if (newValue === undefined && isEphemeral) {
+                    onChange(undefined, true);
+                    return;
+                  }
+
                   if (newValue === undefined) {
                     const newValues = [...keyframes];
                     newValues.splice(index, 1);
-                    onChange(newValues);
+                    onChange(newValues, isEphemeral);
                     return;
                   }
 
@@ -281,7 +293,7 @@ export const Keyframes = ({
 
                   const { offset } = newValue;
                   if (offset === undefined) {
-                    onChange(newValues);
+                    onChange(newValues, isEphemeral);
                     return;
                   }
 
@@ -293,7 +305,7 @@ export const Keyframes = ({
                     insertionIndex
                   );
 
-                  onChange(newValues);
+                  onChange(newValues, isEphemeral);
                 }}
               />
             </Fragment>