ai-design-system 0.1.11 → 0.1.13

package/components/blocks/AppSidebar/AppSidebar.tsx

@@ -12,25 +12,9 @@ import {
   SidebarGroupLabel,
 } from "@/components/primitives/Sidebar"
 import { Icon } from "@/components/primitives/Icon"
-import { NavigationList, type NavigationItem } from "@/components/composites/NavigationList"
+import { NavigationList } from "@/components/composites/NavigationList"
 import { NavUser } from "@/components/composites/NavUser"
-
-export interface AppSidebarProps extends React.ComponentPropsWithoutRef<typeof Sidebar> {
-  logo?: {
-    icon: string
-    text: string
-    href: string
-  }
-  mainNavigation: NavigationItem[]
-  secondaryNavigation?: NavigationItem[]
-  documents?: NavigationItem[]
-  user: {
-    name: string
-    email: string
-    avatar?: string
-  }
-  userActions?: { label: string; onClick: () => void }[]
-}
+import type { AppSidebarProps } from "./interfaces"
 
 export const AppSidebar = React.memo<AppSidebarProps>(
   ({ logo, mainNavigation, secondaryNavigation, documents, user, userActions, ...props }) => {

package/components/blocks/AppSidebar/index.ts

@@ -1,2 +1,2 @@
 export { AppSidebar } from './AppSidebar'
-export type { AppSidebarProps } from './AppSidebar'
+export type { AppSidebarProps } from './interfaces'

package/components/blocks/AppSidebar/interfaces.ts

@@ -0,0 +1,19 @@
+import type { NavigationItem } from "@/components/composites/NavigationList/interfaces";
+
+export interface AppSidebarProps {
+  logo?: {
+    icon: string;
+    text: string;
+    href: string;
+  };
+  mainNavigation: NavigationItem[];
+  secondaryNavigation?: NavigationItem[];
+  documents?: NavigationItem[];
+  user: {
+    name: string;
+    email: string;
+    avatar?: string;
+  };
+  userActions?: { label: string; onClick: () => void }[];
+  className?: string;
+}

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -1,35 +1,7 @@
 import * as React from "react"
-import { AdjustableLayout, type AdjustableLayoutSection } from "@/components/composites/AdjustableLayout"
-import { AppHeader, type AppHeaderProps } from "@/components/composites/AppHeader"
-
-export interface SectionLayoutSection extends AdjustableLayoutSection {
-  header?: AppHeaderProps
-}
-
-export interface SectionLayoutProps extends React.ComponentPropsWithoutRef<"div"> {
-  /**
-   * Layout sections with optional headers
-   */
-  sections: SectionLayoutSection[]
-  /**
-   * Layout orientation for adjustable layout
-   * @default "horizontal"
-   */
-  orientation?: "horizontal" | "vertical"
-  /**
-   * Storage key for layout panel sizes persistence
-   */
-  storageKey?: string
-  /**
-   * Callback for section resize events
-   */
-  onSectionResize?: (sectionId: string, newSize: number) => void
-  /**
-   * Color theme for drag handles
-   * @default "border"
-   */
-  dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted"
-}
+import { AdjustableLayout } from "@/components/composites/AdjustableLayout"
+import { AppHeader } from "@/components/composites/AppHeader"
+import type { SectionLayoutProps } from "./interfaces"
 
 /**
  * SectionLayout Block

package/components/blocks/SectionLayout/index.ts

@@ -1,2 +1,2 @@
 export { SectionLayout } from './SectionLayout'
-export type { SectionLayoutProps } from './SectionLayout'
+export type { SectionLayoutProps, SectionLayoutSection } from './interfaces'

package/components/blocks/SectionLayout/interfaces.ts

@@ -0,0 +1,21 @@
+import type React from "react";
+import type { AppHeaderProps } from "@/components/composites/AppHeader/interfaces";
+
+export interface SectionLayoutSection {
+  id: string;
+  content: React.ReactNode;
+  defaultSize?: number;
+  minSize?: number;
+  maxSize?: number;
+  collapsible?: boolean;
+  collapsedSize?: number;
+  header?: AppHeaderProps;
+}
+
+export interface SectionLayoutProps extends React.ComponentPropsWithoutRef<"div"> {
+  sections: SectionLayoutSection[];
+  orientation?: "horizontal" | "vertical";
+  storageKey?: string;
+  onSectionResize?: (sectionId: string, newSize: number) => void;
+  dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted";
+}

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -18,42 +18,11 @@ import { Connection as ConnectionLine } from "@/components/ai-elements/connectio
 import { Controls } from "@/components/ai-elements/controls";
 import { Edge } from "@/components/ai-elements/edge";
 import { Panel } from "@/components/ai-elements/panel";
-import { StateNode, type StateNodeData } from "@/components/composites/StateNode";
-import { TransitionNode, type TransitionNodeData } from "@/components/composites/TransitionNode";
+import { StateNode } from "@/components/composites/StateNode";
+import { TransitionNode } from "@/components/composites/TransitionNode";
+import type { WorkflowCanvasProps, WorkflowEdge } from "./interfaces";
 import "@xyflow/react/dist/style.css";
 
-export type WorkflowNodeData = StateNodeData | TransitionNodeData;
-export type WorkflowNode = Node<WorkflowNodeData>;
-export type WorkflowEdge = {
-  id: string;
-  source: string;
-  target: string;
-  sourceHandle?: string | null;
-  targetHandle?: string | null;
-  type?: string;
-};
-
-export interface WorkflowCanvasProps {
-  nodes: WorkflowNode[];
-  edges: WorkflowEdge[];
-  onNodesChange?: (changes: NodeChange[]) => void;
-  onEdgesChange?: (changes: EdgeChange[]) => void;
-  onConnect?: (connection: Connection) => void;
-  onConnectStart?: (event: MouseEvent | TouchEvent, params: OnConnectStartParams) => void;
-  onConnectEnd?: (event: MouseEvent | TouchEvent) => void;
-  onPaneClick?: () => void;
-  onNodeClick?: (event: React.MouseEvent, node: WorkflowNode) => void;
-  onEdgeClick?: (event: React.MouseEvent, edge: WorkflowEdge) => void;
-  showMinimap?: boolean;
-  /** Enable/disable manual drawing of connections and node dragging. Default: false */
-  interactive?: boolean;
-  /** Floating overlay rendered top-left inside the canvas */
-  topLeft?: ReactNode;
-  /** Floating overlay rendered top-right inside the canvas */
-  topRight?: ReactNode;
-  className?: string;
-}
-
 const edgeTypes = {
   animated: Edge.Animated,
   temporary: Edge.Temporary,

package/components/blocks/WorkflowCanvas/index.ts

@@ -1,2 +1,2 @@
 export { WorkflowCanvas } from "./WorkflowCanvas";
-export type { WorkflowCanvasProps, WorkflowNode, WorkflowEdge, WorkflowNodeData } from "./WorkflowCanvas";
+export type { WorkflowCanvasProps, WorkflowNode, WorkflowEdge, WorkflowNodeData } from "./interfaces";

package/components/blocks/WorkflowCanvas/interfaces.ts

@@ -0,0 +1,34 @@
+import type { Connection, EdgeChange, Node, NodeChange, OnConnectStartParams } from "@xyflow/react";
+import type React from "react";
+import type { StateNodeData } from "@/components/composites/StateNode";
+import type { TransitionNodeData } from "@/components/composites/TransitionNode";
+
+export type WorkflowNodeData = StateNodeData | TransitionNodeData;
+export type WorkflowNode = Node<WorkflowNodeData>;
+
+export interface WorkflowEdge {
+  id: string;
+  source: string;
+  target: string;
+  sourceHandle?: string | null;
+  targetHandle?: string | null;
+  type?: string;
+}
+
+export interface WorkflowCanvasProps {
+  nodes: WorkflowNode[];
+  edges: WorkflowEdge[];
+  onNodesChange?: (changes: NodeChange[]) => void;
+  onEdgesChange?: (changes: EdgeChange[]) => void;
+  onConnect?: (connection: Connection) => void;
+  onConnectStart?: (event: MouseEvent | TouchEvent, params: OnConnectStartParams) => void;
+  onConnectEnd?: (event: MouseEvent | TouchEvent) => void;
+  onPaneClick?: () => void;
+  onNodeClick?: (event: React.MouseEvent, node: WorkflowNode) => void;
+  onEdgeClick?: (event: React.MouseEvent, edge: WorkflowEdge) => void;
+  showMinimap?: boolean;
+  interactive?: boolean;
+  topLeft?: React.ReactNode;
+  topRight?: React.ReactNode;
+  className?: string;
+}

package/components/composites/AppHeader/AppHeader.tsx

@@ -2,22 +2,7 @@ import * as React from "react"
 import { SidebarTrigger } from "@/components/primitives/Sidebar"
 import { Separator } from "@/components/primitives/Separator"
 import { Tabs, TabsList, TabsTrigger } from "@/components/primitives/Tabs"
-
-export interface TabItem {
-  value: string
-  label: string
-}
-
-export interface AppHeaderProps {
-  title?: string
-  actions?: React.ReactNode
-  tabs?: TabItem[]
-  defaultTab?: string
-  onTabChange?: (value: string) => void
-  className?: string
-  showSidebarToggle?: boolean
-  showTitle?: boolean
-}
+import type { AppHeaderProps } from "./interfaces"
 
 export const AppHeader = React.memo<AppHeaderProps>(({ 
   title, 

package/components/composites/AppHeader/index.ts

@@ -1,2 +1,2 @@
 export { AppHeader } from './AppHeader'
-export type { AppHeaderProps, TabItem } from './AppHeader'
+export type { AppHeaderProps, TabItem } from './interfaces'

package/components/composites/AppHeader/interfaces.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+
+export interface TabItem {
+  value: string;
+  label: string;
+}
+
+export interface AppHeaderProps {
+  title?: string;
+  actions?: React.ReactNode;
+  tabs?: TabItem[];
+  defaultTab?: string;
+  onTabChange?: (value: string) => void;
+  className?: string;
+  showSidebarToggle?: boolean;
+  showTitle?: boolean;
+}

package/components/composites/FileQueue/FileQueue.tsx

@@ -11,6 +11,7 @@ import {
 } from "@/components/ai-elements/queue";
 import { Icon } from "@/components/primitives/Icon";
 import { cn } from "@/lib/utils";
+import type { FileQueueProps } from "./interfaces";
 
 /**
  * FileQueue Block
@@ -23,46 +24,14 @@ import { cn } from "@/lib/utils";
 /**
  * File item structure
  */
-export interface FileItem {
-  /** Unique identifier for the file */
-  id: string;
-  /** File name to display */
-  name: string;
-  /** Optional file path to display */
-  path?: string;
-}
 
 /**
  * File group structure
  */
-export interface FileGroup {
-  /** Unique identifier for the group */
-  id: string;
-  /** Display title for the group */
-  title: string;
-  /** Optional icon name from icon registry */
-  icon?: string;
-  /** Optional icon color class */
-  iconColor?: string;
-  /** Array of files in this group */
-  files: FileItem[];
-  /** Whether group should be open by default */
-  defaultOpen?: boolean;
-}
 
 /**
  * FileQueue component props
  */
-export interface FileQueueProps {
-  /** Array of file groups to display */
-  groups: FileGroup[];
-  /** ID of currently selected file */
-  selectedFileId?: string;
-  /** Callback when a file is selected */
-  onFileSelect?: (fileId: string) => void;
-  /** Additional CSS classes */
-  className?: string;
-}
 
 /**
  * FileQueue component - displays files organized into collapsible groups

package/components/composites/FileQueue/index.ts

@@ -4,21 +4,8 @@
  * Central export point for the FileQueue block component and its related types.
  */
 export { FileQueue } from "./FileQueue";
-export type { FileQueueProps, FileGroup, FileItem } from "./FileQueue";
+export type { FileQueueProps, FileGroup, FileItem, FileChangeData } from "./interfaces";
 
 // Legacy exports for backward compatibility (used by RefinementPanel)
 export { FileStatusBadge } from "./FileStatusBadge";
 export type { FileStatusBadgeProps, FileStatus } from "./FileStatusBadge";
-
-import type { FileStatus } from "./FileStatusBadge";
-
-/**
- * Legacy FileChangeData type for backward compatibility
- * @deprecated Use FileGroup and FileItem instead
- */
-export interface FileChangeData {
-  id: string;
-  filename: string;
-  status: FileStatus;
-  path: string;
-}

package/components/composites/FileQueue/interfaces.ts

@@ -0,0 +1,30 @@
+import type { FileStatus } from "./FileStatusBadge";
+
+export interface FileItem {
+  id: string;
+  name: string;
+  path?: string;
+}
+
+export interface FileGroup {
+  id: string;
+  title: string;
+  icon?: string;
+  iconColor?: string;
+  files: FileItem[];
+  defaultOpen?: boolean;
+}
+
+export interface FileQueueProps {
+  groups: FileGroup[];
+  selectedFileId?: string;
+  onFileSelect?: (fileId: string) => void;
+  className?: string;
+}
+
+export interface FileChangeData {
+  id: string;
+  filename: string;
+  status: FileStatus;
+  path: string;
+}

package/components/composites/NavigationList/index.ts

@@ -1,2 +1,3 @@
 export { NavigationList } from './NavigationList'
-export type { NavigationListProps, NavigationItem } from './NavigationList'
+export type { NavigationListProps } from './NavigationList'
+export type { NavigationItem } from './interfaces'

package/components/composites/NavigationList/interfaces.ts

@@ -0,0 +1,7 @@
+export interface NavigationItem {
+  title: string;
+  url: string;
+  icon?: string;
+  isActive?: boolean;
+  items?: NavigationItem[];
+}

package/components/composites/WorkflowToolbar/WorkflowToolbar.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Check, ChevronDown, Loader2 } from "lucide-react";
-import type { ReactNode } from "react";
 import { Button } from "@/components/primitives/Button";
 import { ButtonGroup } from "@/components/primitives/ButtonGroup";
 import {
@@ -12,47 +11,16 @@ import {
 } from "@/components/primitives/DropdownMenu";
 import { Icon } from "@/components/primitives/Icon";
 import { cn } from "@/lib/utils";
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-export interface WorkflowVersion {
-  id: string;
-  label: string;
-}
-
-export interface ToolbarAction {
-  id: string;
-  /**
-   * Icon to render inside the button.
-   * Pass a string icon name from the icon registry (preferred — no icon package needed in consumer)
-   * or a ReactNode for custom icons.
-   */
-  icon: string | ReactNode;
-  /** Tooltip text */
-  title: string;
-  onClick?: () => void;
-  disabled?: boolean;
-  /** Show spinner instead of icon */
-  loading?: boolean;
-  /** Show dot indicator (e.g. unsaved changes) */
-  indicator?: boolean;
-}
+import type {
+  ToolbarAction,
+  WorkflowToolbarActionsProps,
+  WorkflowToolbarProps,
+} from "./interfaces";
 
 // ---------------------------------------------------------------------------
 // WorkflowToolbarActions — generic grouped icon buttons
 // ---------------------------------------------------------------------------
 
-export interface WorkflowToolbarActionsProps {
-  /**
-   * Groups of actions. Each group renders as a `ButtonGroup`.
-   * The caller decides which buttons to show and what they do.
-   */
-  actionGroups?: ToolbarAction[][];
-  className?: string;
-}
-
 /**
  * Generic toolbar actions component.
  *
@@ -101,17 +69,6 @@ export function WorkflowToolbarActions({
 // WorkflowToolbar — full toolbar row
 // ---------------------------------------------------------------------------
 
-export interface WorkflowToolbarProps {
-  // Left: title text + version dropdown
-  workflowName?: string;
-  versions?: WorkflowVersion[];
-  currentVersionId?: string;
-  onVersionSelect?: (versionId: string) => void;
-  // Right: action buttons
-  actionGroups?: ToolbarAction[][];
-  className?: string;
-}
-
 /**
  * WorkflowToolbar composite.
  *

package/components/composites/WorkflowToolbar/index.ts

@@ -4,4 +4,4 @@ export type {
   WorkflowToolbarActionsProps,
   WorkflowVersion,
   ToolbarAction,
-} from "./WorkflowToolbar";
+} from "./interfaces";

package/components/composites/WorkflowToolbar/interfaces.ts

@@ -0,0 +1,30 @@
+import type React from "react";
+
+export interface WorkflowVersion {
+  id: string;
+  label: string;
+}
+
+export interface ToolbarAction {
+  id: string;
+  icon: string | React.ReactNode;
+  title: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  indicator?: boolean;
+}
+
+export interface WorkflowToolbarActionsProps {
+  actionGroups?: ToolbarAction[][];
+  className?: string;
+}
+
+export interface WorkflowToolbarProps {
+  workflowName?: string;
+  versions?: WorkflowVersion[];
+  currentVersionId?: string;
+  onVersionSelect?: (versionId: string) => void;
+  actionGroups?: ToolbarAction[][];
+  className?: string;
+}

package/components/features/RefinementPanel/index.ts

@@ -18,7 +18,7 @@ export { RefinementPanel } from "./RefinementPanel";
 export type { RefinementPanelProps, RefinementMessage } from "./RefinementPanel";
 
 // Hook contract definition (implement in your application)
-export type { UseRefinementPanelReturn } from "./useRefinementPanel";
+export type { UseRefinementPanelReturn } from "./useRefinementPanel.d";
 
 // Mock hook for testing and development
 export { useRefinementPanelMock as useMockRefinementPanel } from "./useRefinementPanel.mock";

package/components/features/WorkflowBuilder/index.ts

@@ -1,3 +1,4 @@
 export { WorkflowBuilder } from "./WorkflowBuilder";
 export type { WorkflowBuilderProps } from "./WorkflowBuilder";
+export type { UseWorkflowBuilder, UseWorkflowBuilderReturn } from "./useWorkflowBuilder.d";
 export type { ToolbarAction } from "@/components/composites/WorkflowToolbar";

package/components/features/WorkflowBuilder/useWorkflowBuilder.d.ts

@@ -39,6 +39,8 @@ export interface UseWorkflowBuilderReturn {
   currentWorkflowId?: string;
 }
 
+export type UseWorkflowBuilder = (workflowId?: string) => UseWorkflowBuilderReturn;
+
 export function useWorkflowBuilder(workflowId?: string): UseWorkflowBuilderReturn {
   throw new Error("useWorkflowBuilder must be implemented by the consuming application");
 }