@agentiffai/design 1.3.23 → 1.3.25

package/dist/layout/index.d.cts

@@ -72,6 +72,7 @@ declare const IconNames: {
     readonly FLOW_CHART: "flow-chart";
     readonly LOGOUT_CIRCLE_R_FILL: "logout-circle-r-fill";
     readonly LOGOUT_CIRCLE_R_LINE: "logout-circle-r-line";
+    readonly QUESTION_LINE: "question-line";
     readonly SIDE_BAR_FILL: "side-bar-fill";
     readonly CHECK: "check-fill";
     readonly CHECK_CIRCLE: "checkbox-circle-fill";
@@ -81,6 +82,7 @@ declare const IconNames: {
     readonly ROCKET: "rocket-fill";
     readonly TICKET: "coupon-2-fill";
     readonly CLIPBOARD: "clipboard-fill";
+    readonly QUESTION_CIRCLE: "question-circle-line";
 };
 type IconName = (typeof IconNames)[keyof typeof IconNames];
 
@@ -104,11 +106,12 @@ interface LayoutProps {
     navHorizontalActionsSlot?: ReactNode;
     onNavBackClick?: () => void;
     onNavHomeClick?: () => void;
+    onNavHelpClick?: () => void;
     onNavSettingsClick?: () => void;
     onNavLogoutClick?: () => void;
     className?: string;
 }
-declare function Layout({ mainPaneSlot, backgroundSlot, navVerticalSlot, navHorizontalUserSlot, navHorizontalActionsSlot, onNavBackClick, onNavHomeClick, onNavSettingsClick, onNavLogoutClick, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
+declare function Layout({ mainPaneSlot, backgroundSlot, navVerticalSlot, navHorizontalUserSlot, navHorizontalActionsSlot, onNavBackClick, onNavHomeClick, onNavHelpClick, onNavSettingsClick, onNavLogoutClick, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
 declare namespace Layout {
     var displayName: string;
 }
@@ -154,13 +157,14 @@ declare namespace WorkflowStatusCard {
 interface NavVerticalProps {
     onBackClick?: () => void;
     onHomeClick?: () => void;
+    onHelpClick?: () => void;
     onSettingsClick?: () => void;
     onLogoutClick?: () => void;
     folderGroupsSlot?: ReactNode;
     className?: string;
     'aria-label'?: string;
 }
-declare function NavVertical({ onBackClick, onHomeClick, onSettingsClick, onLogoutClick, folderGroupsSlot, className, 'aria-label': ariaLabel, }: NavVerticalProps): react_jsx_runtime.JSX.Element;
+declare function NavVertical({ onBackClick, onHomeClick, onHelpClick, onSettingsClick, onLogoutClick, folderGroupsSlot, className, 'aria-label': ariaLabel, }: NavVerticalProps): react_jsx_runtime.JSX.Element;
 declare namespace NavVertical {
     var displayName: string;
 }

package/dist/layout/index.d.ts

@@ -72,6 +72,7 @@ declare const IconNames: {
     readonly FLOW_CHART: "flow-chart";
     readonly LOGOUT_CIRCLE_R_FILL: "logout-circle-r-fill";
     readonly LOGOUT_CIRCLE_R_LINE: "logout-circle-r-line";
+    readonly QUESTION_LINE: "question-line";
     readonly SIDE_BAR_FILL: "side-bar-fill";
     readonly CHECK: "check-fill";
     readonly CHECK_CIRCLE: "checkbox-circle-fill";
@@ -81,6 +82,7 @@ declare const IconNames: {
     readonly ROCKET: "rocket-fill";
     readonly TICKET: "coupon-2-fill";
     readonly CLIPBOARD: "clipboard-fill";
+    readonly QUESTION_CIRCLE: "question-circle-line";
 };
 type IconName = (typeof IconNames)[keyof typeof IconNames];
 
@@ -104,11 +106,12 @@ interface LayoutProps {
     navHorizontalActionsSlot?: ReactNode;
     onNavBackClick?: () => void;
     onNavHomeClick?: () => void;
+    onNavHelpClick?: () => void;
     onNavSettingsClick?: () => void;
     onNavLogoutClick?: () => void;
     className?: string;
 }
-declare function Layout({ mainPaneSlot, backgroundSlot, navVerticalSlot, navHorizontalUserSlot, navHorizontalActionsSlot, onNavBackClick, onNavHomeClick, onNavSettingsClick, onNavLogoutClick, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
+declare function Layout({ mainPaneSlot, backgroundSlot, navVerticalSlot, navHorizontalUserSlot, navHorizontalActionsSlot, onNavBackClick, onNavHomeClick, onNavHelpClick, onNavSettingsClick, onNavLogoutClick, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
 declare namespace Layout {
     var displayName: string;
 }
@@ -154,13 +157,14 @@ declare namespace WorkflowStatusCard {
 interface NavVerticalProps {
     onBackClick?: () => void;
     onHomeClick?: () => void;
+    onHelpClick?: () => void;
     onSettingsClick?: () => void;
     onLogoutClick?: () => void;
     folderGroupsSlot?: ReactNode;
     className?: string;
     'aria-label'?: string;
 }
-declare function NavVertical({ onBackClick, onHomeClick, onSettingsClick, onLogoutClick, folderGroupsSlot, className, 'aria-label': ariaLabel, }: NavVerticalProps): react_jsx_runtime.JSX.Element;
+declare function NavVertical({ onBackClick, onHomeClick, onHelpClick, onSettingsClick, onLogoutClick, folderGroupsSlot, className, 'aria-label': ariaLabel, }: NavVerticalProps): react_jsx_runtime.JSX.Element;
 declare namespace NavVertical {
     var displayName: string;
 }

package/dist/layout/index.js

@@ -35,7 +35,7 @@ var tokens = {
     text: {
       primary: "#FFFFFF",
       secondary: "#B4B8C5",
-      tertiary: "#6B7280"},
+      tertiary: "#9CA3AF"},
     // Teal (brand aligned)
     error: "#EF4444",
     // Sky Blue (brand aligned)
@@ -442,6 +442,7 @@ var IconNames = {
   FLOW_CHART: "flow-chart",
   LOGOUT_CIRCLE_R_FILL: "logout-circle-r-fill",
   LOGOUT_CIRCLE_R_LINE: "logout-circle-r-line",
+  QUESTION_LINE: "question-line",
   SIDE_BAR_FILL: "side-bar-fill",
   CHECK: "check-fill",
   CHECK_CIRCLE: "checkbox-circle-fill",
@@ -450,7 +451,8 @@ var IconNames = {
   HAMMER: "hammer-fill",
   ROCKET: "rocket-fill",
   TICKET: "coupon-2-fill",
-  CLIPBOARD: "clipboard-fill"
+  CLIPBOARD: "clipboard-fill",
+  QUESTION_CIRCLE: "question-circle-line"
 };
 var iconFiles = {
   "mic-fill": "Icon-mic-fill.svg",
@@ -468,6 +470,7 @@ var iconFiles = {
   "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",
+  "question-line": "Icon-question-line.svg",
   "side-bar-fill": "Icon-side-bar-fill.svg",
   "check-fill": "Icon-check-fill.svg",
   "checkbox-circle-fill": "Icon-checkbox-circle-fill.svg",
@@ -476,7 +479,8 @@ var iconFiles = {
   "hammer-fill": "Icon-hammer-fill.svg",
   "rocket-fill": "Icon-rocket-fill.svg",
   "coupon-2-fill": "Icon-coupon-2-fill.svg",
-  "clipboard-fill": "Icon-clipboard-fill.svg"
+  "clipboard-fill": "Icon-clipboard-fill.svg",
+  "question-circle-line": "Icon-question-circle-line.svg"
 };
 function getIconPath(name) {
   return `${ICON_BASE_PATH}/${iconFiles[name]}`;
@@ -576,17 +580,10 @@ var Container2 = styled9.nav`
   display: flex;
   flex-direction: column;
   z-index: ${tokens.zIndex.base + 9}; /* Below horizontal nav and chat sidebar */
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none; /* Firefox */
+  overflow: hidden;
   /* Use CSS custom property for coordinated animations with MainPane */
   transition: transform var(--layout-transition-duration, 0.3s) var(--layout-transition-easing, ease-out);
 
-  /* Hide scrollbar for Chrome, Safari and Opera */
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
   /* Dark theme support */
   @media (prefers-color-scheme: dark) {
     background-color: ${tokens.colors.background.darkest};
@@ -597,28 +594,9 @@ var Container2 = styled9.nav`
     width: 60px; /* Match MainPane left offset on mobile */
   }
 
-  /* Mobile landscape: allow content to overflow and scroll with thin scrollbar */
+  /* Mobile landscape */
   @media (orientation: landscape) and (max-height: 500px) {
     width: 60px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-width: thin; /* Firefox - show thin scrollbar */
-
-    /* Show thin scrollbar for Chrome, Safari */
-    &::-webkit-scrollbar {
-      display: block;
-      width: 3px;
-      height: 3px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: ${tokens.colors.border.default};
-      border-radius: 2px;
-    }
   }
 `;
 var TopSection = styled9.div`
@@ -689,8 +667,9 @@ var FolderGroupsSlot = styled9.div`
   align-items: center;
   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) */
+  flex: 1 1 0%; /* Take remaining space but shrink aggressively */
+  min-height: 80px; /* At least show one category icon */
+  overflow: hidden; /* Let NavigationContainer inside handle its own scroll */
 
   /* Server/workspace icons styling */
   > * {
@@ -707,38 +686,36 @@ var FolderGroupsSlot = styled9.div`
 
   /* Responsive adjustments */
   @media (max-width: ${tokens.breakpoints.tablet}px) {
-    padding: 0 6px ${tokens.spacing.md} 96px; /* Reduce horizontal padding on mobile */
-  }
-
-  /* Mobile landscape: remove extra padding since BottomSection flows with content */
-  @media (orientation: landscape) and (max-height: 500px) {
-    padding-bottom: ${tokens.spacing.md};
-    flex: 0 0 auto; /* Don't flex-grow, allow natural height */
+    padding: 0 6px ${tokens.spacing.md}; /* Reduce horizontal padding on mobile */
   }
 `;
 var BottomSection = styled9.div`
-  position: absolute;
-  bottom: 0; /* At the bottom of the nav container */
-  left: 0;
-  right: 0;
+  flex: 0 1 auto; /* Natural size, can shrink when no space */
+  min-height: 48px; /* At least one button visible */
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: ${tokens.spacing.sm};
   padding: ${tokens.spacing.md} 0;
-  background-color: ${tokens.colors.background.darker};
+  overflow-y: auto;
+  overflow-x: hidden;
 
-  @media (prefers-color-scheme: dark) {
-    background-color: ${tokens.colors.background.darkest};
+  /* Match NavigationContainer scroll styling */
+  &::-webkit-scrollbar {
+    width: 3px;
   }
 
-  /* Mobile landscape: make bottom section flow with content instead of fixed */
-  @media (orientation: landscape) and (max-height: 500px) {
-    position: relative;
-    bottom: auto;
-    margin-top: auto; /* Push to bottom of flex container */
-    flex-shrink: 0;
+  &::-webkit-scrollbar-track {
+    background: transparent;
   }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${tokens.colors.border.default};
+    border-radius: 2px;
+  }
+
+  scrollbar-width: thin;
+  scrollbar-color: ${tokens.colors.border.default} transparent;
 `;
 var BottomButton = styled9.button`
   width: 40px;
@@ -776,6 +753,7 @@ var BottomButton = styled9.button`
 function NavVertical({
   onBackClick,
   onHomeClick,
+  onHelpClick,
   onSettingsClick,
   onLogoutClick,
   folderGroupsSlot,
@@ -784,6 +762,7 @@ function NavVertical({
 }) {
   const backButtonRef = useRef(null);
   const homeButtonRef = useRef(null);
+  const helpButtonRef = useRef(null);
   const settingsButtonRef = useRef(null);
   const logoutButtonRef = useRef(null);
   const { buttonProps: backButtonProps } = useButton(
@@ -800,6 +779,13 @@ function NavVertical({
     },
     homeButtonRef
   );
+  const { buttonProps: helpButtonProps } = useButton(
+    {
+      onPress: onHelpClick,
+      "aria-label": "Help"
+    },
+    helpButtonRef
+  );
   const { buttonProps: settingsButtonProps } = useButton(
     {
       onPress: onSettingsClick,
@@ -814,11 +800,13 @@ function NavVertical({
     },
     logoutButtonRef
   );
+  const hasBottomButtons = onHelpClick || onSettingsClick || onLogoutClick;
   return /* @__PURE__ */ jsxs(Container2, { className, role: "navigation", "aria-label": ariaLabel, children: [
     /* @__PURE__ */ jsx(TopSection, { children: onBackClick ? /* @__PURE__ */ jsx(BackButton, { ...backButtonProps, ref: backButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "side-bar-fill", size: 20, color: "white" }) }) : onHomeClick ? /* @__PURE__ */ jsx(BackButton, { ...homeButtonProps, ref: homeButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "side-bar-fill", size: 24, color: "white" }) }) : null }),
     /* @__PURE__ */ jsx(Separator, {}),
     /* @__PURE__ */ jsx(FolderGroupsSlot, { children: folderGroupsSlot }),
-    (onSettingsClick || onLogoutClick) && /* @__PURE__ */ jsxs(BottomSection, { children: [
+    hasBottomButtons && /* @__PURE__ */ jsxs(BottomSection, { children: [
+      onHelpClick && /* @__PURE__ */ jsx(BottomButton, { ...helpButtonProps, ref: helpButtonRef, "data-tour-help-button": true, children: /* @__PURE__ */ jsx(Icon, { name: "question-circle-line", size: 24, color: "white" }) }),
       onSettingsClick && /* @__PURE__ */ jsx(BottomButton, { ...settingsButtonProps, ref: settingsButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "settings-3-line", size: 24, color: "white" }) }),
       onLogoutClick && /* @__PURE__ */ jsx(BottomButton, { ...logoutButtonProps, ref: logoutButtonRef, children: /* @__PURE__ */ jsx(Icon, { name: "logout-circle-r-line", size: 24, color: "white" }) })
     ] })
@@ -928,6 +916,7 @@ function Layout({
   navHorizontalActionsSlot,
   onNavBackClick,
   onNavHomeClick,
+  onNavHelpClick,
   onNavSettingsClick,
   onNavLogoutClick,
   className
@@ -939,6 +928,7 @@ function Layout({
         folderGroupsSlot: navVerticalSlot,
         onBackClick: onNavBackClick,
         onHomeClick: onNavHomeClick,
+        onHelpClick: onNavHelpClick,
         onSettingsClick: onNavSettingsClick,
         onLogoutClick: onNavLogoutClick
       }