@celestia-island/hikari 0.55.140 → 0.55.142

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.140",
+  "version": "0.55.142",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkConnectionStatus.tsx

@@ -126,8 +126,9 @@ export const HkConnectionStatus = defineComponent({
               compact={props.compact}
             >
               {/* Host-appended popover actions (e.g. a manual page
-                  refresh) ride the same actions row as the built-in
-                  retry button. */}
+                  refresh) ride the status row's right edge — the only
+                  recovery button in the popover since the built-in
+                  labelled retry retired (2026-10-11). */}
               {{ actions: () => slots.actions?.() }}
             </HkStatusBar>
             {bs && (

package/src/components/HkPillToggleGroup.scss

@@ -1,15 +1,69 @@
 /**
  * HkPillToggleGroup chrome — the segmented pill track. Ported from the
- * wowsp 水表查询 filter bar's option group, token for token: shared
+ * wowsp 水表查询 filter bar's option group (strip chrome and fade
+ * masks token-for-token; the pills keep their pointer cursor — the
+ * strip root carries the grab affordance): shared
  * chrome around per-option buttons, the active option carrying the
  * indicator tint directly (multi-select cannot use HkTabs — its sliding
- * indicator is radio semantics).
+ * indicator is radio semantics). The track is the ONE-LINE PANNABLE
+ * STRIP: overflow hides under edge fades (data-h-overflow masks, the
+ * HkScrollContainer contract) and pans by wheel / mouse drag / native
+ * touch (the machinery lives in useOptionStrip); phones relax back into
+ * a wrapping group (media query below — the sheet carries full width).
  */
 
 .hk-pill-group {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  max-width: 100%;
   gap: var(--space-4, 4px);
+  overflow-x: auto;
+  overflow-y: hidden;
+  touch-action: pan-x;
+  scrollbar-width: none;
+  overscroll-behavior-x: contain;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  --hk-scroll-fade-size: var(--space-24);
+
+  &[data-h-overflow="end"] {
+    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--hk-scroll-fade-size));
+    mask-image: linear-gradient(to left, transparent 0, #000 var(--hk-scroll-fade-size));
+  }
+
+  &[data-h-overflow="start"] {
+    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
+    mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
+  }
+
+  &[data-h-overflow="both"] {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      #000 var(--hk-scroll-fade-size),
+      #000 calc(100% - var(--hk-scroll-fade-size)),
+      transparent 100%
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent 0,
+      #000 var(--hk-scroll-fade-size),
+      #000 calc(100% - var(--hk-scroll-fade-size)),
+      transparent 100%
+    );
+  }
+
+  /* The whole strip drags; clicks still toggle — the 5px pan threshold
+   * keeps plain clicks click-shaped. */
+  cursor: grab;
+
+  &[data-panning] {
+    cursor: grabbing;
+    user-select: none;
+  }
   padding: 2px;
   border-radius: var(--radius-sm);
   border: 1px solid rgb(var(--color-border) / 25%);
@@ -60,3 +114,16 @@
    * pressure would collapse them before the label felt it. */
   flex: 0 0 auto;
 }
+
+/* Phones: the sheet carries the full width, nothing pans there — the
+ * strip relaxes back into the wrapping group (the wowsp filter bar's
+ * rule; the fade masks and the grab affordance name interactions the
+ * track no longer has). */
+@media (max-width: 767px) {
+  .hk-pill-group {
+    flex-wrap: wrap;
+    overflow: visible;
+    touch-action: auto;
+    cursor: default;
+  }
+}

package/src/components/HkPillToggleGroup.test.tsx

@@ -111,4 +111,67 @@ describe("HkPillToggleGroup", () => {
     expect(pills[2].querySelector(".hk-pill-group-icon")).toBeNull();
     expect(pills[2].textContent?.trim()).toBe("Jk");
   });
