treesap 0.1.9 → 0.1.11

package/dist/static/components/Sidebar.js

@@ -0,0 +1,225 @@
+// Sidebar component JavaScript for responsive behavior
+import { sidebarStore } from '/signals/SidebarSignal.js';
+
+class SidebarManager {
+  constructor(id = 'sidebar') {
+    this.id = id;
+    
+    // DOM elements
+    this.backdrop = document.getElementById(`${id}-backdrop`);
+    this.pane = document.getElementById(`${id}-pane`);
+    this.closeBtn = document.getElementById(`${id}-close-btn`);
+    this.refreshBtn = document.getElementById('live-preview-refresh-btn');
+    this.urlInput = document.getElementById('live-preview-url-input');
+    this.loadBtn = document.getElementById('live-preview-load-btn');
+    
+    // Reference to the sidebar store
+    this.store = sidebarStore;
+    
+    this.init();
+  }
+
+  init() {
+    console.log('Initializing Sidebar:', this.id);
+    console.log('Elements found:', {
+      backdrop: !!this.backdrop,
+      pane: !!this.pane,
+      closeBtn: !!this.closeBtn,
+      refreshBtn: !!this.refreshBtn,
+      urlInput: !!this.urlInput,
+      loadBtn: !!this.loadBtn
+    });
+    
+    // Set up event listeners
+    this.setupEventListeners();
+    
+    // Subscribe to store state changes
+    this.subscribeToStore();
+    
+    // Initial state update
+    this.updateSidebarState();
+    this.updateMobileToggle();
+  }
+
+  setupEventListeners() {
+    // Mobile close button
+    this.closeBtn?.addEventListener('click', () => this.store.close());
+    
+    // Backdrop click to close
+    this.backdrop?.addEventListener('click', () => this.store.close());
+    
+    // Mobile toggle button (in main layout)
+    const mobileToggle = document.getElementById('mobile-sidebar-toggle');
+    mobileToggle?.addEventListener('click', () => this.store.toggle());
+    
+    // Refresh button
+    this.refreshBtn?.addEventListener('click', () => this.refreshPreview());
+    
+    // URL navigation
+    this.loadBtn?.addEventListener('click', (e) => {
+      e.preventDefault();
+      this.loadUrl();
+    });
+    
+    this.urlInput?.addEventListener('keypress', (e) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        this.loadUrl();
+      }
+    });
+    
+    // Keyboard shortcuts
+    document.addEventListener('keydown', (e) => {
+      // Escape key to close sidebar on mobile
+      if (e.key === 'Escape' && this.store.isMobile.value && this.store.isOpen.value) {
+        e.preventDefault();
+        this.store.close();
+      }
+      
+      // Cmd/Ctrl + B to toggle sidebar
+      if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
+        e.preventDefault();
+        this.store.toggle();
+      }
+    });
+    
+    // Listen for custom events to maintain backward compatibility
+    document.addEventListener('sidebar:toggle', () => this.store.toggle());
+    document.addEventListener('sidebar:open', () => this.store.open());
+    document.addEventListener('sidebar:close', () => this.store.close());
+  }
+
+  subscribeToStore() {
+    // Subscribe to store changes and update UI accordingly
+    this.store.isOpen.subscribe(() => this.updateSidebarState());
+    this.store.isMobile.subscribe(() => this.updateSidebarState());
+    this.store.shouldShowBackdrop.subscribe(() => this.updateSidebarState());
+    this.store.shouldShowMobileToggle.subscribe(() => this.updateMobileToggle());
+  }
+
+  updateSidebarState() {
+    if (!this.pane || !this.backdrop) return;
+    
+    const isOpen = this.store.isOpen.value;
+    const isMobile = this.store.isMobile.value;
+    const shouldShowBackdrop = this.store.shouldShowBackdrop.value;
+    
+    if (isMobile) {
+      // Mobile behavior: overlay
+      if (shouldShowBackdrop) {
+        // Show backdrop
+        this.backdrop.classList.remove('opacity-0', 'pointer-events-none');
+        this.backdrop.classList.add('opacity-100');
+        
+        // Prevent body scroll
+        document.body.style.overflow = 'hidden';
+      } else {
+        // Hide backdrop
+        this.backdrop.classList.remove('opacity-100');
+        this.backdrop.classList.add('opacity-0', 'pointer-events-none');
+        
+        // Restore body scroll
+        document.body.style.overflow = '';
+      }
+      
+      if (isOpen) {
+        // Show sidebar
+        this.pane.classList.remove('-translate-x-full');
+        this.pane.classList.add('translate-x-0');
+      } else {
+        // Hide sidebar
+        this.pane.classList.remove('translate-x-0');
+        this.pane.classList.add('-translate-x-full');
+      }
+    } else {
+      // Desktop behavior: side panel
+      // Hide backdrop (not needed on desktop)
+      this.backdrop.classList.add('opacity-0', 'pointer-events-none');
+      
+      // Restore body scroll
+      document.body.style.overflow = '';
+      
+      if (isOpen) {
+        // Show sidebar
+        this.pane.classList.remove('-translate-x-full');
+        this.pane.classList.add('translate-x-0');
+        this.pane.style.display = '';
+      } else {
+        // Hide sidebar completely on desktop
+        this.pane.style.display = 'none';
+      }
+    }
+  }
+
+  updateMobileToggle() {
+    const mobileToggle = document.getElementById('mobile-sidebar-toggle');
+    const shouldShow = this.store.shouldShowMobileToggle.value;
+    
+    if (mobileToggle) {
+      mobileToggle.style.display = shouldShow ? 'flex' : 'none';
+    }
+  }
+
+  refreshPreview() {
+    // Dispatch event for SimpleLivePreview to handle
+    document.dispatchEvent(new CustomEvent('preview:refresh'));
+  }
+
+  loadUrl() {
+    if (this.urlInput) {
+      const path = this.urlInput.value.trim();
+      // Dispatch event for SimpleLivePreview to handle
+      document.dispatchEvent(new CustomEvent('preview:loadUrl', {
+        detail: { path }
+      }));
+    }
+  }
+
+  // Public API methods
+  getState() {
+    return this.store.getState();
+  }
+
+  destroy() {
+    // Restore body scroll
+    document.body.style.overflow = '';
+    
+    // Clean up is handled by the signal store
+  }
+}
+
+// Auto-initialize when script loads
+console.log('Sidebar.js loaded, looking for sidebar containers...');
+
+function initializeSidebar() {
+  // Look for sapling-islands containing sidebar content
+  const saplingIslands = document.querySelectorAll('sapling-island');
+  
+  for (const island of saplingIslands) {
+    // Look for sidebar pane div
+    const sidebarPane = island.querySelector('div[id$="-pane"]');
+    if (sidebarPane && sidebarPane.id.includes('sidebar')) {
+      const sidebarId = sidebarPane.id.replace('-pane', '');
+      console.log('Found Sidebar component with ID:', sidebarId);
+      
+      // Create and store manager
+      const manager = new SidebarManager(sidebarId);
+      window.sidebarManager = manager; // Make globally available
+      
+      break; // Only one sidebar per page
+    }
+  }
+}
+
+// Initialize immediately since Sapling islands are ready
+initializeSidebar();
+
+// Make available globally
+window.SidebarManager = SidebarManager;
+
+// Cleanup on page unload
+window.addEventListener('beforeunload', () => {
+  if (window.sidebarManager) {
+    window.sidebarManager.destroy();
+  }
+});

