ai-design-system 0.1.27 → 0.1.29

package/components/composites/AppHeader/AppHeader.tsx

@@ -16,12 +16,17 @@ export const AppHeader = React.memo<AppHeaderProps>(({
 }) => {
   return (
     <header className={`flex h-14 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-14 ${className || ""}`}>
-      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-        {showSidebarToggle && <SidebarTrigger className="-ml-1" />}
-        {showSidebarToggle && title && <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />}
-        {showTitle && title && <h1 className="text-base font-medium">{title}</h1>}
-        {tabs && tabs.length > 0 && (
-          <div className="flex-1 flex justify-center">
+      <div className="grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-4 lg:px-6">
+        <div className="min-w-0 flex items-center gap-1 lg:gap-2">
+          {showSidebarToggle && <SidebarTrigger className="-ml-1" />}
+          {showSidebarToggle && showTitle && title && (
+            <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
+          )}
+          {showTitle && title && <h1 className="max-w-[28rem] truncate text-base font-medium">{title}</h1>}
+        </div>
+
+        <div className="justify-self-center">
+          {tabs && tabs.length > 0 && (
             <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange}>
               <TabsList>
                 {tabs.map((tab) => (
@@ -31,9 +36,10 @@ export const AppHeader = React.memo<AppHeaderProps>(({
                 ))}
               </TabsList>
             </Tabs>
-          </div>
-        )}
-        <div className="ml-auto flex items-center gap-2">{actions}</div>
+          )}
+        </div>
+
+        <div className="flex min-w-0 items-center justify-end gap-2">{actions}</div>
       </div>
     </header>
   )

package/components/features/PageLayout/PageLayout.tsx

@@ -44,8 +44,9 @@ import { PageContainer } from "@/components/composites/PageContainer"
 export interface PageLayoutProps {
   /**
    * Sidebar configuration
+   * Optional for apps that need header + content layout without a sidebar.
    */
-  sidebar: AppSidebarProps
+  sidebar?: AppSidebarProps
   /**
    * Header configuration
    */
@@ -127,6 +128,19 @@ export const PageLayout = React.memo<PageLayoutProps>(
       <div className="flex min-h-0 flex-1 flex-col">{children}</div>
     )
 
+    const pageContainer = (
+      <PageContainer className={`overflow-hidden ${className ?? ""}`}>
+        <AppHeader {...header} />
+        <div className={`min-h-0 flex-1 overflow-x-hidden ${layoutSections ? "overflow-hidden" : "overflow-y-auto"}`}>
+          {contentArea}
+        </div>
+      </PageContainer>
+    )
+
+    if (!sidebar) {
+      return pageContainer
+    }
+
     return (
       <LayoutProvider
         defaultOpen={defaultSidebarOpen}
@@ -134,12 +148,7 @@ export const PageLayout = React.memo<PageLayoutProps>(
         sidebarWidthIcon={sidebarWidthIcon}
       >
         <AppSidebar {...sidebar} />
-        <PageContainer className={`overflow-hidden ${className ?? ""}`}>
-          <AppHeader {...header} />
-          <div className={`min-h-0 flex-1 overflow-x-hidden ${layoutSections ? "overflow-hidden" : "overflow-y-auto"}`}>
-            {contentArea}
-          </div>
-        </PageContainer>
+        {pageContainer}
       </LayoutProvider>
     )
   }

package/components/index.ts

@@ -1,14 +1,11 @@
-// Primitives
-export * from './primitives';
-
-// Composites
-export * from './composites';
-
-// Blocks
-export * from './blocks';
-
-// Features
+// Root public runtime API: feature-layer values only.
 export * from './features';
 
+// Root public type API: allow contracts from all layers.
+export type * from './primitives';
+export type * from './composites';
+export type * from './blocks';
+export type * from './features';
+
 // Utilities
 export { cn } from '@/lib/utils';