From 3173aeed646a752a055df06b364e627e1878f091 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 8 Feb 2025 11:30:44 +0000
Subject: [PATCH 01/18] recent section

---
 .../sections/advanced/advanced.tsx            | 67 +++++++++++++------
 1 file changed, 45 insertions(+), 22 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 14b67fe0e876..64eff72143d1 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -28,6 +28,7 @@ import {
   SectionTitle,
   SectionTitleButton,
   SectionTitleLabel,
+  Separator,
   Text,
   theme,
   Tooltip,
@@ -91,6 +92,7 @@ const AdvancedStyleSection = (props: {
       label={label}
       isOpen={isOpen}
       onOpenChange={setIsOpen}
+      fullWidth
       trigger={
         <SectionTitle
           dots={getDots(styles)}
@@ -447,7 +449,7 @@ const AdvancedProperty = memo(
     autoFocus,
   }: {
     property: StyleProperty;
-    autoFocus: boolean;
+    autoFocus?: boolean;
   }) => {
     const visibilityChangeEventSupported = useClientSupports(
       () => "oncontentvisibilityautostatechange" in document.body
@@ -514,8 +516,13 @@ const AdvancedProperty = memo(
 export const Section = () => {
   const [isAdding, setIsAdding] = useState(false);
   const advancedProperties = useStore($advancedProperties);
-  const newlyAddedProperty = useRef<undefined | StyleProperty>(undefined);
+  const recentProperties = useRef<StyleProperty[]>([]);
 
+  // In case the property was deleted, it will be removed from advanced, so we need to remove it from recent too.
+  recentProperties.current = recentProperties.current.filter((property) =>
+    advancedProperties.includes(property)
+  );
+  console.log(recentProperties);
   return (
     <AdvancedStyleSection
       label="Advanced"
@@ -523,27 +530,43 @@ export const Section = () => {
       onAdd={() => setIsAdding(true)}
     >
       {isAdding && (
-        <AdvancedSearch
-          usedProperties={advancedProperties}
-          onSelect={(property) => {
-            newlyAddedProperty.current = property;
-            setIsAdding(false);
-            setProperty(property)(
-              { type: "guaranteedInvalid" },
-              { listed: true }
-            );
-          }}
-          onClose={() => setIsAdding(false)}
-        />
-      )}
-      <Box>
-        {advancedProperties.map((property) => (
-          <AdvancedProperty
-            key={property}
-            property={property}
-            autoFocus={newlyAddedProperty.current === property}
+        <Box css={{ paddingInline: theme.panel.paddingInline }}>
+          <AdvancedSearch
+            usedProperties={advancedProperties}
+            onSelect={(property) => {
+              recentProperties.current.push(property);
+              setIsAdding(false);
+              setProperty(property)(
+                { type: "guaranteedInvalid" },
+                { listed: true }
+              );
+            }}
+            onClose={() => setIsAdding(false)}
           />
-        ))}
+        </Box>
+      )}
+      {recentProperties.current.length > 0 && (
+        <>
+          <Box css={{ paddingInline: theme.panel.paddingInline }}>
+            {recentProperties.current.map((property, index, properties) => (
+              <AdvancedProperty
+                key={property}
+                property={property}
+                autoFocus={index === properties.length - 1}
+              />
+            ))}
+          </Box>
+          <Separator />
+        </>
+      )}
+      <Box css={{ paddingInline: theme.panel.paddingInline }}>
+        {advancedProperties
+          .filter(
+            (property) => recentProperties.current.includes(property) === false
+          )
+          .map((property) => (
+            <AdvancedProperty key={property} property={property} />
+          ))}
       </Box>
     </AdvancedStyleSection>
   );

From 3c7147394a465e645c9716f3e2960fbb09db1dfb Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 8 Feb 2025 11:36:59 +0000
Subject: [PATCH 02/18] show add property input after recent properties

---
 .../sections/advanced/advanced.tsx            | 32 ++++++++-----------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 64eff72143d1..5140307923c8 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -522,15 +522,22 @@ export const Section = () => {
   recentProperties.current = recentProperties.current.filter((property) =>
     advancedProperties.includes(property)
   );
-  console.log(recentProperties);
+
   return (
     <AdvancedStyleSection
       label="Advanced"
       properties={advancedProperties}
       onAdd={() => setIsAdding(true)}
     >
-      {isAdding && (
-        <Box css={{ paddingInline: theme.panel.paddingInline }}>
+      <Box css={{ paddingInline: theme.panel.paddingInline }}>
+        {recentProperties.current.map((property, index, properties) => (
+          <AdvancedProperty
+            key={property}
+            property={property}
+            autoFocus={index === properties.length - 1}
+          />
+        ))}
+        {isAdding && (
           <AdvancedSearch
             usedProperties={advancedProperties}
             onSelect={(property) => {
@@ -543,22 +550,9 @@ export const Section = () => {
             }}
             onClose={() => setIsAdding(false)}
           />
-        </Box>
-      )}
-      {recentProperties.current.length > 0 && (
-        <>
-          <Box css={{ paddingInline: theme.panel.paddingInline }}>
-            {recentProperties.current.map((property, index, properties) => (
-              <AdvancedProperty
-                key={property}
-                property={property}
-                autoFocus={index === properties.length - 1}
-              />
-            ))}
-          </Box>
-          <Separator />
-        </>
-      )}
+        )}
+      </Box>
+      {recentProperties.current.length > 0 && <Separator />}
       <Box css={{ paddingInline: theme.panel.paddingInline }}>
         {advancedProperties
           .filter(

From d54f44b1d9d4483c6bd12dda4b121aa960860686 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 8 Feb 2025 12:25:51 +0000
Subject: [PATCH 03/18] close input on esc, show it on enter

---
 .../sections/advanced/advanced.tsx            | 42 ++++++++++++++++---
 .../css-value-input-container.tsx             | 12 ++++--
 2 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 5140307923c8..3b68b7ad8f58 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -6,6 +6,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type ComponentProps,
   type ReactNode,
 } from "react";
 import { useStore } from "@nanostores/react";
@@ -74,6 +75,7 @@ import {
 import { useClientSupports } from "~/shared/client-supports";
 import { $selectedInstancePath } from "~/shared/awareness";
 import { $settings } from "~/builder/shared/client-settings";
+import { composeEventHandlers } from "~/shared/event-utils";
 
 // Only here to keep the same section module interface
 export const properties = [];
@@ -169,7 +171,7 @@ const insertStyles = (text: string) => {
  * paste css declarations
  *
  */
-const AdvancedSearch = ({
+const AddProperty = ({
   usedProperties,
   onSelect,
   onClose,
@@ -212,7 +214,20 @@ const AdvancedSearch = ({
   const descriptionItem = combobox.items[combobox.highlightedIndex];
   const description = getNewPropertyDescription(descriptionItem);
   const descriptions = combobox.items.map(getNewPropertyDescription);
-
+  const inputProps = combobox.getInputProps();
+  const handleAbort = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      onClose();
+    }
+  };
+  const handleKeyDown = composeEventHandlers(
+    handleAbort,
+    inputProps.onKeyDown,
+    {
+      // Pass prevented events to the combobox (e.g., the Escape key doesn't work otherwise, as it's blocked by Radix)
+      checkForDefaultPrevented: false,
+    }
+  );
   return (
     <ComboboxRoot open={combobox.isOpen}>
       <form
@@ -228,7 +243,8 @@ const AdvancedSearch = ({
         <input type="submit" hidden />
         <ComboboxAnchor>
           <InputField
-            {...combobox.getInputProps()}
+            {...inputProps}
+            onKeyDown={handleKeyDown}
             autoFocus={true}
             placeholder="Add styles"
             suffix={<NestedInputButton {...combobox.getToggleButtonProps()} />}
@@ -307,9 +323,13 @@ const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
 const AdvancedPropertyValue = ({
   autoFocus,
   property,
+  onChangeComplete,
 }: {
   autoFocus?: boolean;
   property: StyleProperty;
+  onChangeComplete: ComponentProps<
+    typeof CssValueInputContainer
+  >["onChangeComplete"];
 }) => {
   const styleDecl = useComputedStyleDecl(property);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -325,6 +345,7 @@ const AdvancedPropertyValue = ({
       variant="chromeless"
       text="mono"
       fieldSizing="content"
+      onChangeComplete={onChangeComplete}
       prefix={
         isColor && (
           <ColorPopover
@@ -447,9 +468,13 @@ const AdvancedProperty = memo(
   ({
     property,
     autoFocus,
+    onChangeComplete,
   }: {
     property: StyleProperty;
     autoFocus?: boolean;
+    onChangeComplete?: ComponentProps<
+      typeof CssValueInputContainer
+    >["onChangeComplete"];
   }) => {
     const visibilityChangeEventSupported = useClientSupports(
       () => "oncontentvisibilityautostatechange" in document.body
@@ -505,7 +530,11 @@ const AdvancedProperty = memo(
           <>
             <AdvancedPropertyLabel property={property} />
             <Text>:</Text>
-            <AdvancedPropertyValue autoFocus={autoFocus} property={property} />
+            <AdvancedPropertyValue
+              autoFocus={autoFocus}
+              property={property}
+              onChangeComplete={onChangeComplete}
+            />
           </>
         )}
       </Flex>
@@ -535,10 +564,13 @@ export const Section = () => {
             key={property}
             property={property}
             autoFocus={index === properties.length - 1}
+            onChangeComplete={() => {
+              setIsAdding(true);
+            }}
           />
         ))}
         {isAdding && (
-          <AdvancedSearch
+          <AddProperty
             usedProperties={advancedProperties}
             onSelect={(property) => {
               recentProperties.current.push(property);
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx
index d03723b67c36..3d39d69a5a9f 100644
--- a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx
+++ b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx
@@ -10,16 +10,19 @@ type CssValueInputContainerProps = {
   ComponentProps<typeof CssValueInput>,
   | "onChange"
   | "onHighlight"
-  | "onChangeComplete"
   | "onReset"
   | "onAbort"
   | "intermediateValue"
->;
+  | "onChangeComplete"
+> & {
+    onChangeComplete?: ComponentProps<typeof CssValueInput>["onChangeComplete"];
+  };
 
 export const CssValueInputContainer = ({
   property,
   setValue,
   deleteProperty,
+  onChangeComplete,
   ...props
 }: CssValueInputContainerProps) => {
   const [intermediateValue, setIntermediateValue] = useState<
@@ -50,9 +53,10 @@ export const CssValueInputContainer = ({
           deleteProperty(property, { isEphemeral: true });
         }
       }}
-      onChangeComplete={({ value }) => {
-        setValue(value);
+      onChangeComplete={(event) => {
+        setValue(event.value);
         setIntermediateValue(undefined);
+        onChangeComplete?.(event);
       }}
       onAbort={() => {
         deleteProperty(property, { isEphemeral: true });

From 32bd01f493fbcfcda9202db809a3d0300ccd7e52 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 8 Feb 2025 12:54:32 +0000
Subject: [PATCH 04/18] allow adding existing properties with it's value

---
 .../sections/advanced/advanced.tsx            | 53 ++++++++-----------
 1 file changed, 21 insertions(+), 32 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 3b68b7ad8f58..df0161291902 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -3,7 +3,6 @@ import { colord } from "colord";
 import {
   memo,
   useEffect,
-  useMemo,
   useRef,
   useState,
   type ComponentProps,
@@ -161,6 +160,13 @@ const insertStyles = (text: string) => {
   return true;
 };
 
+const sortedProperties = Object.keys(propertiesData)
+  .sort(Intl.Collator().compare)
+  .map((property) => ({
+    value: property,
+    label: hyphenateProperty(property),
+  }));
+
 /**
  *
  * Advanced search control supports following interactions
@@ -172,36 +178,19 @@ const insertStyles = (text: string) => {
  *
  */
 const AddProperty = ({
-  usedProperties,
   onSelect,
   onClose,
 }: {
-  usedProperties: string[];
   onSelect: (value: StyleProperty) => void;
   onClose: () => void;
 }) => {
-  const availableProperties = useMemo(() => {
-    const properties = Object.keys(propertiesData).sort(
-      Intl.Collator().compare
-    ) as StyleProperty[];
-    const availableProperties: SearchItem[] = [];
-    for (const property of properties) {
-      if (usedProperties.includes(property) === false) {
-        availableProperties.push({
-          value: property,
-          label: hyphenateProperty(property),
-        });
-      }
-    }
-    return availableProperties;
-  }, [usedProperties]);
   const [item, setItem] = useState<SearchItem>({
     value: "",
     label: "",
   });
 
   const combobox = useCombobox<SearchItem>({
-    getItems: () => availableProperties,
+    getItems: () => sortedProperties,
     itemToString: (item) => item?.label ?? "",
     value: item,
     defaultHighlightedIndex: 0,
@@ -545,10 +534,10 @@ const AdvancedProperty = memo(
 export const Section = () => {
   const [isAdding, setIsAdding] = useState(false);
   const advancedProperties = useStore($advancedProperties);
-  const recentProperties = useRef<StyleProperty[]>([]);
+  let [recentProperties, setRecentProperties] = useState<StyleProperty[]>([]);
 
   // In case the property was deleted, it will be removed from advanced, so we need to remove it from recent too.
-  recentProperties.current = recentProperties.current.filter((property) =>
+  recentProperties = recentProperties.filter((property) =>
     advancedProperties.includes(property)
   );
 
@@ -559,7 +548,7 @@ export const Section = () => {
       onAdd={() => setIsAdding(true)}
     >
       <Box css={{ paddingInline: theme.panel.paddingInline }}>
-        {recentProperties.current.map((property, index, properties) => (
+        {recentProperties.map((property, index, properties) => (
           <AdvancedProperty
             key={property}
             property={property}
@@ -571,25 +560,25 @@ export const Section = () => {
         ))}
         {isAdding && (
           <AddProperty
-            usedProperties={advancedProperties}
             onSelect={(property) => {
-              recentProperties.current.push(property);
               setIsAdding(false);
-              setProperty(property)(
-                { type: "guaranteedInvalid" },
-                { listed: true }
-              );
+              const isNew = advancedProperties.includes(property) === false;
+              if (isNew) {
+                setProperty(property)(
+                  { type: "guaranteedInvalid" },
+                  { listed: true }
+                );
+              }
+              setRecentProperties([...recentProperties, property]);
             }}
             onClose={() => setIsAdding(false)}
           />
         )}
       </Box>
-      {recentProperties.current.length > 0 && <Separator />}
+      {recentProperties.length > 0 && <Separator />}
       <Box css={{ paddingInline: theme.panel.paddingInline }}>
         {advancedProperties
-          .filter(
-            (property) => recentProperties.current.includes(property) === false
-          )
+          .filter((property) => recentProperties.includes(property) === false)
           .map((property) => (
             <AdvancedProperty key={property} property={property} />
           ))}

From 2c46cdcb81c230c35d20e29fe779876a3bd1ff84 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 8 Feb 2025 13:01:17 +0000
Subject: [PATCH 05/18] disallow adding same property twice within recent

---
 .../features/style-panel/sections/advanced/advanced.tsx       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index df0161291902..4f97e6b267ff 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -569,7 +569,9 @@ export const Section = () => {
                   { listed: true }
                 );
               }
-              setRecentProperties([...recentProperties, property]);
+              setRecentProperties(
+                Array.from(new Set([...recentProperties, property]))
+              );
             }}
             onClose={() => setIsAdding(false)}
           />

From eca1cf737632fca55475a2346a78b3107360f68c Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 8 Feb 2025 13:07:42 +0000
Subject: [PATCH 06/18] allow adding properties with tab in the last value

---
 .../style-panel/sections/advanced/advanced.tsx         | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 4f97e6b267ff..81d5112763a3 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -558,7 +558,7 @@ export const Section = () => {
             }}
           />
         ))}
-        {isAdding && (
+        {isAdding ? (
           <AddProperty
             onSelect={(property) => {
               setIsAdding(false);
@@ -575,6 +575,14 @@ export const Section = () => {
             }}
             onClose={() => setIsAdding(false)}
           />
+        ) : (
+          // This empty div allows showing the add property input on tab in the last value
+          <div
+            tabIndex={0}
+            onFocus={() => {
+              setIsAdding(true);
+            }}
+          />
         )}
       </Box>
       {recentProperties.length > 0 && <Separator />}

From 154048f766f05de916fbaef3e9810d456868030f Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 8 Feb 2025 21:06:35 +0000
Subject: [PATCH 07/18] handle css insert

---
 .../sections/advanced/advanced.tsx            | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 81d5112763a3..371818f6dc0e 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -150,14 +150,14 @@ const getNewPropertyDescription = (item: null | SearchItem) => {
 const insertStyles = (text: string) => {
   const parsedStyles = parseCss(`selector{${text}}`);
   if (parsedStyles.length === 0) {
-    return false;
+    return [];
   }
   const batch = createBatchUpdate();
   for (const { property, value } of parsedStyles) {
     batch.setProperty(property)(value);
   }
   batch.publish({ listed: true });
-  return true;
+  return parsedStyles;
 };
 
 const sortedProperties = Object.keys(propertiesData)
@@ -180,9 +180,11 @@ const sortedProperties = Object.keys(propertiesData)
 const AddProperty = ({
   onSelect,
   onClose,
+  onSubmit,
 }: {
   onSelect: (value: StyleProperty) => void;
   onClose: () => void;
+  onSubmit: (value: string) => void;
 }) => {
   const [item, setItem] = useState<SearchItem>({
     value: "",
@@ -223,10 +225,8 @@ const AddProperty = ({
         {...combobox.getComboboxProps()}
         onSubmit={(event) => {
           event.preventDefault();
-          const isInserted = insertStyles(item.value);
-          if (isInserted) {
-            onClose();
-          }
+          onSubmit(item.value);
+          onClose();
         }}
       >
         <input type="submit" hidden />
@@ -534,13 +534,19 @@ const AdvancedProperty = memo(
 export const Section = () => {
   const [isAdding, setIsAdding] = useState(false);
   const advancedProperties = useStore($advancedProperties);
-  let [recentProperties, setRecentProperties] = useState<StyleProperty[]>([]);
+  const [recentProperties, setRecentProperties] = useState<StyleProperty[]>([]);
 
   // In case the property was deleted, it will be removed from advanced, so we need to remove it from recent too.
-  recentProperties = recentProperties.filter((property) =>
+  const recentPropertiesCleaned = recentProperties.filter((property) =>
     advancedProperties.includes(property)
   );
 
+  const addRecentProperties = (properties: StyleProperty[]) => {
+    setRecentProperties(
+      Array.from(new Set([...recentProperties, ...properties]))
+    );
+  };
+
   return (
     <AdvancedStyleSection
       label="Advanced"
@@ -548,7 +554,7 @@ export const Section = () => {
       onAdd={() => setIsAdding(true)}
     >
       <Box css={{ paddingInline: theme.panel.paddingInline }}>
-        {recentProperties.map((property, index, properties) => (
+        {recentPropertiesCleaned.map((property, index, properties) => (
           <AdvancedProperty
             key={property}
             property={property}
@@ -569,9 +575,12 @@ export const Section = () => {
                   { listed: true }
                 );
               }
-              setRecentProperties(
-                Array.from(new Set([...recentProperties, property]))
-              );
+              addRecentProperties([property]);
+            }}
+            onSubmit={(value) => {
+              const styles = insertStyles(value);
+              const insertedProperties = styles.map(({ property }) => property);
+              addRecentProperties(insertedProperties);
             }}
             onClose={() => setIsAdding(false)}
           />
@@ -585,10 +594,12 @@ export const Section = () => {
           />
         )}
       </Box>
-      {recentProperties.length > 0 && <Separator />}
+      {recentPropertiesCleaned.length > 0 && <Separator />}
       <Box css={{ paddingInline: theme.panel.paddingInline }}>
         {advancedProperties
-          .filter((property) => recentProperties.includes(property) === false)
+          .filter(
+            (property) => recentPropertiesCleaned.includes(property) === false
+          )
           .map((property) => (
             <AdvancedProperty key={property} property={property} />
           ))}

From 5aee94efcf3c276d71b12de143c1a3e2151ef185 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 8 Feb 2025 22:15:30 +0000
Subject: [PATCH 08/18] fix spacing

---
 .../sections/advanced/advanced.tsx            | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 371818f6dc0e..c80d34851046 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -565,25 +565,29 @@ export const Section = () => {
           />
         ))}
         {isAdding ? (
-          <AddProperty
-            onSelect={(property) => {
-              setIsAdding(false);
-              const isNew = advancedProperties.includes(property) === false;
-              if (isNew) {
-                setProperty(property)(
-                  { type: "guaranteedInvalid" },
-                  { listed: true }
+          <Box css={{ paddingTop: theme.spacing[3] }}>
+            <AddProperty
+              onSelect={(property) => {
+                setIsAdding(false);
+                const isNew = advancedProperties.includes(property) === false;
+                if (isNew) {
+                  setProperty(property)(
+                    { type: "guaranteedInvalid" },
+                    { listed: true }
+                  );
+                }
+                addRecentProperties([property]);
+              }}
+              onSubmit={(value) => {
+                const styles = insertStyles(value);
+                const insertedProperties = styles.map(
+                  ({ property }) => property
                 );
-              }
-              addRecentProperties([property]);
-            }}
-            onSubmit={(value) => {
-              const styles = insertStyles(value);
-              const insertedProperties = styles.map(({ property }) => property);
-              addRecentProperties(insertedProperties);
-            }}
-            onClose={() => setIsAdding(false)}
-          />
+                addRecentProperties(insertedProperties);
+              }}
+              onClose={() => setIsAdding(false)}
+            />
+          </Box>
         ) : (
           // This empty div allows showing the add property input on tab in the last value
           <div

From c88de5b4a0710c7072fdb1fc22053556fe4c29fd Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 8 Feb 2025 22:38:43 +0000
Subject: [PATCH 09/18] make sure second click on + button focuses the input

---
 .../sections/advanced/advanced.tsx            | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index c80d34851046..1d69a5b02807 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -1,6 +1,7 @@
 import { lexer } from "css-tree";
 import { colord } from "colord";
 import {
+  forwardRef,
   memo,
   useEffect,
   useRef,
@@ -177,15 +178,14 @@ const sortedProperties = Object.keys(propertiesData)
  * paste css declarations
  *
  */
-const AddProperty = ({
-  onSelect,
-  onClose,
-  onSubmit,
-}: {
-  onSelect: (value: StyleProperty) => void;
-  onClose: () => void;
-  onSubmit: (value: string) => void;
-}) => {
+const AddProperty = forwardRef<
+  HTMLInputElement,
+  {
+    onSelect: (value: StyleProperty) => void;
+    onClose: () => void;
+    onSubmit: (value: string) => void;
+  }
+>(({ onSelect, onClose, onSubmit }, forwardedRef) => {
   const [item, setItem] = useState<SearchItem>({
     value: "",
     label: "",
@@ -233,6 +233,7 @@ const AddProperty = ({
         <ComboboxAnchor>
           <InputField
             {...inputProps}
+            inputRef={forwardedRef}
             onKeyDown={handleKeyDown}
             autoFocus={true}
             placeholder="Add styles"
@@ -261,7 +262,7 @@ const AddProperty = ({
       </form>
     </ComboboxRoot>
   );
-};
+});
 
 const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
   const styleDecl = useComputedStyleDecl(property);
@@ -535,6 +536,7 @@ export const Section = () => {
   const [isAdding, setIsAdding] = useState(false);
   const advancedProperties = useStore($advancedProperties);
   const [recentProperties, setRecentProperties] = useState<StyleProperty[]>([]);
+  const addPropertyInputRef = useRef<HTMLInputElement>(null);
 
   // In case the property was deleted, it will be removed from advanced, so we need to remove it from recent too.
   const recentPropertiesCleaned = recentProperties.filter((property) =>
@@ -551,7 +553,11 @@ export const Section = () => {
     <AdvancedStyleSection
       label="Advanced"
       properties={advancedProperties}
-      onAdd={() => setIsAdding(true)}
+      onAdd={() => {
+        setIsAdding(true);
+        // User can click twice on the add button, so we need to focus the input on the second click after autoFocus isn't working.
+        addPropertyInputRef.current?.focus();
+      }}
     >
       <Box css={{ paddingInline: theme.panel.paddingInline }}>
         {recentPropertiesCleaned.map((property, index, properties) => (
@@ -586,6 +592,7 @@ export const Section = () => {
                 addRecentProperties(insertedProperties);
               }}
               onClose={() => setIsAdding(false)}
+              ref={addPropertyInputRef}
             />
           </Box>
         ) : (

From a730f11a71ab6f5a9ac66bdab4a6145d01166647 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sat, 8 Feb 2025 23:16:49 +0000
Subject: [PATCH 10/18] fix show input on enter in the last value

---
 .../features/style-panel/sections/advanced/advanced.tsx      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 1d69a5b02807..514c87198685 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -226,7 +226,6 @@ const AddProperty = forwardRef<
         onSubmit={(event) => {
           event.preventDefault();
           onSubmit(item.value);
-          onClose();
         }}
       >
         <input type="submit" hidden />
@@ -591,7 +590,9 @@ export const Section = () => {
                 );
                 addRecentProperties(insertedProperties);
               }}
-              onClose={() => setIsAdding(false)}
+              onClose={() => {
+                setIsAdding(false);
+              }}
               ref={addPropertyInputRef}
             />
           </Box>

From 13a898e71ceede3489afac25d99e3f7e745e8157 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 9 Feb 2025 11:29:15 +0000
Subject: [PATCH 11/18] fix ghost event from submit

---
 .../sections/advanced/advanced.tsx            | 36 +++++++++----------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 514c87198685..9a5a26b8df07 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -206,28 +206,23 @@ const AddProperty = forwardRef<
   const description = getNewPropertyDescription(descriptionItem);
   const descriptions = combobox.items.map(getNewPropertyDescription);
   const inputProps = combobox.getInputProps();
-  const handleAbort = (event: KeyboardEvent) => {
+
+  const handleKeys = (event: KeyboardEvent) => {
+    if (event.key === "Enter") {
+      onSubmit(item.value);
+      return;
+    }
     if (event.key === "Escape") {
       onClose();
     }
   };
-  const handleKeyDown = composeEventHandlers(
-    handleAbort,
-    inputProps.onKeyDown,
-    {
-      // Pass prevented events to the combobox (e.g., the Escape key doesn't work otherwise, as it's blocked by Radix)
-      checkForDefaultPrevented: false,
-    }
-  );
+  const handleKeyDown = composeEventHandlers(handleKeys, inputProps.onKeyDown, {
+    // Pass prevented events to the combobox (e.g., the Escape key doesn't work otherwise, as it's blocked by Radix)
+    checkForDefaultPrevented: false,
+  });
   return (
     <ComboboxRoot open={combobox.isOpen}>
-      <form
-        {...combobox.getComboboxProps()}
-        onSubmit={(event) => {
-          event.preventDefault();
-          onSubmit(item.value);
-        }}
-      >
+      <div {...combobox.getComboboxProps()}>
         <input type="submit" hidden />
         <ComboboxAnchor>
           <InputField
@@ -258,7 +253,7 @@ const AddProperty = forwardRef<
             )}
           </ComboboxListbox>
         </ComboboxContent>
-      </form>
+      </div>
     </ComboboxRoot>
   );
 });
@@ -564,8 +559,10 @@ export const Section = () => {
             key={property}
             property={property}
             autoFocus={index === properties.length - 1}
-            onChangeComplete={() => {
-              setIsAdding(true);
+            onChangeComplete={(event) => {
+              if (event.type === "enter") {
+                setIsAdding(true);
+              }
             }}
           />
         ))}
@@ -584,6 +581,7 @@ export const Section = () => {
                 addRecentProperties([property]);
               }}
               onSubmit={(value) => {
+                setIsAdding(false);
                 const styles = insertStyles(value);
                 const insertedProperties = styles.map(
                   ({ property }) => property

From 5da63cd78450fbe51632d495159bba44303d7076 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 9 Feb 2025 11:37:12 +0000
Subject: [PATCH 12/18] better reset logic

---
 .../sections/advanced/advanced.tsx            | 34 ++++++++++++-------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 9a5a26b8df07..7279b0409969 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -258,7 +258,13 @@ const AddProperty = forwardRef<
   );
 });
 
-const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
+const AdvancedPropertyLabel = ({
+  property,
+  onReset,
+}: {
+  property: StyleProperty;
+  onReset?: () => void;
+}) => {
   const styleDecl = useComputedStyleDecl(property);
   const label = hyphenateProperty(property);
   const description = propertyDescriptions[property];
@@ -274,6 +280,7 @@ const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
           if (event.altKey) {
             event.preventDefault();
             deleteProperty(property);
+            onReset?.();
             return;
           }
           setIsOpen(true);
@@ -287,6 +294,7 @@ const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
           onReset={() => {
             deleteProperty(property);
             setIsOpen(false);
+            onReset?.();
           }}
         />
       }
@@ -453,9 +461,11 @@ const AdvancedProperty = memo(
     property,
     autoFocus,
     onChangeComplete,
+    onReset,
   }: {
     property: StyleProperty;
     autoFocus?: boolean;
+    onReset?: () => void;
     onChangeComplete?: ComponentProps<
       typeof CssValueInputContainer
     >["onChangeComplete"];
@@ -512,7 +522,7 @@ const AdvancedProperty = memo(
       >
         {isVisible && (
           <>
-            <AdvancedPropertyLabel property={property} />
+            <AdvancedPropertyLabel property={property} onReset={onReset} />
             <Text>:</Text>
             <AdvancedPropertyValue
               autoFocus={autoFocus}
@@ -532,11 +542,6 @@ export const Section = () => {
   const [recentProperties, setRecentProperties] = useState<StyleProperty[]>([]);
   const addPropertyInputRef = useRef<HTMLInputElement>(null);
 
-  // In case the property was deleted, it will be removed from advanced, so we need to remove it from recent too.
-  const recentPropertiesCleaned = recentProperties.filter((property) =>
-    advancedProperties.includes(property)
-  );
-
   const addRecentProperties = (properties: StyleProperty[]) => {
     setRecentProperties(
       Array.from(new Set([...recentProperties, ...properties]))
@@ -554,7 +559,7 @@ export const Section = () => {
       }}
     >
       <Box css={{ paddingInline: theme.panel.paddingInline }}>
-        {recentPropertiesCleaned.map((property, index, properties) => (
+        {recentProperties.map((property, index, properties) => (
           <AdvancedProperty
             key={property}
             property={property}
@@ -564,6 +569,13 @@ export const Section = () => {
                 setIsAdding(true);
               }
             }}
+            onReset={() => {
+              setRecentProperties((properties) => {
+                return properties.filter(
+                  (recentProperty) => recentProperty !== property
+                );
+              });
+            }}
           />
         ))}
         {isAdding ? (
@@ -604,12 +616,10 @@ export const Section = () => {
           />
         )}
       </Box>
-      {recentPropertiesCleaned.length > 0 && <Separator />}
+      {recentProperties.length > 0 && <Separator />}
       <Box css={{ paddingInline: theme.panel.paddingInline }}>
         {advancedProperties
-          .filter(
-            (property) => recentPropertiesCleaned.includes(property) === false
-          )
+          .filter((property) => recentProperties.includes(property) === false)
           .map((property) => (
             <AdvancedProperty key={property} property={property} />
           ))}

From bf567e5f4fc833588441cfb33961b2d31ce9051b Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 9 Feb 2025 16:32:54 +0000
Subject: [PATCH 13/18] fix enter

---
 .../features/style-panel/sections/advanced/advanced.tsx  | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 7279b0409969..4556e67eb5aa 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -208,6 +208,10 @@ const AddProperty = forwardRef<
   const inputProps = combobox.getInputProps();
 
   const handleKeys = (event: KeyboardEvent) => {
+    // Dropdown might handle enter or escape.
+    if (event.defaultPrevented) {
+      return;
+    }
     if (event.key === "Enter") {
       onSubmit(item.value);
       return;
@@ -216,10 +220,12 @@ const AddProperty = forwardRef<
       onClose();
     }
   };
-  const handleKeyDown = composeEventHandlers(handleKeys, inputProps.onKeyDown, {
+
+  const handleKeyDown = composeEventHandlers(inputProps.onKeyDown, handleKeys, {
     // Pass prevented events to the combobox (e.g., the Escape key doesn't work otherwise, as it's blocked by Radix)
     checkForDefaultPrevented: false,
   });
+
   return (
     <ComboboxRoot open={combobox.isOpen}>
       <div {...combobox.getComboboxProps()}>
@@ -337,7 +343,6 @@ const AdvancedPropertyValue = ({
       variant="chromeless"
       text="mono"
       fieldSizing="content"
-      onChangeComplete={onChangeComplete}
       prefix={
         isColor && (
           <ColorPopover

From a4a4cc1e6e255ad3e25eed515c716ce93cea647a Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 9 Feb 2025 17:07:43 +0000
Subject: [PATCH 14/18] use real input to tab into it

---
 .../sections/advanced/advanced.tsx            | 66 +++++++++----------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 4556e67eb5aa..e7d53da480d2 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -184,8 +184,9 @@ const AddProperty = forwardRef<
     onSelect: (value: StyleProperty) => void;
     onClose: () => void;
     onSubmit: (value: string) => void;
+    onFocus: () => void;
   }
->(({ onSelect, onClose, onSubmit }, forwardedRef) => {
+>(({ onSelect, onClose, onSubmit, onFocus }, forwardedRef) => {
   const [item, setItem] = useState<SearchItem>({
     value: "",
     label: "",
@@ -233,6 +234,7 @@ const AddProperty = forwardRef<
         <ComboboxAnchor>
           <InputField
             {...inputProps}
+            onFocus={onFocus}
             inputRef={forwardedRef}
             onKeyDown={handleKeyDown}
             autoFocus={true}
@@ -583,43 +585,41 @@ export const Section = () => {
             }}
           />
         ))}
-        {isAdding ? (
-          <Box css={{ paddingTop: theme.spacing[3] }}>
-            <AddProperty
-              onSelect={(property) => {
-                setIsAdding(false);
-                const isNew = advancedProperties.includes(property) === false;
-                if (isNew) {
-                  setProperty(property)(
-                    { type: "guaranteedInvalid" },
-                    { listed: true }
-                  );
-                }
-                addRecentProperties([property]);
-              }}
-              onSubmit={(value) => {
-                setIsAdding(false);
-                const styles = insertStyles(value);
-                const insertedProperties = styles.map(
-                  ({ property }) => property
+        <Box
+          css={
+            isAdding
+              ? { paddingTop: theme.spacing[3] }
+              : // We hide it visually so you can tab into it to get shown.
+                { overflow: "hidden", height: 0 }
+          }
+        >
+          <AddProperty
+            onSelect={(property) => {
+              setIsAdding(false);
+              const isNew = advancedProperties.includes(property) === false;
+              if (isNew) {
+                setProperty(property)(
+                  { type: "guaranteedInvalid" },
+                  { listed: true }
                 );
-                addRecentProperties(insertedProperties);
-              }}
-              onClose={() => {
-                setIsAdding(false);
-              }}
-              ref={addPropertyInputRef}
-            />
-          </Box>
-        ) : (
-          // This empty div allows showing the add property input on tab in the last value
-          <div
-            tabIndex={0}
+              }
+              addRecentProperties([property]);
+            }}
+            onSubmit={(value) => {
+              setIsAdding(false);
+              const styles = insertStyles(value);
+              const insertedProperties = styles.map(({ property }) => property);
+              addRecentProperties(insertedProperties);
+            }}
+            onClose={() => {
+              setIsAdding(false);
+            }}
             onFocus={() => {
               setIsAdding(true);
             }}
+            ref={addPropertyInputRef}
           />
-        )}
+        </Box>
       </Box>
       {recentProperties.length > 0 && <Separator />}
       <Box css={{ paddingInline: theme.panel.paddingInline }}>

From 2dde0c5eeaf7b3463db7e3677a463bade73a118c Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 9 Feb 2025 19:14:20 +0000
Subject: [PATCH 15/18] remove autofocus, since its now rendered all the time

---
 .../builder/features/style-panel/sections/advanced/advanced.tsx  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index e7d53da480d2..3bda8fbb25c5 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -237,7 +237,6 @@ const AddProperty = forwardRef<
             onFocus={onFocus}
             inputRef={forwardedRef}
             onKeyDown={handleKeyDown}
-            autoFocus={true}
             placeholder="Add styles"
             suffix={<NestedInputButton {...combobox.getToggleButtonProps()} />}
           />

From e4b101a8a7ab898f70c6e33aec7b464b978bc3ea Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 9 Feb 2025 19:57:03 +0000
Subject: [PATCH 16/18] clear the add css input

---
 .../sections/advanced/advanced.tsx            | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 3bda8fbb25c5..3d9b9b819583 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -200,7 +200,10 @@ const AddProperty = forwardRef<
     getItemProps: () => ({ text: "sentence" }),
     match: matchOrSuggestToCreate,
     onChange: (value) => setItem({ value: value ?? "", label: value ?? "" }),
-    onItemSelect: (item) => onSelect(item.value as StyleProperty),
+    onItemSelect: (item) => {
+      clear();
+      onSelect(item.value as StyleProperty);
+    },
   });
 
   const descriptionItem = combobox.items[combobox.highlightedIndex];
@@ -208,16 +211,22 @@ const AddProperty = forwardRef<
   const descriptions = combobox.items.map(getNewPropertyDescription);
   const inputProps = combobox.getInputProps();
 
+  const clear = () => {
+    setItem({ value: "", label: "" });
+  };
+
   const handleKeys = (event: KeyboardEvent) => {
     // Dropdown might handle enter or escape.
     if (event.defaultPrevented) {
       return;
     }
     if (event.key === "Enter") {
+      clear();
       onSubmit(item.value);
       return;
     }
     if (event.key === "Escape") {
+      clear();
       onClose();
     }
   };
@@ -386,6 +395,7 @@ const AdvancedPropertyValue = ({
         }
       }}
       deleteProperty={deleteProperty}
+      onChangeComplete={onChangeComplete}
     />
   );
 };
@@ -554,15 +564,17 @@ export const Section = () => {
     );
   };
 
+  const showAddProperty = () => {
+    setIsAdding(true);
+    // User can click twice on the add button, so we need to focus the input on the second click after autoFocus isn't working.
+    addPropertyInputRef.current?.focus();
+  };
+
   return (
     <AdvancedStyleSection
       label="Advanced"
       properties={advancedProperties}
-      onAdd={() => {
-        setIsAdding(true);
-        // User can click twice on the add button, so we need to focus the input on the second click after autoFocus isn't working.
-        addPropertyInputRef.current?.focus();
-      }}
+      onAdd={showAddProperty}
     >
       <Box css={{ paddingInline: theme.panel.paddingInline }}>
         {recentProperties.map((property, index, properties) => (
@@ -572,7 +584,7 @@ export const Section = () => {
             autoFocus={index === properties.length - 1}
             onChangeComplete={(event) => {
               if (event.type === "enter") {
-                setIsAdding(true);
+                showAddProperty();
               }
             }}
             onReset={() => {
@@ -614,7 +626,9 @@ export const Section = () => {
               setIsAdding(false);
             }}
             onFocus={() => {
-              setIsAdding(true);
+              if (isAdding === false) {
+                showAddProperty();
+              }
             }}
             ref={addPropertyInputRef}
           />

From 2e88a68ac61e3c45680863b6ae9a5569574f7da6 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 9 Feb 2025 20:15:04 +0000
Subject: [PATCH 17/18] consistent font and casing

---
 apps/builder/app/builder/features/style-panel/style-panel.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/builder/app/builder/features/style-panel/style-panel.tsx b/apps/builder/app/builder/features/style-panel/style-panel.tsx
index 605aa8ccb0c5..bdf142ddf8f9 100644
--- a/apps/builder/app/builder/features/style-panel/style-panel.tsx
+++ b/apps/builder/app/builder/features/style-panel/style-panel.tsx
@@ -81,7 +81,8 @@ export const ModeMenu = () => {
             onFocus={() => setFocusedValue("focus")}
           >
             <Flex justify="between" grow>
-              <Text>Focus mode</Text> <Kbd value={["alt", "shift", "s"]} />
+              <Text variant="labelsTitleCase">Focus mode</Text>
+              <Kbd value={["alt", "shift", "s"]} />
             </Flex>
           </DropdownMenuRadioItem>
           {isFeatureEnabled("stylePanelAdvancedMode") && (

From 4b2d0352a743ab99e46491e6bcea93628119d0b3 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 9 Feb 2025 20:28:13 +0000
Subject: [PATCH 18/18] don't show preset values

---
 .../style-panel/sections/advanced/advanced.tsx     | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
index 3d9b9b819583..6534e6b099b8 100644
--- a/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx
@@ -446,14 +446,12 @@ const $advancedProperties = computed(
     }
     const advancedProperties = new Set<StyleProperty>();
     for (const { property, listed } of definedStyles) {
-      // In advanced mode we show all defined properties
-      if (settings.stylePanelMode === "advanced") {
-        advancedProperties.add(property);
-        continue;
-      }
-      // exclude properties from style panel UI unless edited in advanced section
-      if (baseProperties.has(property) === false || listed) {
-        advancedProperties.add(property);
+      if (baseProperties.has(property) === false) {
+        // When property is listed, it was added from advanced panel.
+        // If we are in advanced mode, we show them all.
+        if (listed || settings.stylePanelMode === "advanced") {
+          advancedProperties.add(property);
+        }
       }
     }
     // In advanced mode we assume user knows the properties they need, so we don't need to show these.