metaowl 0.4.1 → 0.6.0

package/build/runtime/modules/i18n.js

@@ -0,0 +1,180 @@
+/**
+ * @module i18n
+ *
+ * Internationalization (i18n) support for MetaOwl applications.
+ */
+import { reactive } from '@odoo/owl';
+const state = reactive({
+    locale: 'en',
+    fallbackLocale: 'en',
+    messages: {},
+    loading: false
+});
+const pluralRules = new Map();
+export function setPluralizationRule(locale, rule) {
+    pluralRules.set(locale, rule);
+}
+function defaultPluralRule(count) {
+    if (count === 0)
+        return 'zero';
+    if (count === 1)
+        return 'one';
+    return 'other';
+}
+function getPluralForm(count, locale) {
+    const rule = pluralRules.get(locale) || defaultPluralRule;
+    return rule(count);
+}
+export function configureI18n(config) {
+    if (config.locale) {
+        state.locale = config.locale;
+        document.documentElement.lang = config.locale;
+    }
+    if (config.fallbackLocale) {
+        state.fallbackLocale = config.fallbackLocale;
+    }
+    if (config.messages) {
+        state.messages = config.messages;
+    }
+}
+export function getLocale() {
+    return state.locale;
+}
+export async function setLocale(locale) {
+    state.locale = locale;
+    document.documentElement.lang = locale;
+}
+export async function loadLocaleMessages(locale, messages) {
+    state.loading = true;
+    try {
+        const loaded = await messages;
+        if (!state.messages[locale]) {
+            state.messages[locale] = {};
+        }
+        Object.assign(state.messages[locale], loaded);
+    }
+    finally {
+        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;
+    let message = getMessage(key, locale);
+    if (!message && locale !== fallbackLocale) {
+        message = getMessage(key, fallbackLocale);
+    }
+    if (!message) {
+        return defaultMessage || key;
+    }
+    if (isPluralMessage(message)) {
+        const countValue = values.n ?? values.count ?? 0;
+        const count = typeof countValue === 'number' ? countValue : Number(countValue);
+        const form = getPluralForm(Number.isNaN(count) ? 0 : count, locale);
+        message = message[form] || message.other || message.one || key;
+    }
+    if (typeof message !== 'string') {
+        return defaultMessage || key;
+    }
+    return interpolate(message, values);
+}
+function getMessage(key, locale) {
+    const parts = key.split('.');
+    let current = state.messages[locale];
+    for (const part of parts) {
+        if (!current || typeof current !== 'object') {
+            return undefined;
+        }
+        current = current[part];
+    }
+    return current;
+}
+function isPluralMessage(message) {
+    if (!message || typeof message !== 'object' || Array.isArray(message)) {
+        return false;
+    }
+    const keys = Object.keys(message);
+    return keys.some((key) => ['zero', 'one', 'two', 'few', 'many', 'other'].includes(key));
+}
+function interpolate(message, values) {
+    return message.replace(/\{\{(\w+)\}\}/g, (match, key) => {
+        return values[key] !== undefined ? String(values[key]) : match;
+    });
+}
+export function formatDate(date, options = {}) {
+    return new Intl.DateTimeFormat(state.locale, options).format(new Date(date));
+}
+export function formatNumber(value, options = {}) {
+    return new Intl.NumberFormat(state.locale, options).format(value);
+}
+export function formatCurrency(amount, currency, options = {}) {
+    return new Intl.NumberFormat(state.locale, {
+        style: 'currency',
+        currency,
+        ...options
+    }).format(amount);
+}
+export function formatRelativeTime(date, style = 'long') {
+    const targetDate = new Date(date);
+    const now = new Date();
+    const diff = targetDate.getTime() - now.getTime();
+    const seconds = Math.round(diff / 1000);
+    const minutes = Math.round(seconds / 60);
+    const hours = Math.round(minutes / 60);
+    const days = Math.round(hours / 24);
+    const rtf = new Intl.RelativeTimeFormat(state.locale, { style });
+    if (Math.abs(seconds) < 60)
+        return rtf.format(seconds, 'second');
+    if (Math.abs(minutes) < 60)
+        return rtf.format(minutes, 'minute');
+    if (Math.abs(hours) < 24)
+        return rtf.format(hours, 'hour');
+    return rtf.format(days, 'day');
+}
+export const i18n = {
+    get locale() { return state.locale; },
+    get fallbackLocale() { return state.fallbackLocale; },
+    get loading() { return state.loading; },
+    get messages() { return state.messages; },
+    configure: configureI18n,
+    setLocale,
+    load,
+    loadLocaleMessages,
+    t,
+    formatDate,
+    formatNumber,
+    formatCurrency,
+    formatRelativeTime
+};
+export function createNamespacedT(namespace) {
+    return (key, values) => t(`${namespace}.${key}`, values);
+}
+setPluralizationRule('de', (count) => {
+    if (count === 0)
+        return 'zero';
+    if (count === 1)
+        return 'one';
+    return 'other';
+});
+setPluralizationRule('ru', (count) => {
+    const mod10 = count % 10;
+    const mod100 = count % 100;
+    if (mod10 === 1 && mod100 !== 11)
+        return 'one';
+    if ([2, 3, 4].includes(mod10) && ![12, 13, 14].includes(mod100))
+        return 'few';
+    if (mod10 === 0 || [5, 6, 7, 8, 9].includes(mod10) || [11, 12, 13, 14].includes(mod100))
+        return 'many';
+    return 'other';
+});

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

@@ -0,0 +1,214 @@
+/**
+ * @module Layouts
+ *
+ * Layout system for OWL applications, enabling shared page structures.
+ */
+import { Component, mount, xml } from '@odoo/owl';
+const layouts = new Map();
+let defaultLayout = 'default';
+let currentLayout = null;
+const listeners = [];
+const routeLayouts = new Map();
+export function registerLayout(name, layoutComponent, options = {}) {
+    layouts.set(name, layoutComponent);
+    if (options.default) {
+        defaultLayout = name;
+    }
+    for (const listener of listeners) {
+        listener({ type: 'register', name, layout: layoutComponent });
+    }
+}
+export function unregisterLayout(name) {
+    const removed = layouts.delete(name);
+    if (removed) {
+        for (const listener of listeners) {
+            listener({ type: 'unregister', name });
+        }
+    }
+    return removed;
+}
+export function getLayout(name) {
+    return layouts.get(name);
+}
+export function hasLayout(name) {
+    return layouts.has(name);
+}
+export function getLayoutNames() {
+    return Array.from(layouts.keys());
+}
+export function setDefaultLayout(name) {
+    if (!layouts.has(name)) {
+        console.warn(`[metaowl] Layout "${name}" is not registered yet`);
+    }
+    defaultLayout = name;
+}
+export function getDefaultLayout() {
+    return defaultLayout;
+}
+export function resolveLayout(component, routePath) {
+    if (routePath && routeLayouts.has(routePath)) {
+        return routeLayouts.get(routePath);
+    }
+    if (component.layout) {
+        return component.layout;
+    }
+    if (component._layout) {
+        return component._layout;
+    }
+    return defaultLayout;
+}
+export function setRouteLayout(routePath, layoutName) {
+    routeLayouts.set(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;
+    return class LayoutWrapper extends Component {
+        static template = xml `
+      <t t-component="layout" t-props="layoutProps">
+        <t t-component="page" t-props="pageProps"/>
+      </t>
+    `;
+        layout;
+        page;
+        layoutProps;
+        pageProps;
+        setup() {
+            this.layout = LayoutClass;
+            this.page = PageClass;
+            this.layoutProps = {};
+            this.pageProps = 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 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 = createNestedLayoutWrapper(layoutClasses, pageComponent, props);
+    const instance = await mount(WrapperClass, target, { ...config, templates });
+    currentLayout = instance;
+    for (const listener of listeners) {
+        listener({ type: 'mount', layout: layoutName, page: pageComponent.name });
+    }
+    return instance;
+}
+export function getCurrentLayout() {
+    return currentLayout;
+}
+export function subscribeToLayouts(callback) {
+    listeners.push(callback);
+    return () => {
+        const index = listeners.indexOf(callback);
+        if (index > -1)
+            listeners.splice(index, 1);
+    };
+}
+export function clearLayouts() {
+    layouts.clear();
+    routeLayouts.clear();
+    listeners.length = 0;
+    defaultLayout = 'default';
+    currentLayout = null;
+}
+export function layout(name) {
+    return function decorator(componentClass) {
+        componentClass.layout = name;
+        return componentClass;
+    };
+}
+export function defineLayout(name, options = {}) {
+    return function decorator(componentClass) {
+        componentClass.layout = name;
+        componentClass.layoutOptions = 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)) {
+        const match = key.match(/\.\/layouts\/([^/]+)/);
+        if (!match)
+            continue;
+        const layoutName = match[1];
+        const componentClass = resolveLayoutComponent(mod);
+        if (componentClass) {
+            discoveredLayouts[layoutName] = componentClass;
+            registerLayout(layoutName, componentClass);
+        }
+    }
+    return discoveredLayouts;
+}
+export async function discoverLayouts(options = {}) {
+    const { defaultLayout: nextDefaultLayout = 'default' } = options;
+    const modules = import.meta.glob('./layouts/**/*.js', { eager: true });
+    const discoveredLayouts = buildLayouts(modules);
+    if (discoveredLayouts[nextDefaultLayout]) {
+        setDefaultLayout(nextDefaultLayout);
+    }
+    return discoveredLayouts;
+}
+function resolveLayoutComponent(mod) {
+    if (typeof mod.default === 'function') {
+        return mod.default;
+    }
+    return Object.values(mod).find((value) => typeof value === 'function');
+}

package/build/runtime/modules/link.js

@@ -0,0 +1,141 @@
+/**
+ * @module Link
+ *
+ * SPA Link component for metaowl with automatic external link detection.
+ */
+import { Component, onMounted, onWillUnmount, useState } from '@odoo/owl';
+import { EXTERNAL_URL_REGEX } from './constants.js';
+function isExternalUrl(url) {
+    if (!url || typeof url !== 'string')
+        return false;
+    return EXTERNAL_URL_REGEX.test(url);
+}
+function isActiveLink(linkPath, currentPath) {
+    if (!linkPath || !currentPath)
+        return false;
+    const normalizedLink = linkPath.replace(/\/$/, '') || '/';
+    const normalizedCurrent = currentPath.replace(/\/$/, '') || '/';
+    return normalizedCurrent === normalizedLink ||
+        (normalizedLink !== '/' && normalizedCurrent.startsWith(normalizedLink + '/'));
+}
+export class Link extends Component {
+    static template = 'Link';
+    static props = {
+        to: { type: String, optional: false },
+        class: { type: String, optional: true },
+        activeClass: { type: String, optional: true },
+        target: { type: String, optional: true },
+        rel: { type: String, optional: true },
+        title: { type: String, optional: true },
+        download: { type: [String, Boolean], optional: true },
+        hreflang: { type: String, optional: true },
+        type: { type: String, optional: true },
+        ping: { type: String, optional: true },
+        referrerpolicy: { type: String, optional: true },
+        media: { type: String, optional: true },
+        '*': true
+    };
+    state;
+    _navigate = null;
+    _updateActiveState = () => { };
+    setup() {
+        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);
+        });
+        onWillUnmount(() => {
+            window.removeEventListener('popstate', this._updateActiveState);
+        });
+    }
+    get linkClasses() {
+        const classes = [];
+        if (this.props.class) {
+            classes.push(this.props.class);
+        }
+        if (this.state.isActive && this.props.activeClass) {
+            classes.push(this.props.activeClass);
+        }
+        return classes.join(' ');
+    }
+    get linkRel() {
+        if (this.props.rel)
+            return this.props.rel;
+        if (isExternalUrl(this.props.to) && this.props.target === '_blank') {
+            return 'noopener noreferrer';
+        }
+        return undefined;
+    }
+    get forwardedAttrs() {
+        const attrs = { ...this.props };
+        delete attrs.to;
+        delete attrs.class;
+        delete attrs.activeClass;
+        delete attrs.target;
+        delete attrs.rel;
+        delete attrs.title;
+        delete attrs.download;
+        return attrs;
+    }
+    onClick(ev) {
+        const url = this.props.to;
+        if (isExternalUrl(url)) {
+            return;
+        }
+        if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) {
+            return;
+        }
+        if (ev.button !== 0) {
+            return;
+        }
+        if (this.props.download) {
+            return;
+        }
+        ev.preventDefault();
+        window.history.pushState({ path: url }, '', url);
+        if (typeof window.__metaowlNavigate === 'function') {
+            window.__metaowlNavigate(url);
+        }
+        else {
+            window.location.href = url;
+        }
+    }
+}
+export const LinkTemplate = /* xml */ `
+<templates>
+  <t t-name="Link">
+    <a
+      t-att="forwardedAttrs"
+      t-att-href="props.to"
+      t-att-class="linkClasses"
+      t-att-target="props.target"
+      t-att-rel="linkRel"
+      t-att-title="props.title"
+      t-att-download="props.download"
+      t-on-click="onClick"
+    >
+      <t t-slot="default"/>
+    </a>
+  </t>
+</templates>
+`;
+export function registerLinkTemplate(templates) {
+    if (typeof templates === 'string') {
+        const linkContent = LinkTemplate
+            .replace('<templates>', '')
+            .replace('</templates>', '')
+            .trim();
+        return templates.replace('</templates>', linkContent + '\n</templates>');
+    }
+    if (templates && typeof templates === 'object') {
+        templates.Link = LinkTemplate;
+    }
+}
+export default Link;