@celestia-island/hikari 0.55.104 → 0.55.106

package/package.json

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

package/src/components/HkBoard3D.scss

@@ -45,6 +45,13 @@
 }
 
 .hk-board3d-fallback {
+  // Self-carried contrast chip: in transparent-backdrop mode the root
+  // paints nothing, so the note cannot lean on the old surface fill.
+  background: rgb(var(--color-surface) / 0.9);
+  border-radius: var(--radius-md, 8px);
+  padding: 6px 12px;
+  margin: auto;
+  width: fit-content;
   position: absolute;
   inset: 0;
   display: flex;

package/src/components/HkBoard3D.test.tsx

@@ -1376,4 +1376,25 @@ describe("HkBoard3D transparent background", () => {
     expect(rendererOf().alpha).toBe(true);
     expect(rendererOf().clearAlpha).toBe(0);
   });
+
+  it("drops the container's own surface paint in transparent mode", async () => {
+    const { container } = mountBoard(
+      { minimap: false, transparentBackground: true },
+      {},
+    );
+    await nextTick();
+    const root = container.querySelector(".hk-board3d") as HTMLElement;
+    // The stylesheet paints --color-surface on .hk-board3d; an inline
+    // transparent style must win, or a page-colored rectangle sits
+    // behind the alpha-0 canvas (user report 2026-10-01: the scene
+    // background differs from the page background).
+    expect(root.style.background).toContain("transparent");
+  });
+
+  it("keeps the stylesheet surface paint when the backdrop is opaque", async () => {
+    const { container } = mountBoard({ minimap: false }, {});
+    await nextTick();
+    const root = container.querySelector(".hk-board3d") as HTMLElement;
+    expect(root.style.background).toBe("");
+  });
 });

package/src/components/HkBoard3D.tsx

