ai-design-system 0.1.50 → 0.1.52

package/components/blocks/InboxPanel/InboxPanel.tsx

@@ -40,7 +40,7 @@ export const InboxPanel = React.memo<InboxPanelProps>(
           </div>
         ) : null}
 
-        <div className="px-4 pb-2">
+        <div className="px-4 pt-4 pb-2">
           <Input
             aria-label="Search inbox items"
             className="h-8"

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -21,6 +21,7 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
     resizable = true,
     dragHandleColor = "border",
     className,
+    padded = true,
     ...props 
   }) => {
     // Transform sections to include headers
@@ -47,6 +48,7 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
         onSectionResize={onSectionResize}
         dragHandleColor={dragHandleColor}
         className={className}
+        padded={padded}
         {...props}
       />
     )

package/components/blocks/SectionLayout/interfaces.ts

@@ -20,4 +20,5 @@ export interface SectionLayoutProps extends React.ComponentPropsWithoutRef<"div"
   onSectionResize?: (sectionId: string, newSize: number) => void;
   resizable?: boolean;
   dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted";
+  padded?: boolean;
 }

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -6,7 +6,7 @@ import {
   type Connection,
   useReactFlow,
 } from "@xyflow/react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { Canvas } from "@/components/ai-elements/canvas";
 import { Connection as ConnectionLine } from "@/components/ai-elements/connection";
 import { Controls } from "@/components/ai-elements/controls";
