@leavepulse/ui 0.51.1 → 0.53.0

package/dist/assets/{LpTable-D8jvowDb.css → LpTable-BNzavdlv.css}

@@ -11,17 +11,17 @@
  * fade before closing the gap and the whole list lurches at the end instead of
  * gliding.
  */
-.lp-row-enter-active[data-v-602c1271],
-.lp-row-leave-active[data-v-602c1271] {
+.lp-row-enter-active[data-v-a6bdc221],
+.lp-row-leave-active[data-v-a6bdc221] {
   transition:
     opacity var(--duration-fast) var(--ease-emphasized),
     transform var(--duration-fast) var(--ease-emphasized);
 }
-.lp-row-move[data-v-602c1271] {
+.lp-row-move[data-v-a6bdc221] {
   transition: transform var(--duration-medium) var(--ease-emphasized);
 }
-.lp-row-enter-from[data-v-602c1271],
-.lp-row-leave-to[data-v-602c1271] {
+.lp-row-enter-from[data-v-a6bdc221],
+.lp-row-leave-to[data-v-a6bdc221] {
   opacity: 0;
   transform: translateX(-0.5rem);
 }
@@ -35,7 +35,7 @@
  * drops out of the table layout entirely. Nothing sits below this row to be
  * dragged around, so simply not animating its exit costs nothing.
  */
-.lp-row-empty.lp-row-leave-active[data-v-602c1271] {
+.lp-row-empty.lp-row-leave-active[data-v-a6bdc221] {
   display: none;
 }
 
@@ -54,7 +54,7 @@
  * once anything is selected. An earlier version collapsed the column to nothing
  * and floated the hover box over the first cell, where it sat on the text.
  */
-.lp-tick[data-v-602c1271] {
+.lp-tick[data-v-a6bdc221] {
   display: flex;
   align-items: center;
   max-width: 0;
@@ -66,17 +66,17 @@
     padding var(--duration-medium) var(--ease-emphasized),
     opacity var(--duration-fast) ease;
 }
-.lp-tick-open[data-v-602c1271] {
+.lp-tick-open[data-v-a6bdc221] {
   max-width: 3.25rem;
   padding-inline: 1rem;
   opacity: 1;
 }
-.lp-tick-hidden[data-v-602c1271],
-.lp-tick-cue[data-v-602c1271] {
+.lp-tick-hidden[data-v-a6bdc221],
+.lp-tick-cue[data-v-a6bdc221] {
   opacity: 0;
 }
-tr:hover .lp-tick-cue[data-v-602c1271],
-.lp-tick-cue[data-v-602c1271]:focus-within {
+tr:hover .lp-tick-cue[data-v-a6bdc221],
+.lp-tick-cue[data-v-a6bdc221]:focus-within {
   opacity: 1;
 }
 
@@ -84,24 +84,24 @@ tr:hover .lp-tick-cue[data-v-602c1271],
    turned down the rows change without animating rather than not changing. */
 /* Only where there is a hover to reveal it; a finger long-presses instead. */
 @media (hover: none) {
-tr:hover .lp-tick-cue[data-v-602c1271] {
+tr:hover .lp-tick-cue[data-v-a6bdc221] {
     opacity: 0;
 }
 
   /* Nor is there anything for the column's width to hold until then: on a
      touch screen it stays closed until a long press starts selecting, and
      eases open like the rest of the column. */
-.lp-tick-hidden[data-v-602c1271],
-  .lp-tick-cue[data-v-602c1271] {
+.lp-tick-hidden[data-v-a6bdc221],
+  .lp-tick-cue[data-v-a6bdc221] {
     max-width: 0;
     padding-inline: 0;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.lp-row-enter-active[data-v-602c1271],
-  .lp-row-leave-active[data-v-602c1271],
-  .lp-row-move[data-v-602c1271],
-  .lp-tick[data-v-602c1271] {
+.lp-row-enter-active[data-v-a6bdc221],
+  .lp-row-leave-active[data-v-a6bdc221],
+  .lp-row-move[data-v-a6bdc221],
+  .lp-tick[data-v-a6bdc221] {
     transition: none;
 }
 }

package/dist/chunks/{LpBreadcrumbs-CQJd73Gm.js → LpBreadcrumbs-D4TsoFju.js}

@@ -1,10 +1,12 @@
-import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, Fragment, renderList, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, normalizeClass, Fragment, renderList, createBlock, createCommentVNode, resolveDynamicComponent, withCtx, toDisplayString } from "vue";
 import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
 import { useLabels, useLinkComponent } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 import { resolveLink } from "../components/link.js";
 const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = ["aria-current"];
+const _hoisted_2 = { class: "truncate" };
+const _hoisted_3 = ["aria-current"];
+const _hoisted_4 = { class: "truncate" };
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -34,11 +36,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }))
     );
     const { class: rootClass, attrs: rest } = useMergedAttrs(
-      "flex items-center gap-1.5 text-sm"
+      "flex min-w-0 items-center gap-1.5 text-sm"
     );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("nav", mergeProps({
-        "aria-label": unref(text).nav
+        "aria-label": unref(text).nav,
+        class: "min-w-0"
       }, unref(rest)), [
         createElementVNode("ol", {
           class: normalizeClass(unref(rootClass))
@@ -46,20 +49,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           (openBlock(true), createElementBlock(Fragment, null, renderList(crumbs.value, ({ item, last, link }, i) => {
             return openBlock(), createElementBlock("li", {
               key: i,
-              class: "inline-flex items-center gap-1.5"
+              class: normalizeClass(["inline-flex min-w-0 items-center gap-1.5", last ? "shrink" : "shrink-0"])
             }, [
               i > 0 ? (openBlock(), createBlock(_sfc_main$1, {
                 key: 0,
                 name: "lucide:chevron-right",
                 size: 14,
-                class: "text-muted",
+                class: "shrink-0 text-muted",
                 "aria-hidden": "true"
               })) : createCommentVNode("", true),
               link ? (openBlock(), createBlock(resolveDynamicComponent(link.is), mergeProps({
                 key: 1,
                 ref_for: true
               }, link.props, {
-                class: "inline-flex items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
+                class: "inline-flex min-w-0 items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring",
                 onClick: ($event) => _ctx.$emit("navigate", item, i)
               }), {
                 default: withCtx(() => [
@@ -68,12 +71,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     name: item.icon,
                     size: 14
                   }, null, 8, ["name"])) : createCommentVNode("", true),
-                  createTextVNode(" " + toDisplayString(item.label), 1)
+                  createElementVNode("span", _hoisted_2, toDisplayString(item.label), 1)
                 ]),
                 _: 2
               }, 1040, ["onClick"])) : (openBlock(), createElementBlock("span", {
                 key: 2,
-                class: normalizeClass(["inline-flex items-center gap-1.5", last ? "text-ink" : "text-muted"]),
+                class: normalizeClass(["inline-flex min-w-0 items-center gap-1.5", last ? "text-ink" : "text-muted"]),
                 "aria-current": last ? "page" : void 0
               }, [
                 item.icon ? (openBlock(), createBlock(_sfc_main$1, {
@@ -81,9 +84,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   name: item.icon,
                   size: 14
                 }, null, 8, ["name"])) : createCommentVNode("", true),
-                createTextVNode(" " + toDisplayString(item.label), 1)
-              ], 10, _hoisted_2))
-            ]);
+                createElementVNode("span", _hoisted_4, toDisplayString(item.label), 1)
+              ], 10, _hoisted_3))
+            ], 2);
           }), 128))
         ], 2)
       ], 16, _hoisted_1);

