pinokiod 7.3.9 → 7.3.11

package/server/public/terminal-settings.js

@@ -132,26 +132,6 @@
     }
 
     shouldPreferModalInput() {
-      if (typeof navigator !== 'undefined') {
-        try {
-          if (navigator.userAgentData && typeof navigator.userAgentData.mobile === 'boolean') {
-            if (navigator.userAgentData.mobile) {
-              return true;
-            }
-          }
-        } catch (_) {}
-        const ua = navigator.userAgent || '';
-        if (/Mobi|Android|iPhone|iPad|Tablet/i.test(ua)) {
-          return true;
-        }
-        const platform = navigator.platform || '';
-        const maxTouchPoints = typeof navigator.maxTouchPoints === 'number'
-          ? navigator.maxTouchPoints
-          : 0;
-        if (/Mac/i.test(platform) && maxTouchPoints > 1) {
-          return true;
-        }
-      }
       return false;
     }
 
@@ -651,41 +631,134 @@
         return;
       }
       const tracker = {
-        lastTime: 0,
-        lastX: 0,
-        lastY: 0,
-        handler: null,
-        eventName: this.supportsPointer ? 'pointerdown' : 'touchstart'
+        active: false,
+        startTime: 0,
+        startX: 0,
+        startY: 0,
+        startScroll: null,
+        moved: false,
+        handlers: []
       };
