diff --git a/frontends/nextjs/src/app/layout.tsx b/frontends/nextjs/src/app/layout.tsx index 0246b7d68..a274d536c 100644 --- a/frontends/nextjs/src/app/layout.tsx +++ b/frontends/nextjs/src/app/layout.tsx @@ -2,8 +2,25 @@ import '@/main.scss' import type { Metadata, Viewport } from 'next' +import { PackageStyleLoader } from '@/components/PackageStyleLoader' import { Providers } from './providers' +// List of packages to load styles from +const PACKAGES_WITH_STYLES = [ + 'shared', + 'ui_home', + 'ui_header', + 'ui_footer', + 'ui_level2', + 'ui_level3', + 'ui_level4', + 'ui_level5', + 'ui_level6', + 'admin_panel', + 'code_editor', + 'css_designer', +] + export const metadata: Metadata = { title: { default: 'MetaBuilder - Data-Driven Application Platform', @@ -41,6 +58,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) /> + {children} diff --git a/frontends/nextjs/src/components/PackageStyleLoader.tsx b/frontends/nextjs/src/components/PackageStyleLoader.tsx new file mode 100644 index 000000000..f8e8e6b08 --- /dev/null +++ b/frontends/nextjs/src/components/PackageStyleLoader.tsx @@ -0,0 +1,45 @@ +'use client' + +/** + * Package Style Loader + * + * Dynamically loads and injects V2 schema styles from packages + */ + +import { useEffect } from 'react' +import { loadAndInjectStyles } from '@/lib/compiler' + +interface PackageStyleLoaderProps { + packages: string[] +} + +export function PackageStyleLoader({ packages }: PackageStyleLoaderProps) { + useEffect(() => { + async function loadStyles() { + console.log(`📦 Loading styles for ${packages.length} packages...`) + + const results = await Promise.all( + packages.map(async (packageId) => { + try { + const css = await loadAndInjectStyles(packageId) + console.log(`✓ ${packageId} (${css.length} bytes)`) + return { packageId, success: true, size: css.length } + } catch (error) { + console.warn(`✗ ${packageId}:`, error) + return { packageId, success: false, size: 0 } + } + }) + ) + + const successful = results.filter(r => r.success) + const totalSize = successful.reduce((sum, r) => sum + r.size, 0) + console.log(`✅ ${successful.length}/${packages.length} packages loaded (${(totalSize / 1024).toFixed(1)}KB)`) + } + + if (packages.length > 0) { + loadStyles() + } + }, [packages]) + + return null +}