@celestia-island/hikari 0.55.319 → 0.55.320

package/package.json

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

@@ -471,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
@@ -504,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;
   }

package/src/components/HkTable.tsx

@@ -1076,7 +1076,7 @@ export default defineComponent({
             const isSlotCell = Boolean(slots[`cell-${col.key}`]);
             const value = row[col.key];
             // ONE predicate behind the hover hint AND the
-            // `copy` cursor (`data-copy-cell`): a DEFAULT text
+            // copy-affordance cursor (`pointer`, `data-copy-cell`): a DEFAULT text
             // cell advertises the copy affordance only when its
             // background click really copies — the td is a text
             // leaf that still RENDERS text (see `renderedText`).
@@ -1085,7 +1085,7 @@ export default defineComponent({
             // copy) and `copyable: false` columns copy nothing,
             // so both keep the plain arrow — a deliberate
             // under-promise, never an over-promise (2026-11-07
-            // user direction: `cursor: copy` on every cell
+            // user direction: a copy affordance on every cell
             // promised more than the handler does; badges carry
             // their own pointer/tooltip). A slot that renders
             // BARE text is the one case where the td surface

package/src/styles/selectionSheet.test.ts

@@ -139,7 +139,7 @@ describe("selection policy sheet", () => {
     // 2026-10-18 contract: copy-cells (default) denies drag selection on
     // every body cell; the opt-out now needs an explicit mirror — absence
     // of a deny no longer means selectable once the root denies. The
-    // `copy` CURSOR is narrower than the selection deny since 2026-11-07
+    // click CURSOR is narrower than the selection deny since 2026-11-07
     // (marker-scoped, asserted by the next test): the deny still covers
     // the whole cell body, only the pointer narrowed.
     const css = compile("../components/HkTable.scss");
@@ -149,45 +149,62 @@ describe("selection policy sheet", () => {
     );
   });
 
-  it("hands the copy cursor only to the marked cells, never to every cell", () => {
-    // 2026-11-07 user direction: `.hk-table-cell { cursor: copy }` on the
-    // whole body promised a copy on slot/control/empty cells whose
-    // background click copies nothing. Asserted on the COMPILED sheet so
+  it("hands the clickable-text pointer only to the marked cells, never to every cell", () => {
+    // 2026-11-07 user direction: the copy affordance used to ride every
+    // `.hk-table-cell` (a copy cursor on slot/control/empty cells whose
+    // background click copies nothing). It now rides `[data-copy-cell]`
+    // only, and the cursor is the generic `pointer` — the OS paints CSS
+    // `copy` with the legacy arrow+plus bitmap, so the copy semantics
+    // live in the `title` hint instead. Asserted on the COMPILED sheet so
     // neither a commented-out rule nor a selector list that re-widens the
-    // rule (`.hk-table-cell, .hk-table-cell[data-copy-cell]`) can pass.
+    // rule can pass.
     const css = compile("../components/HkTable.scss");
-    const copyRules = [...css.matchAll(/([^{}]+)\{([^{}]*)\}/g)].filter((match) =>
-      /cursor:\s*copy/.test(match[2]!),
+    // 1) The legacy `copy` glyph must not come back anywhere — not as the
+    //    bare keyword, not as a `url(...)` fallback list, not in any case.
+    //    Only the KEYWORD counts: `url(copy-icon.cur)` / `var(--copy-cursor)`
+    //    merely spell "copy" without selecting the legacy glyph.
+    const legacyCopy = [...css.matchAll(/cursor\s*:([^;}]*)/gi)].filter((match) => {
+      const value = match[1]!.replace(/url\([^)]*\)|var\([^)]*\)/gi, " ");
+      return /\bcopy\b/i.test(value);
+    });
+    expect(legacyCopy).toHaveLength(0);
+    // 2) The marked cell IS the clickable-text surface.
+    expect(css).toMatch(
+      /\.hk-table\[data-copy-cells\] \.hk-table-cell\[data-copy-cell(?:="")?\]\{[^}]*?cursor:\s*pointer/,
+    );
+    // 3) No rule may hand an UNMARKED table cell the copy layer's pointer
+    //    (that is exactly the re-widening this contract removed).
+    expect(css).not.toMatch(
+      /\.hk-table\[data-copy-cells\] \.hk-table-cell\{[^}]*?cursor:\s*pointer/,
     );
-    expect(copyRules.length).toBeGreaterThan(0);
-    for (const rule of copyRules) {
+    // 4) The marker must sit on the CELL compound, not on an ancestor:
+    //    `.hk-table[data-copy-cell] .hk-table-cell` keeps the token in the
+    //    selector yet can never match a real cell.
+    for (const rule of css.matchAll(/([^{}]+)\{([^{}]*)\}/g)) {
+      if (!/cursor\s*:[^;}]*\bpointer\b/i.test(rule[2]!)) continue;
       for (const selector of rule[1]!.split(",")) {
-        // Tolerate the empty-value spelling Vue emits
-        // (`[data-copy-cell=""]`) but neither a prefix token nor a
-        // selector carrying a different value.
-        expect(selector).toMatch(/\[data-copy-cell(?:="")?\]/);
-        // The marker must sit on the CELL compound: moving it to an
-        // ancestor (`.hk-table[data-copy-cell] .hk-table-cell`) keeps the
-        // token in the selector yet can never match a real cell.
         const lastCompound = selector.trim().split(/\s+/).pop() ?? "";
-        expect(lastCompound).toMatch(/\.hk-table-cell/);
+        // Only the CELL compound itself is constrained: a legitimate
+        // descendant rule (`.hk-table-cell a { cursor: pointer }`) is a
+        // control inside the cell and keeps its own cursor.
+        if (!lastCompound.startsWith(".hk-table-cell")) continue;
         expect(lastCompound).toMatch(/\[data-copy-cell(?:="")?\]/);
       }
     }
-    // The marked rule must also sit under the table-level opt-out gate:
-    // moving it into a dead block (`.hk-table:not([data-copy-cells])`)
-    // would keep a marker-bearing selector while the cursor never applies.
-    expect(css).toMatch(
-      /\.hk-table\[data-copy-cells\] \.hk-table-cell\[data-copy-cell(?:="")?\]\{[^}]*?cursor:\s*copy/,
-    );
-    // The control-track override repeats `.hk-table-cell` so its
-    // specificity TIES the marker rule above and, declared after it, wins
-    // the tie — the defense-in-depth promise needs that ordering.
+    // 5) The control-track override repeats `.hk-table-cell` so its
+    //    specificity TIES the marker rule above and, declared after it,
+    //    wins the tie — the defense-in-depth promise needs that ordering.
     expect(css).toMatch(
       /\.hk-table\[data-copy-cells\] \.hk-table-cell\.hk-table-manage-cell\{[^}]*?cursor:\s*default/,
     );
-    expect(css.indexOf(".hk-table-cell.hk-table-manage-cell")).toBeGreaterThan(
-      css.indexOf("[data-copy-cell]"),
+    // Anchor on the rule that DECLARES the cursor (not merely on the first
+    // selector that mentions the marker — a decoy rule carrying the selector
+    // without a cursor would neutralize the order pin).
+    const markedRule = css.match(
+      /\.hk-table\[data-copy-cells\] \.hk-table-cell\[data-copy-cell(?:="")?\]\{[^}]*?cursor:\s*pointer/,
     );
-  });
+    expect(markedRule).not.toBeNull();
+    expect(css.indexOf(".hk-table-cell.hk-table-manage-cell")).toBeGreaterThan(
+      css.indexOf(markedRule![0]),
+    );  });
 });