@celestia-island/hikari 0.55.100 → 0.55.101

package/package.json

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

package/src/components/HkErrorLanding.scss

@@ -218,8 +218,9 @@
 // stretching the card. The 9rem term keeps short viewports (20vh < 9rem)
 // at nine rem of scroll area. The pane div is the track's positioning
 // context and wraps EXACTLY the scrolling body (useOverlayScrollbar
-// host contract); the family overlay scrollbar's observers keep the
-// thumb geometry fresh on fold/expand.
+// host contract); the family overlay scrollbar — BOTH axes, the body
+// below hides the native bar horizontally too — keeps the thumb
+// geometry fresh on fold/expand.
 .hk-error-landing__details-pane {
   position: relative;
   margin-top: var(--space-6, 0.375rem);

package/src/components/HkErrorLanding.test.tsx

@@ -119,10 +119,20 @@ describe("HkErrorLanding", () => {
     expect(el.querySelector(".hk-error-landing__desc")!.textContent).toBe("line1\nline2");
   });
 
-  it("attaches the overlay scrollbar chrome inside the details pane", () => {
+  it("attaches the overlay scrollbar chrome inside the details pane on BOTH axes", () => {
     const el = mountLanding({ details: () => h("pre", { class: "s-tool-json-tree" }, "raw") });
-    expect(el.querySelector(".hk-error-landing__details-pane .hk-scrollbar-track")).not.toBeNull();
-    expect(el.querySelector(".hk-error-landing__details-pane .hk-scrollbar-thumb")).not.toBeNull();
+    const pane = el.querySelector(".hk-error-landing__details-pane")!;
+    expect(pane.querySelector(".hk-scrollbar-track")).not.toBeNull();
+    expect(pane.querySelector(".hk-scrollbar-thumb")).not.toBeNull();
+    // The pane's CSS hides the NATIVE bar on both axes, so the overlay is
+    // the only scrollbar the raw payload can ever show. A vertical-only
+    // attach (the pre-fix default) leaves a horizontal overflow — deep
+    // JSON nesting, long unwrapped keys (preview rows ellipsize by
+    // design) — with no scrollbar at all: pin one track per axis.
+    expect(pane.querySelector(".hk-scrollbar-track[data-axis='horizontal']")).not.toBeNull();
+    expect(pane.querySelector(".hk-scrollbar-track:not([data-axis='horizontal'])")).not.toBeNull();
+    // Exactly the two tracks — no duplicate chrome from a double attach.
+    expect(pane.querySelectorAll(".hk-scrollbar-track")).toHaveLength(2);
   });
 
   it("renders no scrollbar chrome without a details pane", () => {

package/src/components/HkErrorLanding.tsx

@@ -45,7 +45,8 @@ function normalizeSlotNodes(nodes: VNode | VNode[] | undefined): VNode[] {
  * error code / HTTP status as HkBadge chips above the headline, an
  * always-open raw-details pane (the default slot — hosts render HkJsonTree
  * there) with a STABLE standing frame — the larger of 9rem and ~20vh,
- * carried by the family overlay scrollbar — and an actions slot.
+ * carried by the family overlay scrollbar on BOTH axes (vertical for long
+ * stacks, horizontal for deep/wide JSON) — and an actions slot.
  *
  * The pane never breathes with its content: folding every JSON node only
  * changes what renders INSIDE the standing frame, and a long stack trace
@@ -129,7 +130,12 @@ export const HkErrorLanding = defineComponent({
 
     function ensureDetailsScrollbars() {
       if (detailsScrollbars || !detailsBodyRef.value) return;
-      detailsScrollbars = attachOverlayScrollbars(detailsBodyRef.value);
+      // BOTH axes: the raw payload overflows down (long stacks) and across
+      // (deep JSON nesting, long unwrapped keys — the tree's preview rows
+      // ellipsize by design and never push the row wide) alike, and the
+      // pane's CSS hides the native bar on both axes — a vertical-only
+      // attach leaves a horizontal overflow with no scrollbar at all.
+      detailsScrollbars = attachOverlayScrollbars(detailsBodyRef.value, { axis: "both" });
       contentResizeObserver = new ResizeObserver(() => detailsScrollbars?.update());
       observeDetailsContent();
     }

package/src/components/overlayScrollbarChrome.contract.test.ts

@@ -0,0 +1,73 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+/**
+ * Source contract for the shared overlay-scrollbar chrome.
+ *
+ * The `.hk-scrollbar-track` / `.hk-scrollbar-thumb` DOM is created
+ * imperatively by useOverlayScrollbar; its styling lives in the theme
+ * partial `packages/theme/styles/_scrollbar.scss`, vendored byte-exact
+ * into `src/styles/theme/scrollbar.scss` (see vendoredSync.test.ts for
+ * the drift guard). This contract reads the SHIPPED vendored copy — the
+ * one npm consumers resolve through the `./styles/*` export — and pins
+ * the two properties the error landing's themeless contract depends on:
+ *
+ * 1. Thumb color must survive a missing `--hi-color-muted`: HkErrorLanding
+ *    is designed to render standalone (server error page without hikari
+ *    theme init; its SCSS carries `--hel-*` fallbacks for exactly that
+ *    case). An unfallback'd `var(--hi-color-muted)` inside `color-mix()`
+ *    computes the whole color to invalid-at-computed-value-time — the
+ *    thumb renders invisible on BOTH axes while the pane's CSS hides the
+ *    native bar, i.e. no scrollbar at all. (2026-10-01: found while
+ *    giving the error details pane its horizontal overlay track.)
+ * 2. Both axis rails exist with their axis-keyed selectors — the engine
+ *    mounts a `data-axis="horizontal"` track and an attribute-less
+ *    vertical track; the chrome must style both.
+ */
+
+const stylesDir = resolve(dirname(fileURLToPath(import.meta.url)), "../styles");
+const chrome = readFileSync(resolve(stylesDir, "theme", "scrollbar.scss"), "utf8");
+
+describe("overlay scrollbar chrome contract", () => {
+  it("ships real chrome (positive control for the reads below)", () => {
+    // Zero-yield guard: these extractions must prove they saw the file.
+    expect(chrome).toContain(".hk-scrollbar-track");
+    expect(chrome).toContain(".hk-scrollbar-thumb");
+    expect(chrome.length).toBeGreaterThan(200);
+  });
+
+  it("styles both axis rails with their axis-keyed selectors", () => {
+    expect(chrome).toMatch(/\.hk-scrollbar-track\[data-axis="horizontal"\]/);
+    expect(chrome).toMatch(/\.hk-scrollbar-track:not\(\[data-axis="horizontal"\]\)/);
+  });
+
+  it("keeps the thumb visible without --hi-color-muted (themeless render)", () => {
+    // Every color-mix() over the muted channel must carry a fallback.
+    // (Match to the declaration's semicolon: the fallback's own `)` would
+    // truncate a paren-counting match.)
+    const mixes = chrome.match(/color-mix\([^;]+/g) ?? [];
+    // Positive control: the file is known to mix the muted channel at the
+    // resting and hovered/dragged opacities — a rename would 0-match and
+    // make this check vacuously green, so pin the count too.
+    expect(mixes.length).toBeGreaterThanOrEqual(2);
+    const muted = mixes.filter((m) => m.includes("--hi-color-muted"));
+    expect(muted.length).toBeGreaterThanOrEqual(2);
+    for (const mix of muted) {
+      expect(
+        mix,
+        "color-mix over --hi-color-muted must declare a fallback color",
+      ).toMatch(/var\(--hi-color-muted,\s*rgb\(118 122 128\)\)/);
+    }
+  });
+
+  it("keeps the rails pointer-transparent until they flash in", () => {
+    // An invisible rail must never steal clicks from the content hugging
+    // the region's edge (end-of-line links) — pointer-events: none at
+    // rest, auto only while visible.
+    expect(chrome).toMatch(/\.hk-scrollbar-track\s*\{[^}]*pointer-events:\s*none/);
+    expect(chrome).toMatch(/&?\.is-scrolling,\s*&?\.is-hovering\s*\{[^}]*pointer-events:\s*auto/);
+  });
+});

package/src/styles/theme/scrollbar.scss

@@ -56,12 +56,17 @@
 .hk-scrollbar-thumb {
   position: absolute;
   border-radius: 3px;
-  background: color-mix(in srgb, var(--hi-color-muted) 35%, transparent);
+  /* Fallback = the landing's neutral muted seed (HkErrorLanding's
+     --hel-muted 118 122 128): themeless standalone renders (the error
+     landing's no-theme-init contract) get a visible neutral thumb; an
+     undefined --hi-color-muted would make color-mix invalid at
+     computed-value time and the thumb invisible on BOTH axes. */
+  background: color-mix(in srgb, var(--hi-color-muted, rgb(118 122 128)) 35%, transparent);
   transition: background var(--hi-duration-fast, 0.15s) ease;
 
   .is-hovering &,
   &.is-dragging {
-    background: color-mix(in srgb, var(--hi-color-muted) 55%, transparent);
+    background: color-mix(in srgb, var(--hi-color-muted, rgb(118 122 128)) 55%, transparent);
   }
 }