package/dist/components/LpBreadcrumbs.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpBreadcrumbs-CQJd73Gm.js";
+import { _ as _sfc_main } from "../chunks/LpBreadcrumbs-D4TsoFju.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTable.vue.d.ts

@@ -211,6 +211,7 @@ declare const __VLS_export: <T extends Record<string, unknown>>(__VLS_props: Non
         [x: `cell-${string}`]: ((props: {
             row: T;
             value: unknown;
+            openMenu: (event: Event) => void;
         }) => any) | undefined;
     } & {
         bulk?: (props: {

package/dist/components/LpTable.vue.js

@@ -18,7 +18,7 @@ import { _ as _sfc_main$1 } from "../chunks/LpButton-CKSwC6Mu.js";
 import { toCsv, downloadFile, fileStem } from "./exportData.js";
 import { summarizeShown, parseTableState, serializeTableState, countValues } from "./tableFilter.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-D8jvowDb.css';const _hoisted_1 = {
+import '../assets/LpTable-BNzavdlv.css';const _hoisted_1 = {
   key: 0,
   class: "flex justify-end"
 };
@@ -164,6 +164,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onRowContextMenu(row) {
       menuRow.value = row;
     }
+    function openRowMenu(event) {
+      const button = event.currentTarget;
+      if (!(button instanceof HTMLElement)) return;
+      const rect = button.getBoundingClientRect();
+      button.dispatchEvent(
+        new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: rect.left, clientY: rect.bottom })
+      );
+    }
     const contextMenu = computed(() => {
       if (paint.painting.value) return [];
       const table = tableMenu();
@@ -917,7 +925,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                             }, [
                               renderSlot(_ctx.$slots, `cell-${col.key}`, {
                                 row,
-                                value: row[col.key]
+                                value: row[col.key],
+                                openMenu: openRowMenu
                               }, () => [
                                 createTextVNode(toDisplayString(row[col.key]), 1)
                               ], true)
@@ -947,7 +956,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-602c1271"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a6bdc221"]]);
 export {
   LpTable as default
 };

package/dist/composables/spatialNav.d.ts

