feat: release design system engine, studio and component contracts

packages/ui/components/Image.wrn

@@ -31,7 +31,7 @@ component Image {
       data-color='{color}'
       data-fit='{fit}'
       data-rounded='{rounded}'
-    >
+     data-wrn-owner="Image" data-wrn-part="root" data-wrn-component="Image" data-wrn-axis-size='{size}' data-wrn-axis-color='{color}' data-wrn-axis-rounded='{rounded}'>
       <img
         class="wrn-image__img"
         data-show="src"
@@ -41,15 +41,15 @@ component Image {
         height='{height}'
         loading='{loading}'
         decoding="async"
-      />
+       data-wrn-owner="Image" data-wrn-part="img" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-rounded="{rounded}"/>
 
       <div
         class="wrn-image__placeholder"
         data-show="!src"
         role="img"
         aria-label='{alt || "Image placeholder"}'
-      >
-        <span class="icon-[lucide--image] wrn-image__placeholder-icon" aria-hidden="true"></span>
+       data-wrn-owner="Image" data-wrn-part="placeholder" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-rounded="{rounded}">
+        <span class="icon-[lucide--image] wrn-image__placeholder-icon" aria-hidden="true" data-wrn-owner="Image" data-wrn-part="placeholderIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}" data-wrn-axis-rounded="{rounded}"></span>
       </div>
 
       <slot></slot>