kash-shell 0.3.16__py3-none-any.whl → 0.3.18__py3-none-any.whl

kash/web_gen/templates/components/toc_scripts.js.jinja

@@ -0,0 +1,319 @@
+// Table of Contents functionality
+function initTOC() {
+  const tocContainer = document.getElementById('toc-container');
+  const tocList = document.getElementById('toc-list');
+  const tocToggle = document.getElementById('toc-toggle');
+  const contentContainer = document.getElementById('content-container');
+  const mainContent = document.getElementById('main-content');
+  
+  if (!tocContainer || !tocList || !mainContent) {
+    console.debug("TOC not initialized: missing elements");
+    return;
+  }
+  
+  const tocBreakpoint = parseInt(
+    getComputedStyle(document.documentElement)
+      .getPropertyValue('--toc-breakpoint')
+      .replace('px', '')
+  );
+  
+  // Find all headings in the main content
+  const headings = mainContent.querySelectorAll('{{ toc_headings | default("h1, h2, h3") }}');
+  // Only show TOC if we have toc_min_headings (default 10) or more headings
+  const tocThreshold = {{ toc_min_headings | default(10) }};
+  
+  if (headings.length < tocThreshold) {
+    // TOC is disabled
+    contentContainer.classList.remove('content-with-toc');
+    if (tocToggle) {
+      tocToggle.style.display = 'none';
+    }
+    console.debug("TOC hidden: not enough headings");
+    return;
+  }
+
+  // TOC is enabled
+  contentContainer.classList.add('has-toc');  // This triggers grid layout
+  mainContent.classList.add('with-toc');
+  document.body.classList.add('page-has-toc');
+  
+  if (tocToggle) {
+    tocToggle.style.display = 'flex';
+    // Ensure feather icon is rendered after making visible
+    if (typeof feather !== 'undefined') {
+      feather.replace();
+    }
+  }
+  
+  // Generate TOC items
+  tocList.innerHTML = '';
+  
+  // If there is only one h1, skip it as it is the title of the page.
+  let filteredHeadings = Array.from(headings);
+  if (headings.length > 0) {
+    const firstHeading = headings[0];
+    const h1Count = filteredHeadings.filter(h => h.tagName.toLowerCase() === 'h1').length;
+
+    if (firstHeading.tagName.toLowerCase() === 'h1' && h1Count === 1) {
+      filteredHeadings = filteredHeadings.slice(1);
+    }
+  }
+  
+  filteredHeadings.forEach((heading, index) => {
+    // Ensure heading has an ID
+    if (!heading.id) {
+      const text = heading.textContent.trim().toLowerCase()
+        .replace(/[^\w\s-]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '');
+      heading.id = text || `heading-${index}`;
+    }
+    
+    const level = heading.tagName.toLowerCase();
+    const text = heading.textContent.trim();
+    
+    const li = document.createElement('li');
+    const a = document.createElement('a');
+    a.href = `#${heading.id}`;
+    a.textContent = text;
+    a.className = `toc-link toc-${level}`;
+    
+    li.appendChild(a);
+    tocList.appendChild(li);
+  });
+  
+  // Mobile TOC toggle functionality
+  if (tocToggle) {
+    const tocBackdrop = document.getElementById('toc-backdrop');
+    let scrollPosition = 0;
+    
+    // Calculate scrollbar width
+    const getScrollbarWidth = () => {
+      // Create a temporary div with scrollbar
+      const outer = document.createElement('div');
+      outer.style.visibility = 'hidden';
+      outer.style.overflow = 'scroll';
+      outer.style.msOverflowStyle = 'scrollbar';
+      document.body.appendChild(outer);
+      
+      // Add inner div
+      const inner = document.createElement('div');
+      outer.appendChild(inner);
+      
+      // Calculate scrollbar width
+      const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+      
+      // Clean up
+      outer.parentNode.removeChild(outer);
+      
+      return scrollbarWidth;
+    };
+    
+    const openTOC = () => {
+      // Save current scroll position
+      scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
+      
+      // Calculate scrollbar width and add padding to prevent shift
+      const scrollbarWidth = getScrollbarWidth();
+      const hasVerticalScrollbar = document.documentElement.scrollHeight > window.innerHeight;
+      
+      // Add classes to show TOC and prevent body scroll
+      tocContainer.classList.add('mobile-visible');
+      if (tocBackdrop) tocBackdrop.classList.add('visible');
+      document.body.classList.add('toc-open');
+      
+      // Set body position to maintain scroll position while fixed
+      document.body.style.top = `-${scrollPosition}px`;
+      
+      // Add padding to compensate for scrollbar removal (only if there was a scrollbar)
+      if (hasVerticalScrollbar && scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
+      }
+    };
+    
+    const closeTOC = () => {
+      // Remove classes
+      tocContainer.classList.remove('mobile-visible');
+      if (tocBackdrop) tocBackdrop.classList.remove('visible');
+      document.body.classList.remove('toc-open');
+      
+      // Restore body position and scroll
+      document.body.style.top = '';
+      document.body.style.paddingRight = '';
+      window.scrollTo(0, scrollPosition);
+    };
+    
+    tocToggle.addEventListener('click', () => {
+      if (tocContainer.classList.contains('mobile-visible')) {
+        closeTOC();
+      } else {
+        openTOC();
+      }
+    });
+    
+    // Close TOC when clicking backdrop
+    if (tocBackdrop) {
+      tocBackdrop.addEventListener('click', closeTOC);
+    }
+    
+    // Update the existing click handler to use closeTOC
+    document.addEventListener('click', (e) => {
+      if (window.innerWidth < tocBreakpoint && 
+          tocContainer.classList.contains('mobile-visible') &&
+          !tocContainer.contains(e.target) && 
+          !tocToggle.contains(e.target)) {
+        closeTOC();
+      }
+    });
+    
+    // Prevent touch events from propagating through TOC
+    tocContainer.addEventListener('touchmove', (e) => {
+      e.stopPropagation();
+    }, { passive: false });
+    
+    // Additional scroll prevention for iOS and other edge cases
+    let touchStartY = 0;
+    
+    // Track touch start position
+    tocContainer.addEventListener('touchstart', (e) => {
+      touchStartY = e.touches[0].clientY;
+    }, { passive: true });
+    
+    // Prevent overscroll on TOC container
+    tocContainer.addEventListener('touchmove', (e) => {
+      const touchY = e.touches[0].clientY;
+      const scrollTop = tocContainer.scrollTop;
+      const scrollHeight = tocContainer.scrollHeight;
+      const height = tocContainer.clientHeight;
+      const isScrollingUp = touchY > touchStartY;
+      const isScrollingDown = touchY < touchStartY;
+      
+      // Prevent scroll when at boundaries
+      if ((isScrollingUp && scrollTop <= 0) || 
+          (isScrollingDown && scrollTop + height >= scrollHeight)) {
+        e.preventDefault();
+      }
+    }, { passive: false });
+    
+    // Prevent any scrolling on the backdrop
+    if (tocBackdrop) {
+      tocBackdrop.addEventListener('touchmove', (e) => {
+        e.preventDefault();
+      }, { passive: false });
+    }
+  }
+  
+  // Add smooth scrolling and active state management
+  const tocLinks = tocList.querySelectorAll('.toc-link');
+  tocLinks.forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      const targetId = link.getAttribute('href').substring(1);
+      const target = document.getElementById(targetId);
+      
+      if (target) {
+        // Close TOC first on mobile
+        if (window.innerWidth < tocBreakpoint) {
+          tocContainer.classList.remove('mobile-visible');
+          document.getElementById('toc-backdrop')?.classList.remove('visible');
+          document.body.classList.remove('toc-open');
+          document.body.style.top = '';
+        }
+        
+        target.scrollIntoView({ 
+          behavior: 'smooth',
+          block: 'start'
+        });
+        tocLinks.forEach(l => l.classList.remove('active'));
+        link.classList.add('active');
+        
+      }
+    });
+  });
+  
+  // Add click handler for Contents title link
+  const tocTitleLink = document.getElementById('toc-title-link');
+  if (tocTitleLink) {
+    tocTitleLink.addEventListener('click', (e) => {
+      e.preventDefault();
+      scrollToTop();
+    });
+  }
+  
+  // Scroll to top function
+  function scrollToTop() {
+    // Close TOC first on mobile
+    if (window.innerWidth < tocBreakpoint) {
+      tocContainer.classList.remove('mobile-visible');
+      document.getElementById('toc-backdrop')?.classList.remove('visible');
+      document.body.classList.remove('toc-open');
+      document.body.style.top = '';
+    }
+    
+    // Scroll to top
+    window.scrollTo({ 
+      top: 0, 
+      behavior: 'smooth' 
+    });
+  }
+  
+  // Helper function to check if TOC toggle should be visible
+  const updateTocToggleVisibility = () => {
+    if (tocToggle && tocLinks.length > 0) {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const activeLink = tocList.querySelector('.toc-link.active');
+      const firstTocLink = tocLinks[0];
+      
+      // Only show toggle if:
+      // 1. We've scrolled down at least 100px from the top, AND
+      // 2. We're past the first section (activeLink exists and is not the first)
+      const hasScrolled = scrollTop > 100;
+      const isPastFirstSection = activeLink && activeLink !== firstTocLink;
+      const showToggle = hasScrolled && isPastFirstSection;
+      
+      tocToggle.classList.toggle('show-toggle', showToggle);
+    }
+  };
+  
+  // Intersection Observer for active state
+  const observerOptions = {
+    rootMargin: '-20% 0% -70% 0%',
+    threshold: 0
+  };
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        tocLinks.forEach(link => link.classList.remove('active'));
+        const activeLink = tocList.querySelector(`a[href="#${entry.target.id}"]`);
+        if (activeLink) {
+          activeLink.classList.add('active');
+        }
+      }
+    });
+    
+    // Update toggle visibility after intersection changes
+    updateTocToggleVisibility();
+  }, observerOptions);
+  
+  filteredHeadings.forEach(heading => observer.observe(heading));
+  
+  // Update toggle visibility on scroll
+  let scrollTimeout;
+  window.addEventListener('scroll', () => {
+    // Throttle scroll events for performance
+    clearTimeout(scrollTimeout);
+    scrollTimeout = setTimeout(updateTocToggleVisibility, 16); // ~60fps
+  });
+  
+  // Initial check
+  updateTocToggleVisibility();
+}
+
+// Initialize immediately, no setTimeout
+document.addEventListener('DOMContentLoaded', () => {
+  initTOC();
+  if (typeof feather !== 'undefined') {
+    feather.replace();
+  }
+}); 

