ai-design-system 0.1.112 → 0.1.114

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -22,12 +22,21 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
     dragHandleColor = "border",
     className,
     padded = true,
+    mobileBehavior = "tabs",
+    hideMobileTabs = false,
+    activeSectionId,
+    onActiveSectionChange,
     ...props 
   }) => {
-    // Transform sections to include headers
+    // Transform sections to include headers and resolve labels
     const transformedSections = sections.map(section => ({
       ...section,
       resizable,
+      label:
+        section.label ||
+        section.title ||
+        (typeof section.header?.title === "string" ? section.header.title : undefined) ||
+        section.header?.tabs?.[0]?.label,
       content: (
         <div className="h-full min-h-0 flex flex-col overflow-hidden">
           {section.header && (
@@ -49,6 +58,10 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
         dragHandleColor={dragHandleColor}
         className={className}
         padded={padded}
+        mobileBehavior={mobileBehavior}
+        hideMobileTabs={hideMobileTabs}
+        activeSectionId={activeSectionId}
+        onActiveSectionChange={onActiveSectionChange}
         {...props}
       />
     )

package/components/blocks/SectionLayout/interfaces.ts

@@ -4,6 +4,8 @@ import type { AppHeaderProps } from "@/components/composites/AppHeader/interface
 export interface SectionLayoutSection {
   id: string;
   content: React.ReactNode;
+  label?: string;
+  title?: string;
   fixedSize?: string;
   defaultSize?: number;
   minSize?: number;
@@ -22,4 +24,8 @@ export interface SectionLayoutProps extends React.ComponentPropsWithoutRef<"div"
   resizable?: boolean;
   dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted";
   padded?: boolean;
+  mobileBehavior?: "tabs" | "stack" | "none";
+  hideMobileTabs?: boolean;
+  activeSectionId?: string;
+  onActiveSectionChange?: (sectionId: string) => void;
 }

package/components/composites/AdjustableLayout/AdjustableLayout.stories.tsx

@@ -95,10 +95,19 @@ export const Default: Story = {
  * Simple 2-panel layout with resizable divider.
  */
 export const TwoPanels: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Responsive 2-panel layout. On desktop viewports (>= 768px), panels sit side-by-side with a resizable divider. On mobile viewports (< 768px), panels adapt into an accessible tabbed segmented view giving full width and height to each panel.',
+      },
+    },
+  },
   render: () => {
     const sections: AdjustableLayoutSection[] = [
       {
         id: 'main',
+        label: 'Main Content',
         content: (
           <Card className="h-full">
             <CardHeader>
@@ -113,6 +122,7 @@ export const TwoPanels: Story = {
       },
       {
         id: 'sidebar',
+        label: 'Sidebar',
         content: (
           <Card className="h-full">
             <CardHeader>

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -1,9 +1,12 @@
 import * as React from "react"
 import { cn } from "@/lib/utils"
+import { Tabs, TabsList, TabsTrigger } from "@/components/primitives/Tabs"
 
 export interface AdjustableLayoutSection {
   id: string
   content: React.ReactNode
+  label?: string
+  title?: string
   fixedSize?: string // CSS size value, e.g. "16rem"
   defaultSize?: number // percentage (0-100)
   minSize?: number // minimum percentage
@@ -20,6 +23,37 @@ export interface AdjustableLayoutProps extends React.ComponentPropsWithoutRef<"d
   onSectionResize?: (sectionId: string, newSize: number) => void
   dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted"
   padded?: boolean
+  /**
+   * Layout behavior on mobile screens (< 768px).
+   * - 'tabs': Renders a mobile tab bar/segmented control to toggle between panels (default)
+   * - 'stack': Stacks panels vertically (flex-col)
+   * - 'none': Keeps standard orientation without mobile adaptation
+   * @default 'tabs'
+   */
+  mobileBehavior?: "tabs" | "stack" | "none"
+  /**
+   * Whether to hide the mobile tab bar when mobileBehavior is "tabs".
+   * Used when switching between panels is driven by internal controls (e.g. Overview / Show Chat).
+   * @default false
+   */
+  hideMobileTabs?: boolean
+  /**
+   * Active section ID in mobile tabs mode (for controlled usage).
+   */
+  activeSectionId?: string
+  /**
+   * Callback when active section changes in mobile tabs mode.
+   */
+  onActiveSectionChange?: (sectionId: string) => void
+}
+
+function formatSectionTitle(id: string): string {
+  if (!id) return "Panel"
+  return id
+    .split(/[-_]/)
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ")
 }
 
 /**
@@ -38,6 +72,10 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
     dragHandleColor = "border",
     className,
     padded = false,
+    mobileBehavior = "tabs",
+    hideMobileTabs = false,
+    activeSectionId,
+    onActiveSectionChange,
     ...props
   }) => {
     // Color mapping for drag handles
@@ -46,21 +84,57 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       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"
+      muted: "bg-muted hover:bg-muted/80",
     }
 
-    const hoverColorMap = {
-      primary: "group-hover:bg-primary/30",
-      secondary: "group-hover:bg-secondary/30",
-      accent: "group-hover:bg-accent/30",
-      border: "group-hover:bg-border/30",
-      muted: "group-hover:bg-muted/30"
-    }
     const containerRef = React.useRef<HTMLDivElement>(null)
 
+    // Responsive mobile detection
+    const [isMobile, setIsMobile] = React.useState(false)
+
+    React.useEffect(() => {
+      const checkMobile = () => {
+        const winMobile = typeof window !== "undefined" && window.innerWidth < 768
+        const containerWidth = containerRef.current?.getBoundingClientRect().width ?? 0
+        const containerMobile = containerWidth > 0 && containerWidth < 768
+        setIsMobile(winMobile || containerMobile)
+      }
+
+      checkMobile()
+      window.addEventListener("resize", checkMobile)
+      return () => window.removeEventListener("resize", checkMobile)
+    }, [])
+
+    // Active section state for mobile tabs mode
+    const [internalActiveId, setInternalActiveId] = React.useState<string>(
+      sections[0]?.id ?? ""
+    )
+
+    React.useEffect(() => {
+      if (sections.length > 0 && !sections.some((s) => s.id === internalActiveId)) {
+        setInternalActiveId(sections[0].id)
+      }
+    }, [sections, internalActiveId])
+
+    const currentActiveId =
+      (activeSectionId && sections.some((s) => s.id === activeSectionId)
+        ? activeSectionId
+        : undefined) ??
+      (sections.some((s) => s.id === internalActiveId)
+        ? internalActiveId
+        : (sections[0]?.id ?? ""))
+
+    const handleTabChange = React.useCallback(
+      (newId: string) => {
+        setInternalActiveId(newId)
+        onActiveSectionChange?.(newId)
+      },
+      [onActiveSectionChange]
+    )
+
     // Compute default sizes (server-safe — no localStorage access)
     const defaultSizes = React.useMemo(() => {
-      const raw = sections.map((section) => section.defaultSize ?? (100 / sections.length))
+      const raw = sections.map((section) => section.defaultSize ?? 100 / sections.length)
       const total = raw.reduce((sum, size) => sum + size, 0)
       return raw.map((size) => (size / total) * 100)
     }, [sections])
@@ -107,99 +181,136 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       }
 
       updateContainerSize()
-      window.addEventListener('resize', updateContainerSize)
-      return () => window.removeEventListener('resize', updateContainerSize)
+      window.addEventListener("resize", updateContainerSize)
+      return () => window.removeEventListener("resize", updateContainerSize)
     }, [orientation])
 
     // Save to localStorage when sizes change (only in browser)
     React.useEffect(() => {
-      if (storageKey && typeof window !== 'undefined') {
+      if (storageKey && typeof window !== "undefined") {
         localStorage.setItem(storageKey, JSON.stringify(sizes))
       }
     }, [sizes, storageKey])
 
-    const handleMouseDown = React.useCallback((index: number, e: React.MouseEvent) => {
-      e.preventDefault()
-      setDraggingIndex(index)
-      setStartX(orientation === "horizontal" ? e.clientX : e.clientY)
-      setStartSizes([...sizes])
-    }, [sizes, orientation])
-
-    const handleMouseMove = React.useCallback((e: MouseEvent) => {
-      if (draggingIndex === null || containerSize === 0) return
-
-      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 handleMouseDown = React.useCallback(
+      (index: number, e: React.MouseEvent) => {
+        e.preventDefault()
+        setDraggingIndex(index)
+        setStartX(orientation === "horizontal" ? e.clientX : e.clientY)
+        setStartSizes([...sizes])
+      },
+      [sizes, orientation]
+    )
+
+    const handleTouchStart = React.useCallback(
+      (index: number, e: React.TouchEvent) => {
+        if (e.touches.length !== 1) return
+        setDraggingIndex(index)
+        setStartX(orientation === "horizontal" ? e.touches[0].clientX : e.touches[0].clientY)
+        setStartSizes([...sizes])
+      },
+      [sizes, orientation]
+    )
 
-      const newSizes = [...startSizes]
-      newSizes[draggingIndex] = p1Start + clampedDelta
-      newSizes[draggingIndex + 1] = p2Start - clampedDelta
+    const applyDelta = React.useCallback(
+      (deltaPixels: number) => {
+        if (draggingIndex === null || containerSize === 0) return
+
+        const deltaPercent = (deltaPixels / 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
+        const maxPositiveDelta = Math.max(
+          0,
+          Math.min(
+            p1Max - p1Start, // Space p1 has to grow
+            p2Start - p2Min // Space p2 has to shrink
+          )
+        )
+
+        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)
+        }
 
-      // 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)
+        const newSizes = [...startSizes]
+        newSizes[draggingIndex] = p1Start + clampedDelta
+        newSizes[draggingIndex + 1] = p2Start - clampedDelta
 
-      setSizes(normalizedSizes)
+        // 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)
 
-      // Notify parent
-      if (onSectionResize) {
-        onSectionResize(sections[draggingIndex].id, normalizedSizes[draggingIndex])
-        onSectionResize(sections[draggingIndex + 1].id, normalizedSizes[draggingIndex + 1])
-      }
-    }, [draggingIndex, startX, startSizes, sections, orientation, containerSize, onSectionResize])
+        setSizes(normalizedSizes)
+
+        // Notify parent
+        if (onSectionResize) {
+          onSectionResize(sections[draggingIndex].id, normalizedSizes[draggingIndex])
+          onSectionResize(sections[draggingIndex + 1].id, normalizedSizes[draggingIndex + 1])
+        }
+      },
+      [draggingIndex, containerSize, sections, startSizes, onSectionResize]
+    )
 
-    const handleMouseUp = React.useCallback(() => {
+    const handleMouseMove = React.useCallback(
+      (e: MouseEvent) => {
+        const currentPos = orientation === "horizontal" ? e.clientX : e.clientY
+        applyDelta(currentPos - startX)
+      },
+      [orientation, startX, applyDelta]
+    )
+
+    const handleTouchMove = React.useCallback(
+      (e: TouchEvent) => {
+        if (e.touches.length !== 1) return
+        const currentPos = orientation === "horizontal" ? e.touches[0].clientX : e.touches[0].clientY
+        applyDelta(currentPos - startX)
+      },
+      [orientation, startX, applyDelta]
+    )
+
+    const handleEnd = React.useCallback(() => {
       setDraggingIndex(null)
     }, [])
 
     React.useEffect(() => {
       if (draggingIndex !== null) {
         document.addEventListener("mousemove", handleMouseMove)
-        document.addEventListener("mouseup", handleMouseUp)
+        document.addEventListener("mouseup", handleEnd)
+        document.addEventListener("touchmove", handleTouchMove, { passive: false })
+        document.addEventListener("touchend", handleEnd)
         return () => {
           document.removeEventListener("mousemove", handleMouseMove)
-          document.removeEventListener("mouseup", handleMouseUp)
+          document.removeEventListener("mouseup", handleEnd)
+          document.removeEventListener("touchmove", handleTouchMove)
+          document.removeEventListener("touchend", handleEnd)
         }
       }
-    }, [draggingIndex, handleMouseMove, handleMouseUp])
+    }, [draggingIndex, handleMouseMove, handleTouchMove, handleEnd])
 
     const renderPanel = (section: AdjustableLayoutSection, size: number, index: number) => {
       const nextSection = sections[index + 1]
-      // Drag handles should be between panels, so only show for panels that aren't the last one
       const isResizable =
         section.resizable !== false &&
         sections.length > 1 &&
@@ -230,25 +341,23 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
             {section.content}
           </div>
 
-          {/* Show drag handle or spacer after this panel if it's not the last one */}
           {index < sections.length - 1 && (
             isResizable ? (
               <div
                 className={cn(
-                  "flex-shrink-0 flex items-center justify-center relative group",
+                  "flex-shrink-0 flex items-center justify-center relative group touch-none select-none",
                   orientation === "vertical"
                     ? "cursor-row-resize h-2 w-full"
                     : "cursor-col-resize w-2 h-full"
                 )}
                 onMouseDown={(e) => handleMouseDown(index, e)}
+                onTouchStart={(e) => handleTouchStart(index, e)}
               >
                 {/* Visible pill */}
                 <div
                   className={cn(
                     `${colorMap[dragHandleColor]} transition-colors duration-200 rounded-full`,
-                    orientation === "vertical"
-                      ? "h-1 w-8"
-                      : "w-1 h-8"
+                    orientation === "vertical" ? "h-1 w-8" : "w-1 h-8"
                   )}
                 />
                 {/* Invisible large hit area */}
@@ -274,6 +383,97 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
       )
     }
 
+    const isMobileMode = isMobile && mobileBehavior !== "none"
+
+    if (isMobileMode && mobileBehavior === "tabs") {
+      return (
+        <div
+          ref={containerRef}
+          className={cn(
+            "flex flex-col overflow-hidden h-full min-w-0 w-full",
+            padded && (!hideMobileTabs ? "p-2 sm:p-4 gap-2" : "p-2 sm:p-4"),
+            className
+          )}
+          {...props}
+        >
+          {sections.length > 1 && !hideMobileTabs && (
+            <div className="flex-none pb-1">
+              <Tabs
+                value={currentActiveId}
+                onValueChange={handleTabChange}
+                className="w-full"
+              >
+                <TabsList
+                  className="grid w-full h-9 bg-muted/60 p-1 rounded-lg"
+                  style={{
+                    gridTemplateColumns: `repeat(${sections.length}, minmax(0, 1fr))`,
+                  }}
+                >
+                  {sections.map((section) => (
+                    <TabsTrigger
+                      key={section.id}
+                      value={section.id}
+                      className="text-xs sm:text-sm font-medium truncate px-2 py-1 data-[state=active]:bg-background data-[state=active]:shadow-sm rounded-md"
+                    >
+                      {section.label || section.title || formatSectionTitle(section.id)}
+                    </TabsTrigger>
+                  ))}
+                </TabsList>
+              </Tabs>
+            </div>
+          )}
+
+          <div className="flex-1 min-h-0 relative overflow-hidden">
+            {sections.map((section) => {
+              const isActive = section.id === currentActiveId
+              return (
+                <div
+                  key={section.id}
+                  className={cn(
+                    "h-full w-full min-h-0 overflow-hidden",
+                    !isActive && "hidden",
+                    (section.variant ?? "default") === "default" &&
+                      "bg-card border border-border rounded-xl",
+                    section.className
+                  )}
+                >
+                  {section.content}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )
+    }
+
+    if (isMobileMode && mobileBehavior === "stack") {
+      return (
+        <div
+          ref={containerRef}
+          className={cn(
+            "flex flex-col overflow-y-auto h-full gap-2 min-w-0 w-full",
+            padded && "p-2 sm:p-4",
+            className
+          )}
+          {...props}
+        >
+          {sections.map((section) => (
+            <div
+              key={section.id}
+              className={cn(
+                "min-h-[200px] overflow-hidden w-full flex-shrink-0",
+                (section.variant ?? "default") === "default" &&
+                  "bg-card border border-border rounded-xl",
+                section.className
+              )}
+            >
+              {section.content}
+            </div>
+          ))}
+        </div>
+      )
+    }
+
     return (
       <div
         ref={containerRef}

package/components/composites/DocumentTabBar/DocumentTabBar.tsx

@@ -45,6 +45,11 @@ export interface DocumentTabBarProps {
    * Additional CSS classes
    */
   className?: string
+
+  /**
+   * Callback to open/toggle the file explorer (e.g. mobile drawer)
+   */
+  onToggleExplorer?: () => void
 }
 
 /**
@@ -63,8 +68,8 @@ export interface DocumentTabBarProps {
  * - Dirty state indicator
  */
 export const DocumentTabBar = React.memo<DocumentTabBarProps>(
-  ({ tabs, activeTabId, onTabSelect, onTabClose, className }) => {
-    if (tabs.length === 0) {
+  ({ tabs, activeTabId, onTabSelect, onTabClose, onToggleExplorer, className }) => {
+    if (tabs.length === 0 && !onToggleExplorer) {
       return null
     }
 
@@ -76,12 +81,24 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
         )}
         data-slot="document-tab-bar"
       >
-        <ScrollArea className="flex-1">
-          <Tabs
-            value={activeTabId || tabs[0]?.id}
-            onValueChange={onTabSelect}
-            className="h-auto flex-1"
+        {onToggleExplorer && (
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            onClick={onToggleExplorer}
+            className="h-10 w-10 shrink-0 rounded-none border-r border-border/50 text-muted-foreground hover:text-foreground md:hidden"
+            aria-label="Toggle file explorer"
           >
+            <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
@@ -93,13 +110,13 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
                     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-3 py-2 text-sm font-medium whitespace-nowrap',
-                      'flex items-center gap-2 h-10',
+                      '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-2">
+                    <div className="flex items-center gap-1.5 sm:gap-2">
                       {/* Dirty indicator */}
                       {tab.isDirty && (
                         <Icon
@@ -109,7 +126,7 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
                         />
                       )}
                       {/* Tab name */}
-                      <span className="truncate max-w-[200px]">{tab.name}</span>
+                      <span className="truncate max-w-[120px] sm:max-w-[200px]">{tab.name}</span>
                     </div>
                   </TabsTrigger>
 
@@ -136,6 +153,7 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
             </TabsList>
           </Tabs>
         </ScrollArea>
+        )}
       </div>
     )
   }