violit 0.0.2__py3-none-any.whl → 0.0.3__py3-none-any.whl

violit/app.py

@@ -271,8 +271,16 @@ class App(
     def state(self, default_value, key=None) -> State:
         """Create a reactive state variable"""
         if key is None:
-            name = f"state_{self.state_count}"
-            self.state_count += 1
+            # Streamlit-style: Generate stable key from caller's location
+            frame = inspect.currentframe()
+            try:
+                caller_frame = frame.f_back
+                filename = os.path.basename(caller_frame.f_code.co_filename)
+                lineno = caller_frame.f_lineno
+                # Create stable key: filename_linenumber
+                name = f"state_{filename}_{lineno}"
+            finally:
+                del frame  # Avoid reference cycles
         else:
             name = key
         return State(name, default_value)
@@ -861,6 +869,7 @@ class App(
             t = store['theme']
             
             sidebar_style = "" if (sidebar_c or self.static_sidebar_order) else "display: none;"
+            main_class = "" if (sidebar_c or self.static_sidebar_order) else "sidebar-collapsed"
             
             # Generate CSRF token
             # Get sid from context (set by middleware) instead of cookies (not set yet on first visit)
@@ -880,7 +889,7 @@ class App(
             # Debug flag injection
             debug_script = f'<script>window._debug_mode = {str(self.debug_mode).lower()};</script>'
             
-            html = HTML_TEMPLATE.replace("%CONTENT%", main_c).replace("%SIDEBAR_CONTENT%", sidebar_c).replace("%SIDEBAR_STYLE%", sidebar_style).replace("%MODE%", self.mode).replace("%TITLE%", self.app_title).replace("%THEME_CLASS%", t.theme_class).replace("%CSS_VARS%", t.to_css_vars()).replace("%SPLASH%", self._splash_html if self.show_splash else "").replace("%CONTAINER_MAX_WIDTH%", self.container_max_width).replace("%CSRF_SCRIPT%", csrf_script).replace("%DEBUG_SCRIPT%", debug_script)
+            html = HTML_TEMPLATE.replace("%CONTENT%", main_c).replace("%SIDEBAR_CONTENT%", sidebar_c).replace("%SIDEBAR_STYLE%", sidebar_style).replace("%MAIN_CLASS%", main_class).replace("%MODE%", self.mode).replace("%TITLE%", self.app_title).replace("%THEME_CLASS%", t.theme_class).replace("%CSS_VARS%", t.to_css_vars()).replace("%SPLASH%", self._splash_html if self.show_splash else "").replace("%CONTAINER_MAX_WIDTH%", self.container_max_width).replace("%CSRF_SCRIPT%", csrf_script).replace("%DEBUG_SCRIPT%", debug_script)
             return HTMLResponse(html)
 
         @self.fastapi.post("/action/{cid}")
@@ -1036,9 +1045,12 @@ class App(
                 
                 self.debug_print(f"  Action found: {act is not None}")
                 
+                # Detect if this is a navigation action (nav menu click)
+                is_navigation = cid.startswith('nav_menu')
+                
                 if act:
                     store['eval_queue'] = []
-                    self.debug_print(f"  Executing action for CID: {cid}...")
+                    self.debug_print(f"  Executing action for CID: {cid} (navigation={is_navigation})...")
                     act(v) if v is not None else act()
                     self.debug_print(f"  Action executed")
                     
@@ -1050,9 +1062,10 @@ class App(
                     self.debug_print(f"  Dirty components: {len(dirty)} ({[c.id for c in dirty]})")
                     
                     # Send all dirty components via WebSocket
+                    # Pass is_navigation flag to enable/disable smooth transitions
                     if dirty:
-                        self.debug_print(f"  Sending {len(dirty)} updates via WebSocket...")
-                        await self.ws_engine.push_updates(sid, dirty)
+                        self.debug_print(f"  Sending {len(dirty)} updates via WebSocket (navigation={is_navigation})...")
+                        await self.ws_engine.push_updates(sid, dirty, is_navigation=is_navigation)
                         self.debug_print(f"  [OK] Updates sent successfully")
                     else:
                         self.debug_print(f"  [!] No dirty components found - nothing to update")
@@ -1398,6 +1411,7 @@ HTML_TEMPLATE = """
     <style>
         :root { 
             %CSS_VARS%
+            --sidebar-width: 300px;
         }
         sl-alert { --sl-color-primary-500: var(--sl-primary); --sl-color-primary-600: var(--sl-primary); }
         sl-alert::part(base) { border: 1px solid var(--sl-border); }
@@ -1417,31 +1431,39 @@ HTML_TEMPLATE = """
         
         #root { display: flex; width: 100%; min-height: 100vh; }
         #sidebar { 
-            width: 300px; 
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: var(--sidebar-width); 
+            height: 100vh;
             background: var(--sl-bg-card); 
             border-right: 1px solid var(--sl-border); 
             padding: 2rem 1rem; 
             display: flex; 
             flex-direction: column; 
             gap: 1rem; 
-            flex-shrink: 0; 
             overflow-y: auto; 
             overflow-x: hidden; 
-            white-space: nowrap; 
-            position: sticky; 
-            top: 0; 
-            height: 100vh;
+            white-space: nowrap;
+            z-index: 1100;
         }
         #sidebar.collapsed { width: 0; padding: 2rem 0; border-right: none; opacity: 0; }
         
         #main { 
             flex: 1; 
+            margin-left: var(--sidebar-width);
             display: flex; 
             flex-direction: column; 
             align-items: center; 
-            padding: 0 1.5rem 3rem 1.5rem; 
-            transition: padding 0.3s ease;
+            padding: 0 1.5rem 3rem 2.5rem; 
+            transition: margin-left 0.3s ease, padding 0.3s ease;
         }
+        #main.sidebar-collapsed { margin-left: 0; }
+        /* Chat input container positioning - respects sidebar */
+        .chat-input-container { left: var(--sidebar-width) !important; transition: left 0.3s ease; }
+        #sidebar.collapsed ~ #main .chat-input-container,
+        #main.sidebar-collapsed .chat-input-container { left: 0 !important; }
+        
         #header { width: 100%; max-width: %CONTAINER_MAX_WIDTH%; padding: 1rem 0; display: flex; align-items: center; }
         #app { width: 100%; max-width: %CONTAINER_MAX_WIDTH%; display: flex; flex-direction: column; gap: 1.5rem; }
         
@@ -1658,116 +1680,87 @@ HTML_TEMPLATE = """
                 debugLog("[WebSocket] Message received");
                 const msg = JSON.parse(e.data);
                 if(msg.type === 'update') {
-                    // Separate page transitions from regular updates
-                    const pageUpdates = [];
-                    const regularUpdates = [];
-                    
-                    msg.payload.forEach(item => {
-                        // Only page_renderer gets smooth transition
-                        if (item.id.startsWith('page_renderer')) {
-                            pageUpdates.push(item);
-                        } else {
-                            regularUpdates.push(item);
-                        }
-                    });
+                    // Check if this is a navigation update (page transition)
+                    // Server sends isNavigation flag based on action type
+                    const isNavigation = msg.isNavigation === true;
                     
-                    // Regular updates: apply immediately without animation
-                    regularUpdates.forEach(item => {
-                        const el = document.getElementById(item.id);
-                        
-                        // Focus Guard: Skip update if element is focused input to prevent interrupting typing
-                        if (document.activeElement && el) {
-                             const isSelfOrChild = document.activeElement.id === item.id || el.contains(document.activeElement);
-                             const isShadowChild = document.activeElement.closest && document.activeElement.closest(`#${item.id}`);
-                             
-                             if (isSelfOrChild || isShadowChild) {
-                                 // Check if it's actually an input that needs protection
-                                 const tag = document.activeElement.tagName.toLowerCase();
-                                 const isInput = tag === 'input' || tag === 'textarea' || tag.startsWith('sl-input') || tag.startsWith('sl-textarea');
+                    // Helper function to apply updates
+                    const applyUpdates = (items) => {
+                        items.forEach(item => {
+                            const el = document.getElementById(item.id);
+                            
+                            // Focus Guard: Skip update if element is focused input to prevent interrupting typing
+                            if (document.activeElement && el) {
+                                 const isSelfOrChild = document.activeElement.id === item.id || el.contains(document.activeElement);
+                                 const isShadowChild = document.activeElement.closest && document.activeElement.closest(`#${item.id}`);
                                  
-                                 // If it's an input, block update. If it's a button (nav menu), ALLOW update.
-                                 if (isInput) {
-                                     return;
+                                 if (isSelfOrChild || isShadowChild) {
+                                     // Check if it's actually an input that needs protection
+                                     const tag = document.activeElement.tagName.toLowerCase();
+                                     const isInput = tag === 'input' || tag === 'textarea' || tag.startsWith('sl-input') || tag.startsWith('sl-textarea');
+                                     
+                                     // If it's an input, block update. If it's a button (nav menu), ALLOW update.
+                                     if (isInput) {
+                                         return;
+                                     }
                                  }
-                             }
-                        }
+                            }
 
-                        if(el) {
-                            // Smart update for specific widget types to preserve animations/instances
-                            const widgetType = item.id.split('_')[0];
-                            let smartUpdated = false;
-                            
-                            // Checkbox/Toggle: Update checked property only (preserve animation)
-                            if (widgetType === 'checkbox' || widgetType === 'toggle') {
-                                // Parse new HTML to extract checked state
-                                const temp = document.createElement('div');
-                                temp.innerHTML = item.html;
-                                const newCheckbox = temp.querySelector('sl-checkbox, sl-switch');
+                            if(el) {
+                                // Smart update for specific widget types to preserve animations/instances
+                                const widgetType = item.id.split('_')[0];
+                                let smartUpdated = false;
                                 
-                                if (newCheckbox) {
-                                    // Find the actual checkbox element (may be direct or nested)
-                                    const checkboxEl = el.tagName && (el.tagName.toLowerCase() === 'sl-checkbox' || el.tagName.toLowerCase() === 'sl-switch')
-                                        ? el 
-                                        : el.querySelector('sl-checkbox, sl-switch');
+                                // Checkbox/Toggle: Update checked property only (preserve animation)
+                                if (widgetType === 'checkbox' || widgetType === 'toggle') {
+                                    // Parse new HTML to extract checked state
+                                    const temp = document.createElement('div');
+                                    temp.innerHTML = item.html;
+                                    const newCheckbox = temp.querySelector('sl-checkbox, sl-switch');
                                     
-                                    if (checkboxEl) {
-                                        const shouldBeChecked = newCheckbox.hasAttribute('checked');
-                                        // Only update if different to avoid interrupting user interaction
-                                        if (checkboxEl.checked !== shouldBeChecked) {
-                                            checkboxEl.checked = shouldBeChecked;
+                                    if (newCheckbox) {
+                                        // Find the actual checkbox element (may be direct or nested)
+                                        const checkboxEl = el.tagName && (el.tagName.toLowerCase() === 'sl-checkbox' || el.tagName.toLowerCase() === 'sl-switch')
+                                            ? el 
+                                            : el.querySelector('sl-checkbox, sl-switch');
+                                        
+                                        if (checkboxEl) {
+                                            const shouldBeChecked = newCheckbox.hasAttribute('checked');
+                                            // Only update if different to avoid interrupting user interaction
+                                            if (checkboxEl.checked !== shouldBeChecked) {
+                                                checkboxEl.checked = shouldBeChecked;
+                                            }
+                                            smartUpdated = true;
                                         }
-                                        smartUpdated = true;
                                     }
                                 }
-                            }
-                            
-                            // Data Editor: Update AG Grid data only
-                            if (widgetType === 'data' && item.id.includes('editor')) {
-                                // item.id is like "data_editor_xxx_wrapper", extract base cid
-                                const baseCid = item.id.replace('_wrapper', '');
-                                const gridApi = window['gridApi_' + baseCid];
-                                if (gridApi) {
-                                    // Extract rowData from new HTML
-                                    const match = item.html.match(/rowData:\s*(\[.*?\])/s);
-                                    if (match) {
-                                        try {
-                                            const newData = JSON.parse(match[1]);
-                                            gridApi.setRowData(newData);
-                                            smartUpdated = true;
-                                        } catch (e) {
-                                            console.error('Failed to parse AG Grid data:', e);
+                                
+                                // Data Editor: Update AG Grid data only
+                                if (widgetType === 'data' && item.id.includes('editor')) {
+                                    // item.id is like "data_editor_xxx_wrapper", extract base cid
+                                    const baseCid = item.id.replace('_wrapper', '');
+                                    const gridApi = window['gridApi_' + baseCid];
+                                    if (gridApi) {
+                                        // Extract rowData from new HTML
+                                        const match = item.html.match(/rowData:\s*(\[.*?\])/s);
+                                        if (match) {
+                                            try {
+                                                const newData = JSON.parse(match[1]);
+                                                gridApi.setRowData(newData);
+                                                smartUpdated = true;
+                                            } catch (e) {
+                                                console.error('Failed to parse AG Grid data:', e);
+                                            }
                                         }
                                     }
                                 }
-                            }
-                            
-                            // Default: Full DOM replacement
-                            if (!smartUpdated) {
-                                purgePlotly(el);
-                                el.outerHTML = item.html;
                                 
-                                // Execute scripts
-                                const temp = document.createElement('div');
-                                temp.innerHTML = item.html;
-                                temp.querySelectorAll('script').forEach(s => {
-                                    const script = document.createElement('script');
-                                    script.textContent = s.textContent;
-                                    document.body.appendChild(script);
-                                    script.remove();
-                                });
-                            }
-                        }
-                    });
-                    
-                    // Page updates: use View Transitions if available
-                    if (pageUpdates.length > 0) {
-                        const updatePages = () => {
-                            pageUpdates.forEach(item => {
-                                const el = document.getElementById(item.id);
-                                if(el) {
+                                // Default: Full DOM replacement
+                                if (!smartUpdated) {
                                     purgePlotly(el);
                                     el.outerHTML = item.html;
                                     
+                                    // Execute scripts
                                     const temp = document.createElement('div');
                                     temp.innerHTML = item.html;
                                     temp.querySelectorAll('script').forEach(s => {
@@ -1777,14 +1770,17 @@ HTML_TEMPLATE = """
                                         script.remove();
                                     });
                                 }
