ai-design-system 0.1.67 → 0.1.68

package/components/blocks/SectionLayout/interfaces.ts

@@ -11,6 +11,7 @@ export interface SectionLayoutSection {
   collapsible?: boolean;
   collapsedSize?: number;
   header?: AppHeaderProps;
+  variant?: "default" | "ghost";
 }
 
 export interface SectionLayoutProps extends React.ComponentPropsWithoutRef<"div"> {

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -10,6 +10,7 @@ export interface AdjustableLayoutSection {
   maxSize?: number // maximum percentage
   resizable?: boolean // default true for >1 sections
   className?: string
+  variant?: "default" | "ghost"
 }
 
 export interface AdjustableLayoutProps extends React.ComponentPropsWithoutRef<"div"> {
@@ -66,6 +67,16 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
 
     const [sizes, setSizes] = React.useState<number[]>(defaultSizes)
 
+    // Sync sizes if the number of sections changes (e.g. data loads and new section appears)
+    React.useEffect(() => {
+      setSizes((prevSizes) => {
+        if (prevSizes.length !== sections.length) {
+          return defaultSizes;
+        }
+        return prevSizes;
+      });
+    }, [sections.length, defaultSizes])
+
     // After hydration, overwrite with persisted sizes if available
     React.useEffect(() => {
       if (!storageKey) return
@@ -208,7 +219,8 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
         <React.Fragment key={section.id}>
           <div
             className={cn(
-              "min-h-0 overflow-hidden bg-card border border-border rounded-xl",
+              "min-h-0 overflow-hidden",
+              (section.variant ?? "default") === "default" && "bg-card border border-border rounded-xl",
               section.className
             )}
             style={{

package/components/features/EvalDashboardFeature/EvalDashboardFeature.tsx

@@ -5,9 +5,9 @@ import { DashboardChart } from "@/components/composites/DashboardChart"
 import { EvalSessionDetailsPanel, EvalTriggerButton } from "@/components/composites/EvalSessionDetailsPanel"
 import type { DashboardRow } from "@/components/composites/DataTable"
 import { cn } from "@/lib/utils"
-import type { 
-  EvalDashboardFeatureInboxState, 
-  EvalDashboardFeatureData, 
+import type {
+  EvalDashboardFeatureInboxState,
+  EvalDashboardFeatureData,
   EvalDashboardFeatureActionHandlers,
 } from "./useEvalDashboardFeature.d"
 
@@ -24,9 +24,9 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
     const [showInbox, setShowInbox] = React.useState(true)
     const [activeTab, setActiveTab] = React.useState("golden-evals")
 
-    const selectedSession = React.useMemo(() => 
+    const selectedSession = React.useMemo(() =>
       inbox.items.find(s => s.id === inbox.selectedItemId) || null
-    , [inbox.items, inbox.selectedItemId])
+      , [inbox.items, inbox.selectedItemId])
 
     // Calculate average score for the trend section
     const avgScore = React.useMemo(() => {
@@ -40,7 +40,6 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
         id: session.id,
         title: session.id,
         subtitle: `Score: ${session.score}/${session.total}`,
-        preview: `${session.latency} • ${session.tokens}t`,
         timestamp: new Date(session.date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
       }))
     }, [inbox.items]);
@@ -50,7 +49,7 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
       const sortedItems = [...inbox.items].sort(
         (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
       )
-      
+
       return sortedItems.map(session => ({
         date: session.date,
         // We map score to 'desktop' since DashboardChart is hardcoded for now
@@ -75,6 +74,7 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
           resizable={true}
           padded={false}
           className="h-full"
+          storageKey="eval-dashboard-outer"
           sections={[
             ...(mockChartData.length > 0 ? [{
               id: "graph",
@@ -104,8 +104,9 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
             }] : []),
             {
               id: "content",
-              defaultSize: mockChartData.length > 0 ? 65 : 100,
+              defaultSize: mockChartData.length > 0 ? 80 : 100,
               minSize: 40,
+              variant: "ghost",
               content: (
                 <div className="h-full w-full min-h-0">
                   <SectionLayout
@@ -157,9 +158,9 @@ export const EvalDashboardFeature = React.memo<EvalDashboardFeatureProps>(
                           ) : undefined
                         } : undefined,
                         content: sessionDetails ? (
-                          <EvalSessionDetailsPanel 
-                            sessionDetails={sessionDetails} 
-                            activeTab={activeTab} 
+                          <EvalSessionDetailsPanel
+                            sessionDetails={sessionDetails}
+                            activeTab={activeTab}
                           />
                         ) : (
                           <div className="flex-1 flex items-center justify-center text-muted-foreground bg-background h-full">

package/dist/index.cjs

@@ -1734,6 +1734,14 @@ var AdjustableLayout = React3__namespace.memo(
       return raw.map((size) => size / total * 100);
     }, [sections]);
     const [sizes, setSizes] = React3__namespace.useState(defaultSizes);
+    React3__namespace.useEffect(() => {
+      setSizes((prevSizes) => {
+        if (prevSizes.length !== sections.length) {
+          return defaultSizes;
+        }
+        return prevSizes;
+      });
+    }, [sections.length, defaultSizes]);
     React3__namespace.useEffect(() => {
       if (!storageKey) return;
       const saved = localStorage.getItem(storageKey);
@@ -1830,6 +1838,7 @@ var AdjustableLayout = React3__namespace.memo(
       }
     }, [draggingIndex, handleMouseMove, handleMouseUp]);
     const renderPanel = (section, size, index) => {
+      var _a2;
       const nextSection = sections[index + 1];
       const isResizable = section.resizable !== false && sections.length > 1 && index < sections.length - 1 && !section.fixedSize && !(nextSection == null ? void 0 : nextSection.fixedSize);
       const fixedStyle = section.fixedSize ? orientation === "horizontal" ? { flex: `0 0 ${section.fixedSize}`, width: section.fixedSize, minWidth: section.fixedSize } : { flex: `0 0 ${section.fixedSize}`, height: section.fixedSize, minHeight: section.fixedSize } : null;
@@ -1838,7 +1847,8 @@ var AdjustableLayout = React3__namespace.memo(
           "div",
           {
             className: cn(
-              "min-h-0 overflow-hidden bg-card border border-border rounded-xl",
+              "min-h-0 overflow-hidden",
+              ((_a2 = section.variant) != null ? _a2 : "default") === "default" && "bg-card border border-border rounded-xl",
               section.className
             ),
             style: __spreadProps(__spreadValues({}, fixedStyle != null ? fixedStyle : { flex: `${size} 1 0%` }), {
@@ -13067,7 +13077,6 @@ var EvalDashboardFeature = React3__namespace.memo(
         id: session.id,
         title: session.id,
         subtitle: `Score: ${session.score}/${session.total}`,
-        preview: `${session.latency} \u2022 ${session.tokens}t`,
         timestamp: new Date(session.date).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
       }));
     }, [inbox.items]);
@@ -13097,6 +13106,7 @@ var EvalDashboardFeature = React3__namespace.memo(
         resizable: true,
         padded: false,
         className: "h-full",
+        storageKey: "eval-dashboard-outer",
         sections: [
           ...mockChartData.length > 0 ? [{
             id: "graph",
@@ -13125,8 +13135,9 @@ var EvalDashboardFeature = React3__namespace.memo(
           }] : [],
           {
             id: "content",
-            defaultSize: mockChartData.length > 0 ? 65 : 100,
+            defaultSize: mockChartData.length > 0 ? 80 : 100,
             minSize: 40,
+            variant: "ghost",
             content: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx(
               SectionLayout,
               {