@principal-ai/subsystems-react 0.56.4 → 0.56.5

package/dist/subsystem/SubsystemComponentGraph.js

@@ -2091,7 +2091,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
                             fontSize: theme.fontSizes[0],
                             color: theme.colors.textMuted ?? theme.colors.textSecondary,
                         }, children: fileOverlay.file }), _jsx(FileOverlayCloseButton, { onClose: closeFileOverlay })] }), _jsx("div", { style: { flex: 1, minHeight: 0, overflow: 'auto' }, children: _jsx(FileDrawerContent, { render: renderDrawerContent, file: fileOverlay.file, startLine: fileOverlay.startLine, endLine: fileOverlay.endLine, fullFile: true }) })] }));
-    return (_jsx(GraphWithSidebar, { hidden: !sidebarVisible, bodyHidden: !sidebarBodyVisible, headerMaxHeight: sidebarBodyVisible ? '50%' : '100%', header: sidebarHeader, tabs: sidebarTabs, activeTab: diagnosticsTab, onTabChange: (id) => setDiagnosticsTab(id), sidebarBody: sidebarBody, tabListLabel: issuesActive ? 'Diagnostics view' : 'Sidebar view', defaultWidth: persisted.sidebarWidth ?? 450, minWidth: 240, maxWidth: sidebarMaxWidth, persistKey: persistKey, onResizeEnd: () => requestAnimationFrame(() => fitView()), children: _jsxs("div", { style: { flex: 1, position: 'relative', display: 'flex', flexDirection: committedDirection === 'vertical' ? 'row' : 'column', minHeight: 0, minWidth: 0 }, children: [_jsxs("div", { className: layoutFlipping ? LAYOUT_FLIP_CLASS : undefined, style: {
+    return (_jsx(GraphWithSidebar, { hidden: !sidebarVisible, bodyHidden: !sidebarBodyVisible, headerMaxHeight: sidebarBodyVisible ? '30%' : '100%', header: sidebarHeader, tabs: sidebarTabs, activeTab: diagnosticsTab, onTabChange: (id) => setDiagnosticsTab(id), sidebarBody: sidebarBody, tabListLabel: issuesActive ? 'Diagnostics view' : 'Sidebar view', defaultWidth: persisted.sidebarWidth ?? 450, minWidth: 240, maxWidth: sidebarMaxWidth, persistKey: persistKey, onResizeEnd: () => requestAnimationFrame(() => fitView()), children: _jsxs("div", { style: { flex: 1, position: 'relative', display: 'flex', flexDirection: committedDirection === 'vertical' ? 'row' : 'column', minHeight: 0, minWidth: 0 }, children: [_jsxs("div", { className: layoutFlipping ? LAYOUT_FLIP_CLASS : undefined, style: {
                         position: 'relative',
                         flex: collapseCanvas ? 0 : 1,
                         minHeight: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/subsystems-react",
-  "version": "0.56.4",
+  "version": "0.56.5",
   "description": "React UI for Subsystem Models — graph, Pierre code views, and session-event feeds",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/stories/Canvases/C4/C4ToComponentDrill.stories.tsx

@@ -374,7 +374,7 @@ function Demo() {
           defaultWidth={320}
           minWidth={240}
           maxWidth={480}
-          headerMaxHeight="50%"
+          headerMaxHeight="30%"
           header={
             <>
               <div style={{ fontSize: 12, lineHeight: 1.5 }}>

package/src/subsystem/GraphSidebar.test.tsx

@@ -98,7 +98,7 @@ describe('GraphSidebar chrome', () => {
   test('a capped header fits its content while the body fills the remaining space', () => {
     const { container } = renderSidebar({
       header: createElement('span', null, 'description'),
-      headerMaxHeight: '50%',
+      headerMaxHeight: '30%',
       sidebarBody: createElement('span', null, 'trails'),
     });
     const column = sidebarColumn(container);
@@ -106,7 +106,7 @@ describe('GraphSidebar chrome', () => {
     const body = column.lastElementChild as HTMLElement;
     expect(header.style.flexGrow).toBe('0');
     expect(header.style.flexBasis).toBe('auto');
-    expect(header.style.maxHeight).toBe('50%');
+    expect(header.style.maxHeight).toBe('30%');
     expect(header.style.boxSizing).toBe('border-box');
     expect(header.style.overflowY).toBe('auto');
     expect(body.style.flexGrow).toBe('1');

package/src/subsystem/SubsystemComponentGraph.sidebar.test.tsx

@@ -50,6 +50,14 @@ describe('subsystem graph sidebar', () => {
     expect(content?.textContent).not.toContain('Request subsystem');
   });
 
+  test('caps the scrollable description at 30% above the trails', () => {
+    const body = renderGraph();
+    const description = body.querySelector('[style*="max-height:30%"]') as HTMLElement;
+    expect(description).not.toBeNull();
+    expect(description.textContent).toContain('Always visible description.');
+    expect(description.style.overflowY).toBe('auto');
+  });
+
   test('keeps the Files button in the header when no name is provided', () => {
     const body = renderGraph({ title: undefined });
     expect(body.querySelector('header h2')).toBeNull();

package/src/subsystem/SubsystemComponentGraph.tsx

@@ -2848,7 +2848,7 @@ function Inner({ components, trails, graphifyRelations, orderByLine, layoutDirec
     <GraphWithSidebar
       hidden={!sidebarVisible}
       bodyHidden={!sidebarBodyVisible}
-      headerMaxHeight={sidebarBodyVisible ? '50%' : '100%'}
+      headerMaxHeight={sidebarBodyVisible ? '30%' : '100%'}
       header={sidebarHeader}
       tabs={sidebarTabs}
       activeTab={diagnosticsTab}