@orsetra/shared-ui 1.0.65 → 1.1.0

package/components/layout/index.ts

@@ -30,3 +30,4 @@ export {
 // Skeleton is exported from ../ui to avoid duplicate exports
 export { RootLayoutWrapper, ibmPlexSans, ibmPlexMono } from './root-layout-wrapper'
 export { LayoutContainer } from './layout-container'
+export { PageWithSidePanel } from './page-with-side-panel'

package/components/layout/page-with-side-panel.tsx

@@ -6,6 +6,7 @@ import { Button } from "../ui/button"
 
 interface PageWithSidePanelProps {
   children: ReactNode
+  contentHeader?: ReactNode
   sidePanel?: ReactNode
   sidePanelHeader?: ReactNode
   sidePanelWidth?: "sm" | "md" | "lg"
@@ -17,19 +18,14 @@ interface PageWithSidePanelProps {
 }
 
 const PANEL_WIDTHS = {
-  sm: "w-64",      // 256px
-  md: "w-72",      // 288px
-  lg: "w-80",      // 320px
+  sm: "w-64",
+  md: "w-72",
+  lg: "w-80",
 }
 
-const PANEL_PADDING = {
-  sm: "lg:pr-64",
-  md: "lg:pr-72",
-  lg: "lg:pr-80",
-}
-
-export function PageWithSidePanel({ 
-  children, 
+export function PageWithSidePanel({
+  children,
+  contentHeader,
   sidePanel,
   sidePanelHeader,
   sidePanelWidth = "md",
@@ -37,11 +33,10 @@ export function PageWithSidePanel({
   defaultOpen = true,
   showBorder = true,
   onClose,
-  onOpen
+  onOpen,
 }: PageWithSidePanelProps) {
   const [isOpen, setIsOpen] = useState(defaultOpen)
   const panelWidthClass = PANEL_WIDTHS[sidePanelWidth]
-  const panelPaddingClass = PANEL_PADDING[sidePanelWidth]
 
   const handleClose = () => {
     setIsOpen(false)
@@ -54,53 +49,71 @@ export function PageWithSidePanel({
   }
 
   return (
-    <div className="min-h-screen bg-white overflow-hidden">
-      {/* Main content */}
-      <div className={`w-full px-6 py-8 transition-all duration-300 ${sidePanel && isOpen ? panelPaddingClass : ''}`}>
-        {children}
+    <div className="flex items-start">
+
+      {/* Main content column — grows to fill space left by the panel */}
+      <div className="flex-1 min-w-0 flex flex-col">
+
+        {/* Content header — sticks at the top of the scroll container */}
+        {contentHeader && (
+          <div className="flex sticky top-0 z-10 bg-white h-14 flex-shrink-0 items-center justify-between px-4 border-b border-ibm-gray-20">
+            {contentHeader}
+          </div>
+        )}
+
+        {/* Content body */}
+        <div className="px-6 py-8">
+          {children}
+        </div>
       </div>
 
-      {/* Side panel - fixed */}
+      {/* Side panel — sticky in the flex row, stays anchored while content scrolls.
+          Being in the flex flow (not fixed) means it naturally accounts for scrollbars,
+          preventing the gap between the content header border and the panel border. */}
       {sidePanel && (
         <>
-          <div 
-            className={`hidden lg:block ${panelWidthClass} flex-shrink-0 fixed top-14 bottom-0 right-0 bg-white flex flex-col ${showBorder ? 'border-l border-ibm-gray-40' : ''} transition-transform duration-300 ease-in-out ${
-              isOpen ? 'translate-x-0' : 'translate-x-full'
-            }`}
+          <div
+            className={`hidden lg:flex flex-col flex-shrink-0 sticky top-0 self-start h-[calc(100vh-3.5rem)] overflow-hidden transition-[width] duration-300 ease-in-out ${
+              isOpen && showBorder ? "border-l border-ibm-gray-40" : ""
+            } ${isOpen ? panelWidthClass : "w-0"}`}
           >
-            {/* Header */}
-            {(sidePanelHeader || closable) && (
-              <div className="flex items-center justify-between p-4 border-b border-ibm-gray-20 flex-shrink-0">
-                <div className="flex-1">
-                  {sidePanelHeader}
+            {/* Inner wrapper at fixed width to prevent content reflow during animation */}
+            <div className={`flex flex-col h-full bg-white ${panelWidthClass}`}>
+
+              {/* Panel header */}
+              {(sidePanelHeader || closable) && (
+                <div className="flex items-center justify-between h-14 flex-shrink-0 px-4 border-b border-ibm-gray-20">
+                  <div className="flex-1 min-w-0">
+                    {sidePanelHeader}
+                  </div>
+                  {closable && (
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      onClick={handleClose}
+                      className="h-8 w-8 p-0 ml-2 flex-shrink-0"
+                    >
+                      <X className="h-4 w-4" />
+                    </Button>
+                  )}
                 </div>
-                {closable && (
-                  <Button
-                    variant="ghost"
-                    size="xs"
-                    onClick={handleClose}
-                    className="h-8 w-8 p-0 ml-2"
-                  >
-                    <X className="h-4 w-4" />
-                  </Button>
-                )}
-              </div>
-            )}
+              )}
 
-            {/* Content */}
-            <div className="flex-1 overflow-y-auto">
-              {sidePanel}
+              {/* Panel scrollable content */}
+              <div className="flex-1 overflow-y-auto">
+                {sidePanel}
+              </div>
             </div>
           </div>
 
-          {/* Toggle button - shown when panel is closed */}
+          {/* Toggle button — fixed keeps it vertically centered in the viewport */}
           {closable && !isOpen && (
             <button
               onClick={handleOpen}
-              className="hidden lg:flex fixed top-1/2 right-0 -translate-y-1/2 items-center justify-center w-8 h-16 bg-white border border-ibm-gray-40 border-r-0 rounded-l-lg shadow-md hover:bg-ibm-gray-10 transition-colors duration-200"
+              className="hidden lg:flex fixed top-1/2 right-0 -translate-y-1/2 items-center justify-center w-6 h-16 bg-white border border-ibm-gray-40 border-r-0 rounded-l-lg shadow-md hover:bg-ibm-gray-10 transition-colors duration-200"
               aria-label="Open side panel"
             >
-              <ChevronLeft className="h-5 w-5 text-ibm-gray-70" />
+              <ChevronLeft className="h-4 w-4 text-ibm-gray-70" />
             </button>
           )}
         </>

package/components/layout/sidebar/main-sidebar.tsx

@@ -86,14 +86,14 @@ export function MainSidebar({
       )}
 
       <div className={cn(
-        "fixed left-0 top-0 h-full bg-gray-30 border-r border-ui-border z-50 transform transition-all duration-300 ease-in-out",
+        "fixed left-0 top-0 h-full bg-white border-r border-ui-border z-50 transform transition-all duration-300 ease-in-out",
         isMinimized ? "w-16" : "w-64 shadow-xl",
         isMinimized 
           ? "translate-x-0" 
           : (isOpen ? "translate-x-0" : "-translate-x-full")
       )}>
         <div className={cn(
-          "flex items-center h-16 border-b border-ui-border bg-gray-30",
+          "flex items-center h-16 border-b border-ui-border bg-white",
           isMinimized ? "justify-center px-2" : "justify-between px-4"
         )}>
           {!isMinimized && <Logo className="text-2xl font-semibold text-text-primary" />}
@@ -148,7 +148,7 @@ export function MainSidebar({
                 </button>
 
                 {isMinimized && hoveredMenu === item.id && sidebarMenus[item.id] && sidebarMenus[item.id].length > 0 && (
-                  <div className="absolute left-full top-0 ml-2 bg-gray-30 border border-ui-border rounded-lg shadow-xl z-50 min-w-[200px] py-2">
+                  <div className="absolute left-full top-0 ml-2 bg-white border border-ui-border rounded-lg shadow-xl z-50 min-w-[200px] py-2">
                     <div className="px-4 py-2 border-b border-ui-border">
                       <h3 className="text-sm font-semibold text-text-primary">{item.label}</h3>
                     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.0.65",
+  "version": "1.1.0",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",
@@ -93,4 +93,4 @@
     "next": "^16.0.7",
     "typescript": "^5"
   }
-}
+}