@@ -0,0 +1,22 @@
+export type Direction = "up" | "down" | "left" | "right";
+export interface Box {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * The index of the box to move to from `from` in `direction`, or -1 when
+ * nothing lies that way. Only boxes whose near edge is past `from`'s far edge
+ * in that direction count (so a move never goes backwards or sideways only);
+ * among those the nearest wins, measured between the facing edges along the
+ * direction plus the weighted offset across it, which picks the neighbour in
+ * the same row or column over one diagonally closer.
+ */
+export declare function nextInDirection(from: Box, candidates: Box[], direction: Direction): number;
+/**
+ * The elements under `root` a directional move can land on: focusable, not
+ * disabled, not taken out of the tab order on purpose, not inert, and
+ * actually on screen.
+ */
+export declare function focusableIn(root: ParentNode): HTMLElement[];

package/dist/composables/spatialNav.js

@@ -0,0 +1,72 @@
+const SIDEWAYS_WEIGHT = 2;
+function nextInDirection(from, candidates, direction) {
+  let best = -1;
+  let bestScore = Number.POSITIVE_INFINITY;
+  const fromCenter = { x: from.x + from.width / 2, y: from.y + from.height / 2 };
+  candidates.forEach((box, index) => {
+    const ahead = distanceAhead(from, box, direction);
+    if (ahead < 0) return;
+    const center = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+    const across = direction === "left" || direction === "right" ? overlapGap(from.y, from.height, box.y, box.height, fromCenter.y, center.y) : overlapGap(from.x, from.width, box.x, box.width, fromCenter.x, center.x);
+    const score = ahead + across * SIDEWAYS_WEIGHT;
+    if (score < bestScore) {
+      bestScore = score;
+      best = index;
+    }
+  });
+  return best;
+}
+function distanceAhead(from, box, direction) {
+  const slack = 1;
+  switch (direction) {
+    case "right":
+      return box.x + slack >= from.x + from.width ? box.x - (from.x + from.width) : -1;
+    case "left":
+      return box.x + box.width - slack <= from.x ? from.x - (box.x + box.width) : -1;
+    case "down":
+      return box.y + slack >= from.y + from.height ? box.y - (from.y + from.height) : -1;
+    case "up":
+      return box.y + box.height - slack <= from.y ? from.y - (box.y + box.height) : -1;
+  }
+}
+function overlapGap(start, size, otherStart, otherSize, center, otherCenter) {
+  const overlaps = otherStart < start + size && start < otherStart + otherSize;
+  return overlaps ? 0 : Math.abs(otherCenter - center);
+}
+const FOCUSABLE = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  "[tabindex]",
+  "[contenteditable='true']"
+].join(",");
+const ROVING_ITEMS = [
+  "button",
+  "a[href]",
+  "[role=option]",
+  "[role=menuitem]",
+  "[role=menuitemcheckbox]",
+  "[role=menuitemradio]",
+  "[role=tab]",
+  "[role=radio]",
+  "[role=row]",
+  "[role=gridcell]",
+  "[role=treeitem]"
+].join(",");
+function focusableIn(root) {
+  return [...root.querySelectorAll(FOCUSABLE)].filter((element) => {
+    if (element.matches(":disabled") || element.closest("[inert]")) return false;
+    if (element.getAttribute("tabindex") === "-1" && !element.matches(ROVING_ITEMS)) return false;
+    const rect = element.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return false;
+    const style = getComputedStyle(element);
+    return style.visibility !== "hidden" && style.display !== "none";
+  });
+}
+export {
+  focusableIn,
+  nextInDirection
+};

package/dist/composables/useGamepadNav.d.ts

@@ -0,0 +1,14 @@
+import { type MaybeRefOrGetter } from "vue";
+export interface UseGamepadNavOptions {
+    enabled?: MaybeRefOrGetter<boolean>;
+    /** B with no dialog open: go back, as a browser's back would. */
+    onBack?: () => void;
+    /** Left and right bumpers: the previous and next section, tab or page. */
+    onPrevious?: () => void;
+    onNext?: () => void;
+    /** Start (the menu button): a menu or search, say. */
+    onMenu?: () => void;
+}
+export declare function useGamepadNav(options?: UseGamepadNavOptions): {
+    connected: import("vue").Ref<boolean, boolean>;
+};

package/dist/composables/useGamepadNav.js

