@papernote/ui 1.8.0 → 1.8.2

package/dist/components/PageLayout.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
+import { PageHeaderAction } from './PageHeader';
 export interface PageLayoutProps {
-    /** Page title displayed at the top */
+    /** Page title displayed at the top (also used for document title) */
     title: string;
     /** Optional subtitle/description text below the title */
     description?: string;
@@ -14,6 +15,10 @@ export interface PageLayoutProps {
     maxWidth?: '4xl' | '5xl' | '6xl' | '7xl' | 'full';
     /** Fix all margins/padding instead of responsive (default: false) */
     fixed?: boolean;
+    /** Page-level action buttons rendered inline with title */
+    actions?: PageHeaderAction[];
+    /** Custom content to render on the right (instead of actions) */
+    rightContent?: ReactNode;
 }
 /**
  * PageLayout - Standard page layout with title, description, and content
@@ -43,6 +48,21 @@ export interface PageLayoutProps {
  * </PageLayout>
  * ```
  *
+ * @example With actions
+ * ```tsx
+ * <PageLayout
+ *   title="Products"
+ *   description="Manage your product catalog"
+ *   headerContent={<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Products' }]} />}
+ *   actions={[
+ *     { id: 'export', label: 'Export', icon: <Download />, onClick: handleExport, variant: 'ghost' },
+ *     { id: 'add', label: 'Add Product', icon: <Plus />, onClick: handleAdd, variant: 'primary' },
+ *   ]}
+ * >
+ *   <DataTable data={products} columns={columns} />
+ * </PageLayout>
+ * ```
+ *
  * @example With Layout for sidebar and gutter
  * ```tsx
  * <Layout sidebar={<Sidebar items={items} />}>
@@ -52,5 +72,5 @@ export interface PageLayoutProps {
  * </Layout>
  * ```
  */
-export declare function PageLayout({ title, description, children, className, headerContent, maxWidth, fixed }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageLayout({ title, description, children, className, headerContent, maxWidth, fixed, actions, rightContent, }: PageLayoutProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PageLayout.d.ts.map

package/dist/components/PageLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLayout.d.ts","sourceRoot":"","sources":["../../src/components/PageLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAClD,qEAAqE;IACrE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAc,EACd,aAAa,EACb,QAAgB,EAChB,KAAa,EACd,EAAE,eAAe,2CAgCjB"}
+{"version":3,"file":"PageLayout.d.ts","sourceRoot":"","sources":["../../src/components/PageLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAKhD,MAAM,WAAW,eAAe;IAC9B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wBAAwB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;IAClD,qEAAqE;IACrE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B,iEAAiE;IACjE,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAc,EACd,aAAa,EACb,QAAgB,EAChB,KAAa,EACb,OAAO,EACP,YAAY,GACb,EAAE,eAAe,2CAsDjB"}

package/dist/index.d.ts

@@ -5294,61 +5294,6 @@ interface AppLayoutProps {
 }
 declare const AppLayout: React__default.FC<AppLayoutProps>;
 
-interface PageLayoutProps {
-    /** Page title displayed at the top */
-    title: string;
-    /** Optional subtitle/description text below the title */
-    description?: string;
-    /** Main page content */
-    children: ReactNode;
-    /** Additional CSS classes to apply to the content wrapper */
-    className?: string;
-    /** Optional content to render before the title (e.g., breadcrumbs, alerts, control bars) */
-    headerContent?: ReactNode;
-    /** Maximum width constraint for the page content (default: '7xl' = 1400px) */
-    maxWidth?: '4xl' | '5xl' | '6xl' | '7xl' | 'full';
-    /** Fix all margins/padding instead of responsive (default: false) */
-    fixed?: boolean;
-}
-/**
- * PageLayout - Standard page layout with title, description, and content
- *
- * A high-level layout component that provides consistent page structure across your application.
- * Wraps content in the Page component to include notebook styling (paper texture, ruled lines,
- * red margin line).
- *
- * **Note**: PageLayout does NOT include the sidebar or gutter. For a complete app layout with
- * sidebar and gutter navigation, use the Layout component instead and wrap this inside it.
- *
- * **Component Hierarchy**:
- * - **Page** - Just paper with notebook styling (lowest level)
- * - **PageLayout** - Page + title + description (this component)
- * - **Layout** - Sidebar + gutter + content area (includes PageLayout or Page inside)
- *
- * @example Basic page with title
- * ```tsx
- * <PageLayout
- *   title="Dashboard"
- *   description="Overview of your metrics"
- *   headerContent={<Breadcrumbs />}
- * >
- *   <Card>
- *     <CardContent>Your dashboard content</CardContent>
- *   </Card>
- * </PageLayout>
- * ```
- *
- * @example With Layout for sidebar and gutter
- * ```tsx
- * <Layout sidebar={<Sidebar items={items} />}>
- *   <PageLayout title="Dashboard" description="Overview">
- *     <Card>Content</Card>
- *   </PageLayout>
- * </Layout>
- * ```
- */
-declare function PageLayout({ title, description, children, className, headerContent, maxWidth, fixed }: PageLayoutProps): react_jsx_runtime.JSX.Element;
-
 interface PageHeaderAction {
     /** Unique identifier for the action */
     id: string;
@@ -5433,6 +5378,80 @@ interface PageHeaderProps {
  */
 declare function PageHeader({ title, subtitle, breadcrumbs, showHomeBreadcrumb, actions, rightContent, belowTitle, className, sticky, backButton, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
 
+interface PageLayoutProps {
+    /** Page title displayed at the top (also used for document title) */
+    title: string;
+    /** Optional subtitle/description text below the title */
+    description?: string;
+    /** Main page content */
+    children: ReactNode;
+    /** Additional CSS classes to apply to the content wrapper */
+    className?: string;
+    /** Optional content to render before the title (e.g., breadcrumbs, alerts, control bars) */
+    headerContent?: ReactNode;
+    /** Maximum width constraint for the page content (default: '7xl' = 1400px) */
+    maxWidth?: '4xl' | '5xl' | '6xl' | '7xl' | 'full';
+    /** Fix all margins/padding instead of responsive (default: false) */
+    fixed?: boolean;
+    /** Page-level action buttons rendered inline with title */
+    actions?: PageHeaderAction[];
+    /** Custom content to render on the right (instead of actions) */
+    rightContent?: ReactNode;
+}
+/**
+ * PageLayout - Standard page layout with title, description, and content
+ *
+ * A high-level layout component that provides consistent page structure across your application.
+ * Wraps content in the Page component to include notebook styling (paper texture, ruled lines,
+ * red margin line).
+ *
+ * **Note**: PageLayout does NOT include the sidebar or gutter. For a complete app layout with
+ * sidebar and gutter navigation, use the Layout component instead and wrap this inside it.
+ *
+ * **Component Hierarchy**:
+ * - **Page** - Just paper with notebook styling (lowest level)
+ * - **PageLayout** - Page + title + description (this component)
+ * - **Layout** - Sidebar + gutter + content area (includes PageLayout or Page inside)
+ *
+ * @example Basic page with title
+ * ```tsx
+ * <PageLayout
+ *   title="Dashboard"
+ *   description="Overview of your metrics"
+ *   headerContent={<Breadcrumbs />}
+ * >
+ *   <Card>
+ *     <CardContent>Your dashboard content</CardContent>
+ *   </Card>
+ * </PageLayout>
+ * ```
+ *
+ * @example With actions
+ * ```tsx
+ * <PageLayout
+ *   title="Products"
+ *   description="Manage your product catalog"
+ *   headerContent={<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Products' }]} />}
+ *   actions={[
+ *     { id: 'export', label: 'Export', icon: <Download />, onClick: handleExport, variant: 'ghost' },
+ *     { id: 'add', label: 'Add Product', icon: <Plus />, onClick: handleAdd, variant: 'primary' },
+ *   ]}
+ * >
+ *   <DataTable data={products} columns={columns} />
+ * </PageLayout>
+ * ```
+ *
+ * @example With Layout for sidebar and gutter
+ * ```tsx
+ * <Layout sidebar={<Sidebar items={items} />}>
+ *   <PageLayout title="Dashboard" description="Overview">
+ *     <Card>Content</Card>
+ *   </PageLayout>
+ * </Layout>
+ * ```
+ */
+declare function PageLayout({ title, description, children, className, headerContent, maxWidth, fixed, actions, rightContent, }: PageLayoutProps): react_jsx_runtime.JSX.Element;
+
 interface ActionBarAction {
     /** Unique identifier for the action */
     id: string;

package/dist/index.esm.js

@@ -56680,6 +56680,21 @@ const AppLayout = ({ children, toolbarSections = [], className = '', showToolbar
  * </PageLayout>
  * ```
  *
+ * @example With actions
+ * ```tsx
+ * <PageLayout
+ *   title="Products"
+ *   description="Manage your product catalog"
+ *   headerContent={<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Products' }]} />}
+ *   actions={[
+ *     { id: 'export', label: 'Export', icon: <Download />, onClick: handleExport, variant: 'ghost' },
+ *     { id: 'add', label: 'Add Product', icon: <Plus />, onClick: handleAdd, variant: 'primary' },
+ *   ]}
+ * >
+ *   <DataTable data={products} columns={columns} />
+ * </PageLayout>
+ * ```
+ *
  * @example With Layout for sidebar and gutter
  * ```tsx
  * <Layout sidebar={<Sidebar items={items} />}>
@@ -56689,7 +56704,7 @@ const AppLayout = ({ children, toolbarSections = [], className = '', showToolbar
  * </Layout>
  * ```
  */
-function PageLayout({ title, description, children, className = '', headerContent, maxWidth = '7xl', fixed = false }) {
+function PageLayout({ title, description, children, className = '', headerContent, maxWidth = '7xl', fixed = false, actions, rightContent, }) {
     // Responsive padding classes - fixed left/top, responsive right/bottom
     const paddingClasses = fixed
         ? 'p-6 pb-20'
@@ -56701,7 +56716,7 @@ function PageLayout({ title, description, children, className = '', headerConten
         '7xl': 'max-w-7xl',
         'full': 'max-w-full',
     };
-    return (jsxs(Page, { padding: "none", maxWidth: maxWidth, fixed: fixed, children: [headerContent, jsxs("div", { className: `${paddingClasses} ${maxWidthClasses[maxWidth]} mx-auto ${className}`, children: [jsxs("div", { className: "mb-8", children: [jsx("h1", { className: "text-3xl font-bold text-ink-900 mb-2", children: title }), description && (jsx("p", { className: "text-ink-600", children: description }))] }), children] })] }));
+    return (jsx(Page, { padding: "none", maxWidth: maxWidth, fixed: fixed, children: jsxs("div", { className: `${paddingClasses} ${maxWidthClasses[maxWidth]} mx-auto ${className}`, children: [headerContent && jsx("div", { className: "mb-4", children: headerContent }), jsx("div", { className: "mb-8", children: jsxs(Stack, { direction: "horizontal", justify: "between", align: "start", gap: "md", children: [jsxs("div", { className: "min-w-0 flex-1", children: [jsx(Text, { as: "h1", size: "2xl", weight: "bold", className: "text-3xl mb-2", children: title }), description && (jsx(Text, { color: "muted", children: description }))] }), (actions || rightContent) && (jsxs(Stack, { direction: "horizontal", gap: "sm", className: "flex-shrink-0", children: [rightContent, actions?.map((action) => (jsx(Button, { variant: action.variant || 'secondary', icon: action.icon, onClick: action.onClick, disabled: action.disabled, loading: action.loading, className: action.hideOnMobile ? 'hidden sm:inline-flex' : '', children: action.label }, action.id)))] }))] }) }), children] }) }));
 }
 
 /**