experimental: migrate size section to style object model (#4073)

Ref https://github.com/webstudio-is/webstudio/issues/1536
https://github.com/webstudio-is/webstudio/issues/3399

Most changes is object position switching to new style engine.

<img width="559" alt="Screenshot 2024-09-05 at 15 58 13"
src="https://github.com/user-attachments/assets/2ada00a8-37f1-40e1-a001-425753221198">

apps/builder/app/builder/features/style-panel/controls/position/position-control.tsx

@@ -1,15 +1,19 @@
 import { propertyDescriptions } from "@webstudio-is/css-data";
 import {
   TupleValue,
-  type StyleValue,
   TupleValueItem,
+  type StyleValue,
+  type StyleProperty,
 } from "@webstudio-is/css-engine";
 import { Flex, Grid, PositionGrid } from "@webstudio-is/design-system";
-import type { ControlProps } from "../types";
+import type { ComputedStyleDecl } from "~/shared/style-object-model";
 import { styleConfigByName } from "../../shared/configs";
-import { getStyleSource } from "../../shared/style-info";
 import { CssValueInputContainer } from "../../shared/css-value-input";
-import type { SetValue } from "../../shared/use-style-data";
+import {
+  deleteProperty,
+  setProperty,
+  type SetValue,
+} from "../../shared/use-style-data";
 import { PropertyInlineLabel } from "../../property-label";
 
 const toPosition = (value: TupleValue) => {
@@ -46,16 +50,14 @@ const toTuple = (
 };
 
 export const PositionControl = ({
-  currentStyle,
   property,
-  setProperty,
-  deleteProperty,
-  isAdvanced,
-}: ControlProps) => {
+  styleDecl,
+}: {
+  property: StyleProperty;
+  styleDecl: ComputedStyleDecl;
+}) => {
   const { items } = styleConfigByName(property);
-  const styleInfo = currentStyle[property];
-  const value = toTuple(styleInfo?.value);
-  const styleSource = getStyleSource(styleInfo);
+  const value = toTuple(styleDecl.cascadedValue);
   const keywords = items.map((item) => ({
     type: "keyword" as const,
     value: item.name,
@@ -82,7 +84,6 @@ export const PositionControl = ({
         }
         properties={[property]}
       />
-
       <Flex gap="6">
         <PositionGrid
           selectedPosition={toPosition(value)}
@@ -97,9 +98,7 @@ export const PositionControl = ({
           }}
         />
         <Grid
-          css={{
-            gridTemplateColumns: "max-content 1fr",
-          }}
+          css={{ gridTemplateColumns: "max-content 1fr" }}
           align="center"
           gapX="2"
         >
@@ -108,31 +107,26 @@ export const PositionControl = ({
             description="Left position offset"
             properties={[property]}
           />
-
           <CssValueInputContainer
             property={property}
-            styleSource={styleSource}
+            styleSource={styleDecl.source.name}
             keywords={keywords}
             value={value.value[0]}
             setValue={setValueX}
             deleteProperty={deleteProperty}
-            disabled={isAdvanced}
           />
-
           <PropertyInlineLabel
             label="Top"
             description="Top position offset"
             properties={[property]}
           />
-
           <CssValueInputContainer
             property={property}
-            styleSource={styleSource}
+            styleSource={styleDecl.source.name}
             keywords={keywords}
             value={value.value[1]}
             setValue={setValueY}
             deleteProperty={deleteProperty}
-            disabled={isAdvanced}
           />
         </Grid>
       </Flex>

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

@@ -7,13 +7,7 @@ import {
   Separator,
   styled,
 } from "@webstudio-is/design-system";
-import type { SectionProps } from "../shared/section";
-import {
-  PositionControl,
-  SelectControl,
-  TextControl,
-  type ControlProps,
-} from "../../controls";
+import { PositionControl, SelectControl, TextControl } from "../../controls";
 import {
   EyeconOpenIcon,
   EyeconClosedIcon,
@@ -24,10 +18,11 @@ import {
 import { StyleSection } from "../../shared/style-section";
 import { theme } from "@webstudio-is/design-system";
 import { ToggleGroupControl } from "../../controls/toggle-group/toggle-group-control";
-import { getStyleSourceColor } from "../../shared/style-info";
 import { FloatingPanel } from "~/builder/shared/floating-panel";
 import { humanizeString } from "~/shared/string-utils";
 import { PropertyLabel } from "../../property-label";
+import { useComputedStyleDecl } from "../../shared/model";
+import { deleteProperty } from "../../shared/use-style-data";
 
 const SizeProperty = ({ property }: { property: StyleProperty }) => {
   return (
@@ -44,40 +39,24 @@ const SizeProperty = ({ property }: { property: StyleProperty }) => {
   );
 };
 
-const ObjectPosition = ({
-  property,
-  currentStyle,
-  setProperty,
-  deleteProperty,
-  isAdvanced,
-}: ControlProps) => {
-  const styleSourceColor = getStyleSourceColor({
-    properties: [property],
-    currentStyle,
-  });
-
+const ObjectPosition = () => {
+  const styleDecl = useComputedStyleDecl("objectPosition");
   return (
     <Flex justify="end">
       <FloatingPanel
         title="Object Position"
         content={
           <Flex css={{ px: theme.spacing[9], py: theme.spacing[5] }}>
-            <PositionControl
-              property={property}
-              currentStyle={currentStyle}
-              setProperty={setProperty}
-              deleteProperty={deleteProperty}
-              isAdvanced={isAdvanced}
-            />
+            <PositionControl property="objectPosition" styleDecl={styleDecl} />
           </Flex>
         }
       >
         <IconButton
-          variant={styleSourceColor}
+          variant={styleDecl.source.name}
           onClick={(event) => {
             if (event.altKey) {
               event.preventDefault();
-              deleteProperty(property);
+              deleteProperty("objectPosition");
             }
           }}
         >
@@ -108,11 +87,7 @@ const SectionLayout = styled(Grid, {
   px: theme.spacing[9],
 });
 
-export const Section = ({
-  currentStyle,
-  setProperty,
-  deleteProperty,
-}: SectionProps) => {
+export const Section = () => {
   return (
     <StyleSection label="Size" properties={properties} fullWidth>
       <SectionLayout columns={2}>
@@ -178,12 +153,7 @@ export const Section = ({
           description={propertyDescriptions.objectPosition}
           properties={["objectPosition"]}
         />
-        <ObjectPosition
-          property="objectPosition"
-          currentStyle={currentStyle}
-          setProperty={setProperty}
-          deleteProperty={deleteProperty}
-        />
+        <ObjectPosition />
       </SectionLayout>
     </StyleSection>
   );