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

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

@@ -0,0 +1,482 @@
+/* -----------------------------------------------------------------------------
+   Tooltip CSS Variables
+   ----------------------------------------------------------------------------- */
+
+:root {
+  /* Tooltip spacing */
+  --tooltip-viewport-margin: 10px;
+  --tooltip-gap: 10px;
+  --tooltip-mobile-top-margin: 20px;
+  --tooltip-arrow-size: 5px;
+  
+  /* Tooltip sizing */
+  --tooltip-max-width: 20rem;
+  --tooltip-min-width: 8rem;
+  --tooltip-padding: 0.5rem 0.75rem;
+  
+  /* Footnote tooltip sizing */
+  --footnote-tooltip-max-width: 25rem;
+  --footnote-tooltip-min-width: 12rem;
+  
+  /* Wide screen tooltip sizing */
+  --tooltip-wide-max-width: 22rem;
+  --tooltip-wide-min-width: 16rem;
+  --footnote-wide-max-width: 24rem;
+  --footnote-wide-min-width: 18rem;
+  
+  /* Extra wide screen sizing */
+  --tooltip-extra-wide-max-width: 28rem;
+  --tooltip-extra-wide-min-width: 20rem;
+  --footnote-extra-wide-max-width: 30rem;
+  --footnote-extra-wide-min-width: 22rem;
+  
+  /* Mobile specific */
+  --tooltip-mobile-padding: 0.75rem 1rem;
+  --tooltip-mobile-max-width: 48rem; /* Maximum width for mobile tooltips */
+  
+  /* Transitions */
+  --tooltip-transition-duration: 0.6s;
+  --tooltip-transition-timing: ease-in-out;
+}
+
+/* -----------------------------------------------------------------------------
+   Real DOM Element Tooltip Foundation
+   ----------------------------------------------------------------------------- */
+
+/* Tooltip container */
+[data-tooltip-trigger] {
+  position: relative;
+}
+
+/* Base tooltip element - ALL tooltips inherit these styles */
+.tooltip-element {
+  position: absolute;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  /* Only transition opacity and visibility, not transform to avoid movement */
+  transition: opacity var(--tooltip-transition-duration) var(--tooltip-transition-timing), 
+              visibility var(--tooltip-transition-duration) var(--tooltip-transition-timing);
+  /* Ensure no transition on positioning properties */
+  transition-property: opacity, visibility;
+  z-index: 1000;
+  
+  /* Tooltip styling - matching TOC active item */
+  background: var(--color-bg-selected);
+  border: 1px solid var(--color-border-hint);
+  border-left: 2px solid var(--color-primary);
+  color: var(--color-secondary);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-small);
+  line-height: 1.4;
+  padding: var(--tooltip-padding);
+  border-radius: 0; /* Square corners for all tooltips */
+  
+  /* Sizing and text handling */
+  width: max-content;
+  max-width: var(--tooltip-max-width);
+  min-width: var(--tooltip-min-width);
+  white-space: normal;
+  word-break: normal;
+  overflow-wrap: break-word;
+  hyphens: auto;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+/* Tooltip arrow - base styles */
+.tooltip-element::after {
+  content: '';
+  position: absolute;
+  border: var(--tooltip-arrow-size) solid transparent;
+  z-index: 1001;
+}
+
+/* Show tooltip when visible */
+.tooltip-element.tooltip-visible {
+  visibility: visible;
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* Ensure tooltip content is interactive when visible */
+.tooltip-element.tooltip-visible * {
+  pointer-events: auto;
+}
+
+/* Tooltip hover state */
+.tooltip-element:hover {
+  background: var(--color-hover-bg);
+}
+
+/* -----------------------------------------------------------------------------
+   General Tooltip Positioning - Using margin variables
+   ----------------------------------------------------------------------------- */
+
+/* Default: Top positioning */
+.tooltip-element.tooltip-top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(0.125rem);
+  margin-bottom: var(--tooltip-gap);
+}
+
+.tooltip-element.tooltip-top::after {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-color: var(--color-border-hint);
+  margin-top: calc(-1 * var(--tooltip-arrow-size));
+}
+
+/* Active state overrides for top positioning */
+.tooltip-element.tooltip-top.tooltip-visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Bottom positioning */
+.tooltip-element.tooltip-bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-0.125rem);
+  margin-top: var(--tooltip-gap);
+}
+
+.tooltip-element.tooltip-bottom::after {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-color: var(--color-border-hint);
+  margin-bottom: calc(-1 * var(--tooltip-arrow-size));
+}
+
+.tooltip-element.tooltip-bottom.tooltip-visible {
+  transform: translateX(-50%) translateY(0);
+}
+
+/* Left positioning */
+.tooltip-element.tooltip-left {
+  right: 100%;
+  top: 50%;
+  transform: translateX(0.125rem) translateY(-50%);
+  margin-right: var(--tooltip-gap);
+}
+
+.tooltip-element.tooltip-left::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-left-color: var(--color-border-hint);
+  margin-left: calc(-1 * var(--tooltip-arrow-size));
+}
+
+.tooltip-element.tooltip-left.tooltip-visible {
+  transform: translateX(0) translateY(-50%);
+}
+
+/* Right positioning */
+.tooltip-element.tooltip-right {
+  left: 100%;
+  top: 50%;
+  transform: translateX(-0.125rem) translateY(-50%);
+  margin-left: var(--tooltip-gap);
+}
+
+.tooltip-element.tooltip-right::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-right-color: var(--color-border-hint);
+  margin-right: calc(-1 * var(--tooltip-arrow-size));
+}
+
+.tooltip-element.tooltip-right.tooltip-visible {
+  transform: translateX(0) translateY(-50%);
+}
+
+/* -----------------------------------------------------------------------------
+   Diagonal Tooltip Positioning
+   ----------------------------------------------------------------------------- */
+
+/* Bottom-right positioning (default preference) */
+.tooltip-element.tooltip-bottom-right {
+  top: 100%;
+  left: 0;
+  transform: translateY(-0.125rem);
+  margin-top: var(--tooltip-gap);
+}
+
+.tooltip-element.tooltip-bottom-right::after {
+  bottom: 100%;
+  left: 1rem;
+  transform: translateX(-50%);
+  border-bottom-color: var(--color-border-hint);
+  margin-bottom: calc(-1 * var(--tooltip-arrow-size));
+}
+
+.tooltip-element.tooltip-bottom-right.tooltip-visible {
+  transform: translateY(0);
+}
+
+/* Bottom-left positioning */
+.tooltip-element.tooltip-bottom-left {
+  top: 100%;
+  right: 0;
+  transform: translateY(-0.125rem);
+  margin-top: var(--tooltip-gap);
+}
+
+.tooltip-element.tooltip-bottom-left::after {
+  bottom: 100%;
+  right: 1rem;
+  transform: translateX(50%);
+  border-bottom-color: var(--color-border-hint);
+  margin-bottom: calc(-1 * var(--tooltip-arrow-size));
+}
+
+.tooltip-element.tooltip-bottom-left.tooltip-visible {
+  transform: translateY(0);
+}
+
+/* Top-right positioning */
+.tooltip-element.tooltip-top-right {
+  bottom: 100%;
+  left: 0;
+  transform: translateY(0.125rem);
+  margin-bottom: var(--tooltip-gap);
+}
+
+.tooltip-element.tooltip-top-right::after {
+  top: 100%;
+  left: 1rem;
+  transform: translateX(-50%);
+  border-top-color: var(--color-border-hint);
+  margin-top: calc(-1 * var(--tooltip-arrow-size));
+}
+
+.tooltip-element.tooltip-top-right.tooltip-visible {
+  transform: translateY(0);
+}
+
+/* Top-left positioning */
+.tooltip-element.tooltip-top-left {
+  bottom: 100%;
+  right: 0;
+  transform: translateY(0.125rem);
+  margin-bottom: var(--tooltip-gap);
+}
+
+.tooltip-element.tooltip-top-left::after {
+  top: 100%;
+  right: 1rem;
+  transform: translateX(50%);
+  border-top-color: var(--color-border-hint);
+  margin-top: calc(-1 * var(--tooltip-arrow-size));
+}
+
+.tooltip-element.tooltip-top-left.tooltip-visible {
+  transform: translateY(0);
+}
+
+/* -----------------------------------------------------------------------------
+   Mobile Bottom Positioning
+   ----------------------------------------------------------------------------- */
+
+/* Mobile-specific bottom positioning */
+.tooltip-element.tooltip-mobile-bottom {
+  /* Position handled by JS, but ensure fixed positioning */
+  position: fixed !important;
+  /* No transform needed */
+  transform: none !important;
+  margin: 0;
+  
+  /* Width handled by JS (calc(100vw - 2rem)) */
+  box-sizing: border-box;
+  width: calc(100vw - 2rem) !important;
+  
+  /* Content constraints */
+  max-width: none !important;
+  /* Dynamic padding: at least 1rem, but increases to center content within 40rem max */
+  padding-left: max(1rem, calc((100% - 40rem) / 2)) !important;
+  padding-right: max(1rem, calc((100% - 40rem) / 2)) !important;
+  
+  /* Left align text for readability */
+  text-align: left;
+  
+  /* Use same shadow as wide-right for consistency */
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Remove arrow for mobile bottom tooltips */
+.tooltip-element.tooltip-mobile-bottom::after {
+  display: none;
+}
+
+/* Ensure mobile tooltips are visible when active */
+.tooltip-element.tooltip-mobile-bottom.tooltip-visible {
+  transform: none !important;
+}
+
+/* -----------------------------------------------------------------------------
+   Footnote-Specific Tooltips (extends base tooltip styling)
+   ----------------------------------------------------------------------------- */
+
+/* Footnote reference styling */
+.footnote-ref a[data-tooltip-trigger] {
+  transition: color 0.4s ease-in-out;
+}
+
+.footnote-ref a[data-tooltip-trigger]:hover {
+  color: var(--color-primary-light);
+}
+
+/* Enhanced footnote tooltip styling - only overrides what's different */
+.footnote-element {
+  /* Larger max-width for footnote content */
+  max-width: var(--footnote-tooltip-max-width);
+  min-width: var(--footnote-tooltip-min-width);
+  /* Better typography for longer footnote text */
+  line-height: 1.5;
+  text-align: left;
+}
+
+/* Footnote tooltip positioning adjustments */
+.footnote-element.tooltip-top {
+  /* Position slightly higher to avoid covering the link */
+  margin-bottom: calc(var(--tooltip-gap) + 5px);
+}
+
+/* Links within tooltips - applies to ALL tooltips */
+.tooltip-element a {
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+  pointer-events: auto;
+  overflow-wrap: break-word;
+  word-break: normal;
+  transition: color 0.2s ease-in-out;
+}
+
+.tooltip-element a:hover {
+  color: var(--color-primary-light);
+  text-decoration: underline;
+}
+
+/* Hide the footnote back-link in tooltips */
+.footnote-element .footnote {
+  display: none;
+}
+
+/* Text breaking rules for all tooltips */
+.tooltip-element .force-break,
+.tooltip-element code,
+.tooltip-element pre {
+  word-break: break-all;
+  overflow-wrap: break-word;
+}
+
+.tooltip-element p,
+.tooltip-element span,
+.tooltip-element div {
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+
+/* -----------------------------------------------------------------------------
+   Wide Screen Tooltip Positioning (Right of Main Content)
+   ----------------------------------------------------------------------------- */
+
+/* Position tooltips to the right of main content on wide screens */
+@media (min-width: 1200px) {
+  .tooltip-element.tooltip-wide-right {
+    /* Position absolutely to viewport for placement to right of main content */
+    position: fixed;
+    /* Positioning handled by JS */
+    left: auto;
+    right: auto;
+    top: auto;
+    bottom: auto;
+    transform: translateX(0.125rem) translateY(-50%);
+    margin: 0;
+    
+    /* Larger size for side placement */
+    max-width: var(--tooltip-wide-max-width);
+    min-width: var(--tooltip-wide-min-width);
+    /* Ensure text wraps properly when constrained */
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    
+    /* Enhanced shadow for sidebar placement */
+    box-shadow: 0 8px 25px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  
+  .tooltip-element.tooltip-wide-right::after {
+    /* Arrow pointing left towards the content */
+    right: 100%;
+    top: 50%;
+    left: auto;
+    bottom: auto;
+    transform: translateY(-50%);
+    border-right-color: var(--color-border-hint);
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+    margin: 0;
+    margin-right: calc(-1 * var(--tooltip-arrow-size));
+  }
+  
+  .tooltip-element.tooltip-wide-right.tooltip-visible {
+    transform: translateX(0) translateY(-50%);
+  }
+  
+  /* Ensure footnote tooltips use appropriate sizing on wide screens */
+  .footnote-element.tooltip-wide-right {
+    max-width: var(--footnote-wide-max-width);
+    min-width: var(--footnote-wide-min-width);
+  }
+}
+
+/* Extra wide screens - make tooltips even wider */
+@media (min-width: 1600px) {
+  .tooltip-element.tooltip-wide-right {
+    max-width: var(--tooltip-extra-wide-max-width);
+    min-width: var(--tooltip-extra-wide-min-width);
+  }
+  
+  .footnote-element.tooltip-wide-right {
+    max-width: var(--footnote-extra-wide-max-width);
+    min-width: var(--footnote-extra-wide-min-width);
+  }
+}
+
+/* Medium screens - use standard positioning with constrained width */
+@media (min-width: 641px) and (max-width: 1199px) {
+  .tooltip-element {
+    /* Constrain width to fit within content area */
+    max-width: min(var(--tooltip-max-width), calc(100vw - 4rem));
+    box-sizing: border-box;
+  }
+  
+  .footnote-element {
+    max-width: min(var(--footnote-tooltip-max-width), calc(100vw - 4rem));
+  }
+}
+
+/* Narrow screens - bottom-centered tooltips (640px and below) */
+@media (max-width: 640px) {
+  .tooltip-element {
+    /* Ensure readable font size on mobile */
+    font-size: var(--font-size-small);
+    
+    /* Better touch-friendly padding */
+    padding: var(--tooltip-mobile-padding);
+    
+    /* Let JS handle all positioning */
+    box-sizing: border-box;
+  }
+  
+  /* Non-mobile-bottom tooltips should still be constrained on narrow screens */
+  .tooltip-element:not(.tooltip-mobile-bottom) {
+    max-width: min(var(--tooltip-max-width), calc(100vw - 2rem)) !important;
+  }
+} 

kash/web_gen/templates/content_styles.css.jinja

@@ -45,7 +45,7 @@
 .summary {
   font-family: var(--font-sans);
   font-size: var(--font-size-small);
-  margin: 2rem 0;
+  margin: 1rem 0;
   padding: 1rem;
 }
 
@@ -166,19 +166,24 @@
 }
 
 .annotated-para .para-caption {
-  width: 25%;
+  width: 20%;
   font-size: var(--font-size-smaller);
-  order: 2;
-  align-self: center;
-  margin-left: 1.5rem;
+  order: 0;
+  margin: 0.5rem 1rem 0.5rem 0;
   font-family: var(--font-sans);
   color: var(--color-secondary);
-  border-left: 1px solid var(--color-hint);
-  padding-left: 0.5rem;
+  border-right: 2px solid var(--color-hint);
+  padding-right: 0.5rem;
+  align-self: center;
+  max-height: 15rem;
+  overflow-y: auto;
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-hint-gentle) transparent;
 }
 
 .annotated-para .para {
-  width: 75%;
+  width: 80%;
   order: 1;
 }
 

kash/web_gen/templates/simple_webpage.html.jinja

@@ -5,7 +5,15 @@
 <style>
 /* Override Tailwind's bg-white in dark mode */
 [data-theme="dark"] .bg-white {
-  background-color: var(--color-bg-alt-solid) !important;
+  background-color: var(--color-bg-alt-solid);
+}
+
+/* Fallback responsive padding for compatibility */
+@media (min-width: 768px) {
+  .content-with-toc .long-text {
+    padding-left: 4rem;
+    padding-right: 4rem;
+  }
 }
 .long-text {
   transition: background 0.4s ease-in-out, color 0.4s ease-in-out;
@@ -15,34 +23,64 @@
 [data-theme="dark"] .long-text {
   background-color: var(--color-bg-alt-solid);
   color: var(--color-text);
-}
-
-/* Adjust shadow for dark mode */
-[data-theme="dark"] .long-text {
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 -2px 6px -1px rgba(0, 0, 0, 0.2);
 }
+
+{% include "components/toc_styles.css.jinja" %}
+{% include "components/tooltip_styles.css.jinja" %}
 </style>
 {% endblock custom_styles %}
 
-<!-- simple_webpage begin main_content block -->
 {% block main_content %}
-<div class="long-text container max-w-3xl mx-auto bg-white py-4 px-6 md:px-16">
-  {% block page_title %}
-  {% if title and add_title_h1 %}
-    <h1 class="text-center text-4xl mt-6 mb-6">{{ title }}</h1>
-  {% endif %}
-  {% endblock page_title %}
-  
-  <div>
-    {% block page_content %}
-    {% if thumbnail_url %}
-    <img class="thumbnail" src="{{ thumbnail_url }}" alt="{{ title }}" />
+<!-- simple_webpage begin main_content block -->
+<div class="content-with-toc" id="content-container">
+  <div class="long-text container max-w-3xl mx-auto bg-white py-4 px-6 md:px-16" id="main-content">
+    {% block page_title %}
+    {% if title and add_title_h1 %}
+      <h1 class="text-center text-4xl mt-6 mb-6">{{ title }}</h1>
     {% endif %}
-    <div class="content">
-      {{ content_html | safe }}
+    {% endblock page_title %}
+    
+    <div>
+      {% block page_content %}
+      {% if thumbnail_url %}
+      <img class="thumbnail" src="{{ thumbnail_url }}" alt="{{ title }}" />
+      {% endif %}
+      <div class="content">
+        {{ content_html | safe }}
+      </div>
+      {% endblock page_content %}
     </div>
-    {% endblock page_content %}
   </div>
+  
+  <!-- Mobile TOC toggle -->
+  <button class="button fixed-button floating-button toc-toggle" id="toc-toggle" aria-label="Toggle table of contents" style="display: none;">
+    <i data-feather="list"></i>
+  </button>
+  
+  <!-- Mobile TOC Backdrop -->
+  <div class="toc-backdrop" id="toc-backdrop"></div>
+  
+  <!-- TOC Container -->
+  <aside class="toc-container" id="toc-container" aria-label="Table of contents">
+    <div class="toc">
+      <a href="#" class="toc-link toc-title" id="toc-title-link">Contents</a>
+      <ul class="toc-list" id="toc-list">
+        <!-- TOC items will be populated by JavaScript -->
+      </ul>
+    </div>
+  </aside>
 </div>
+<!-- simple_webpage end main_content block -->
 {% endblock main_content %}
-<!-- simple_webpage end main_content block -->
+
+
+{% block scripts_extra %}
+{{ super() }}
+<!-- simple_webpage begin scripts_extra block -->
+<script>
+{% include "components/toc_scripts.js.jinja" %}
+{% include "components/tooltip_scripts.js.jinja" %}
+</script>
+<!-- simple_webpage end scripts_extra block -->
+{% endblock scripts_extra %}

kash/web_gen/templates/tabbed_webpage.html.jinja

@@ -40,8 +40,9 @@
 {% endblock page_content %}
 <!-- tabbed_webpage end page_content block -->
 
-<!-- tabbed_webpage begin scripts_extra block -->
 {% block scripts_extra %}
+<!-- tabbed_webpage begin scripts_extra block -->
+<script>
   function showTab(tabId, element) {
     document.querySelectorAll(".tab-pane").forEach((tab) => {
       tab.classList.add("hidden");
@@ -54,5 +55,6 @@
     element.classList.add("tab-button-active");
     element.classList.remove("tab-button-inactive");
   }
+</script>
+<!-- tabbed_webpage end scripts_extra block -->
 {% endblock scripts_extra %}
-<!-- tabbed_webpage end scripts_extra block -->

kash/workspaces/workspaces.py

@@ -19,7 +19,11 @@ from kash.model.params_model import GLOBAL_PARAMS, RawParamValues
 from kash.shell.output.shell_output import PrintHooks, cprint
 from kash.utils.errors import FileNotFound, InvalidInput, InvalidState
 from kash.utils.file_utils.ignore_files import IgnoreFilter, is_ignored_default
-from kash.workspaces.workspace_dirs import check_strict_workspace_name, is_global_ws_dir, is_ws_dir
+from kash.workspaces.workspace_dirs import (
+    check_strict_workspace_name,
+    is_global_ws_dir,
+    is_ws_dir,
+)
 from kash.workspaces.workspace_registry import WorkspaceInfo, get_ws_registry
 
 if TYPE_CHECKING:
@@ -49,6 +53,11 @@ class Workspace(ABC):
     def base_dir(self) -> Path:
         """The base directory for this workspace."""
 
+    @property
+    @abstractmethod
+    def assets_dir(self) -> Path:
+        """The directory for this workspace's assets."""
+
 
 def resolve_ws(name: str | Path) -> WorkspaceInfo:
     """