@agentiffai/design 1.2.1 → 1.3.3

package/dist/layout/index.cjs

@@ -84,12 +84,12 @@ var tokens = {
     fontFamily: {
       primary: "'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif"},
     fontSize: {
-      xs: "0.75rem",
-      // 12px
-      sm: "0.875rem",
-      // 14px
-      base: "1rem",
-      // 18px
+      xs: "0.875rem",
+      // 14px (was 12px, increased for better readability)
+      sm: "1rem",
+      // 16px (was 14px, increased for better readability)
+      base: "1.125rem",
+      // 18px (heading size, unchanged)
       xl: "1.25rem"},
     fontWeight: {
       regular: 400,
@@ -437,32 +437,36 @@ var IconNames = {
   MIC_OFF: "mic-off-fill",
   HEADPHONE: "headphone-fill",
   VOLUME_MUTE: "volume-mute-fill",
-  SETTINGS: "settings-3-fill",
-  SETTINGS_FILL: "settings-fill",
-  SETTINGS_LINE: "settings-line",
+  SETTINGS_3_LINE: "settings-3-line",
   HOME: "home-fill",
   ADD_CIRCLE: "add-circle-fill",
   COMPASS_DISCOVER: "compass-discover-fill",
   DOWNLOAD: "download-2-fill",
   ARROW_LEFT: "arrow-left-fill",
   CALENDAR: "calendar-fill",
-  CHAT: "chat-1-fill"
+  CHAT: "chat-1-fill",
+  FLOW_CHART: "flow-chart",
+  LOGOUT_CIRCLE_R_FILL: "logout-circle-r-fill",
+  LOGOUT_CIRCLE_R_LINE: "logout-circle-r-line",
+  SIDE_BAR_FILL: "side-bar-fill"
 };
 var iconFiles = {
   "mic-fill": "Icon-mic-fill.svg",
   "mic-off-fill": "Icon-mic-off-fill.svg",
   "headphone-fill": "Icon-headphone-fill.svg",
   "volume-mute-fill": "Icon-volume-mute-fill.svg",
-  "settings-3-fill": "Icon-settings-3-fill.svg",
-  "settings-fill": "Icon-settings-fill.svg",
-  "settings-line": "Icon-settings-line.svg",
+  "settings-3-line": "Icon-settings-3-line.svg",
   "home-fill": "Icon-home-fill.svg",
   "add-circle-fill": "Icon-add-circle-fill.svg",
   "compass-discover-fill": "Icon-compass-discover-fill.svg",
   "download-2-fill": "Icon-download-2-fill.svg",
   "arrow-left-fill": "Icon-arrow-left-fill.svg",
   "calendar-fill": "Icon-calendar-fill.svg",
-  "chat-1-fill": "Icon-chat-1-fill.svg"
+  "chat-1-fill": "Icon-chat-1-fill.svg",
+  "flow-chart": "Icon-flow-chart.svg",
+  "logout-circle-r-fill": "Icon-logout-circle-r-fill.svg",
+  "logout-circle-r-line": "Icon-logout-circle-r-line.svg",
+  "side-bar-fill": "Icon-side-bar-fill.svg"
 };
 function getIconPath(name) {
   return `${ICON_BASE_PATH}/${iconFiles[name]}`;
@@ -485,6 +489,8 @@ var Container = styled9__default.default.nav`
   right: 0;
   background-color: ${tokens.colors.background.darker};
   border-top: 1px solid ${tokens.colors.border.subtle};
+  /* Add vertical padding to prevent content overlap */
+  padding-top: 4px;
   /* 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. */
@@ -514,7 +520,7 @@ var UserStatusSlot = styled9__default.default.div`
   display: flex;
   align-items: center;
   min-width: 0; /* Allow flex item to shrink */
-  flex: 0 1 auto;
+  flex: 1 1 auto; /* Allow slot to grow and take available space */
 
   /* Handle overflow for long usernames */
   > * {
@@ -642,6 +648,7 @@ var FolderGroupsSlot = styled9__default.default.div`
   gap: ${tokens.spacing.sm};
   padding: 0 ${tokens.spacing.md} ${tokens.spacing.md};
   flex: 1;
+  padding-bottom: 120px; /* Prevent overlap with bottom section (2 buttons @ 40px + 1 gap @ 8px + padding @ 32px) */
 
   /* Server/workspace icons styling */
   > * {
@@ -658,18 +665,68 @@ var FolderGroupsSlot = styled9__default.default.div`
 
   /* Responsive adjustments */
   @media (max-width: ${tokens.breakpoints.tablet}px) {
-    padding: 0 6px ${tokens.spacing.md}; /* Reduce horizontal padding on mobile */
+    padding: 0 6px ${tokens.spacing.md} 96px; /* Reduce horizontal padding on mobile */
+  }
+`;
+var BottomSection = styled9__default.default.div`
+  position: absolute;
+  bottom: 0; /* At the bottom of the nav container */
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${tokens.spacing.sm};
+  padding: ${tokens.spacing.md} 0;
+  background-color: ${tokens.colors.background.darker};
+
+  @media (prefers-color-scheme: dark) {
+    background-color: ${tokens.colors.background.darkest};
+  }
+`;
+var BottomButton = styled9__default.default.button`
+  width: 40px;
+  height: 40px;
+  border-radius: 0;
+  border: none;
+  background-color: transparent;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all ${tokens.transitions.normal};
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${tokens.colors.border.focus};
+    outline-offset: 2px;
   }
 `;
 function NavVertical({
   onBackClick,
   onHomeClick,
+  onSettingsClick,
+  onLogoutClick,
   folderGroupsSlot,
   className,
   "aria-label": ariaLabel = "Vertical navigation sidebar"
 }) {
   const backButtonRef = react.useRef(null);
   const homeButtonRef = react.useRef(null);
+  const settingsButtonRef = react.useRef(null);
+  const logoutButtonRef = react.useRef(null);
   const { buttonProps: backButtonProps } = button.useButton(
     {
       onPress: onBackClick,
@@ -684,10 +741,28 @@ function NavVertical({
     },
     homeButtonRef
   );
+  const { buttonProps: settingsButtonProps } = button.useButton(
+    {
+      onPress: onSettingsClick,
+      "aria-label": "Settings"
+    },
+    settingsButtonRef
+  );
+  const { buttonProps: logoutButtonProps } = button.useButton(
+    {
+      onPress: onLogoutClick,
+      "aria-label": "Logout"
+    },
+    logoutButtonRef
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(Container2, { className, role: "navigation", "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TopSection, { children: onBackClick ? /* @__PURE__ */ jsxRuntime.jsx(BackButton, { ...backButtonProps, ref: backButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "arrow-left-fill", size: 20, color: "white" }) }) : onHomeClick ? /* @__PURE__ */ jsxRuntime.jsx(BackButton, { ...homeButtonProps, ref: homeButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "home-fill", size: 24, color: "white" }) }) : null }),
+    /* @__PURE__ */ jsxRuntime.jsx(TopSection, { children: onBackClick ? /* @__PURE__ */ jsxRuntime.jsx(BackButton, { ...backButtonProps, ref: backButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "side-bar-fill", size: 20, color: "white" }) }) : onHomeClick ? /* @__PURE__ */ jsxRuntime.jsx(BackButton, { ...homeButtonProps, ref: homeButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "side-bar-fill", size: 24, color: "white" }) }) : null }),
     /* @__PURE__ */ jsxRuntime.jsx(Separator, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(FolderGroupsSlot, { children: folderGroupsSlot })
+    /* @__PURE__ */ jsxRuntime.jsx(FolderGroupsSlot, { children: folderGroupsSlot }),
+    (onSettingsClick || onLogoutClick) && /* @__PURE__ */ jsxRuntime.jsxs(BottomSection, { children: [
+      onSettingsClick && /* @__PURE__ */ jsxRuntime.jsx(BottomButton, { ...settingsButtonProps, ref: settingsButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "settings-3-line", size: 24, color: "white" }) }),
+      onLogoutClick && /* @__PURE__ */ jsxRuntime.jsx(BottomButton, { ...logoutButtonProps, ref: logoutButtonRef, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "logout-circle-r-line", size: 24, color: "white" }) })
+    ] })
   ] });
 }
 NavVertical.displayName = "NavVertical";
@@ -787,10 +862,22 @@ function Layout({
   navHorizontalUserSlot,
   navHorizontalActionsSlot,
   onNavBackClick,
+  onNavHomeClick,
+  onNavSettingsClick,
+  onNavLogoutClick,
   className
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Container3, { className, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(NavVertical, { folderGroupsSlot: navVerticalSlot, onBackClick: onNavBackClick }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NavVertical,
+      {
+        folderGroupsSlot: navVerticalSlot,
+        onBackClick: onNavBackClick,
+        onHomeClick: onNavHomeClick,
+        onSettingsClick: onNavSettingsClick,
+        onLogoutClick: onNavLogoutClick
+      }
+    ),
     backgroundSlot && /* @__PURE__ */ jsxRuntime.jsx(BackgroundPane, { children: backgroundSlot }),
     /* @__PURE__ */ jsxRuntime.jsx(MainPane, { children: mainPaneSlot }),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -877,10 +964,8 @@ function ActionButtonItem({ icon, label, onClick, isActive, size, isPrimary }) {
 }
 function ActionButtons({
   onCalendarClick,
-  onSettingsClick,
   onChatClick,
   isCalendarActive = false,
-  isSettingsActive = false,
   isChatActive = false,
   className
 }) {
@@ -895,16 +980,6 @@ function ActionButtons({
         size: 32
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ActionButtonItem,
-      {
-        icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "settings-3-fill", size: 16, color: tokens.colors.text.secondary }),
-        label: "Settings",
-        onClick: onSettingsClick,
-        isActive: isSettingsActive,
-        size: 32
-      }
-    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       ActionButtonItem,
       {
@@ -928,30 +1003,31 @@ var Container5 = styled9__default.default.button`
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
-  gap: ${tokens.spacing.sm};
-  padding: ${tokens.spacing.sm};
+  gap: ${tokens.spacing.xs};
+  padding: 6px;
+  margin: ${tokens.spacing.sm};
   border-radius: ${tokens.borderRadius.md};
   border: none;
   background: ${tokens.colors.surface.subtle};
   color: inherit;
   font-family: ${tokens.typography.fontFamily.primary};
   transition: background-color ${tokens.transitions.fast}, opacity ${tokens.transitions.fast};
-  cursor: ${(props) => props.$isDisabled ? "not-allowed" : "pointer"};
-  opacity: ${(props) => props.$isDisabled ? 0.5 : 1};
+  cursor: ${(props) => props.$isDisabled ? "default" : "pointer"};
+  opacity: ${(props) => props.$isDisabled ? 0.7 : 1};
   text-align: left;
-  width: 100%;
+  width: calc(100% - ${tokens.spacing.lg});
 
   &:hover:not(:disabled) {
-    background-color: ${tokens.colors.surface.overlay};
+    background-color: ${(props) => props.$isDisabled ? tokens.colors.surface.subtle : tokens.colors.surface.overlay};
   }
 
   &:focus-visible {
-    outline: 2px solid ${tokens.colors.border.focus};
+    outline: ${(props) => props.$isDisabled ? "none" : `2px solid ${tokens.colors.border.focus}`};
     outline-offset: 2px;
   }
 
   &:active:not(:disabled) {
-    background-color: ${tokens.colors.surface.overlayActive};
+    background-color: ${(props) => props.$isDisabled ? tokens.colors.surface.subtle : tokens.colors.surface.overlayActive};
   }
 `;
 var IconWrapper2 = styled9__default.default.div`
@@ -1545,7 +1621,7 @@ styled9__default.default.button`
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
     padding: ${tokens.spacing.sm} ${tokens.spacing.md};
-    font-size: 13px;
+    font-size: ${tokens.typography.fontSize.sm};
     gap: ${tokens.spacing.sm};
   }
 
@@ -1806,7 +1882,7 @@ var ItemName = styled9__default.default.span`
   min-width: 0;
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {
-    font-size: 13px;
+    font-size: ${tokens.typography.fontSize.sm};
   }
 
   ${ItemContainer}:hover & {
@@ -1898,7 +1974,7 @@ styled9__default.default.div`
   padding-top: 0;
   background-color: ${tokens.colors.overlay};
   color: ${tokens.colors.text.secondary};
-  font-size: 13px;
+  font-size: ${tokens.typography.fontSize.sm};
   line-height: ${tokens.typography.lineHeight.relaxed};
   animation: slideDown ${tokens.transitions.normal};
 
@@ -1985,7 +2061,7 @@ var ConnectionDescription = styled9__default.default.p`
 var GoogleButton = styled9__default.default.button`
   width: 100%;
   padding: ${tokens.spacing.md} ${tokens.spacing.lg};
-  font-size: 15px;
+  font-size: ${tokens.typography.fontSize.sm};
   font-weight: ${tokens.typography.fontWeight.semibold};
   color: ${(props) => props.$isConnected ? tokens.colors.text.primary : tokens.colors.text.primary};
   background: ${(props) => props.$isConnected ? tokens.colors.background.light : `linear-gradient(135deg, ${tokens.colors.platform.facebook}, ${tokens.colors.platform.whatsapp})`};
@@ -2121,8 +2197,8 @@ function WorkflowGroupItem({
   return /* @__PURE__ */ jsxRuntime.jsxs(CategoryDisclosure, { id: groupId, children: [
     /* @__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: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: tokens.typography.fontSize.base, fontWeight: 500 }, children: group.workflowName }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: tokens.typography.fontSize.sm, color: tokens.colors.text.tertiary, marginLeft: "8px" }, children: [
           "(",
           group.runs.length,
           ")"
@@ -2599,7 +2675,7 @@ function PaneSectionHeader({
   brand = "Google",
   onBackClick,
   onSettingsClick,
-  settingsIcon = "settings-fill",
+  settingsIcon = "flow-chart",
   className,
   "aria-label": ariaLabel = "Pane section header"
 }) {
@@ -2617,7 +2693,7 @@ function PaneSectionHeader({
   const { buttonProps: settingsButtonProps } = button.useButton(
     {
       onPress: onSettingsClick,
-      "aria-label": "Settings"
+      "aria-label": "Workflow configuration"
     },
     settingsButtonRef
   );