Update canvas zoom interval value and Add sm mode to StudioCard (#10851)

* 420f23 Fix lint issues

* 15fe0a Add size variant to StudioCard

* 509946 Fix lint issues

* 1a2734 Bump UI version

* 055844 Update Canvas zoom interval value and Add Small mode to StudioCard

Author: praneshg239

packages/pipeline-graph/src/context/canvas-provider.tsx

@@ -134,11 +134,11 @@ export const CanvasProvider = ({ children, config: configFromProps, id = '' }: C
   }, [])
 
   const increase = useCallback(() => {
-    scaleInc(0.2)
+    scaleInc(0.25)
   }, [scaleInc])
 
   const decrease = useCallback(() => {
-    scaleInc(-0.2)
+    scaleInc(-0.25)
   }, [scaleInc])
 
   const reset = useCallback(() => {

packages/ui/src/components/studio-card/studio-card-types.ts

@@ -10,6 +10,7 @@ export interface StudioCardRootProps {
   // It will be updated to a generic value later
   variant?: 'default' | 'stage'
   execution?: boolean
+  size?: 'sm' | 'md'
 }
 
 export interface StudioCardHeaderProps {

packages/ui/src/components/studio-card/studio-card.tsx

@@ -2,6 +2,7 @@ import { PropsWithChildren, useCallback, useMemo, useRef, useState, type JSX } f
 
 import { IconV2, IconV2NamesType, StatusBadge, Text } from '@/components'
 import { cn } from '@/utils'
+import { cva } from 'class-variance-authority'
 
 import {
   StudioCardContentProps,
@@ -19,6 +20,18 @@ import {
  * =================
  */
 
+const sizeVariants = cva('', {
+  variants: {
+    size: {
+      sm: 'cn-studio-card-sm',
+      md: ''
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+})
+
 const CLICK_DRAG_THRESHOLD = 5
 
 function Root({
@@ -28,14 +41,15 @@ function Root({
   theme = 'default',
   selected = false,
   variant = 'default',
-  execution = false
+  execution = false,
+  size = 'md'
 }: PropsWithChildren<StudioCardRootProps>): JSX.Element {
   // Used to determine if a click was a drag or a click
   const dragPos = useRef({ x: 0, y: 0 })
 
   return (
     <div
-      className={cn('cn-studio-card cursor-default', {
+      className={cn('cn-studio-card cursor-default', sizeVariants({ size }), {
         'cn-studio-card-execution': execution,
         'cn-studio-card-group': isGroupCard,
         'cn-studio-card-stage': variant === 'stage'

packages/ui/tailwind-utils-config/components/studio-card.ts

@@ -36,6 +36,10 @@ export default {
     maxWidth: '220px',
     height: 'var(--cn-size-40)',
 
+    '&.cn-studio-card-sm': {
+      borderWidth: '2px !important',
+    },
+
     // Selected state with theme-based borders
     '&[data-selected="true"]': {
       '&[data-theme="default"]': {