ai-design-system 0.1.113 → 0.1.115

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -23,6 +23,7 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
     className,
     padded = true,
     mobileBehavior = "tabs",
+    hideMobileTabs = false,
     activeSectionId,
     onActiveSectionChange,
     ...props 
@@ -58,6 +59,7 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
         className={className}
         padded={padded}
         mobileBehavior={mobileBehavior}
+        hideMobileTabs={hideMobileTabs}
         activeSectionId={activeSectionId}
         onActiveSectionChange={onActiveSectionChange}
         {...props}

package/components/blocks/SectionLayout/interfaces.ts

@@ -25,6 +25,7 @@ export interface SectionLayoutProps extends React.ComponentPropsWithoutRef<"div"
   dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted";
   padded?: boolean;
   mobileBehavior?: "tabs" | "stack" | "none";
+  hideMobileTabs?: boolean;
   activeSectionId?: string;
   onActiveSectionChange?: (sectionId: string) => void;
 }

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/AdjustableLayout/AdjustableLayout.tsx

@@ -31,6 +31,12 @@ export interface AdjustableLayoutProps extends React.ComponentPropsWithoutRef<"d
    * @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).
    */
@@ -67,6 +73,7 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
     className,
     padded = false,
     mobileBehavior = "tabs",
+    hideMobileTabs = false,
     activeSectionId,
     onActiveSectionChange,
     ...props
@@ -384,12 +391,12 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
           ref={containerRef}
           className={cn(
             "flex flex-col overflow-hidden h-full min-w-0 w-full",
-            padded && "p-2 sm:p-4 gap-2",
+            padded && (!hideMobileTabs ? "p-2 sm:p-4 gap-2" : "p-2 sm:p-4"),
             className
           )}
           {...props}
         >
