@agentiffai/design 0.1.10 → 0.1.12

package/dist/layout/index.d.cts

@@ -196,8 +196,9 @@ interface PaneMenusProps {
     isOAuthLoading?: boolean;
     connectionsSlot?: React.ReactNode;
     workflowsSlot?: React.ReactNode;
+    usageSlot?: React.ReactNode;
 }
-declare function PaneMenus({ activeTab, onTabChange, runs, onRunSelect, currentUsage, maxUsage, isGoogleConnected, onGoogleConnect, onGoogleDisconnect, oauthConnections, onOAuthConnect, onOAuthDisconnect, isOAuthConnecting, isOAuthLoading, connectionsSlot, workflowsSlot, }: PaneMenusProps): react_jsx_runtime.JSX.Element;
+declare function PaneMenus({ activeTab, onTabChange, runs, onRunSelect, currentUsage, maxUsage, isGoogleConnected, onGoogleConnect, onGoogleDisconnect, oauthConnections, onOAuthConnect, onOAuthDisconnect, isOAuthConnecting, isOAuthLoading, connectionsSlot, workflowsSlot, usageSlot, }: PaneMenusProps): react_jsx_runtime.JSX.Element;
 
 type BrandType = 'Google' | 'Microsoft' | 'Slack' | 'YouTube';
 interface PaneSectionHeaderProps {

package/dist/layout/index.d.ts

@@ -196,8 +196,9 @@ interface PaneMenusProps {
     isOAuthLoading?: boolean;
     connectionsSlot?: React.ReactNode;
     workflowsSlot?: React.ReactNode;
+    usageSlot?: React.ReactNode;
 }
-declare function PaneMenus({ activeTab, onTabChange, runs, onRunSelect, currentUsage, maxUsage, isGoogleConnected, onGoogleConnect, onGoogleDisconnect, oauthConnections, onOAuthConnect, onOAuthDisconnect, isOAuthConnecting, isOAuthLoading, connectionsSlot, workflowsSlot, }: PaneMenusProps): react_jsx_runtime.JSX.Element;
+declare function PaneMenus({ activeTab, onTabChange, runs, onRunSelect, currentUsage, maxUsage, isGoogleConnected, onGoogleConnect, onGoogleDisconnect, oauthConnections, onOAuthConnect, onOAuthDisconnect, isOAuthConnecting, isOAuthLoading, connectionsSlot, workflowsSlot, usageSlot, }: PaneMenusProps): react_jsx_runtime.JSX.Element;
 
 type BrandType = 'Google' | 'Microsoft' | 'Slack' | 'YouTube';
 interface PaneSectionHeaderProps {

package/dist/layout/index.js

@@ -138,7 +138,7 @@ var NavigationContainer = styled9.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 6px;
+  padding-top: ${tokens.spacing.xs};
   gap: ${tokens.spacing.xs};
   width: 100%;
   height: 100%;
@@ -191,7 +191,7 @@ var CategoryButton = styled9.button`
 var CategoryLabel = styled9.span`
   font-size: 9px;
   color: ${tokens.colors.text.tertiary};
-  margin-top: 2px;
+  margin-top: ${tokens.spacing.xs};
   text-align: center;
   max-width: 56px;
   overflow: hidden;
@@ -479,8 +479,10 @@ var Container = styled9.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 */
@@ -1038,7 +1040,7 @@ WorkflowStatusCard.displayName = "WorkflowStatusCard";
 var DarkNotificationCardContainer = styled9.div`
   display: flex;
   flex-direction: column;
-  padding: 6px;
+  padding: ${tokens.spacing.xs};
   background: ${tokens.colors.surface.base};
   border-radius: ${tokens.borderRadius.md};
   gap: ${tokens.spacing.xs};
@@ -1051,7 +1053,7 @@ var DarkSectionHeader = styled9.button`
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: ${tokens.spacing.xs} 2px;
+  padding: ${tokens.spacing.xs} ${tokens.spacing.xs};
   border: none;
   background: transparent;
   font-family: ${tokens.typography.fontFamily.primary};
@@ -1093,18 +1095,18 @@ var DarkChevronIcon = styled9.span`
 var DarkSectionContent = styled9.div`
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: ${tokens.spacing.xs};
   padding-left: ${tokens.spacing.xs};
-  margin-top: 2px;
+  margin-top: ${tokens.spacing.xs};
   min-width: 0;
   overflow: hidden;
 `;
 var DarkNotificationItemWrapper = styled9.button`
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: ${tokens.spacing.xs};
   width: 100%;
-  padding: ${tokens.spacing.xs} 6px;
+  padding: ${tokens.spacing.xs} ${tokens.spacing.xs};
   border: none;
   cursor: pointer;
   text-align: left;
@@ -1160,7 +1162,7 @@ var DarkItemIcon = styled9.span`
 
   /* Custom icon (emoji or colored icon) styling */
   ${(props) => props.$hasCustomIcon && `
-    padding: 2px;
+    padding: ${tokens.spacing.xs};
   `}
 `;
 var DarkItemText = styled9.span`
@@ -1438,7 +1440,7 @@ var TabButton = styled9.button`
   flex-shrink: 0;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 10px ${tokens.spacing.md};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: ${tokens.typography.fontSize.xs};
   }
 
@@ -1536,7 +1538,7 @@ styled9.button`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 10px ${tokens.spacing.md};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.md};
     font-size: 13px;
     gap: ${tokens.spacing.sm};
   }
@@ -1618,7 +1620,7 @@ var CategoryTitle = styled9.div`
   gap: ${tokens.spacing.sm};
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    gap: 6px;
+    gap: ${tokens.spacing.xs};
   }
 `;
 styled9.img`
