@qwickapps/react-framework 1.4.0 → 1.4.2

package/src/components/pages/Page.tsx

@@ -1,156 +1,284 @@
 /**
- * Page Architecture - Clean separation with functional controller
- * 
- * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ * Page provides a unified Page component supporting:
+ *  - Layout variants (width, padding, background)
+ *  - Template-based metadata (title / description / slug)
+ *  - Declarative print mode with dynamic header/footer sizing
+ *  - Centralized context (route, loading/error flags, print controls)
+ *  - Optional class-based extension (Page) for legacy / OOP style
+ *
+ * Typical usage (functional):
+ *   <Page title="Orders" printConfig={{ printTitle: 'Orders' }}>
+ *     <OrdersList />
+ *   </Page>
+ *
+ * Class-based (override only what you need):
+ *   class OrdersPage extends Page {
+ *     protected getPageProps() { return { title: 'Orders' }; }
+ *     protected renderPrintView() { return <PrintOnlyLayout />; }
+ *   }
+ *
+ * Printing:
+ *   const { triggerPrint } = usePageContext();
+ *   triggerPrint(optionalOverrides);
+ *
+ * Copyright (c) 2025 QwickApps
  */
-
-import React, { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState
+} from 'react';
 import { t } from '../../contexts';
 import { useBaseProps, WithBaseProps } from '../../hooks/useBaseProps';
 import { usePrintMode } from '../../hooks/usePrintMode';
 import { PageTemplateSchema } from '../../schemas/PageTemplateSchema';
 import { PrintConfigSchema } from '../../schemas/PrintConfigSchema';
+import { toCssLength } from '../../utils/cssUtils';
 import { useSafeLocation } from '../../utils/reactUtils';
 import { SafeSpan } from '../SafeSpan';
 import './Page.css';
+import { Box } from '@mui/material';
 
+/* -------------------------------------------------------------------------- */
+/* Context                                                                    */
+/* -------------------------------------------------------------------------- */
 export interface PageContextValue {
-  /** Current page route/path */
   route?: string;
-  /** Whether the page is currently in print mode */
   isPrintMode: boolean;
-  /** Current print configuration */
   printConfig: PrintConfigSchema;
-  /** Trigger print mode and dialog */
   triggerPrint: (config?: Partial<PrintConfigSchema>) => void;
-  /** Set page loading state */
   setLoading: (loading: boolean) => void;
-  /** Set page error state */
   setError: (error: string | null) => void;
-  /** Current page loading state */
   isLoading: boolean;
-  /** Current page error state */
   error: string | null;
 }
 
-// Create context for page-level state
 const PageContext = createContext<PageContextValue | null>(null);
 
 export const usePageContext = (): PageContextValue => {
-  const context = useContext(PageContext);
-  if (!context) {
-    throw new Error('usePageContext must be used within a Page component');
-  }
-  return context;
+  const ctx = useContext(PageContext);
+  if (!ctx) throw new Error('usePageContext must be used within PageView');
+  return ctx;
 };
 
