ezfw-core 1.0.63 → 1.0.65

package/islands/StaticHtmlRenderer.ts

@@ -271,9 +271,9 @@ export class StaticHtmlRenderer {
 
         // Check if it's a registered component
         if (ctx.registry.has(eztype)) {
-            // Pass the entire config as props (excluding eztype and items which are structural)
-            // Props can be either in config.props or directly on the config object
-            const { eztype: _, items: __, ...configProps } = config;
+            // Pass the entire config as props (including items - components handle their own structure)
+            // In SPA mode, components receive full config via constructor, SSR should match
+            const { eztype: _, ...configProps } = config;
             const mergedProps = { ...configProps, ...(config.props || {}) };
             return this.renderComponent(eztype, ctx, mergedProps);
         }

package/islands/ssrShim.js

@@ -5,6 +5,9 @@
  * Uses a SINGLETON pattern - registry persists across module reloads.
  * Components can use ez.define() normally and definitions
  * are stored in the registry for SSR to access.
+ *
+ * ALL framework components have SSR templates here that render
+ * reasonable static HTML. Interactive features activate on hydration.
  */
 
 // Use globalThis to store the singleton registry (persists across module reloads)
@@ -18,8 +21,29 @@ if (!globalThis.__ezSSRControllers) {
 const ssrRegistry = globalThis.__ezSSRRegistry;
 const ssrControllers = globalThis.__ezSSRControllers;
 
-// Framework components for SSR (declarative versions of class-based Ez components)
+// Helper: semantic color map
+const semanticColors = {
+    primary: 'var(--ez-primary)', secondary: 'var(--ez-secondary)',
+    success: 'var(--ez-success)', danger: 'var(--ez-danger)',
+    warning: 'var(--ez-warning)', info: 'var(--ez-info)',
+    muted: 'var(--ez-muted)', light: 'var(--ez-light)', dark: 'var(--ez-dark)'
+};
+
+// Helper: size map for icons
+const sizeMap = {
+    xxs: '0.65em', xs: '0.75em', sm: '0.875em',
+    lg: '1.25em', xl: '1.5em', '2x': '2em',
+    '3x': '3em', '4x': '4em', '5x': '5em'
+};
+
+/**
+ * Register ALL framework components for SSR
+ * Each component has a template() that returns static HTML config
+ */
 function registerFrameworkComponents() {
+    // ==================== BASIC COMPONENTS ====================
+
+    // EzIcon - Font Awesome icon
     ssrRegistry['EzIcon'] = {
         template(props) {
             const type = props.type || 'solid';
@@ -29,18 +53,6 @@ function registerFrameworkComponents() {
             if (props.pulse) classes.push('fa-pulse');
             if (props.bounce) classes.push('fa-bounce');
 
-            const sizeMap = {
-                xxs: '0.65em', xs: '0.75em', sm: '0.875em',
-                lg: '1.25em', xl: '1.5em', '2x': '2em',
-                '3x': '3em', '4x': '4em', '5x': '5em'
-            };
-            const semanticColors = {
-                primary: 'var(--ez-primary)', secondary: 'var(--ez-secondary)',
-                success: 'var(--ez-success)', danger: 'var(--ez-danger)',
-                warning: 'var(--ez-warning)', info: 'var(--ez-info)',
-                muted: 'var(--ez-muted)', light: 'var(--ez-light)', dark: 'var(--ez-dark)'
-            };
-
             return {
                 eztype: 'i',
                 cls: classes.join(' '),
@@ -52,6 +64,7 @@ function registerFrameworkComponents() {
         }
     };
 
+    // EzLabel - Simple text label
     ssrRegistry['EzLabel'] = {
         template(props) {
             return {
@@ -63,25 +76,857 @@ function registerFrameworkComponents() {
         }
     };
 
+    // EzButton - Button with optional icon
     ssrRegistry['EzButton'] = {
         template(props) {
             const items = [];
             if (props.iconCls) {
                 items.push({ eztype: 'i', cls: props.iconCls });
             }
+            if (props.icon) {
+                items.push({ eztype: 'EzIcon', fa: props.icon, type: props.iconType });
+            }
             if (props.text) {
                 items.push({ eztype: 'span', text: props.text });
             }
+
+            const variantStyles = {
+                primary: { background: 'var(--ez-primary)', color: 'white' },
+                secondary: { background: 'var(--ez-secondary)', color: 'white' },
+                success: { background: 'var(--ez-success)', color: 'white' },
+                danger: { background: 'var(--ez-danger)', color: 'white' },
+                warning: { background: 'var(--ez-warning)', color: 'black' },
+                outline: { background: 'transparent', border: '1px solid var(--ez-border)' },
+                ghost: { background: 'transparent' },
+                link: { background: 'transparent', color: 'var(--ez-primary)' }
+            };
+
             return {
                 eztype: 'button',
-                cls: props.cls,
-                style: props.style,
+                cls: `ez-button ${props.variant || ''} ${props.cls || ''}`.trim(),
+                style: { ...variantStyles[props.variant], ...props.style },
                 attr: { type: props.type || 'button', disabled: props.disabled },
                 items: items.length > 0 ? items : undefined,
                 text: items.length === 0 ? props.text : undefined
             };
         }
     };
+
+    // EzButtonGroup - Group of buttons
+    ssrRegistry['EzButtonGroup'] = {
+        template(props) {
+            return {
+                eztype: 'div',
+                cls: 'ez-button-group',
+                layout: 'hbox',
+                gap: 1,
+                style: props.style,
+                items: props.items || []
+            };
+        }
+    };
+
+    // ==================== FORM INPUTS ====================
+
+    // EzInput - Text input field
+    ssrRegistry['EzInput'] = {
+        template(props) {
+            const items = [];
+
+            if (props.label) {
+                items.push({
+                    eztype: 'label',
+                    cls: 'ez-input-label',
+                    text: props.label,
+                    items: props.required ? [{ eztype: 'span', text: ' *', style: { color: 'var(--ez-danger)' } }] : undefined
+                });
+            }
+
+            items.push({
+                eztype: 'input',
+                cls: 'ez-input',
+                attr: {
+                    type: props.inputType || 'text',
+                    placeholder: props.placeholder,
+                    disabled: props.disabled,
+                    readonly: props.readonly,
+                    value: props.value || ''
+                },
+                style: props.style
+            });
+
+            return {
+                eztype: 'div',
+                cls: 'ez-input-wrapper',
+                layout: 'vbox',
+                gap: 0.5,
+                items
+            };
+        }
+    };
+
+    // EzTextarea - Multi-line text input
+    ssrRegistry['EzTextarea'] = {
+        template(props) {
+            const items = [];
+
+            if (props.label) {
+                items.push({
+                    eztype: 'label',
+                    cls: 'ez-textarea-label',
+                    text: props.label
+                });
+            }
+
+            items.push({
+                eztype: 'textarea',
+                cls: 'ez-textarea',
+                attr: {
+                    placeholder: props.placeholder,
+                    disabled: props.disabled,
+                    rows: props.rows || 4
+                },
+                text: props.value || '',
+                style: props.style
+            });
+
+            return {
+                eztype: 'div',
+                cls: 'ez-textarea-wrapper',
+                layout: 'vbox',
+                gap: 0.5,
+                items
+            };
+        }
+    };
+
+    // EzSelect - Dropdown select
+    ssrRegistry['EzSelect'] = {
+        template(props) {
+            const options = (props.options || []).map(opt => ({
+                eztype: 'option',
+                attr: { value: opt.value || opt },
+                text: opt.label || opt.text || opt
+            }));
+
+            const items = [];
+            if (props.label) {
+                items.push({ eztype: 'label', cls: 'ez-select-label', text: props.label });
+            }
+            items.push({
+                eztype: 'select',
+                cls: 'ez-select',
+                attr: { disabled: props.disabled },
+                style: props.style,
+                items: options
+            });
+
+            return {
+                eztype: 'div',
+                cls: 'ez-select-wrapper',
+                layout: 'vbox',
+                gap: 0.5,
+                items
+            };
+        }
+    };
+
+    // EzCheckbox - Checkbox input
+    ssrRegistry['EzCheckbox'] = {
+        template(props) {
+            return {
+                eztype: 'label',
+                cls: 'ez-checkbox',
+                layout: 'hbox',
+                gap: 1,
+                style: { alignItems: 'center', cursor: 'pointer', ...props.style },
+                items: [
+                    {
+                        eztype: 'input',
+                        attr: { type: 'checkbox', checked: props.checked, disabled: props.disabled }
+                    },
+                    { eztype: 'span', text: props.label || props.text || '' }
+                ]
+            };
+        }
+    };
+
+    // EzRadio - Radio button group
+    ssrRegistry['EzRadio'] = {
+        template(props) {
+            const options = (props.options || []).map(opt => ({
+                eztype: 'label',
+                cls: 'ez-radio-option',
+                layout: 'hbox',
+                gap: 1,
+                style: { alignItems: 'center', cursor: 'pointer' },
+                items: [
+                    {
+                        eztype: 'input',
+                        attr: { type: 'radio', name: props.name, value: opt.value || opt, checked: props.value === (opt.value || opt) }
+                    },
+                    { eztype: 'span', text: opt.label || opt }
+                ]
+            }));
+
+            return {
+                eztype: 'div',
+                cls: 'ez-radio-group',
+                layout: props.horizontal ? 'hbox' : 'vbox',
+                gap: 1,
+                style: props.style,
+                items: options
+            };
+        }
+    };
+
+    // EzSwitch - Toggle switch
+    ssrRegistry['EzSwitch'] = {
+        template(props) {
+            return {
+                eztype: 'label',
+                cls: 'ez-switch',
+                layout: 'hbox',
+                gap: 1,
+                style: { alignItems: 'center', cursor: 'pointer', ...props.style },
+                items: [
+                    {
+                        eztype: 'div',
+                        cls: `ez-switch-track ${props.checked ? 'checked' : ''}`,
+                        style: {
+                            width: '40px', height: '20px', borderRadius: '10px',
+                            background: props.checked ? 'var(--ez-primary)' : 'var(--ez-border)',
+                            position: 'relative'
+                        },
+                        items: [{
+                            eztype: 'div',
+                            cls: 'ez-switch-thumb',
+                            style: {
+                                width: '16px', height: '16px', borderRadius: '50%',
+                                background: 'white', position: 'absolute', top: '2px',
+                                left: props.checked ? '22px' : '2px',
+                                transition: 'left 0.2s'
+                            }
+                        }]
+                    },
+                    props.label ? { eztype: 'span', text: props.label } : null
+                ].filter(Boolean)
+            };
+        }
+    };
+
+    // EzForm - Form container
+    ssrRegistry['EzForm'] = {
+        template(props) {
+            return {
+                eztype: 'form',
+                cls: 'ez-form',
+                layout: 'vbox',
+                gap: 2,
+                style: props.style,
+                items: props.items || []
+            };
+        }
+    };
+
+    // ==================== DATE/TIME ====================
+
+    // EzDatePicker - Date picker
+    ssrRegistry['EzDatePicker'] = {
+        template(props) {
+            const items = [];
+            if (props.label) {
+                items.push({ eztype: 'label', cls: 'ez-datepicker-label', text: props.label });
+            }
+            items.push({
+                eztype: 'input',
+                cls: 'ez-datepicker',
+                attr: { type: 'date', value: props.value, disabled: props.disabled },
+                style: props.style
+            });
+
+            return {
+                eztype: 'div',
+                cls: 'ez-datepicker-wrapper',
+                layout: 'vbox',
+                gap: 0.5,
+                items
+            };
+        }
+    };
+
+    // EzTimePicker - Time picker
+    ssrRegistry['EzTimePicker'] = {
+        template(props) {
+            const items = [];
+            if (props.label) {
+                items.push({ eztype: 'label', cls: 'ez-timepicker-label', text: props.label });
+            }
+            items.push({
+                eztype: 'input',
+                cls: 'ez-timepicker',
+                attr: { type: 'time', value: props.value, disabled: props.disabled },
+                style: props.style
+            });
+
+            return {
+                eztype: 'div',
+                cls: 'ez-timepicker-wrapper',
+                layout: 'vbox',
+                gap: 0.5,
+                items
+            };
+        }
+    };
+
+    // ==================== DISPLAY COMPONENTS ====================
+
+    // EzAvatar - User avatar
+    ssrRegistry['EzAvatar'] = {
+        template(props) {
+            const size = props.size || 40;
+            const initials = (props.name || '??').split(' ').map(n => n[0]).join('').substring(0, 2).toUpperCase();
+
+            if (props.src) {
+                return {
+                    eztype: 'img',
+                    cls: 'ez-avatar',
+                    attr: { src: props.src, alt: props.name || 'Avatar' },
+                    style: {
+                        width: `${size}px`, height: `${size}px`,
+                        borderRadius: props.rounded ? '50%' : '8px',
+                        objectFit: 'cover',
+                        ...props.style
+                    }
+                };
+            }
+
+            return {
+                eztype: 'div',
+                cls: 'ez-avatar',
+                text: initials,
+                style: {
+                    width: `${size}px`, height: `${size}px`,
+                    borderRadius: props.rounded !== false ? '50%' : '8px',
+                    background: props.color || 'var(--ez-primary)',
+                    color: 'white',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    fontWeight: '600', fontSize: `${size * 0.4}px`,
+                    ...props.style
+                }
+            };
+        }
+    };
+
+    // EzBadge - Status badge
+    ssrRegistry['EzBadge'] = {
+        template(props) {
+            const colorMap = {
+                primary: { bg: 'var(--ez-primary)', color: 'white' },
+                secondary: { bg: 'var(--ez-secondary)', color: 'white' },
+                success: { bg: 'var(--ez-success)', color: 'white' },
+                danger: { bg: 'var(--ez-danger)', color: 'white' },
+                warning: { bg: 'var(--ez-warning)', color: 'black' },
+                info: { bg: 'var(--ez-info)', color: 'white' }
+            };
+            const colors = colorMap[props.variant] || colorMap.primary;
+
+            return {
+                eztype: 'span',
+                cls: 'ez-badge',
+                text: props.text || props.label || '',
+                style: {
+                    display: 'inline-flex', alignItems: 'center',
+                    padding: '2px 8px', borderRadius: '12px',
+                    fontSize: '12px', fontWeight: '500',
+                    background: colors.bg, color: colors.color,
+                    ...props.style
+                }
+            };
+        }
+    };
+
+    // EzCard - Card container
+    ssrRegistry['EzCard'] = {
+        template(props) {
+            const items = [];
+
+            if (props.title || props.subtitle) {
+                items.push({
+                    eztype: 'div',
+                    cls: 'ez-card-header',
+                    layout: 'vbox',
+                    style: { padding: '16px', borderBottom: '1px solid var(--ez-border)' },
+                    items: [
+                        props.title ? { eztype: 'h3', text: props.title, style: { margin: 0, fontWeight: '600' } } : null,
+                        props.subtitle ? { eztype: 'p', text: props.subtitle, style: { margin: '4px 0 0', color: 'var(--ez-muted)' } } : null
+                    ].filter(Boolean)
+                });
+            }
+
+            items.push({
+                eztype: 'div',
+                cls: 'ez-card-body',
+                style: { padding: '16px' },
+                items: props.items || []
+            });
+
+            return {
+                eztype: 'div',
+                cls: 'ez-card',
+                style: {
+                    background: 'var(--ez-surface)',
+                    border: '1px solid var(--ez-border)',
+                    borderRadius: '8px',
+                    ...props.style
+                },
+                items
+            };
+        }
+    };
+
+    // EzPanel - Collapsible panel
+    ssrRegistry['EzPanel'] = {
+        template(props) {
+            return {
+                eztype: 'div',
+                cls: 'ez-panel',
+                style: {
+                    border: '1px solid var(--ez-border)',
+                    borderRadius: '4px',
+                    ...props.style
+                },
+                items: [
+                    {
+                        eztype: 'div',
+                        cls: 'ez-panel-header',
+                        layout: 'hbox',
+                        style: {
+                            padding: '12px 16px',
+                            background: 'var(--ez-surface)',
+                            borderBottom: props.collapsed ? 'none' : '1px solid var(--ez-border)',
+                            cursor: 'pointer'
+                        },
+                        items: [
+                            { eztype: 'span', text: props.title || '', style: { fontWeight: '600', flex: 1 } },
+                            { eztype: 'EzIcon', fa: props.collapsed ? 'chevron-down' : 'chevron-up' }
+                        ]
+                    },
+                    !props.collapsed ? {
+                        eztype: 'div',
+                        cls: 'ez-panel-body',
+                        style: { padding: '16px' },
+                        items: props.items || []
+                    } : null
+                ].filter(Boolean)
+            };
+        }
+    };
+
+    // EzPaper - Paper surface
+    ssrRegistry['EzPaper'] = {
+        template(props) {
+            return {
+                eztype: 'div',
+                cls: 'ez-paper',
+                style: {
+                    background: 'var(--ez-surface)',
+                    borderRadius: '8px',
+                    boxShadow: props.elevation ? `0 ${props.elevation * 2}px ${props.elevation * 4}px rgba(0,0,0,0.1)` : undefined,
+                    padding: '16px',
+                    ...props.style
+                },
+                items: props.items || []
+            };
+        }
+    };
+
+    // EzSkeleton - Loading skeleton
+    ssrRegistry['EzSkeleton'] = {
+        template(props) {
+            return {
+                eztype: 'div',
+                cls: 'ez-skeleton',
+                style: {
+                    background: 'linear-gradient(90deg, var(--ez-border) 25%, var(--ez-surface) 50%, var(--ez-border) 75%)',
+                    backgroundSize: '200% 100%',
+                    animation: 'skeleton-loading 1.5s infinite',
+                    borderRadius: props.variant === 'circle' ? '50%' : '4px',
+                    width: props.width || '100%',
+                    height: props.height || '20px',
+                    ...props.style
+                }
+            };
+        }
+    };
+
+    // EzTooltip - Tooltip wrapper (renders children only in SSR)
+    ssrRegistry['EzTooltip'] = {
+        template(props) {
+            return {
+                eztype: 'div',
+                cls: 'ez-tooltip-wrapper',
+                attr: { title: props.text || props.content },
+                items: props.items || []
+            };
+        }
+    };
+
+    // ==================== TABS & NAVIGATION ====================
+
+    // EzTabPanel - Tabbed content (renders first/active tab in SSR)
+    ssrRegistry['EzTabPanel'] = {
+        template(props) {
+            const tabs = props.items || [];
+            const activeId = props.activeTab || props.active || (tabs[0]?.id);
+            const activeTab = tabs.find(t => t.id === activeId) || tabs[0];
+
+            // Tab headers
+            const tabHeaders = tabs.map(tab => ({
+                eztype: 'div',
+                cls: `ez-tab ${tab.id === activeId ? 'active' : ''}`,
+                text: tab.title || tab.label || tab.id,
+                style: {
+                    padding: '8px 16px',
+                    cursor: 'pointer',
+                    borderBottom: tab.id === activeId ? '2px solid var(--ez-primary)' : '2px solid transparent',
+                    color: tab.id === activeId ? 'var(--ez-primary)' : 'inherit'
+                }
+            }));
+
+            return {
+                eztype: 'div',
+                cls: 'ez-tab-panel',
+                style: props.style,
+                items: [
+                    {
+                        eztype: 'div',
+                        cls: 'ez-tab-headers',
+                        layout: 'hbox',
+                        style: { borderBottom: '1px solid var(--ez-border)' },
+                        items: tabHeaders
+                    },
+                    {
+                        eztype: 'div',
+                        cls: 'ez-tab-content',
+                        style: { padding: '16px' },
+                        items: activeTab?.items || []
+                    }
+                ]
+            };
+        }
+    };
+
+    // ==================== DATA DISPLAY ====================
+
+    // EzGrid - Data grid (renders simple table in SSR)
+    ssrRegistry['EzGrid'] = {
+        template(props) {
+            const columns = props.columns || [];
+            const data = props.data || [];
+
+            const headerCells = columns.map(col => ({
+                eztype: 'th',
+                text: col.text || col.header || col.index,
+                style: { padding: '12px', textAlign: 'left', fontWeight: '600', borderBottom: '2px solid var(--ez-border)' }
+            }));
+
+            const rows = data.slice(0, 20).map(row => ({
+                eztype: 'tr',
+                items: columns.map(col => ({
+                    eztype: 'td',
+                    text: String(row[col.index] ?? ''),
+                    style: { padding: '12px', borderBottom: '1px solid var(--ez-border)' }
+                }))
+            }));
+
+            return {
+                eztype: 'div',
+                cls: 'ez-grid',
+                style: { overflow: 'auto', ...props.style },
+                items: [{
+                    eztype: 'table',
+                    style: { width: '100%', borderCollapse: 'collapse' },
+                    items: [
+                        { eztype: 'thead', items: [{ eztype: 'tr', items: headerCells }] },
+                        { eztype: 'tbody', items: rows }
+                    ]
+                }]
+            };
+        }
+    };
+
+    // EzDataView - Data view (cards/grid/list modes)
+    ssrRegistry['EzDataView'] = {
+        template(props) {
+            return {
+                eztype: 'div',
+                cls: 'ez-dataview',
+                style: props.style,
+                items: props.items || [{ eztype: 'div', text: 'Loading...', cls: 'ez-dataview-empty' }]
+            };
+        }
+    };
+
+    // EzTree - Tree view
+    ssrRegistry['EzTree'] = {
+        template(props) {
+            function renderNode(node, level = 0) {
+                const hasChildren = node.children && node.children.length > 0;
+                return {
+                    eztype: 'div',
+                    cls: 'ez-tree-node',
+                    style: { paddingLeft: `${level * 20}px` },
+                    items: [
+                        {
+                            eztype: 'div',
+                            cls: 'ez-tree-node-content',
+                            layout: 'hbox',
+                            gap: 1,
+                            style: { padding: '4px 8px', cursor: 'pointer' },
+                            items: [
+                                hasChildren ? { eztype: 'EzIcon', fa: 'chevron-right', size: 'sm' } : { eztype: 'span', style: { width: '14px' } },
+                                node.icon ? { eztype: 'EzIcon', fa: node.icon } : null,
+                                { eztype: 'span', text: node.text || node.label || node.name || '' }
+                            ].filter(Boolean)
+                        },
+                        ...(hasChildren ? node.children.map(child => renderNode(child, level + 1)) : [])
+                    ]
+                };
+            }
+
+            const data = props.data || [];
+            return {
+                eztype: 'div',
+                cls: 'ez-tree',
+                style: props.style,
+                items: data.map(node => renderNode(node))
+            };
+        }
+    };
+
+    // EzKanban - Kanban board
+    ssrRegistry['EzKanban'] = {
+        template(props) {
+            const columns = props.columns || [];
+            return {
+                eztype: 'div',
+                cls: 'ez-kanban',
+                layout: 'hbox',
+                gap: 2,
+                style: { overflow: 'auto', ...props.style },
+                items: columns.map(col => ({
+                    eztype: 'div',
+                    cls: 'ez-kanban-column',
+                    style: {
+                        minWidth: '280px', background: 'var(--ez-surface)',
+                        borderRadius: '8px', padding: '12px'
+                    },
+                    items: [
+                        { eztype: 'h4', text: col.title || col.name, style: { margin: '0 0 12px' } },
+                        {
+                            eztype: 'div',
+                            cls: 'ez-kanban-cards',
+                            layout: 'vbox',
+                            gap: 1,
+                            items: (col.cards || col.items || []).map(card => ({
+                                eztype: 'div',
+                                cls: 'ez-kanban-card',
+                                style: {
+                                    background: 'var(--ez-background)',
+                                    border: '1px solid var(--ez-border)',
+                                    borderRadius: '4px', padding: '12px'
+                                },
+                                text: card.title || card.text || ''
+                            }))
+                        }
+                    ]
+                }))
+            };
+        }
+    };
+
+    // EzActivityFeed - Activity feed
+    ssrRegistry['EzActivityFeed'] = {
+        template(props) {
+            const items = (props.items || []).map(item => ({
+                eztype: 'div',
+                cls: 'ez-activity-item',
+                layout: 'hbox',
+                gap: 2,
+                style: { padding: '12px 0', borderBottom: '1px solid var(--ez-border)' },
+                items: [
+                    item.avatar ? { eztype: 'EzAvatar', ...item.avatar, size: 32 } : null,
+                    {
+                        eztype: 'div',
+                        flex: 1,
+                        items: [
+                            { eztype: 'div', text: item.title || item.text },
+                            item.time ? { eztype: 'div', text: item.time, style: { fontSize: '12px', color: 'var(--ez-muted)' } } : null
+                        ].filter(Boolean)
+                    }
+                ].filter(Boolean)
+            }));
+
+            return {
+                eztype: 'div',
+                cls: 'ez-activity-feed',
+                style: props.style,
+                items
+            };
+        }
+    };
+
+    // ==================== OVERLAYS ====================
+
+    // EzDialog - Dialog/Modal (renders hidden in SSR)
+    ssrRegistry['EzDialog'] = {
+        template(props) {
+            // Don't render dialog content in SSR - it's an overlay
+            return { eztype: 'div', cls: 'ez-dialog-placeholder', style: { display: 'none' } };
+        }
+    };
+
+    // EzDrawer - Side drawer (renders hidden in SSR)
+    ssrRegistry['EzDrawer'] = {
+        template(props) {
+            return { eztype: 'div', cls: 'ez-drawer-placeholder', style: { display: 'none' } };
+        }
+    };
+
+    // EzDropdown - Dropdown menu
+    ssrRegistry['EzDropdown'] = {
+        template(props) {
+            // Just render the trigger, dropdown opens on interaction
+            return {
+                eztype: 'div',
+                cls: 'ez-dropdown',
+                style: { position: 'relative', display: 'inline-block', ...props.style },
+                items: props.trigger ? [props.trigger] : [{ eztype: 'EzButton', text: props.text || 'Dropdown' }]
+            };
+        }
+    };
+
+    // EzPicker - Item picker
+    ssrRegistry['EzPicker'] = {
+        template(props) {
+            return {
+                eztype: 'div',
+                cls: 'ez-picker',
+                style: {
+                    border: '1px solid var(--ez-border)',
+                    borderRadius: '4px', padding: '8px',
+                    ...props.style
+                },
+                text: props.placeholder || 'Select...'
+            };
+        }
+    };
+
+    // EzSearchFilter - Search with filters
+    ssrRegistry['EzSearchFilter'] = {
+        template(props) {
+            return {
+                eztype: 'div',
+                cls: 'ez-search-filter',
+                layout: 'hbox',
+                gap: 1,
+                style: props.style,
+                items: [
+                    {
+                        eztype: 'EzInput',
+                        placeholder: props.placeholder || 'Search...',
+                        flex: 1
+                    }
+                ]
+            };
+        }
+    };
+
+    // ==================== CHARTS ====================
+
+    // EzChart - Chart container (placeholder in SSR)
+    ssrRegistry['EzChart'] = {
+        template(props) {
+            return {
+                eztype: 'div',
+                cls: 'ez-chart',
+                style: {
+                    height: props.height || '300px',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    background: 'var(--ez-surface)', borderRadius: '8px',
+                    ...props.style
+                },
+                text: 'Chart loading...'
+            };
+        }
+    };
+
+    ssrRegistry['EzLineChart'] = ssrRegistry['EzChart'];
+    ssrRegistry['EzBarChart'] = ssrRegistry['EzChart'];
+    ssrRegistry['EzDoughnutChart'] = ssrRegistry['EzChart'];
+
+    // ==================== LAYOUT ====================
+
+    // EzLayout - Layout container
+    ssrRegistry['EzLayout'] = {
+        template(props) {
+            return {
+                eztype: 'div',
+                cls: 'ez-layout',
+                layout: props.layout || 'vbox',
+                flex: props.flex,
+                gap: props.gap,
+                style: props.style,
+                items: props.items || []
+            };
+        }
+    };
+
+    // EzMask - Loading mask (renders hidden in SSR)
+    ssrRegistry['EzMask'] = {
+        template(props) {
+            return { eztype: 'div', cls: 'ez-mask-placeholder', style: { display: 'none' } };
+        }
+    };
+
+    // EzOrgChart - Org chart
+    ssrRegistry['EzOrgChart'] = {
+        template(props) {
+            return {
+                eztype: 'div',
+                cls: 'ez-orgchart',
+                style: {
+                    padding: '20px',
+                    background: 'var(--ez-surface)',
+                    borderRadius: '8px',
+                    ...props.style
+                },
+                text: 'Organization Chart'
+            };
+        }
+    };
+
+    // EzOutlet - Router outlet
+    ssrRegistry['EzOutlet'] = {
+        template(props) {
+            return {
+                eztype: 'div',
+                cls: 'ez-outlet',
+                style: props.style,
+                items: props.items || []
+            };
+        }
+    };
+
+    // EzToast - Toast notifications (handled by service, not rendered)
+    ssrRegistry['EzToast'] = {
+        template(props) {
+            return { eztype: 'div', cls: 'ez-toast-placeholder', style: { display: 'none' } };
+        }
+    };
+
+    console.log('[SSR Shim] Framework components registered:', Object.keys(ssrRegistry).filter(k => k.startsWith('Ez')).join(', '));
 }
 
 const ezSSR = {
@@ -99,17 +944,9 @@ const ezSSR = {
     },
 
     // Mock getControllerSync to return controller state for SSR
-    // Handles both "MyController" and "My" (framework adds "Controller" suffix)
     getControllerSync(name) {
-        // Try exact match first
         let ctrl = ssrControllers[name];
-
-        // Try with Controller suffix
-        if (!ctrl) {
-            ctrl = ssrControllers[name + 'Controller'];
-        }
-
-        // Try removing Controller suffix
+        if (!ctrl) ctrl = ssrControllers[name + 'Controller'];
         if (!ctrl && name.endsWith('Controller')) {
             ctrl = ssrControllers[name.replace('Controller', '')];
         }
@@ -118,12 +955,9 @@ const ezSSR = {
             return { state: ctrl.state || {} };
         }
 
-        console.warn(`[SSR Shim] Controller not found: ${name}`);
-        console.warn(`[SSR Shim] Available controllers: ${Object.keys(ssrControllers).join(', ')}`);
         return { state: {} };
     },
 
-    // Mock getController (async version)
     getController(name) {
         return this.getControllerSync(name);
     },
@@ -132,26 +966,23 @@ const ezSSR = {
         return ssrRegistry[name];
     },
 
-    // Clear registry (useful between renders) - preserves framework components
     _clear() {
         Object.keys(ssrRegistry).forEach(k => delete ssrRegistry[k]);
         Object.keys(ssrControllers).forEach(k => delete ssrControllers[k]);
-        // Re-register framework components after clear
         registerFrameworkComponents();
     }
 };
 
-// Make available globally for SSR context
+// Make available globally
 globalThis.ez = ezSSR;
 if (typeof global !== 'undefined') {
     global.ez = ezSSR;
 }
 
-// Register framework components on init
+// Register all components
 registerFrameworkComponents();
 
-console.log('[SSR Shim] Initialized - ez is now available globally');
-console.log('[SSR Shim] Framework components registered: EzIcon, EzLabel, EzButton');
+console.log('[SSR Shim] Initialized with all framework components');
 
 export { ezSSR as ez };
 export default ezSSR;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezfw-core",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "Ez Framework - A declarative component framework for building modern web applications",
   "type": "module",
   "main": "./core/ez.ts",