@@ -1675,7 +1677,7 @@ var CategoryDisclosurePanel = styled9(DisclosurePanel)`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding-left: 2px;
+    padding-left: ${tokens.spacing.xs};
   }
 
   &[data-entering] {
@@ -1697,7 +1699,7 @@ var ItemContainer = styled9.div`
   display: flex;
   align-items: center;
   gap: ${tokens.spacing.sm};
-  padding: 10px ${tokens.spacing.sm}; // Increased vertical padding from 4px to 10px for better breathing room
+  padding: ${tokens.spacing.sm} ${tokens.spacing.sm}; // Increased vertical padding from 4px to 8px for better breathing room
   border-radius: ${tokens.borderRadius.sm};
   cursor: pointer;
   transition: background-color ${tokens.transitions.fast};
@@ -1705,8 +1707,8 @@ var ItemContainer = styled9.div`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    gap: 6px;
-    padding: ${tokens.spacing.sm} 6px; // Increased vertical padding from 4px to 8px for mobile
+    gap: ${tokens.spacing.xs};
+    padding: ${tokens.spacing.sm} ${tokens.spacing.xs}; // Increased vertical padding from 4px to 8px for mobile
   }
 
   &:hover {
@@ -1747,7 +1749,7 @@ var ItemHeader = styled9(Button)`
   }
 `;
 var ItemDisclosurePanel = styled9(DisclosurePanel)`
-  padding: 6px;
+  padding: ${tokens.spacing.xs};
   background-color: ${tokens.colors.overlay};
   border-radius: 0 0 ${tokens.borderRadius.md} ${tokens.borderRadius.md};
   margin-top: -${tokens.spacing.xs};
@@ -1758,7 +1760,7 @@ var ItemDisclosurePanel = styled9(DisclosurePanel)`
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 6px;
+    padding: ${tokens.spacing.xs};
   }
 
   &[data-entering] {
@@ -2079,7 +2081,7 @@ function ItemWithLogs({
     isExpanded && /* @__PURE__ */ jsx(ItemDisclosurePanel, { children: run.customContent ? (
       // Render custom content directly
       /* @__PURE__ */ jsx("div", { style: { padding: "16px" }, children: run.customContent })
-    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsx("div", { style: { color: "#72767D", fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
+    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsx("div", { style: { color: tokens.colors.text.tertiary, fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
   ] });
 }
 function normalizeCategory(category) {
@@ -2114,7 +2116,7 @@ function WorkflowGroupItem({
     /* @__PURE__ */ jsx(Heading, { level: 4, children: /* @__PURE__ */ jsxs(CategoryHeader, { slot: "trigger", style: { paddingLeft: "8px" }, children: [
       /* @__PURE__ */ jsxs(CategoryTitle, { children: [
         /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", fontWeight: 500 }, children: group.workflowName }),
-        /* @__PURE__ */ jsxs("span", { style: { fontSize: "11px", color: "#72767D", marginLeft: "8px" }, children: [
+        /* @__PURE__ */ jsxs("span", { style: { fontSize: "11px", color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
           "(",
           group.runs.length,
           ")"
@@ -2324,7 +2326,7 @@ function ConnectionsTabContent({
   return /* @__PURE__ */ jsxs(ConnectionsContainer, { children: [
     /* @__PURE__ */ jsx(ConnectionDescription, { children: descriptionText }),
     /* @__PURE__ */ jsx(GoogleButton, { ...buttonProps, ref, $isConnected: isConnected, children: buttonText }),
-    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: "#B9BBBE" }, children: [
+    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: tokens.colors.text.secondary }, children: [
       "Connected services: ",
       googleConnection.scopes.join(", ")
     ] })
@@ -2367,7 +2369,8 @@ function PaneMenus({
   isOAuthConnecting = false,
   isOAuthLoading = false,
   connectionsSlot,
-  workflowsSlot
+  workflowsSlot,
+  usageSlot
 }) {
   const state = useTabListState({
     selectedKey: activeTab,
@@ -2379,7 +2382,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,
         {