@agentiffai/design 1.3.22 → 1.3.24

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";
@@ -106,9 +107,10 @@ interface LayoutProps {
     onNavHomeClick?: () => void;
     onNavSettingsClick?: () => void;
     onNavLogoutClick?: () => void;
+    onNavHelpClick?: () => 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, onNavSettingsClick, onNavLogoutClick, onNavHelpClick, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
 declare namespace Layout {
     var displayName: string;
 }
@@ -156,11 +158,12 @@ interface NavVerticalProps {
     onHomeClick?: () => void;
     onSettingsClick?: () => void;
     onLogoutClick?: () => void;
+    onHelpClick?: () => 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, onSettingsClick, onLogoutClick, onHelpClick, 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";
@@ -106,9 +107,10 @@ interface LayoutProps {
     onNavHomeClick?: () => void;
     onNavSettingsClick?: () => void;
     onNavLogoutClick?: () => void;
+    onNavHelpClick?: () => 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, onNavSettingsClick, onNavLogoutClick, onNavHelpClick, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
 declare namespace Layout {
     var displayName: string;
 }
@@ -156,11 +158,12 @@ interface NavVerticalProps {
     onHomeClick?: () => void;
     onSettingsClick?: () => void;
     onLogoutClick?: () => void;
+    onHelpClick?: () => 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, onSettingsClick, onLogoutClick, onHelpClick, folderGroupsSlot, className, 'aria-label': ariaLabel, }: NavVerticalProps): react_jsx_runtime.JSX.Element;
 declare namespace NavVertical {
     var displayName: string;
 }

package/dist/layout/index.js

@@ -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",
@@ -468,6 +469,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",
@@ -688,9 +690,8 @@ var FolderGroupsSlot = styled9.div`
   flex-direction: column;
   align-items: center;
   gap: ${tokens.spacing.sm};
-  padding: 0 ${tokens.spacing.md} ${tokens.spacing.md};
+  padding: 0 ${tokens.spacing.md} 120px; /* Extra bottom padding to avoid overlap with BottomSection */
   flex: 1;
-  padding-bottom: 120px; /* Prevent overlap with bottom section (2 buttons @ 40px + 1 gap @ 8px + padding @ 32px) */
 
   /* Server/workspace icons styling */
   > * {
@@ -707,7 +708,7 @@ 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 */
+    padding: 0 6px 120px; /* Reduce horizontal padding on mobile */
   }
 
   /* Mobile landscape: remove extra padding since BottomSection flows with content */
@@ -718,7 +719,7 @@ var FolderGroupsSlot = styled9.div`
 `;
 var BottomSection = styled9.div`
   position: absolute;
-  bottom: 0; /* At the bottom of the nav container */
+  bottom: 0;
   left: 0;
   right: 0;
   display: flex;
@@ -778,6 +779,7 @@ function NavVertical({
   onHomeClick,
   onSettingsClick,
   onLogoutClick,
+  onHelpClick,
   folderGroupsSlot,
   className,
   "aria-label": ariaLabel = "Vertical navigation sidebar"
@@ -786,6 +788,7 @@ function NavVertical({
   const homeButtonRef = useRef(null);
   const settingsButtonRef = useRef(null);
   const logoutButtonRef = useRef(null);
+  const helpButtonRef = useRef(null);
   const { buttonProps: backButtonProps } = useButton(
     {
       onPress: onBackClick,
@@ -814,11 +817,20 @@ function NavVertical({
     },
     logoutButtonRef
   );
+  const { buttonProps: helpButtonProps } = useButton(
+    {
+      onPress: onHelpClick,
+      "aria-label": "Help"
+    },
+    helpButtonRef
+  );
+  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-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" }) })
     ] })
@@ -930,6 +942,7 @@ function Layout({
   onNavHomeClick,
   onNavSettingsClick,
   onNavLogoutClick,
+  onNavHelpClick,
   className
 }) {
   return /* @__PURE__ */ jsxs(Container3, { className, children: [
@@ -940,7 +953,8 @@ function Layout({
         onBackClick: onNavBackClick,
         onHomeClick: onNavHomeClick,
         onSettingsClick: onNavSettingsClick,
-        onLogoutClick: onNavLogoutClick
+        onLogoutClick: onNavLogoutClick,
+        onHelpClick: onNavHelpClick
       }
     ),
     backgroundSlot && /* @__PURE__ */ jsx(BackgroundPane, { children: backgroundSlot }),
@@ -1645,7 +1659,7 @@ var TabPanelWrapper = styled9.div`
   overflow-y: auto;
   overflow-x: hidden; // Prevent horizontal overflow
   scrollbar-gutter: stable; // Always reserve space for scrollbar to prevent width jump
-  background-color: ${tokens.colors.surface.overlay};
+  background-color: ${tokens.colors.background.dark};
   min-height: 0; // Enable proper flex shrinking and scrolling
 
   @media (max-width: ${tokens.breakpoints.mobile}px) {