@celestia-island/hikari 0.55.99 → 0.55.101

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.99",
+  "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/HkThemeToggle.contract.test.ts

@@ -25,6 +25,73 @@ import { fileURLToPath } from "node:url";
 const here = dirname(fileURLToPath(import.meta.url));
 const read = (f: string): string => readFileSync(join(here, f), "utf-8");
 
+describe("HkThemeToggle theme-row pill contract", () => {
+  // 2026-10-01 user report: with the item-trailing slot reserving a real
+  // column, the row button's hover wash stopped short of the row edge —
+  // theme rows and the standalone 自定义 row hovered at different widths.
+  // The pill therefore lives on `.s-theme-item-row` (full row width no
+  // matter how wide the trailing column is) and the row's button is
+  // chromeless. happy-dom has no layout engine, so the geometry is pinned
+  // as scss-text assertions.
+  it("puts the unified menu-item pill on the row, not the row button", () => {
+    const css = read("HkThemeToggle.scss");
+    const rowBlock = css.match(/\.s-theme-item-row\s*\{[^}]*\}/);
+    expect(rowBlock).not.toBeNull();
+    expect(rowBlock![0]).toContain("@include mi.item;");
+    // The overlaid delete affordance pins to the row (positioning context).
+    expect(rowBlock![0]).toContain("position: relative");
+  });
+
+  it("strips the row button's own chrome so the wash is not doubled", () => {
+    const css = read("HkThemeToggle.scss");
+    const block = css.match(/\.s-theme-item-row \.s-theme-item-btn\s*\{[^}]*\}/);
+    expect(block).not.toBeNull();
+    // The ROW owns the frame: its border 1 + padding 12 put the content at
+    // the same 13px the standalone pills measure (border 1 + padding 12), so
+    // the button drops its own border entirely.
+    expect(block![0]).toContain("border: none;");
+    expect(block![0]).toContain("background: transparent");
+    expect(block![0]).toContain("min-height: 0");
+    // The button stretches over the row's frame (negative block margins
+    // mirrored by re-applied padding) so the WHOLE pill is the click/focus
+    // target — master's pill WAS the button — while the name's content box
+    // keeps the standalone offsets. Losing the stretch drops the button
+    // back to a centered auto-height box inside the row (misaligned and
+    // undersized); losing the bleed pair desyncs the content offset by the
+    // frame width.
+    expect(block![0]).toContain("align-self: stretch");
+    expect(block![0]).toContain("margin-block: calc(");
+    expect(block![0]).toContain("padding-block: calc(");
+  });
+
+  it("suppresses the row button's own hover and active state chrome", () => {
+    const css = read("HkThemeToggle.scss");
+    // The hover override must repeat mi.item's guard chain to out-specify
+    // the mixin's hover rule; the active/checked suppression targets the
+    // state attributes directly.
+    expect(css).toContain(
+      ".s-theme-item-row .s-theme-item-btn:hover:not(:disabled):not([data-disabled]):not([data-active]):not([data-checked])",
+    );
+    expect(css).toMatch(
+      /\.s-theme-item-row \.s-theme-item-btn\[data-active\][^{]*\{[^}]*background: transparent/,
+    );
+  });
+
+  it("registers the theme row family for the mobile sheet token swap", () => {
+    const mi = read("_menu-item.scss");
+    // The row carries the pill, so the sheet-context token binding must
+    // target it too — otherwise sheets keep the desktop 34px metrics.
+    const sheetList = mi.match(
+      /\.hk-popover-panel\.hk-is-sheet[^{]*\{[^{]*\{[^}]*\}/,
+    );
+    expect(sheetList).not.toBeNull();
+    expect(sheetList![0]).toContain(".s-theme-item-row");
+    const modalList = mi.match(/\.hk-modal-content\s*\{[^{]*\{[^}]*\}/);
+    expect(modalList).not.toBeNull();
+    expect(modalList![0]).toContain(".s-theme-item-row");
+  });
+});
+
 describe("HkThemeToggle row lead-cell contract", () => {
   it("sizes the theme-row lead cell to fit a 28px swatch mark", () => {
     const css = read("HkThemeToggle.scss");

package/src/components/HkThemeToggle.scss

@@ -136,32 +136,84 @@
 }
 
 /* ── Theme list rows ────────────────────────────────────────────────────
- * Every row is ONE full-width pill: the delete affordance for custom
- * themes overlays the pill's trailing edge (the row is the positioning
- * context), so built-in rows reserve no trailing column — the old
- * invisible slot left a permanent dead strip right of every row in the
- * mobile bottom sheet — and every pill and highlight still shares the
- * exact same width.
+ * Every row is ONE full-width pill, and the pill is THE ROW (2026-10-01
+ * user report: with the trailing slot reserving a real column, the row
+ * button's wash stopped short of the row edge — theme rows and the
+ * standalone 自定义 row hovered at different widths). The unified
+ * menu-item chrome therefore lives on `.s-theme-item-row` (which also
+ * carries `data-active` from the TSX), and the row's button surrenders
+ * its own chrome below, so the hover/active wash, border and radius
+ * span the full row no matter how wide the trailing column is. The
+ * standalone pills (自定义 row, host mode-extra rows) keep the chrome on
+ * the button itself — same spec, same width as a row.
  *
  * Metrics/states come from the unified menu-item spec (./_menu-item.scss)
  * — the same grammar as menu rows and select options; inside the mobile
  * sheet the shared `.hk-popover-panel.hk-is-sheet` token context applies
- * the 44px touch geometry, so the old component-local media bump is gone
- * (only the overlaid delete button keeps its own touch sizing below).
+ * the 44px touch geometry (the row family is registered there), so the
+ * old component-local media bump is gone (only the overlaid delete
+ * button keeps its own touch sizing below).
  */
 
 .s-theme-item-row {
+  @include mi.item;
+
   position: relative;
-  display: flex;
-  align-items: center;
 }
 
-/* Theme rows speak the SAME grammar as every dropdown option
- * (.hk-select-option): base-size text, roomy pill padding, hairline
- * border that tints on hover and strengthens when active — so a theme
- * list inside the popover reads like any select/menu panel. The old
- * bespoke 6×8 tight rows (small text, borderless 12% wash) are what
- * made the theme sheet read as "not from the standard dropdown". */
+/* The row's button keeps the CLICK and FOCUS semantics (keyboard parity,
+ * screen-reader role) but no visual chrome of its own: background goes
+ * transparent and the border is dropped entirely — the ROW now owns the
+ * frame, and the content x lands on the same offset as the standalone
+ * pills anyway (row border 1 + row padding 12 = the standalone border 1 +
+ * padding 12 = 13px from the pill edge). Vertically the button bleeds
+ * over the row's frame (negative margins) and re-applies the padding
+ * inside, so the WHOLE pill is the click/focus target — master's pill
+ * WAS the button — while the name's content box keeps the standalone
+ * offsets (border 1 + pad-y). Row heights are unchanged: the button's
+ * net layout contribution is its content, so the row's own min-height
+ * rules exactly as the button's did before. */
+.s-theme-item-row .s-theme-item-btn {
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+  width: auto;
+  /* Fill the row's full cross size (overriding the row's align-items:
+   * center FOR THIS ITEM only) so the click/focus target is the whole
+   * pill, not just the name's line box. */
+  align-self: stretch;
+  /* Bleed over the row's frame — its vertical padding plus the 1px
+   * mi.item border — then re-apply that padding inside: the name's
+   * content box keeps the standalone pills' offsets (border 1 + pad)
+   * while the hit area covers the pill edge to edge. The 1px constant
+   * mirrors mi.item's border width; if the mixin's border ever changes,
+   * this pair moves with it. */
+  margin-block: calc(-1 * var(--hk-menu-item-pad-y, 6px) - 1px);
+  padding-block: calc(var(--hk-menu-item-pad-y, 6px) + 1px);
+  padding-inline: 0;
+  border: none;
+  /* Follow the row's pill radius: the button keeps mi.item's :focus-visible
+   * inset outline (keyboard parity), and outlines follow border-radius —
+   * a zero radius here would render the ring as a sharp rectangle poking
+   * past the row's rounded corners. */
+  border-radius: inherit;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+}
+
+/* Suppress the button's own state chrome — the row above owns the wash.
+ * The hover guard repeats mi.item's guard chain so this override
+ * out-specifies the mixin's (0,6,0) hover rule. */
+.s-theme-item-row .s-theme-item-btn:hover:not(:disabled):not([data-disabled]):not([data-active]):not([data-checked]),
+.s-theme-item-row .s-theme-item-btn[data-active],
+.s-theme-item-row .s-theme-item-btn[data-checked] {
+  background: transparent;
+  border-color: transparent;
+  color: inherit;
+  font-weight: inherit;
+}
+
 .s-theme-item-btn {
   @include mi.item;
 

package/src/components/HkThemeToggle.test.ts

@@ -283,6 +283,13 @@ describe("HkThemeToggle color-mode group", () => {
     // Active check glyph sits inside the pill, leading the name.
     const activeBtn = document.body.querySelector<HTMLButtonElement>(".s-theme-item-btn[data-active]");
     expect(activeBtn?.querySelector(".s-theme-item-check")).toBeTruthy();
+
+    // The ROW is the pill (2026-10-01): the active state surfaces on the
+    // row element too, so the highlight spans the full row width instead
+    // of stopping short at a trailing column.
+    const activeRows = rows.filter((r) => r.hasAttribute("data-active"));
+    expect(activeRows).toHaveLength(1);
+    expect(activeRows[0].querySelector(".s-theme-item-btn[data-active]")).toBeTruthy();
   });
   it("renders the mode-extra strip under the mode group when provided", async () => {
     const container = document.createElement("div");

package/src/components/HkThemeToggle.tsx

@@ -181,16 +181,18 @@ export const HkThemeToggle = defineComponent({
      * cache icon vnodes across renders, or closing/reopening the popover
      * would re-mount the same vnode instances. In AUTO mode the Light/
      * Dark options collapse into the group's merged cell (the altitude
-     * strip) via `mergeKeys`; they stay flagged disabled for the
-     * degradation path (merge requested without the #merged slot) and
-     * for semantic clarity.
+     * strip) via `mergeKeys`. They stay ENABLED (2026-10-01 user report:
+     * disabled Light/Dark read as the mode being locked to the sun): in
+     * the merged rendering they are not rendered at all, and on the
+     * degradation path (merge requested without the #merged slot) a
+     * click must drop OUT of auto onto the pressed side instead of
+     * doing nothing.
      */
     function modeOptions(): TabItem[] {
-      const auto = isAutoMode.value;
       return [
         { key: "system", label: t("hikari::theme.modeAuto"), icon: <Monitor size={16} /> },
-        { key: "light", label: t("hikari::theme.modeLight"), icon: <Sun size={16} />, disabled: auto },
-        { key: "dark", label: t("hikari::theme.modeDark"), icon: <MoonStar size={16} />, disabled: auto },
+        { key: "light", label: t("hikari::theme.modeLight"), icon: <Sun size={16} /> },
+        { key: "dark", label: t("hikari::theme.modeDark"), icon: <MoonStar size={16} /> },
       ];
     }
 
@@ -336,6 +338,13 @@ export const HkThemeToggle = defineComponent({
                   data-custom={th.isCustom || undefined}
                   data-trailing={trailingSlot ? "slot" : undefined}
                   data-name-suffix={nameSuffixSlot ? "slot" : undefined}
+                  // The ROW is the pill: the highlight state lives here so
+                  // the hover/active wash spans the full row width — a
+                  // trailing slot column must not shrink it (2026-10-01
+                  // user report: theme rows and the 自定义 row hovered at
+                  // different widths). The button keeps the click/focus
+                  // semantics; the stylesheet strips its own chrome.
+                  data-active={currentTheme.value === th.id || undefined}
                 >
                   <button
                     type="button"

package/src/components/_menu-item.scss

@@ -79,6 +79,7 @@
   .hk-menu-action-item,
   .hk-select-option,
   .hk-popup-select-item,
+  .s-theme-item-row,
   .s-theme-item-btn,
   .s-popup-menu-item,
   .hk-popup-menu-item,
@@ -98,6 +99,7 @@
     .hk-menu-row,
     .hk-menu-action-item,
     .hk-select-option,
+    .s-theme-item-row,
     .s-theme-item-btn,
     .s-popup-menu-item,
     .hk-popup-menu-item,

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);
   }
 }