@@ -47,18 +47,6 @@ function WorkflowCanvasInner({
   className,
 }: WorkflowCanvasProps) {
   const { fitView } = useReactFlow();
-  const viewportInitialized = useRef(false);
-  const [isCanvasReady, setIsCanvasReady] = useState(false);
-
-  useEffect(() => {
-    if (!viewportInitialized.current && nodes.length > 0) {
-      setTimeout(() => {
-        fitView({ maxZoom: 1, minZoom: 0.5, padding: 0.2, duration: 0 });
-        viewportInitialized.current = true;
-        setIsCanvasReady(true);
-      }, 0);
-    }
-  }, [nodes.length, fitView]);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -85,8 +73,6 @@ function WorkflowCanvasInner({
       className={className}
       data-testid="workflow-canvas"
       style={{
-        opacity: isCanvasReady ? 1 : 0,
-        transition: "opacity 300ms",
         width: "100%",
         height: "100%",
       }}

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -18,6 +18,7 @@ export interface AdjustableLayoutProps extends React.ComponentPropsWithoutRef<"d
   storageKey?: string // localStorage key for persistence
   onSectionResize?: (sectionId: string, newSize: number) => void
   dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted"
+  padded?: boolean
 }
 
 /**
@@ -28,19 +29,20 @@ export interface AdjustableLayoutProps extends React.ComponentPropsWithoutRef<"d
  * Supports localStorage persistence and responsive behavior.
  */
 export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
-  ({ 
-    sections, 
-    orientation = "horizontal", 
+  ({
+    sections,
+    orientation = "horizontal",
     storageKey,
     onSectionResize,
     dragHandleColor = "border",
     className,
-    ...props 
+    padded = false,
+    ...props
   }) => {
     // Color mapping for drag handles
     const colorMap = {
       primary: "bg-primary hover:bg-primary/90",
-      secondary: "bg-secondary hover:bg-secondary/80", 
+      secondary: "bg-secondary hover:bg-secondary/80",
       accent: "bg-accent hover:bg-accent/80",
       border: "bg-border hover:bg-border/80",
       muted: "bg-muted hover:bg-muted/80"
@@ -49,7 +51,7 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
     const hoverColorMap = {
       primary: "group-hover:bg-primary/30",
       secondary: "group-hover:bg-secondary/30",
-      accent: "group-hover:bg-accent/30", 
+      accent: "group-hover:bg-accent/30",
       border: "group-hover:bg-border/30",
       muted: "group-hover:bg-muted/30"
     }
@@ -77,7 +79,7 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       } catch {
         // ignore malformed storage
       }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [storageKey])
 
     const [draggingIndex, setDraggingIndex] = React.useState<number | null>(null)
@@ -119,33 +121,51 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
 
       const currentX = orientation === "horizontal" ? e.clientX : e.clientY
       const deltaX = currentX - startX
-      
+
       const deltaPercent = (deltaX / containerSize) * 100
+
+      const p1 = sections[draggingIndex]
+      const p2 = sections[draggingIndex + 1]
+
+      const p1Start = startSizes[draggingIndex]
+      const p2Start = startSizes[draggingIndex + 1]
+
+      const p1Min = p1.minSize ?? 10
+      const p1Max = p1.maxSize ?? 80
+      const p2Min = p2.minSize ?? 10
+      const p2Max = p2.maxSize ?? 80
+
+      // Calculate how much we can actually change panel 1
+      // If deltaPercent > 0, we are growing p1 and shrinking p2
+      const maxPositiveDelta = Math.max(0, Math.min(
+        p1Max - p1Start,       // Space p1 has to grow
+        p2Start - p2Min        // Space p2 has to shrink
+      ))
+
+      // If deltaPercent < 0, we are shrinking p1 and growing p2
+      const maxNegativeDelta = Math.min(0, Math.max(
+        p1Min - p1Start,       // Space p1 has to shrink (negative)
+        p2Start - p2Max        // Space p2 has to grow (negative)
+      ))
+
+      // Clamp the delta
+      let clampedDelta = deltaPercent
+      if (clampedDelta > 0) {
+        clampedDelta = Math.min(clampedDelta, maxPositiveDelta)
+      } else {
+        clampedDelta = Math.max(clampedDelta, maxNegativeDelta)
+      }
+
       const newSizes = [...startSizes]
-      
-      // Adjust sizes of adjacent panels
-      newSizes[draggingIndex] = Math.max(
-        sections[draggingIndex].minSize ?? 10,
-        Math.min(
-          sections[draggingIndex].maxSize ?? 80,
-          startSizes[draggingIndex] + deltaPercent
-        )
-      )
-      
-      newSizes[draggingIndex + 1] = Math.max(
-        sections[draggingIndex + 1].minSize ?? 10,
-        Math.min(
-          sections[draggingIndex + 1].maxSize ?? 80,
-          startSizes[draggingIndex + 1] - deltaPercent
-        )
-      )
-      
-      // Normalize to 100%
+      newSizes[draggingIndex] = p1Start + clampedDelta
+      newSizes[draggingIndex + 1] = p2Start - clampedDelta
+
+      // Normalize to 100% just in case of floating point drift
       const total = newSizes.reduce((sum, size) => sum + size, 0)
       const normalizedSizes = newSizes.map(size => (size / total) * 100)
-      
+
       setSizes(normalizedSizes)
-      
+
       // Notify parent
       if (onSectionResize) {
         onSectionResize(sections[draggingIndex].id, normalizedSizes[draggingIndex])
@@ -183,12 +203,12 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
           ? { flex: `0 0 ${section.fixedSize}`, width: section.fixedSize, minWidth: section.fixedSize }
           : { flex: `0 0 ${section.fixedSize}`, height: section.fixedSize, minHeight: section.fixedSize }
         : null
-      
+
       return (
         <React.Fragment key={section.id}>
           <div
             className={cn(
-              "min-h-0 overflow-hidden bg-card border border-border rounded-md",
+              "min-h-0 overflow-hidden bg-card border border-border rounded-xl",
               section.className
             )}
             style={{
@@ -199,25 +219,35 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
           >
             {section.content}
           </div>
-          
+
           {/* Show drag handle after this panel if it's not the last one */}
           {isResizable && (
             <div
               className={cn(
-                `${colorMap[dragHandleColor]} flex-shrink-0 transition-colors duration-200 relative group`,
-                orientation === "vertical" 
-                  ? "cursor-row-resize h-1 w-full" 
-                  : "cursor-col-resize w-1 h-full"
+                "flex-shrink-0 flex items-center justify-center relative group",
+                orientation === "vertical"
+                  ? "cursor-row-resize h-2 w-full"
+                  : "cursor-col-resize w-2 h-full"
               )}
               onMouseDown={(e) => handleMouseDown(index, e)}
             >
-              <div 
+              {/* Visible pill */}
+              <div
+                className={cn(
+                  `${colorMap[dragHandleColor]} transition-colors duration-200 rounded-full`,
+                  orientation === "vertical"
+                    ? "h-1 w-8"
+                    : "w-1 h-8"
+                )}
+              />
+              {/* Invisible large hit area */}
+              <div
                 className={cn(
-                  `absolute inset-0 ${hoverColorMap[dragHandleColor]}`,
-                  orientation === "vertical" 
-                    ? "h-3 -translate-y-1" 
-                    : "w-3 -translate-x-1"
-                )} 
+                  "absolute z-10",
+                  orientation === "vertical"
+                    ? "inset-x-0 -top-2 -bottom-2"
+                    : "inset-y-0 -left-2 -right-2"
+                )}
               />
             </div>
           )}
@@ -230,12 +260,13 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
         ref={containerRef}
         className={cn(
           "flex overflow-hidden h-full gap-1 min-w-0",
+          padded && "p-4",
           orientation === "horizontal" ? "flex-row" : "flex-col",
           className
         )}
         {...props}
       >
-        {sections.map((section, index) => 
+        {sections.map((section, index) =>
           renderPanel(section, sizes[index], index)
         )}
       </div>

package/components/composites/AppHeader/AppHeader.tsx

@@ -11,6 +11,7 @@ export const AppHeader = React.memo<AppHeaderProps>(({
   defaultTab, 
   onTabChange, 
   className,
+  tabsPosition = 'center',
   showSidebarToggle = true,
   showTitle = true 
 }) => {
@@ -30,7 +31,7 @@ export const AppHeader = React.memo<AppHeaderProps>(({
         </div>
 
         <div className="justify-self-center">
-          {tabs && tabs.length > 0 && (
+          {tabsPosition === 'center' && tabs && tabs.length > 0 && (
             <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange}>
               <TabsList>
                 {tabs.map((tab) => (
@@ -43,7 +44,20 @@ export const AppHeader = React.memo<AppHeaderProps>(({
           )}
         </div>
 
-        <div className="flex min-w-0 items-center justify-end gap-2">{actions}</div>
+        <div className="flex min-w-0 items-center justify-end gap-2">
+          {tabsPosition === 'right' && tabs && tabs.length > 0 && (
+            <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange}>
+              <TabsList>
+                {tabs.map((tab) => (
+                  <TabsTrigger key={tab.value} value={tab.value}>
+                    {tab.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+          )}
+          {actions}
+        </div>
       </div>
     </header>
   )

package/components/composites/AppHeader/interfaces.ts

@@ -11,6 +11,7 @@ export interface AppHeaderProps {
   tabs?: TabItem[];
   defaultTab?: string;
   onTabChange?: (value: string) => void;
+  tabsPosition?: 'center' | 'right';
   className?: string;
   showSidebarToggle?: boolean;
   showTitle?: boolean;

package/components/composites/ChatToggleButton/ChatToggleButton.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ChatToggleButton } from './ChatToggleButton'
+import { fn } from '@storybook/test'
+
+const meta = {
+  title: 'Composites/ChatToggleButton',
+  component: ChatToggleButton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ChatToggleButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    isOpen: true,
+    label: "Hide Chat",
+    onClick: fn(),
+  },
+}
+
+export const Closed: Story = {
+  args: {
+    isOpen: false,
+    label: "Show Chat",
+    onClick: fn(),
+  },
+}

package/components/composites/ChatToggleButton/ChatToggleButton.tsx

@@ -0,0 +1,26 @@
+import { Button, type ButtonProps } from "@/components/primitives/Button"
+import { Icon } from "@/components/primitives/Icon"
+import * as React from "react"
+
+export interface ChatToggleButtonProps extends Omit<ButtonProps, "children"> {
+  isOpen?: boolean
+  label?: string
+}
+
+export function ChatToggleButton({
+  isOpen = true,
+  label = "Hide Chat",
+  className,
+  ...props
+}: ChatToggleButtonProps) {
+  return (
+    <Button
+      variant="ghost"
+      className={`-ml-2 h-8 text-muted-foreground hover:text-foreground ${className ?? ""}`}
+      {...props}
+    >
+      <Icon name="panel-left" size="sm" />
+      {label}
+    </Button>
+  )
+}

package/components/composites/ChatToggleButton/index.ts

@@ -0,0 +1,2 @@
+export { ChatToggleButton } from "./ChatToggleButton"
+export type { ChatToggleButtonProps } from "./ChatToggleButton"

package/components/composites/DashboardChart/DashboardChart.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DashboardChart } from './DashboardChart'
+
+const meta = {
+  title: 'Composites/DashboardChart',
+  component: DashboardChart,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof DashboardChart>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/DashboardHeader/DashboardHeader.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { DashboardHeader } from './DashboardHeader'
+
+const meta = {
+  title: 'Composites/DashboardHeader',
+  component: DashboardHeader,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof DashboardHeader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/FilePreviewDialog/FilePreviewDialog.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FilePreviewDialog } from './FilePreviewDialog'
+
+const meta = {
+  title: 'Composites/FilePreviewDialog',
+  component: FilePreviewDialog,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof FilePreviewDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/FormReports/FormReports.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FormReports } from './FormReports'
+
+const meta = {
+  title: 'Composites/FormReports',
+  component: FormReports,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof FormReports>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/LayoutProvider/LayoutProvider.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { LayoutProvider } from './LayoutProvider'
+
+const meta = {
+  title: 'Composites/LayoutProvider',
+  component: LayoutProvider,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof LayoutProvider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/LoadingShimmer/LoadingShimmer.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { LoadingShimmer } from './LoadingShimmer'
+
+const meta = {
+  title: 'Composites/LoadingShimmer',
+  component: LoadingShimmer,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof LoadingShimmer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/ModeSwitcher/ModeSwitcher.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ModeSwitcher } from './ModeSwitcher'
+
+const meta = {
+  title: 'Composites/ModeSwitcher',
+  component: ModeSwitcher,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ModeSwitcher>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/NavigationList/NavigationList.tsx

@@ -12,6 +12,7 @@ export interface NavigationItem {
   url: string
   icon?: string
   isActive?: boolean
+  onClick?: (e: React.MouseEvent) => void
 }
 
 export interface NavigationListProps {
@@ -29,7 +30,13 @@ export const NavigationList = React.memo<NavigationListProps>(
             <SidebarMenuButton
               tooltip={item.title}
               isActive={item.isActive}
-              onClick={() => onItemClick?.(item)}
+              onClick={(e) => {
+                if (item.onClick) {
+                  e.preventDefault();
+                  item.onClick(e);
+                }
+                onItemClick?.(item)
+              }}
               asChild
             >
               <a href={item.url}>

package/components/composites/NavigationList/interfaces.ts

@@ -3,5 +3,6 @@ export interface NavigationItem {
   url: string;
   icon?: string;
   isActive?: boolean;
+  onClick?: (e: React.MouseEvent) => void;
   items?: NavigationItem[];
 }

package/components/composites/OrchestratorMessage/OrchestratorMessage.tsx

@@ -1,4 +1,9 @@
 import * as React from "react"
+import {
+  Avatar,
+  AvatarFallback,
+} from "@/components/primitives/Avatar"
+import { Icon } from "@/components/primitives/Icon"
 import {
   Message,
   MessageContent,
@@ -49,11 +54,16 @@ export const OrchestratorMessage = React.memo<OrchestratorMessageProps>(
 
     return (
       <Message from="assistant">
-        {showAvatar && (
-          <MessageAvatar
-            src={message.avatarSrc || "/coordinator-avatar.png"}
-            name={message.avatarName || "Coordinator"}
-          />
+        {showAvatar && (message.avatarSrc
+          ? <MessageAvatar
+              src={message.avatarSrc}
+              name={message.avatarName || "Coordinator"}
+            />
+          : <Avatar className="size-8 ring-1 ring-border">
+              <AvatarFallback>
+                <Icon name="bot" />
+              </AvatarFallback>
+            </Avatar>
         )}
 
         <div className="flex-1 min-w-0">

package/components/composites/ProjectSwitcher/ProjectSwitcher.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ProjectSwitcher } from './ProjectSwitcher'
+
+const meta = {
+  title: 'Composites/ProjectSwitcher',
+  component: ProjectSwitcher,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ProjectSwitcher>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}

package/components/composites/PromptInput/PromptInput.tsx

@@ -14,6 +14,8 @@ import {
   type PromptInputProps as AIPromptInputProps,
 } from "@/components/ai-elements/prompt-input";
 import type { FormEvent } from "react";
+import { Button } from "@/components/primitives/Button";
+import { Icon } from "@/components/primitives/Icon";
 
 export interface PromptInputBlockProps
   extends Omit<
@@ -80,7 +82,9 @@ export const PromptInput = React.memo<PromptInputBlockProps>(
         </PromptInputBody>
         <PromptInputFooter>
           <PromptInputTools>
-            {}
+            <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full" type="button" disabled={disabled}>
+              <Icon name="plus" size="sm" />
+            </Button>
           </PromptInputTools>
           <PromptInputSubmit disabled={disabled} status={loading ? "submitted" : undefined} />
         </PromptInputFooter>

package/components/composites/TriggerNode/TriggerNode.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TriggerNode } from './TriggerNode'
+
+const meta = {
+  title: 'Composites/TriggerNode',
+  component: TriggerNode,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof TriggerNode>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {} as any,
+}