@gemboss/ui 0.12.0 → 0.21.0

package/src/board-move.ts

@@ -0,0 +1,194 @@
+/**
+ * Board moves (0.18.0): moving a card between the columns of a `.ui-board[data-gb-move]`, OPTIONAL (a board without it
+ * stays read-only). Two ways that do the same thing, so a mouse, a keyboard and a screen reader all move cards:
+ *
+ * - Drag (HTML drag and drop): pick a card (`li[data-id][draggable]`) up, the target column and the line where it will
+ *   land are marked while it moves (`data-gb-over` on the column, `data-gb-drop="before|after"` on a card), drop.
+ * - Keyboard, the pattern of react-beautiful-dnd / dnd-kit: Tab to a card (`li[tabindex=0]`), Space picks it up,
+ *   ↑ ↓ move it inside its column, ← → to the column beside, Space or Enter drops it, Escape (or leaving the card)
+ *   puts it back. Every step is said in the board's live region (`[data-gb-live]`): "Picked up …", "Review, position
+ *   2 of 5", "Moved … to Review, position 2", "… stays in To do".
+ *
+ * A move is reported once, on the drop: `commit(cardId, toColumn, toIndex, fromColumn)`, `toIndex` counted in the
+ * target column WITHOUT the moved card (0 = top). Dropping a card where it was reports nothing. While a card is held
+ * nothing moves in the DOM (only attributes change), so React keeps owning the list: the React `Board` calls
+ * `onMove` and its parent re-renders the columns. kit-plain.js carries the same code for plain HTML and fires a
+ * cancelable `gb:move` event; unless the page cancels it, it moves the `li` itself. A finger cannot drag (no HTML drag
+ * on a phone): keep a way that is not dragging (a select or the card's ⋯ menu), as the README says.
+ */
+export type BoardCommit = (cardId: string, toColumn: string, toIndex: number, fromColumn: string) => void;
+
+type Held = { li: HTMLElement; id: string; from: HTMLElement; to: HTMLElement; index: number; origin: number; keys: boolean };
+
+const colsOf = (b: HTMLElement) => Array.from(b.querySelectorAll<HTMLElement>(":scope > .ui-board__col[data-col]"));
+const cardsOf = (c: HTMLElement) => Array.from(c.querySelectorAll<HTMLElement>("li[data-id]")).filter((li) => li.closest(".ui-board__col") === c);
+const nameOf = (li: HTMLElement) => (li.dataset.name || li.querySelector(".ui-card__link, h2, h3, h4")?.textContent || li.textContent || "").trim().replace(/\s+/g, " ").slice(0, 80) || "Card";
+const colName = (c: HTMLElement) => (c.querySelector(".ui-board__name")?.textContent || c.dataset.col || "").trim();
+
+export function say(board: HTMLElement, text: string): void {
+  let live = board.querySelector<HTMLElement>(":scope > [data-gb-live]");
+  if (!live) {
+    live = document.createElement("div");
+    live.className = "ui-sr-only";
+    live.setAttribute("aria-live", "assertive");
+    live.setAttribute("data-gb-live", "");
+    board.appendChild(live);
+  }
+  // Cleared first: the same sentence twice ("position 1 of 1") is still read.
+  live.textContent = "";
+  const l = live;
+  setTimeout(() => { l.textContent = text; }, 30);
+}
+
+/** Wires the board once (idempotent); `commit` is read at drop time from `board.__gbCommit`, so a re-render can swap it. */
+export function attachBoardMove(board: HTMLElement & { __gbCommit?: BoardCommit; __gbMoveOn?: boolean }, commit: BoardCommit): void {
+  board.__gbCommit = commit;
+  if (board.__gbMoveOn) return;
+  board.__gbMoveOn = true;
+  let held: Held | null = null;
+
+  const others = (c: HTMLElement) => cardsOf(c).filter((li) => li !== held?.li);
+  const clearMarks = () => {
+    board.querySelectorAll("[data-gb-drop]").forEach((e) => e.removeAttribute("data-gb-drop"));
+    board.querySelectorAll("[data-gb-over]").forEach((e) => e.removeAttribute("data-gb-over"));
+  };
+  const mark = () => {
+    if (!held) return;
+    clearMarks();
+    held.to.setAttribute("data-gb-over", "");
+    const o = others(held.to);
+    const at = held.index < o.length ? o[held.index] : o[o.length - 1];
+    if (at) {
+      at.setAttribute("data-gb-drop", held.index < o.length ? "before" : "after");
+      // A card past "Show more" (a closed <details>) has no box: open it so the line shows.
+      const more = at.closest("details:not([open])") as HTMLDetailsElement | null;
+      if (more && board.contains(more)) more.open = true;
+      if (held.keys) at.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    }
+  };
+  const where = () => held ? `${colName(held.to)}, position ${held.index + 1} of ${others(held.to).length + 1}` : "";
+  const end = () => {
+    if (!held) return;
+    held.li.removeAttribute("data-gb-lifted");
+    board.removeAttribute("data-gb-dragging");
+    clearMarks();
+    held = null;
+  };
+  const lift = (li: HTMLElement, keys: boolean) => {
+    const from = li.closest<HTMLElement>(".ui-board__col");
+    if (!from || !li.dataset.id) return;
+    const origin = cardsOf(from).indexOf(li);
+    held = { li, id: li.dataset.id, from, to: from, index: origin, origin, keys };
+    // "key" or "drag": a surface may change its layout for a keyboard hold, never inside dragstart (Chrome cancels the drag).
+    li.setAttribute("data-gb-lifted", keys ? "key" : "drag");
+    if (keys) {
+      mark();
+      say(board, `Picked up ${nameOf(li)}. ${where()}. Arrow keys move it, Space drops it, Escape cancels.`);
+    }
+  };
+  const drop = () => {
+    if (!held) return;
+    const h = held, name = nameOf(h.li), toCol = h.to.dataset.col!, fromCol = h.from.dataset.col!;
+    const same = h.to === h.from && h.index === h.origin;
+    const at = where();
+    end();
+    if (same) { say(board, `${name} dropped where it was, in ${colName(h.from)}.`); return; }
+    say(board, `Moved ${name} to ${at}.`);
+    board.__gbCommit?.(h.id, toCol, h.index, fromCol);
+    if (h.keys) refocus(board, h.id);
+  };
+  const cancel = (why = "") => {
+    if (!held) return;
+    const h = held;
+    end();
+    if (h.keys) say(board, `${why}${nameOf(h.li)} stays in ${colName(h.from)}.`);
+  };
+
+  board.addEventListener("keydown", (e) => {
+    const li = (e.target as HTMLElement).closest?.<HTMLElement>("li[data-id]");
+    if (!li || !board.contains(li)) return;
+    if (!held) {
+      // Only the card itself picks up: a Space on its link or a button inside it is that control's.
+      if ((e.key === " " || e.key === "Spacebar") && e.target === li) { e.preventDefault(); lift(li, true); }
+      return;
+    }
+    if (held.li !== li || !held.keys) return;
+    const cols = colsOf(board);
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      held.index = Math.max(0, Math.min(others(held.to).length, held.index + (e.key === "ArrowUp" ? -1 : 1)));
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      e.preventDefault();
+      const i = cols.indexOf(held.to) + (e.key === "ArrowLeft" ? -1 : 1);
+      if (i < 0 || i >= cols.length) { say(board, `${where()}. No column further ${e.key === "ArrowLeft" ? "left" : "right"}.`); return; }
+      held.to = cols[i];
+      held.index = Math.min(held.index, others(held.to).length);
+    } else if (e.key === " " || e.key === "Spacebar" || e.key === "Enter") {
+      e.preventDefault(); drop(); return;
+    } else if (e.key === "Escape") {
+      e.preventDefault(); e.stopPropagation(); cancel("Move cancelled. "); return;
+    } else if (e.key === "Tab") { cancel("Move cancelled. "); return; } else return;
+    mark();
+    say(board, where());
+  });
+  board.addEventListener("focusout", (e) => {
+    if (held?.keys && e.target === held.li && !held.li.contains(e.relatedTarget as Node | null)) cancel("Move cancelled. ");
+  });
+
+  board.addEventListener("dragstart", (e) => {
+    const li = (e.target as HTMLElement).closest?.<HTMLElement>("li[data-id]");
+    if (!li || !board.contains(li) || !e.dataTransfer) return;
+    if (held) end();
+    lift(li, false);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", li.dataset.id || "");
+    // Next frame: changing the layout inside dragstart makes Chrome cancel the drag (GemFactory found it).
+    requestAnimationFrame(() => { if (held) board.setAttribute("data-gb-dragging", ""); });
+  });
+  // Where a pointer event would land: the column under it and the index from the cards' midpoints. Read again on the
+  // drop itself, so a drag that left the board (dragleave cleared the marks) and came back still lands.
+  const targetAt = (e: DragEvent): { col: HTMLElement; index: number } | null => {
+    const col = (e.target as HTMLElement).closest?.<HTMLElement>(".ui-board__col[data-col]");
+    if (!col || !board.contains(col)) return null;
+    const o = others(col);
+    let index = o.length;
+    for (let i = 0; i < o.length; i++) {
+      const r = o[i].getBoundingClientRect();
+      if (!r.height) continue;
+      if (e.clientY < r.top + r.height / 2) { index = i; break; }
+      index = i + 1;
+    }
+    return { col, index };
+  };
+  board.addEventListener("dragover", (e) => {
+    if (!held || held.keys) return;
+    const t = targetAt(e);
+    if (!t) return;
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    // Re-marked when the target changed OR the marks are gone (a dragleave, or Safari's null relatedTarget, cleared them).
+    if (t.col !== held.to || t.index !== held.index || !board.querySelector("[data-gb-over]")) { held.to = t.col; held.index = t.index; mark(); }
+  });
+  board.addEventListener("dragleave", (e) => {
+    if (held && !held.keys && !board.contains(e.relatedTarget as Node | null)) clearMarks();
+  });
+  board.addEventListener("drop", (e) => {
+    if (!held || held.keys) return;
+    e.preventDefault();
+    const t = targetAt(e);
+    if (!t) { cancel(); return; }
+    held.to = t.col; held.index = t.index;
+    drop();
+  });
+  board.addEventListener("dragend", () => { if (held && !held.keys) cancel(); });
+}
+
+/** After a move the card may be a new element (React remounts it in its new column): focus it again by id. */
+export function refocus(board: HTMLElement, id: string): void {
+  const go = (n: number) => {
+    const li = Array.from(board.querySelectorAll<HTMLElement>("li[data-id]")).find((x) => x.dataset.id === id);
+    if (li && document.activeElement !== li) li.focus({ preventScroll: false });
+    else if (!li && n > 0) requestAnimationFrame(() => go(n - 1));
+  };
+  requestAnimationFrame(() => go(10));
+}