+/* -------------------------------------------------------------------------- */
+/* Meta Hook                                                                  */
+/* -------------------------------------------------------------------------- */
+function usePageMeta(
+  title?: string,
+  description?: string,
+  opts?: { openGraph?: boolean; removeOnUnmount?: boolean }
+) {
+  const { openGraph = true, removeOnUnmount = false } = opts || {};
+
+  useEffect(() => {
+    const prevTitle = document.title;
+    let createdDesc = false;
+    let metaDesc = document.querySelector('meta[name="description"]') as HTMLMetaElement | null;
+
+    if (title && document.title !== title) {
+      document.title = title;
+    }
+
+    if (description) {
+      if (!metaDesc) {
+        metaDesc = document.createElement('meta');
+        metaDesc.name = 'description';
+        document.head.appendChild(metaDesc);
+        createdDesc = true;
+      }
+      if (metaDesc.content !== description) metaDesc.content = description;
+    }
+
+    let ogTitle: HTMLMetaElement | null = null;
+    let ogDesc: HTMLMetaElement | null = null;
+
+    if (openGraph) {
+      if (title) {
+        ogTitle = document.querySelector('meta[property="og:title"]');
+        if (!ogTitle) {
+          ogTitle = document.createElement('meta');
+          ogTitle.setAttribute('property', 'og:title');
+          document.head.appendChild(ogTitle);
+        }
+        if (ogTitle.content !== title) ogTitle.content = title;
+      }
+      if (description) {
+        ogDesc = document.querySelector('meta[property="og:description"]');
+        if (!ogDesc) {
+          ogDesc = document.createElement('meta');
+          ogDesc.setAttribute('property', 'og:description');
+          document.head.appendChild(ogDesc);
+        }
+        if (ogDesc.content !== description) ogDesc.content = description;
+      }
+    }
+
+    return () => {
+      if (removeOnUnmount) {
+        if (document.title === title) document.title = prevTitle;
+        if (description && metaDesc && (createdDesc || removeOnUnmount)) {
+          metaDesc.parentNode?.removeChild(metaDesc);
+        }
+        if (openGraph) {
+          if (ogTitle && removeOnUnmount) ogTitle.parentNode?.removeChild(ogTitle);
+          if (ogDesc && removeOnUnmount) ogDesc.parentNode?.removeChild(ogDesc);
+        }
+      }
+    };
+  }, [title, description, openGraph, removeOnUnmount]);
+}
+
+/* -------------------------------------------------------------------------- */
+/* Public Props                                                               */
+/* -------------------------------------------------------------------------- */
 export interface PageProps extends WithBaseProps {
-  /** Current route/path for this page */
   route?: string;
-  /** Page layout variant */
   variant?: 'default' | 'centered' | 'narrow' | 'wide' | 'fullwidth';
-  /** Padding around page content */
   padding?: 'none' | 'small' | 'medium' | 'large';
-  /** Background variant */
   background?: 'default' | 'surface' | 'alternate';
-  /** Maximum width for content */
   maxWidth?: 'small' | 'medium' | 'large' | 'extra-large' | 'none';
-  /** Print configuration for this page */
   printConfig?: Partial<PrintConfigSchema>;
-  /** PageTemplate model instance */
   template?: PageTemplateSchema;
-  /** Page title */
   title?: string;
-  /** Page description for SEO */
   description?: string;
-  /** Page name/heading */
   name?: string;
-  /** Page slug for URL */
   slug?: string;
+  children?: React.ReactNode;
 }
 
