@nevescloud/pip 3.2.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nevescloud/pip",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Floating assistant bubble + panel + chat runtime. ESM, no build.",
   "type": "module",
   "main": "pip-core.esm.js",

package/pip-core.esm.js

@@ -258,6 +258,19 @@ const CSS = `
 .pip-scroll::-webkit-scrollbar { width: 6px; }
 .pip-scroll::-webkit-scrollbar-track { background: transparent; }
 .pip-scroll::-webkit-scrollbar-thumb { background: var(--pip-border, light-dark(rgba(0,0,0,0.10), rgba(255,255,255,0.12))); border-radius: 3px; }
+/* Backdrop dim while the slash autocomplete is open — Apple-style focus
+   shift (Spotlight, Quick Look). History stays glanceable but visually
+   recedes so the menu is the active surface. */
+.pip-scroll {
+  transition: opacity 140ms ease-out;
+}
+.pip-scroll.is-backdrop {
+  opacity: 0.28;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pip-scroll { transition: none; }
+}
 
 .pip-notify {
   font-size: var(--pip-t-caption, 12px);
@@ -1645,11 +1658,15 @@ export function createPip(opts = {}) {
   }
   function dispatchBuiltinSlash(cmd) {
     if (cmd === "help" || cmd === "?") {
-      const lines = [];
-      for (const s of _slashCommands.values()) lines.push(`- \`/${s.name}\` — ${s.description || ""}`);
-      lines.push("- `/clear` — clear chat history");
-      lines.push("- `/help` — list commands");
-      return { reply: lines.join("\n") };
+      // The slash autocomplete dropdown already lists every command with
+      // its description — /help duplicating that as a chat turn was visual
+      // noise and history clutter. Reopen the dropdown in cmd-name mode
+      // instead, same surface a user gets by typing `/`.
+      input.value = "/";
+      input.setSelectionRange(1, 1);
+      input.focus();
+      updateSlashSuggest();
+      return { clearedUI: true };
     }
     if (cmd === "clear") {
       history.length = 0;
@@ -2020,7 +2037,8 @@ export function createPip(opts = {}) {
 
   function renderSlashList() {
     slashList.innerHTML = "";
-    if (!slashCurrent.length) { slashList.hidden = true; return; }
+    if (!slashCurrent.length) { slashList.hidden = true; scroll.classList.remove("is-backdrop"); return; }
+    scroll.classList.add("is-backdrop");
     slashCurrent.forEach((item, i) => {
       const li = document.createElement("li");
       li.setAttribute("role", "option");
@@ -2061,6 +2079,7 @@ export function createPip(opts = {}) {
     slashCmdContext = null;
     slashList.hidden = true;
     slashList.innerHTML = "";
+    scroll.classList.remove("is-backdrop");
   }
 
   function updateSlashSuggest() {