@agentiffai/design 0.1.10 → 0.1.11

package/dist/index.cjs

@@ -1056,8 +1056,10 @@ var Container2 = styled11__default.default.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 */
@@ -2944,7 +2946,8 @@ function PaneMenus({
   isOAuthConnecting = false,
   isOAuthLoading = false,
   connectionsSlot,
-  workflowsSlot
+  workflowsSlot,
+  usageSlot
 }) {
   const state = tabs.useTabListState({
     selectedKey: activeTab,
@@ -2956,7 +2959,7 @@ function PaneMenus({
     children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       workflowsSlot && /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Workflows", children: workflowsSlot }, "workflows"),
       /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Runs", children: /* @__PURE__ */ jsxRuntime.jsx(RunsTabContent, { runs, onRunSelect }) }, "runs"),
-      /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Usage", children: /* @__PURE__ */ jsxRuntime.jsx(UsageTabContent, { currentUsage, maxUsage }) }, "usage"),
+      /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Usage", children: usageSlot || /* @__PURE__ */ jsxRuntime.jsx(UsageTabContent, { currentUsage, maxUsage }) }, "usage"),
       /* @__PURE__ */ jsxRuntime.jsx(collections.Item, { title: "Connections", children: connectionsSlot || /* @__PURE__ */ jsxRuntime.jsx(
         ConnectionsTabContent,
         {
@@ -3729,7 +3732,7 @@ var StyledUserMessage = styled11__default.default.button`
     }
   }
 `;
-function UserMessage({
+function UserMessageBase({
   children,
   className,
   isPressed = false,
@@ -3760,6 +3763,7 @@ function UserMessage({
     }
   );
 }
+var UserMessage = react.memo(UserMessageBase);
 UserMessage.displayName = "UserMessage";
 
 // src/theme/darkTheme.ts
@@ -3951,25 +3955,28 @@ var IntegrationCard = ({
   className
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(Card, { className, "data-testid": "integration-card", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+    status && /* @__PURE__ */ jsxRuntime.jsx(StatusRow, { children: status }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ContentHeader, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(IconWrapper3, { children: typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(IconImage, { src: icon, alt: name }) : icon }),
       /* @__PURE__ */ jsxRuntime.jsxs(Info, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Name, { children: name }),
         description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description })
-      ] }),
-      status && /* @__PURE__ */ jsxRuntime.jsx(StatusWrapper, { children: status })
+      ] })
     ] }),
-    children && /* @__PURE__ */ jsxRuntime.jsx(ContentRow, { children }),
-    actions && /* @__PURE__ */ jsxRuntime.jsx(ActionsRow, { children: actions })
+    (children || actions) && /* @__PURE__ */ jsxRuntime.jsxs(ActionsRow, { children: [
+      children,
+      actions
+    ] })
   ] });
 };
 IntegrationCard.displayName = "IntegrationCard";
 var Card = styled11__default.default.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};
@@ -3978,10 +3985,13 @@ var Card = styled11__default.default.div`
     border-color: ${tokens.colors.border.hover};
   }
 `;
-var Header = styled11__default.default.div`
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: start;
+var StatusRow = styled11__default.default.div`
+  display: flex;
+  align-items: center;
+`;
+var ContentHeader = styled11__default.default.div`
+  display: flex;
+  align-items: flex-start;
   gap: ${tokens.spacing.sm};
 `;
 var IconWrapper3 = styled11__default.default.div`
@@ -4004,7 +4014,7 @@ var Info = styled11__default.default.div`
   flex-direction: column;
   gap: 2px;
   min-width: 0;
-  padding-top: 2px;
+  flex: 1;
 `;
 var Name = styled11__default.default.h3`
   margin: 0;
@@ -4019,21 +4029,10 @@ var Description = styled11__default.default.p`
   color: ${tokens.colors.text.tertiary};
   line-height: ${tokens.typography.lineHeight.normal};
 `;
-var StatusWrapper = styled11__default.default.div`
-  flex-shrink: 0;
-  padding-top: 2px;
-`;
-var ContentRow = styled11__default.default.div`
-  display: flex;
-  gap: ${tokens.spacing.sm};
-  align-items: center;
-  padding-left: calc(40px + ${tokens.spacing.sm});
-`;
 var ActionsRow = styled11__default.default.div`
   display: flex;
+  flex-direction: column;
   gap: ${tokens.spacing.sm};
-  justify-content: flex-end;
-  padding-top: ${tokens.spacing.xs};
 `;
 var EyeIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
   /* @__PURE__ */ jsxRuntime.jsx("title", { children: "Show" }),
@@ -4951,7 +4950,7 @@ var ActionButton2 = styled11__default.default.button`
     display: block;
   }
 `;
-var Header2 = ({
+var Header = ({
   title,
   subtitle,
   streamStatus,
@@ -5028,7 +5027,7 @@ var Header2 = ({
     ] })
   ] });
 };
-Header2.displayName = "Header";
+Header.displayName = "Header";
 var InputContainer = styled11__default.default.div`
 	display: flex;
 	flex-direction: column;
