@celestia-island/hikari 0.55.318 → 0.55.320

package/package.json

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

package/src/components/HkScrollContainer.tsx

@@ -453,7 +453,13 @@ export default defineComponent({
       }
       const band = vp.getBoundingClientRect();
       const active = pickActiveProgressRoot(band);
-      const rows = active ? active.root.querySelectorAll(props.scrollProgressSelector) : [];
+      // A list may own the row grammar (HkTable's section bands are body
+      // `<tr>`s that are not data rows); its `getRows` wins over the
+      // container selector. No `getRows` (or an undefined return) keeps the
+      // existing selector path byte-for-byte.
+      const rows = active
+        ? active.handle.getRows?.() ?? active.root.querySelectorAll(props.scrollProgressSelector)
+        : [];
       if (!active || rows.length === 0 || vp.scrollHeight <= vp.clientHeight + 1) {
         setProgressHidden();
         return;

package/src/components/HkScrollProgress.test.tsx

@@ -11,6 +11,7 @@ import { createApp, defineComponent, h, inject, nextTick, onMounted, onUnmounted
 
 import HkScrollContainer from "./HkScrollContainer";
 import { HkAdminTablePage } from "./HkAdminTablePage";
+import HTable from "./HkTable";
 import { HK_SCROLL_PROGRESS_REGISTRAR, type HkScrollProgressRegistrar } from "./HkScrollProgress";
 
 const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
@@ -219,6 +220,24 @@ describe("HkScrollProgress", () => {
     expect(pill.textContent).toBe("11 / 340");
   });
 
+  it("counts only a sectioned HkTable's data rows, not its bands", async () => {
+    // The band is a `<tr>` in the section body but not a row. The table's
+    // handle `getRows` wins over the container's `tbody tr` selector, so
+    // the pill reports 2 sections x 2 rows = 4, not 6.
+    const sections = [
+      { key: "panel-a", label: "Panel A", rows: [{ name: "a0" }, { name: "a1" }] },
+      { key: "panel-b", label: "Panel B", rows: [{ name: "b0" }, { name: "b1" }] },
+    ];
+    const scroller = mountScroller(() =>
+      h(HTable, { columns: [{ key: "name", title: "Name" }], sections }),
+    );
+    stubRootRect(scroller.container, ".hk-table-host", -100, 1900);
+    stubRows(scroller.container, 6, 0);
+    scroller.refresh();
+    await nextTick();
+    expect(scroller.pill()!.textContent).toBe("1 / 4");
+  });
+
   it("falls back to the DOM row count when the total is absent", async () => {
     const List = makeList({ rows: ROWS });
     const scroller = mountScroller(() => h(List));

package/src/components/HkScrollProgress.tsx

@@ -24,6 +24,12 @@ import "./HkScrollProgress.scss";
 export interface HkScrollProgressHandle {
   getRoot(): HTMLElement | null;
   getTotal(): number | undefined;
+  /** The list's own row elements in display order — wins over the
+   *  container's `scrollProgressSelector` when present. This is for a
+   *  list whose DOM rows are not all data rows (HkTable's section bands
+   *  are `<tr>`s in the body, but they are not rows). Return `undefined`
+   *  to fall back to the container's selector. */
+  getRows?(): readonly Element[] | undefined;
 }
 
 /** Provided by every HkScrollContainer instance whose `scrollProgress`

package/src/components/HkTable.interactions.test.tsx

@@ -1,9 +1,11 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { createApp, h } from "vue";
 import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
+import { dirname, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 
+import * as sass from "sass";
+
 import HTable from "./HkTable";
 import { useToast } from "../runtime/useToast";
 
@@ -23,10 +25,11 @@ import { useToast } from "../runtime/useToast";
  *   row-action affordance)
  * - `Column.copyable: false` and the table-wide `copy-cells=false` opt
  *   out wholesale
- * - the `copy` cursor and the hover hint ride `[data-copy-cell]` — the
- *   default text cells, in a copyable column, whose value still renders
- *   text — never every cell, so the pointer describes what a background
- *   click really does. Slot cells' inner leaves still copy, so their
+ * - the click cursor (`pointer`; the copy SEMANTICS live in the `title`
+ *   hint) and the hover hint ride `[data-copy-cell]` — the default text
+ *   cells, in a copyable column, whose value still renders text — never
+ *   every cell, so the cursor describes what a background click really
+ *   does. Slot cells' inner leaves still copy, so their
  *   plain arrow is a deliberate under-promise (2026-11-07 user
  *   direction)
  * - `manageable` renders the trailing ⋯ column (HkRowActions) and
@@ -77,6 +80,34 @@ const COLS = [
   { key: "endpoint", title: "Endpoint" },
 ];
 
+// The compiled sheet, injected into the document so `getComputedStyle` sees
+// the REAL cascade. Selector-text assertions cannot catch a rule that reaches
+// an unmarked cell through inheritance, an element selector (`td`) or a media
+// block — the cascade can.
+//
+// `style: "expanded"` is load-bearing: the compressed writer emits
+// `@media(min-width:600px)` (no space after `@media`) and happy-dom then
+// DROPS the whole block (cssRules stays empty), which would make a
+// media-wrapped widening rule invisible to this suite.
+const HERE = dirname(fileURLToPath(import.meta.url));
+const SRC = resolve(HERE, "..");
+const SHEET_STYLE = "expanded" as const;
+const SHEET_CSS = sass.compile(resolve(HERE, "HkTable.scss"), {
+  loadPaths: [SRC, join(SRC, "components"), join(SRC, "styles"), join(SRC, "styles", "theme")],
+  style: SHEET_STYLE,
+  silenceDeprecations: ["import", "global-builtin", "legacy-js-api"],
+}).css;
+// The parser probe below is compiled with the SAME style on purpose: if a
+// future edit flips SHEET_STYLE back to "compressed", the probe loses its
+// media block too and this suite goes red. That keeps the "fixture must stay
+// `expanded`" premise under its own tripwire instead of silently disarming
+// the cascade assertion.
+const PROBE_CSS = sass.compileString("@media (min-width: 600px) { .hk-probe { color: red } }", {
+  style: SHEET_STYLE,
+}).css;
+// happy-dom reports an unset cursor as "" (a browser reports "auto").
+const isAuto = (value: string): boolean => value === "" || value === "auto";
+
 async function settle() {
   await Promise.resolve();
   await Promise.resolve();
@@ -416,3 +447,69 @@ describe("HkTable interaction stylesheet", () => {
     expect(block.indexOf("cursor: default")).toBeGreaterThan(-1);
   });
 });
+
+describe("HkTable click-cursor cascade", () => {
+  let sheet: HTMLStyleElement;
+  beforeEach(() => {
+    sheet = document.createElement("style");
+    sheet.textContent = SHEET_CSS;
+    document.head.appendChild(sheet);
+  });
+  afterEach(() => {
+    sheet.remove();
+  });
+
+  it("parses the injected sheet (a blind sheet would make this suite vacuous)", () => {
+    expect(sheet.sheet?.cssRules?.length ?? 0).toBeGreaterThan(0);
+    // Probe the PARSER, not this sheet: the next test can only catch a
+    // media-wrapped widening rule if a media block survives parsing. The
+    // probe CSS is synthetic (so unrelated sheet edits, e.g. dropping the
+    // reduced-motion block, can never turn this suite red) but compiled with
+    // the SAME style as the fixture (so a fixture-style regression does).
+    const probe = document.createElement("style");
+    probe.textContent = PROBE_CSS;
+    document.head.appendChild(probe);
+    try {
+      const rules = [...(probe.sheet?.cssRules ?? [])];
+      expect(rules.some((rule) => typeof (rule as { media?: unknown }).media !== "undefined")).toBe(
+        true,
+      );
+    } finally {
+      probe.remove();
+    }
+  });
+
+  it("reaches the marked cell only — computed cascade, not selector text", () => {
+    const c = mount(
+      h(
+        HTable,
+        {
+          columns: [...COLS, { key: "secret", title: "Secret", copyable: false }],
+          rows: [{ name: "alpha", endpoint: "https://x.example", secret: "nope-token" }],
+          draggable: true,
+          selectable: true,
+          manageable: true,
+        },
+        { "cell-endpoint": () => "pure-text-slot" },
+      ),
+    );
+    // drag grip, selection, name, endpoint (slot), secret (opted out), row actions
+    const tds = Array.from(c.querySelectorAll<HTMLElement>("tbody td"));
+    expect(tds).toHaveLength(6);
+    const cursor = (index: number): string => getComputedStyle(tds[index]!).cursor;
+    expect(cursor(2)).toBe("pointer");
+    for (const index of [0, 1, 3, 4]) {
+      expect(isAuto(cursor(index))).toBe(true);
+    }
+    expect(cursor(5)).toBe("default");
+  });
+
+  it("an opted-out table hands every cell the ordinary cursor back", () => {
+    const c = mount(
+      h(HTable, { columns: COLS, rows: [{ name: "alpha", endpoint: "x" }], copyCells: false }),
+    );
+    for (const td of Array.from(c.querySelectorAll<HTMLElement>("tbody td"))) {
+      expect(isAuto(getComputedStyle(td).cursor)).toBe(true);
+    }
+  });
+});

package/src/components/HkTable.scss

@@ -95,6 +95,26 @@
   background: var(--hi-color-bg-subtle, rgba(255, 255, 255, 0.03));
 }
 
+/* A section's band is the first child of its body, so the base zebra rule
+   would shade each section's FIRST data row (child 2). Restart the phase
+   after the band: even data children are unshaded, odd ones carry the
+   stripe — the same first-row-unshaded phase an unsectioned body has. */
+.hk-table-striped .hk-table-section-body .hk-table-row:nth-child(even) {
+  background: none;
+}
+
+.hk-table-striped .hk-table-section-body .hk-table-row:nth-child(odd) {
+  background: var(--hi-color-bg-subtle, rgba(255, 255, 255, 0.03));
+}
+
+/* The sectioned zebra pair above is (0,4,0) — it would out-specify the
+   shared `.hk-table-hover .hk-table-row:hover` rule (0,3,0) and kill hover
+   feedback on EVERY row of a striped sectioned table. Keep the pointer
+   feedback by re-stating it at a spec that beats the pair. */
+.hk-table-striped.hk-table-hover .hk-table-section-body .hk-table-row:hover {
+  background: var(--hi-color-bg-subtle, rgba(255, 255, 255, 0.04));
+}
+
 .hk-table-bordered {
   border: 1px solid var(--hi-color-border, rgba(100,100,100,0.1));
   border-radius: var(--radius-md, 8px);
@@ -153,6 +173,51 @@
   color: var(--hi-color-text-secondary, #666666);
 }
 
+/* ── Section bands (grouped tables) ───────────────────────────────────
+   One `<tbody>` per section, each led by a band row. The band is a
+   rowgroup header, not a data row: it never carries `.hk-table-row`, so
+   the copy layer (which marks and cursor-styles cells via
+   `[data-copy-cell]`), the hover paint, the striped rule, the drag strip
+   and the selection/⋯ tracks all ignore it by construction. The band cell
+   carries no `data-copy-cell`, so it needs no copy-cursor override either.
+
+   The cell itself is TYPE-NEUTRAL for consumer markup: the `section` slot
+   carries arbitrary content (badges, panel names, status chips), so only
+   the track is styled here (padding / hairline / background / start
+   alignment). `font-weight: inherit` neutralizes the UA `th { font-weight:
+   bold }`; nothing here sets `white-space` (long panel names may wrap) or
+   `cursor` (selectable band text keeps its I-beam). Sizing is delivered by
+   the consumer's own classes; the plain `label` fallback gets its own span
+   below. The hk-table-sm/lg ladder steps ONLY the band's padding —
+   typography deliberately does not scale with the table size, because the
+   consumer's slot content owns its type. */
+.hk-table-section-cell {
+  padding: var(--space-8, 8px) var(--space-12, 12px);
+  border-bottom: 1px solid var(--hi-color-border, rgba(100,100,100,0.08));
+  text-align: start;
+  background: var(--hi-color-bg-subtle, rgba(255, 255, 255, 0.03));
+  font-weight: inherit;
+}
+
+/* The default `label` branch only (the `section` slot bypasses this span
+   entirely): the previous text-sm / font-medium band look. */
+.hk-table-section-label {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 500;
+}
+
+.hk-table-sm .hk-table-section-cell {
+  padding: var(--space-4, 4px) var(--space-8, 8px);
+}
+
+.hk-table-lg .hk-table-section-cell {
+  padding: var(--space-16, 16px) var(--space-24, 24px);
+}
+
+.hk-table-bordered .hk-table-section-cell {
+  border: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
+}
+
 /* ── Drag-to-reorder (draggable) ─────────────────────────────────────── */
 
 .hk-table-drag-handle {
@@ -406,32 +471,38 @@
    Table content is not prose. While the copy layer is enabled
    (`copy-cells`, the default), body cells kill drag mass-selection
    (user-select: none) and the cells whose background click copies
-   advertise the click-to-copy affordance with the `copy` cursor — text
-   clicks run the shared clipboard-with-toast path (HkTable.tsx). Both
-   halves scope under `data-copy-cells`, so a consumer that opts out
-   gets plain selectable text back wholesale.
+   advertise the click-to-copy affordance with the `pointer` cursor —
+   text clicks run the shared clipboard-with-toast path (HkTable.tsx).
+   Both halves scope under `data-copy-cells`, so a consumer that opts
+   out gets plain selectable text back wholesale.
 
-   The `copy` cursor rides `[data-copy-cell]`, NOT every cell
+   The `pointer` cursor rides `[data-copy-cell]`, NOT every cell
    (2026-11-07 user direction): the marker is the same predicate as the
    `title` hint and as a DEFAULT text cell's background click — a
    default-rendered cell, in a `copyable` column, whose value still
    renders text. Slot cells (chips/badges/layout wrappers) never take
    the click on their td SURFACE — only their inner text leaves copy —
    and `copyable: false` columns copy nothing at all, so both keep the
-   ordinary arrow; a `copy` cursor there (which Windows paints as the
-   legacy arrow+plus glyph) promised an affordance the surface click
-   does not deliver. Two deliberate under-promises follow: an inner
-   leaf that copies still shows the arrow, and a slot that renders BARE
-   text (no wrapper) makes the td's own surface copy — yet stays
-   unmarked because the slot owns its hints. Under-promising is the
-   point; over-promising is the bug this rule removes. */
+   ordinary arrow; a copy affordance there promised something the
+   surface click does not deliver. Two deliberate under-promises
+   follow: an inner leaf that copies still shows the arrow, and a slot
+   that renders BARE text (no wrapper) makes the td's own surface copy
+   — yet stays unmarked because the slot owns its hints. Under-
+   promising is the point; over-promising is the bug this rule removes.
+
+   Why `pointer`, not `copy` (2026-11-07 user direction, second turn):
+   the OS paints CSS `copy` with the legacy arrow+plus bitmap (no
+   themed cursor exists for it), which reads as a 90s artifact next to
+   the modern arrow. The COPY semantics live in the `title` hint
+   ("Click to copy"); the cursor only has to say "this text reacts to a
+   click", which is exactly what `pointer` says. */
 .hk-table[data-copy-cells] {
   .hk-table-cell {
     @include user-select(none);
   }
 
   .hk-table-cell[data-copy-cell] {
-    cursor: copy;
+    cursor: pointer;
   }
 
   /* Defense in depth: the row-actions track is a control and never
@@ -439,7 +510,7 @@
      `.hk-table-cell` on purpose: that keeps its specificity equal to the
      marker rule above (`(0,4,0)`) and, declared after it, it still wins
      if a future widening ever hands the marker to the ⋯ trigger. A bare
-     `.hk-table-manage-cell` (`(0,3,0)`) would now lose that tie. */
+     `.hk-table-manage-cell` (`(0,3,0)`) would lose that tie outright. */
   .hk-table-cell.hk-table-manage-cell {
     cursor: default;
   }