@papernote/ui 1.8.0 → 1.8.1

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

@@ -11072,52 +11072,44 @@ function getAugmentedNamespace(n) {
  * (A1, A1:C5, ...)
  */
 
-var collection;
-var hasRequiredCollection;
-
-function requireCollection () {
-	if (hasRequiredCollection) return collection;
-	hasRequiredCollection = 1;
-	class Collection {
-
-	    constructor(data, refs) {
-	        if (data == null && refs == null) {
-	            this._data = [];
-	            this._refs = [];
-	        } else {
-	            if (data.length !== refs.length)
-	                throw Error('Collection: data length should match references length.');
-	            this._data = data;
-	            this._refs = refs;
-	        }
-	    }
+let Collection$3 = class Collection {
 
-	    get data() {
-	        return this._data;
-	    }
+    constructor(data, refs) {
+        if (data == null && refs == null) {
+            this._data = [];
+            this._refs = [];
+        } else {
+            if (data.length !== refs.length)
+                throw Error('Collection: data length should match references length.');
+            this._data = data;
+            this._refs = refs;
+        }
+    }
 
-	    get refs() {
-	        return this._refs;
-	    }
+    get data() {
+        return this._data;
+    }
 
-	    get length() {
-	        return this._data.length;
-	    }
+    get refs() {
+        return this._refs;
+    }
 
-	    /**
-	     * Add data and references to this collection.
-	     * @param {{}} obj - data
-	     * @param {{}} ref - reference
-	     */
-	    add(obj, ref) {
-	        this._data.push(obj);
-	        this._refs.push(ref);
-	    }
-	}
+    get length() {
+        return this._data.length;
+    }
 
-	collection = Collection;
-	return collection;
-}
+    /**
+     * Add data and references to this collection.
+     * @param {{}} obj - data
+     * @param {{}} ref - reference
+     */
+    add(obj, ref) {
+        this._data.push(obj);
+        this._refs.push(ref);
+    }
+};
+
+var collection = Collection$3;
 
 var helpers;
 var hasRequiredHelpers;
@@ -11126,7 +11118,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = requireCollection();
+	const Collection = collection;
 
 	const Types = {
 	    NUMBER: 0,
@@ -20780,7 +20772,7 @@ var engineering = EngineeringFunctions;
 
 const FormulaError$b = requireError();
 const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
-const Collection$2 = requireCollection();
+const Collection$2 = collection;
 const H$5 = FormulaHelpers$8;
 
 const ReferenceFunctions$1 = {
@@ -32408,7 +32400,7 @@ var parsing = {
 const FormulaError$4 = requireError();
 const {Address: Address$1} = requireHelpers();
 const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
-const Collection$1 = requireCollection();
+const Collection$1 = collection;
 const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
 const {NotAllInputParsedException} = require$$4;
 
@@ -33170,7 +33162,7 @@ var hooks$1 = {
 const FormulaError$2 = requireError();
 const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
 const {Prefix, Postfix, Infix, Operators} = operators;
-const Collection = requireCollection();
+const Collection = collection;
 const MAX_ROW = 1048576, MAX_COLUMN = 16384;
 
 let Utils$1 = class Utils {
@@ -56680,6 +56672,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 +56696,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 +56708,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 (jsxs(Page, { padding: "none", maxWidth: maxWidth, fixed: fixed, children: [headerContent, jsxs("div", { className: `${paddingClasses} ${maxWidthClasses[maxWidth]} mx-auto ${className}`, children: [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] })] }));
 }
 
 /**