ai-design-system 0.1.114 → 0.1.116

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -7,7 +7,7 @@ import {
   type Node,
   useReactFlow,
 } from "@xyflow/react";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef } 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";
@@ -58,6 +58,36 @@ function WorkflowCanvasInner({
   className,
 }: WorkflowCanvasProps) {
   const { fitView } = useReactFlow();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const wasZeroSizeRef = useRef<boolean>(true);
+
+  // Automatically fit view when the canvas container transitions from hidden (0x0)
+  // to visible (e.g. mobile Overview icon clicked or tab activated)
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        if (width > 0 && height > 0) {
+          if (wasZeroSizeRef.current) {
+            wasZeroSizeRef.current = false;
+            // Delay slightly so xyflow's internal node measurements can settle
+            const timer = setTimeout(() => {
+              fitView({ padding: 0.2, duration: 300 });
+            }, 60);
+            return () => clearTimeout(timer);
+          }
+        } else {
+          wasZeroSizeRef.current = true;
+        }
+      }
+    });
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [fitView]);
 
   // Opt-in re-fit, e.g. after the device-preview toolbar's Route select
   // switches to "All" and the node count/extent changes underneath the
@@ -67,20 +97,16 @@ function WorkflowCanvasInner({
   // every such change would override the user's own pan/zoom constantly.
   useEffect(() => {
     if (fitViewSignal === undefined) return;
-    // A plain synchronous call, and even a double-rAF, both raced xyflow's
-    // own internal node measurement — verified live in both cases: the
-    // resulting scale was far smaller than the two device-preview nodes'
-    // true combined width needed (computed against their real DOM rects:
-    // ~1.2 would tightly fit them, but fitView produced ~0.57 and one node
-    // still landed partly outside the pane). xyflow measures each node via
-    // ResizeObserver, which fires as a separate, unsynchronized callback —
-    // not guaranteed to have run even two animation frames after the nodes
-    // prop change lands. A short real-time delay is the standard, if
-    // inelegant, workaround for this exact class of race.
-    const timer = setTimeout(() => {
+    const timer1 = setTimeout(() => {
       fitView({ padding: 0.2, duration: 300 });
     }, 50);
-    return () => clearTimeout(timer);
+    const timer2 = setTimeout(() => {
+      fitView({ padding: 0.2, duration: 300 });
+    }, 200);
+    return () => {
+      clearTimeout(timer1);
+      clearTimeout(timer2);
+    };
   }, [fitViewSignal, fitView]);
 
   useEffect(() => {
@@ -105,6 +131,7 @@ function WorkflowCanvasInner({
 
   return (
     <div
+      ref={containerRef}
       className={className}
       data-testid="workflow-canvas"
       style={{

package/components/composites/DocumentTabBar/DocumentTabBar.tsx

@@ -5,10 +5,11 @@
  * Displays open documents as closeable tabs with dirty indicators.
  */
 
-import React from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Tabs, TabsList, TabsTrigger, Button, ScrollArea } from '@/components/primitives'
 import { Icon } from '@/components/primitives/Icon'
 import { cn } from '@/lib/utils'
+
 export interface DocumentFile {
   id: string
   name: string
@@ -50,6 +51,12 @@ export interface DocumentTabBarProps {
    * Callback to open/toggle the file explorer (e.g. mobile drawer)
    */
   onToggleExplorer?: () => void
+
+  /**
+   * Whether to show navigation scroll arrows when tabs overflow
+   * @default true
+   */
+  showScrollArrows?: boolean
 }
 
 /**
@@ -62,13 +69,103 @@ export interface DocumentTabBarProps {
  * - Close button (X)
  * 
  * Features:
- * - Scrollable when tabs overflow horizontally
+ * - Scrollable when tabs overflow horizontally with multi-device support
+ * - Mouse wheel vertical-to-horizontal scroll translation
+ * - Auto-scroll active tab into view
+ * - Overflow indicators (edge gradients & navigation chevrons)
  * - Accessible tab navigation via Radix UI Tabs
  * - Close button to remove tabs
  * - Dirty state indicator
  */
 export const DocumentTabBar = React.memo<DocumentTabBarProps>(
-  ({ tabs, activeTabId, onTabSelect, onTabClose, onToggleExplorer, className }) => {
+  ({
+    tabs,
+    activeTabId,
+    onTabSelect,
+    onTabClose,
+    onToggleExplorer,
+    className,
+    showScrollArrows = true,
+  }) => {
+    const scrollContainerRef = useRef<HTMLDivElement>(null)
+    const [canScrollLeft, setCanScrollLeft] = useState(false)
+    const [canScrollRight, setCanScrollRight] = useState(false)
+
+    const getViewport = useCallback((): HTMLElement | null => {
+      return (
+        scrollContainerRef.current?.querySelector<HTMLElement>(
+          '[data-slot="scroll-area-viewport"]'
+        ) ?? null
+      )
+    }, [])
+
+    const updateScrollState = useCallback(() => {
+      const viewport = getViewport()
+      if (!viewport) return
+      const { scrollLeft, scrollWidth, clientWidth } = viewport
+      setCanScrollLeft(scrollLeft > 2)
+      setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 2)
+    }, [getViewport])
+
+    useEffect(() => {
+      const viewport = getViewport()
+      if (!viewport) return
+
+      updateScrollState()
+      viewport.addEventListener('scroll', updateScrollState, { passive: true })
+
+      const resizeObserver = new ResizeObserver(() => {
+        updateScrollState()
+      })
+      resizeObserver.observe(viewport)
+
+      return () => {
+        viewport.removeEventListener('scroll', updateScrollState)
+        resizeObserver.disconnect()
+      }
+    }, [getViewport, updateScrollState, tabs])
+
+    // Convert mouse wheel vertical scroll to horizontal scroll
+    const handleWheel = useCallback(
+      (e: React.WheelEvent) => {
+        if (e.deltaY === 0) return
+        const viewport = getViewport()
+        if (viewport) {
+          viewport.scrollLeft += e.deltaY
+        }
+      },
+      [getViewport]
+    )
+
+    // Auto-scroll active tab into view
+    useEffect(() => {
+      if (!activeTabId || !scrollContainerRef.current) return
+      const activeEl = scrollContainerRef.current.querySelector<HTMLElement>(
+        '[data-state="active"]'
+      )
+      if (activeEl) {
+        activeEl.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        })
+      }
+    }, [activeTabId, tabs])
+
+    const handleScrollLeft = useCallback(() => {
+      const viewport = getViewport()
+      if (viewport) {
+        viewport.scrollBy({ left: -200, behavior: 'smooth' })
+      }
+    }, [getViewport])
+
+    const handleScrollRight = useCallback(() => {
+      const viewport = getViewport()
+      if (viewport) {
+        viewport.scrollBy({ left: 200, behavior: 'smooth' })
+      }
+    }, [getViewport])
+
     if (tabs.length === 0 && !onToggleExplorer) {
       return null
     }
@@ -76,7 +173,7 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
     return (
       <div
         className={cn(
-          'flex items-center border-b border-border bg-background',
+          'flex items-center border-b border-border bg-background relative',
           className
         )}
         data-slot="document-tab-bar"
@@ -92,67 +189,114 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
             <Icon name="folder" size="xs" />
           </Button>
         )}
+
         {tabs.length > 0 && (
-          <ScrollArea className="flex-1">
-            <Tabs
-              value={activeTabId || tabs[0]?.id}
-              onValueChange={onTabSelect}
-              className="h-auto flex-1"
-            >
-            <TabsList className="h-10 rounded-none border-none bg-transparent p-0 w-full justify-start gap-0">
-              {tabs.map((tab) => (
+          <div
+            ref={scrollContainerRef}
+            onWheel={handleWheel}
+            className="flex-1 min-w-0 flex items-center relative"
+          >
+            {showScrollArrows && canScrollLeft && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={handleScrollLeft}
+                className="h-10 w-7 shrink-0 rounded-none border-r border-border/50 text-muted-foreground hover:text-foreground transition-colors z-10"
+                aria-label="Scroll tabs left"
+              >
+                <Icon name="chevron-left" size="xs" />
+              </Button>
+            )}
+
+            <div className="flex-1 min-w-0 relative h-10">
+              {canScrollLeft && (
                 <div
-                  key={tab.id}
-                  className="flex items-center border-r border-border/50 last:border-r-0"
+                  className="pointer-events-none absolute left-0 top-0 bottom-0 w-5 bg-gradient-to-r from-background to-transparent z-10"
+                  aria-hidden="true"
+                />
+              )}
+
+              <ScrollArea orientation="horizontal" className="w-full h-10">
+                <Tabs
+                  value={activeTabId || tabs[0]?.id}
+                  onValueChange={onTabSelect}
+                  className="h-auto flex-1"
                 >
-                  <TabsTrigger
-                    value={tab.id}
-                    className={cn(
-                      'data-[state=inactive]:bg-muted/20 data-[state=inactive]:text-muted-foreground',
-                      'rounded-none border-b-2 border-transparent data-[state=active]:border-primary',
-                      'px-2.5 sm:px-3 py-2 text-xs sm:text-sm font-medium whitespace-nowrap',
-                      'flex items-center gap-1.5 sm:gap-2 h-10',
-                      'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0',
-                      'transition-colors'
-                    )}
-                  >
-                    <div className="flex items-center gap-1.5 sm:gap-2">
-                      {/* Dirty indicator */}
-                      {tab.isDirty && (
-                        <Icon
-                          name="circle"
-                          className="size-2 fill-primary text-primary"
-                          aria-label="unsaved changes"
-                        />
-                      )}
-                      {/* Tab name */}
-                      <span className="truncate max-w-[120px] sm:max-w-[200px]">{tab.name}</span>
-                    </div>
-                  </TabsTrigger>
-
-                  {/* Close button */}
-                  <Button
-                    variant="ghost"
-                    size="icon-sm"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onTabClose?.(tab.id)
-                    }}
-                    className={cn(
-                      'h-8 w-8 mr-0.5',
-                      'hover:bg-destructive/10 hover:text-destructive',
-                      'focus-visible:ring-2 focus-visible:ring-ring',
-                      'transition-colors'
-                    )}
-                    aria-label={`Close ${tab.name}`}
-                  >
-                    <Icon name="x" size="xs" />
-                  </Button>
-                </div>
-              ))}
-            </TabsList>
-          </Tabs>
-        </ScrollArea>
+                  <TabsList className="h-10 rounded-none border-none bg-transparent p-0 w-full justify-start gap-0">
+                    {tabs.map((tab) => (
+                      <div
+                        key={tab.id}
+                        className="flex items-center shrink-0 border-r border-border/50 last:border-r-0"
+                      >
+                        <TabsTrigger
+                          value={tab.id}
+                          className={cn(
+                            'data-[state=inactive]:bg-muted/20 data-[state=inactive]:text-muted-foreground',
+                            'rounded-none border-b-2 border-transparent data-[state=active]:border-primary',
+                            'px-2.5 sm:px-3 py-2 text-xs sm:text-sm font-medium whitespace-nowrap',
+                            'flex items-center gap-1.5 sm:gap-2 h-10',
+                            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0',
+                            'transition-colors'
+                          )}
+                        >
+                          <div className="flex items-center gap-1.5 sm:gap-2">
+                            {/* Dirty indicator */}
+                            {tab.isDirty && (
+                              <Icon
+                                name="circle"
+                                className="size-2 fill-primary text-primary"
+                                aria-label="unsaved changes"
+                              />
+                            )}
+                            {/* Tab name */}
+                            <span className="truncate max-w-[120px] sm:max-w-[200px]">{tab.name}</span>
+                          </div>
+                        </TabsTrigger>
+
+                        {/* Close button */}
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            onTabClose?.(tab.id)
+                          }}
+                          className={cn(
+                            'h-8 w-8 mr-0.5',
+                            'hover:bg-destructive/10 hover:text-destructive',
+                            'focus-visible:ring-2 focus-visible:ring-ring',
+                            'transition-colors'
+                          )}
+                          aria-label={`Close ${tab.name}`}
+                        >
+                          <Icon name="x" size="xs" />
+                        </Button>
+                      </div>
+                    ))}
+                  </TabsList>
+                </Tabs>
+              </ScrollArea>
+
+              {canScrollRight && (
+                <div
+                  className="pointer-events-none absolute right-0 top-0 bottom-0 w-5 bg-gradient-to-l from-background to-transparent z-10"
+                  aria-hidden="true"
+                />
+              )}
+            </div>
+
+            {showScrollArrows && canScrollRight && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={handleScrollRight}
+                className="h-10 w-7 shrink-0 rounded-none border-l border-border/50 text-muted-foreground hover:text-foreground transition-colors z-10"
+                aria-label="Scroll tabs right"
+              >
+                <Icon name="chevron-right" size="xs" />
+              </Button>
+            )}
+          </div>
         )}
       </div>
     )
@@ -160,3 +304,4 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
 )
 
 DocumentTabBar.displayName = 'DocumentTabBar'
+

package/components/composites/DocumentTabBar/index.ts

@@ -1,2 +1,2 @@
 export { DocumentTabBar } from './DocumentTabBar'
-export type { DocumentTabBarProps } from './DocumentTabBar'
+export type { DocumentTabBarProps, DocumentFile } from './DocumentTabBar'

package/components/composites/index.ts

@@ -75,7 +75,7 @@ export type { ModeToggleProps } from './ModeToggle'
 
 // DocumentTabBar Composite
 export { DocumentTabBar } from './DocumentTabBar'
-export type { DocumentTabBarProps } from './DocumentTabBar'
+export type { DocumentTabBarProps, DocumentFile } from './DocumentTabBar'
 
 // DefaultSwitcher Composite
 export { DefaultSwitcher } from './DefaultSwitcher'

package/components/ui/scroll-area.tsx

@@ -5,11 +5,17 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "@/lib/utils"
 
+export interface ScrollAreaProps
+  extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {
+  orientation?: "vertical" | "horizontal" | "both"
+}
+
 function ScrollArea({
   className,
   children,
+  orientation = "vertical",
   ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+}: ScrollAreaProps) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
@@ -22,7 +28,12 @@ function ScrollArea({
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
+      {(orientation === "vertical" || orientation === "both") && (
+        <ScrollBar orientation="vertical" />
+      )}
+      {(orientation === "horizontal" || orientation === "both") && (
+        <ScrollBar orientation="horizontal" className="h-1.5 border-t border-t-transparent" />
+      )}
       <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
   )