@@ -5257,7 +5256,7 @@ var Cursor = styled11__default.default.span`
     }
   }
 `;
-var StreamingText2 = ({
+var StreamingTextBase = ({
   content,
   isStreaming = false,
   typingSpeed: _typingSpeed = 50,
@@ -5267,25 +5266,27 @@ var StreamingText2 = ({
   onStreamComplete,
   className
 }) => {
-  const [displayedText, setDisplayedText] = react.useState("");
+  const [displayedText, setDisplayedText] = react.useState(content);
+  const wasStreamingRef = react.useRef(isStreaming);
+  const completionCalledRef = react.useRef(false);
   react.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__ */ jsxRuntime.jsxs(Container12, { variant, className, children: [
     displayedText,
     showCursor && /* @__PURE__ */ jsxRuntime.jsx(Cursor, {})
   ] });
 };
+var StreamingText2 = react.memo(StreamingTextBase);
 StreamingText2.displayName = "StreamingText";
 var MessageContainer = styled11__default.default.div`
   display: flex;
@@ -5573,7 +5574,7 @@ var StreamingIndicator = styled11__default.default.span`
     }
   }
 `;
-var AssistantMessage = ({
+var AssistantMessageBase = ({
   content = "",
   avatarUrl,
   avatarInitials: _avatarInitials = "AI",
@@ -5620,6 +5621,8 @@ var AssistantMessage = ({
     /* @__PURE__ */ jsxRuntime.jsx(ContentContainer, { children: renderContent() })
   ] });
 };
+var AssistantMessage = react.memo(AssistantMessageBase);
+AssistantMessage.displayName = "AssistantMessage";
 var MessagesContainer = styled11__default.default.div`
   display: flex;
   flex-direction: column;
@@ -7575,7 +7578,7 @@ var PostApprovalControls = ({
     setIsEditing(false);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Container13, { "data-testid": "post-approval-controls", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header3, { onClick: () => !isEditing && setIsCollapsed(!isCollapsed), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header2, { onClick: () => !isEditing && setIsCollapsed(!isCollapsed), children: [
       /* @__PURE__ */ jsxRuntime.jsx(StatusBadge, { $color: statusConfig.color, children: statusConfig.label }),
       /* @__PURE__ */ jsxRuntime.jsxs(MetaInfo, { children: [
         postId && /* @__PURE__ */ jsxRuntime.jsxs(PostId, { children: [
@@ -7644,7 +7647,7 @@ var Container13 = styled11__default.default.div`
   font-family: ${tokens.typography.fontFamily.primary};
   transition: border-color ${tokens.transitions.fast};
 `;
-var Header3 = styled11__default.default.div`
+var Header2 = styled11__default.default.div`
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -7899,6 +7902,16 @@ var PostPreviewCard = ({
   );
 };
 PostPreviewCard.displayName = "PostPreviewCard";
+var fadeIn2 = styled11.keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
 var CardContainer = styled11__default.default.div`
   background: ${tokens.colors.background.dark};
   border-radius: ${tokens.borderRadius.lg};
@@ -7962,6 +7975,8 @@ var PostContent = styled11__default.default.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__default.default.textarea`
   width: 100%;
@@ -8256,23 +8271,46 @@ var PlatformGrid = ({
   editingIndex,
   editContent,
   onEditContentChange,
-  isLoading = false
+  isLoading = false,
+  activeIndex = 0,
+  onActiveChange
 }) => {
   if (posts.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(EmptyState2, { children: /* @__PURE__ */ jsxRuntime.jsx(EmptyStateText, { children: "No posts to display" }) });
   }
+  const handlePostClick = (index) => {
+    onActiveChange?.(index);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(Grid, { "data-testid": "platform-grid", children: posts.map((post, index) => {
     const isEditing = editingIndex === index;
-    return /* @__PURE__ */ jsxRuntime.jsx(GridCell, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      PostPreviewCard,
+    const isActive = activeIndex === index;
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          PostPreviewCard,
+          {
+            post,
+            isActive,
+            isEditing,
+            editContent: isEditing ? editContent : void 0,
+            onContentChange: isEditing ? onEditContentChange : void 0,
+            isLoading
+          }
+        )
+      },
+      post.platform
+    );
   }) });
 };
 PlatformGrid.displayName = "PlatformGrid";
@@ -8296,6 +8334,13 @@ var Grid = styled11__default.default.div`
 `;
 var GridCell = styled11__default.default.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__default.default.div`
   display: flex;
@@ -8316,7 +8361,7 @@ var Container14 = styled11__default.default.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,
@@ -8325,7 +8370,7 @@ var Container14 = styled11__default.default.div`
   );
   overflow: auto;
 `;
-var Header4 = styled11__default.default.div`
+var Header3 = styled11__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -8414,7 +8459,8 @@ var SocialMediaCanvas = ({
   editingIndex,
   editContent,
   onEditContentChange,
-  isLoading = false
+  isLoading = false,
+  activeIndex = 0
 }) => {
   const [viewMode, setViewMode] = react.useState(initialViewMode);
   const handleActiveChange = (index) => {
@@ -8428,7 +8474,7 @@ var SocialMediaCanvas = ({
     ] }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(Container14, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header4, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header3, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Title, { children: [
         title,
         " ",
@@ -8476,7 +8522,9 @@ var SocialMediaCanvas = ({
         editingIndex,
         editContent,
         onEditContentChange,
-        isLoading
+        isLoading,
+        activeIndex,
+        onActiveChange: handleActiveChange
       }
     ) })
   ] });
@@ -8539,7 +8587,7 @@ function TokenUsageCard({
   );
   const usageLevel = react.useMemo(() => getUsageLevel(percentage), [percentage]);
   return /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className, "data-testid": "token-usage-card", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header5, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header4, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Title2, { children: "Token Usage" }),
       /* @__PURE__ */ jsxRuntime.jsx(Period, { children: periodLabel })
     ] }),
@@ -8582,10 +8630,10 @@ var Card2 = styled11__default.default.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__default.default.div`
+var Header4 = styled11__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -8805,7 +8853,7 @@ var Card3 = styled11__default.default.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;
@@ -8955,7 +9003,7 @@ var ModalContent = styled11__default.default.div`
   width: 100%;
   box-shadow: ${tokens.shadows.xl};
 `;
-var Header6 = styled11__default.default.div`
+var Header5 = styled11__default.default.div`
   display: flex;
   align-items: flex-start;
   gap: ${tokens.spacing.md};
@@ -9180,7 +9228,7 @@ var WorkflowErrorAlert = ({
         return /* @__PURE__ */ jsxRuntime.jsx(InfoIcon, {});
     }
   };
-  const alertContent = /* @__PURE__ */ jsxRuntime.jsx(AlertContainer, { variant, severity, className, role: "alert", children: /* @__PURE__ */ jsxRuntime.jsxs(Header6, { children: [
+  const alertContent = /* @__PURE__ */ jsxRuntime.jsx(AlertContainer, { variant, severity, className, role: "alert", children: /* @__PURE__ */ jsxRuntime.jsxs(Header5, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(IconContainer2, { severity, "aria-hidden": "true", children: getIcon() }),
     /* @__PURE__ */ jsxRuntime.jsxs(Content5, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Title3, { children: displayTitle }),
@@ -9489,7 +9537,7 @@ var Panel = styled11__default.default.div`
   overflow: hidden;
   font-family: ${tokens.typography.fontFamily.primary};
 `;
-var Header7 = styled11__default.default.div`
+var Header6 = styled11__default.default.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -9682,7 +9730,7 @@ var WorkflowResultPanel = ({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(Panel, { collapsible, expanded, className, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header7, { collapsible, onClick: handleToggle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Header6, { collapsible, onClick: handleToggle, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(Title4, { children: [
         title,
         collapsible && /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon2, { expanded, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon4, {}) })
@@ -9927,7 +9975,7 @@ exports.FileAttachment = FileAttachment;
 exports.Footer = Footer;
 exports.GlobalStyle = GlobalStyle;
 exports.GmailIcon = GmailIcon;
-exports.Header = Header2;
+exports.Header = Header;
 exports.Icon = Icon;
 exports.IconNames = IconNames;
 exports.Input = Input2;