@djangocfg/layouts 1.2.55 → 1.2.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "1.2.55",
+  "version": "1.2.57",
   "description": "Layout system and components for Unrealon applications",
   "author": {
     "name": "DjangoCFG",
@@ -63,9 +63,9 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^1.2.55",
-    "@djangocfg/og-image": "^1.2.55",
-    "@djangocfg/ui": "^1.2.55",
+    "@djangocfg/api": "^1.2.57",
+    "@djangocfg/og-image": "^1.2.57",
+    "@djangocfg/ui": "^1.2.57",
     "@hookform/resolvers": "^5.2.0",
     "consola": "^3.4.2",
     "lucide-react": "^0.468.0",
@@ -86,7 +86,7 @@
     "vidstack": "0.6.15"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^1.2.55",
+    "@djangocfg/typescript-config": "^1.2.57",
     "@types/node": "^24.7.2",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.1",

package/src/layouts/AppLayout/AppLayout.tsx

@@ -38,6 +38,8 @@ import { determineLayoutMode, getRedirectUrl } from './utils';
 import { useAuth } from '../../auth';
 import type { AppLayoutConfig } from './types';
 import type { ValidationErrorConfig, CORSErrorConfig, NetworkErrorConfig } from '../../validation';
+import type { PageWithConfig } from '../../types/pageConfig';
+import { determinePageConfig } from '../../types/pageConfig';
 
 // Dynamic import for AdminLayout to prevent SSR hydration issues
 const AdminLayout = dynamic(
@@ -48,6 +50,16 @@ const AdminLayout = dynamic(
 export interface AppLayoutProps {
   children: ReactNode;
   config: AppLayoutConfig;
+  /**
+   * Next.js page component (for reading pageConfig)
+   * @example component={Component}
+   */
+  component?: PageWithConfig;
+  /**
+   * Next.js page props (for reading dynamic pageConfig from SSR)
+   * @example pageProps={pageProps}
+   */
+  pageProps?: Record<string, any>;
   /**
    * Disable layout rendering (Navigation, Sidebar, Footer)
    * Only providers and SEO remain active
@@ -264,7 +276,7 @@ function LayoutRouter({
  * </AppLayout>
  * ```
  */
-export function AppLayout({ children, config, disableLayout = false, forceLayout, fontFamily, showPackageVersions, validation, cors, network }: AppLayoutProps) {
+export function AppLayout({ children, config, component, pageProps, disableLayout = false, forceLayout, fontFamily, showPackageVersions, validation, cors, network }: AppLayoutProps) {
   const router = useRouter();
 
   // Check if ErrorBoundary is enabled (default: true)
@@ -272,18 +284,28 @@ export function AppLayout({ children, config, disableLayout = false, forceLayout
   const supportEmail = config.errors?.supportEmail;
   const onError = config.errors?.onError;
 
+  // Determine final pageConfig (merges static + dynamic from SSR)
+  const finalPageConfig = component && pageProps
+    ? determinePageConfig(
+        component,
+        pageProps,
+        config.app.name,
+        config.app.description
+      )
+    : {
+        title: config.app.name,
+        description: config.app.description,
+        ogImage: {
+          title: config.app.name,
+          subtitle: config.app.description,
+        },
+      };
+
   const appContent = (
     <AppContextProvider config={config} showPackageVersions={showPackageVersions}>
       {/* SEO Meta Tags */}
       <Seo
-        pageConfig={{
-          title: config.app.name,
-          description: config.app.description,
-          ogImage: {
-            title: config.app.name,
-            subtitle: config.app.description,
-          },
-        }}
+        pageConfig={finalPageConfig}
         icons={config.app.icons}
         siteUrl={config.app.siteUrl}
       />

package/src/layouts/AppLayout/components/PackageVersions/packageVersions.config.ts

@@ -16,36 +16,36 @@ export interface PackageInfo {
 /**
  * Package versions registry
  * Auto-synced from package.json files
- * Last updated: 2025-11-22T08:28:22.393Z
+ * Last updated: 2025-11-23T06:13:14.600Z
  */
 const PACKAGE_VERSIONS: PackageInfo[] = [
   {
     "name": "@djangocfg/ui",
-    "version": "1.2.55"
+    "version": "1.2.57"
   },
   {
     "name": "@djangocfg/api",
-    "version": "1.2.55"
+    "version": "1.2.57"
   },
   {
     "name": "@djangocfg/layouts",
-    "version": "1.2.55"
+    "version": "1.2.57"
   },
   {
     "name": "@djangocfg/markdown",
-    "version": "1.2.55"
+    "version": "1.2.57"
   },
   {
     "name": "@djangocfg/og-image",
-    "version": "1.2.55"
+    "version": "1.2.57"
   },
   {
     "name": "@djangocfg/eslint-config",
-    "version": "1.2.55"
+    "version": "1.2.57"
   },
   {
     "name": "@djangocfg/typescript-config",
-    "version": "1.2.55"
+    "version": "1.2.57"
   }
 ];
 

package/src/layouts/UILayout/config/ai-export.config.ts

@@ -30,6 +30,17 @@ export function generateAIContext(): string {
   let output = `# ${projectName} v${version}\n\n`;
   output += `${description}\n\n`;
 
+  // Quick Reference - Available Components
+  output += `## 📋 Quick Reference - Available Components\n\n`;
+  const categories = getAllCategories();
+  categories.forEach(category => {
+    const comps = COMPONENTS_CONFIG.filter(comp => comp.category === category);
+    const componentNames = comps.map(c => c.name).join(', ');
+    output += `### ${category.charAt(0).toUpperCase() + category.slice(1)} (${comps.length})\n`;
+    output += `${componentNames}\n\n`;
+  });
+  output += `---\n\n`;
+
   // Tailwind 4 Guide
   output += `## Tailwind CSS v${TAILWIND_GUIDE.version} Guidelines\n\n`;
 
@@ -59,8 +70,6 @@ export function generateAIContext(): string {
   });
 
   // Components by Category
-  const categories = getAllCategories();
-
   categories.forEach(category => {
     const comps = COMPONENTS_CONFIG.filter(comp => comp.category === category);
 

package/src/layouts/UILayout/index.ts

@@ -125,10 +125,6 @@ export type {
 
 export {
   // AI Export utilities
-  generateAIContext as generateAIContextNew,
-  generateTailwindSection,
-  generateComponentsSection,
-  generateComponentDoc,
   formatComponentAsMarkdown,
   formatComponentsAsMarkdownList,
   formatImports,

package/src/layouts/UILayout/utils/ai-export/index.ts

@@ -2,5 +2,4 @@
  * AI Export Utilities
  */
 
-export * from './generators';
 export * from './formatters';

package/src/layouts/UILayout/utils/ai-export/generators.ts

@@ -1,155 +0,0 @@
-/**
- * AI Export Generators
- * Functions for generating AI-friendly documentation
- */
-
-import type { ComponentConfig } from '../../types';
-import type { TailwindGuide } from '../../config/tailwind.config';
-
-export interface UILibraryConfig {
-  projectName: string;
-  version: string;
-  description: string;
-  totalComponents: number;
-}
-
-/**
- * Generate complete AI context from components and config
- */
-export function generateAIContext(
-  components: ComponentConfig[],
-  tailwindGuide: TailwindGuide,
-  config: UILibraryConfig
-): string {
-  const { projectName, version, description } = config;
-
-  let output = `# ${projectName} v${version}\n\n`;
-  output += `${description}\n\n`;
-
-  // Quick Reference Section - ADDED FOR AI
-  output += generateQuickReference(components);
-
-  // Tailwind Guide Section
-  output += generateTailwindSection(tailwindGuide);
-
-  // Components by Category
-  output += generateComponentsSection(components);
-
-  return output;
-}
-
-/**
- * Generate Quick Reference section with all component names
- * This helps AI understand what's available without reading the entire document
- */
-export function generateQuickReference(components: ComponentConfig[]): string {
-  let output = `## 📋 Quick Reference - Available Components\n\n`;
-
-  // Group components by category
-  const byCategory = groupByCategory(components);
-
-  // Generate compact list for each category
-  Object.entries(byCategory).forEach(([category, comps]) => {
-    const componentNames = comps.map((c) => c.name).join(', ');
-    output += `### ${formatCategoryName(category)} (${comps.length})\n`;
-    output += `${componentNames}\n\n`;
-  });
-
-  output += `---\n\n`;
-
-  return output;
-}
-
-/**
- * Generate Tailwind CSS section
- */
-export function generateTailwindSection(guide: TailwindGuide): string {
-  let output = `## Tailwind CSS v${guide.version} Guidelines\n\n`;
-
-  output += `### Key Changes\n`;
-  guide.keyChanges.forEach((change) => {
-    output += `- ${change}\n`;
-  });
-  output += `\n`;
-
-  output += `### Best Practices\n`;
-  guide.bestPractices.forEach((practice) => {
-    output += `- ${practice}\n`;
-  });
-  output += `\n`;
-
-  output += `### Migration Steps\n`;
-  guide.migrationSteps.forEach((step, index) => {
-    output += `${index + 1}. ${step}\n`;
-  });
-  output += `\n`;
-
-  output += `### Examples\n\n`;
-  guide.examples.forEach((example) => {
-    output += `#### ${example.title}\n`;
-    output += `${example.description}\n\n`;
-    output += `\`\`\`css\n${example.code}\n\`\`\`\n\n`;
-  });
-
-  return output;
-}
-
-/**
- * Generate components section grouped by category
- */
-export function generateComponentsSection(components: ComponentConfig[]): string {
-  let output = '';
-
-  // Group components by category
-  const byCategory = groupByCategory(components);
-
-  // Generate section for each category
-  Object.entries(byCategory).forEach(([category, comps]) => {
-    output += `## ${formatCategoryName(category)} (${comps.length})\n\n`;
-
-    comps.forEach((comp) => {
-      output += generateComponentDoc(comp);
-    });
-  });
-
-  return output;
-}
-
-/**
- * Generate documentation for a single component
- */
-export function generateComponentDoc(component: ComponentConfig): string {
-  let output = `### ${component.name}\n`;
-  output += `${component.description}\n\n`;
-  output += `\`\`\`tsx\n`;
-  output += `${component.importPath}\n\n`;
-  output += `${component.example}\n`;
-  output += `\`\`\`\n\n`;
-
-  return output;
-}
-
-/**
- * Group components by category
- */
-function groupByCategory(
-  components: ComponentConfig[]
-): Record<string, ComponentConfig[]> {
-  return components.reduce(
-    (acc, comp) => {
-      if (!acc[comp.category]) {
-        acc[comp.category] = [];
-      }
-      acc[comp.category].push(comp);
-      return acc;
-    },
-    {} as Record<string, ComponentConfig[]>
-  );
-}
-
-/**
- * Format category name for display
- */
-function formatCategoryName(category: string): string {
-  return category.charAt(0).toUpperCase() + category.slice(1);
-}