@agentiffai/design 0.1.9 → 0.1.11

package/dist/index.d.cts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AriaTextFieldProps } from '@react-aria/textfield';
-import React__default from 'react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
 export { ActionButtons, ActionButtonsProps, BrandType, CategoryItem, CategoryNav, CategoryNavProps, CategorySubItem, Icon, IconName, IconNames, IconProps, Layout, LayoutProps, NavHorizontal, NavHorizontalProps, NavVertical, NavVerticalProps, OAuthConnectionData, PaneMenus, PaneMenusProps, PaneSectionHeader, PaneSectionHeaderProps, ServiceBrand, ServiceIcon, ServiceIconProps, WorkflowStatusCard, WorkflowStatusCardProps } from './layout/index.cjs';
 import { AriaButtonProps } from '@react-aria/button';
 export { GlobalStyle, darkTheme, lightTheme, tokens } from './theme/index.cjs';
-export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, w as CopilotUserMessage, U as CopilotUserMessageProps, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, K as Window, W as WindowProps } from './Window-CF5y1_Og.cjs';
+export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, w as CopilotUserMessage, U as CopilotUserMessageProps, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, K as Window, W as WindowProps } from './Window-BcTRumpc.cjs';
 export { FacebookIcon, FacebookIconProps, FacebookIconVariant, GmailIcon, GmailIconProps, GmailIconVariant, InstagramIcon, InstagramIconProps, InstagramVariant, LinkedInIcon, LinkedInIconProps, LinkedInIconVariant, RedditIcon, RedditIconProps, RedditIconVariant, SlackIcon, SlackIconProps, SlackIconVariant, TelegramIcon, TelegramIconProps, TelegramIconVariant, WhatsAppIcon, WhatsAppIconProps, WhatsAppIconVariant, XIcon, XIconProps, XIconVariant, YouTubeIcon, YouTubeIconProps, YouTubeIconVariant } from './icons/index.cjs';
 export { WorkflowCard, WorkflowCardProps, WorkflowErrorAlert, WorkflowErrorAlertProps, WorkflowIntegration, WorkflowProgressBar, WorkflowProgressBarProps, WorkflowResultPanel, WorkflowResultPanelProps, WorkflowStatusBadge, WorkflowStatusBadgeProps } from './workflow/index.cjs';
 import '@react-types/button';
