feat: enhance SummaryCard with configurable description lines and loading skeletons

- Introduced a new `descriptionLines` prop to the SummaryCard component, allowing users to specify the number of lines for the description text, which applies to both the content and loading skeleton.
- Updated CSS to support dynamic line clamping based on the new prop, improving layout consistency during loading states.
- Added a fade-in animation for loading skeletons to enhance user experience during content transitions.
- Implemented new skeleton image containers with aspect ratios to prevent layout shifts, ensuring a smoother loading experience.
- Expanded Storybook examples to demonstrate the new features and their impact on layout stability.

These updates improve the flexibility and visual consistency of the SummaryCard component, particularly in loading scenarios.

Author: JakeLin

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

@@ -234,9 +234,10 @@
   color: var(--ai-color-text-secondary);
   margin: 0; /* Remove default browser margin */
 
-  /* Clamp to 2 lines with ellipsis */
+  /* Clamp to configurable number of lines with ellipsis */
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: var(--description-lines, 2);
+  line-clamp: var(--description-lines, 2);
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
@@ -294,6 +295,36 @@
   display: flex;
   flex-direction: column;
   gap: var(--ai-spacing-8); /* 16px gap between major sections - same as card */
+  animation: fadeInSkeleton 500ms ease-out forwards;
+  animation-delay: 100ms; /* Prevents flash on fast loads */
+}
+
+@keyframes fadeInSkeleton {
+  0%, 50% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+/* Skeleton image containers with aspect-ratio to prevent layout shift */
+.skeletonImageContainer {
+  width: 100%;
+  border-radius: 16px;
+  overflow: hidden;
+}
+
+.skeletonImageContainer[data-aspect='auto'] {
+  height: 244px;
+}
+
+.skeletonImageContainer[data-aspect='16/9'] {
+  aspect-ratio: 16 / 9;
+}
+
+.skeletonImageContainer[data-aspect='4/3'] {
+  aspect-ratio: 4 / 3;
+}
+
+.skeletonImageContainer[data-aspect='1/1'] {
+  aspect-ratio: 1 / 1;
 }
 
 /* Empty State */

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

@@ -18,6 +18,7 @@ declare const styles: {
   readonly button: string;
   readonly overflowIndicator: string;
   readonly loadingContainer: string;
+  readonly skeletonImageContainer: string;
   readonly visuallyHidden: string;
   readonly errorContainer: string;
   readonly emptyContainer: string;