-          {sections.length > 1 && (
+          {sections.length > 1 && !hideMobileTabs && (
             <div className="flex-none pb-1">
               <Tabs
                 value={currentActiveId}

package/components/composites/DocumentTabBar/DocumentTabBar.tsx

@@ -88,7 +88,6 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
             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"
-            title="Toggle file explorer"
           >
             <Icon name="folder" size="xs" />
           </Button>

package/components/composites/SessionHeader/SessionHeader.tsx

@@ -30,6 +30,15 @@ export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
   showActions?: boolean;
   showNewSession?: boolean;
   showDownloadSession?: boolean;
+  /**
+   * Handler to switch to editor/overview in mobile view
+   */
+  onOverview?: () => void;
+  /**
+   * Whether to show the overview button in the session header
+   * @default true
+   */
+  showOverview?: boolean;
 }
 
 /**
@@ -39,7 +48,7 @@ export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
  * and a dropdown history of past sessions.
  */
 export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps>(
-  ({ title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, className, ...props }, ref) => {
+  ({ title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, onOverview, showOverview = true, className, ...props }, ref) => {
     const activeSession = sessions?.find(s => s.id === activeSessionId);
     const downloadRef = React.useRef<HTMLAnchorElement>(null);
 
@@ -74,6 +83,17 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
         </div>
         {showActions && (
           <div className="flex items-center space-x-1 flex-none">
+            {Boolean(onOverview && showOverview !== false) && (
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={onOverview}
+                className="h-8 w-8 md:hidden"
+                aria-label="Overview"
+              >
+                <Icon name="overview" className="h-4 w-4" />
+              </Button>
+            )}
             {Boolean(onDownloadSession && showDownloadSession) && (
               <Button variant="ghost" size="icon" onClick={handleDownloadClick} className="h-8 w-8" title="Download Chat History">
                 <Icon name="download" className="h-4 w-4" />

package/components/features/ChatPanel/ChatPanel.tsx

@@ -235,6 +235,15 @@ export interface ChatPanelProps {
    * @default true
    */
   showDownloadSession?: boolean;
+  /**
+   * Handler to switch to editor/overview in mobile view
+   */
+  onOverview?: () => void;
+  /**
+   * Whether to show the overview button in the session header
+   * @default true
+   */
+  showOverview?: boolean;
   /**
    * Presentation variant for ChatPanel:
    * - "default": standard full flex-1 panel (default)
@@ -298,6 +307,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
     showSessionActions = true,
     showNewSession = true,
     showDownloadSession = true,
+    onOverview,
+    showOverview = true,
     variant = "default",
     onClose,
   }) => {
@@ -460,6 +471,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
             showActions={showSessionActions}
             showNewSession={showNewSession}
             showDownloadSession={showDownloadSession}
+            onOverview={onOverview}
+            showOverview={showOverview}
             sessions={sessions}
             activeSessionId={activeSessionId}
             onNewSession={onNewSession}

package/dist/index.cjs

@@ -1039,6 +1039,16 @@ var defaultIcons = {
     viewBox: "0 0 24 24",
     path: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6M16 13H8m8 4H8m8-8H8"
   },
+  "overview": {
+    name: "overview",
+    viewBox: "0 0 24 24",
+    elements: [
+      { type: "rect", attrs: { x: "3", y: "3", width: "18", height: "18", rx: "4" } },
+      { type: "line", attrs: { x1: "7", y1: "8", x2: "17", y2: "8" } },
+      { type: "line", attrs: { x1: "7", y1: "12", x2: "17", y2: "12" } },
+      { type: "line", attrs: { x1: "7", y1: "16", x2: "12", y2: "16" } }
+    ]
+  },
   "message-square": {
     name: "message-square",
     viewBox: "0 0 24 24",
@@ -2043,6 +2053,7 @@ var AdjustableLayout = React3__namespace.memo(
       className,
       padded = false,
       mobileBehavior = "tabs",
+      hideMobileTabs = false,
       activeSectionId,
       onActiveSectionChange
     } = _b, props = __objRest(_b, [
@@ -2054,6 +2065,7 @@ var AdjustableLayout = React3__namespace.memo(
       "className",
       "padded",
       "mobileBehavior",
+      "hideMobileTabs",
       "activeSectionId",
       "onActiveSectionChange"
     ]);
@@ -2314,12 +2326,12 @@ var AdjustableLayout = React3__namespace.memo(
           ref: containerRef,
           className: cn(
             "flex flex-col overflow-hidden h-full min-w-0 w-full",
-            padded && "p-2 sm:p-4 gap-2",
+            padded && (!hideMobileTabs ? "p-2 sm:p-4 gap-2" : "p-2 sm:p-4"),
             className
           )
         }, props), {
           children: [
-            sections.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            sections.length > 1 && !hideMobileTabs && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-none pb-1", children: /* @__PURE__ */ jsxRuntime.jsx(
               Tabs2,
               {
                 value: currentActiveId,
@@ -2547,6 +2559,7 @@ var SectionLayout = React3__namespace.memo(
       className,
       padded = true,
       mobileBehavior = "tabs",
+      hideMobileTabs = false,
       activeSectionId,
       onActiveSectionChange
     } = _b, props = __objRest(_b, [
@@ -2559,6 +2572,7 @@ var SectionLayout = React3__namespace.memo(
       "className",
       "padded",
       "mobileBehavior",
+      "hideMobileTabs",
       "activeSectionId",
       "onActiveSectionChange"
     ]);
@@ -2584,6 +2598,7 @@ var SectionLayout = React3__namespace.memo(
         className,
         padded,
         mobileBehavior,
+        hideMobileTabs,
         activeSectionId,
         onActiveSectionChange
       }, props)
@@ -8120,7 +8135,7 @@ var ApprovalCard = React3__namespace.memo(
 ApprovalCard.displayName = "ApprovalCard";
 var SessionHeader = React3__namespace.forwardRef(
   (_a, ref) => {
-    var _b = _a, { title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, className } = _b, props = __objRest(_b, ["title", "sessions", "activeSessionId", "onNewSession", "onCloseSession", "onSelectSession", "onDownloadSession", "showActions", "showNewSession", "showDownloadSession", "className"]);
+    var _b = _a, { title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, onOverview, showOverview = true, className } = _b, props = __objRest(_b, ["title", "sessions", "activeSessionId", "onNewSession", "onCloseSession", "onSelectSession", "onDownloadSession", "showActions", "showNewSession", "showDownloadSession", "onOverview", "showOverview", "className"]);
     const activeSession = sessions == null ? void 0 : sessions.find((s) => s.id === activeSessionId);
     const downloadRef = React3__namespace.useRef(null);
     const handleDownloadClick = React3__namespace.useCallback(async () => {
@@ -8146,6 +8161,17 @@ var SessionHeader = React3__namespace.forwardRef(
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center space-x-2 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium truncate", children: displayTitle }) }),
           showActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-1 flex-none", children: [
+            Boolean(onOverview && showOverview !== false) && /* @__PURE__ */ jsxRuntime.jsx(
+              Button2,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: onOverview,
+                className: "h-8 w-8 md:hidden",
+                "aria-label": "Overview",
+                children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "overview", className: "h-4 w-4" })
+              }
+            ),
             Boolean(onDownloadSession && showDownloadSession) && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", onClick: handleDownloadClick, className: "h-8 w-8", title: "Download Chat History", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "download", className: "h-4 w-4" }) }),
             Boolean(onNewSession && showNewSession) && /* @__PURE__ */ jsxRuntime.jsx(Button2, { variant: "ghost", size: "icon", onClick: onNewSession, className: "h-8 w-8", title: "New Session", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "plus", className: "h-4 w-4" }) }),
             /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
@@ -8381,6 +8407,8 @@ var ChatPanel = React3__namespace.memo(
     showSessionActions = true,
     showNewSession = true,
     showDownloadSession = true,
+    onOverview,
+    showOverview = true,
     variant = "default",
     onClose
   }) => {
@@ -8508,6 +8536,8 @@ var ChatPanel = React3__namespace.memo(
           showActions: showSessionActions,
           showNewSession,
           showDownloadSession,
+          onOverview,
+          showOverview,
           sessions,
           activeSessionId,
           onNewSession,
@@ -11050,7 +11080,6 @@ var DocumentTabBar = React3__namespace.default.memo(
               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",
-              title: "Toggle file explorer",
               children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "folder", size: "xs" })
             }
           ),
@@ -16203,12 +16232,42 @@ function WorkflowCanvasInner({
   className
 }) {
   const { fitView } = react.useReactFlow();
+  const containerRef = React3.useRef(null);
+  const wasZeroSizeRef = React3.useRef(true);
+  React3.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;
+            const timer = setTimeout(() => {
+              fitView({ padding: 0.2, duration: 300 });
+            }, 60);
+            return () => clearTimeout(timer);
+          }
+        } else {
+          wasZeroSizeRef.current = true;
+        }
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [fitView]);
   React3.useEffect(() => {
     if (fitViewSignal === void 0) return;
-    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]);
   React3.useEffect(() => {
     const handleKeyDown = (event) => {
@@ -16231,6 +16290,7 @@ function WorkflowCanvasInner({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref: containerRef,
       className,
       "data-testid": "workflow-canvas",
       style: {