@agentiffai/design 0.1.10 → 0.1.12

package/dist/layout/index.cjs

@@ -144,7 +144,7 @@ var NavigationContainer = styled9__default.default.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%;
@@ -197,7 +197,7 @@ var CategoryButton = styled9__default.default.button`
 var CategoryLabel = styled9__default.default.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;
@@ -485,8 +485,10 @@ var Container = styled9__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 */
@@ -1044,7 +1046,7 @@ WorkflowStatusCard.displayName = "WorkflowStatusCard";
 var DarkNotificationCardContainer = styled9__default.default.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};
@@ -1057,7 +1059,7 @@ var DarkSectionHeader = styled9__default.default.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};
@@ -1099,18 +1101,18 @@ var DarkChevronIcon = styled9__default.default.span`
 var DarkSectionContent = styled9__default.default.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__default.default.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;
@@ -1166,7 +1168,7 @@ var DarkItemIcon = styled9__default.default.span`
 
   /* Custom icon (emoji or colored icon) styling */
   ${(props) => props.$hasCustomIcon && `
-    padding: 2px;
+    padding: ${tokens.spacing.xs};
   `}
 `;
 var DarkItemText = styled9__default.default.span`
@@ -1444,7 +1446,7 @@ var TabButton = styled9__default.default.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};
   }
 
@@ -1542,7 +1544,7 @@ styled9__default.default.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};
   }
@@ -1624,7 +1626,7 @@ var CategoryTitle = styled9__default.default.div`
   gap: ${tokens.spacing.sm};
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    gap: 6px;
+    gap: ${tokens.spacing.xs};
   }
 `;
 styled9__default.default.img`
@@ -1681,7 +1683,7 @@ var CategoryDisclosurePanel = styled9__default.default(reactAriaComponents.Discl
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding-left: 2px;
+    padding-left: ${tokens.spacing.xs};
   }
 
   &[data-entering] {
@@ -1703,7 +1705,7 @@ var ItemContainer = styled9__default.default.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};
@@ -1711,8 +1713,8 @@ var ItemContainer = styled9__default.default.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 {
@@ -1753,7 +1755,7 @@ var ItemHeader = styled9__default.default(reactAriaComponents.Button)`
   }
 `;
 var ItemDisclosurePanel = styled9__default.default(reactAriaComponents.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};
@@ -1764,7 +1766,7 @@ var ItemDisclosurePanel = styled9__default.default(reactAriaComponents.Disclosur
   overflow: hidden;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    padding: 6px;
+    padding: ${tokens.spacing.xs};
   }
 
   &[data-entering] {
@@ -2085,7 +2087,7 @@ function ItemWithLogs({
     isExpanded && /* @__PURE__ */ jsxRuntime.jsx(ItemDisclosurePanel, { children: run.customContent ? (
       // Render custom content directly
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "16px" }, children: run.customContent })
-    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#72767D", fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
+    ) : run.logs && run.logs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(DarkNotificationCard, { sections: logSections }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: tokens.colors.text.tertiary, fontSize: "13px", padding: "8px" }, children: "No action logs available" }) })
   ] });
 }
 function normalizeCategory(category) {
@@ -2120,7 +2122,7 @@ function WorkflowGroupItem({
     /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { level: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(CategoryHeader, { slot: "trigger", style: { paddingLeft: "8px" }, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(CategoryTitle, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "13px", fontWeight: 500 }, children: group.workflowName }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "11px", color: "#72767D", marginLeft: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "11px", color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
           "(",
           group.runs.length,
           ")"
@@ -2330,7 +2332,7 @@ function ConnectionsTabContent({
   return /* @__PURE__ */ jsxRuntime.jsxs(ConnectionsContainer, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(ConnectionDescription, { children: descriptionText }),
     /* @__PURE__ */ jsxRuntime.jsx(GoogleButton, { ...buttonProps, ref, $isConnected: isConnected, children: buttonText }),
-    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: "#B9BBBE" }, children: [
+    isConnected && googleConnection?.scopes && googleConnection.scopes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: "16px", fontSize: "13px", color: tokens.colors.text.secondary }, children: [
       "Connected services: ",
       googleConnection.scopes.join(", ")
     ] })
@@ -2373,7 +2375,8 @@ function PaneMenus({
   isOAuthConnecting = false,
   isOAuthLoading = false,
   connectionsSlot,
-  workflowsSlot
+  workflowsSlot,
+  usageSlot
 }) {
   const state = tabs.useTabListState({
     selectedKey: activeTab,
@@ -2385,7 +2388,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,
         {