+
+  it("strip wiring: a drag pans and swallows its trailing click — a plain click still toggles", async () => {
+    const toggled: string[] = [];
+    const c = mount(
+      h(HkPillToggleGroup, {
+        label: "P",
+        options: OPTIONS,
+        selected: new Set<string>(),
+        onToggle: (v: string) => toggled.push(v),
+      }),
+    );
+    const group = c.querySelector(".hk-pill-group")!;
+    const pill = c.querySelectorAll<HTMLButtonElement>(".hk-pill-group-pill")[0];
+
+    // Press on a pill, stray past the 5px threshold, release: the strip
+    // flags the pan and the trailing click is swallowed exactly once.
+    pill.dispatchEvent(
+      new PointerEvent("pointerdown", { bubbles: true, pointerType: "mouse", button: 0, clientX: 100, clientY: 50 }),
+    );
+    window.dispatchEvent(
+      new PointerEvent("pointermove", { pointerType: "mouse", clientX: 120, clientY: 52 }),
+    );
+    await Promise.resolve();
+    expect(group.hasAttribute("data-panning")).toBe(true);
+    window.dispatchEvent(new PointerEvent("pointerup", { pointerType: "mouse" }));
+    await Promise.resolve();
+    expect(group.hasAttribute("data-panning")).toBe(false);
+    pill.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    expect(toggled, "the pan's trailing click must not toggle").toEqual([]);
+
+    // The NEXT plain click toggles normally — the swallow is one-shot.
+    pill.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    expect(toggled).toEqual([OPTIONS[0].value]);
+  });
+
+  it("strip wiring: a sub-threshold press never pans and its click toggles", async () => {
+    const toggled: string[] = [];
+    const c = mount(
+      h(HkPillToggleGroup, {
+        label: "P",
+        options: OPTIONS,
+        selected: new Set<string>(),
+        onToggle: (v: string) => toggled.push(v),
+      }),
+    );
+    const group = c.querySelector(".hk-pill-group")!;
+    const pill = c.querySelectorAll<HTMLButtonElement>(".hk-pill-group-pill")[1];
+
+    pill.dispatchEvent(
+      new PointerEvent("pointerdown", { bubbles: true, pointerType: "mouse", button: 0, clientX: 100, clientY: 50 }),
+    );
+    window.dispatchEvent(
+      new PointerEvent("pointermove", { pointerType: "mouse", clientX: 103, clientY: 51 }),
+    );
+    await Promise.resolve();
+    expect(group.hasAttribute("data-panning"), "3px stays a click").toBe(false);
+    window.dispatchEvent(new PointerEvent("pointerup", { pointerType: "mouse" }));
+    pill.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    expect(toggled).toEqual([OPTIONS[1].value]);
+  });
 });

package/src/components/HkPillToggleGroup.tsx

@@ -1,5 +1,6 @@
 import { defineComponent, h, type PropType, type VNode } from "vue";
 
+import { useOptionStrip } from "../composables/useOptionStrip";
 import "./HkPillToggleGroup.scss";
 
 /** One toggleable pill of the group. */
