refactor(ui): lazy-init object refs and use size-* for equal height and width

useRef(new X()) built a throwaway X on every render; the refs now
lazy-init through ??= as sim-react-performance.md prescribes. Equal
h-N w-N pairs become size-N per sim-styling.md.

Author: waleedlatif1

apps/docs/components/ui/video-placeholder.tsx

@@ -113,7 +113,7 @@ export function VideoPlaceholder({
               pendingSeek.current = null
             }
           }}
-          className='h-full w-full border-0'
+          className='size-full border-0'
         >
           <track
             kind='captions'

apps/docs/components/workflow-preview/block-preview.tsx

@@ -63,7 +63,7 @@ export function BlockPreview({ type }: BlockPreviewProps) {
             panOnDrag={false}
             panOnScroll={false}
             preventScrolling={false}
-            className='h-full w-full [--text-muted:var(--text-secondary)]! [--xy-background-color:var(--bg)]'
+            className='size-full [--text-muted:var(--text-secondary)]! [--xy-background-color:var(--bg)]'
           />
         </ReactFlowProvider>
       </LazyMotion>

apps/docs/components/workflow-preview/docs-container-node.tsx

@@ -39,7 +39,7 @@ export const DocsContainerNode = memo(function DocsContainerNode({
   }
 
   return (
-    <div className={cn('h-full w-full', data.isDimmed && DIMMED_PREVIEW_CLASS)}>
+    <div className={cn('size-full', data.isDimmed && DIMMED_PREVIEW_CLASS)}>
       <SubflowNodeView
         id={id}
         data={subflowData}

apps/docs/components/workflow-preview/workflow-preview.tsx

@@ -224,7 +224,7 @@ function PreviewFlow({
         autoPanOnNodeDrag={false}
         proOptions={PRO_OPTIONS}
         minZoom={0.1}
-        className='h-full w-full [--text-muted:var(--text-secondary)]! [--xy-background-color:var(--bg)]'
+        className='size-full [--text-muted:var(--text-secondary)]! [--xy-background-color:var(--bg)]'
       >
         <FitViewAfterInit options={interactive ? LIGHTBOX_FIT_VIEW_OPTIONS : FIT_VIEW_OPTIONS} />
       </ReactFlow>
@@ -329,7 +329,7 @@ export function WorkflowPreview({
         className='fixed inset-0 m-auto h-[86dvh] max-h-none w-[92vw] max-w-none overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--bg)] p-0 text-[var(--text-body)] backdrop:bg-black/70 backdrop:backdrop-blur-sm'
       >
         {expanded && (
-          <div className='relative flex h-full w-full flex-col sm:flex-row'>
+          <div className='relative flex size-full flex-col sm:flex-row'>
             <div className='relative min-h-0 min-w-0 flex-1'>
               <div className='pointer-events-none absolute top-0 right-0 left-0 z-10 flex items-center justify-between px-4 py-3'>
                 <span className='text-[var(--text-muted)] text-small'>{workflow.name}</span>

apps/sim/app/(interfaces)/chat/components/input/input.tsx

@@ -177,10 +177,10 @@ export const ChatInput: React.FC<{
                         <img
                           src={file.dataUrl}
                           alt={file.name}
-                          className='h-full w-full object-cover'
+                          className='size-full object-cover'
                         />
                       ) : (
-                        <div className='flex h-full w-full flex-col items-center justify-center gap-0.5 text-[var(--text-muted)]'>
+                        <div className='flex size-full flex-col items-center justify-center gap-0.5 text-[var(--text-muted)]'>
                           <Paperclip className='size-[18px]' />
                           <span className='max-w-[48px] truncate px-[2px] text-[9px]'>
                             {file.name.split('.').pop()}

apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-chat-loop.tsx

@@ -179,7 +179,7 @@ export function HeroChatLoop({
 
   return (
     <div
-      className='relative flex h-full w-full flex-col bg-[var(--bg)]'
+      className='relative flex size-full flex-col bg-[var(--bg)]'
       data-chat-view={welcome ? 'welcome' : 'conversation'}
       data-chat-phase={phase}
     >

apps/sim/app/(landing)/components/hero/components/hero-platform-loop/hero-platform-loop.tsx

@@ -266,7 +266,7 @@ export function HeroPlatformLoop() {
       >
         <div
           ref={previewContainerRef}
-          className='relative flex h-full w-full overflow-hidden rounded-[6px] border border-[var(--border)] bg-[var(--bg)] [--preview-resource-width:50%]'
+          className='relative flex size-full overflow-hidden rounded-[6px] border border-[var(--border)] bg-[var(--bg)] [--preview-resource-width:50%]'
         >
           <div className={cn('relative h-full min-w-0 flex-1', stageOpen && 'max-lg:hidden')}>
             <HeroChatLoop
@@ -338,7 +338,7 @@ export function HeroPlatformLoop() {
           >
             <div
               className={cn(
-                'h-full w-full transition-[transform,opacity] duration-[480ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
+                'size-full transition-[transform,opacity] duration-[480ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none',
                 stageOpen ? 'translate-x-0 opacity-100' : 'translate-x-6 opacity-0'
               )}
             >

apps/sim/app/(landing)/components/hero/components/hero-platform-loop/stage-block-card.tsx

@@ -350,7 +350,7 @@ export function StageBlockCard({
           if (onSelect) handleKeyboardActivation(event, () => onSelect(block.id))
         }}
         className={cn(
-          'relative h-full w-full rounded-2xl',
+          'relative size-full rounded-2xl',
           onSelect && 'cursor-pointer focus-visible:outline-none'
         )}
       >

apps/sim/app/(landing)/components/navbar/components/nav-menu-chip/components/nav-menu-preview/components/workflow-menu-preview/workflow-menu-preview.tsx

@@ -31,12 +31,13 @@ interface WorkflowMenuPreviewProps {
 
 /** A cropped production canvas with a clear center and progressively softened inner edges. */
 export function WorkflowMenuPreview({ layout = 'menu', onReady }: WorkflowMenuPreviewProps) {
-  const readyBlocksRef = useRef(new Set<string>())
+  const readyBlocksRef = useRef<Set<string> | null>(null)
+  const readyBlocks = (readyBlocksRef.current ??= new Set())
 
   const handleBlockReady = (blockId: string) => {
-    if (readyBlocksRef.current.has(blockId)) return
-    readyBlocksRef.current.add(blockId)
-    if (readyBlocksRef.current.size === BLOCKS.length) onReady?.()
+    if (readyBlocks.has(blockId)) return
+    readyBlocks.add(blockId)
+    if (readyBlocks.size === BLOCKS.length) onReady?.()
   }
 
   return (

apps/sim/app/(landing)/components/platform-hero-visual/platform-hero-visual.tsx

@@ -20,7 +20,7 @@ interface PlatformHeroVisualProps {
  */
 export function PlatformHeroVisual({ children }: PlatformHeroVisualProps) {
   return (
-    <div className='relative h-full w-full'>
+    <div className='relative size-full'>
       <Image
         fill
         priority