@celestia-island/hikari 0.55.294 → 0.55.297

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.294",
+  "version": "0.55.297",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkAdminTablePage.tsx

@@ -1,16 +1,7 @@
-import {
-  defineComponent,
-  inject,
-  onMounted,
-  onUnmounted,
-  ref,
-  type Component,
-  type PropType,
-} from "vue";
+import { defineComponent, type Component, type PropType } from "vue";
 import { HAlert, HCard, HEmptyState, HSpinner, HTable, useI18n } from "@celestia-island/hikari";
 import HkCrossfade from "./HkCrossfade";
 import { HkPageHeader } from "./HkPageHeader";
-import { HK_SCROLL_PROGRESS_REGISTRAR, type HkScrollProgressHandle } from "./HkScrollProgress";
 import type { HkRowManageGate } from "./HkTable";
 
 
@@ -76,9 +67,9 @@ export const HkAdminTablePage = defineComponent({
     },
     /** Authoritative row total the scroll-progress pill uses as its
      *  denominator (the server count behind a paged list — chest's
-     *  usePagedTableFetch total). Omitted: the pill falls back to
-     *  counting the delivered DOM rows. Registration into the
-     *  enclosing shell viewport is automatic (see setup). */
+     *  usePagedTableFetch total). Forwarded to HTable, which
+     *  self-registers with the enclosing shell viewport's registrar.
+     *  Omitted: the pill falls back to counting the delivered DOM rows. */
     total: { type: Number, default: undefined },
   },
   emits: {
@@ -86,28 +77,6 @@ export const HkAdminTablePage = defineComponent({
     manage: (_row: Record<string, unknown>, _opener: HTMLElement) => true,
   },
   setup(props, { emit, slots }) {
-    // Scroll-progress registration: the nearest enclosing HkScrollContainer
-    // with `scrollProgress` on provides the registrar (provide/inject
-    // scoping resolves the shell viewport for admin pages and keeps an
-    // inner container's lists out of the shell). The handle exposes the
-    // table card as the row root plus the `total` prop live — the pill's
-    // denominator follows it as pages load.
-    const registrar = inject(HK_SCROLL_PROGRESS_REGISTRAR, null);
-    const tableCardRef = ref<HTMLElement | null>(null);
-    let handle: HkScrollProgressHandle | null = null;
-    onMounted(() => {
-      if (!registrar) return;
-      handle = {
-        getRoot: () => tableCardRef.value,
-        getTotal: () => props.total,
-      };
-      registrar.register(handle);
-    });
-    onUnmounted(() => {
-      if (registrar && handle) registrar.unregister(handle);
-      handle = null;
-    });
-
     return () => {
       const { t } = useI18n();
       const emptyTitle = props.emptyTitle || t("hikari::tablePage.emptyTitle", "No data");
@@ -165,23 +134,22 @@ export const HkAdminTablePage = defineComponent({
             ) : slots.body ? (
               <div class="hk-admin-table-page-body">{slots.body()}</div>
             ) : (
-              <div ref={tableCardRef} class="hk-admin-table-page-tablecard">
-                <HCard padded={false}>
-                  <HTable
-                    columns={props.columns}
-                    rows={props.rows}
-                    rowKey={props.rowKey}
-                    draggable={props.draggable}
-                    manageable={props.manageable}
-                    onReorder={(from: number, to: number) => emit("reorder", from, to)}
-                    onManage={(row: Record<string, unknown>, opener: HTMLElement) =>
-                      emit("manage", row, opener)
-                    }
-                  >
-                    {slots}
-                  </HTable>
-                </HCard>
-              </div>
+              <HCard padded={false}>
+                <HTable
+                  columns={props.columns}
+                  rows={props.rows}
+                  rowKey={props.rowKey}
+                  total={props.total}
+                  draggable={props.draggable}
+                  manageable={props.manageable}
+                  onReorder={(from: number, to: number) => emit("reorder", from, to)}
+                  onManage={(row: Record<string, unknown>, opener: HTMLElement) =>
+                    emit("manage", row, opener)
+                  }
+                >
+                  {slots}
+                </HTable>
+              </HCard>
             )}
           </HkCrossfade>
           {slots["create-modal"]?.()}

package/src/components/HkModal.test.tsx

@@ -546,3 +546,118 @@ describe("HkModal chrome / content split", () => {
     });
   });
 });