-                            });
-                        };
-                        
-                        if (document.body.classList.contains('anim-soft') && document.startViewTransition) {
-                            document.startViewTransition(() => updatePages());
-                        } else {
-                            updatePages();
-                        }
+                            }
+                        });
+                    };
+                    
+                    // Apply updates: use View Transitions ONLY for navigation
+                    if (isNavigation && document.body.classList.contains('anim-soft') && document.startViewTransition) {
+                        // Navigation: smooth page transition
+                        document.startViewTransition(() => applyUpdates(msg.payload));
+                    } else {
+                        // Regular updates: apply immediately without animation for snappy response
+                        applyUpdates(msg.payload);
                     }
                 } else if (msg.type === 'eval') {
                     const func = new Function(msg.code);
@@ -1839,8 +1835,16 @@ HTML_TEMPLATE = """
         
         function toggleSidebar() {
             const sb = document.getElementById('sidebar');
+            const main = document.getElementById('main');
+            const chatInput = document.querySelector('.chat-input-container');
             sb.classList.toggle('collapsed');
+            main.classList.toggle('sidebar-collapsed');
+            // Also adjust chat input container if present
+            if (chatInput) {
+                chatInput.style.left = sb.classList.contains('collapsed') ? '0' : '300px';
+            }
         }
+
         function createToast(message, variant = 'primary', icon = 'info-circle') {
             const variantColors = { primary: '#0ea5e9', success: '#10b981', warning: '#f59e0b', danger: '#ef4444' };
             const toast = document.createElement('div');
@@ -1971,7 +1975,7 @@ HTML_TEMPLATE = """
         <div id="sidebar" style="%SIDEBAR_STYLE%">
             %SIDEBAR_CONTENT%
         </div>
-        <div id="main">
+        <div id="main" class="%MAIN_CLASS%">
             <div id="header">
                  <sl-icon-button name="list" style="font-size: 1.5rem; color: var(--sl-text);" onclick="toggleSidebar()"></sl-icon-button>
             </div>

violit/engine.py

@@ -23,11 +23,24 @@ class WsEngine:
     def click_attrs(self, cid: str):
         return {"onclick": f"window.sendAction('{cid}')"}
         
-    async def push_updates(self, sid: str, components: List[Component]):
+    async def push_updates(self, sid: str, components: List[Component], is_navigation: bool = False):
+        """Push component updates to client
+        
+        Args:
+            sid: Session ID
+            components: List of components to update
+            is_navigation: If True, apply smooth page transition animation.
+                          If False (default), update immediately without animation.
+        """
         if sid in self.sockets:
             payload = [{"id": c.id, "html": c.render()} for c in components]
-            await self.sockets[sid].send_json({"type": "update", "payload": payload})
+            await self.sockets[sid].send_json({
+                "type": "update", 
+                "payload": payload,
+                "isNavigation": is_navigation  # Flag for client to determine animation
+            })
 
     async def push_eval(self, sid: str, code: str):
         if sid in self.sockets:
             await self.sockets[sid].send_json({"type": "eval", "code": code})
+

violit/widgets/chat_widgets.py

@@ -116,7 +116,7 @@ class ChatWidgetsMixin:
             <div class="chat-input-container" style="
                 position: fixed; 
                 bottom: 0; 
-                left: 0;
+                left: 300px;
                 right: 0;
                 padding: 20px; 
                 background: linear-gradient(to top, var(--sl-bg) 80%, transparent);
@@ -124,6 +124,7 @@ class ChatWidgetsMixin:
                 display: flex;
                 justify-content: center;
                 pointer-events: none;
+                transition: left 0.3s ease;
             ">
                 <div style="
                     width: 100%;