@devosurf/vynt 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devosurf/vynt",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "files": [
     "bin",

package/web/vynt-toolbar.js

@@ -27,6 +27,7 @@
     hoveredObjectiveElement: null,
     statusText: "Connecting...",
     position: null,
+    lastExpandedWidth: null,
   };
 
   let eventSource = null;
@@ -39,7 +40,7 @@
     next: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
     apply: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
     collapse: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
-    vynt: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>`
+    vynt: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M4 6.5L10.5 18L14 11.5L20 18"/><path d="M9.6 6.5H20"/></svg>`
   };
 
   const css = `
@@ -696,6 +697,44 @@
     root.style.bottom = "auto";
   }
 
+  function getCollapsedWidth() {
+    const cssValue = parseFloat(getComputedStyle(shell).getPropertyValue("--vynt-height"));
+    return Number.isFinite(cssValue) && cssValue > 0 ? cssValue : 48;
+  }
+
+  function adjustPositionForCollapse(nextCollapsed) {
+    if (!state.position) return;
+
+    const currentWidth = shell.getBoundingClientRect().width;
+    if (!(currentWidth > 0)) return;
+
+    if (nextCollapsed) {
+      state.lastExpandedWidth = currentWidth;
+      const targetCollapsedWidth = getCollapsedWidth();
+      const delta = Math.max(0, currentWidth - targetCollapsedWidth);
+      if (delta > 0) {
+        state.position = {
+          x: state.position.x + delta,
+          y: state.position.y,
+        };
+      }
+    } else {
+      const targetExpandedWidth =
+        typeof state.lastExpandedWidth === "number" && state.lastExpandedWidth > 0
+          ? state.lastExpandedWidth
+          : currentWidth;
+      const delta = Math.max(0, targetExpandedWidth - currentWidth);
+      if (delta > 0) {
+        state.position = {
+          x: state.position.x - delta,
+          y: state.position.y,
+        };
+      }
+    }
+
+    state.position = constrainPosition(state.position);
+  }
+
   function persistPosition() {
     if (!state.position) return;
     try {
@@ -796,6 +835,13 @@
     }
 
     renderObjectiveOverlay();
+
+    if (hasOptions && !state.collapsed) {
+      const expandedWidth = shell.getBoundingClientRect().width;
+      if (expandedWidth > 0) {
+        state.lastExpandedWidth = expandedWidth;
+      }
+    }
   }
 
   async function api(path, init) {
@@ -1013,7 +1059,9 @@
       }, 300);
     } else {
       if (state.collapsed && isLogoBtn) {
+        adjustPositionForCollapse(false);
         state.collapsed = false;
+        persistPosition();
         render();
       }
     }
@@ -1049,7 +1097,9 @@
 
   collapseBtn.addEventListener("click", (event) => {
     event.stopPropagation();
+    adjustPositionForCollapse(true);
     state.collapsed = true;
+    persistPosition();
     render();
   });