+
+describe("HkModal Escape precedence", () => {
+  it("lets a nested control own Escape while a bare Escape still closes", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+
+    const open = ref(true);
+    const emitted: boolean[] = [];
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkModal, {
+            modelValue: open.value,
+            closable: true,
+            title: "Escape precedence",
+            "onUpdate:modelValue": (v: boolean) => { emitted.push(v); open.value = v; },
+          }, {
+            default: () => h("div", {
+              class: "escape-owner",
+              onKeydown: (e: KeyboardEvent) => {
+                if (e.key === "Escape") e.preventDefault();
+              },
+            }, "nested control"),
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+
+    await vi.waitFor(() => {
+      expect(document.body.querySelector(".escape-owner")).not.toBeNull();
+    });
+    const owner = document.body.querySelector<HTMLElement>(".escape-owner")!;
+
+    // The nested control consumes Escape: the window must stay open.
+    owner.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+    );
+    await nextTick();
+    expect(emitted, "a consumed Escape must not close the window").toEqual([]);
+    expect(open.value).toBe(true);
+
+    // A bare Escape (nothing below consumed it) still closes.
+    const content = document.body.querySelector<HTMLElement>(".hk-modal-content")!;
+    content.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+    );
+    await nextTick();
+    expect(emitted).toEqual([false]);
+  });
+
+  it("keeps a consumed Escape from reaching page-level Escape listeners", async () => {
+    // One press must mean one action: before the precedence rule a closable
+    // window swallowed every Escape at its root, so a handled press travelling
+    // on would hand the same key to a page-level listener (a revealed strip, a
+    // pointer-reorder cancel) while the nested control also acted on it.
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const open = ref(true);
+    const emitted: boolean[] = [];
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkModal, {
+            modelValue: open.value,
+            closable: true,
+            title: "Escape propagation",
+            "onUpdate:modelValue": (v: boolean) => { emitted.push(v); open.value = v; },
+          }, {
+            default: () => h("div", {
+              class: "escape-owner",
+              onKeydown: (e: KeyboardEvent) => {
+                if (e.key === "Escape") e.preventDefault();
+              },
+            }, "nested control"),
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    await vi.waitFor(() => {
+      expect(document.body.querySelector(".escape-owner")).not.toBeNull();
+    });
+
+    const pageHits: string[] = [];
+    const pageListener = (e: KeyboardEvent) => {
+      if (e.key === "Escape") pageHits.push("escape");
+    };
+    document.addEventListener("keydown", pageListener);
+    try {
+      const owner = document.body.querySelector<HTMLElement>(".escape-owner")!;
+      owner.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+      );
+      await nextTick();
+      expect(emitted, "a consumed Escape must not close the window").toEqual([]);
+      expect(pageHits, "a consumed Escape must not reach page-level listeners").toEqual([]);
+
+      // A bare Escape closes AND is still swallowed (the pre-existing rule).
+      const content = document.body.querySelector<HTMLElement>(".hk-modal-content")!;
+      content.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+      );
+      await nextTick();
+      expect(emitted).toEqual([false]);
+      expect(pageHits, "a closing Escape is swallowed by the window").toEqual([]);
+    } finally {
+      document.removeEventListener("keydown", pageListener);
+    }
+  });
+});

package/src/components/HkModal.tsx

