feat: add topOverlay support to SummaryCard with helper component

Add flexible image overlay system for displaying logos, badges, and custom content on top of SummaryCard images.

Features:
- `topOverlay` prop accepts any React.ReactNode for maximum flexibility
- `SummaryCard.Overlay` helper component with preset styles:
  - Background presets: 'dark' | 'light' | 'transparent' | custom color
  - Alignment options: 'left' | 'center' | 'right'
  - Customizable height and padding
- Works with both single images and grid layouts
- Compatible with all card variants (default, flat) and sizes (default, compact)
- Proper z-index layering above images, below loading/error states

Implementation:
- Added `topOverlay?: React.ReactNode` prop to SummaryCardProps
- Created `SummaryCardOverlay` component with comprehensive props interface
- Added CSS for absolute positioning with proper border-radius matching
- Exported `SummaryCardOverlayProps` type from package index

Testing:
- Added 82 comprehensive tests (up from 79)
- New tests cover flat variant, compact size, and aspect ratio compatibility
- All overlay features fully tested (background, alignment, sizing)

Documentation:
- 8 Storybook examples demonstrating various use cases:
  - Logo overlays with dark/light backgrounds
  - Custom background colors
  - Grid images with left-aligned badges
  - Flat and compact variant examples
- Complete JSDoc with usage examples
- PropsTable updated with topOverlay documentation

Example usage:
```tsx
<SummaryCard
  images="property.jpg"
  title="Beach House"
  topOverlay={
    <SummaryCard.Overlay background="dark" height={40} align="center">
      <img src="logo.png" alt="Company" style={{ height: 24 }} />
    </SummaryCard.Overlay>
  }
/>
```

Files changed:
- SummaryCard.tsx: Component implementation
- SummaryCard.module.css: Overlay positioning styles
- SummaryCard.stories.tsx: 8 comprehensive examples
- SummaryCard.test.tsx: 82 tests with variant coverage
- index.ts: Export SummaryCardOverlayProps type

Author: JakeLin

packages/ui/src/components/Card/SummaryCard.module.css

@@ -371,3 +371,21 @@
   white-space: nowrap;
   border: 0;
 }
+
+/* Top Overlay */
+.topOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  z-index: 1; /* Above image, below loading/error states */
+  border-radius: 16px 16px 0 0; /* Match image top corners */
+  pointer-events: auto; /* Allow interaction if needed */
+}
+
+/* Image Section - Make it position relative for absolute overlay positioning */
+.imageSection {
+  position: relative;
+}

packages/ui/src/components/Card/SummaryCard.module.css.d.ts

@@ -25,6 +25,7 @@ declare const styles: {
   readonly emptyState: string;
   readonly emptyTitle: string;
   readonly emptyMessage: string;
+  readonly topOverlay: string;
 };
 
 export default styles;