@haikit/client 0.23.0 → 0.24.0

package/README.md

@@ -48,7 +48,8 @@ Every surface has a **Dock** button on its bar. Docked, it waits on a shelf
 above the message box and opens from there as a window, one at a time; **Put
 back** or **Remove from dock** returns it to its place. It's moved, not
 mounted again, so your component keeps its state. A docked question stays
-amber on the shelf, and when the shelf is full the oldest go into a pile.
+amber on the shelf, when the shelf is full the oldest go into a pile, and
+**Remove all** at the shelf's end puts every docked surface back at once.
 `dock: false` leaves it out.
 
 It is light or dark with the system. To pin it, put `data-hai-theme="dark"` (or

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haikit/client",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "The haikit browser runtime: streams tool payloads into interactive UI surfaces. Plain ESM, no build step, no dependencies.",
   "keywords": [
     "haikit",

package/src/app.js

@@ -436,6 +436,7 @@ export function mountChat({
  *
  * When the shelf's row is full, the oldest go into a pile at its end, which
  * lists them. A surface waiting on the reader, or open, stays in the row.
+ * Remove all, at the shelf's end, puts every docked surface back at once.
  */
 function createDock({ chat, id, shell, chatPane, transcript, composer, statusEl, wide, wideQuery, drawerOpen, onChange }) {
   /** Docked surfaces, oldest first. */
@@ -464,7 +465,13 @@ function createDock({ chat, id, shell, chatPane, transcript, composer, statusEl,
   list.id = `${id}-pile`;
   list.hidden = true;
   pile.append(pileBtn, list);
-  shelf.append(count, row, pile);
+  // Remove all, at the shelf's end: every docked surface back in the chat
+  const clear = h("button", "hai-dock-clear");
+  clear.type = "button";
+  clear.title = "Remove all from dock";
+  clear.setAttribute("aria-label", "Remove all from the dock");
+  clear.append(icon("undockAll"));
+  shelf.append(count, row, pile, clear);
   composer.prepend(shelf);
 
   // ── the window ───────────────────────────────────────────────────────
@@ -591,6 +598,19 @@ function createDock({ chat, id, shell, chatPane, transcript, composer, statusEl,
   remove.onclick = () => open && undock(open, true);
   minimise.onclick = () => close(true);
 
+  // Every docked surface back in its card, oldest first. The shelf goes with
+  // them, so the reader goes to the message box under it, or, once the
+  // conversation has expired and the box is disabled, to the button that
+  // starts a new one.
+  clear.onclick = () => {
+    const n = entries.length;
+    for (const entry of [...entries]) undock(entry, false);
+    const input = composer.querySelector(".hai-input");
+    if (input && !input.disabled) input.focus();
+    else transcript.querySelector(".hai-expired .hai-new")?.focus();
+    live.textContent = n === 1 ? "1 surface is back in the chat" : `${n} surfaces are back in the chat`;
+  };
+
   // ── keeping up ───────────────────────────────────────────────────────
   // After every event the chat renders, and after every change here.
   function sync() {
@@ -751,7 +771,7 @@ function createDock({ chat, id, shell, chatPane, transcript, composer, statusEl,
     if (!keys.includes(e.key)) return;
     const buttons = inList
       ? [...list.querySelectorAll("button")]
-      : [...shelf.querySelectorAll(".hai-dock-item")].filter((b) => !b.hidden && !b.closest("[hidden]"));
+      : [...shelf.querySelectorAll(".hai-dock-item, .hai-dock-clear")].filter((b) => !b.hidden && !b.closest("[hidden]"));
     const at = buttons.indexOf(e.target);
     if (at < 0) return;
     e.preventDefault();

package/src/hai.css

@@ -659,6 +659,8 @@
 /* The composer card's top row while anything is docked: one card, one
    shadow. Not positioned, so the box below covers the shelf's own shadow. */
 .hai-dock {
+  /* Remove all's size: the pile's list lines up past it, with the shelf's end */
+  --hai-dock-clear: 36px;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -766,10 +768,29 @@
   transform: translate(8px, -8px);
 }
 .hai-dock-pile::after { transform: translate(4px, -4px); }
+/* Remove all, at the shelf's end: a quiet icon until the pointer's on it */
+.hai-dock-clear {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: var(--hai-dock-clear);
+  height: var(--hai-dock-clear);
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--hai-radius);
+  background: none;
+  color: var(--hai-dim);
+  cursor: pointer;
+}
+.hai-dock-clear .hai-icon { width: 16px; height: 16px; stroke-width: 2.5; }
+.hai-dock-clear:hover { border-color: var(--hai-line); background: var(--hai-hover); color: var(--hai-fg); }
 /* what's in it, oldest first, above the shelf */
+/* Its right edge lines up with the shelf's: past the pile's margin, the gap,
+   Remove all, the shelf's padding and its border. So it opens leftward from
+   the shelf's end, and fits whatever the screen fits. */
 .hai-pile-list {
   position: absolute;
-  right: -8px;
+  right: calc(-1 * (8px + 10px + var(--hai-dock-clear, 36px) + 14px + 3px));
   bottom: calc(100% + 18px);
   z-index: 6;
   width: 280px;
@@ -993,6 +1014,7 @@
 /* a finger's worth, wherever the pointer is coarse */
 @media (pointer: coarse) {
   .hai-dock-item { height: 44px; }
+  .hai-dock { --hai-dock-clear: 44px; }
   .hai-surface-bar { min-height: 44px; }
   .hai-docked { min-height: 44px; }
   .hai-window-bar { min-height: 44px; }
@@ -1014,7 +1036,8 @@
 .hai-tool summary:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
 /* the dock's items and its pile take the buttons' ring; a bar's cells and the
    pile's rows, where a card would clip it, a ring inside */
-.hai-dock-item:focus-visible { outline: 3px solid var(--hai-fg); outline-offset: 2px; }
+.hai-dock-item:focus-visible,
+.hai-dock-clear:focus-visible { outline: 3px solid var(--hai-fg); outline-offset: 2px; }
 .hai-bar-btn:focus-visible,
 .hai-pile-row:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
 

package/src/icons.js

@@ -21,6 +21,7 @@ const PATHS = {
   window: "M4 5h16v14H4zM4 9h16",
   dock: "M12 4v10M7.5 9.5 12 14l4.5-4.5M4 20h16",
   undock: "M12 16V4M7.5 8.5 12 4l4.5 4.5M4 20h16",
+  undockAll: "M12 13V3M7.5 7.5 12 3l4.5 4.5M4 17h16M4 21h16",
   stack: "M3 8h13v13H3zM8 8V3h13v13h-5",
 };