@agentiffai/design 0.1.6 → 0.1.8

package/dist/layout/index.d.cts

@@ -1,7 +1,61 @@
+import React__default, { ImgHTMLAttributes, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ImgHTMLAttributes, ReactNode } from 'react';
 import { AriaButtonProps } from '@react-types/button';
 
+/**
+ * CategoryNav Component
+ *
+ * Vertical navigation bar displaying categories with expandable sub-items.
+ * Generic component that can be used for any category-based navigation.
+ */
+
+/**
+ * Represents a sub-item within a category
+ */
+interface CategorySubItem {
+    /** Unique identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Icon element or image path */
+    icon: React__default.ReactNode | string;
+}
+/**
+ * Represents a category in the navigation
+ */
+interface CategoryItem<T extends string = string> {
+    /** Unique identifier */
+    id: T;
+    /** Display label */
+    label: string;
+    /** Icon path (SVG) */
+    iconPath: string;
+    /** Sub-items within this category */
+    subItems?: CategorySubItem[];
+}
+interface CategoryNavProps<T extends string = string> {
+    /** List of categories to display */
+    categories: CategoryItem<T>[];
+    /** Currently selected category (null = none) */
+    selectedCategory: T | null;
+    /** Currently selected sub-item within category (null = all in category) */
+    selectedSubItem: string | null;
+    /** Callback when category is selected */
+    onCategorySelect: (category: T | null) => void;
+    /** Callback when sub-item is selected */
+    onSubItemSelect: (subItem: string | null) => void;
+    /** Optional counts per category */
+    categoryCounts?: Record<T, number>;
+    /** Optional set of enabled categories (if provided, hides categories not in set) */
+    enabledCategories?: Set<T>;
+    /** Test ID prefix for testing */
+    testIdPrefix?: string;
+}
+declare function CategoryNav<T extends string = string>({ categories, selectedCategory, selectedSubItem, onCategorySelect, onSubItemSelect, categoryCounts, enabledCategories, testIdPrefix, }: CategoryNavProps<T>): React__default.ReactElement;
+declare namespace CategoryNav {
+    var displayName: string;
+}
+
 declare const IconNames: {
     readonly MIC: "mic-fill";
     readonly MIC_OFF: "mic-off-fill";
@@ -33,13 +87,15 @@ declare namespace Icon {
 
 interface LayoutProps {
     mainPaneSlot: ReactNode;
+    /** Background content rendered behind MainPane, visible when MainPane slides away */
+    backgroundSlot?: ReactNode;
     navVerticalSlot?: ReactNode;
     navHorizontalUserSlot?: ReactNode;
     navHorizontalActionsSlot?: ReactNode;
     onNavBackClick?: () => void;
     className?: string;
 }
-declare function Layout({ mainPaneSlot, navVerticalSlot, navHorizontalUserSlot, navHorizontalActionsSlot, onNavBackClick, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
+declare function Layout({ mainPaneSlot, backgroundSlot, navVerticalSlot, navHorizontalUserSlot, navHorizontalActionsSlot, onNavBackClick, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
 declare namespace Layout {
     var displayName: string;
 }
@@ -106,7 +162,12 @@ interface RunItem {
     name: string;
     status: 'completed' | 'running' | 'failed';
     details: string;
-    category: 'scheduled' | 'completed' | 'issues';
+    /** @deprecated Use 'executing' | 'completed' | 'failed' instead. 'scheduled' maps to 'executing', 'issues' maps to 'failed' */
+    category: 'scheduled' | 'completed' | 'issues' | 'executing' | 'failed';
+    /** Workflow name for grouping executions under their parent workflow */
+    workflowName?: string;
+    /** Workflow ID for grouping */
+    workflowId?: string;
     icon?: 'loader' | 'radioButton' | 'shieldCheck' | 'shieldCross' | 'bell' | 'file' | 'link' | 'chat' | 'warning';
     logs?: ActionLog[];
     customContent?: React.ReactNode;
@@ -119,8 +180,8 @@ interface OAuthConnectionData {
     scopes?: string[];
 }
 interface PaneMenusProps {
-    activeTab?: 'runs' | 'usage' | 'connections';
-    onTabChange?: (tab: 'runs' | 'usage' | 'connections') => void;
+    activeTab?: 'workflows' | 'runs' | 'usage' | 'connections';
+    onTabChange?: (tab: 'workflows' | 'runs' | 'usage' | 'connections') => void;
     runs?: RunItem[];
     onRunSelect?: (runId: string) => void;
     currentUsage?: number;
@@ -133,9 +194,10 @@ interface PaneMenusProps {
     onOAuthDisconnect?: (connectionId: string) => void;
     isOAuthConnecting?: boolean;
     isOAuthLoading?: boolean;
-    onBrowseAutomations?: () => void;
+    connectionsSlot?: React.ReactNode;
+    workflowsSlot?: React.ReactNode;
 }
-declare function PaneMenus({ activeTab, onTabChange, runs, onRunSelect, currentUsage, maxUsage, isGoogleConnected, onGoogleConnect, onGoogleDisconnect, oauthConnections, onOAuthConnect, onOAuthDisconnect, isOAuthConnecting, isOAuthLoading, onBrowseAutomations, }: 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, }: PaneMenusProps): react_jsx_runtime.JSX.Element;
 
 type BrandType = 'Google' | 'Microsoft' | 'Slack' | 'YouTube';
 interface PaneSectionHeaderProps {
@@ -222,4 +284,4 @@ declare namespace ServiceIcon {
     var displayName: string;
 }
 
-export { ActionButtons, type ActionButtonsProps, type BrandType, Icon, type IconName, IconNames, type IconProps, Layout, type LayoutProps, NavHorizontal, type NavHorizontalProps, NavVertical, type NavVerticalProps, type OAuthConnectionData, PaneMenus, type PaneMenusProps, PaneSectionHeader, type PaneSectionHeaderProps, type ServiceBrand, ServiceIcon, type ServiceIconProps, WorkflowStatusCard, type WorkflowStatusCardProps };
+export { ActionButtons, type ActionButtonsProps, type BrandType, type CategoryItem, CategoryNav, type CategoryNavProps, type CategorySubItem, Icon, type IconName, IconNames, type IconProps, Layout, type LayoutProps, NavHorizontal, type NavHorizontalProps, NavVertical, type NavVerticalProps, type OAuthConnectionData, PaneMenus, type PaneMenusProps, PaneSectionHeader, type PaneSectionHeaderProps, type ServiceBrand, ServiceIcon, type ServiceIconProps, WorkflowStatusCard, type WorkflowStatusCardProps };

package/dist/layout/index.d.ts

@@ -1,7 +1,61 @@
+import React__default, { ImgHTMLAttributes, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ImgHTMLAttributes, ReactNode } from 'react';
 import { AriaButtonProps } from '@react-types/button';
 
+/**
+ * CategoryNav Component
+ *
+ * Vertical navigation bar displaying categories with expandable sub-items.
+ * Generic component that can be used for any category-based navigation.
+ */
+
+/**
+ * Represents a sub-item within a category
+ */
+interface CategorySubItem {
+    /** Unique identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Icon element or image path */
+    icon: React__default.ReactNode | string;
+}
+/**
+ * Represents a category in the navigation
+ */
+interface CategoryItem<T extends string = string> {
+    /** Unique identifier */
+    id: T;
+    /** Display label */
+    label: string;
+    /** Icon path (SVG) */
+    iconPath: string;
+    /** Sub-items within this category */
+    subItems?: CategorySubItem[];
+}
+interface CategoryNavProps<T extends string = string> {
+    /** List of categories to display */
+    categories: CategoryItem<T>[];
+    /** Currently selected category (null = none) */
+    selectedCategory: T | null;
+    /** Currently selected sub-item within category (null = all in category) */
+    selectedSubItem: string | null;
+    /** Callback when category is selected */
+    onCategorySelect: (category: T | null) => void;
+    /** Callback when sub-item is selected */
+    onSubItemSelect: (subItem: string | null) => void;
+    /** Optional counts per category */
+    categoryCounts?: Record<T, number>;
+    /** Optional set of enabled categories (if provided, hides categories not in set) */
+    enabledCategories?: Set<T>;
+    /** Test ID prefix for testing */
+    testIdPrefix?: string;
+}
+declare function CategoryNav<T extends string = string>({ categories, selectedCategory, selectedSubItem, onCategorySelect, onSubItemSelect, categoryCounts, enabledCategories, testIdPrefix, }: CategoryNavProps<T>): React__default.ReactElement;
+declare namespace CategoryNav {
+    var displayName: string;
+}
+
 declare const IconNames: {
     readonly MIC: "mic-fill";
     readonly MIC_OFF: "mic-off-fill";
@@ -33,13 +87,15 @@ declare namespace Icon {
 
 interface LayoutProps {
     mainPaneSlot: ReactNode;
+    /** Background content rendered behind MainPane, visible when MainPane slides away */
+    backgroundSlot?: ReactNode;
     navVerticalSlot?: ReactNode;
     navHorizontalUserSlot?: ReactNode;
     navHorizontalActionsSlot?: ReactNode;
     onNavBackClick?: () => void;
     className?: string;
 }
-declare function Layout({ mainPaneSlot, navVerticalSlot, navHorizontalUserSlot, navHorizontalActionsSlot, onNavBackClick, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
+declare function Layout({ mainPaneSlot, backgroundSlot, navVerticalSlot, navHorizontalUserSlot, navHorizontalActionsSlot, onNavBackClick, className, }: LayoutProps): react_jsx_runtime.JSX.Element;
 declare namespace Layout {
     var displayName: string;
 }
@@ -106,7 +162,12 @@ interface RunItem {
     name: string;
     status: 'completed' | 'running' | 'failed';
     details: string;
-    category: 'scheduled' | 'completed' | 'issues';
+    /** @deprecated Use 'executing' | 'completed' | 'failed' instead. 'scheduled' maps to 'executing', 'issues' maps to 'failed' */
+    category: 'scheduled' | 'completed' | 'issues' | 'executing' | 'failed';
+    /** Workflow name for grouping executions under their parent workflow */
+    workflowName?: string;
+    /** Workflow ID for grouping */
+    workflowId?: string;
     icon?: 'loader' | 'radioButton' | 'shieldCheck' | 'shieldCross' | 'bell' | 'file' | 'link' | 'chat' | 'warning';
     logs?: ActionLog[];
     customContent?: React.ReactNode;
@@ -119,8 +180,8 @@ interface OAuthConnectionData {
     scopes?: string[];
 }
 interface PaneMenusProps {
-    activeTab?: 'runs' | 'usage' | 'connections';
-    onTabChange?: (tab: 'runs' | 'usage' | 'connections') => void;
+    activeTab?: 'workflows' | 'runs' | 'usage' | 'connections';
+    onTabChange?: (tab: 'workflows' | 'runs' | 'usage' | 'connections') => void;
     runs?: RunItem[];
     onRunSelect?: (runId: string) => void;
     currentUsage?: number;
@@ -133,9 +194,10 @@ interface PaneMenusProps {
     onOAuthDisconnect?: (connectionId: string) => void;
     isOAuthConnecting?: boolean;
     isOAuthLoading?: boolean;
-    onBrowseAutomations?: () => void;
+    connectionsSlot?: React.ReactNode;
+    workflowsSlot?: React.ReactNode;
 }
-declare function PaneMenus({ activeTab, onTabChange, runs, onRunSelect, currentUsage, maxUsage, isGoogleConnected, onGoogleConnect, onGoogleDisconnect, oauthConnections, onOAuthConnect, onOAuthDisconnect, isOAuthConnecting, isOAuthLoading, onBrowseAutomations, }: 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, }: PaneMenusProps): react_jsx_runtime.JSX.Element;
 
 type BrandType = 'Google' | 'Microsoft' | 'Slack' | 'YouTube';
 interface PaneSectionHeaderProps {
@@ -222,4 +284,4 @@ declare namespace ServiceIcon {
     var displayName: string;
 }
 
-export { ActionButtons, type ActionButtonsProps, type BrandType, Icon, type IconName, IconNames, type IconProps, Layout, type LayoutProps, NavHorizontal, type NavHorizontalProps, NavVertical, type NavVerticalProps, type OAuthConnectionData, PaneMenus, type PaneMenusProps, PaneSectionHeader, type PaneSectionHeaderProps, type ServiceBrand, ServiceIcon, type ServiceIconProps, WorkflowStatusCard, type WorkflowStatusCardProps };
+export { ActionButtons, type ActionButtonsProps, type BrandType, type CategoryItem, CategoryNav, type CategoryNavProps, type CategorySubItem, Icon, type IconName, IconNames, type IconProps, Layout, type LayoutProps, NavHorizontal, type NavHorizontalProps, NavVertical, type NavVerticalProps, type OAuthConnectionData, PaneMenus, type PaneMenusProps, PaneSectionHeader, type PaneSectionHeaderProps, type ServiceBrand, ServiceIcon, type ServiceIconProps, WorkflowStatusCard, type WorkflowStatusCardProps };