metaowl 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -5,6 +5,34 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.6.0] - 2026-04-24
+
+### Added
+
+- **Nested layouts support** — layouts can now have parent-child relationships using `setParentLayout()`, `getParentLayout()`, and `getLayoutChain()`. The `createNestedLayoutWrapper()` function creates wrapper components for multi-level nesting. The `defineNestedLayout()` decorator simplifies declaring nested layouts on components.
+- **Image optimization module** — new `modules/image.ts` with `generateSrcSet()`, `calculateAspectRatio()`, `generateSizesAttribute()`, `createResponsiveImage()`, `prefetchImage()`, `prefetchImages()`, `isImageLoaded()`, `getImageDimensions()`, `observeImageVisibility()`, `swapImageSource()`, and `generateDominantColorPlaceholder()`.
+- **Fonts optimization module** — new `modules/fonts.ts` with `defineFontFace()`, `loadFont()`, `loadFontFamily()`, `isFontLoaded()`, `preloadFont()`, `removeFontPreload()`, `createFontFaceRule()`, `injectFontFaceRules()`, `measureTextWidth()`, `estimateFontMetrics()`, `adjustFontForFout()`, and `getFontLoadStatus()`.
+
+### Changed
+
+- **TypeScript migration completed** — the framework source, Vite integration, CLI entrypoints,
+  and test suite now use TypeScript as the primary source of truth while preserving the existing
+  public API and runtime behavior.
+- **Runtime build output separated from source** — publishable JavaScript is now emitted to
+  `build/runtime`, and package `main`, `exports`, and `bin` entries resolve from that generated
+  runtime output.
+
+### Removed
+
+- **Redundant source JavaScript files** — legacy hand-maintained `.js` source files in `modules/`,
+  `bin/`, `vite/`, and the root entrypoint were removed in favor of the TypeScript sources and the
+  generated runtime build.
+
+### Added
+
+- **Release build workflow** — added dedicated runtime build and release helper scripts for
+  clean runtime generation, release checks, and package dry-run validation.
+
 ## [0.5.0] - 2026-04-24
 
 ### Changed

package/README.md

@@ -17,7 +17,7 @@ metaowl is a complete solution for building OWL applications with everything you
 
 **Developer Experience:** Composables for common patterns (auth, localStorage, fetching), form handling with validation, error boundaries, and internationalization.
 
-**SEO & PWA:** Sitemap/robots.txt generation, structured data support, service worker integration, web app manifest, and push notifications.
+**SEO & PWA:** Sitemap/robots.txt generation, structured data support, image optimization with srcset generation, font optimization with preloading, service worker integration, web app manifest, and push notifications.
 
 **Testing & Quality:** Mock stores, router mocking, component testing utilities, plus bundled ESLint and PostCSS configs.
 