@@ -0,0 +1,137 @@
+import { ref, onMounted, onBeforeUnmount, toValue } from "vue";
+import { focusableIn, nextInDirection } from "./spatialNav.js";
+const BUTTON = { a: 0, b: 1, lb: 4, rb: 5, start: 9, up: 12, down: 13, left: 14, right: 15 };
+const STICK_THRESHOLD = 0.55;
+const REPEAT_DELAY_MS = 380;
+const REPEAT_MS = 110;
+const SCROLL_SPEED = 18;
+const OPEN_DIALOG = "[role=dialog][data-state=open], [role=alertdialog][data-state=open], [role=menu][data-state=open], [role=listbox][data-state=open]";
+function useGamepadNav(options = {}) {
+  const connected = ref(false);
+  let frame = 0;
+  const held = /* @__PURE__ */ new Map();
+  function enabled() {
+    return options.enabled === void 0 ? true : toValue(options.enabled);
+  }
+  function scope() {
+    const layers = document.querySelectorAll(OPEN_DIALOG);
+    return layers[layers.length - 1] ?? document.body;
+  }
+  function markGamepad() {
+    document.documentElement.dataset.input = "gamepad";
+  }
+  function focus(element) {
+    element.setAttribute("data-lp-focus-ring", "");
+    element.addEventListener("blur", () => element.removeAttribute("data-lp-focus-ring"), { once: true });
+    element.focus({ preventScroll: true });
+    element.scrollIntoView({ block: "nearest", inline: "nearest" });
+  }
+  function move(direction) {
+    const candidates = focusableIn(scope());
+    if (!candidates.length) return;
+    const current = document.activeElement;
+    if (!current || !candidates.includes(current)) {
+      focus(candidates[0]);
+      return;
+    }
+    const others = candidates.filter((element) => element !== current);
+    const next = nextInDirection(
+      current.getBoundingClientRect(),
+      others.map((element) => element.getBoundingClientRect()),
+      direction
+    );
+    if (next >= 0) focus(others[next]);
+  }
+  function press() {
+    const current = document.activeElement;
+    if (!current || current === document.body) return;
+    if (current.matches("input:not([type=checkbox]):not([type=radio]), textarea, [contenteditable=true]")) {
+      current.focus();
+      return;
+    }
+    current.click();
+  }
+  function back() {
+    if (document.querySelector(OPEN_DIALOG)) {
+      const target = document.activeElement ?? document.body;
+      target.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", code: "Escape", bubbles: true }));
+      return;
+    }
+    options.onBack?.();
+  }
+  function edge(key, down, now, act, repeats) {
+    const since = held.get(key);
+    if (!down) {
+      held.delete(key);
+      return;
+    }
+    if (since === void 0) {
+      held.set(key, now);
+      act();
+      return;
+    }
+    if (repeats && now - since >= REPEAT_DELAY_MS) {
+      held.set(key, now - REPEAT_DELAY_MS + REPEAT_MS);
+      act();
+    }
+  }
+  function scrollBy(dx, dy) {
+    let element = document.activeElement;
+    while (element && element !== document.body) {
+      const style = getComputedStyle(element);
+      if (/(auto|scroll)/.test(style.overflowY + style.overflowX) && element.scrollHeight > element.clientHeight) break;
+      element = element.parentElement;
+    }
+    (element && element !== document.body ? element : document.scrollingElement)?.scrollBy(dx, dy);
+  }
+  function poll(now) {
+    frame = requestAnimationFrame(poll);
+    if (!enabled() || document.hidden) return;
+    const pad = [...navigator.getGamepads()].find((entry) => entry?.connected && entry.mapping === "standard");
+    if (!pad) return;
+    const pressed = (index) => pad.buttons[index]?.pressed ?? false;
+    const [lx = 0, ly = 0, rx = 0, ry = 0] = pad.axes;
+    const before = held.size;
+    edge("up", pressed(BUTTON.up) || ly < -STICK_THRESHOLD, now, () => move("up"), true);
+    edge("down", pressed(BUTTON.down) || ly > STICK_THRESHOLD, now, () => move("down"), true);
+    edge("left", pressed(BUTTON.left) || lx < -STICK_THRESHOLD, now, () => move("left"), true);
+    edge("right", pressed(BUTTON.right) || lx > STICK_THRESHOLD, now, () => move("right"), true);
+    edge("a", pressed(BUTTON.a), now, press, false);
+    edge("b", pressed(BUTTON.b), now, back, false);
+    edge("lb", pressed(BUTTON.lb), now, () => options.onPrevious?.(), false);
+    edge("rb", pressed(BUTTON.rb), now, () => options.onNext?.(), false);
+    edge("start", pressed(BUTTON.start), now, () => options.onMenu?.(), false);
+    const scrollX = Math.abs(rx) > 0.2 ? rx * SCROLL_SPEED : 0;
+    const scrollY = Math.abs(ry) > 0.2 ? ry * SCROLL_SPEED : 0;
+    if (scrollX || scrollY) scrollBy(scrollX, scrollY);
+    if (held.size > before || scrollX || scrollY) markGamepad();
+  }
+  function onConnect() {
+    connected.value = [...navigator.getGamepads()].some((entry) => entry?.connected);
+    cancelAnimationFrame(frame);
+    if (connected.value) frame = requestAnimationFrame(poll);
+  }
+  function onOtherInput(event) {
+    if (!event.isTrusted) return;
+    if (document.documentElement.dataset.input === "gamepad") delete document.documentElement.dataset.input;
+  }
+  onMounted(() => {
+    if (typeof navigator === "undefined" || !("getGamepads" in navigator)) return;
+    window.addEventListener("gamepadconnected", onConnect);
+    window.addEventListener("gamepaddisconnected", onConnect);
+    window.addEventListener("pointerdown", onOtherInput, { capture: true, passive: true });
+    window.addEventListener("keydown", onOtherInput, { capture: true, passive: true });
+    onConnect();
+  });
+  onBeforeUnmount(() => {
+    cancelAnimationFrame(frame);
+    window.removeEventListener("gamepadconnected", onConnect);
+    window.removeEventListener("gamepaddisconnected", onConnect);
+    window.removeEventListener("pointerdown", onOtherInput, { capture: true });
+    window.removeEventListener("keydown", onOtherInput, { capture: true });
+  });
+  return { connected };
+}
+export {
+  useGamepadNav
+};

package/dist/index.d.ts