kash/web_gen/templates/components/toc_styles.css.jinja

@@ -0,0 +1,284 @@
+/* Table of Contents Styles */
+:root {
+  --toc-width: max(21vw, 15rem);
+  --toc-breakpoint: {{ toc_breakpoint | default(1200) }}px;
+}
+
+@media (min-width: 1536px) {
+  :root {
+    --toc-width: min(21vw, 30rem);
+  }
+}
+
+/* Desktop: Always use grid layout, adjust TOC column width */
+@media (min-width: {{ toc_breakpoint | default(1200) }}px) {
+  .content-with-toc {
+    display: grid;
+    grid-template-columns: calc(var(--toc-width) + 4rem) 1fr;
+    max-width: none;
+    min-height: 100vh;
+  }
+  
+  .content-with-toc.has-toc {
+    grid-template-columns: calc(var(--toc-width) + 4rem) 1fr;
+  }
+  
+  /* Content goes in the second column (right side) */
+  .content-with-toc .long-text {
+    max-width: 48rem;
+    margin-left: max(1rem, calc((100vw - 48rem) / 2 - var(--toc-width)));
+    margin-right: auto;
+    order: 2;
+    grid-column: 2;
+  }
+  
+  /* TOC goes in the first column (left side) */
+  .toc-container {
+    order: 1;
+    grid-column: 1;
+    align-self: start;
+    width: var(--toc-width);
+    position: sticky;
+    top: 2rem;
+    max-height: calc(100vh - 4rem);
+    overflow-y: auto;
+    padding: 0.5rem 0.7rem 1rem 1.2rem;
+    margin: 0 0 0 2rem;
+    border: 1px solid var(--color-border-hint);
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+
+  .content-with-toc.has-toc .toc-container {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  
+  /* Hide mobile toggle on desktop */
+  .toc-toggle {
+    display: none !important;
+  }
+  
+  /* More minimal TOC scrollbar */
+  .toc-container::-webkit-scrollbar {
+    width: 2px; 
+  }
+  .toc-container::-webkit-scrollbar-track {
+    background: transparent; /* Invisible track */
+  }
+  .toc-container::-webkit-scrollbar-thumb {
+    background: var(--color-hint-gentle);
+    border-radius: 2px;
+    opacity: 0.1;
+  }
+  .toc-container::-webkit-scrollbar-thumb:hover {
+    opacity: 0.2;
+  }
+  .toc-container {
+    /* For Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-hint-gentle) transparent;
+  }
+}
+
+/* TOC Styling */
+.toc {  
+  font-family: var(--font-sans);
+  color: var(--color-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.toc-title {
+  font-size: var(--font-size-small);
+  font-weight: 550;
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+  padding-left: 0.3rem;
+  border-bottom: 1px solid var(--color-border-hint);
+  border-left: none !important; /* Override toc-link border */
+}
+
+.toc-list {
+  list-style: none;
+  margin: 0.5rem 0 0 0;
+  padding: 0;
+  font-size: var(--font-size-small);
+  line-height: 1.2;
+}
+
+.toc-list li {
+  margin: 0;
+}
+
+.toc-list li::before {
+  display: none; /* Remove custom bullet points */
+}
+
+.toc-link {
+  display: block;
+  color: var(--color-tertiary);
+  text-decoration: none;
+  padding-top: 0.2rem;
+  padding-bottom: 0.2rem;
+  transition: background 0.4s ease-in-out, all 0.15s ease-in-out;
+  border-left: 2px solid transparent;
+}
+
+.toc-link:hover {
+  color: var(--color-secondary);
+  background-color: var(--color-hover-bg);
+  text-decoration: none;
+}
+
+.toc-link.active {
+  color: var(--color-secondary);
+  border-left: 2px solid var(--color-primary);
+  background-color: var(--color-bg-selected);
+}
+
+/* Hanging indent and styles for each TOC heading */
+.toc-h1 {
+  padding-left: 1.3rem;
+  text-indent: -1em;
+  font-weight: 550;
+  letter-spacing: 0.007em;
+}
+.toc-h2 {
+  padding-left: 2.0rem;
+  text-indent: -1em;
+  font-weight: 550;
+  letter-spacing: 0.007em;
+}
+.toc-h3 {
+  padding-left: 2.7rem;
+  text-indent: -1em;
+  font-weight: 370;
+}
+.toc-h4 {
+  padding-left: 3.4rem;
+  text-indent: -1em;
+  font-weight: 370;
+}
+
+/* Prevent body scroll when TOC is open */
+body.toc-open {
+  overflow: hidden;
+  position: fixed;
+  width: 100%;
+  /* Prevent iOS bounce scrolling on body */
+  touch-action: none;
+  -webkit-overflow-scrolling: auto;
+}
+
+/* Mobile TOC Layout */
+@media (max-width: {{ toc_breakpoint | default(1200) - 1 }}px) {
+  /* TOC backdrop - semi-transparent overlay */
+  .toc-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 199; /* Below TOC container (200) but above everything else */
+    
+    /* Hidden by default */
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    
+    /* Smooth transition */
+    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+  }
+  
+  /* Specific positioning and z-index for TOC toggle */
+  .toc-toggle {
+    left: 1rem;
+    z-index: 101;
+    opacity: 0; /* Hidden by default */
+    visibility: hidden; /* Start hidden for FOUC prevention on mobile */
+    transition: opacity 0.3s ease-in-out, 
+                visibility 0.3s ease-in-out,
+                background-color 0.4s ease-in-out,
+                color 0.4s ease-in-out;
+  }
+  
+  /* Show TOC toggle when user has scrolled past top */
+  .toc-toggle.show-toggle {
+    opacity: 1;
+    visibility: visible;
+  }
+  
+  /* Show backdrop when visible */
+  .toc-backdrop.visible {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    /* Prevent any scrolling or touch interaction on backdrop */
+    touch-action: none;
+    -webkit-overflow-scrolling: auto;
+    overflow: hidden;
+  }
+  
+  /* Mobile TOC state: always rendered but hidden by default */
+  .toc-container {
+    display: block !important; /* Override base rule and any JS inline styles */
+    position: fixed;
+    top: 4rem;
+    left: 1rem;
+    width: calc(100vw - 2rem);
+    max-height: calc(100vh - 5rem);
+    /* Keep background and darker text on mobile since it's primary UI */
+    color: var(--color-text);
+    background: var(--color-bg-alt-solid);
+    border: 1px solid var(--color-border-hint);
+    padding: 1rem 0.7rem;
+    z-index: 200;
+    
+    /* Ensure TOC itself is scrollable */
+    overflow-y: auto;
+    overflow-x: hidden; /* Prevent horizontal scroll */
+    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
+    overscroll-behavior: contain; /* Prevent scroll chaining */
+    
+    /* Ensure touch scrolling works properly */
+    touch-action: pan-y;
+    
+    /* Initial hidden state for mobile FOUC and animation */
+    opacity: 0;
+    transform: translateY(-0.5rem);
+    visibility: hidden;
+    pointer-events: none; /* Prevent interaction when hidden */
+    
+    transition: opacity 0.3s ease-in-out, 
+                transform 0.3s ease-in-out, 
+                visibility 0.3s ease-in-out,
+                pointer-events 0.3s ease-in-out,
+                background-color 0.4s ease-in-out, 
+                border-color 0.4s ease-in-out, 
+                box-shadow 0.4s ease-in-out;
+  }
+  
+  /* Darker text on mobile */
+  .toc {
+    color: var(--color-secondary);
+  }
+  .toc-link {
+    color: var(--color-secondary);
+  }
+  .toc-link:hover {
+    color: var(--color-text);
+  }
+
+  .toc-link.active {
+    color: var(--color-text);
+  }
+    
+  .toc-container.mobile-visible {
+    /* Visible state */
+    opacity: 1;
+    transform: translateY(0);
+    visibility: visible;
+    pointer-events: auto; /* Re-enable interaction */
+  }
+}