@@ -1134,7 +1134,16 @@ export default defineComponent({
     });
 
     return () => (
-      <div class="hk-board3d" ref={containerRef}>
+      <div
+        class="hk-board3d"
+        // The transparent-backdrop mode clears the CANVAS to alpha 0, but
+        // the container's own surface paint would still sit behind it —
+        // a page-colored rectangle where the page's backdrop should show.
+        // An inline style wins over the stylesheet without a specificity
+        // war with consumer classes.
+        style={props.transparentBackground ? { background: "transparent" } : undefined}
+        ref={containerRef}
+      >
         <canvas ref={canvasRef} class="hk-board3d-canvas" />
         {failed.value ? (
           slots.fallback ? (

package/src/components/HkConnectionStatus.tsx

@@ -124,7 +124,12 @@ export const HkConnectionStatus = defineComponent({
               attemptNumber={probe.value.attemptNumber}
               countdown={probe.value.countdown}
               compact={props.compact}
-            />
+            >
+              {/* Host-appended popover actions (e.g. a manual page
+                  refresh) ride the same actions row as the built-in
+                  retry button. */}
+              {{ actions: () => slots.actions?.() }}
+            </HkStatusBar>
             {bs && (
               <span class="s-status-bar-tag" style={{ cursor: "default" }}>
                 <span

package/src/components/HkStatusBar.test.tsx

@@ -322,4 +322,145 @@ describe("HkStatusBar", () => {
       vi.useRealTimers();
     }
   });
+
+  it("shows a working reconnect button in the popover while disconnected (hint text retired)", async () => {
+    const onRetry = vi.fn();
+    const container = mountBar({
+      version: "1.2.3",
+      connectionStatus: "disconnected",
+      connectionInfo: INFO,
+      onRetry,
+    });
+    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 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");
+    expect(panel.textContent).not.toContain("Click to retry");
+    button.click();
+    expect(onRetry, "popover button click retries").toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps the fallback hint when no onRetry is wired", async () => {
+    const container = mountBar({
+      version: "1.2.3",
+      connectionStatus: "disconnected",
+      connectionInfo: INFO,
+    });
+    await nextTick();
+    container
+      .querySelector<HTMLElement>(".s-status-bar-tag")!
+      .dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
+    expect(panel.querySelector("[data-status-actions]")).toBeNull();
+    expect(panel.textContent).toContain("Click to retry");
+  });
+
+  it("renders host actions through the actions slot, connected or not", async () => {
+    for (const connectionStatus of ["connected", "disconnected"] as const) {
+      document.body.innerHTML = "";
+      const onRefresh = vi.fn();
+      const container = document.createElement("div");
+      document.body.appendChild(container);
+      const app = createApp({
+        render: () =>
+          h(HkStatusBar, {
+            version: "1.2.3",
+            connectionStatus,
+            connectionInfo: INFO,
+            onRetry: () => {},
+          }, {
+            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")!;
+      const host = panel.querySelector<HTMLButtonElement>(".host-refresh")!;
+      expect(host, `host action renders (${connectionStatus})`).toBeTruthy();
+      expect(panel.querySelector("[data-status-actions]")).toBeTruthy();
+      host.click();
+      expect(onRefresh).toHaveBeenCalledTimes(1);
+    }
+  });
+
+  it("no actions row when connected without host actions", async () => {
+    const container = mountBar({
+      version: "1.2.3",
+      connectionStatus: "connected",
+      connectionInfo: INFO,
+      onRetry: () => {},
+    });
+    await nextTick();
+    container
+      .querySelector<HTMLElement>(".s-status-bar-tag")!
+      .dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel");
+    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,
+    });
+    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);
+  });
+
+  it("no actions row when the slot renders nothing (wrapper forwards an empty slot)", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({
+      render: () =>
+        h(HkStatusBar, {
+          version: "1.2.3",
+          connectionStatus: "connected",
+          connectionInfo: INFO,
+        }, {
+          // HkConnectionStatus forwards `actions` unconditionally; an
+          // empty render must not paint a hairline-only row.
+          actions: () => [],
+        }),
+    });
+    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");
+    expect(panel!.querySelector("[data-status-actions]")).toBeNull();
+  });
 });

package/src/components/HkStatusBar.tsx

@@ -5,6 +5,7 @@ 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";
 
@@ -112,7 +113,7 @@ export const HkStatusBar = defineComponent({
       default: undefined,
     },
   },
-  setup(props) {
+  setup(props, { slots }) {
     const popupOpen = ref(false);
     const anchorRef = ref<HTMLElement | null>(null);
     let closeTimer: ReturnType<typeof setTimeout> | null = null;
@@ -197,6 +198,16 @@ export const HkStatusBar = defineComponent({
       }
     }
 
+    // Popover retry button: the echo guard applies here too — a late
+    // synthetic click following the touch activation that opened the
+    // popover must not double-fire the retry through the button.
+    function onRetryButtonClick() {
+      if (Date.now() < touchEchoGuardUntil) return;
+      if (props.connectionStatus !== "connected") {
+        props.onRetry?.();
+      }
+    }
+
     // ── Touch activation ────────────────────────────────────────────
     // Mobile tap-to-retry used to ride the SYNTHESIZED mouse chain
     // (touchend → mouseenter → click → mouseleave), which browsers may
@@ -268,6 +279,22 @@ 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
+      // 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.
+      const actionVnodes = slots.actions?.();
+      const hasHostActions = Array.isArray(actionVnodes)
+        ? actionVnodes.length > 0
+        : Boolean(actionVnodes);
+      const hasActionsRow = showRetryButton || hasHostActions;
 
       const pv = fmtVer(props.version, props.panelBuildHash);
       const ev = props.engineVersion;
@@ -370,7 +397,7 @@ export const HkStatusBar = defineComponent({
                       )}
                     </div>
                   )}
-                  {mode === "disconnected" && (
+                  {mode === "disconnected" && !showRetryButton && (
                     <div style={{ fontStyle: "italic", fontSize: "0.6875rem", marginBottom: "4px", opacity: 0.7 }}>
                       {t("hikari::statusBar.clickReconnect", "Click to retry")}
                     </div>
@@ -418,6 +445,26 @@ 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="sm" variant="secondary" onClick={onRetryButtonClick}>
+                      {t("hikari::statusBar.retryNow", "Reconnect now")}
+                    </HkButton>
+                  )}
+                  {hasHostActions ? actionVnodes : null}
+                </div>
+              )}
             </div>
           </HPopover>
         </>

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

@@ -150,6 +150,7 @@
     "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

@@ -150,6 +150,7 @@
     "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

@@ -150,6 +150,7 @@
     "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

@@ -150,6 +150,7 @@
     "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

@@ -150,6 +150,7 @@
     "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

@@ -150,6 +150,7 @@
     "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

@@ -150,6 +150,7 @@
     "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

@@ -150,6 +150,7 @@
     "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

@@ -150,6 +150,7 @@
     "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

@@ -150,6 +150,7 @@
     "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

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