@@ -187,6 +187,10 @@ export { findHotkeyConflicts, hotkeyConflicts, hotkeySteps, matchesHotkey, pendi
 export type { HotkeyConflict, HotkeyStep } from "./composables/useHotkeys";
 export { anyModalOpen, topModalElement, useModalLayer } from "./components/modalDepth";
 export type { ModalLayer, ModalLayerOptions } from "./components/modalDepth";
+export { useGamepadNav } from "./composables/useGamepadNav";
+export type { UseGamepadNavOptions } from "./composables/useGamepadNav";
+export { focusableIn, nextInDirection } from "./composables/spatialNav";
+export type { Box, Direction } from "./composables/spatialNav";
 export { provideGlass, useGlass } from "./composables/useGlass";
 export { LP_CONFIG, lpConfig, mergeConfig, provideLpConfig, useLabels, useLinkComponent, useLpConfig } from "./composables/useLpConfig";
 export type { LabelScope, LpConfig } from "./composables/useLpConfig";

package/dist/index.js

@@ -8,7 +8,7 @@ import { _ as _6 } from "./chunks/LpAppShell-BmMYcEVx.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-C8IgSMsi.js";
 import { _ as _8 } from "./chunks/LpAvatar-Cb1jtOVv.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
-import { _ as _10 } from "./chunks/LpBreadcrumbs-CQJd73Gm.js";
+import { _ as _10 } from "./chunks/LpBreadcrumbs-D4TsoFju.js";
 import { _ as _11 } from "./chunks/LpButton-CKSwC6Mu.js";
 import { _ as _12 } from "./chunks/LpCalendar-DrA2McTU.js";
 import { _ as _13 } from "./chunks/LpCard-BdxkMXjo.js";
@@ -116,6 +116,8 @@ import { D, G, N, T, b as b2, c as c2, d, e, f, g, h, i as i2, l, j, n, k, m, r,
 import { useClipboard } from "./composables/useClipboard.js";
 import { activeShortcuts, appleModifierLabel, findHotkeyConflicts, hotkeyConflicts, hotkeySteps, isAppleKeyboard, matchesHotkey, mergeShortcutGroups, pendingHotkey, sequenceProgress, useAppleKeyboard, useHotkeys } from "./composables/useHotkeys.js";
 import { anyModalOpen, topModalElement, useModalLayer } from "./components/modalDepth.js";
+import { useGamepadNav } from "./composables/useGamepadNav.js";
+import { focusableIn, nextInDirection } from "./composables/spatialNav.js";
 import { provideGlass, useGlass } from "./composables/useGlass.js";
 import { LP_CONFIG, lpConfig, mergeConfig, provideLpConfig, useLabels, useLinkComponent, useLpConfig } from "./composables/useLpConfig.js";
 import { mergeClass, useMergedAttrs, useMergedClass } from "./composables/useMergedClass.js";
@@ -325,6 +327,7 @@ export {
   filterCountries,
   findHotkeyConflicts,
   flagEmoji,
+  focusableIn,
   formatAddress,
   formatClipTime,
   formatColor,
@@ -360,6 +363,7 @@ export {
   mergeConfig,
   mergeShortcutGroups,
   moveLeaf,
+  nextInDirection,
   niceScale,
   n as nord,
   normalizeHue,
@@ -434,6 +438,7 @@ export {
   useFieldNotice,
   useForm,
   useFormDraft,
+  useGamepadNav,
   useGlass,
   useHotkeys,
   useInputFilter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.51.1",
+  "version": "0.53.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpBreadcrumbs.vue

@@ -53,43 +53,47 @@ const crumbs = computed(() =>
 
 // The trail sets its own gap, which a dense header bar needs to reduce.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "flex items-center gap-1.5 text-sm",
+  "flex min-w-0 items-center gap-1.5 text-sm",
 )
 </script>
 
 <template>
-  <nav :aria-label="text.nav" v-bind="rest">
+  <!-- One line however long the labels: the earlier crumbs keep their size
+       and the current one gives way with an ellipsis. Wrapping, a long name
+       pushed the trail onto three lines over whatever bar held it. -->
+  <nav :aria-label="text.nav" class="min-w-0" v-bind="rest">
     <ol :class="rootClass">
       <li
         v-for="({ item, last, link }, i) in crumbs"
         :key="i"
-        class="inline-flex items-center gap-1.5"
+        class="inline-flex min-w-0 items-center gap-1.5"
+        :class="last ? 'shrink' : 'shrink-0'"
       >
         <LpIcon
           v-if="i > 0"
           name="lucide:chevron-right"
           :size="14"
-          class="text-muted"
+          class="shrink-0 text-muted"
           aria-hidden="true"
         />
         <component
           :is="link.is"
           v-if="link"
           v-bind="link.props"
-          class="inline-flex items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
+          class="inline-flex min-w-0 items-center gap-1.5 rounded-xs text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring"
           @click="$emit('navigate', item, i)"
         >
           <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
-          {{ item.label }}
+          <span class="truncate">{{ item.label }}</span>
         </component>
         <span
           v-else
-          class="inline-flex items-center gap-1.5"
+          class="inline-flex min-w-0 items-center gap-1.5"
           :class="last ? 'text-ink' : 'text-muted'"
           :aria-current="last ? 'page' : undefined"
         >
           <LpIcon v-if="item.icon" :name="item.icon" :size="14" />
-          {{ item.label }}
+          <span class="truncate">{{ item.label }}</span>
         </span>
       </li>
     </ol>

package/src/components/LpTable.vue

@@ -355,6 +355,23 @@ function onRowContextMenu(row: T) {
   menuRow.value = row
 }
 
+/*
+ * The same menu on a button of the row's own, a "more" button in an actions
+ * cell: cell slots get `openMenu` for its click. A dropdown per row stood up
+ * the full reka menu stack in every row, closed — some twenty components a
+ * row, which on a phone made a list of a few hundred rows take most of a
+ * second to appear. Here the click becomes a right-click at the button's
+ * corner, which the row remembers on its way up and the shared menu opens at.
+ */
+function openRowMenu(event: Event) {
+  const button = event.currentTarget
+  if (!(button instanceof HTMLElement)) return
+  const rect = button.getBoundingClientRect()
+  button.dispatchEvent(
+    new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX: rect.left, clientY: rect.bottom }),
+  )
+}
+
 // Row items first — they are what the pointer is actually on — then the
 // table-wide ones under a rule, when the row has any of its own.
 const contextMenu = computed<ContextMenuItemDef[]>(() => {
@@ -1300,7 +1317,7 @@ const barInsetTop = computed(() =>
             class="px-4 text-ink"
             :class="[alignClass(col.align), cellY, col.nowrap ? 'whitespace-nowrap' : '']"
           >
-            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]">
+            <slot :name="`cell-${col.key}`" :row="row" :value="row[col.key]" :open-menu="openRowMenu">
               {{ row[col.key] }}
             </slot>
           </td>

package/src/composables/spatialNav.ts

@@ -0,0 +1,119 @@
+/*
+ * Moving focus by direction rather than by document order: what a D-pad, a
+ * stick or a TV remote needs, where "next" means "the thing to the right", not
+ * "the thing after it in the markup".
+ */
+
+export type Direction = "up" | "down" | "left" | "right"
+
+export interface Box {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+/*
+ * How far off the line of travel a candidate may sit, relative to how far
+ * along it is. A move right should prefer the button beside, not the one
+ * further right and a row below; the weight makes a sideways offset cost more
+ * than the same distance straight ahead.
+ */
+const SIDEWAYS_WEIGHT = 2
+
+/**
+ * The index of the box to move to from `from` in `direction`, or -1 when
+ * nothing lies that way. Only boxes whose near edge is past `from`'s far edge
+ * in that direction count (so a move never goes backwards or sideways only);
+ * among those the nearest wins, measured between the facing edges along the
+ * direction plus the weighted offset across it, which picks the neighbour in
+ * the same row or column over one diagonally closer.
+ */
+export function nextInDirection(from: Box, candidates: Box[], direction: Direction): number {
+  let best = -1
+  let bestScore = Number.POSITIVE_INFINITY
+  const fromCenter = { x: from.x + from.width / 2, y: from.y + from.height / 2 }
+  candidates.forEach((box, index) => {
+    const ahead = distanceAhead(from, box, direction)
+    if (ahead < 0) return
+    const center = { x: box.x + box.width / 2, y: box.y + box.height / 2 }
+    const across = direction === "left" || direction === "right"
+      ? overlapGap(from.y, from.height, box.y, box.height, fromCenter.y, center.y)
+      : overlapGap(from.x, from.width, box.x, box.width, fromCenter.x, center.x)
+    const score = ahead + across * SIDEWAYS_WEIGHT
+    if (score < bestScore) {
+      bestScore = score
+      best = index
+    }
+  })
+  return best
+}
+
+/** Gap between the facing edges along `direction`; negative when `box` is not ahead. */
+function distanceAhead(from: Box, box: Box, direction: Direction): number {
+  // A small tolerance, so boxes that touch or overlap by a pixel still count.
+  const slack = 1
+  switch (direction) {
+    case "right":
+      return box.x + slack >= from.x + from.width ? box.x - (from.x + from.width) : -1
+    case "left":
+      return box.x + box.width - slack <= from.x ? from.x - (box.x + box.width) : -1
+    case "down":
+      return box.y + slack >= from.y + from.height ? box.y - (from.y + from.height) : -1
+    case "up":
+      return box.y + box.height - slack <= from.y ? from.y - (box.y + box.height) : -1
+  }
+}
+
+/**
+ * How far apart two spans are across the line of travel: zero when they
+ * overlap (the same row or column), otherwise the distance between their
+ * centres, so a box straight ahead always beats one beside the line.
+ */
+function overlapGap(start: number, size: number, otherStart: number, otherSize: number, center: number, otherCenter: number) {
+  const overlaps = otherStart < start + size && start < otherStart + otherSize
+  return overlaps ? 0 : Math.abs(otherCenter - center)
+}
+
+const FOCUSABLE = [
+  "a[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  "[tabindex]",
+  "[contenteditable='true']",
+].join(",")
+
+const ROVING_ITEMS = [
+  "button",
+  "a[href]",
+  "[role=option]",
+  "[role=menuitem]",
+  "[role=menuitemcheckbox]",
+  "[role=menuitemradio]",
+  "[role=tab]",
+  "[role=radio]",
+  "[role=row]",
+  "[role=gridcell]",
+  "[role=treeitem]",
+].join(",")
+
+/**
+ * The elements under `root` a directional move can land on: focusable, not
+ * disabled, not taken out of the tab order on purpose, not inert, and
+ * actually on screen.
+ */
+export function focusableIn(root: ParentNode): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((element) => {
+    if (element.matches(":disabled") || element.closest("[inert]")) return false
+    // Out of the tab order on purpose, unless it is an item of a widget that
+    // moves its own focus (a roving list, tabs, a menu): those are reachable.
+    if (element.getAttribute("tabindex") === "-1" && !element.matches(ROVING_ITEMS)) return false
+    const rect = element.getBoundingClientRect()
+    if (rect.width === 0 || rect.height === 0) return false
+    const style = getComputedStyle(element)
+    return style.visibility !== "hidden" && style.display !== "none"
+  })
+}

package/src/composables/useGamepadNav.ts

@@ -0,0 +1,189 @@
+import { onBeforeUnmount, onMounted, ref, type MaybeRefOrGetter, toValue } from "vue"
+import { focusableIn, nextInDirection, type Direction } from "./spatialNav"
+
+/*
+ * A game controller driving the interface: the D-pad and the left stick move
+ * focus to the nearest control in that direction, A presses it, B backs out
+ * (closing the open dialog first), the bumpers and Start are the app's to
+ * use, and the right stick scrolls whatever the focus sits in. Uses the
+ * Gamepad API's standard mapping, which Chromium (desktop and Android web
+ * views) and Firefox give the common pads.
+ *
+ * While a controller is in use the root carries `data-input="gamepad"`, so
+ * focus can be drawn more boldly than for a mouse; touching the mouse, the
+ * screen or the keyboard takes it off again.
+ */
+
+export interface UseGamepadNavOptions {
+  enabled?: MaybeRefOrGetter<boolean>
+  /** B with no dialog open: go back, as a browser's back would. */
+  onBack?: () => void
+  /** Left and right bumpers: the previous and next section, tab or page. */
+  onPrevious?: () => void
+  onNext?: () => void
+  /** Start (the menu button): a menu or search, say. */
+  onMenu?: () => void
+}
+
+/** Standard-mapping button indices (W3C Gamepad, "standard" layout). */
+const BUTTON = { a: 0, b: 1, lb: 4, rb: 5, start: 9, up: 12, down: 13, left: 14, right: 15 } as const
+
+/** How far a stick goes before it counts as a direction. */
+const STICK_THRESHOLD = 0.55
+/** Held, a direction repeats after this long, then every REPEAT_MS. */
+const REPEAT_DELAY_MS = 380
+const REPEAT_MS = 110
+/** Pixels the right stick scrolls per frame at full tilt. */
+const SCROLL_SPEED = 18
+
+const OPEN_DIALOG = "[role=dialog][data-state=open], [role=alertdialog][data-state=open], [role=menu][data-state=open], [role=listbox][data-state=open]"
+
+export function useGamepadNav(options: UseGamepadNavOptions = {}) {
+  /** A controller is connected. */
+  const connected = ref(false)
+  let frame = 0
+  const held = new Map<string, number>()
+
+  function enabled() {
+    return options.enabled === undefined ? true : toValue(options.enabled)
+  }
+
+  /** Where focus moves: the open dialog or menu on top, else the page. */
+  function scope(): ParentNode {
+    const layers = document.querySelectorAll<HTMLElement>(OPEN_DIALOG)
+    return layers[layers.length - 1] ?? document.body
+  }
+
+  function markGamepad() {
+    document.documentElement.dataset.input = "gamepad"
+  }
+
+  function focus(element: HTMLElement) {
+    // Focus placed by code gets no :focus-visible; the kit's own marker for
+    // moved focus draws the ring, and goes with the focus.
+    element.setAttribute("data-lp-focus-ring", "")
+    element.addEventListener("blur", () => element.removeAttribute("data-lp-focus-ring"), { once: true })
+    element.focus({ preventScroll: true })
+    element.scrollIntoView({ block: "nearest", inline: "nearest" })
+  }
+
+  function move(direction: Direction) {
+    const candidates = focusableIn(scope())
+    if (!candidates.length) return
+    const current = document.activeElement as HTMLElement | null
+    if (!current || !candidates.includes(current)) {
+      focus(candidates[0]!)
+      return
+    }
+    const others = candidates.filter((element) => element !== current)
+    const next = nextInDirection(
+      current.getBoundingClientRect(),
+      others.map((element) => element.getBoundingClientRect()),
+      direction,
+    )
+    if (next >= 0) focus(others[next]!)
+  }
+
+  function press() {
+    const current = document.activeElement as HTMLElement | null
+    if (!current || current === document.body) return
+    if (current.matches("input:not([type=checkbox]):not([type=radio]), textarea, [contenteditable=true]")) {
+      current.focus()
+      return
+    }
+    current.click()
+  }
+
+  function back() {
+    if (document.querySelector(OPEN_DIALOG)) {
+      // The dialog libraries close on Escape; a synthetic one reaches them
+      // the way the key would.
+      const target = (document.activeElement as HTMLElement | null) ?? document.body
+      target.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", code: "Escape", bubbles: true }))
+      return
+    }
+    options.onBack?.()
+  }
+
+  /** Fires `act` on a press, and again on a repeat schedule while held. */
+  function edge(key: string, down: boolean, now: number, act: () => void, repeats: boolean) {
+    const since = held.get(key)
+    if (!down) {
+      held.delete(key)
+      return
+    }
+    if (since === undefined) {
+      held.set(key, now)
+      act()
+      return
+    }
+    if (repeats && now - since >= REPEAT_DELAY_MS) {
+      held.set(key, now - REPEAT_DELAY_MS + REPEAT_MS)
+      act()
+    }
+  }
+
+  function scrollBy(dx: number, dy: number) {
+    let element = document.activeElement as HTMLElement | null
+    while (element && element !== document.body) {
+      const style = getComputedStyle(element)
+      if (/(auto|scroll)/.test(style.overflowY + style.overflowX) && element.scrollHeight > element.clientHeight) break
+      element = element.parentElement
+    }
+    ;(element && element !== document.body ? element : document.scrollingElement)?.scrollBy(dx, dy)
+  }
+
+  function poll(now: number) {
+    frame = requestAnimationFrame(poll)
+    if (!enabled() || document.hidden) return
+    const pad = [...navigator.getGamepads()].find((entry) => entry?.connected && entry.mapping === "standard")
+    if (!pad) return
+    const pressed = (index: number) => pad.buttons[index]?.pressed ?? false
+    const [lx = 0, ly = 0, rx = 0, ry = 0] = pad.axes
+    const before = held.size
+    edge("up", pressed(BUTTON.up) || ly < -STICK_THRESHOLD, now, () => move("up"), true)
+    edge("down", pressed(BUTTON.down) || ly > STICK_THRESHOLD, now, () => move("down"), true)
+    edge("left", pressed(BUTTON.left) || lx < -STICK_THRESHOLD, now, () => move("left"), true)
+    edge("right", pressed(BUTTON.right) || lx > STICK_THRESHOLD, now, () => move("right"), true)
+    edge("a", pressed(BUTTON.a), now, press, false)
+    edge("b", pressed(BUTTON.b), now, back, false)
+    edge("lb", pressed(BUTTON.lb), now, () => options.onPrevious?.(), false)
+    edge("rb", pressed(BUTTON.rb), now, () => options.onNext?.(), false)
+    edge("start", pressed(BUTTON.start), now, () => options.onMenu?.(), false)
+    const scrollX = Math.abs(rx) > 0.2 ? rx * SCROLL_SPEED : 0
+    const scrollY = Math.abs(ry) > 0.2 ? ry * SCROLL_SPEED : 0
+    if (scrollX || scrollY) scrollBy(scrollX, scrollY)
+    if (held.size > before || scrollX || scrollY) markGamepad()
+  }
+
+  function onConnect() {
+    connected.value = [...navigator.getGamepads()].some((entry) => entry?.connected)
+    cancelAnimationFrame(frame)
+    if (connected.value) frame = requestAnimationFrame(poll)
+  }
+
+  function onOtherInput(event: Event) {
+    // Our own Escape for B is synthetic; only a real key or touch hands over.
+    if (!event.isTrusted) return
+    if (document.documentElement.dataset.input === "gamepad") delete document.documentElement.dataset.input
+  }
+
+  onMounted(() => {
+    if (typeof navigator === "undefined" || !("getGamepads" in navigator)) return
+    window.addEventListener("gamepadconnected", onConnect)
+    window.addEventListener("gamepaddisconnected", onConnect)
+    window.addEventListener("pointerdown", onOtherInput, { capture: true, passive: true })
+    window.addEventListener("keydown", onOtherInput, { capture: true, passive: true })
+    onConnect()
+  })
+
+  onBeforeUnmount(() => {
+    cancelAnimationFrame(frame)
+    window.removeEventListener("gamepadconnected", onConnect)
+    window.removeEventListener("gamepaddisconnected", onConnect)
+    window.removeEventListener("pointerdown", onOtherInput, { capture: true })
+    window.removeEventListener("keydown", onOtherInput, { capture: true })
+  })
+
+  return { connected }
+}

package/src/index.ts

@@ -294,6 +294,10 @@ export {
 export type { HotkeyConflict, HotkeyStep } from "./composables/useHotkeys"
 export { anyModalOpen, topModalElement, useModalLayer } from "./components/modalDepth"
 export type { ModalLayer, ModalLayerOptions } from "./components/modalDepth"
+export { useGamepadNav } from "./composables/useGamepadNav"
+export type { UseGamepadNavOptions } from "./composables/useGamepadNav"
+export { focusableIn, nextInDirection } from "./composables/spatialNav"
+export type { Box, Direction } from "./composables/spatialNav"
 export { provideGlass, useGlass } from "./composables/useGlass"
 export { LP_CONFIG, lpConfig, mergeConfig, provideLpConfig, useLabels, useLinkComponent, useLpConfig } from "./composables/useLpConfig"
 export type { LabelScope, LpConfig } from "./composables/useLpConfig"

package/src/tokens/utilities.css

@@ -37,6 +37,17 @@
   box-shadow: 0 0 0 2px var(--color-ring);
 }
 
+/*
+ * Driven by a controller (useGamepadNav), focus is the only cursor there is,
+ * often seen from a sofa: the ring is thicker and stands off the control.
+ */
+:root[data-input="gamepad"] [data-lp-focus-ring],
+:root[data-input="gamepad"] :focus-visible {
+  outline: 3px solid var(--color-ring);
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
 /*
  * Autofilled fields, in the kit's own palette.
  *