ezfw-core 1.0.39 → 1.0.40

package/components/EzBaseComponent.ts

@@ -11,6 +11,14 @@ const tooltipCls = cx(tooltipStyles);
 
 declare const ez: {
     _controllers: Record<string, EzController | undefined>;
+    _internal: {
+        state: { breakpoint: string };
+        variants: Record<string, string[]>;
+    };
+    _registry: Record<string, unknown>;
+    _loader: {
+        hasVariants(name: string): boolean;
+    };
     getController(name: string): Promise<EzController | null>;
     getControllerSync(name: string): EzController | null;
     getDeepValue(obj: unknown, path: string[]): unknown;
@@ -349,6 +357,16 @@ export class EzBaseComponent {
         }
     }
 
+    /**
+     * Setup repaint effect for components with breakpoint variants.
+     * Note: This is now handled by the renderer for all components.
+     * Kept for potential manual use by class-based components.
+     */
+    protected _setupRepaintEffect(_el: HTMLElement): void {
+        // Repaint is now handled by the renderer in _setupRepaintEffect
+        // This method is kept for backward compatibility
+    }
+
     private _applyValueBind(
         el: HTMLElement,
         bind: BindConfig,
@@ -499,6 +517,10 @@ export class EzBaseComponent {
                             childCfg.css = this.config.css;
                             childCfg._styleModule = this.config._styleModule;
                         }
+                        // Propagate _isRepaint to skip onLoad in children during breakpoint repaint
+                        if ((this.config as { _isRepaint?: boolean })._isRepaint) {
+                            (childCfg as { _isRepaint?: boolean })._isRepaint = true;
+                        }
                         // Pass 'this' as inheritedState so children are added to _children
                         const childEl = await ez._createElement(childCfg, null, this);
 
@@ -568,10 +590,10 @@ export class EzBaseComponent {
 
                 let result = true;
                 switch (operator) {
-                    case '>': result = left > right; break;
-                    case '<': result = left < right; break;
-                    case '>=': result = left >= right; break;
-                    case '<=': result = left <= right; break;
+                    case '>': result = (left as number) > (right as number); break;
+                    case '<': result = (left as number) < (right as number); break;
+                    case '>=': result = (left as number) >= (right as number); break;
+                    case '<=': result = (left as number) <= (right as number); break;
                     case '!=': result = left != right; break;
                     case '==': result = left == right; break;
                 }

package/components/EzComponent.ts

@@ -5,7 +5,8 @@ declare const ez: {
         items: EzComponentConfig[],
         controller: string | null,
         state: unknown,
-        css: string | null
+        css: string | null,
+        isRepaint?: boolean
     ): Promise<Node[]>;
 };
 
@@ -75,7 +76,8 @@ export class EzComponent extends EzBaseComponent {
                 items,
                 this.config.controller || null,
                 null,
-                (typeof this.config.css === 'string' ? this.config.css : null) as string | null
+                (typeof this.config.css === 'string' ? this.config.css : null) as string | null,
+                (this.config as { _isRepaint?: boolean })._isRepaint || false
             );
 
             for (const child of children) {

package/components/EzIcon.ts

@@ -1,7 +1,7 @@
 import { EzBaseComponent, EzBaseComponentConfig } from './EzBaseComponent.js';
 
 type IconType = 'solid' | 'regular' | 'brands' | 'light' | 'thin' | 'duotone';
-type IconSize = 'xs' | 'sm' | 'lg' | 'xl' | '2x' | '3x' | '4x' | '5x';
+type IconSize = 'xxs' | 'xs' | 'sm' | 'lg' | 'xl' | '2x' | '3x' | '4x' | '5x';
 
 const SEMANTIC_COLORS: Record<string, string> = {
     primary: 'var(--ez-primary)',
@@ -16,6 +16,7 @@ const SEMANTIC_COLORS: Record<string, string> = {
 };
 
 const SIZE_MAP: Record<string, string> = {
+    xxs: '0.65em',
     xs: '0.75em',
     sm: '0.875em',
     lg: '1.25em',

package/components/HtmlWrapper.ts

@@ -1,7 +1,7 @@
 import { EzBaseComponent, EzBaseComponentConfig } from "./EzBaseComponent.js";
 
 declare const ez: {
-    _createChildElements(items: unknown[], controller: string | null, parent: unknown, css?: string | null): Promise<Node[]>;
+    _createChildElements(items: unknown[], controller: string | null, parent: unknown, css?: string | null, isRepaint?: boolean): Promise<Node[]>;
 };
 
 type DOMEventHandler<E extends Event = Event> = (e: E) => void;
@@ -295,7 +295,8 @@ export class HtmlWrapper extends EzBaseComponent {
                 cfg.items,
                 cfg.controller || null,
                 this,
-                (cfg.css as string) || null
+                (cfg.css as string) || null,
+                (cfg as { _isRepaint?: boolean })._isRepaint || false
             );
             children.forEach(child => el.appendChild(child));
         }

package/components/drawer/EzDrawer.module.scss

@@ -10,7 +10,7 @@
     visibility: hidden;
     transition: opacity 0.3s ease, visibility 0.3s ease;
 
-    &.open {
+    &:global(.open) {
         opacity: 1;
         visibility: visible;
     }
@@ -54,7 +54,7 @@
     }
 
     // Open state
-    &.open {
+    &:global(.open) {
         &.left,
         &.right {
             transform: translateX(0);

package/components/tabs/EzTabPanel.ts

@@ -5,7 +5,7 @@ import { EzComponent } from '../EzComponent.js';
 
 declare const ez: {
     _createElement(config: unknown, controller?: string | null, parent?: unknown): Promise<HTMLElement>;
-    _createChildElements(items: unknown[], controller: string | null, parent: unknown): Promise<Node[]>;
+    _createChildElements(items: unknown[], controller: string | null, parent: unknown, css?: string | null, isRepaint?: boolean): Promise<Node[]>;
 };
 
 const cls = cx(styles);
@@ -280,7 +280,7 @@ export class EzTabPanel extends EzComponent {
             return item;
         });
 
-        const children = await ez._createChildElements(items, this.config.controller || null, this);
+        const children = await ez._createChildElements(items, this.config.controller || null, this, null, (this.config as { _isRepaint?: boolean })._isRepaint || false);
         for (const child of children) {
             pane.appendChild(child);
         }

package/components/tree/EzTree.ts

@@ -38,6 +38,7 @@ export interface EzTreeConfig extends EzComponentExtendedConfig {
     defaultExpandLevel?: number;
 
     selectable?: boolean;
+    autoSelectFirst?: boolean;
     showIcon?: boolean;
     showLine?: boolean;
 
@@ -90,6 +91,7 @@ export class EzTree extends EzComponent {
             childrenKey: 'children',
             labelKey: 'label',
             selectable: true,
+            autoSelectFirst: true,
             showIcon: true,
             showLine: false,
             defaultExpandAll: false,
@@ -130,7 +132,11 @@ export class EzTree extends EzComponent {
 
                 const existingBind = (this.config.bind && typeof this.config.bind === 'object') ? this.config.bind : {};
                 this.config.bind = { ...existingBind, data: this._dataStateKey };
-                void this._loadData();
+
+                // Skip loading during repaint - data already exists in controller state
+                if (!(this.config as { _isRepaint?: boolean })._isRepaint) {
+                    void this._loadData();
+                }
             }
         }
 
@@ -330,8 +336,8 @@ export class EzTree extends EzComponent {
             const data = await this._store.load();
             state[this._dataStateKey] = data;
 
-            // Select first item by default
-            if (Array.isArray(data) && data.length > 0) {
+            // Select first item by default (if enabled)
+            if (this.config.autoSelectFirst && Array.isArray(data) && data.length > 0) {
                 const firstNode = data[0] as EzTreeNode;
                 const key = this._getNodeKey(firstNode);
                 this._select(key, firstNode);

package/core/ez.ts

@@ -6,6 +6,7 @@ import { EzState, ControllerDefinition, GridControllerDefinition, GridBehaviorDe
 import { EzModel, ModelDefinition, Model } from './EzModel.js';
 import { EzServices } from './services.js';
 import { EzEventBus, EventHandler } from './eventBus.js';
+import { deepSignal } from 'deepsignal';
 import * as EzGridQuery from '../components/grid/query/EzGridQuery.js';
 import dayjs from 'dayjs';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -42,6 +43,15 @@ interface EzContext {
     controller: string | null;
 }
 
+interface EzInternalState {
+    breakpoint: string;
+}
+
+interface EzInternal {
+    state: EzInternalState;
+    variants: Record<string, string[]>;  // { 'Department': ['desktop', 'mobile'] }
+}
+
 export interface EzFramework {
     _registry: Record<string, unknown>;
     _controllers: Record<string, ControllerDefinition>;
@@ -50,6 +60,7 @@ export interface EzFramework {
     _refs: Record<string, unknown>;
     _registryMeta: Record<string, RegistryMeta>;
     _context: EzContext;
+    _internal: EzInternal;
     _gridControllerDefinitions: Record<string, GridControllerDefinition>;
     _gridStateRegistry: Record<string, unknown>;
     _gridBehaviorDefinitions: Record<string, GridBehaviorDefinition>;
@@ -171,7 +182,7 @@ export interface EzFramework {
     getController(name: string): Promise<ControllerDefinition> | ControllerDefinition;
     getControllerSync(name: string): ControllerDefinition;
     _createElement(config: ComponentConfig, controllerName?: string | null, inheritedState?: unknown): Promise<Node>;
-    _createChildElements(items: ComponentConfig[], controllerName: string | null, inheritedState: unknown, parentCss?: string | null): Promise<Node[]>;
+    _createChildElements(items: ComponentConfig[], controllerName: string | null, inheritedState: unknown, parentCss?: string | null, isRepaint?: boolean): Promise<Node[]>;
     routes(routeDefs: RouteDefinition[]): void;
     go(path: string): void;
     navigate(viewName: string, route?: RouteInfo | null): Promise<void>;
@@ -230,6 +241,7 @@ export interface EzFramework {
     isTablet(): boolean;
     isDesktop(): boolean;
     _initBreakpoints(): void;
+    _hasAnyResponsiveModules(): boolean;
     _updateBreakpoint(): void;
     format(value: unknown, type?: FormatType, options?: FormatOptions): string;
     capitalize(str: string): string;
@@ -251,6 +263,18 @@ const ez: EzFramework = {
         view: null,
         controller: null
     },
+    _internal: {
+        state: deepSignal({
+            breakpoint: (() => {
+                if (typeof window === 'undefined') return 'desktop';
+                const width = window.innerWidth;
+                if (width < 768) return 'mobile';
+                if (width < 1024) return 'tablet';
+                return 'desktop';
+            })()
+        }),
+        variants: {}
+    },
     _gridControllerDefinitions: {},
     _gridStateRegistry: {},
     _gridBehaviorDefinitions: {},
@@ -433,8 +457,8 @@ const ez: EzFramework = {
         return this._renderer!.createElement(config, controllerName, inheritedState);
     },
 
-    async _createChildElements(items: ComponentConfig[], controllerName: string | null, inheritedState: unknown, parentCss: string | null = null): Promise<Node[]> {
-        return this._renderer!.createChildElements(items, controllerName || '', inheritedState, parentCss);
+    async _createChildElements(items: ComponentConfig[], controllerName: string | null, inheritedState: unknown, parentCss: string | null = null, isRepaint: boolean = false): Promise<Node[]> {
+        return this._renderer!.createChildElements(items, controllerName || '', inheritedState, parentCss, isRepaint);
     },
 
     routes(routeDefs: RouteDefinition[]): void {
@@ -665,6 +689,14 @@ const ez: EzFramework = {
         return this._currentBreakpoint === 'desktop';
     },
 
+    _hasAnyResponsiveModules(): boolean {
+        if (!this._loader) return false;
+        const modules = this._loader.getModules();
+        return Object.keys(modules).some(p =>
+            p.includes('.mobile.') || p.includes('.tablet.')
+        );
+    },
+
     _updateBreakpoint(): void {
         const width = window.innerWidth;
         const { mobile, tablet } = this._breakpoints;
@@ -682,6 +714,10 @@ const ez: EzFramework = {
             const oldBreakpoint = this._currentBreakpoint;
             this._currentBreakpoint = newBreakpoint;
             document.documentElement.setAttribute('data-ez-breakpoint', newBreakpoint);
+
+            // Update reactive state - this triggers repaint on components with variants
+            this._internal.state.breakpoint = newBreakpoint;
+
             this._eventBus?.emit('breakpoint:change', {
                 breakpoint: newBreakpoint,
                 previous: oldBreakpoint

package/core/loader.ts

@@ -7,6 +7,13 @@ export interface ModuleMeta {
 
 export type ModuleMap = Record<string, () => Promise<unknown>>;
 
+export interface BreakpointModules {
+    framework: ModuleMap;
+    desktop: ModuleMap;
+    mobile: ModuleMap;
+    tablet: ModuleMap;
+}
+
 export type LoadPriority = 'high' | 'low' | 'idle';
 
 export type NetworkStrategy = 'fast' | 'medium' | 'slow' | 'offline';
@@ -63,6 +70,10 @@ interface EzInstance {
         route?: string | null;
         view?: string | null;
     };
+    _internal: {
+        state: { breakpoint: string };
+        variants: Record<string, string[]>;
+    };
     _router?: EzRouter;
     _currentBreakpoint: string;
     registerComponent(name: string, component: unknown): void;
@@ -73,7 +84,13 @@ interface EzInstance {
 
 export class EzLoader {
     private ez: EzInstance;
-    private _modules: ModuleMap = {};
+    private _modules: ModuleMap = {};  // Combined flat map for backward compat
+    private _frameworkModules: ModuleMap = {};
+    private _desktopModules: ModuleMap = {};
+    private _mobileModules: ModuleMap = {};
+    private _tabletModules: ModuleMap = {};
+    // Cache for variant definitions (ES modules only execute once)
+    private _variantCache: Record<string, unknown> = {};  // 'Department@mobile' -> definition
     private _moduleIndex: Record<string, string[]> = {};
     private _moduleMeta: Record<string, ModuleMeta> = {};
     private _currentModulePath: string | null = null;
@@ -196,38 +213,100 @@ export class EzLoader {
         };
     }
 
-    installModules(mods: ModuleMap): void {
-        this._modules = mods;
+    installModules(mods: BreakpointModules | ModuleMap): void {
+        // Support both old flat format and new breakpoint-separated format
+        if ('framework' in mods && 'desktop' in mods) {
+            const breakpointMods = mods as BreakpointModules;
+            this._frameworkModules = breakpointMods.framework;
+            this._desktopModules = breakpointMods.desktop;
+            this._mobileModules = breakpointMods.mobile || {};
+            this._tabletModules = breakpointMods.tablet || {};
+
+            // Combined flat map for backward compatibility
+            this._modules = {
+                ...breakpointMods.framework,
+                ...breakpointMods.desktop,
+                ...breakpointMods.mobile,
+                ...breakpointMods.tablet
+            };
+
+            // Build variants registry
+            this._buildVariantsRegistry();
+        } else {
+            // Legacy flat format
+            this._modules = mods as ModuleMap;
+        }
+
         this._moduleIndex = {};
 
-        for (const path of Object.keys(mods)) {
+        for (const path of Object.keys(this._modules)) {
             this._moduleMeta[path] = {
                 path,
                 defines: []
             };
             const file = path.split('/').pop();
             if (!file || (!file.endsWith('.js') && !file.endsWith('.ts'))) continue;
+            // Skip TypeScript declaration files
+            if (file.endsWith('.d.ts')) continue;
 
             const eztype = file.replace(/\.(js|ts)$/, '');
 
             this._moduleIndex[eztype] ??= [];
             this._moduleIndex[eztype].push(path);
         }
+    }
 
-        for (const eztype in this._moduleIndex) {
-            const paths = this._moduleIndex[eztype];
-            if (paths.length > 1) {
-                throw new EzError({
-                    code: 'EZ_MODULE_DUPLICATE',
-                    source: 'module',
-                    message: `Multiple modules resolve to eztype "${eztype}"`,
-                    details: {
-                        eztype,
-                        modules: paths
-                    }
-                });
+    private _buildVariantsRegistry(): void {
+        const variants: Record<string, string[]> = {};
+
+
+        // Extract component names from desktop modules
+        for (const path of Object.keys(this._desktopModules)) {
+            const file = path.split('/').pop();
+            if (!file || (!file.endsWith('.js') && !file.endsWith('.ts'))) continue;
+            if (file.endsWith('.d.ts')) continue;
+
+            const componentName = file.replace(/\.(js|ts)$/, '');
+            variants[componentName] = ['desktop'];
+        }
+
+        // Check for mobile variants
+        for (const path of Object.keys(this._mobileModules)) {
+            const file = path.split('/').pop();
+            if (!file) continue;
+
+            // Department.mobile.js -> Department
+            const match = file.match(/^(.+)\.mobile\.(js|ts)$/);
+            if (match) {
+                const componentName = match[1];
+                if (variants[componentName]) {
+                    variants[componentName].push('mobile');
+                }
             }
         }
+
+        // Check for tablet variants
+        for (const path of Object.keys(this._tabletModules)) {
+            const file = path.split('/').pop();
+            if (!file) continue;
+
+            const match = file.match(/^(.+)\.tablet\.(js|ts)$/);
+            if (match) {
+                const componentName = match[1];
+                if (variants[componentName]) {
+                    variants[componentName].push('tablet');
+                }
+            }
+        }
+
+        // Only keep components with multiple variants
+        for (const name in variants) {
+            if (variants[name].length === 1) {
+                delete variants[name];
+            }
+        }
+
+        this.ez._internal.variants = variants;
     }
 
     async loadModule(path: string): Promise<unknown> {
@@ -253,21 +332,38 @@ export class EzLoader {
         if (this.ez._registry[eztype]) return;
 
         const lowerEztype = eztype.toLowerCase();
-        const keys = Object.keys(this._modules);
         const breakpoint = this.ez._currentBreakpoint;
 
-        // Try responsive variant first (e.g., Department.mobile.js)
         let path: string | undefined;
 
-        if (breakpoint !== 'desktop') {
-            path = keys.find(p => {
+        // Use breakpoint-specific registry if available
+        if (breakpoint === 'mobile' && Object.keys(this._mobileModules).length > 0) {
+            path = Object.keys(this._mobileModules).find(p => {
                 const filename = p.split(/[/\\]/).pop()?.toLowerCase() || '';
-                return filename === `${lowerEztype}.${breakpoint}.js` || filename === `${lowerEztype}.${breakpoint}.ts`;
+                return filename === `${lowerEztype}.mobile.js` || filename === `${lowerEztype}.mobile.ts`;
+            });
+        } else if (breakpoint === 'tablet' && Object.keys(this._tabletModules).length > 0) {
+            path = Object.keys(this._tabletModules).find(p => {
+                const filename = p.split(/[/\\]/).pop()?.toLowerCase() || '';
+                return filename === `${lowerEztype}.tablet.js` || filename === `${lowerEztype}.tablet.ts`;
             });
         }
 
-        // Fallback to default file (e.g., Department.js)
+        // Fallback to desktop/framework modules
         if (!path) {
+            const desktopKeys = Object.keys(this._desktopModules);
+            const frameworkKeys = Object.keys(this._frameworkModules);
+            const allKeys = [...desktopKeys, ...frameworkKeys];
+
+            path = allKeys.find(p => {
+                const filename = p.split(/[/\\]/).pop()?.toLowerCase() || '';
+                return filename === `${lowerEztype}.js` || filename === `${lowerEztype}.ts`;
+            });
+        }
+
+        // Final fallback to combined modules (legacy support)
+        if (!path) {
+            const keys = Object.keys(this._modules);
             path = keys.find(p => {
                 const filename = p.split(/[/\\]/).pop()?.toLowerCase() || '';
                 return filename === `${lowerEztype}.js` || filename === `${lowerEztype}.ts`;
@@ -278,6 +374,17 @@ export class EzLoader {
             return;
         }
 
+        // Determine which variant we're loading
+        const isVariant = path.includes('.mobile.') || path.includes('.tablet.');
+        const variantType = path.includes('.mobile.') ? 'mobile' : path.includes('.tablet.') ? 'tablet' : 'desktop';
+        const cacheKey = `${eztype}@${variantType}`;
+
+        // Check variant cache first (ES modules only execute once, so ez.define won't re-run)
+        if (this._variantCache[cacheKey]) {
+            this.ez.registerComponent(eztype, this._variantCache[cacheKey]);
+            return;
+        }
+
         const module = await this.loadModuleWithRetry(path) as Record<string, unknown>;
 
         let exported = module.default || Object.values(module).find(v => typeof v === 'function');
@@ -287,7 +394,12 @@ export class EzLoader {
         }
 
         if (!exported) {
-            throw new Error(`[ez] Module loaded for ${eztype} but exports no class/function or ez.define`);
+            throw new Error(`[ez] Module loaded for ${eztype} but exports no class/function or ez.define. Path: ${path}`);
+        }
+
+        // Cache the variant definition for future use
+        if (isVariant || this.hasVariants(eztype)) {
+            this._variantCache[cacheKey] = exported;
         }
 
         this.ez.registerComponent(eztype, exported);
@@ -298,6 +410,14 @@ export class EzLoader {
         }
     }
 
+    hasVariants(componentName: string): boolean {
+        return componentName in this.ez._internal.variants;
+    }
+
+    getVariants(componentName: string): string[] {
+        return this.ez._internal.variants[componentName] || [];
+    }
+
     async resolveController(name: string | object | null): Promise<unknown> {
         if (!name) return null;