@@ -163,7 +164,7 @@ interface UserMessageProps extends AriaButtonProps {
     /**
      * The message text to display
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Additional CSS class name
      */
@@ -184,6 +185,8 @@ interface UserMessageProps extends AriaButtonProps {
  * pill-shaped design with fully rounded ends, and white text. It uses React ARIA
  * for accessibility and supports keyboard navigation.
  *
+ * Memoized to prevent unnecessary re-renders during parent updates.
+ *
  * @example
  * ```tsx
  * <UserMessage onPress={() => console.log('clicked')}>
@@ -191,10 +194,8 @@ interface UserMessageProps extends AriaButtonProps {
  * </UserMessage>
  * ```
  */
-declare function UserMessage({ children, className, isPressed, onPress, ...ariaProps }: UserMessageProps): react_jsx_runtime.JSX.Element;
-declare namespace UserMessage {
-    var displayName: string;
-}
+declare function UserMessageBase({ children, className, isPressed, onPress, ...ariaProps }: UserMessageProps): react_jsx_runtime.JSX.Element;
+declare const UserMessage: React.MemoExoticComponent<typeof UserMessageBase>;
 
 /**
  * ConnectionStatusBadge Component
@@ -475,6 +476,10 @@ interface PlatformGridProps {
     onEditContentChange?: (content: string) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
+    /** Currently active/selected post index */
+    activeIndex?: number;
+    /** Callback when a post is clicked/selected */
+    onActiveChange?: (index: number) => void;
 }
 /**
  * PlatformGrid displays all proposed posts in a responsive grid layout.
@@ -504,7 +509,7 @@ interface SocialMediaCanvasProps {
     emptyTitle?: string;
     /** Empty state description */
     emptyDescription?: string;
-    /** Callback when active post changes in carousel mode */
+    /** Callback when active post changes */
     onActiveChange?: (index: number) => void;
     /** Whether to show the view mode toggle */
     showViewToggle?: boolean;
@@ -516,6 +521,8 @@ interface SocialMediaCanvasProps {
     onEditContentChange?: (content: string) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
+    /** Currently active post index (for grid mode) */
+    activeIndex?: number;
 }
 /**
  * SocialMediaCanvas displays social media post previews in carousel or grid mode.

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { AriaTextFieldProps } from '@react-aria/textfield';
-import React__default from 'react';
+import * as React from 'react';
+import React__default, { ReactNode } from 'react';
 export { ActionButtons, ActionButtonsProps, BrandType, CategoryItem, CategoryNav, CategoryNavProps, CategorySubItem, Icon, IconName, IconNames, IconProps, Layout, LayoutProps, NavHorizontal, NavHorizontalProps, NavVertical, NavVerticalProps, OAuthConnectionData, PaneMenus, PaneMenusProps, PaneSectionHeader, PaneSectionHeaderProps, ServiceBrand, ServiceIcon, ServiceIconProps, WorkflowStatusCard, WorkflowStatusCardProps } from './layout/index.js';
 import { AriaButtonProps } from '@react-aria/button';
 export { GlobalStyle, darkTheme, lightTheme, tokens } from './theme/index.js';
-export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, w as CopilotUserMessage, U as CopilotUserMessageProps, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, K as Window, W as WindowProps } from './Window-CF5y1_Og.js';
+export { A as Action, c as ActionVariant, d as Actions, a as ActionsLayout, b as ActionsProps, f as AgentState, e as AgentStateProps, q as AssistantMessage, m as AssistantMessageProps, i as Button, B as ButtonProps, g as ButtonSize, h as ButtonVariant, w as CopilotUserMessage, U as CopilotUserMessageProps, r as FileAttachment, n as FileAttachmentProps, j as Footer, F as FooterProps, k as Header, H as HeaderProps, l as Input, I as InputProps, M as Message, s as Messages, t as MessagesList, u as MessagesListContainer, v as MessagesListContent, o as MessagesListProps, p as MessagesProps, x as Response, R as ResponseProps, y as StreamErrorMessage, S as StreamErrorMessageProps, E as StreamStatusIndicator, D as StreamStatusIndicatorProps, C as StreamingText, z as StreamingTextProps, J as Suggestions, G as SuggestionsProps, K as Window, W as WindowProps } from './Window-BcTRumpc.js';
 export { FacebookIcon, FacebookIconProps, FacebookIconVariant, GmailIcon, GmailIconProps, GmailIconVariant, InstagramIcon, InstagramIconProps, InstagramVariant, LinkedInIcon, LinkedInIconProps, LinkedInIconVariant, RedditIcon, RedditIconProps, RedditIconVariant, SlackIcon, SlackIconProps, SlackIconVariant, TelegramIcon, TelegramIconProps, TelegramIconVariant, WhatsAppIcon, WhatsAppIconProps, WhatsAppIconVariant, XIcon, XIconProps, XIconVariant, YouTubeIcon, YouTubeIconProps, YouTubeIconVariant } from './icons/index.js';
 export { WorkflowCard, WorkflowCardProps, WorkflowErrorAlert, WorkflowErrorAlertProps, WorkflowIntegration, WorkflowProgressBar, WorkflowProgressBarProps, WorkflowResultPanel, WorkflowResultPanelProps, WorkflowStatusBadge, WorkflowStatusBadgeProps } from './workflow/index.js';
 import '@react-types/button';
@@ -163,7 +164,7 @@ interface UserMessageProps extends AriaButtonProps {
     /**
      * The message text to display
      */
-    children: React.ReactNode;
+    children: ReactNode;
     /**
      * Additional CSS class name
      */
@@ -184,6 +185,8 @@ interface UserMessageProps extends AriaButtonProps {
  * pill-shaped design with fully rounded ends, and white text. It uses React ARIA
  * for accessibility and supports keyboard navigation.
  *
+ * Memoized to prevent unnecessary re-renders during parent updates.
+ *
  * @example
  * ```tsx
  * <UserMessage onPress={() => console.log('clicked')}>
@@ -191,10 +194,8 @@ interface UserMessageProps extends AriaButtonProps {
  * </UserMessage>
  * ```
  */
-declare function UserMessage({ children, className, isPressed, onPress, ...ariaProps }: UserMessageProps): react_jsx_runtime.JSX.Element;
-declare namespace UserMessage {
-    var displayName: string;
-}
+declare function UserMessageBase({ children, className, isPressed, onPress, ...ariaProps }: UserMessageProps): react_jsx_runtime.JSX.Element;
+declare const UserMessage: React.MemoExoticComponent<typeof UserMessageBase>;
 
 /**
  * ConnectionStatusBadge Component
@@ -475,6 +476,10 @@ interface PlatformGridProps {
     onEditContentChange?: (content: string) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
+    /** Currently active/selected post index */
+    activeIndex?: number;
+    /** Callback when a post is clicked/selected */
+    onActiveChange?: (index: number) => void;
 }
 /**
  * PlatformGrid displays all proposed posts in a responsive grid layout.
@@ -504,7 +509,7 @@ interface SocialMediaCanvasProps {
     emptyTitle?: string;
     /** Empty state description */
     emptyDescription?: string;
-    /** Callback when active post changes in carousel mode */
+    /** Callback when active post changes */
     onActiveChange?: (index: number) => void;
     /** Whether to show the view mode toggle */
     showViewToggle?: boolean;
@@ -516,6 +521,8 @@ interface SocialMediaCanvasProps {
     onEditContentChange?: (content: string) => void;
     /** Whether content is being loaded/generated */
     isLoading?: boolean;
+    /** Currently active post index (for grid mode) */
+    activeIndex?: number;
 }
 /**
  * SocialMediaCanvas displays social media post previews in carousel or grid mode.

package/dist/index.js

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback, useEffect, useId, useMemo } from 'react';
+import { memo, useRef, useState, useEffect, useCallback, useId, useMemo } from 'react';
 import styled11, { keyframes, css, createGlobalStyle } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useButton } from '@react-aria/button';
@@ -1050,8 +1050,10 @@ var Container2 = styled11.nav`
   right: 0;
   background-color: ${tokens.colors.background.darker};
   border-top: 1px solid ${tokens.colors.border.subtle};
-  /* Reserve space for Android nav buttons (80px) below the actual navbar */
-  padding-bottom: max(80px, env(safe-area-inset-bottom, 80px));
+  /* Use safe-area-inset-bottom for Android navigation buttons.
+     The env() value will be 0 on devices without soft nav buttons.
+     Fallback to 0 if env() is not supported. */
+  padding-bottom: env(safe-area-inset-bottom, 0px);
   z-index: ${tokens.zIndex.sticky};
 
   /* Dark theme support */
@@ -2938,7 +2940,8 @@ function PaneMenus({
   isOAuthConnecting = false,
   isOAuthLoading = false,
   connectionsSlot,
-  workflowsSlot
+  workflowsSlot,
+  usageSlot
 }) {
   const state = useTabListState({
     selectedKey: activeTab,
@@ -2950,7 +2953,7 @@ function PaneMenus({
     children: /* @__PURE__ */ jsxs(Fragment, { children: [
       workflowsSlot && /* @__PURE__ */ jsx(Item, { title: "Workflows", children: workflowsSlot }, "workflows"),
       /* @__PURE__ */ jsx(Item, { title: "Runs", children: /* @__PURE__ */ jsx(RunsTabContent, { runs, onRunSelect }) }, "runs"),
-      /* @__PURE__ */ jsx(Item, { title: "Usage", children: /* @__PURE__ */ jsx(UsageTabContent, { currentUsage, maxUsage }) }, "usage"),
+      /* @__PURE__ */ jsx(Item, { title: "Usage", children: usageSlot || /* @__PURE__ */ jsx(UsageTabContent, { currentUsage, maxUsage }) }, "usage"),
       /* @__PURE__ */ jsx(Item, { title: "Connections", children: connectionsSlot || /* @__PURE__ */ jsx(
         ConnectionsTabContent,
         {
@@ -3723,7 +3726,7 @@ var StyledUserMessage = styled11.button`
     }
   }
 `;
-function UserMessage({
+function UserMessageBase({
   children,
   className,
   isPressed = false,
@@ -3754,6 +3757,7 @@ function UserMessage({
     }
   );
 }
+var UserMessage = memo(UserMessageBase);
 UserMessage.displayName = "UserMessage";
 
 // src/theme/darkTheme.ts
@@ -3945,25 +3949,28 @@ var IntegrationCard = ({
   className
 }) => {
   return /* @__PURE__ */ jsxs(Card, { className, "data-testid": "integration-card", children: [
-    /* @__PURE__ */ jsxs(Header, { children: [
+    status && /* @__PURE__ */ jsx(StatusRow, { children: status }),
+    /* @__PURE__ */ jsxs(ContentHeader, { children: [
       /* @__PURE__ */ jsx(IconWrapper3, { children: typeof icon === "string" ? /* @__PURE__ */ jsx(IconImage, { src: icon, alt: name }) : icon }),
       /* @__PURE__ */ jsxs(Info, { children: [
         /* @__PURE__ */ jsx(Name, { children: name }),
         description && /* @__PURE__ */ jsx(Description, { children: description })
-      ] }),
-      status && /* @__PURE__ */ jsx(StatusWrapper, { children: status })
+      ] })
     ] }),
-    children && /* @__PURE__ */ jsx(ContentRow, { children }),
-    actions && /* @__PURE__ */ jsx(ActionsRow, { children: actions })
+    (children || actions) && /* @__PURE__ */ jsxs(ActionsRow, { children: [
+      children,
+      actions
+    ] })
   ] });
 };
 IntegrationCard.displayName = "IntegrationCard";
 var Card = styled11.div`
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
   background: ${tokens.colors.background.dark};
-  border-radius: ${tokens.borderRadius.lg};
+  border-radius: ${tokens.borderRadius.xl};
   border: 1px solid ${tokens.colors.border.default};
   font-family: ${tokens.typography.fontFamily.primary};
   transition: border-color ${tokens.transitions.fast};
@@ -3972,10 +3979,13 @@ var Card = styled11.div`
     border-color: ${tokens.colors.border.hover};
   }
 `;
-var Header = styled11.div`
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: start;
+var StatusRow = styled11.div`
+  display: flex;
+  align-items: center;
+`;
+var ContentHeader = styled11.div`
+  display: flex;
+  align-items: flex-start;
   gap: ${tokens.spacing.sm};
 `;
 var IconWrapper3 = styled11.div`
@@ -3998,7 +4008,7 @@ var Info = styled11.div`
   flex-direction: column;
   gap: 2px;
   min-width: 0;
-  padding-top: 2px;
+  flex: 1;
 `;
 var Name = styled11.h3`
   margin: 0;
@@ -4013,21 +4023,10 @@ var Description = styled11.p`
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var StatusWrapper = styled11.div`
-  flex-shrink: 0;
-  padding-top: 2px;
-`;
-var ContentRow = styled11.div`
-  display: flex;
-  gap: ${tokens.spacing.sm};
-  align-items: center;
-  padding-left: calc(40px + ${tokens.spacing.sm});
-`;
 var ActionsRow = styled11.div`
   display: flex;
+  flex-direction: column;
   gap: ${tokens.spacing.sm};
-  justify-content: flex-end;
-  padding-top: ${tokens.spacing.xs};
 `;
 var EyeIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
   /* @__PURE__ */ jsx("title", { children: "Show" }),
@@ -4945,7 +4944,7 @@ var ActionButton2 = styled11.button`
     display: block;
   }
 `;
-var Header2 = ({
+var Header = ({
   title,
   subtitle,
   streamStatus,
@@ -5022,7 +5021,7 @@ var Header2 = ({
     ] })
   ] });
 };
-Header2.displayName = "Header";
+Header.displayName = "Header";
 var InputContainer = styled11.div`
 	display: flex;
 	flex-direction: column;
@@ -5251,7 +5250,7 @@ var Cursor = styled11.span`
     }
   }
 `;
-var StreamingText2 = ({
+var StreamingTextBase = ({
   content,
   isStreaming = false,
   typingSpeed: _typingSpeed = 50,
@@ -5261,25 +5260,27 @@ var StreamingText2 = ({
   onStreamComplete,
   className
 }) => {
-  const [displayedText, setDisplayedText] = useState("");
+  const [displayedText, setDisplayedText] = useState(content);
+  const wasStreamingRef = useRef(isStreaming);
+  const completionCalledRef = useRef(false);
   useEffect(() => {
-    if (isStreaming) {
-      setDisplayedText(content);
-      return;
+    setDisplayedText(content);
+    if (wasStreamingRef.current && !isStreaming && !completionCalledRef.current) {
+      completionCalledRef.current = true;
+      onStreamComplete?.();
     }
-    if (!isStreaming && displayedText !== content) {
-      setDisplayedText(content);
-      if (onStreamComplete) {
-        onStreamComplete();
-      }
+    if (isStreaming) {
+      completionCalledRef.current = false;
     }
-  }, [content, isStreaming, onStreamComplete, displayedText]);
+    wasStreamingRef.current = isStreaming;
+  }, [content, isStreaming, onStreamComplete]);
   const showCursor = isStreaming && cursor;
   return /* @__PURE__ */ jsxs(Container12, { variant, className, children: [
     displayedText,
     showCursor && /* @__PURE__ */ jsx(Cursor, {})
   ] });
 };
+var StreamingText2 = memo(StreamingTextBase);
 StreamingText2.displayName = "StreamingText";
 var MessageContainer = styled11.div`
   display: flex;
@@ -5567,7 +5568,7 @@ var StreamingIndicator = styled11.span`
     }
   }
 `;
-var AssistantMessage = ({
+var AssistantMessageBase = ({
   content = "",
   avatarUrl,
   avatarInitials: _avatarInitials = "AI",
@@ -5614,6 +5615,8 @@ var AssistantMessage = ({
     /* @__PURE__ */ jsx(ContentContainer, { children: renderContent() })
   ] });
 };
+var AssistantMessage = memo(AssistantMessageBase);
+AssistantMessage.displayName = "AssistantMessage";
 var MessagesContainer = styled11.div`
   display: flex;
   flex-direction: column;
@@ -7569,7 +7572,7 @@ var PostApprovalControls = ({
     setIsEditing(false);
   };
   return /* @__PURE__ */ jsxs(Container13, { "data-testid": "post-approval-controls", children: [
-    /* @__PURE__ */ jsxs(Header3, { onClick: () => !isEditing && setIsCollapsed(!isCollapsed), children: [
+    /* @__PURE__ */ jsxs(Header2, { onClick: () => !isEditing && setIsCollapsed(!isCollapsed), children: [
       /* @__PURE__ */ jsx(StatusBadge, { $color: statusConfig.color, children: statusConfig.label }),
       /* @__PURE__ */ jsxs(MetaInfo, { children: [
         postId && /* @__PURE__ */ jsxs(PostId, { children: [
@@ -7638,7 +7641,7 @@ var Container13 = styled11.div`
   font-family: ${tokens.typography.fontFamily.primary};
   transition: border-color ${tokens.transitions.fast};
 `;
-var Header3 = styled11.div`
+var Header2 = styled11.div`
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -7893,6 +7896,16 @@ var PostPreviewCard = ({
   );
 };
 PostPreviewCard.displayName = "PostPreviewCard";
+var fadeIn2 = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
 var CardContainer = styled11.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.lg};
@@ -7956,6 +7969,8 @@ var PostContent = styled11.div`
   word-break: break-word;
   margin-bottom: ${tokens.spacing.sm};
   letter-spacing: 0.01em;
+  /* Smooth fade-in animation when content appears */
+  animation: ${fadeIn2} 0.4s ease-out;
 `;
 var PostContentEditable = styled11.textarea`
   width: 100%;
@@ -8250,23 +8265,46 @@ var PlatformGrid = ({
   editingIndex,
   editContent,
   onEditContentChange,
-  isLoading = false
+  isLoading = false,
+  activeIndex = 0,
+  onActiveChange
 }) => {
   if (posts.length === 0) {
     return /* @__PURE__ */ jsx(EmptyState2, { children: /* @__PURE__ */ jsx(EmptyStateText, { children: "No posts to display" }) });
   }
+  const handlePostClick = (index) => {
+    onActiveChange?.(index);
+  };
   return /* @__PURE__ */ jsx(Grid, { "data-testid": "platform-grid", children: posts.map((post, index) => {
     const isEditing = editingIndex === index;
-    return /* @__PURE__ */ jsx(GridCell, { children: /* @__PURE__ */ jsx(
-      PostPreviewCard,
+    const isActive = activeIndex === index;
+    return /* @__PURE__ */ jsx(
+      GridCell,
       {
-        post,
-        isEditing,
-        editContent: isEditing ? editContent : void 0,
-        onContentChange: isEditing ? onEditContentChange : void 0,
-        isLoading
-      }
-    ) }, post.platform);
+        $isActive: isActive,
+        onClick: () => handlePostClick(index),
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handlePostClick(index);
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          PostPreviewCard,
+          {
+            post,
+            isActive,
+            isEditing,
+            editContent: isEditing ? editContent : void 0,
+            onContentChange: isEditing ? onEditContentChange : void 0,
+            isLoading
+          }
+        )
+      },
+      post.platform
+    );
   }) });
 };
 PlatformGrid.displayName = "PlatformGrid";
@@ -8290,6 +8328,13 @@ var Grid = styled11.div`
 `;
 var GridCell = styled11.div`
   min-width: 0; /* Prevent grid blowout with long content */
+  cursor: pointer;
+  border-radius: ${tokens.borderRadius.lg};
+  transition: transform ${tokens.transitions.fast};
+
+  &:hover {
+    transform: translateY(-2px);
+  }
 `;
 var EmptyState2 = styled11.div`
   display: flex;
@@ -8310,7 +8355,7 @@ var Container14 = styled11.div`
   flex-direction: column;
   height: 100%;
   width: 100%;
-  padding: ${tokens.spacing.md};
+  padding: ${tokens.spacing.md} ${tokens.spacing.md} 0 ${tokens.spacing.md};
   box-sizing: border-box;
   background: linear-gradient(
     180deg,
@@ -8319,7 +8364,7 @@ var Container14 = styled11.div`
   );
   overflow: auto;
 `;
-var Header4 = styled11.div`
+var Header3 = styled11.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -8408,7 +8453,8 @@ var SocialMediaCanvas = ({
   editingIndex,
   editContent,
   onEditContentChange,
-  isLoading = false
+  isLoading = false,
+  activeIndex = 0
 }) => {
   const [viewMode, setViewMode] = useState(initialViewMode);
   const handleActiveChange = (index) => {
@@ -8422,7 +8468,7 @@ var SocialMediaCanvas = ({
     ] }) });
   }
   return /* @__PURE__ */ jsxs(Container14, { children: [
-    /* @__PURE__ */ jsxs(Header4, { children: [
+    /* @__PURE__ */ jsxs(Header3, { children: [
       /* @__PURE__ */ jsxs(Title, { children: [
         title,
         " ",
@@ -8470,7 +8516,9 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
-        isLoading
+        isLoading,
+        activeIndex,
+        onActiveChange: handleActiveChange
       }
     ) })
   ] });
@@ -8533,7 +8581,7 @@ function TokenUsageCard({
   );
   const usageLevel = useMemo(() => getUsageLevel(percentage), [percentage]);
   return /* @__PURE__ */ jsxs(Card2, { className, "data-testid": "token-usage-card", children: [
-    /* @__PURE__ */ jsxs(Header5, { children: [
+    /* @__PURE__ */ jsxs(Header4, { children: [
       /* @__PURE__ */ jsx(Title2, { children: "Token Usage" }),
       /* @__PURE__ */ jsx(Period, { children: periodLabel })
     ] }),
@@ -8576,10 +8624,10 @@ var Card2 = styled11.div`
   gap: ${tokens.spacing.md};
   padding: ${tokens.spacing.lg};
   background: ${tokens.colors.background.dark};
-  border-radius: ${tokens.borderRadius.lg};
+  border-radius: ${tokens.borderRadius.xl};
   border: 1px solid ${tokens.colors.border.default};
 `;
-var Header5 = styled11.div`
+var Header4 = styled11.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -8799,7 +8847,7 @@ var Card3 = styled11.button`
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md};
   background: ${tokens.colors.background.dark};
-  border-radius: ${tokens.borderRadius.lg};
+  border-radius: ${tokens.borderRadius.xl};
   border: 1px solid ${tokens.colors.border.default};
   cursor: pointer;
   text-align: left;
@@ -8949,7 +8997,7 @@ var ModalContent = styled11.div`
   width: 100%;
   box-shadow: ${tokens.shadows.xl};
 `;
-var Header6 = styled11.div`
+var Header5 = styled11.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.md};
@@ -9174,7 +9222,7 @@ var WorkflowErrorAlert = ({
         return /* @__PURE__ */ jsx(InfoIcon, {});
     }
   };
-  const alertContent = /* @__PURE__ */ jsx(AlertContainer, { variant, severity, className, role: "alert", children: /* @__PURE__ */ jsxs(Header6, { children: [
+  const alertContent = /* @__PURE__ */ jsx(AlertContainer, { variant, severity, className, role: "alert", children: /* @__PURE__ */ jsxs(Header5, { children: [
     /* @__PURE__ */ jsx(IconContainer2, { severity, "aria-hidden": "true", children: getIcon() }),
     /* @__PURE__ */ jsxs(Content5, { children: [
       /* @__PURE__ */ jsx(Title3, { children: displayTitle }),
@@ -9483,7 +9531,7 @@ var Panel = styled11.div`
   overflow: hidden;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var Header7 = styled11.div`
+var Header6 = styled11.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -9676,7 +9724,7 @@ var WorkflowResultPanel = ({
     }
   };
   return /* @__PURE__ */ jsxs(Panel, { collapsible, expanded, className, children: [
-    /* @__PURE__ */ jsxs(Header7, { collapsible, onClick: handleToggle, children: [
+    /* @__PURE__ */ jsxs(Header6, { collapsible, onClick: handleToggle, children: [
       /* @__PURE__ */ jsxs(Title4, { children: [
         title,
         collapsible && /* @__PURE__ */ jsx(CollapseIcon2, { expanded, children: /* @__PURE__ */ jsx(ChevronIcon4, {}) })
@@ -9904,6 +9952,6 @@ var WorkflowStatusBadge = ({
 };
 WorkflowStatusBadge.displayName = "WorkflowStatusBadge";
 
-export { ActionButtons, Actions, AgentState, AssistantMessage, AssistantThinking, Button2 as Button, CATEGORY_CONFIGS, CategoryNav, ChatInput, ConnectionStatusBadge, UserMessage2 as CopilotUserMessage, DarkNotificationCard, FacebookIcon, FileAttachment, Footer, GlobalStyle, GmailIcon, Header2 as Header, Icon, IconNames, Input2 as Input, InstagramIcon, IntegrationCard, Layout, LinkedInIcon, Messages, MessagesList, MessagesListContainer, MessagesListContent, NavHorizontal, NavVertical, NotificationCard, PLATFORM_CONFIGS, PaneMenus, PaneSectionHeader, PlatformCarousel, PlatformGrid, PostApprovalControls, PostPreviewCard, RedditIcon, Response, SecretInput, ServiceIcon, SlackIcon, SocialMediaCanvas, StreamErrorMessage, StreamStatusIndicator, StreamingText2 as StreamingText, Suggestions, TelegramIcon, TokenUsageCard, UserMessage, WhatsAppIcon, Window, WorkflowCard, WorkflowErrorAlert, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge, WorkflowStatusCard, XIcon, YouTubeIcon, categorizeProgress, darkTheme, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, lightTheme, normalizePlatform, tokens };
+export { ActionButtons, Actions, AgentState, AssistantMessage, AssistantThinking, Button2 as Button, CATEGORY_CONFIGS, CategoryNav, ChatInput, ConnectionStatusBadge, UserMessage2 as CopilotUserMessage, DarkNotificationCard, FacebookIcon, FileAttachment, Footer, GlobalStyle, GmailIcon, Header, Icon, IconNames, Input2 as Input, InstagramIcon, IntegrationCard, Layout, LinkedInIcon, Messages, MessagesList, MessagesListContainer, MessagesListContent, NavHorizontal, NavVertical, NotificationCard, PLATFORM_CONFIGS, PaneMenus, PaneSectionHeader, PlatformCarousel, PlatformGrid, PostApprovalControls, PostPreviewCard, RedditIcon, Response, SecretInput, ServiceIcon, SlackIcon, SocialMediaCanvas, StreamErrorMessage, StreamStatusIndicator, StreamingText2 as StreamingText, Suggestions, TelegramIcon, TokenUsageCard, UserMessage, WhatsAppIcon, Window, WorkflowCard, WorkflowErrorAlert, WorkflowProgressBar, WorkflowResultPanel, WorkflowStatusBadge, WorkflowStatusCard, XIcon, YouTubeIcon, categorizeProgress, darkTheme, getCategoryColor, getCategoryIcon, getCharacterCount, getCharacterLimitColor, getCharacterLimitPercentage, isWithinCharLimit, lightTheme, normalizePlatform, tokens };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map