@celestia-island/hikari 0.55.295 → 0.55.297

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.295",
+  "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/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);