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

kash/web_gen/templates/base_styles.css.jinja

@@ -5,7 +5,8 @@
   --font-sans: "Source Sans 3 Variable", sans-serif, "Hack Nerd Font";
   --font-serif: "PT Serif", serif, "Hack Nerd Font";
   /* Source Sans 3 Variable better at these weights. */
-  --font-weight-sans-bold: 620;
+  --font-weight-sans-medium: 565;
+  --font-weight-sans-bold: 650;
   --font-mono: "Hack Nerd Font", "Menlo", "DejaVu Sans Mono", Consolas, "Lucida Console", monospace;
 
   --font-size-large: 1.2rem;
@@ -68,6 +69,14 @@
 }
 {% endblock scrollbar_styles %}
 
+{% block html_styles %}
+/* Prevent horizontal overflow at the root level */
+html {
+  overflow-x: hidden;
+  width: 100%;
+}
+{% endblock html_styles %}
+
 {% block body_styles %}
 body {
   font-family: var(--font-serif);
@@ -109,7 +118,9 @@ a:hover {
 h1,
 h2,
 h3,
-h4 {
+h4,
+h5,
+h6 {
   line-height: 1.2;
 }
 
@@ -120,7 +131,7 @@ h1 {
 }
 
 h2 {
-  font-size: 1.4rem;
+  font-size: 1.42rem;
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
@@ -129,17 +140,32 @@ h1 + h2 {
   margin-top: 2rem;
 }
 
+h2 + h3 {
+  margin-top: 1.1rem;
+}
+
 h3 {
-  font-size: 1.03rem;
-  margin-top: 1.6rem;
-  margin-bottom: 0.5rem;
+  font-size: 1.18rem;
+  margin-top: 1.4rem;
+  margin-bottom: 0.7rem;
 }
 
 h4 {
+  font-size: 1.1rem;
   margin-top: 1rem;
   margin-bottom: 0.7rem;
 }
 
+h5, h6 {
+  font-size: 1rem;
+  margin-top: 0.7rem;
+  margin-bottom: 0.5rem;
+}
+
+h4+p, h5+p, h6+p {
+  margin-top: 0;
+}
+
 ul {
   list-style-type: none;
   margin-left: 1.8rem;
@@ -262,6 +288,44 @@ pre > code {
   height: 0.875rem;
 }
 
+img {
+  margin: 1rem 0;
+}
+
+details {
+  font-family: var(--font-sans);
+  color: var(--color-text);
+
+  border: 1px solid var(--color-hint-gentle);
+  border-radius: 3px;
+  margin: 0.75rem 0;
+}
+
+summary {
+  color: var(--color-secondary);
+  padding: .5rem 1rem;
+  cursor: pointer;
+  user-select: none;
+  background: var(--color-bg-alt);
+  transition: all 0.15s ease-in-out;
+}
+
+summary:hover {
+  color: var(--color-primary-light);
+  {# background: var(--color-hover-bg); #}
+}
+
+/* keep the border on the summary when open so it blends */
+details[open] summary {
+  border-bottom: 1px solid var(--color-hint-gentle);
+}
+/* focus ring for a11y */
+summary:focus-visible {
+  outline: 3px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+
 hr {
   border: none;
   height: 1.5rem;
@@ -284,6 +348,7 @@ hr:before {
 {% endblock typography %}
 
 {% block long_text_styles %}
+
 /* Long text stylings, for nicely formatting blog post length or longer texts. */
 
 .long-text {
@@ -303,23 +368,36 @@ hr:before {
 
 .long-text h3 {
   font-family: var(--font-sans);
-  font-weight: var(--font-weight-sans-bold);
-  font-size: 1.05rem;
+  font-weight: 565;
   text-transform: uppercase;
   letter-spacing: 0.025em;
 }
 
 .long-text h4 {
+  font-family: var(--font-sans);
+  font-weight: 650;
+  letter-spacing: 0.02em;
+}
+
+.long-text h5 {
   font-family: var(--font-serif);
   font-weight: 700;
 }
 
+.long-text h6 {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-style: italic;
+}
+
 .subtitle {
   font-family: var(--font-serif);
   font-style: italic;
   font-size: 1rem;
 }
 
+/* Adjustments to long text for pure sans-serif pages. */
+
 .long-text .sans-text {
   font-family: var(--font-sans);
 }
@@ -347,7 +425,7 @@ hr:before {
 
 .long-text .sans-text h3 {
   font-family: var(--font-sans);
-  font-size: 1.03rem;
+  font-size: 1.1rem;
   font-weight: var(--font-weight-sans-bold);
   text-transform: uppercase;
   letter-spacing: 0.03em;
@@ -370,6 +448,7 @@ table {
 }
 
 th {
+  font-weight: var(--font-weight-sans-bold);
   text-transform: uppercase;
   letter-spacing: 0.03em;
   border-bottom: 1px solid var(--color-border-hint);
@@ -399,6 +478,9 @@ tbody tr:nth-child(even) {
   /* Default: center tables within their container */
   left: 50%;
   transform: translateX(-50%);
+  /* Prevent container from expanding beyond its content area */
+  overflow-x: auto;
+  overflow-y: visible;
 }
 
 /* When TOC is present, simplify table container positioning */
@@ -456,6 +538,9 @@ sup {
   }
   .table-container {
     width: calc(100vw - 6rem);
+    /* Ensure container doesn't expand beyond its width */
+    max-width: calc(100vw - 6rem);
+    contain: layout inline-size;
   }
   
   /* Apply shadow to long-text containers on larger screens */
@@ -472,14 +557,46 @@ sup {
 
 /* Handle TOC layouts specially - tables should bleed within their grid column */
 @media (min-width: 1200px) {
-  /* When TOC is present, tables should bleed within the content grid column */
-  .content-with-toc.has-toc table {
-    /* Calculate available width: full viewport minus TOC column width minus margins */
-    width: calc(100vw - var(--toc-width, 16rem) - 8rem);
-    max-width: none;
+  .content-with-toc.has-toc {
+    /* Define reusable values for clarity */
+    --content-width: 48rem;
+    --content-min-gap: 2rem;
+    --table-right-margin: 2rem;
+    --long-text-padding: 4rem; /* md:px-16 = 4rem */
+    
+    /* Where content would be if centered in viewport */
+    --content-centered-left: calc((100vw - var(--content-width)) / 2);
+    
+    /* Content's left margin within its grid column */
+    --content-margin-left: max(var(--content-min-gap), calc(var(--content-centered-left) - var(--toc-width)));
+    
+    /* Content text's actual position from viewport left edge (excluding padding) */
+    --content-text-viewport-left: calc(var(--toc-width) + var(--content-margin-left));
   }
+
+  /* When TOC is present, tables should align with main content and bleed right */
   .content-with-toc.has-toc .table-container {
-    width: calc(100vw - var(--toc-width, 16rem) - 8rem);
+    /* Remove default positioning */
+    left: 0;
+    transform: none;
+    
+    /* Pull table left to align with content's text position */
+    /* Need to compensate for both content margin AND long-text padding */
+    margin-left: calc(-1 * (var(--content-margin-left) + var(--long-text-padding)));
+    
+    /* Table bleeds wide as can fit */
+    width: calc(100vw - var(--content-text-viewport-left) - var(--table-right-margin));
+    max-width: calc(100vw - var(--content-text-viewport-left) - var(--table-right-margin));
+    
+    /* Ensure horizontal scroll works properly without expanding container */
+    overflow-x: auto;
+    overflow-y: visible;
+    contain: layout inline-size;
+  }
+  
+  .content-with-toc.has-toc table {
+    /* Let table fill its container */
+    width: 100%;
     max-width: none;
   }
   
@@ -517,13 +634,18 @@ sup {
   
   /* Make table containers scrollable without affecting page layout */
   .table-container {
+    width: calc(100vw - 3rem);  /* Fixed width instead of max-width */
     max-width: calc(100vw - 3rem);
     overflow-x: auto;
+    overflow-y: visible;  /* Ensure vertical overflow is not hidden */
     transform: none;
     left: 0;
     position: relative;
     margin-left: auto;
     margin-right: auto;
+    /* Prevent container from expanding beyond its width */
+    box-sizing: border-box;
+    contain: layout inline-size;  /* CSS containment to prevent width expansion */
   }
   
   table {

kash/web_gen/templates/base_webpage.html.jinja

@@ -50,14 +50,13 @@
   <link rel="preload" as="font" type="font/woff2" crossorigin
     href="https://cdn.jsdelivr.net/fontsource/fonts/source-sans-3:vf@latest/latin-wght-italic.woff2" />
 
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
+  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
   <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js" defer></script>
   {% endblock head_basic %}
 
   {% block head_extra %}{% endblock head_extra %}
 
   <style>
-
     body {
       background: var(--color-bg);
       color: var(--color-text);
@@ -65,7 +64,7 @@
     }
 
     .button {
-      color: var(--color-hint);
+      color: var(--color-hint-strong);
       background: var(--color-bg);
       border: none;
       padding: 0;
@@ -75,8 +74,8 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 2.5rem;
-      height: 2.5rem;
+      width: 2.2rem;
+      height: 2.2rem;
       
       /* Separate transitions for theme vs interaction */
       transition: background-color 0.4s ease-in-out, 
@@ -88,23 +87,15 @@
     .button:hover {
       background: var(--color-hover-bg);
       color: var(--color-primary);
+      transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
     }
 
     .button svg {
-      width: 1rem;
-      height: 1rem;
-      transition: inherit; /* Inherit the color transition */
+      width: 1.2rem;
+      height: 1.2rem;
+      transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
     }
 
-    /* Dark mode styles for buttons */
-    [data-theme="dark"] .button {
-      color: var(--color-primary-light);
-    }
-
-    [data-theme="dark"] .button:hover {
-      background: var(--color-hover-bg);
-      color: var(--color-bright);
-    }
 
     /* Positioning class for fixed buttons */
     .fixed-button {
@@ -112,6 +103,11 @@
       top: 1rem;
     }
 
+    .floating-button {
+      border: 1px solid var(--color-hint-gentle);
+      background: var(--color-bg-alt);
+    }
+
     /* Specific positioning and z-index for theme toggle */
     .theme-toggle {
       right: 1rem;

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();
+  }
+});