package/dist/static/components/SimpleLivePreview.js

@@ -1,4 +1,6 @@
 // SimpleLivePreview component JavaScript
+import { sidebarStore } from '/signals/SidebarSignal.js';
+
 class SimpleLivePreviewManager {
   constructor(id = 'simple-preview') {
     this.id = id;
@@ -17,8 +19,8 @@ class SimpleLivePreviewManager {
     // Get preview port from iframe data attribute
     this.previewPort = this.iframe?.getAttribute('data-preview-port') || 5173;
     
-    // State
-    this.isSidebarHidden = false;
+    // Reference to the sidebar store
+    this.store = sidebarStore;
     
     this.init();
   }
@@ -34,12 +36,15 @@ class SimpleLivePreviewManager {
     
     // Set up event listeners
     this.setupEventListeners();
+    
+    // Subscribe to sidebar store changes
+    this.subscribeToStore();
   }
 
   setupEventListeners() {
     // Hide sidebar toggle (both sidebar and floating button)
-    this.hideSidebarBtn?.addEventListener('click', () => this.toggleSidebarVisibility());
-    this.floatingHideSidebarBtn?.addEventListener('click', () => this.toggleSidebarVisibility());
+    this.hideSidebarBtn?.addEventListener('click', () => this.store.toggle());
+    this.floatingHideSidebarBtn?.addEventListener('click', () => this.store.toggle());
 
     // Refresh button
     this.refreshBtn?.addEventListener('click', () => this.refreshIframe());
@@ -62,6 +67,21 @@ class SimpleLivePreviewManager {
       this.loadUrl();
     });
 
+    // Listen for events from Sidebar component
+    document.addEventListener('preview:refresh', () => this.refreshIframe());
+    document.addEventListener('preview:loadUrl', (e) => {
+      if (e.detail && e.detail.path !== undefined) {
+        this.loadUrlFromPath(e.detail.path);
+      }
+    });
+
+    // Legacy: Listen for sidebar state changes (for backward compatibility)
+    document.addEventListener('sidebar:stateChanged', (e) => {
+      if (e.detail) {
+        this.handleSidebarStateChange(e.detail);
+      }
+    });
+
     // Keyboard shortcuts
     document.addEventListener('keydown', (e) => {
       // Cmd/Ctrl + R for refresh
@@ -69,11 +89,6 @@ class SimpleLivePreviewManager {
         e.preventDefault();
         this.refreshIframe();
       }
-      // Cmd/Ctrl + B to toggle sidebar panel
-      if ((e.metaKey || e.ctrlKey) && e.key === 'b') {
-        e.preventDefault();
-        this.toggleSidebarVisibility();
-      }
     });
 
     // Handle iframe load errors (for X-Frame-Options violations)
@@ -129,55 +144,41 @@ class SimpleLivePreviewManager {
     }
   }
 
-  toggleSidebarVisibility() {
-    this.isSidebarHidden = !this.isSidebarHidden;
+  subscribeToStore() {
+    // Subscribe to sidebar store changes
+    this.store.shouldShowFloatingButton.subscribe(() => this.updateFloatingButton());
+    this.store.isOpen.subscribe(() => this.updateFloatingButton());
     
-    const sidebarPane = document.getElementById('sidebar-pane');
-    const previewPane = document.getElementById(this.id);
+    // Initial update
+    this.updateFloatingButton();
+  }
+
+  updateFloatingButton() {
+    const floatingBtn = this.floatingHideSidebarBtn;
+    const floatingIcon = this.floatingHideSidebarIcon;
+    const shouldShow = this.store.shouldShowFloatingButton.value;
     
-    if (sidebarPane && previewPane) {
-      if (this.isSidebarHidden) {
-        // Hide sidebar pane and make preview full width
-        sidebarPane.style.display = 'none';
-        previewPane.classList.remove('flex-1');
-        previewPane.classList.add('w-full');
-        
-        // Update button icons and titles
-        if (this.hideSidebarIcon) {
-          this.hideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
-        }
-        if (this.floatingHideSidebarIcon) {
-          this.floatingHideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
-        }
-        if (this.hideSidebarBtn) {
-          this.hideSidebarBtn.setAttribute('title', 'Show Sidebar');
-        }
-        if (this.floatingHideSidebarBtn) {
-          this.floatingHideSidebarBtn.setAttribute('title', 'Show Sidebar');
+    if (floatingBtn) {
+      if (shouldShow) {
+        // Show floating button when sidebar is closed
+        floatingBtn.style.display = 'flex';
+        // Update icon and title
+        if (floatingIcon) {
+          floatingIcon.setAttribute('icon', 'ph:sidebar-simple-fill');
         }
+        floatingBtn.setAttribute('title', 'Show Sidebar');
       } else {
-        // Show sidebar pane and restore original widths
-        sidebarPane.style.display = '';
-        previewPane.classList.remove('w-full');
-        previewPane.classList.add('flex-1');
-        
-        // Update button icons and titles
-        if (this.hideSidebarIcon) {
-          this.hideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple');
-        }
-        if (this.floatingHideSidebarIcon) {
-          this.floatingHideSidebarIcon.setAttribute('icon', 'ph:sidebar-simple');
-        }
-        if (this.hideSidebarBtn) {
-          this.hideSidebarBtn.setAttribute('title', 'Hide Sidebar');
-        }
-        if (this.floatingHideSidebarBtn) {
-          this.floatingHideSidebarBtn.setAttribute('title', 'Hide Sidebar');
-        }
+        // Hide floating button when sidebar is open
+        floatingBtn.style.display = 'none';
       }
     }
   }
 
+  toggleSidebarVisibility() {
+    // Use the store to toggle
+    this.store.toggle();
+  }
+
   refreshIframe() {
     if (this.iframe) {
       console.log('Refreshing iframe...');
@@ -191,7 +192,13 @@ class SimpleLivePreviewManager {
   loadUrl() {
     if (this.urlInput && this.iframe) {
       const path = this.urlInput.value.trim();
-      console.log('loadUrl called with path:', path);
+      this.loadUrlFromPath(path);
+    }
+  }
+
+  loadUrlFromPath(path) {
+    if (this.iframe) {
+      console.log('loadUrlFromPath called with path:', path);
       
       // Check if it's an external URL (starts with http:// or https://)
       if (path.startsWith('http://') || path.startsWith('https://')) {
@@ -201,8 +208,10 @@ class SimpleLivePreviewManager {
           // Open external URLs in a new tab
           console.log('Opening external URL in new tab:', path);
           window.open(path, '_blank');
-          // Clear the input
-          this.urlInput.value = '';
+          // Clear the input if it exists
+          if (this.urlInput) {
+            this.urlInput.value = '';
+          }
           return;
         }
       }
@@ -211,9 +220,20 @@ class SimpleLivePreviewManager {
       const newUrl = path ? baseUrl + '/' + path.replace(/^\//, '') : baseUrl;
       console.log('Loading URL in iframe:', newUrl);
       this.iframe.src = newUrl;
+      
+      // Update input if it exists
+      if (this.urlInput) {
+        this.urlInput.value = path;
+      }
     }
   }
 
+  handleSidebarStateChange(state) {
+    // Legacy method for backward compatibility
+    console.log('Legacy sidebar state changed:', state);
+    // The floating button is now handled by updateFloatingButton()
+  }
+
   handleIframeError() {
     // Get the current iframe src and open it in a new tab if it's external
     if (this.iframe && this.iframe.src) {