package/src/chat-composer.css

@@ -1,110 +1 @@
-/*
- * The chat COMPOSER — @gemboss/ui (moved from apps/admin/src/components/chat/chat-composer.css, 02/10/2026).
- *
- * The toolbar row under the text box (chips lead, tools, status, the one action pinned right), the one-row
- * layout when there are no chips, the engine picker's layout and the Stop button. A second surface needs the
- * toolbar — gemcare's assistant composer is a text box and a send button, i.e. the one-row case — and a copy
- * would be a second owner. The box itself (`form.gemboss-ec-input`, its textarea and send button) is in chat.css.
- *
- * A SEPARATE file from chat.css on purpose, as it was a separate file in the admin: chat.css rides the shell's
- * first load on every screen, while this sheet follows the chat chunk — the admin imports it from ChatComposer
- * and EnginePicker, not from the layout (the shell sat at 239.1 / 240 KB brotli when this moved). Other surfaces
- * get it inside gemboss-ui.css. Rules and their order are unchanged.
- *
- * Every selector here names a composer-only class (chiplabel · chipmark · chipsub · enginepick · enginepick-btn ·
- * stop · toolbar · toolbar-lead · toolbar-tools), so a rule only matches while a composer is on screen.
- */
-
-/* The toolbar row: chips on the left, then status, then the one action button pinned right.
-   `align-items: center` — the old row was `flex-end`, so 28px chips sat on the BOTTOM edge of a 44px
-   button and their centres ran 8px below its centre. Measured at 1366: chips cy 819, send cy 811.
-   The lead group is the only thing that shrinks. Send is `flex: none` and the chips inside the lead
-   carry `min-width: 0`, so a narrow composer ellipsises a label instead of pushing send off the row. */
-.gemboss-ec-toolbar { flex: 1 0 100%; display: flex; align-items: center; gap: 4px; min-width: 0; }
-.gemboss-ec-toolbar-lead { flex: 1 1 auto; display: flex; align-items: center; gap: 4px; min-width: 0; }
-/* The lead GROWS, and that is what pins status + action to the right edge. With nothing in it (a
-   browser tab has no engine picker, a driver without work mode has no select) it is removed, and
-   whatever follows takes the auto margin instead. */
-.gemboss-ec-toolbar-lead:empty { display: none; }
-.gemboss-ec-toolbar-lead:empty + * { margin-left: auto; }
-/* TOOLS ARE NOT CHIPS. The 📎 lives here, never in the lead: the composer gate reads `leading` as the
-   chip strip twice over — `edge` wants the first chip's text flush with the typed text, and `oneRow`
-   only runs when the lead is EMPTY. A button parked in the lead pushed the chips 47px right AND left
-   `oneRow` unable to fail at all; the gate's own negative control said so out loud
-   ("MÙ với oneRow — đối chứng ĐÃ QUAN SÁT ĐƯỢC và vẫn xanh") once the breakage stopped registering.
-   `flex: none` so it never steals the shrink budget the lead needs to ellipsise a long chip label. */
-.gemboss-ec-toolbar-tools { display: flex; align-items: center; gap: 4px; flex: none; min-width: 0; }
-.gemboss-ec-toolbar-tools:empty { display: none; }
-/* NO CHIPS ⇒ ONE ROW. Product Studio has nothing in its lead, and it still spent a whole 44px row on
-   a lone send button beside empty space — 99-120px tall for a one-line box. The text box shares the
-   row now and send sits at its bottom edge, where a growing message keeps it. */
-.gemboss-ec-input:has(> .gemboss-ec-toolbar > .gemboss-ec-toolbar-lead:empty) { flex-wrap: nowrap; align-items: flex-end; }
-.gemboss-ec-input:has(> .gemboss-ec-toolbar > .gemboss-ec-toolbar-lead:empty) > textarea { flex: 1 1 0; }
-.gemboss-ec-input:has(> .gemboss-ec-toolbar > .gemboss-ec-toolbar-lead:empty) > .gemboss-ec-toolbar { flex: 0 0 auto; }
-/* The engine picker is a `gemboss-ec-chipctl` like the select beside it — its colour, weight, padding
-   and hover all come from that one rule. What is left here is layout: Popover wraps the activator in an
-   element of its own, and the chip can only shrink if every box between it and the toolbar can.
-   DESCENDANT, not child, for that reason — `>` matched nothing when the button sat inside Polaris'
-   wrapper, measured, after the first attempt left it unstyled. */
-.gemboss-ec-enginepick { flex: 0 3 auto; min-width: 0; display: inline-flex; }
-.gemboss-ec-enginepick > * { min-width: 0; max-width: 100%; display: flex; }
-.gemboss-ec-enginepick button {
-  min-width: 0; max-width: 100%;
-  /* The same caret the work-mode select draws, at the same inset, so the two chips read as one type. */
-  padding-right: 24px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 7px center;
-}
-.gemboss-ec-chiplabel { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.gemboss-ec-chipmark { display: none; }
-.gemboss-ec-chipmark .gemboss-engine-mark { display: block; width: 16px; height: 16px; margin: 2px 0; }
-/* The steps ChatComposer measured its way down to (data-density on the form). The ellipsis above stays
-   as the floor for an engine with no mark, never as the plan. */
-.gemboss-ec-input:not([data-density="full"]) .gemboss-ec-chipsub { display: none; }
-.gemboss-ec-input:is([data-density="icon"], [data-density="tight"]) .gemboss-ec-enginepick-btn.has-mark .gemboss-ec-chiplabel { display: none; }
-.gemboss-ec-input:is([data-density="icon"], [data-density="tight"]) .gemboss-ec-enginepick-btn.has-mark .gemboss-ec-chipmark { display: block; }
-/* A mark does not ellipsise, so once the chip IS the mark it holds its width — shrunk further it slid
-   under the mode chip beside it. The overflow that leaves is what tells ChatComposer to step on. */
-.gemboss-ec-input:is([data-density="icon"], [data-density="tight"]) .gemboss-ec-enginepick:has(.has-mark) { flex-shrink: 0; }
-/* Open: it is showing a popover, so it stops being quiet. */
-.gemboss-ec-enginepick button[aria-expanded="true"] {
-  color: var(--gemboss-text); background-color: var(--gemboss-hover, rgba(0,0,0,0.05));
-}
-@media (pointer: coarse) {
-  /* SCOPED, and that word is load-bearing — this line was DEAD as `.gemboss-ec-stop`.
-     A media query adds no specificity, so the unscoped rule for the same class, declared ~1800 lines
-     LATER at its mouse size, beat this one on source order alone. Measured
-     2026-09-09 in a real coarse-pointer context: `matchMedia('(pointer: coarse)').matches === true`
-     and the computed width unchanged at its mouse size. Every phone got a Stop button ten pixels
-     under the target, while the rule meant to
-     fix that sat here reading as done — and the source test beside this block could not see it,
-     because a name being PRESENT is not the same fact as a rule WINNING.
-     `.gemboss-ec-input` is the same idiom the attach button above already uses for the same reason. */
-  .gemboss-ec-input .gemboss-ec-stop { width: 44px; height: 44px; min-width: 44px; }
-  /* SCOPED for the reason above: this control's own look is declared later, in the shell sheet. */
-  .gemboss-ec-input .gemboss-ec-stop-send { min-height: 44px; }
-  .gemboss-ec-enginepick button { min-height: 44px; }
-}
-/* Sized like the send button it replaces, so the composer does not reflow when a turn starts —
- * a control that moves under the cursor is a control people misclick. So it is THE SAME CIRCLE AS SEND
- * — same 44px, same 50% radius, only the colour and the glyph change. It used to be a 32px red
- * rounded square beside a 44px round send: two shapes, two sizes, one slot. */
-.gemboss-ec-stop {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  height: 44px;
-  min-width: 44px;
-  border: none;
-  border-radius: 50%;
-  background: var(--gemboss-critical, #d72c0d);
-  color: #fff;
-  cursor: pointer;
-}
-.gemboss-ec-stop svg { width: 12px; height: 12px; fill: currentColor; }
-.gemboss-ec-stop:disabled { opacity: 0.6; cursor: default; }
-.gemboss-ec-stop:hover { filter: brightness(1.08); }
-.gemboss-ec-stop:focus-visible { outline: 2px solid var(--gemboss-focus, var(--ui-focus, #5661f5)); outline-offset: 2px; }
+.gemboss-ec-toolbar{flex:1 0 100%;display:flex;align-items:center;gap:4px;min-width:0}.gemboss-ec-toolbar-lead{flex:1 1 auto;display:flex;align-items:center;gap:4px;min-width:0}.gemboss-ec-toolbar-lead:empty{display:none}.gemboss-ec-toolbar-lead:empty+*{margin-left:auto}.gemboss-ec-toolbar-tools{display:flex;align-items:center;gap:4px;flex:none;min-width:0}.gemboss-ec-toolbar-tools:empty{display:none}.gemboss-ec-input:has(>.gemboss-ec-toolbar>.gemboss-ec-toolbar-lead:empty){flex-wrap:nowrap;align-items:flex-end}.gemboss-ec-input:has(>.gemboss-ec-toolbar>.gemboss-ec-toolbar-lead:empty)>textarea{flex:1 1 0}.gemboss-ec-input:has(>.gemboss-ec-toolbar>.gemboss-ec-toolbar-lead:empty)>.gemboss-ec-toolbar{flex:0 0 auto}.gemboss-ec-enginepick{flex:0 3 auto;min-width:0;display:inline-flex}.gemboss-ec-enginepick>*{min-width:0;max-width:100%;display:flex}.gemboss-ec-enginepick button{min-width:0;max-width:100%;padding-right:24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 7px center}.gemboss-ec-chiplabel{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-ec-chipmark{display:none}.gemboss-ec-chipmark .gemboss-engine-mark{display:block;width:16px;height:16px;margin:2px 0}.gemboss-ec-input:not([data-density=full]) .gemboss-ec-chipsub{display:none}.gemboss-ec-input:is([data-density=icon],[data-density=tight]) .gemboss-ec-enginepick-btn.has-mark .gemboss-ec-chiplabel{display:none}.gemboss-ec-input:is([data-density=icon],[data-density=tight]) .gemboss-ec-enginepick-btn.has-mark .gemboss-ec-chipmark{display:block}.gemboss-ec-input:is([data-density=icon],[data-density=tight]) .gemboss-ec-enginepick:has(.has-mark){flex-shrink:0}.gemboss-ec-enginepick button[aria-expanded=true]{color:var(--gemboss-text);background-color:var(--gemboss-hover, rgba(0,0,0,.05))}@media (pointer: coarse){.gemboss-ec-input .gemboss-ec-stop{width:44px;height:44px;min-width:44px}.gemboss-ec-input .gemboss-ec-stop-send,.gemboss-ec-enginepick button{min-height:44px}}.gemboss-ec-stop{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;border:none;border-radius:50%;background:var(--gemboss-critical, #d72c0d);color:#fff;cursor:pointer}.gemboss-ec-stop svg{width:12px;height:12px;fill:currentColor}.gemboss-ec-stop:disabled{opacity:.6;cursor:default}.gemboss-ec-stop:hover{filter:brightness(1.08)}.gemboss-ec-stop:focus-visible{outline:2px solid var(--gemboss-focus, var(--ui-focus, #5661f5));outline-offset:2px}