@@ -44,6 +44,8 @@ All powered by a batteries-included Vite plugin that handles the build pipeline,
 - [Auto-Import](#auto-import)
 - [Odoo JSON-RPC Service](#odoo-json-rpc-service)
 - [Composables / Hooks](#composables--hooks)
+- [Image Optimization](#image-optimization)
+- [Font Optimization](#font-optimization)
 - [CLI Reference](#cli-reference)
 - [API Reference](#api-reference)
   - [boot](#bootroutes)
@@ -61,6 +63,8 @@ All powered by a batteries-included Vite plugin that handles the build pipeline,
   - [Forms](#forms-api)
   - [OdooService](#odooservice-api)
   - [Composables](#composables-api)
+- [Image API](#image-api)
+- [Fonts API](#fonts-api)
 - [Vite Plugin](#vite-plugin)
   - [metaowlPlugin](#metaowlpluginoptions)
   - [metaowlConfig](#metaowlconfigoptions)
@@ -93,6 +97,8 @@ All powered by a batteries-included Vite plugin that handles the build pipeline,
 - **Composables** — reusable hooks for auth, localStorage, fetching, and more
 - **Testing Utilities** — mock store, router mocking, component mount helpers
 - **SEO Utils** — sitemap, robots.txt, JSON-LD, Open Graph, Twitter Cards
+- **Image Optimization** — responsive srcset generation, lazy loading, placeholder support, dominant color extraction
+- **Font Optimization** — FontFace creation, font preloading, @font-face CSS generation, FOUT handling
 - **PWA Support** — service worker, manifest generation, push notifications
 - **SSG generator** — statically pre-renders HTML pages with correct meta tags at build time
 - **Vite plugin** — handles `COMPONENTS` injection, XML template copying, CSS auto-import, chunk splitting, and env filtering
@@ -389,6 +395,37 @@ If no layout is specified, the `default` layout is used automatically.
 </templates>
 ```
 
+### Nested Layouts
+
+Layouts can be nested in a parent-child hierarchy. Use `setParentLayout()` to define relationships:
+
+```js
+import { setParentLayout, getLayoutChain } from 'metaowl'
+
+// Define layout hierarchy
+setParentLayout('inner', 'middle')
+setParentLayout('middle', 'outer')
+
+// Get the full chain for a layout
+const chain = getLayoutChain('inner')
+// ['inner', 'middle', 'outer']
+```
+
+Or use the `defineNestedLayout()` decorator:
+
+```js
+import { defineNestedLayout } from 'metaowl'
+
+export class AdminDashboard extends Component {
+  static template = 'AdminDashboard'
+  static layout = 'admin-dashboard'
+}
+
+defineNestedLayout('admin-dashboard', 'admin-base')(AdminDashboard)
+```
+
+When a page uses `admin-dashboard` layout, it's rendered with: `outer > middle > admin-dashboard > page`.
+
 ---
 
 ## Navigation Guards
@@ -901,6 +938,98 @@ class MyComponent extends Component {
 
 ---
 
+## Image Optimization
+
+Responsive image handling with srcset generation, lazy loading, and placeholder support:
+
+```js
+import { Image } from 'metaowl'
+
+// Generate srcset for responsive images
+const srcset = Image.generateSrcSet('https://example.com/image.jpg', [320, 640, 960, 1280])
+// "https://example.com/image.jpg?width=320&quality=80 320w, ..."
+
+// Create a fully configured responsive image object
+const responsive = Image.createResponsiveImage({
+  src: 'https://example.com/hero.jpg',
+  alt: 'Hero image',
+  widths: [640, 1024, 1920],
+  lazy: true,
+  placeholder: true
+})
+// Returns: { src, srcset, loading: 'lazy', decoding: 'async', placeholder, ... }
+```
+
+**Image utilities:**
+
+| Function | Description |
+|---|---|
+| `generateSrcSet(src, widths, options)` | Generates responsive srcset string |
+| `calculateAspectRatio(width, height)` | Computes aspect ratio as `W/H` |
+| `generateSizesAttribute(src, breakpoints)` | Generates sizes attribute with breakpoints |
+| `createResponsiveImage(options)` | Creates responsive image object |
+| `prefetchImage(src)` / `prefetchImages(sources)` | Prefetch images for faster loading |
+| `isImageLoaded(img)` | Check if image has finished loading |
+| `getImageDimensions(src)` | Get natural width/height of image |
+| `observeImageVisibility(img, callback)` | IntersectionObserver for lazy loading |
+| `swapImageSource(img, newSrc, newSrcset)` | Swap src/srcset atomically |
+| `generateDominantColorPlaceholder(src)` | Extract dominant color as placeholder |
+
+---
+
+## Font Optimization
+
+Font loading and management with preloading and FOUT (Flash of Unstyled Text) handling:
+
+```js
+import { Fonts } from 'metaowl'
+
+// Define and load a font
+const fontFace = await Fonts.loadFont({
+  family: 'Inter',
+  src: 'https://fonts.example.com/inter.woff2',
+  weight: 'normal',
+  display: 'swap'
+})
+
+// Preload font for critical text
+Fonts.preloadFont('Inter', 'https://fonts.example.com/inter.woff2')
+
+// Generate @font-face CSS rule
+const cssRule = Fonts.createFontFaceRule({
+  family: 'Inter',
+  src: 'https://fonts.example.com/inter.woff2',
+  weight: 'bold',
+  display: 'optional'
+})
+// @font-face { font-family: 'Inter'; src: url("..."); font-weight: bold; font-display: optional; }
+
+// Inject font faces into document
+Fonts.injectFontFaceRules({
+  family: 'Inter',
+  src: ['woff2', 'woff'].map(f => `https://fonts.example.com/${f}`),
+  weight: '400 700'
+})
+```
+
+**Font utilities:**
+
+| Function | Description |
+|---|---|
+| `defineFontFace(options)` | Creates a FontFace object |
+| `loadFont(options)` | Loads font and tracks it |
+| `loadFontFamily(family, variants)` | Load multiple variants |
+| `isFontLoaded(family, weight?)` | Check if font is loaded |
+| `preloadFont(family, src, options)` | Add preload link for font |
+| `removeFontPreload(family, weight?)` | Remove preload link |
+| `createFontFaceRule(options)` | Generate @font-face CSS |
+| `injectFontFaceRules(options)` | Inject @font-face rules |
+| `measureTextWidth(text, font, size)` | Measure rendered text width |
+| `adjustFontForFout(el, fallback, timeout)` | Handle FOUT gracefully |
+| `getFontLoadStatus()` | Get loaded fonts status |
+
+---
+
 ## CLI Reference
 
 metaowl ships four CLI commands that use its own bundled Vite, Prettier, and ESLint binaries — no need to install them separately in your project.
@@ -1119,11 +1248,24 @@ Functions for layout management.
 
 | Function | Description |
 |---|---|
-| `registerLayout(name, Component)` | Register a layout |
+| `registerLayout(name, Component, options?)` | Register a layout |
+| `unregisterLayout(name)` | Remove a layout |
 | `getLayout(name)` | Get layout component by name |
+| `hasLayout(name)` | Check if layout exists |
+| `getLayoutNames()` | Get all registered layout names |
 | `setDefaultLayout(name)` | Set default layout |
+| `getDefaultLayout()` | Get default layout name |
 | `resolveLayout(Component, path?)` | Resolve layout for component |
+| `setRouteLayout(routePath, layoutName)` | Set layout for a route |
+| `getRouteLayout(routePath)` | Get layout for a route |
+| `setParentLayout(layoutName, parentName)` | Set parent-child relationship |
+| `getParentLayout(layoutName)` | Get parent layout name |
+| `getLayoutChain(layoutName)` | Get full layout chain |
+| `createNestedLayoutWrapper(layouts, page, props)` | Create nested layout wrapper |
 | `subscribeToLayouts(callback)` | Listen to layout events |
+| `clearLayouts()` | Clear all layouts |
+| `defineLayout(name, options?)` | Decorator for layout |
+| `defineNestedLayout(name, parent, options?)` | Decorator for nested layout |
 
 **Component Layout Property:**
 
@@ -1458,6 +1600,117 @@ const { value, set, get, remove, clear } = useCache('user-prefs', {})
 
 ---
 
+### `Image API`
+
+Image optimization utilities.
+
+```ts
+import { Image } from 'metaowl'
+
+// Generate srcset for responsive images
+Image.generateSrcSet('https://example.com/image.jpg', [320, 640, 960])
+
+// Calculate aspect ratio
+Image.calculateAspectRatio(1920, 1080)  // "16/9"
+
+// Generate sizes attribute
+Image.generateSizesAttribute('https://example.com/image.jpg', {
+  '(min-width: 1024px)': 1000,
+  '(min-width: 768px)': 800
+})
+
+// Create responsive image object
+const responsive = Image.createResponsiveImage({
+  src: 'https://example.com/hero.jpg',
+  alt: 'Hero',
+  widths: [320, 640, 1024],
+  lazy: true,
+  placeholder: true
+})
+
+// Prefetch images
+await Image.prefetchImages(['/img1.jpg', '/img2.jpg'])
+
+// Check if loaded
+Image.isImageLoaded(imgElement)
+
+// Get dimensions
+const dims = await Image.getImageDimensions('https://example.com/image.jpg')
+
+// Observe visibility
+const observer = Image.observeImageVisibility(imgElement, (visible) => {
+  if (visible) loadHighResImage()
+})
+
+// Swap source
+Image.swapImageSource(imgElement, '/new-image.jpg', '/new-image-2x.jpg 2x')
+
+// Generate dominant color placeholder
+const placeholder = await Image.generateDominantColorPlaceholder(src)
+```
+
+---
+
+### `Fonts API`
+
+Font optimization utilities.
+
+```ts
+import { Fonts } from 'metaowl'
+
+// Define a font face
+const fontFace = Fonts.defineFontFace({
+  family: 'Inter',
+  src: 'https://fonts.example.com/inter.woff2',
+  weight: '400',
+  style: 'normal',
+  display: 'swap'
+})
+
+// Load and track a font
+await Fonts.loadFont({
+  family: 'Inter',
+  src: 'https://fonts.example.com/inter.woff2'
+})
+
+// Check if loaded
+Fonts.isFontLoaded('Inter')  // true
+
+// Preload a font
+Fonts.preloadFont('Inter', 'https://fonts.example.com/inter.woff2')
+
+// Remove preload link
+Fonts.removeFontPreload('Inter')
+
+// Generate @font-face CSS rule
+const rule = Fonts.createFontFaceRule({
+  family: 'Inter',
+  src: 'https://fonts.example.com/inter.woff2',
+  weight: 'bold'
+})
+
+// Inject @font-face rules into document
+Fonts.injectFontFaceRules({
+  family: 'Inter',
+  src: ['woff2', 'woff'].map(f => `https://fonts.example.com/${f}`),
+  weight: '400 700'
+})
+
+// Measure text width
+Fonts.measureTextWidth('Hello', 'Inter', 16)
+
+// Adjust for FOUT
+await Fonts.adjustFontForFout(element, 'sans-serif', 3000)
+
+// Get loaded font status
+Fonts.getFontLoadStatus()  // { 'Inter': true }
+
+// Clear all loaded fonts
+Fonts.clearLoadedFonts()
+```
+
+---
+
 ## Vite Plugin
 
 ### `metaowlPlugin(options)`

package/build/runtime/index.js

@@ -1,5 +1,5 @@
 import { mountApp, configureOwl } from './modules/app-mounter.js';
-import { buildLayouts, clearLayouts, createLayoutWrapper, defineLayout, discoverLayouts, getCurrentLayout, getDefaultLayout, getLayout, getLayoutNames, getRouteLayout, hasLayout, layout, mountWithLayout, registerLayout, resolveLayout, setDefaultLayout, setRouteLayout, subscribeToLayouts, unregisterLayout } from './modules/layouts.js';
+import { buildLayouts, clearLayouts, createLayoutWrapper, createNestedLayoutWrapper, defineLayout, defineNestedLayout, discoverLayouts, getCurrentLayout, getDefaultLayout, getLayout, getLayoutChain, getLayoutNames, getParentLayout, getRouteLayout, hasLayout, layout, mountWithLayout, registerLayout, resolveLayout, setDefaultLayout, setParentLayout, setRouteLayout, subscribeToLayouts, unregisterLayout } from './modules/layouts.js';
 import { afterEach, _setSpaNavigationCallback, back, beforeEach, cancelNavigation, forward, getCurrentRoute, getPreviousRoute, go, isNavigating, isSpaMode, navigate, navigateTo, processRoutes, push, replace, router, setSpaMode } from './modules/router.js';
 import { Link, registerLinkTemplate } from './modules/link.js';
 import { buildRoutes, createCatchAllRoute, createRedirectRoute, defineRoute, findRoute, generateUrl, isDynamicRoute, matchRoute, route, validateRouteParams } from './modules/file-router.js';
@@ -13,6 +13,8 @@ import { createCanonicalUrl, generateOpenGraph, generateRobotsTxt, generateSitem
 import { cache, checkCapabilities, generateManifest, getStorageInfo, isOnline, isStandalone, PWA, registerServiceWorker, requestPersistentStorage, showNotification, subscribeToConnectivity, subscribeToPush, sync, unregisterServiceWorker, unsubscribeFromPush } from './modules/pwa.js';
 import Cache from './modules/cache.js';
 import Fetch from './modules/fetch.js';
+import * as Fonts from './modules/fonts.js';
+import { ImageOptimizer } from './modules/image.js';
 import * as Meta from './modules/meta.js';
 import { Store, createPersistencePlugin, createStore } from './modules/store.js';
 let appRoutes = null;
@@ -127,7 +129,7 @@ export async function boot(routesOrModules = {}, layoutsOrModules = null, option
     await mountApp(resolvedRoute);
 }
 export { Fetch, Cache, configureOwl, Meta, buildRoutes, Store, createPersistencePlugin, createStore };
-export { registerLayout, unregisterLayout, getLayout, hasLayout, getLayoutNames, setDefaultLayout, getDefaultLayout, resolveLayout, setRouteLayout, getRouteLayout, createLayoutWrapper, mountWithLayout, getCurrentLayout, subscribeToLayouts, clearLayouts, layout, defineLayout, buildLayouts, discoverLayouts };
+export { registerLayout, unregisterLayout, getLayout, hasLayout, getLayoutNames, setDefaultLayout, getDefaultLayout, resolveLayout, setRouteLayout, getRouteLayout, createLayoutWrapper, createNestedLayoutWrapper, mountWithLayout, getCurrentLayout, subscribeToLayouts, clearLayouts, layout, defineLayout, defineNestedLayout, buildLayouts, discoverLayouts, setParentLayout, getParentLayout, getLayoutChain };
 export { processRoutes, beforeEach, afterEach, getCurrentRoute, getPreviousRoute, isNavigating, cancelNavigation, navigate, navigateTo, push, replace, back, forward, go, router, setSpaMode, isSpaMode };
 export { Link, registerLinkTemplate };
 export { matchRoute, isDynamicRoute, findRoute, generateUrl, validateRouteParams, createCatchAllRoute, createRedirectRoute, defineRoute, route };
@@ -139,3 +141,4 @@ export { useAuth, useLocalStorage, useFetch, useDebounce, useThrottle, useWindow
 export { createMockStore, mockRouter, mountComponent, wait, nextTick, flushPromises, userEvent, dom, TestUtils };
 export { generateSitemap, generateRobotsTxt, jsonLd, createCanonicalUrl, generateOpenGraph, generateTwitterCard, validateSitemap, getPriorityByDepth, generateSitemapIndex, SEO };
 export { generateManifest, registerServiceWorker, unregisterServiceWorker, isStandalone, isOnline, subscribeToConnectivity, requestPersistentStorage, getStorageInfo, sync, subscribeToPush, unsubscribeFromPush, showNotification, cache, checkCapabilities, PWA };
+export { ImageOptimizer as Image, Fonts };

package/build/runtime/modules/app-mounter.js

@@ -16,7 +16,15 @@ let config = { ...defaults };
 let currentApp = null;
 let cachedTemplates = null;
 export function configureOwl(nextConfig) {
-    config = { ...defaults, ...nextConfig };
+    config = {
+        ...defaults,
+        ...nextConfig,
+        translatableAttributes: nextConfig.translatableAttributes
+            ? Array.isArray(nextConfig.translatableAttributes)
+                ? nextConfig.translatableAttributes
+                : [nextConfig.translatableAttributes]
+            : defaults.translatableAttributes
+    };
 }
 export async function mountApp(route) {
     const components = typeof COMPONENTS !== 'undefined' ? COMPONENTS : [];

package/build/runtime/modules/constants.js

@@ -0,0 +1,38 @@
+export const MAGIC_STRINGS = {
+    STORE_SESSION_KEY: 'metaowl:odoo:session',
+    STORE_CSRF_KEY: 'metaowl:odoo:csrf',
+    MOUNT_ELEMENT_ID: 'metaowl',
+    LINK_TEMPLATE_NAME: 'Link'
+};
+export const ROUTE_PATTERN_CONFIG = {
+    optionalParam: /\/:([^/(]+)\?/g,
+    catchAll: /\/:([^/(]+)\(\.\*\)/g,
+    namedParam: /:([^/(?\s]+)/g,
+    wildcard: /\*/g,
+    separator: /\//g
+};
+export function buildRouteRegexPattern(path) {
+    const pattern = path
+        .replace(ROUTE_PATTERN_CONFIG.separator, '\\/')
+        .replace(ROUTE_PATTERN_CONFIG.catchAll, '/(.*)')
+        .replace(ROUTE_PATTERN_CONFIG.optionalParam, '(?:/([^/]+))?')
+        .replace(ROUTE_PATTERN_CONFIG.namedParam, '([^/]+)')
+        .replace(ROUTE_PATTERN_CONFIG.wildcard, '(.*)');
+    return '^' + pattern + '$';
+}
+export function buildSimpleRoutePattern(routePath) {
+    const pattern = routePath
+        .replace(ROUTE_PATTERN_CONFIG.separator, '\\/')
+        .replace(ROUTE_PATTERN_CONFIG.catchAll, '(.*)')
+        .replace(ROUTE_PATTERN_CONFIG.optionalParam, '(?:/([^/]+))?')
+        .replace(ROUTE_PATTERN_CONFIG.namedParam, '([^/]+)')
+        .replace(ROUTE_PATTERN_CONFIG.wildcard, '(.*)');
+    return '^' + pattern + '$';
+}
+export function normalizeRoutePath(path) {
+    return (path.replace(/\/$/, '') || '/');
+}
+export function normalizePathForComparison(path) {
+    return normalizeRoutePath(path);
+}
+export const EXTERNAL_URL_REGEX = /^(https?:|\/\/|mailto:|tel:|ftp:|file:|javascript:)/i;

package/build/runtime/modules/file-router.js

@@ -3,6 +3,7 @@
  *
  * File-based routing with dynamic route parameter support.
  */
+import { buildRouteRegexPattern } from './constants.js';
 export function pathFromKey(key) {
     const relativePath = key.replace(/^\.\/pages\//, '');
     const parts = relativePath.split('/');
@@ -43,11 +44,7 @@ function extractParamNames(filePath) {
     return params;
 }
 function buildRegexPattern(path) {
-    let pattern = path.replace(/\//g, '\\/');
-    pattern = pattern.replace(/:([^/(]+)\(\.\*\)/g, '([^/]+(?:/[^/]+)*)');
-    pattern = pattern.replace(/\/:([^/(]+)\?/g, '(?:/([^/]+))?');
-    pattern = pattern.replace(/:([^/(\s]+)/g, '([^/]+)');
-    return '^' + pattern + '$';
+    return buildRouteRegexPattern(path);
 }
 export function matchRoute(pattern, path) {
     const paramNames = [];
@@ -74,24 +71,29 @@ export function isDynamicRoute(path) {
     return path.includes(':');
 }
 function componentFromModule(mod, key) {
-    if (typeof mod.default === 'function')
+    if (typeof mod.default === 'function') {
         return mod.default;
-    const named = Object.values(mod).find((value) => typeof value === 'function');
-    if (!named) {
+    }
+    const funcs = Object.values(mod).filter((v) => typeof v === 'function');
+    if (funcs.length === 0) {
         throw new Error(`[metaowl] No component export found in "${key}"`);
     }
-    return named;
+    return funcs[0];
 }
 export function buildRoutes(modules) {
     const routes = [];
+    const nameCounts = {};
     for (const [key, mod] of Object.entries(modules)) {
         const derivedPath = pathFromKey(key);
         const component = componentFromModule(mod, key);
         const routeConfig = component.route || {};
         const routePath = typeof routeConfig.path === 'string' ? routeConfig.path : derivedPath;
-        const routeName = routePath === '/'
+        const baseName = routePath === '/'
             ? 'index'
             : routePath.slice(1).replace(/[^a-zA-Z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
+        const routeName = nameCounts[baseName] !== undefined
+            ? `${baseName}-${++nameCounts[baseName]}`
+            : (nameCounts[baseName] = 0, baseName);
         const route = {
             name: routeName,
             path: [routePath],

package/build/runtime/modules/fonts.js

@@ -0,0 +1,172 @@
+/**
+ * @module Fonts
+ *
+ * Font optimization utilities for metaowl applications.
+ * Provides font loading strategies, font face declarations, and font display optimization.
+ */
+const loadedFonts = new Map();
+const fontPreloadLinks = new Map();
+export function defineFontFace(options) {
+    const { family, src, weight = 'normal', style = 'normal', display = 'swap', unicodeRange } = options;
+    const srcString = Array.isArray(src) ? src.map((s) => `url("${s}")`).join(', ') : `url("${src}")`;
+    const weightStr = Array.isArray(weight) ? weight.join(' ') : weight;
+    const descriptors = {
+        weight: weightStr,
+        style,
+        display,
+        unicodeRange: unicodeRange || 'U+0-FFFF'
+    };
+    const fontFace = new FontFace(`${family}-${weightStr}`, srcString, descriptors);
+    return fontFace;
+}
+export async function loadFont(options) {
+    const { family, weight = 'normal' } = options;
+    const key = `${family}-${weight}`;
+    if (!loadedFonts.has(family)) {
+        loadedFonts.set(family, new Set());
+    }
+    const fontFace = defineFontFace(options);
+    try {
+        await fontFace.load();
+        document.fonts.add(fontFace);
+        const familySet = loadedFonts.get(family);
+        familySet.add(key);
+        return fontFace;
+    }
+    catch (error) {
+        console.warn(`[metaowl] Failed to load font ${family}:`, error);
+        throw error;
+    }
+}
+export async function loadFontFamily(family, variants) {
+    return Promise.all(variants.map((variant) => loadFont({ ...variant, family })));
+}
+export function isFontLoaded(family, weight) {
+    if (!loadedFonts.has(family)) {
+        return false;
+    }
+    if (weight) {
+        return loadedFonts.get(family).has(`${family}-${weight}`);
+    }
+    return loadedFonts.get(family).size > 0;
+}
+export function preloadFont(family, src, options = {}) {
+    const { weight, as = 'font', type = 'font/woff2' } = options;
+    const linkId = `metaowl-font-preload-${family}-${weight || 'normal'}`;
+    if (document.getElementById(linkId)) {
+        return;
+    }
+    const link = document.createElement('link');
+    link.id = linkId;
+    link.rel = 'preload';
+    link.as = as;
+    link.href = src;
+    link.crossOrigin = 'anonymous';
+    if (type) {
+        link.type = type;
+    }
+    document.head.appendChild(link);
+    fontPreloadLinks.set(linkId, link);
+}
+export function removeFontPreload(family, weight) {
+    const linkId = `metaowl-font-preload-${family}-${weight || 'normal'}`;
+    const link = fontPreloadLinks.get(linkId);
+    if (link) {
+        link.remove();
+        fontPreloadLinks.delete(linkId);
+    }
+}
+export function generateFontDisplayStyle(display) {
+    return `font-display: ${display};`;
+}
+export function createFontFaceRule(options) {
+    const { family, src, weight = 'normal', style = 'normal', display = 'swap', unicodeRange } = options;
+    const srcString = Array.isArray(src) ? src.map((s) => `url("${s}")`).join(', ') : `url("${src}")`;
+    const weightStr = Array.isArray(weight) ? weight.join(' ') : weight;
+    let rule = '@font-face {\n';
+    rule += `  font-family: '${family}';\n`;
+    rule += `  src: ${srcString};\n`;
+    rule += `  font-weight: ${weightStr};\n`;
+    rule += `  font-style: ${style};\n`;
+    rule += `  font-display: ${display};\n`;
+    if (unicodeRange) {
+        rule += `  unicode-range: ${unicodeRange};\n`;
+    }
+    rule += '}';
+    return rule;
+}
+export function injectFontFaceRules(options) {
+    const rules = Array.isArray(options) ? options : [options];
+    const styleId = 'metaowl-font-faces';
+    let styleEl = document.getElementById(styleId);
+    if (!styleEl) {
+        styleEl = document.createElement('style');
+        styleEl.id = styleId;
+        document.head.appendChild(styleEl);
+    }
+    const cssText = rules.map(createFontFaceRule).join('\n\n');
+    styleEl.textContent += cssText;
+}
+export function measureTextWidth(text, font, size = 16) {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+        const numericSize = typeof size === 'string' ? parseInt(size, 10) : size;
+        return text.length * numericSize * 0.5;
+    }
+    const fontString = typeof size === 'number' ? `${size}px ${font}` : `${size} ${font}`;
+    ctx.font = fontString;
+    return ctx.measureText(text).width;
+}
+export function estimateFontMetrics(el) {
+    const style = window.getComputedStyle(el);
+    const family = style.fontFamily;
+    const fontMetricsMap = {
+        'Arial': { family: 'Arial', ascent: 0.8, descent: 0.2, lineGap: 0, unitsPerEm: 2048 },
+        'Helvetica': { family: 'Helvetica', ascent: 0.8, descent: 0.2, lineGap: 0, unitsPerEm: 2048 },
+        'Times New Roman': { family: 'Times New Roman', ascent: 0.8, descent: 0.2, lineGap: 0, unitsPerEm: 2048 },
+        'Georgia': { family: 'Georgia', ascent: 0.8, descent: 0.2, lineGap: 0, unitsPerEm: 2048 },
+        'system-ui': { family: 'system-ui', ascent: 0.8, descent: 0.2, lineGap: 0, unitsPerEm: 2048 }
+    };
+    return fontMetricsMap[family] || null;
+}
+export function adjustFontForFout(el, _fallbackFont = 'sans-serif', timeout = 3000) {
+    return new Promise((resolve) => {
+        el.style.setProperty('font-display', 'block');
+        const timer = setTimeout(() => {
+            el.classList.add('metaowl-font-fout');
+            resolve();
+        }, timeout);
+        document.fonts.ready.then(() => {
+            clearTimeout(timer);
+            el.classList.add('metaowl-font-loaded');
+            resolve();
+        });
+    });
+}
+export function getFontLoadStatus() {
+    const status = {};
+    for (const [family, weights] of loadedFonts.entries()) {
+        status[family] = weights.size > 0;
+    }
+    return status;
+}
+export function clearLoadedFonts() {
+    loadedFonts.clear();
+}
+export const Fonts = {
+    defineFontFace,
+    loadFont,
+    loadFontFamily,
+    isFontLoaded,
+    preloadFont,
+    removeFontPreload,
+    generateFontDisplayStyle,
+    createFontFaceRule,
+    injectFontFaceRules,
+    measureTextWidth,
+    estimateFontMetrics,
+    adjustFontForFout,
+    getFontLoadStatus,
+    clearLoadedFonts
+};

package/build/runtime/modules/i18n.js

@@ -57,6 +57,17 @@ export async function loadLocaleMessages(locale, messages) {
         state.loading = false;
     }
 }
+export async function load(options) {
+    const { locale, messages, fallbackLocale } = options;
+    if (fallbackLocale) {
+        state.fallbackLocale = fallbackLocale;
+    }
+    state.locale = locale;
+    document.documentElement.lang = locale;
+    if (messages) {
+        await loadLocaleMessages(locale, messages);
+    }
+}
 export function t(key, values = {}, defaultMessage) {
     const locale = state.locale;
     const fallbackLocale = state.fallbackLocale;
@@ -138,6 +149,8 @@ export const i18n = {
     get messages() { return state.messages; },
     configure: configureI18n,
     setLocale,
+    load,
+    loadLocaleMessages,
     t,
     formatDate,
     formatNumber,

package/build/runtime/modules/image.js

@@ -0,0 +1,175 @@
+/**
+ * @module Image
+ *
+ * Image optimization utilities for metaowl applications.
+ * Provides lazy loading, responsive srcset generation, and placeholder support.
+ */
+const DEFAULT_WIDTHS = [320, 640, 960, 1280, 1600, 1920];
+const DEFAULT_QUALITY = 80;
+export function generateSrcSet(baseSrc, widths = DEFAULT_WIDTHS, options = {}) {
+    const { format = 'original', quality = DEFAULT_QUALITY } = options;
+    const srcsetParts = [];
+    for (const width of widths) {
+        const url = buildOptimizedUrl(baseSrc, width, format, quality);
+        srcsetParts.push(`${url} ${width}w`);
+    }
+    return srcsetParts.join(', ');
+}
+function buildOptimizedUrl(baseSrc, width, format, quality) {
+    try {
+        const url = new URL(baseSrc);
+        if (format !== 'original') {
+            url.searchParams.set('format', format);
+        }
+        url.searchParams.set('width', String(width));
+        url.searchParams.set('quality', String(quality));
+        return url.toString();
+    }
+    catch {
+        const separator = baseSrc.includes('?') ? '&' : '?';
+        return `${baseSrc}${separator}width=${width}&quality=${quality}`;
+    }
+}
+export function calculateAspectRatio(width, height) {
+    const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));
+    const divisor = gcd(width, height);
+    return `${width / divisor}/${height / divisor}`;
+}
+export function generateSizesAttribute(src, breakpoints = {}) {
+    const defaultBreakpoints = {
+        '(min-width: 1280px)': 1200,
+        '(min-width: 1024px)': 1000,
+        '(min-width: 768px)': 720,
+        '(min-width: 480px)': 480
+    };
+    const merged = { ...defaultBreakpoints, ...breakpoints };
+    const parts = [];
+    for (const [condition, size] of Object.entries(merged)) {
+        parts.push(`${condition} ${size}px`);
+    }
+    parts.push(`${Math.min(...Object.values(merged))}px`);
+    return parts.join(', ');
+}
+export function createResponsiveImage(options) {
+    const { src, alt = '', widths = DEFAULT_WIDTHS, format = 'original', quality = DEFAULT_QUALITY, lazy = true, placeholder = false, placeholderType = 'blur' } = options;
+    const srcset = generateSrcSet(src, widths, { format, quality });
+    const filteredWidths = widths.filter((w) => w <= 1920);
+    const defaultWidth = filteredWidths.length > 0 ? filteredWidths[0] : widths[0];
+    const result = {
+        src: buildOptimizedUrl(src, defaultWidth, format, quality),
+        srcset,
+        width: defaultWidth,
+        height: 0,
+        alt,
+        loading: lazy ? 'lazy' : 'eager',
+        decoding: 'async'
+    };
+    if (placeholder) {
+        result.placeholder = placeholderType === 'blur' ? buildPlaceholderBlur(src) : undefined;
+        result.blurDataURL = result.placeholder;
+    }
+    return result;
+}
+function buildPlaceholderBlur(src) {
+    try {
+        const url = new URL(src);
+        url.searchParams.set('w', '10');
+        url.searchParams.set('q', '10');
+        url.searchParams.set('blur', '10');
+        return url.toString();
+    }
+    catch {
+        return src;
+    }
+}
+export function prefetchImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve();
+        img.onerror = reject;
+        img.src = src;
+    });
+}
+export async function prefetchImages(sources) {
+    await Promise.all(sources.map(prefetchImage));
+}
+export function isImageLoaded(img) {
+    return img.complete && img.naturalHeight > 0;
+}
+export function getImageDimensions(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => {
+            resolve({ width: img.naturalWidth, height: img.naturalHeight });
+        };
+        img.onerror = reject;
+        img.src = src;
+    });
+}
+export function observeImageVisibility(img, callback, options = {}) {
+    const defaultOptions = {
+        root: null,
+        rootMargin: '50px',
+        threshold: 0.01,
+        ...options
+    };
+    const observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            callback(entry.isIntersecting);
+        }
+    }, defaultOptions);
+    observer.observe(img);
+    return observer;
+}
+export function swapImageSource(img, newSrc, newSrcset) {
+    if (newSrcset) {
+        img.srcset = newSrcset;
+    }
+    if (newSrc) {
+        img.src = newSrc;
+    }
+}
+export function generateDominantColorPlaceholder(src) {
+    return new Promise((resolve) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            if (!ctx) {
+                resolve({ type: 'solid', value: '#cccccc' });
+                return;
+            }
+            canvas.width = 1;
+            canvas.height = 1;
+            ctx.drawImage(img, 0, 0, 1, 1);
+            try {
+                const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+                resolve({
+                    type: 'dominant',
+                    value: `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
+                });
+            }
+            catch {
+                resolve({ type: 'solid', value: '#cccccc' });
+            }
+        };
+        img.onerror = () => {
+            resolve({ type: 'solid', value: '#cccccc' });
+        };
+        img.src = src;
+    });
+}
+export const ImageOptimizer = {
+    generateSrcSet,
+    calculateAspectRatio,
+    generateSizesAttribute,
+    createResponsiveImage,
+    prefetchImage,
+    prefetchImages,
+    isImageLoaded,
+    getImageDimensions,
+    observeImageVisibility,
+    swapImageSource,
+    generateDominantColorPlaceholder
+};

package/build/runtime/modules/layouts.js

@@ -63,6 +63,32 @@ export function setRouteLayout(routePath, layoutName) {
 export function getRouteLayout(routePath) {
     return routeLayouts.get(routePath);
 }
+export function setParentLayout(layoutName, parentLayoutName) {
+    const layout = getLayout(layoutName);
+    if (!layout) {
+        console.warn(`[metaowl] Cannot set parent for unregistered layout "${layoutName}"`);
+        return;
+    }
+    ;
+    layout.parentLayout = parentLayoutName;
+}
+export function getParentLayout(layoutName) {
+    const layout = getLayout(layoutName);
+    return layout?.parentLayout;
+}
+export function getLayoutChain(layoutName) {
+    const chain = [];
+    let current = layoutName;
+    while (current) {
+        if (chain.includes(current)) {
+            console.warn(`[metaowl] Circular layout hierarchy detected for "${current}"`);
+            break;
+        }
+        chain.push(current);
+        current = getParentLayout(current);
+    }
+    return chain;
+}
 export function createLayoutWrapper(layoutComponent, pageComponent, props = {}) {
     const LayoutClass = layoutComponent;
     const PageClass = pageComponent;
@@ -84,15 +110,32 @@ export function createLayoutWrapper(layoutComponent, pageComponent, props = {})
         }
     };
 }
+export function createNestedLayoutWrapper(layoutChain, pageComponent, props = {}) {
+    if (layoutChain.length === 0) {
+        return pageComponent;
+    }
+    const [outerLayout, ...innerChain] = layoutChain;
+    if (innerChain.length === 0) {
+        return createLayoutWrapper(outerLayout, pageComponent, props);
+    }
+    return createLayoutWrapper(outerLayout, createNestedLayoutWrapper(innerChain, pageComponent, props), props);
+}
 export async function mountWithLayout(pageComponent, target, options = {}, config = {}) {
     const { routePath, props = {}, templates } = options;
     const layoutName = resolveLayout(pageComponent, routePath);
-    const LayoutClass = getLayout(layoutName);
-    if (!LayoutClass) {
+    const layoutChain = getLayoutChain(layoutName);
+    if (layoutChain.length === 0) {
+        console.warn(`[metaowl] Layout "${layoutName}" not found, mounting page without layout`);
+        return await mount(pageComponent, target, { ...config, props, templates });
+    }
+    const layoutClasses = layoutChain
+        .map((name) => getLayout(name))
+        .filter((l) => !!l);
+    if (layoutClasses.length === 0) {
         console.warn(`[metaowl] Layout "${layoutName}" not found, mounting page without layout`);
         return await mount(pageComponent, target, { ...config, props, templates });
     }
-    const WrapperClass = createLayoutWrapper(LayoutClass, pageComponent, props);
+    const WrapperClass = createNestedLayoutWrapper(layoutClasses, pageComponent, props);
     const instance = await mount(WrapperClass, target, { ...config, templates });
     currentLayout = instance;
     for (const listener of listeners) {
@@ -131,6 +174,14 @@ export function defineLayout(name, options = {}) {
         return componentClass;
     };
 }
+export function defineNestedLayout(name, parentLayout, options = {}) {
+    return function decorator(componentClass) {
+        componentClass.layout = name;
+        componentClass.parentLayout = parentLayout;
+        componentClass.layoutOptions = options;
+        return componentClass;
+    };
+}
 export function buildLayouts(modules) {
     const discoveredLayouts = {};
     for (const [key, mod] of Object.entries(modules)) {

package/build/runtime/modules/link.js

@@ -4,7 +4,7 @@
  * SPA Link component for metaowl with automatic external link detection.
  */
 import { Component, onMounted, onWillUnmount, useState } from '@odoo/owl';
-const EXTERNAL_URL_REGEX = /^(https?:|\/\/|mailto:|tel:|ftp:|file:|javascript:)/i;
+import { EXTERNAL_URL_REGEX } from './constants.js';
 function isExternalUrl(url) {
     if (!url || typeof url !== 'string')
         return false;
@@ -42,6 +42,11 @@ export class Link extends Component {
         this.state = useState({
             isActive: false
         });
+        this._updateActiveState = () => {
+            if (this.props.activeClass) {
+                this.state.isActive = isActiveLink(this.props.to, document.location.pathname);
+            }
+        };
         onMounted(() => {
             this._updateActiveState();
             window.addEventListener('popstate', this._updateActiveState);
@@ -49,11 +54,6 @@ export class Link extends Component {
         onWillUnmount(() => {
             window.removeEventListener('popstate', this._updateActiveState);
         });
-        this._updateActiveState = () => {
-            if (this.props.activeClass) {
-                this.state.isActive = isActiveLink(this.props.to, document.location.pathname);
-            }
-        };
     }
     get linkClasses() {
         const classes = [];

package/build/runtime/modules/odoo-rpc.js

@@ -3,12 +3,13 @@
  *
  * Odoo JSON-RPC Service for MetaOwl applications.
  */
+import { MAGIC_STRINGS } from './constants.js';
 let config = null;
 let session = null;
 let csrfToken = null;
 const authListeners = [];
-const SESSION_KEY = 'metaowl:odoo:session';
-const CSRF_KEY = 'metaowl:odoo:csrf';
+const SESSION_KEY = MAGIC_STRINGS.STORE_SESSION_KEY;
+const CSRF_KEY = MAGIC_STRINGS.STORE_CSRF_KEY;
 export function configure(nextConfig) {
     config = {
         persistSession: true,
@@ -99,7 +100,7 @@ async function jsonRpc(service, method, args = []) {
     }
     const setCookie = response.headers.get('set-cookie');
     if (setCookie?.includes('csrf_token')) {
-        const match = setCookie.match(/csrf_token=([^;]+)/);
+        const match = setCookie.match(/csrf_token=([a-zA-Z0-9_-]+)/);
         if (match) {
             csrfToken = match[1] ?? null;
             saveSession();

package/build/runtime/modules/pwa.js

@@ -232,12 +232,22 @@ export const cache = {
         return info;
     }
 };
-export function checkCapabilities() {
+export async function checkCapabilities() {
+    let backgroundSync = false;
+    if ('serviceWorker' in navigator) {
+        try {
+            const registration = await navigator.serviceWorker.ready;
+            backgroundSync = 'sync' in registration;
+        }
+        catch {
+            // Service worker not available
+        }
+    }
     return {
         serviceWorker: 'serviceWorker' in navigator,
         push: 'PushManager' in window,
         notifications: 'Notification' in window,
-        backgroundSync: false,
+        backgroundSync,
         persistentStorage: Boolean(navigator.storage?.persist),
         addToHomeScreen: !isStandalone(),
         offline: 'serviceWorker' in navigator

package/build/runtime/modules/router.js

@@ -3,6 +3,7 @@
  *
  * Enhanced router with navigation guards support.
  */
+import { buildSimpleRoutePattern } from './constants.js';
 let currentRoute = null;
 let previousRoute = null;
 const beforeEachGuards = [];
@@ -45,17 +46,11 @@ class Router {
     }
     pathMatches(routePath, currentPath) {
         if (!routePath.includes(':') && !routePath.includes('*')) {
-            const normalizedRoute = routePath.replace(/\/$/, '') || '/';
-            const normalizedCurrent = currentPath.replace(/\/$/, '') || '/';
+            const normalizedRoute = (routePath.replace(/\/$/, '') || '/');
+            const normalizedCurrent = (currentPath.replace(/\/$/, '') || '/');
             return normalizedRoute === normalizedCurrent;
         }
-        let pattern = routePath
-            .replace(/\//g, '\\/')
-            .replace(/:([^/(]+)\(\.\*\)/g, '(.*)')
-            .replace(/\/:([^/(]+)\?/g, '(?:/([^/]+))?')
-            .replace(/:([^/(?\s]+)/g, '([^/]+)')
-            .replace(/\*/g, '(.*)');
-        pattern = '^' + pattern + '$';
+        const pattern = buildSimpleRoutePattern(routePath);
         return new RegExp(pattern).test(currentPath);
     }
     extractParams(route, path) {

package/build/runtime/modules/seo.js

@@ -166,10 +166,10 @@ export function generateSitemapIndex(sitemaps) {
 }
 function escapeXml(str) {
     return str
-        .replace(/&/g, '&')
-        .replace(/</g, '<')
-        .replace(/>/g, '>')
-        .replace(/"/g, '"')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
         .replace(/'/g, '&#x27;');
 }
 export const SEO = {

package/build/runtime/modules/store.js

@@ -105,9 +105,11 @@ export class Store {
     reset() {
         if (this._config.state) {
             const initialState = this._config.state();
-            Object.keys(this._state).forEach((key) => {
-                delete this._state[key];
-            });
+            const keys = Object.keys(this._state);
+            for (const key of keys) {
+                ;
+                this._state[key] = undefined;
+            }
             Object.assign(this._state, initialState);
         }
     }

package/build/runtime/vite/plugin.js

@@ -7,6 +7,18 @@ import { config as dotenvConfig } from 'dotenv';
 import { globSync } from 'glob';
 import tsconfigPaths from 'vite-tsconfig-paths';
 const require = createRequire(import.meta.url);
+function isPathSafe(path, root) {
+    const resolved = resolve(root, path);
+    return resolved.startsWith(resolve(root));
+}
+function sanitizeDirOption(path, root, fallback) {
+    if (!path)
+        return fallback;
+    if (isPathSafe(path, root))
+        return path;
+    console.warn(`[metaowl] Path "${path}" escapes root, using default "${fallback}"`);
+    return fallback;
+}
 function resolveOwlPath() {
     return require.resolve('@odoo/owl/dist/owl.es.js', {
         paths: [process.cwd(), dirname(fileURLToPath(import.meta.url))]
@@ -30,7 +42,9 @@ function mergeXmlFiles(xmlPaths) {
     return '<templates>' + templates + '</templates>';
 }
 export async function metaowlPlugin(options = {}) {
-    const { root = 'src', outDir = '../dist', publicDir = '../public', componentsDir = 'src/components', pagesDir = 'src/pages', layoutsDir = 'src/layouts', frameworkEntry = './node_modules/metaowl/index.js', vendorPackages = ['@odoo/owl'], autoImport = {}, envPrefix } = options;
+    const rootDir = options.root ?? 'src';
+    const resolvedRoot = resolve(process.cwd(), rootDir);
+    const { outDir = '../dist', publicDir = '../public', componentsDir = sanitizeDirOption(options.componentsDir ?? 'src/components', resolvedRoot, 'src/components'), pagesDir = sanitizeDirOption(options.pagesDir ?? 'src/pages', resolvedRoot, 'src/pages'), layoutsDir = sanitizeDirOption(options.layoutsDir ?? 'src/layouts', resolvedRoot, 'src/layouts'), frameworkEntry = './node_modules/metaowl/index.js', vendorPackages = ['@odoo/owl'], autoImport = {}, envPrefix } = options;
     const componentXml = collectXml(`${componentsDir}/**/*.xml`);
     const pageXml = collectXml(`${pagesDir}/**/*.xml`);
     const layoutXml = collectXml(`${layoutsDir}/**/*.xml`);
@@ -76,7 +90,7 @@ export async function metaowlPlugin(options = {}) {
                     COMPONENTS: JSON.stringify(isDev ? allComponents : ['/templates.xml']),
                     'process.env': safeEnv
                 };
-                cfg.root = cfg.root ?? root;
+                cfg.root = cfg.root ?? rootDir;
                 cfg.publicDir = cfg.publicDir ?? publicDir;
                 cfg.appType = cfg.appType ?? 'spa';
                 const owlPath = resolveOwlPath();
@@ -94,7 +108,7 @@ export async function metaowlPlugin(options = {}) {
                     chunkSizeWarningLimit: 1024,
                     target: 'esnext',
                     rollupOptions: {
-                        input: resolve(root, 'index.html'),
+                        input: resolve(rootDir, 'index.html'),
                         output: {
                             manualChunks: {
                                 vendor: vendorPackages,
@@ -118,8 +132,8 @@ export async function metaowlPlugin(options = {}) {
             transform(code, id) {
                 if (!id.endsWith('/metaowl.js'))
                     return null;
-                const pagesRel = pagesDir.replace(new RegExp(`^${root}[\\/]`), '');
-                const layoutsRel = layoutsDir.replace(new RegExp(`^${root}[\\/]`), '');
+                const pagesRel = pagesDir.replace(new RegExp(`^${rootDir}[\\/]`), '');
+                const layoutsRel = layoutsDir.replace(new RegExp(`^${rootDir}[\\/]`), '');
                 return {
                     code: code.replace(/boot\(\s*\)/, `boot(import.meta.glob('./${pagesRel}/**/*.js', { eager: true }), import.meta.glob('./${layoutsRel}/**/*.js', { eager: true }))`),
                     map: null
@@ -131,9 +145,9 @@ export async function metaowlPlugin(options = {}) {
             transform(code, id) {
                 if (!id.endsWith('/css.js'))
                     return null;
-                const compRel = componentsDir.replace(new RegExp(`^${root}[\\/]`), '');
-                const pagesRel = pagesDir.replace(new RegExp(`^${root}[\\/]`), '');
-                const layoutsRel = layoutsDir.replace(new RegExp(`^${root}[\\/]`), '');
+                const compRel = componentsDir.replace(new RegExp(`^${rootDir}[\\/]`), '');
+                const pagesRel = pagesDir.replace(new RegExp(`^${rootDir}[\\/]`), '');
+                const layoutsRel = layoutsDir.replace(new RegExp(`^${rootDir}[\\/]`), '');
                 return {
                     code: code + '\n' +
                         `import.meta.glob('/${compRel}/**/*.{css,scss}', { eager: true })\n` +
@@ -162,7 +176,7 @@ export async function metaowlPlugin(options = {}) {
                         writeFileSync(file, content.replace(/\/templates\.xml/g, `/${hashedFilename}`), 'utf-8');
                     }
                 }
-                const srcImages = resolve(projectRoot, root, 'assets', 'images');
+                const srcImages = resolve(projectRoot, rootDir, 'assets', 'images');
                 if (existsSync(srcImages)) {
                     cpSync(srcImages, resolve(outDirResolved, 'assets', 'images'), { recursive: true });
                 }

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "metaowl",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Lightweight meta-framework for Odoo OWL — file-based routing, app mounting, Fetch helper, Cache, Meta tags, SSG generator, and a Vite plugin.",
+  "author": "Dennis Schott",
+  "license": "LGPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dennisschott/metaowl"
+  },
+  "homepage": "https://metaowl.org",
+  "bugs": {
+    "url": "https://github.com/dennisschott/metaowl/issues"
+  },
   "type": "module",
   "main": "./build/runtime/index.js",
   "exports": {
@@ -17,6 +27,21 @@
     "metaowl-generate": "./build/runtime/bin/metaowl-generate.js",
     "metaowl-lint": "./build/runtime/bin/metaowl-lint.js"
   },
+  "scripts": {
+    "clean:runtime": "node --input-type=module -e \"import { rmSync } from 'node:fs'; rmSync('build/runtime', { recursive: true, force: true })\"",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint . --ext .js,.ts",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "release:check": "npm run typecheck && npm test",
+    "build:runtime": "npm run clean:runtime && tsc -p tsconfig.build.json && node --input-type=module -e \"import { chmodSync, readdirSync } from 'node:fs'; for (const entry of readdirSync('build/runtime/bin')) { if (entry.endsWith('.js')) chmodSync('build/runtime/bin/' + entry, 0o755); }\"",
+    "release:build": "npm run release:check && npm run build:runtime",
+    "release:pack": "npm run release:check && npm pack --dry-run",
+    "prepack": "npm run build:runtime"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
   "files": [
     "build/runtime",
     "config",
@@ -33,17 +58,7 @@
     "vite",
     "meta-framework"
   ],
-  "author": "Dennis Schott",
-  "license": "LGPL-3.0-only",
   "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/dennisschott/metaowl"
-  },
-  "homepage": "https://metaowl.org",
-  "bugs": {
-    "url": "https://github.com/dennisschott/metaowl/issues"
-  },
   "dependencies": {
     "@eslint/js": "^9.20.1",
     "@odoo/owl": "^2.8.2",
@@ -60,21 +75,6 @@
     "vite": "^8.0.0",
     "vite-tsconfig-paths": "^6.1.1"
   },
-  "engines": {
-    "node": ">=20.0.0"
-  },
-  "scripts": {
-    "clean:runtime": "node --input-type=module -e \"import { rmSync } from 'node:fs'; rmSync('build/runtime', { recursive: true, force: true })\"",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "eslint . --ext .js,.ts",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
-    "release:check": "npm run typecheck && npm test",
-    "build:runtime": "npm run clean:runtime && tsc -p tsconfig.build.json && node --input-type=module -e \"import { chmodSync, readdirSync } from 'node:fs'; for (const entry of readdirSync('build/runtime/bin')) { if (entry.endsWith('.js')) chmodSync('build/runtime/bin/' + entry, 0o755); }\"",
-    "release:build": "npm run release:check && npm run build:runtime",
-    "release:pack": "npm run release:check && npm pack --dry-run",
-    "prepack": "npm run build:runtime"
-  },
   "devDependencies": {
     "@types/jsdom": "^28.0.1",
     "@types/node": "^25.6.0",