experimental: Use css editor in keyframes (#4952)

## 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:
0000)
- [ ] 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` file

Author: kof

apps/builder/app/builder/features/navigator/css-preview.tsx

@@ -11,7 +11,7 @@ import type { StyleMap } from "@webstudio-is/css-engine";
 import { CollapsibleSection } from "~/builder/shared/collapsible-section";
 import { highlightCss } from "~/builder/shared/code-highlight";
 import type { ComputedStyleDecl } from "~/shared/style-object-model";
-import { $definedComputedStyles } from "~/builder/features/style-panel/shared/model";
+import { $computedStyleDeclarations } from "~/builder/features/style-panel/shared/model";
 import { $selectedInstance } from "~/shared/awareness";
 
 const preStyle = css(textVariants.mono, {
@@ -71,12 +71,12 @@ const getCssText = (
 };
 
 const $highlightedCss = computed(
-  [$selectedInstance, $definedComputedStyles],
-  (instance, definedComputedStyles) => {
+  [$selectedInstance, $computedStyleDeclarations],
+  (instance, computedStyleDeclarations) => {
     if (instance === undefined) {
       return;
     }
-    const cssText = getCssText(definedComputedStyles, instance.id);
+    const cssText = getCssText(computedStyleDeclarations, instance.id);
     return highlightCss(cssText);
   }
 );

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

@@ -1,15 +1,21 @@
-import { parseCss } from "@webstudio-is/css-data";
-import { StyleValue, toValue } from "@webstudio-is/css-engine";
 import {
-  Text,
+  StyleValue,
+  toValue,
+  type CssProperty,
+} from "@webstudio-is/css-engine";
+import {
   Grid,
   IconButton,
   Label,
   Separator,
   Tooltip,
   ScrollArea,
   theme,
+  SectionTitle,
+  SectionTitleButton,
+  SectionTitleLabel,
   Box,
+  Button,
 } from "@webstudio-is/design-system";
 import { MinusIcon, PlusIcon } from "@webstudio-is/icons";
 import type { AnimationKeyframe } from "@webstudio-is/sdk";
@@ -18,10 +24,10 @@ import {
   CssValueInput,
   type IntermediateStyleValue,
 } from "~/builder/features/style-panel/shared/css-value-input";
-import { toKebabCase } from "~/builder/features/style-panel/shared/keyword-utils";
-import { CodeEditor } from "~/builder/shared/code-editor";
 import { useIds } from "~/shared/form-utils";
 import { calcOffsets, findInsertionIndex, moveItem } from "./keyframe-helpers";
+import { CssEditor, type CssEditorApi } from "~/builder/shared/css-editor";
+import type { ComputedStyleDecl } from "~/shared/style-object-model";
 
 const unitOptions = [
   {
@@ -125,21 +131,32 @@ const Keyframe = ({
   onChange: (value: AnimationKeyframe | undefined) => void;
 }) => {
   const ids = useIds(["offset"]);
+  const apiRef = useRef<CssEditorApi>();
 
-  const cssProperties = useMemo(() => {
-    let result = ``;
-    for (const [property, style] of Object.entries(value.styles)) {
-      result = `${result}${toKebabCase(property)}: ${toValue(style)};\n`;
-    }
-    return result;
-  }, [value.styles]);
+  const declarations: Array<ComputedStyleDecl> = useMemo(
+    () =>
+      (Object.keys(value.styles) as Array<CssProperty>).map((property) => {
+        const styleValue = value.styles[property];
+        return {
+          property,
+          source: { name: "local" },
+          cascadedValue: styleValue,
+          computedValue: styleValue,
+          usedValue: styleValue,
+        };
+      }),
+    [value.styles]
+  );
 
   return (
     <>
       <Grid
         gap={1}
         align={"center"}
-        css={{ gridTemplateColumns: "1fr 1fr auto" }}
+        css={{
+          gridTemplateColumns: "1fr 1fr auto",
+          paddingInline: theme.panel.paddingInline,
+        }}
       >
         <Label htmlFor={ids.offset}>Offset</Label>
         <OffsetInput
@@ -157,25 +174,49 @@ const Keyframe = ({
         </Tooltip>
       </Grid>
       <Grid>
-        <CodeEditor
-          lang="css-properties"
-          size="keyframe"
-          value={cssProperties}
-          onChange={() => {
-            /* do nothing */
+        <CssEditor
+          showSearch={false}
+          propertiesPosition="top"
+          virtualize={false}
+          declarations={declarations}
+          apiRef={apiRef}
+          onAddDeclarations={(addedStyleMap) => {
+            const styles = { ...value.styles };
+            for (const [property, value] of addedStyleMap) {
+              styles[property] = value;
+            }
+            onChange({ ...value, styles });
+          }}
+          onDeleteProperty={(property, options = {}) => {
+            if (options.isEphemeral === true) {
+              return;
+            }
+            const styles = { ...value.styles };
+            delete styles[property];
+            onChange({ ...value, styles });
           }}
-          onChangeComplete={(cssText) => {
-            const parsedStyles = parseCss(`selector{${cssText}}`);
-            onChange({
-              ...value,
-              styles: parsedStyles.reduce(
-                (r, { property, value }) => ({ ...r, [property]: value }),
-                {}
-              ),
-            });
+          onSetProperty={(property) => {
+            return (newValue) => {
+              const styles = { ...value.styles, [property]: newValue };
+              onChange({ ...value, styles });
+            };
+          }}
+          onDeleteAllDeclarations={() => {
+            onChange({ ...value, styles: {} });
           }}
         />
       </Grid>
+      <Box css={{ paddingInline: theme.panel.paddingInline }}>
+        <Button
+          onClick={() => {
+            apiRef.current?.showAddStyleInput();
+          }}
+          prefix={<PlusIcon />}
+          color="ghost"
+        >
+          Add
+        </Button>
+      </Box>
     </>
   );
 };
@@ -187,8 +228,6 @@ export const Keyframes = ({
   value: AnimationKeyframe[];
   onChange: (value: AnimationKeyframe[]) => void;
 }) => {
-  const ids = useIds(["addKeyframe"]);
-
   // To preserve focus on children swap
   const keyRefs = useRef(
     Array.from({ length: keyframes.length }, (_, index) => index)
@@ -204,43 +243,24 @@ export const Keyframes = ({
   const offsets = calcOffsets(keyframes);
 
   return (
-    <Grid
-      css={{
-        minHeight: 0,
-      }}
-      gap={1}
-    >
-      <Grid
-        gap={1}
-        align={"center"}
-        css={{
-          paddingInline: theme.panel.paddingInline,
-          gridTemplateColumns: "1fr auto",
-        }}
-      >
-        <Label htmlFor={ids.addKeyframe}>
-          <Text variant={"titles"}>Keyframes</Text>
-        </Label>
-        <IconButton
-          id={ids.addKeyframe}
-          onClick={() => {
-            onChange([...keyframes, { offset: undefined, styles: {} }]);
-            keyRefs.current = [...keyRefs.current, keyframes.length];
-          }}
-        >
-          <PlusIcon />
-        </IconButton>
-      </Grid>
-      <Box
-        css={{
-          paddingInline: theme.panel.paddingInline,
-        }}
+    <Grid gap={1}>
+      <SectionTitle
+        collapsible={false}
+        suffix={
+          <SectionTitleButton
+            tabIndex={0}
+            prefix={<PlusIcon />}
+            onClick={() => {
+              onChange([...keyframes, { offset: undefined, styles: {} }]);
+              keyRefs.current = [...keyRefs.current, keyframes.length];
+            }}
+          />
+        }
       >
-        <Separator />
-      </Box>
-
+        <SectionTitleLabel>Keyframes</SectionTitleLabel>
+      </SectionTitle>
       <ScrollArea>
-        <Grid gap={2} css={{ padding: theme.panel.padding }}>
+        <Grid gap={2}>
           {keyframes.map((value, index) => (
             <Fragment key={keyRefs.current[index]}>
               {index > 0 && <Separator />}

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx

@@ -20,7 +20,7 @@ import {
 import { useComputedStyles } from "../../shared/model";
 import { getDots } from "../../shared/style-section";
 import { CssEditor, type CssEditorApi } from "../../../../shared/css-editor";
-import { $advancedStylesLonghands } from "./stores";
+import { $advancedStyleDeclarations } from "./stores";
 import { $selectedInstanceKey } from "~/shared/awareness";
 import { getSetting } from "~/builder/shared/client-settings";
 
@@ -38,7 +38,6 @@ const AdvancedStyleSection = (props: {
   const styles = useComputedStyles(properties);
   return (
     <CollapsibleSectionRoot
-      label={label}
       isOpen={isOpen}
       onOpenChange={setIsOpen}
       fullWidth
@@ -65,9 +64,11 @@ const AdvancedStyleSection = (props: {
 };
 
 export const Section = () => {
-  const styleMap = useStore($advancedStylesLonghands);
+  const advancedStyleDeclarations = useStore($advancedStyleDeclarations);
   const apiRef = useRef<CssEditorApi>();
-  const properties = Array.from(styleMap.keys());
+  const properties = advancedStyleDeclarations.map(
+    (styleDecl) => styleDecl.property
+  );
   const selectedInstanceKey = useStore($selectedInstanceKey);
   // Memorizing recent properties by instance id, so that when user switches between instances and comes back
   // they are still in-place
@@ -135,7 +136,7 @@ export const Section = () => {
       }}
     >
       <CssEditor
-        styleMap={styleMap}
+        declarations={advancedStyleDeclarations}
         onDeleteProperty={handleDeleteProperty}
         onSetProperty={setProperty}
         onAddDeclarations={handleAddDeclarations}

apps/builder/app/builder/features/style-panel/sections/advanced/stores.ts

@@ -1,14 +1,10 @@
 import { computed } from "nanostores";
-import type { CssProperty, CssStyleMap } from "@webstudio-is/css-engine";
-import { $matchingBreakpoints, getDefinedStyles } from "../../shared/model";
+import type { CssProperty } from "@webstudio-is/css-engine";
+import { $computedStyleDeclarations } from "../../shared/model";
 import { sections } from "../sections";
-import {
-  $registeredComponentMetas,
-  $styles,
-  $styleSourceSelections,
-} from "~/shared/nano-states";
-import { $selectedInstancePath } from "~/shared/awareness";
 import { $settings } from "~/builder/shared/client-settings";
+import type { ComputedStyleDecl } from "~/shared/style-object-model";
+import { ROOT_INSTANCE_ID } from "@webstudio-is/sdk";
 
 // @todo will be fully deleted https://github.com/webstudio-is/webstudio/issues/4871
 const initialProperties = new Set<CssProperty>([
@@ -19,64 +15,47 @@ const initialProperties = new Set<CssProperty>([
   "user-select",
 ]);
 
-export const $advancedStylesLonghands = computed(
-  [
-    // prevent showing properties inherited from root
-    // to not bloat advanced panel
-    $selectedInstancePath,
-    $registeredComponentMetas,
-    $styleSourceSelections,
-    $matchingBreakpoints,
-    $styles,
-    $settings,
-  ],
-  (
-    instancePath,
-    metas,
-    styleSourceSelections,
-    matchingBreakpoints,
-    styles,
-    settings
-  ) => {
-    const advancedStyles: CssStyleMap = new Map();
-
-    if (instancePath === undefined) {
-      return advancedStyles;
-    }
-
-    const definedStyles = getDefinedStyles({
-      instancePath,
-      metas,
-      matchingBreakpoints,
-      styleSourceSelections,
-      styles,
-    });
-
+export const $advancedStyleDeclarations = computed(
+  [$computedStyleDeclarations, $settings],
+  (computedStyleDeclarations, settings) => {
+    const advancedStyles: Array<ComputedStyleDecl> = [];
     // All properties used by the panels except the advanced panel
     const visualProperties = new Set<CssProperty>([]);
     for (const { properties } of sections.values()) {
       for (const property of properties) {
         visualProperties.add(property);
       }
     }
-    for (const style of definedStyles) {
-      const { property, value, listed } = style;
-      const hyphenatedProperty = property;
+    for (const styleDecl of computedStyleDeclarations) {
+      // We don't want to show the massive amount of root variables on child instances.
+      // @todo add filters to the UI to allow user decide.
+      if (
+        styleDecl.source.name === "remote" &&
+        styleDecl.source.instanceId === ROOT_INSTANCE_ID
+      ) {
+        continue;
+      }
+      const { property, listed } = styleDecl;
       // When property is listed, it was added from advanced panel.
       // If we are in advanced mode, we show them all.
       if (
-        visualProperties.has(hyphenatedProperty) === false ||
+        visualProperties.has(property) === false ||
         listed ||
         settings.stylePanelMode === "advanced"
       ) {
-        advancedStyles.set(hyphenatedProperty, value);
+        advancedStyles.push(styleDecl);
       }
     }
     // In advanced mode we assume user knows the properties they need, so we don't need to show these.
     // @todo https://github.com/webstudio-is/webstudio/issues/4871
     if (settings.stylePanelMode !== "advanced") {
-      for (const initialProperty of initialProperties) {
-        advancedStyles.set(initialProperty, { type: "guaranteedInvalid" });
+      for (const property of initialProperties) {
+        const styleDecl = computedStyleDeclarations.find(
+          (styleDecl) => styleDecl.property === property
+        );
+        if (styleDecl) {
+          advancedStyles.push(styleDecl);
+        }
       }
     }