@@ -489,6 +489,23 @@ export default defineComponent({
 
     function onKeydown(e: KeyboardEvent) {
       if (e.key === "Escape") {
+        // Cross-component precedence: a nested control that already consumed
+        // Escape (the range ribbon's "Escape resets the range" is the live
+        // case) owns the key, so the window must not close underneath it.
+        // `defaultPrevented` is the DOM-canonical "I handled this" signal for
+        // inline, preventDefault-only consumers — the package's pickers and
+        // panels instead stopPropagation (or teleport out of this subtree)
+        // and therefore never reach this handler either way.
+        //
+        // Keep swallowing the press here (`stopPropagation`) like a bare
+        // Escape does: before this precedence rule, a closable window consumed
+        // every Escape at this root, so letting a handled one travel on would
+        // hand the same press to page-level Escape listeners (a revealed strip,
+        // a pointer-reorder cancel) and produce one-press-two-actions.
+        if (e.defaultPrevented) {
+          if (props.closable) e.stopPropagation();
+          return;
+        }
         if (props.closable) {
           e.preventDefault();
           e.stopPropagation();

package/src/components/HkScrollProgress.test.tsx

@@ -439,11 +439,11 @@ describe("HkAdminTablePage scroll-progress registration", () => {
     rects.push(vi.spyOn(viewport, "getBoundingClientRect").mockReturnValue({
       left: 0, top: 0, right: 300, bottom: 400, width: 300, height: 400, x: 0, y: 0,
     } as DOMRect));
-    // The list root is AdminTablePage's table-card wrapper (the anchor
-    // class the page ships for exactly this geometry contract).
+    // The list root is HkTable's own host element — the table
+    // self-registers (the page only forwards the total).
     const card = container.querySelector("table");
     expect(card).not.toBeNull();
-    const cardHost = container.querySelector<HTMLElement>(".hk-admin-table-page-tablecard")!;
+    const cardHost = container.querySelector<HTMLElement>(".hk-table-host")!;
     expect(cardHost.contains(card!)).toBe(true);
     rects.push(vi.spyOn(cardHost, "getBoundingClientRect").mockReturnValue({
       left: 0, top: -200, right: 300, bottom: 3800, width: 300, height: 4000, x: 0, y: -200,

package/src/components/HkTable.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch, type PropType } from "vue";
+import { computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch, type PropType } from "vue";
 
 import { useI18n } from "../i18n/context";
 import { usePointerReorder } from "../composables/usePointerReorder";
@@ -10,6 +10,7 @@ import { ancestorZoom } from "../runtime/cssZoom";
 import { useClipboardWithToast } from "../runtime/useClipboard";
 import { useToast } from "../runtime/useToast";
 import HkRowActions from "./HkRowActions";
+import { HK_SCROLL_PROGRESS_REGISTRAR, type HkScrollProgressHandle } from "./HkScrollProgress";
 import "./HkTable.scss";
 
 interface Column {
@@ -91,6 +92,14 @@ export default defineComponent({
       default: false,
     },
     emptyText: { type: String, default: "" },
+    /** Authoritative row total the scroll-progress pill uses as its
+     *  denominator (the server count behind a paged list). Omitted: the
+     *  pill falls back to counting the delivered DOM rows. Every HkTable
+     *  self-registers with the nearest enclosing HkScrollContainer that
+     *  has `scrollProgress` on — no wrapper needed (2026-11-06: moved
+     *  here from HkAdminTablePage so the 17 bare-HkTable views inherit
+     *  the pill too). */
+    total: { type: Number, default: undefined },
   },
   emits: {
     "update:selectedRows": (_rows: Record<string, unknown>[]) => true,
@@ -195,6 +204,24 @@ export default defineComponent({
       wrapperScrollbar = null;
     });
 
+    // Scroll-progress registration: the nearest enclosing HkScrollContainer
+    // with `scrollProgress` on provides the registrar (provide/inject
+    // scoping resolves the shell viewport for admin pages and keeps an
+    // inner container's lists out of the shell). The handle exposes the
+    // table host as the row root plus the `total` prop live — the pill's
+    // denominator follows it as pages load.
+    const progressRegistrar = inject(HK_SCROLL_PROGRESS_REGISTRAR, null);
+    const progressHandle: HkScrollProgressHandle = {
+      getRoot: () => wrapperHostRef.value ?? null,
+      getTotal: () => props.total,
+    };
+    onMounted(() => {
+      progressRegistrar?.register(progressHandle);
+    });
+    onBeforeUnmount(() => {
+      progressRegistrar?.unregister(progressHandle);
+    });
+
     function getRowKey(row: Record<string, unknown>, index: number): string {
       if (props.rowKey && row[props.rowKey] != null) return String(row[props.rowKey]);
       return String(index);