-/**
- * PageWrapper - Internal component handling print mode detection and page infrastructure
- */
-interface PageWrapperProps extends PageProps {
-  children: React.ReactNode;
+/* -------------------------------------------------------------------------- */
+/* Internal PageView                                                          */
+/* -------------------------------------------------------------------------- */
+interface PageViewProps extends PageProps {
+  renderView: () => React.ReactNode;
+  renderPrintView: () => React.ReactNode;
 }
 
-const PageWrapper: React.FC<PageWrapperProps> = (props) => {
-  const {
-    children,
-    route: routeProp,
-    variant = 'default',
-    padding = 'medium',
-    background = 'default',
-    maxWidth = 'large',
-    printConfig: printConfigProp,
-    template,
-    title: titleProp,
-    description: descriptionProp,
-    name: nameProp,
-    slug: slugProp,
-    ...restProps
-  } = props;
-
-  // Use base props hook to handle common properties
-  const { styleProps, htmlProps } = useBaseProps(restProps);
-
-  // Note: QwickApp context is available if needed for future enhancements
-
-  // Resolve values from template or props (props take precedence)
-  const resolvedValues = {
+export const PageView: React.FC<PageViewProps> = ({
+  renderView,
+  renderPrintView,
+  template,
+  route: routeProp,
+  title: titleProp,
+  description: descriptionProp,
+  name: nameProp,
+  slug: slugProp,
+  printConfig: printConfigProp,
+  variant = 'default',
+  padding = 'medium',
+  background = 'default',
+  maxWidth = 'large',
+  children,
+  ...rest
+}) => {
+  // Base props (single invocation early so we can merge styles/classNames)
+  const { htmlProps, styleProps } = useBaseProps(rest);
+
+  // State exposed via context
+  const [isLoading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Resolve template / prop derived metadata
+  const resolved = {
     route: routeProp ?? (template?.slug ? `/${template.slug}` : undefined),
     title: titleProp ?? template?.title ?? template?.name,
     description: descriptionProp ?? template?.description,
     name: nameProp ?? template?.name,
     slug: slugProp ?? template?.slug,
-    printConfig: { ...template?.printConfig, ...printConfigProp },
+    printConfig: { ...template?.printConfig, ...printConfigProp }
   };
 
-  // Page state management
-  const [isLoading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  // Update head metadata
+  usePageMeta(resolved.title, resolved.description);
 
-  // Initialize print mode with page configuration  
-  const { isPrintMode, printConfig, onViewLoading, onViewReady, triggerPrint: triggerPrintBase } = usePrintMode();
-  // Create page-specific trigger that applies page config
-  const triggerPrint = useCallback((config?: Partial<PrintConfigSchema>) => {
-    const mergedConfig = { ...resolvedValues.printConfig, ...config };
-    triggerPrintBase(mergedConfig);
-  }, [triggerPrintBase, resolvedValues.printConfig]);
+  // Print integration
+  const {
+    isPrintMode,
+    printConfig,
+    onViewLoading,
+    onViewReady,
+    triggerPrint: triggerPrintBase
+  } = usePrintMode();
+
+  const triggerPrint = useCallback(
+    (cfg?: Partial<PrintConfigSchema>) =>
+      triggerPrintBase({ ...resolved.printConfig, ...cfg }),
+    [triggerPrintBase, resolved.printConfig]
+  );
 
-  // Auto-detect current route if available
-  const location = useSafeLocation();
-  const actualRoute = resolvedValues.route || location?.pathname || '';
+  // Sync print readiness with loading state
+  useLayoutEffect(() => {
+    if (!isPrintMode) return;
+    if (isLoading) onViewLoading();
+    else onViewReady();
+  }, [isPrintMode, isLoading, onViewLoading, onViewReady]);
 
-  // Handle SEO and document head updates
+  // Inject dynamic print sizing styles (header/footer heights & background)
   useEffect(() => {
-    if (resolvedValues.title) {
-      document.title = resolvedValues.title;
+    if (!isPrintMode) return;
+    const styleId = 'qwickapps-print-page-setup';
+    const cfg = printConfig;
+    const size = (cfg as any).pageSize || 'auto';
+    const bg = cfg.printBackground || 'transparent';
+    const bgFirst = cfg.printBackgroundFirstPage || bg;
+
+    const hdrEl = document.querySelector('.page-print-header:not(.page-print-header-first-page)') as HTMLElement | null;
+    const ftrEl = document.querySelector('.page-print-footer:not(.page-print-footer-first-page)') as HTMLElement | null;
+    const hdr = hdrEl?.getBoundingClientRect ? Math.ceil(hdrEl.getBoundingClientRect().height) : 0;
+    const ftr = ftrEl?.getBoundingClientRect ? Math.ceil(ftrEl.getBoundingClientRect().height) : 0;
+    const headerH = hdr ? `${hdr}px` : toCssLength(cfg.printHeaderHeight || 0);
+    const footerH = ftr ? `${ftr}px` : toCssLength(cfg.printFooterHeight || 0);
+
+    const setCss = (h: string, f: string) =>
+      `@media print{@page{size:${size};margin:0;} .page-print-mode{--print-header-height:${h};--print-footer-height:${f};--print-background:${bg};--print-background-first-page:${bgFirst};}}`;
+
+    let el = document.getElementById(styleId) as HTMLStyleElement | null;
+    if (!el) {
+      el = document.createElement('style');
+      el.id = styleId;
+      document.head.appendChild(el);
     }
-    // Update meta description
-    if (resolvedValues.description) {
-      let metaDescription = document.querySelector('meta[name="description"]');
-      if (!metaDescription) {
-        metaDescription = document.createElement('meta');
-        metaDescription.setAttribute('name', 'description');
-        document.head.appendChild(metaDescription);
-      }
-      metaDescription.setAttribute('content', resolvedValues.description);
+    el.textContent = setCss(headerH, footerH);
+
+    // Observe late size changes (images/fonts) while in print mode
+    let ro: ResizeObserver | null = null;
+    if (window.ResizeObserver) {
+      ro = new ResizeObserver(() => {
+        const hdrNow = hdrEl?.getBoundingClientRect ? Math.ceil(hdrEl.getBoundingClientRect().height) : 0;
+        const ftrNow = ftrEl?.getBoundingClientRect ? Math.ceil(ftrEl.getBoundingClientRect().height) : 0;
+        const finalCss = setCss(
+          hdrNow ? `${hdrNow}px` : headerH,
+          ftrNow ? `${ftrNow}px` : footerH
+        );
+        if (el && el.textContent !== finalCss) el.textContent = finalCss;
+      });
+      if (hdrEl) ro.observe(hdrEl);
+      if (ftrEl) ro.observe(ftrEl);
     }
-  }, [resolvedValues.title, resolvedValues.description]);
 
-  // Signal view state changes - let reducer handle valid transitions
-  useLayoutEffect(() => {
-    if (isPrintMode && isLoading) {
-      onViewLoading();
-    } else if (isPrintMode && !isLoading) {
-      onViewReady();
-    }
-  }, [isPrintMode, isLoading, onViewLoading, onViewReady]);
+    const cleanup = () => {
+      const s = document.getElementById(styleId);
+      if (s?.parentNode) s.parentNode.removeChild(s);
+      ro?.disconnect();
+    };
 
-  // Memoized context value
+    window.addEventListener('afterprint', cleanup, { once: true });
+    return () => {
+      window.removeEventListener('afterprint', cleanup);
+      cleanup();
+    };
+  }, [isPrintMode, printConfig]);
+
+  // Route (fallback to current location)
+  const location = useSafeLocation();
+  const actualRoute = resolved.route || location?.pathname || '';
+
+  // Context value
   const contextValue = useMemo<PageContextValue>(() => ({
     route: actualRoute,
     isPrintMode,
@@ -159,128 +287,45 @@ const PageWrapper: React.FC<PageWrapperProps> = (props) => {
     setLoading,
     setError,
     isLoading,
-    error,
+    error
   }), [actualRoute, isPrintMode, printConfig, triggerPrint, isLoading, error]);
 
-  // Inject dynamic @page margins during print to reserve header/footer space on every page
-  useEffect(() => {
-    const styleId = 'qwickapps-print-page-setup';
-
-    const applyPrintPageSetup = () => {
-      const configuredHeader = printConfig.printHeaderHeight || '0';
-      const configuredFooter = printConfig.printFooterHeight || '0';
-      const size = (printConfig as any).pageSize || 'auto';
-      const bg = printConfig.printBackground || 'transparent';
-      const bgFirst = printConfig.printBackgroundFirstPage || bg;
-
-      // Measure actual rendered heights (fallback to configured)
-      const getPx = (v: string | number) => typeof v === 'number' ? `${v}px` : (String(v).match(/(px|mm|cm|in|pt|pc)$/) ? String(v) : `${v}px`);
-      const headerEl = document.querySelector('.page-print-header:not(.page-print-header-first-page)') as HTMLElement | null;
-      const footerEl = document.querySelector('.page-print-footer:not(.page-print-footer-first-page)') as HTMLElement | null;
-      const measuredHeaderPx = headerEl && headerEl.getBoundingClientRect ? Math.ceil(headerEl.getBoundingClientRect().height) : 0;
-      const measuredFooterPx = footerEl && footerEl.getBoundingClientRect ? Math.ceil(footerEl.getBoundingClientRect().height) : 0;
-      const headerH = measuredHeaderPx > 0 ? `${measuredHeaderPx}px` : getPx(configuredHeader);
-      const footerH = measuredFooterPx > 0 ? `${measuredFooterPx}px` : getPx(configuredFooter);
-
-      const css = `@media print{\n  @page{\n    size: ${String(size)};\n    margin: 0;\n  }\n  .page-print-mode{\n    --print-header-height: ${String(headerH)};\n    --print-footer-height: ${String(footerH)};\n    --print-background: ${String(bg)};\n    --print-background-first-page: ${String(bgFirst)};\n}\n}`;
-
-      let el = document.getElementById(styleId) as HTMLStyleElement | null;
-      if (!el) {
-        el = document.createElement('style');
-        el.id = styleId;
-        document.head.appendChild(el);
-      }
-      el.textContent = css;
-
-      // Re-measure after layout settles once and update
-      setTimeout(() => {
-        const reHeaderEl = document.querySelector('.page-print-header:not(.page-print-header-first-page)') as HTMLElement | null;
-        const reFooterEl = document.querySelector('.page-print-footer:not(.page-print-footer-first-page)') as HTMLElement | null;
-        const reHeaderPx = reHeaderEl?.getBoundingClientRect ? Math.ceil(reHeaderEl.getBoundingClientRect().height) : 0;
-        const reFooterPx = reFooterEl?.getBoundingClientRect ? Math.ceil(reFooterEl.getBoundingClientRect().height) : 0;
-        if (reHeaderPx || reFooterPx) {
-          const finalHeader = reHeaderPx ? `${reHeaderPx}px` : headerH;
-          const finalFooter = reFooterPx ? `${reFooterPx}px` : footerH;
-          const finalCss = `@media print{\n  @page{\n    size: ${String(size)};\n    margin: 0;\n  }\n  .page-print-mode{\n    --print-header-height: ${String(finalHeader)};\n    --print-footer-height: ${String(finalFooter)};\n    --print-background: ${String(bg)};\n    --print-background-first-page: ${String(bgFirst)};\n  }\n}`;
-          let styleEl = document.getElementById(styleId) as HTMLStyleElement | null;
-          if (!styleEl) {
-            styleEl = document.createElement('style');
-            styleEl.id = styleId;
-            document.head.appendChild(styleEl);
-          }
-          styleEl.textContent = finalCss;
-        }
-      }, 60);
-    };
-
-    const removePrintPageSetup = () => {
-      const el = document.getElementById(styleId);
-      if (el && el.parentNode) el.parentNode.removeChild(el);
-    };
-
-    if (isPrintMode) {
-      applyPrintPageSetup();
-      // Cleanup after the print dialog closes
-      const onAfterPrint = () => removePrintPageSetup();
-      window.addEventListener('afterprint', onAfterPrint);
-      return () => {
-        window.removeEventListener('afterprint', onAfterPrint);
-        removePrintPageSetup();
-      };
-    }
-
-    // If leaving print mode, ensure cleanup
-    removePrintPageSetup();
-  }, [isPrintMode, printConfig.printHeaderHeight, printConfig.printFooterHeight, (printConfig as any).pageSize, printConfig.printBackground, printConfig.printBackgroundFirstPage]);
-
-  // Calculate CSS variables for print configuration
-
-  // Generate class names based on configuration
-  const pageClasses = [
+  const classes = [
     'page',
     `page-variant-${variant}`,
     `page-padding-${padding}`,
     `page-background-${background}`,
     `page-max-width-${maxWidth}`,
-    // Print mode classes
-    isPrintMode ? 'page-print-mode' : '',
-    // Print margin variants
-    isPrintMode && printConfig.pageMargins === '0mm' ? 'page-print-borderless' : '',
-    isPrintMode && printConfig.pageMargins === '6mm' ? 'page-print-compact' : '',
-    isPrintMode && printConfig.pageMargins === '20mm' ? 'page-print-large' : '',
-    isPrintMode && printConfig.pageMargins === '25mm' ? 'page-print-formal' : '',
-    // Background class when custom background is specified
-    isPrintMode && (printConfig.printBackground || printConfig.printBackgroundFirstPage) ? 'has-background' : '',
-    // User classes
-    styleProps.className,
+    isPrintMode && 'page-print-mode',
+    isPrintMode && printConfig.pageMargins === '0mm' && 'page-print-borderless',
+    isPrintMode && printConfig.pageMargins === '6mm' && 'page-print-compact',
+    isPrintMode && printConfig.pageMargins === '20mm' && 'page-print-large',
+    isPrintMode && printConfig.pageMargins === '25mm' && 'page-print-formal',
+    isPrintMode && (printConfig.printBackground || printConfig.printBackgroundFirstPage) && 'has-background',
+    styleProps.className
   ].filter(Boolean).join(' ');
 
+  // Resolve mode-specific render output (avoid falsey fallback for '')
+  const rendered = (isPrintMode ? renderPrintView : renderView)();
+  const mainContent = rendered != null ? rendered : children;
+
   return (
     <PageContext.Provider value={contextValue}>
-      <div className={pageClasses} {...htmlProps}>
-        {/* Custom print header - regular pages */}
+      <Box className={classes} sx={styleProps.sx} style={styleProps.style} {...htmlProps}>
         {isPrintMode && printConfig.printHeader && (
           <div className="page-print-header">
-            {typeof printConfig.printHeader === 'string' ? (
-              <SafeSpan html={t`${printConfig.printHeader}` as string} />
-            ) : (
-              printConfig.printHeader
-            )}
+            {typeof printConfig.printHeader === 'string'
+              ? <SafeSpan html={t`${printConfig.printHeader}` as string} />
+              : printConfig.printHeader}
           </div>
         )}
-
-        {/* Custom print header - first page only (rendered as a separate element for app control) */}
         {isPrintMode && printConfig.printHeaderFirstPage && (
-          <div className="page-print-header page-print-header-first-page">
-            {typeof printConfig.printHeaderFirstPage === 'string' ? (
-              <SafeSpan html={t`${printConfig.printHeaderFirstPage}` as string} />
-            ) : (
-              printConfig.printHeaderFirstPage
-            )}
-          </div>
+            <div className="page-print-header page-print-header-first-page">
+              {typeof printConfig.printHeaderFirstPage === 'string'
+                ? <SafeSpan html={t`${printConfig.printHeaderFirstPage}` as string} />
+                : printConfig.printHeaderFirstPage}
+            </div>
         )}
-
-        {/* Default print header - only if no custom header provided */}
         {isPrintMode && !printConfig.printHeader && printConfig.printTitle && (
           <div className="page-print-header">
             <h1>{printConfig.printTitle}</h1>
@@ -291,102 +336,49 @@ const PageWrapper: React.FC<PageWrapperProps> = (props) => {
             )}
           </div>
         )}
-
-        {/* Page name as heading (if provided and different from title) */}
-        {resolvedValues.name && resolvedValues.name !== resolvedValues.title && (
+        {resolved.name && resolved.name !== resolved.title && (
           <div className="page-heading">
-            <h1>{resolvedValues.name}</h1>
+            <h1>{resolved.name}</h1>
           </div>
         )}
-
-        {/* Page Content */}
         <div className="page-content">
-          {children}
+          {mainContent}
         </div>
-
-        {/* Custom print footer - regular pages */}
         {isPrintMode && printConfig.printFooter && (
           <div className="page-print-footer">
-            {typeof printConfig.printFooter === 'string' ? (
-              <SafeSpan html={t`${printConfig.printFooter}` as string} />
-            ) : (
-              printConfig.printFooter
-            )}
+            {typeof printConfig.printFooter === 'string'
+              ? <SafeSpan html={t`${printConfig.printFooter}` as string} />
+              : printConfig.printFooter}
           </div>
         )}
-
-        {/* Custom print footer - first page only (rendered as a separate element for app control) */}
         {isPrintMode && printConfig.printFooterFirstPage && (
           <div className="page-print-footer page-print-footer-first-page">
-            {typeof printConfig.printFooterFirstPage === 'string' ? (
-              <SafeSpan html={t`${printConfig.printFooterFirstPage}` as string} />
-            ) : (
-              printConfig.printFooterFirstPage
-            )}
+            {typeof printConfig.printFooterFirstPage === 'string'
+              ? <SafeSpan html={t`${printConfig.printFooterFirstPage}` as string} />
+              : printConfig.printFooterFirstPage}
           </div>
         )}
-      </div>
+      </Box>
     </PageContext.Provider>
   );
 };
 
-/**
- * Page - Functional component that controls print/normal view routing
- */
-interface PageWithViewsProps extends PageProps {
-  /** Function to render normal view */
-  renderView: () => React.ReactNode;
-  /** Function to render print view */
-  renderPrintView: () => React.ReactNode;
-}
-
-const Page: React.FC<PageWithViewsProps> = (props) => {
-  const { renderView, renderPrintView, ...pageProps } = props;
+/* -------------------------------------------------------------------------- */
+/* Page Class                                                                 */
+/* -------------------------------------------------------------------------- */
+export class Page<P extends PageProps = PageProps, S = {}> extends React.Component<P, S> {
+  protected getPageProps(): Partial<PageProps> { return {}; }
+  protected renderView(): React.ReactNode { return this.props.children; }
+  protected renderPrintView(): React.ReactNode { return this.renderView(); }
 
-  return (
-    <PageWrapper {...pageProps}>
-      <PageController renderView={renderView} renderPrintView={renderPrintView} />
-    </PageWrapper>
-  );
-};
-
-// Controller component that uses context to get print mode state
-const PageController: React.FC<{
-  renderView: () => React.ReactNode;
-  renderPrintView: () => React.ReactNode;
-}> = ({ renderView, renderPrintView }) => {
-  const { isPrintMode } = usePageContext();
-  return <>{isPrintMode ? renderPrintView() : renderView()}</>;
-};
-
-/**
- * PageComponent - Base class for pages that provide view functions
- */
-export abstract class PageComponent<P = {}, S = {}> extends React.Component<P, S> {
-  /**
-   * Override this method to provide page configuration
-   */
-  abstract getPageProps(): PageProps;
-
-  /**
-   * Override this method to provide the normal view content
-   */
-  abstract renderView(): React.ReactNode;
-
-  /**
-   * Override this method to provide the print view content
-   */
-  abstract renderPrintView(): React.ReactNode;
-
-  /**
-   * Render method - uses functional Page as controller
-   */
   render() {
-    const pageProps = this.getPageProps();
-
+    const merged: PageProps = {
+      ...(this.props as PageProps),
+      ...(this.getPageProps() as PageProps)
+    };
     return (
-      <Page
-        {...pageProps}
+      <PageView
+        {...merged}
         renderView={() => this.renderView()}
         renderPrintView={() => this.renderPrintView()}
       />

package/src/components/pages/index.ts

@@ -3,9 +3,8 @@
  * 
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
-export { PageComponent, usePageContext } from './Page';
 export { default as FormPage } from './FormPage';
-export { default as Page } from './Page';
+export { default as Page, usePageContext } from './Page';
 
 export type { FormPageProps } from './FormPage';
-export type { PageProps, PageContextValue } from './Page';
+export type { PageContextValue, PageProps } from './Page';