-      const handlePointerDown = (event) => {
+      const getScrollSnapshot = () => {
+        const viewport = node.querySelector('.xterm-viewport');
+        const doc = typeof document !== 'undefined' ? document.documentElement : null;
+        const body = typeof document !== 'undefined' ? document.body : null;
+        return {
+          viewportTop: viewport ? viewport.scrollTop : 0,
+          viewportLeft: viewport ? viewport.scrollLeft : 0,
+          pageTop: typeof window !== 'undefined' ? (window.pageYOffset || doc && doc.scrollTop || body && body.scrollTop || 0) : 0,
+          pageLeft: typeof window !== 'undefined' ? (window.pageXOffset || doc && doc.scrollLeft || body && body.scrollLeft || 0) : 0
+        };
+      };
+      const didScrollChange = (start, end) => {
+        if (!start || !end) {
+          return false;
+        }
+        return Math.abs(end.viewportTop - start.viewportTop) > 1
+          || Math.abs(end.viewportLeft - start.viewportLeft) > 1
+          || Math.abs(end.pageTop - start.pageTop) > 1
+          || Math.abs(end.pageLeft - start.pageLeft) > 1;
+      };
+      const resetTracker = () => {
+        tracker.active = false;
+        tracker.startScroll = null;
+      };
+      const getTouchPoint = (event, phase) => {
         if (!event) {
-          return;
+          return null;
+        }
+        if (event.touches || event.changedTouches) {
+          const list = phase === 'end' ? event.changedTouches : event.touches;
+          const touch = list && list[0];
+          return touch && typeof touch.clientX === 'number' && typeof touch.clientY === 'number'
+            ? { x: touch.clientX, y: touch.clientY }
+            : null;
+        }
+        return typeof event.clientX === 'number' && typeof event.clientY === 'number'
+          ? { x: event.clientX, y: event.clientY }
+          : null;
+      };
+      const isInteractiveTarget = (target) => {
+        return Boolean(target && target.closest && target.closest('a, button, input, textarea, select, label, [role="button"], [contenteditable="true"], .terminal-keyboard-modal, .terminal-keyboard-backdrop'));
+      };
+      const isTouchEvent = (event) => {
+        if (!event) {
+          return false;
         }
-        if (this.supportsPointer) {
+        if (event.touches || event.changedTouches) {
+          const list = event.touches || event.changedTouches;
+          if (list && list.length > 1) {
+            return false;
+          }
+        } else if (this.supportsPointer) {
           const pointerType = event.pointerType;
           if (pointerType && pointerType !== 'touch' && pointerType !== 'pen') {
-            return;
+            return false;
           }
-        } else if (event.touches && event.touches.length !== 1) {
+        }
+        return true;
+      };
+      const handleStart = (event) => {
+        if (!isTouchEvent(event) || this.modalOpen || isInteractiveTarget(event.target)) {
+          resetTracker();
+          return;
+        }
+        const point = getTouchPoint(event, 'start');
+        if (!point) {
+          resetTracker();
+          return;
+        }
+        tracker.active = true;
+        tracker.moved = false;
+        tracker.startTime = Date.now();
+        tracker.startX = point.x;
+        tracker.startY = point.y;
+        tracker.startScroll = getScrollSnapshot();
+      };
+      const handleMove = (event) => {
+        if (!tracker.active) {
+          return;
+        }
+        const point = getTouchPoint(event, 'move');
+        if (!point) {
+          return;
+        }
+        const distance = Math.hypot(point.x - tracker.startX, point.y - tracker.startY);
+        if (distance > 12) {
+          tracker.moved = true;
+        }
+      };
+      const handleEnd = (event) => {
+        if (!tracker.active) {
           return;
         }
-        const pointSource = this.supportsPointer ? event : (event.touches && event.touches[0]);
-        const pointX = pointSource && typeof pointSource.clientX === 'number' ? pointSource.clientX : 0;
-        const pointY = pointSource && typeof pointSource.clientY === 'number' ? pointSource.clientY : 0;
-        const now = Date.now();
-        const delta = now - tracker.lastTime;
-        const distance = Math.hypot(pointX - tracker.lastX, pointY - tracker.lastY);
-        if (delta < 320 && distance < 40) {
+        const point = getTouchPoint(event, 'end');
+        const duration = Date.now() - tracker.startTime;
+        const distance = point ? Math.hypot(point.x - tracker.startX, point.y - tracker.startY) : Infinity;
+        const scrolled = didScrollChange(tracker.startScroll, getScrollSnapshot());
+        resetTracker();
+        if (!tracker.moved && !scrolled && duration < 700 && distance <= 12 && !isInteractiveTarget(event.target)) {
           event.preventDefault();
           event.stopPropagation();
           this.openModalFromGesture();
         }
-        tracker.lastTime = now;
-        tracker.lastX = pointX;
-        tracker.lastY = pointY;
       };
-      node.addEventListener(tracker.eventName, handlePointerDown, { passive: false });
-      tracker.handler = handlePointerDown;
+      const addTrackedListener = (eventName, handler, options) => {
+        node.addEventListener(eventName, handler, options);
+        tracker.handlers.push({ eventName, handler, options });
+      };
+      if (this.supportsPointer) {
+        addTrackedListener('pointerdown', handleStart, { passive: true });
+        addTrackedListener('pointermove', handleMove, { passive: true });
+        addTrackedListener('pointerup', handleEnd, { passive: false });
+        addTrackedListener('pointercancel', resetTracker, { passive: true });
+      }
+      if (typeof window !== 'undefined' && 'TouchEvent' in window) {
+        addTrackedListener('touchstart', handleStart, { passive: true });
+        addTrackedListener('touchmove', handleMove, { passive: true });
+        addTrackedListener('touchend', handleEnd, { passive: false });
+        addTrackedListener('touchcancel', resetTracker, { passive: true });
+      }
       tracker.node = node;
       this.tapTrackers.set(term, tracker);
     }
@@ -706,9 +779,10 @@
       if (!tracker) {
         return;
       }
-      if (tracker.node && tracker.handler) {
-        const eventName = tracker.eventName || (this.supportsPointer ? 'pointerdown' : 'touchstart');
-        tracker.node.removeEventListener(eventName, tracker.handler, { passive: false });
+      if (tracker.node && Array.isArray(tracker.handlers)) {
+        tracker.handlers.forEach(({ eventName, handler, options }) => {
+          tracker.node.removeEventListener(eventName, handler, options);
+        });
       }
       this.tapTrackers.delete(term);
     }
@@ -730,6 +804,9 @@
         : null;
       this.forceResizeButtons = new WeakMap();
       this.forceResizeHandler = null;
+      this.tooltipElement = null;
+      this.activeTooltipTarget = null;
+      this.boundTooltipReposition = () => this.positionTerminalTooltip();
       this.minimalRunnerMode = detectMinimalRunnerMode();
       this.currentFontFamily = typeof this.preferences.fontFamily === 'string' ? this.preferences.fontFamily.trim() : '';
       if (typeof document !== 'undefined') {
@@ -1187,6 +1264,8 @@
       const nextTheme = Object.assign({}, theme);
       const applied = this.applyOption(term, 'theme', nextTheme);
 
+      console.log("nextTheme", nextTheme)
+
       const element = term.element;
       if (element && element.style) {
         if (nextTheme.background) {
@@ -1287,15 +1366,111 @@
       return false;
     }
 
+    getTerminalTooltipElement() {
+      if (typeof document === 'undefined' || !document.body) {
+        return null;
+      }
+      if (this.tooltipElement && document.body.contains(this.tooltipElement)) {
+        return this.tooltipElement;
+      }
+      const tooltip = document.createElement('div');
+      tooltip.className = 'terminal-tooltip';
+      tooltip.setAttribute('role', 'tooltip');
+      tooltip.setAttribute('aria-hidden', 'true');
+      document.body.appendChild(tooltip);
+      this.tooltipElement = tooltip;
+      return tooltip;
+    }
+
+    attachTerminalTooltip(target, text) {
+      if (!target || typeof text !== 'string' || !text.trim()) {
+        return;
+      }
+      target.setAttribute('data-terminal-tooltip', text);
+      target.addEventListener('mouseenter', () => this.showTerminalTooltip(target));
+      target.addEventListener('focus', () => this.showTerminalTooltip(target));
+      target.addEventListener('mouseleave', () => this.hideTerminalTooltip(target));
+      target.addEventListener('blur', () => this.hideTerminalTooltip(target));
+      target.addEventListener('click', () => this.hideTerminalTooltip(target));
+      target.addEventListener('keydown', (event) => {
+        if (event && event.key === 'Escape') {
+          this.hideTerminalTooltip(target);
+        }
+      });
+    }
+
+    showTerminalTooltip(target) {
+      if (typeof window === 'undefined' || !target) {
+        return;
+      }
+      const text = target.getAttribute('data-terminal-tooltip') || '';
+      if (!text.trim()) {
+        return;
+      }
+      const tooltip = this.getTerminalTooltipElement();
+      if (!tooltip) {
+        return;
+      }
+      this.activeTooltipTarget = target;
+      tooltip.textContent = text;
+      tooltip.setAttribute('aria-hidden', 'false');
+      tooltip.classList.remove('is-visible');
+      this.positionTerminalTooltip();
+      tooltip.classList.add('is-visible');
+      window.addEventListener('resize', this.boundTooltipReposition);
+      window.addEventListener('scroll', this.boundTooltipReposition, true);
+    }
+
+    hideTerminalTooltip(target) {
+      if (target && this.activeTooltipTarget && target !== this.activeTooltipTarget) {
+        return;
+      }
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('resize', this.boundTooltipReposition);
+        window.removeEventListener('scroll', this.boundTooltipReposition, true);
+      }
+      this.activeTooltipTarget = null;
+      if (this.tooltipElement) {
+        this.tooltipElement.classList.remove('is-visible');
+        this.tooltipElement.setAttribute('aria-hidden', 'true');
+      }
+    }
+
+    positionTerminalTooltip() {
+      if (typeof window === 'undefined' || !this.activeTooltipTarget || !this.tooltipElement) {
+        return;
+      }
+      const targetRect = this.activeTooltipTarget.getBoundingClientRect();
+      const tooltipRect = this.tooltipElement.getBoundingClientRect();
+      const viewportWidth = window.innerWidth || document.documentElement.clientWidth || 0;
+      const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0;
+      const margin = 8;
+      const gap = 8;
+      const tooltipWidth = tooltipRect.width || this.tooltipElement.offsetWidth || 0;
+      const tooltipHeight = tooltipRect.height || this.tooltipElement.offsetHeight || 0;
+      let left = targetRect.right - tooltipWidth;
+      let top = targetRect.bottom + gap;
+
+      if (top + tooltipHeight + margin > viewportHeight && targetRect.top - tooltipHeight - gap >= margin) {
+        top = targetRect.top - tooltipHeight - gap;
+      }
+      left = Math.max(margin, Math.min(left, viewportWidth - tooltipWidth - margin));
+      top = Math.max(margin, Math.min(top, viewportHeight - tooltipHeight - margin));
+
+      this.tooltipElement.style.left = `${Math.round(left)}px`;
+      this.tooltipElement.style.top = `${Math.round(top)}px`;
+    }
+
     attachForceResizeButton(runner, host) {
       if (typeof document === 'undefined' || !runner || !host || this.forceResizeButtons.has(runner)) {
         return;
       }
       const button = document.createElement('button');
       button.type = 'button';
-      button.className = 'btn terminal-resize-button';
-      button.innerHTML = '<i class="fa-solid fa-expand"></i> Resize';
-      button.title = 'Resize to this window';
+      button.className = 'btn terminal-utility-button terminal-resize-button';
+      button.innerHTML = '<i class="fa-solid fa-ruler-combined" aria-hidden="true"></i>';
+      button.setAttribute('aria-label', 'Sync terminal to current viewport');
+      this.attachTerminalTooltip(button, 'Sync terminal to current viewport');
       button.addEventListener('click', (event) => {
         if (event) {
           event.preventDefault();
@@ -1390,10 +1565,12 @@
 
       const button = document.createElement('button');
       button.type = 'button';
-      button.className = 'btn terminal-config-button';
-      button.innerHTML = '<span class="terminal-config-label"><i class="fa-solid fa-sliders"></i> Config</span>';
+      button.className = 'btn terminal-utility-button terminal-config-button';
+      button.innerHTML = '<span class="terminal-config-label"><i class="fa-solid fa-sliders" aria-hidden="true"></i></span>';
       button.setAttribute('aria-haspopup', 'true');
       button.setAttribute('aria-expanded', 'false');
+      button.setAttribute('aria-label', 'Terminal appearance');
+      this.attachTerminalTooltip(button, 'Terminal appearance');
 
       const menu = document.createElement('div');
       menu.className = 'terminal-config-menu';

package/server/public/universal-launcher.css

@@ -23,7 +23,7 @@
   --universal-launcher-primary-border-hover: var(--universal-quick-action-bg);
   --universal-create-dropdown-surface: #ffffff;
   --universal-create-dropdown-shadow: 0 12px 24px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
-  --universal-create-dropdown-hover: rgba(65, 105, 225, 0.1);
+  --universal-create-dropdown-hover: var(--pinokio-sidebar-tab-hover, rgba(15, 23, 42, 0.035));
 }
 
 body.dark {
@@ -49,31 +49,29 @@ body.dark {
   --universal-launcher-primary-border-hover: var(--universal-quick-action-text);
   --universal-create-dropdown-surface: #151517;
   --universal-create-dropdown-shadow: 0 16px 36px rgba(0, 0, 0, 0.38), 0 2px 10px rgba(0, 0, 0, 0.24);
-  --universal-create-dropdown-hover: rgba(65, 105, 225, 0.22);
+  --universal-create-dropdown-hover: var(--pinokio-sidebar-tab-hover, rgba(255, 255, 255, 0.055));
 }
 
 .main-sidebar .universal-create-dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: auto;
-  right: 0;
-  z-index: 80;
-  min-width: 172px;
-  width: max-content;
-  max-width: min(220px, calc(100vw - 24px));
+  position: static;
+  min-width: 0;
+  width: 100%;
+  max-width: none;
   height: auto !important;
   max-height: none !important;
   display: none;
   flex-direction: column;
   align-items: stretch;
   align-content: flex-start;
-  gap: 2px;
-  padding: 4px;
-  border: 1px solid var(--universal-launcher-border-strong);
-  border-radius: 8px;
-  background: var(--universal-create-dropdown-surface);
-  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12), 0 1px 4px rgba(15, 23, 42, 0.08);
-  overflow: clip;
+  gap: 1px;
+  margin: 1px 0 3px;
+  padding: 1px 0 1px 27px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  overflow: visible;
+  box-sizing: border-box;
 }
 
 .main-sidebar .universal-create-menu:not([open]) .universal-create-dropdown {
@@ -84,6 +82,15 @@ body.dark {
   display: flex !important;
 }
 
+.main-sidebar .universal-create-menu[open] > summary {
+  background: var(--pinokio-sidebar-tab-hover, transparent) !important;
+  color: var(--pinokio-sidebar-tab-active-color, var(--universal-launcher-text)) !important;
+}
+
+.main-sidebar .universal-create-menu[open] > summary .main-sidebar-action-icon {
+  color: var(--pinokio-sidebar-icon-active, currentColor) !important;
+}
+
 .main-sidebar .universal-create-dropdown button {
   appearance: none;
   border: 0;
@@ -92,15 +99,15 @@ body.dark {
   align-items: center;
   justify-content: flex-start;
   background: transparent;
-  color: var(--universal-launcher-text);
+  color: var(--pinokio-sidebar-tab-muted, var(--universal-launcher-text));
   text-align: left;
-  min-height: 32px;
+  min-height: 25px;
   gap: 3px;
-  padding: 0 8px;
+  padding: 3px 5px;
   border-radius: 6px;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 1;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.25;
   white-space: nowrap;
   cursor: pointer;
   box-sizing: border-box;
@@ -110,12 +117,14 @@ body.dark {
 .main-sidebar .universal-create-dropdown button:hover,
 .main-sidebar .universal-create-dropdown button:focus-visible {
   background: var(--universal-create-dropdown-hover);
+  color: var(--pinokio-sidebar-tab-active-color, var(--universal-launcher-text));
   outline: none;
 }
 
 body.dark .main-sidebar .universal-create-dropdown button:hover,
 body.dark .main-sidebar .universal-create-dropdown button:focus-visible {
   background: var(--universal-create-dropdown-hover);
+  color: var(--pinokio-sidebar-tab-active-color, var(--universal-launcher-text));
 }
 
 .universal-launcher-overlay {
@@ -1752,9 +1761,9 @@ body.dark .universal-launcher-error {
 
 .swal2-popup.universal-launcher-download-modal {
   border: 1px solid var(--universal-launcher-border);
-  border-radius: 12px;
+  border-radius: 8px;
   background: var(--universal-launcher-panel-bg);
-  box-shadow: 0 26px 64px rgba(15, 23, 42, 0.18);
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
 }
 
 .swal2-container.universal-launcher-download-container {
@@ -1782,7 +1791,7 @@ body.dark .universal-launcher-error {
 .universal-launcher-download-icon {
   width: 32px;
   height: 32px;
-  border-radius: 9px;
+  border-radius: 7px;
   border: 1px solid var(--universal-launcher-border);
   background: var(--universal-launcher-panel-bg-muted);
   color: var(--universal-launcher-title-color);
@@ -1799,10 +1808,10 @@ body.dark .universal-launcher-error {
 }
 
 .universal-launcher-download-title {
-  font-size: 18px;
-  line-height: 1.15;
-  font-weight: 700;
-  letter-spacing: -0.03em;
+  font-size: 16px;
+  line-height: 1.25;
+  font-weight: 600;
+  letter-spacing: 0;
   color: var(--universal-launcher-text);
 }
 
@@ -1844,9 +1853,9 @@ body.dark .universal-launcher-error {
 .universal-launcher-download-input {
   width: 100%;
   box-sizing: border-box;
-  min-height: 38px;
-  padding: 0 12px;
-  border-radius: 8px;
+  min-height: 36px;
+  padding: 0 10px;
+  border-radius: 6px;
   border: 1px solid var(--universal-launcher-border-strong);
   background: var(--universal-launcher-control-surface);
   color: var(--universal-launcher-text);