@@ -30,9 +31,13 @@ function resolveIcon(icon: unknown): VNode | null {
  * chrome around per-option toggle buttons, the active option carrying
  * the indicator tint directly (multi-select cannot use HkTabs — its
  * sliding indicator is radio semantics). Grammar ported from the wowsp
- * 水表查询 filter bar's option strip (2026-10-11), wrapping instead of
- * panning: hikari ships page-sized groups, and hosts with strip-scale
- * sets host their own panning track.
+ * 水表查询 filter bar's option strip (2026-10-11); the track is the
+ * ONE-LINE PANNABLE STRIP (same-day follow-up direction): overflow
+ * hides under edge fades and pans by wheel / mouse drag / native touch,
+ * exactly the 水表 popups' behavior — a wrapping track always measured
+ * ONE long line inside HkPopover's max-content panel and ran off-screen
+ * (wowsp #667). Phones relax back into a wrapping group (the sheet
+ * carries full width; nothing pans there) via the SCSS media query.
  *
  * Deliberately THIN (the host owns the set): `toggle(value)` reports one
  * pill toggled; the optional leading all-pill reports `all()` and the
@@ -60,8 +65,17 @@ export default defineComponent({
     all: () => true,
   },
   setup(props, { emit }) {
+    const { stripEl, panning, onPointerDown } = useOptionStrip();
+
     return () => (
-      <div class="hk-pill-group" role="group" aria-label={props.label}>
+      <div
+        ref={stripEl}
+        class="hk-pill-group"
+        role="group"
+        aria-label={props.label}
+        data-panning={panning.value || undefined}
+        onPointerdown={onPointerDown}
+      >
         {props.allLabel != null && (
           <button
             type="button"

package/src/components/HkStatusBar.test.tsx

@@ -422,7 +422,7 @@ describe("HkStatusBar", () => {
     }
   });
 
-  it("shows a working reconnect button in the popover while disconnected (hint text retired)", async () => {
+  it("retires the built-in reconnect button; the hint text carries the retry", async () => {
     const onRetry = vi.fn();
     const container = mountBar({
       version: "1.2.3",
@@ -436,20 +436,62 @@ describe("HkStatusBar", () => {
       .dispatchEvent(new MouseEvent("mouseenter"));
     await nextTick();
     const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
-    // The popover body teleports to <body>: the old italic "click to
-    // retry" hint pointed at an element whose clicks never reached the
-    // tag handler. The actions row carries a REAL button instead, and
-    // the misleading hint is gone whenever a retry is wired.
-    const row = panel.querySelector<HTMLElement>("[data-status-actions]")!;
-    expect(row, "actions row renders").toBeTruthy();
-    const button = row.querySelector<HTMLButtonElement>("button")!;
-    expect(button.textContent).toContain("Reconnect now");
-    // 2026-10-02 user direction: small buttons with a leading glyph.
-    expect(button.className).toContain("hk-btn-xs");
-    expect(button.querySelector(".hk-btn-icon svg"), "leading glyph renders").toBeTruthy();
-    expect(panel.textContent).not.toContain("Click to retry");
-    button.click();
-    expect(onRetry, "popover button click retries").toHaveBeenCalledTimes(1);
+    // 2026-10-11 user direction: the popover must not stack a built-in
+    // "Reconnect now" beside the host's own refresh — the light itself
+    // retries on click/tap, so the popover keeps ONE recovery action
+    // (the host's, via the slot).
+    expect(panel.querySelector("[data-status-actions]")).toBeNull();
+    expect(panel.textContent).not.toContain("Reconnect now");
+    // The fallback hint is back for hosts without a slot action — but it
+    // is a REAL control now: the original hint was retired because its
+    // clicks went nowhere, so the text carries the retry itself.
+    const hint = panel.querySelector<HTMLElement>("[role='button']")!;
+    expect(hint.textContent).toContain("Click to retry");
+    hint.click();
+    expect(onRetry, "hint click retries").toHaveBeenCalledTimes(1);
+    // Keyboard parity: the hint is a role=button control, so Enter (and
+    // Space) carry the same retry.
+    hint.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    expect(onRetry, "Enter on the hint retries").toHaveBeenCalledTimes(2);
+    hint.dispatchEvent(new KeyboardEvent("keydown", { key: " ", bubbles: true }));
+    expect(onRetry, "Space on the hint retries").toHaveBeenCalledTimes(2 + 1);
+    hint.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    expect(onRetry, "other keys are inert").toHaveBeenCalledTimes(3);
+  });
+
+  it("hosts the actions cluster on the status row's right side, not a bottom hairline row", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(HkStatusBar, {
+          version: "1.2.3",
+          connectionStatus: "disconnected",
+          connectionInfo: INFO,
+          onRetry: () => {},
+        }, {
+          actions: () => h("button", { class: "host-refresh" }, "Refresh page"),
+        }),
+    });
+    app.mount(container);
+    mounts.push({ app, container });
+    await nextTick();
+    container
+      .querySelector<HTMLElement>(".s-status-bar-tag")!
+      .dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
+    const clusters = panel.querySelectorAll("[data-status-actions]");
+    expect(clusters.length, "exactly one actions cluster").toBe(1);
+    // The cluster lives INSIDE the row that carries the status text —
+    // status left, actions right, no extra vertical row.
+    const statusRow = clusters[0]!.closest("div")!;
+    expect(statusRow.textContent).toContain("Disconnected");
+    // The old bottom row announced itself with a hairline top border;
+    // nothing in the panel may carry it anymore.
+    const bordered = [...panel.querySelectorAll<HTMLElement>("*[style*='border']")]
+      .filter((el) => el.style.borderTop.includes("solid"));
+    expect(bordered, "no hairline actions row remains").toEqual([]);
   });
 
   it("keeps the fallback hint when no onRetry is wired", async () => {
@@ -517,27 +559,38 @@ describe("HkStatusBar", () => {
     expect(panel!.querySelector("[data-status-actions]")).toBeNull();
   });
 
-  it("keeps the actions row available while connection info is still fetching", async () => {
-    const onRetry = vi.fn();
-    const container = mountBar({
-      version: "1.2.3",
-      connectionStatus: "disconnected",
-      connectionInfo: null,
-      onRetry,
+  it("keeps host actions available while connection info is still fetching", async () => {
+    const onRefresh = vi.fn();
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(HkStatusBar, {
+          version: "1.2.3",
+          connectionStatus: "disconnected",
+          connectionInfo: null,
+        }, {
+          actions: () => h("button", { class: "host-refresh", onClick: onRefresh }, "Refresh page"),
+        }),
     });
+    app.mount(container);
+    mounts.push({ app, container });
     await nextTick();
     container
       .querySelector<HTMLElement>(".s-status-bar-tag")!
       .dispatchEvent(new MouseEvent("mouseenter"));
     await nextTick();
     const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
-    // The row must live OUTSIDE the info/fetching ternary: an outage that
-    // drops connectionInfo to null is exactly when the retry button is
-    // most needed.
-    const button = panel.querySelector<HTMLButtonElement>("[data-status-actions] button");
-    expect(button, "retry button renders without info").toBeTruthy();
-    button!.click();
-    expect(onRetry).toHaveBeenCalledTimes(1);
+    // The cluster must live OUTSIDE the info/fetching ternary: an outage
+    // that drops connectionInfo to null is exactly when the recovery
+    // action is most needed. It rides the fetching line's right edge.
+    const cluster = panel.querySelector<HTMLElement>("[data-status-actions]");
+    expect(cluster, "actions cluster renders without info").toBeTruthy();
+    // Same line as the fetching text: label left, actions right.
+    expect(cluster!.closest("div")!.textContent).toContain("Fetching connection info");
+    const button = cluster!.querySelector<HTMLButtonElement>("button")!;
+    button.click();
+    expect(onRefresh).toHaveBeenCalledTimes(1);
   });
 
   it("no actions row when the slot renders nothing (wrapper forwards an empty slot)", async () => {

package/src/components/HkStatusBar.tsx

@@ -5,7 +5,6 @@ import { useI18n } from "../i18n/context";
 import { HIKARI_FONT_MONO } from "../theme/fontContext";
 
 import HPopover from "./HkPopover";
-import HkButton from "./HkButton";
 import type { HkConnectionInfo } from "./HkConnectionInfo";
 import { HkCountdownDigit } from "./HkCountdownDigit";
 import { HkPlaceholderMarquee } from "./HkPlaceholderMarquee";
@@ -382,22 +381,24 @@ export const HkStatusBar = defineComponent({
         : t("hikari::statusBar.disconnected", "Disconnected");
 
       const connecting = mode === "reconnecting" || mode === "connecting";
-      // Actions row: the popover body teleports to <body>, so a click on
-      // the "click to reconnect" hint text inside it never reached the
-      // tag's own click handler — the popover now carries REAL buttons.
-      // The built-in one retriggers the reconnect for any non-green
-      // light; hosts append their own (e.g. a full manual refresh)
-      // through the `actions` slot.
-      const showRetryButton = mode !== "connected" && typeof props.onRetry === "function";
-      // Gate the row on RENDERED content, not on the slot function's
+      // Recovery actions (2026-10-11 user direction): the old bottom
+      // hairline row stacked a built-in "Reconnect now" button beside the
+      // host's own refresh icon — on an outage the popover read as TWO
+      // buttons doing one job. The built-in labelled button is RETIRED:
+      // the traffic light itself already retries on click/tap, and hosts
+      // append their single recovery action (e.g. a manual page refresh)
+      // through the `actions` slot. The cluster now rides the FIRST
+      // popover row's right side — status text left, actions right — so
+      // no extra row of vertical space is spent on it.
+      // Gate the cluster on RENDERED content, not on the slot function's
       // existence: HkConnectionStatus forwards `actions` unconditionally,
-      // so a function-existence gate would paint an empty hairline row in
-      // the connected state for every host that passed no #actions.
+      // so a function-existence gate would paint an empty cluster in the
+      // connected state for every host that passed no #actions.
       const actionVnodes = slots.actions?.();
       const hasHostActions = Array.isArray(actionVnodes)
         ? actionVnodes.length > 0
         : Boolean(actionVnodes);
-      const hasActionsRow = showRetryButton || hasHostActions;
+      const hasActionsRow = hasHostActions;
 
       const pv = hkMergeVersionDisplay(props.version, props.panelBuildHash);
       const ev = props.engineVersion;
@@ -494,6 +495,21 @@ export const HkStatusBar = defineComponent({
                         {latency} ms
                       </span>
                     )}
+                    {hasActionsRow && (
+                      <span
+                        data-status-actions
+                        style={{
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: "8px",
+                          // No latency chip to push against: the cluster
+                          // still lands on the row's right edge.
+                          marginLeft: latency !== null ? undefined : "auto",
+                        }}
+                      >
+                        {actionVnodes}
+                      </span>
+                    )}
                   </div>
                   {connecting && attempt > 0 && (
                     <div style={{ display: "flex", alignItems: "center", gap: "4px", color: "rgb(var(--color-warning))", fontSize: "0.6875rem", marginBottom: "4px" }}>
@@ -509,8 +525,21 @@ export const HkStatusBar = defineComponent({
                       )}
                     </div>
                   )}
-                  {mode === "disconnected" && !showRetryButton && (
-                    <div style={{ fontStyle: "italic", fontSize: "0.6875rem", marginBottom: "4px", opacity: 0.7 }}>
+                  {mode === "disconnected" && !hasActionsRow && (
+                    // Fallback for hosts without a slot action — and a REAL
+                    // control this time: the original hint was retired
+                    // because its clicks went nowhere (the popover body
+                    // teleports to <body>), so the text now carries the
+                    // retry itself, echo guard included.
+                    <div
+                      role="button"
+                      tabindex={0}
+                      onClick={onRetryButtonClick}
+                      onKeydown={(e: KeyboardEvent) => {
+                        if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onRetryButtonClick(); }
+                      }}
+                      style={{ fontStyle: "italic", fontSize: "0.6875rem", marginBottom: "4px", opacity: 0.7, cursor: "pointer" }}
+                    >
                       {t("hikari::statusBar.clickReconnect", "Click to retry")}
                     </div>
                   )}
@@ -565,31 +594,16 @@ export const HkStatusBar = defineComponent({
                   ))}
                 </>
               ) : (
-                <div style={{ opacity: 0.5 }}>{t("hikari::statusBar.fetching", "Fetching connection info...")}</div>
-              )}
-              {hasActionsRow && (
-                <div
-                  data-status-actions
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px",
-                    marginTop: "8px",
-                    paddingTop: "8px",
-                    borderTop: "1px solid var(--border-faint, rgb(var(--color-border) / 10%))",
-                  }}
-                >
-                  {showRetryButton && (
-                    <HkButton
-                      size="xs"
-                      variant="secondary"
-                      icon="RotateCw"
-                      onClick={onRetryButtonClick}
-                    >
-                      {t("hikari::statusBar.retryNow", "Reconnect now")}
-                    </HkButton>
+                <div style={{ display: "flex", alignItems: "center", gap: "6px", marginBottom: "6px" }}>
+                  <span style={{ opacity: 0.5 }}>{t("hikari::statusBar.fetching", "Fetching connection info...")}</span>
+                  {hasActionsRow && (
+                    // An outage that drops connectionInfo to null is exactly
+                    // when the recovery action is most needed — the cluster
+                    // rides the fetching line's right edge.
+                    <span data-status-actions style={{ display: "inline-flex", alignItems: "center", gap: "8px", marginLeft: "auto" }}>
+                      {actionVnodes}
+                    </span>
                   )}
-                  {hasHostActions ? actionVnodes : null}
                 </div>
               )}
             </div>

package/src/composables/useOptionStrip.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  WHEEL_LINE_PX,
+  overflowSides,
+  panEngaged,
+  stripWheelDelta,
+} from "./useOptionStrip";
+
+describe("stripWheelDelta", () => {
+  it("lets a real horizontal wheel delta win over the vertical one", () => {
+    expect(stripWheelDelta(0, -120, 40)).toBe(-120);
+  });
+  it("translates a plain vertical notch onto the horizontal axis", () => {
+    expect(stripWheelDelta(0, 0, 80)).toBe(80);
+    expect(stripWheelDelta(0, 0, -80)).toBe(-80);
+  });
+  it("normalizes Firefox line mode to pixels per notch", () => {
+    expect(stripWheelDelta(1, 0, 3)).toBe(3 * WHEEL_LINE_PX);
+    expect(stripWheelDelta(1, -2, 0)).toBe(-2 * WHEEL_LINE_PX);
+  });
+});
+
+describe("panEngaged", () => {
+  it("engages at the threshold on EITHER axis", () => {
+    expect(panEngaged(5, 0, 5)).toBe(true);
+    expect(panEngaged(0, -5, 5)).toBe(true);
+    expect(panEngaged(4, 4, 5)).toBe(false);
+  });
+});
+
+describe("overflowSides", () => {
+  function fake(scrollWidth: number, clientWidth: number, scrollLeft: number): HTMLElement {
+    return { scrollWidth, clientWidth, scrollLeft } as unknown as HTMLElement;
+  }
+  it("reports none when the strip fits", () => {
+    expect(overflowSides(fake(100, 120, 0))).toBe("none");
+  });
+  it("reports the edges that still hide content (sub-pixel resting counts)", () => {
+    expect(overflowSides(fake(200, 100, 0))).toBe("end");
+    expect(overflowSides(fake(200, 100, 100))).toBe("start");
+    expect(overflowSides(fake(200, 100, 40))).toBe("both");
+    expect(overflowSides(fake(200, 100, 0.5))).toBe("end");
+  });
+});

package/src/composables/useOptionStrip.ts

@@ -0,0 +1,209 @@
+/**
+ * useOptionStrip — the one-line pannable option track behind
+ * HkPillToggleGroup's strip mode. Upstreamed from wowsp's optionStrip
+ * (the 水表 filter bar's nation popup and every FilterCategoryChip
+ * popup, 2026-10-11 direction: the pill groups must pan with edge
+ * fades, not wrap). One module owns:
+ *
+ *   - the wheel→horizontal pan rule (a real horizontal delta wins; a
+ *     vertical notch is translated onto the strip; Firefox line mode is
+ *     normalized — mirrors HkScrollContainer's wheel rule);
+ *   - the mouse drag-pan (pointer capture + the 5px click/pan threshold;
+ *     the click a pan leaves behind is swallowed exactly once, so panning
+ *     never toggles an option);
+ *   - the overflow-side sensing behind the edge fades: the strip mirrors
+ *     HkScrollContainer's `data-h-overflow` contract (which inline edges
+ *     still hide content), and the host SCSS turns the value into the
+ *     matching mask-image gradients.
+ *
+ * The track element itself stays owned by the host component (its
+ * classes and sheet-mode overrides live there); the composable only
+ * wires listeners while the element is mounted.
+ */
+import { onBeforeUnmount, ref, watch, type Ref } from "vue";
+
+/** Firefox line-height wheel mode (deltaMode 1): one notch reports ~3
+ *  lines, not pixels — normalized here so a notch pans a wheel-like
+ *  distance on every engine (40px/line, the classic WebKit line height).
+ *  Page mode (deltaMode 2, effectively extinct) passes through raw. */
+export const WHEEL_LINE_PX = 40;
+
+/** Horizontal pan distance for a wheel gesture over the strip: a real
+ *  horizontal wheel/trackpad swipe (deltaX — shift+wheel reports as
+ *  deltaX natively too) wins; a plain vertical wheel notch is translated
+ *  onto the horizontal axis instead. */
+export function stripWheelDelta(deltaMode: number, deltaX: number, deltaY: number): number {
+  const raw = deltaX !== 0 ? deltaX : deltaY;
+  return deltaMode === 1 ? raw * WHEEL_LINE_PX : raw;
+}
+
+/** Press→pan decision for the strip drag: once the pointer strays
+ *  ≥ threshold px on EITHER axis the press turns into a pan; below it the
+ *  gesture stays a click (and clicks must keep toggling options). */
+export function panEngaged(dx: number, dy: number, threshold: number): boolean {
+  return Math.abs(dx) >= threshold || Math.abs(dy) >= threshold;
+}
+
+/** Which inline edges of a strip still hide content — the value mirrored
+ *  onto the element as `data-h-overflow` (HkScrollContainer's contract;
+ *  the SCSS maps each value to its edge-fade mask). Sub-pixel scroll
+ *  offsets count as resting at the edge. RTL flips the visual sides; the
+ *  family ships LTR only. */
+export type OverflowSides = "none" | "start" | "end" | "both";
+
+export function overflowSides(el: HTMLElement): OverflowSides {
+  const max = el.scrollWidth - el.clientWidth;
+  if (max <= 0) return "none";
+  const EDGE_PX = 1;
+  const atStart = el.scrollLeft <= EDGE_PX;
+  const atEnd = max - el.scrollLeft <= EDGE_PX;
+  if (atStart && atEnd) return "none";
+  return atStart ? "end" : atEnd ? "start" : "both";
+}
+
+/** Wire one strip element with the pan + fade machinery. The host binds
+ *  `stripEl` (template ref), mirrors `panning` into `data-panning`, and
+ *  attaches `onPointerDown`; the non-passive wheel listener, the
+ *  capture-phase click swallow and the overflow sensing ride the ref
+ *  transitions here (a JSX onWheel prop is passive in some paths and
+ *  could not preventDefault, and JSX has no capture-phase click prop). */
+export function useOptionStrip() {
+  const stripEl: Ref<HTMLElement | null> = ref(null);
+  const panning = ref(false);
+  const PAN_THRESHOLD = 5;
+  let pressX = 0;
+  let pressY = 0;
+  let lastX = 0;
+  let armed = false;
+  /** Set when a gesture turned into a pan: the trailing click (and only
+   *  that one) must not toggle an option. */
+  let dragged = false;
+  let resizeObserver: ResizeObserver | null = null;
+  let mutationObserver: MutationObserver | null = null;
+
+  /** Re-read the overflow sides and mirror them onto the element. Fires
+   *  on scroll, on element resizes and on content mutations (options
+   *  re-rendering can change the track's scroll width). */
+  function sense() {
+    const el = stripEl.value;
+    if (!el) return;
+    const sides = overflowSides(el);
+    if (sides === "none") delete el.dataset.hOverflow;
+    else el.dataset.hOverflow = sides;
+  }
+
+  function onWheel(e: WheelEvent) {
+    const el = stripEl.value;
+    if (!el || el.scrollWidth <= el.clientWidth) return;
+    const delta = stripWheelDelta(e.deltaMode, e.deltaX, e.deltaY);
+    if (delta === 0) return;
+    const prev = el.scrollLeft;
+    el.scrollLeft += delta;
+    // A saturated edge lets the wheel keep scrolling the page behind.
+    if (el.scrollLeft !== prev) e.preventDefault();
+  }
+
+  function onPointerDown(e: PointerEvent) {
+    if (e.pointerType !== "mouse" || e.button !== 0) return;
+    // A pan released off-strip leaves no click behind; clear the stale
+    // swallow flag so this press's own click always lands.
+    dragged = false;
+    pressX = lastX = e.clientX;
+    pressY = e.clientY;
+    armed = false;
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp, { once: true });
+    window.addEventListener("pointercancel", onPointerCancel, { once: true });
+  }
+
+  function onPointerMove(e: PointerEvent) {
+    if (!armed) {
+      if (!panEngaged(e.clientX - pressX, e.clientY - pressY, PAN_THRESHOLD)) return;
+      // Engage: capture the pointer so the pan keeps tracking off-panel,
+      // flag the strip (grabbing cursor + selection off) and arm the
+      // one-shot click swallow — with capture held, the trailing click
+      // retargets to the strip anyway, never onto an option.
+      armed = true;
+      panning.value = true;
+      dragged = true;
+      stripEl.value?.setPointerCapture(e.pointerId);
+    }
+    e.preventDefault();
+    const el = stripEl.value;
+    if (!el) return;
+    el.scrollLeft -= e.clientX - lastX;
+    lastX = e.clientX;
+  }
+
+  function teardownPress() {
+    armed = false;
+    panning.value = false;
+    window.removeEventListener("pointermove", onPointerMove);
+  }
+
+  function onPointerUp() {
+    teardownPress();
+  }
+
+  function onPointerCancel() {
+    // A cancelled gesture never leaves a click — no swallow to hold.
+    dragged = false;
+    teardownPress();
+  }
+
+  /** The click a completed pan leaves behind must never toggle an
+   *  option: swallowed exactly once, capture phase (ahead of every
+   *  option handler). Plain clicks pass untouched. */
+  function onClickCapture(e: MouseEvent) {
+    if (!dragged) return;
+    dragged = false;
+    e.stopPropagation();
+  }
+
+  /** A host popup that closed before the pan's trailing click (window
+   *  blur mid-drag — pointerup lost) must not carry the swallow flag
+   *  into the reopened panel. */
+  function resetDragged() {
+    dragged = false;
+  }
+
+  watch(stripEl, (el, prev) => {
+    prev?.removeEventListener("wheel", onWheel);
+    prev?.removeEventListener("click", onClickCapture, true);
+    prev?.removeEventListener("scroll", sense);
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+    mutationObserver?.disconnect();
+    mutationObserver = null;
+    if (el) {
+      el.addEventListener("wheel", onWheel, { passive: false });
+      el.addEventListener("click", onClickCapture, true);
+      el.addEventListener("scroll", sense, { passive: true });
+      if (typeof ResizeObserver !== "undefined") {
+        resizeObserver = new ResizeObserver(sense);
+        resizeObserver.observe(el);
+      }
+      if (typeof MutationObserver !== "undefined") {
+        mutationObserver = new MutationObserver(sense);
+        mutationObserver.observe(el, { childList: true, subtree: true });
+      }
+      sense();
+    }
+  });
+  onBeforeUnmount(() => {
+    teardownPress();
+    // Full listener teardown: a component unmounting mid-pan must not
+    // leave listeners behind on the strip element or the window's
+    // once-listeners unheld.
+    const el = stripEl.value;
+    el?.removeEventListener("wheel", onWheel);
+    el?.removeEventListener("click", onClickCapture, true);
+    el?.removeEventListener("scroll", sense);
+    window.removeEventListener("pointerup", onPointerUp);
+    window.removeEventListener("pointercancel", onPointerCancel);
+    resizeObserver?.disconnect();
+    mutationObserver?.disconnect();
+  });
+
+  return { stripEl, panning, onPointerDown, resetDragged };
+}

package/src/i18n/locales/ar/components.json

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "غير معروف",
     "hikari::statusBar.backend.warn": "متدهور",
     "hikari::statusBar.clickReconnect": "انقر لإعادة المحاولة",
-    "hikari::statusBar.retryNow": "أعد الاتصال الآن",
     "hikari::statusBar.connected": "متصل",
     "hikari::statusBar.connecting": "جارٍ الاتصال...",
     "hikari::statusBar.disconnected": "غير متصل",

package/src/i18n/locales/de/components.json

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "Unbekannt",
     "hikari::statusBar.backend.warn": "Beeinträchtigt",
     "hikari::statusBar.clickReconnect": "Zum Wiederholen klicken",
-    "hikari::statusBar.retryNow": "Jetzt neu verbinden",
     "hikari::statusBar.connected": "Verbunden",
     "hikari::statusBar.connecting": "Verbinde...",
     "hikari::statusBar.disconnected": "Getrennt",

package/src/i18n/locales/en/components.json

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "Unknown",
     "hikari::statusBar.backend.warn": "Degraded",
     "hikari::statusBar.clickReconnect": "Click to retry",
-    "hikari::statusBar.retryNow": "Reconnect now",
     "hikari::statusBar.connected": "Connected",
     "hikari::statusBar.connecting": "Connecting...",
     "hikari::statusBar.disconnected": "Disconnected",

package/src/i18n/locales/es/components.json

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "Desconocido",
     "hikari::statusBar.backend.warn": "Degradado",
     "hikari::statusBar.clickReconnect": "Haga clic para reintentar",
-    "hikari::statusBar.retryNow": "Reconectar ahora",
     "hikari::statusBar.connected": "Conectado",
     "hikari::statusBar.connecting": "Conectando...",
     "hikari::statusBar.disconnected": "Desconectado",

package/src/i18n/locales/fr/components.json

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "Inconnu",
     "hikari::statusBar.backend.warn": "Dégradé",
     "hikari::statusBar.clickReconnect": "Cliquez pour réessayer",
-    "hikari::statusBar.retryNow": "Reconnecter maintenant",
     "hikari::statusBar.connected": "Connecté",
     "hikari::statusBar.connecting": "Connexion...",
     "hikari::statusBar.disconnected": "Déconnecté",

package/src/i18n/locales/ja/components.json

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "不明",
     "hikari::statusBar.backend.warn": "低下",
     "hikari::statusBar.clickReconnect": "クリックして再接続",
-    "hikari::statusBar.retryNow": "今すぐ再接続",
     "hikari::statusBar.connected": "接続済み",
     "hikari::statusBar.connecting": "接続中...",
     "hikari::statusBar.disconnected": "切断",

package/src/i18n/locales/ko/components.json

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "알 수 없음",
     "hikari::statusBar.backend.warn": "저하",
     "hikari::statusBar.clickReconnect": "클릭하여 재연결",
-    "hikari::statusBar.retryNow": "지금 재연결",
     "hikari::statusBar.connected": "연결됨",
     "hikari::statusBar.connecting": "연결 중...",
     "hikari::statusBar.disconnected": "연결 끊김",

package/src/i18n/locales/pt/components.json

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "Desconhecido",
     "hikari::statusBar.backend.warn": "Degradado",
     "hikari::statusBar.clickReconnect": "Clique para tentar novamente",
-    "hikari::statusBar.retryNow": "Reconectar agora",
     "hikari::statusBar.connected": "Conectado",
     "hikari::statusBar.connecting": "Conectando...",
     "hikari::statusBar.disconnected": "Desconectado",

package/src/i18n/locales/ru/components.json

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "Неизвестно",
     "hikari::statusBar.backend.warn": "Деградация",
     "hikari::statusBar.clickReconnect": "Нажмите, чтобы повторить",
-    "hikari::statusBar.retryNow": "Переподключиться сейчас",
     "hikari::statusBar.connected": "Подключено",
     "hikari::statusBar.connecting": "Подключение...",
     "hikari::statusBar.disconnected": "Отключено",

package/src/i18n/locales/zh-Hans/components.json

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "未知",
     "hikari::statusBar.backend.warn": "降级",
     "hikari::statusBar.clickReconnect": "点击以尝试重连",
-    "hikari::statusBar.retryNow": "立即重连",
     "hikari::statusBar.connected": "已连接",
     "hikari::statusBar.connecting": "连接中...",
     "hikari::statusBar.disconnected": "断开",

package/src/i18n/locales/zh-Hant/components.json

@@ -151,7 +151,6 @@
     "hikari::statusBar.backend.unknown": "未知",
     "hikari::statusBar.backend.warn": "降級",
     "hikari::statusBar.clickReconnect": "點擊以嘗試重連",
-    "hikari::statusBar.retryNow": "立即重連",
     "hikari::statusBar.connected": "已連線",
     "hikari::statusBar.connecting": "連線中...",
     "hikari::statusBar.disconnected": "斷開",