@celestia-island/hikari 0.55.326 → 0.55.328

package/package.json

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

package/src/DemoApp.tsx

@@ -620,11 +620,11 @@ export default defineComponent({
           <h2>HTimeline</h2>
           <HTimeline steps={timelineSteps} currentKey="v2" />
           <h3>Narrow host → auto window (prev / current / next, edges fade)</h3>
-          <div style="max-width:280px;padding:8px;border:1px dashed var(--hi-color-border, #888);border-radius:8px">
+          <div style="max-width:280px;padding:8px;border:1px dashed var(--hi-color-border, #888);border-radius:var(--radius-md, 8px)">
             <HTimeline steps={wizardSteps} currentKey="vendor" />
           </div>
           <h3>collapse="always" at the first step</h3>
-          <div style="max-width:280px;padding:8px;border:1px dashed var(--hi-color-border, #888);border-radius:8px">
+          <div style="max-width:280px;padding:8px;border:1px dashed var(--hi-color-border, #888);border-radius:var(--radius-md, 8px)">
             <HTimeline steps={wizardSteps} currentKey="type" collapse="always" />
           </div>
         </section>
@@ -658,7 +658,7 @@ export default defineComponent({
 
         <section>
           <h2>HZoomToolbar / HMinimap</h2>
-          <div style="position:relative;height:200px;border-radius:8px;overflow:hidden;background:rgba(0,0,0,0.35)">
+          <div style="position:relative;height:200px;border-radius:var(--radius-md, 8px);overflow:hidden;background:rgba(0,0,0,0.35)">
             <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:0.75rem;opacity:0.5">
               Host surface — zoom {zoomState.value.zoom.toFixed(2)}x, pan ({Math.round(zoomState.value.panX)}, {Math.round(zoomState.value.panY)})
             </div>

package/src/animation/registerAnimations.ts

@@ -145,3 +145,9 @@ registerCssAnimation("hk-range-ribbon-pulse", { infinite: true });
 // prop's dot breathes while its state is in-flight — a settled dot sits
 // static. Reduced motion drops the loop (house pattern, see HkSkeleton).
 registerCssAnimation("hk-badge-dot-pulse", { infinite: true });
+// components/HkEdgeGlow.scss — the shared edge-glow breathe (loops
+// forever): the one painter behind HkScrollContainer's overflow glow and
+// any host-mounted band (the static selection hint keeps animate off).
+// Reduced motion keeps the band and drops the loop (house pattern, see
+// HkSkeleton); the global CSS-animation switch pauses it as usual.
+registerCssAnimation("hk-edge-glow-breathe", { infinite: true });

package/src/components/HkAffixPicker.scss

@@ -21,7 +21,7 @@
   padding-block: 4px;
   padding-inline: 9px 11px;
   border: none;
-  border-radius: var(--radius-sm, 6px);
+  border-radius: var(--radius-md, 8px);
   background: transparent;
   color: rgb(var(--color-text));
   cursor: pointer;
@@ -196,7 +196,7 @@
   height: 1.5rem;
   padding: 0;
   border: 0;
-  border-radius: var(--radius-full, 999px);
+  border-radius: var(--radius-full, 9999px);
   background: transparent;
   color: var(--hi-icon-button-icon-color, rgb(var(--color-muted)));
   cursor: pointer;

package/src/components/HkBreadcrumb.scss

@@ -341,7 +341,7 @@
   .hk-breadcrumb-item {
     background: var(--hi-card-bg);
     padding: 0.375rem 0.875rem;
-    border-radius: 999px;
+    border-radius: var(--radius-full);
     border: 1px solid var(--hi-color-border);
 
     &:not(:last-child):hover {

package/src/components/HkButton.scss

@@ -11,7 +11,7 @@
   font-weight: 600;
   line-height: 1;
   border: 1px solid transparent;
-  border-radius: var(--radius-sm);
+  border-radius: var(--radius-md, 8px);
   cursor: pointer;
   /* Longhand on purpose: the former comma-separated shorthand
    * `transition: background-color, ..., filter var(--duration-normal) ...`

package/src/components/HkCalendarHeatmap.scss

@@ -24,20 +24,57 @@
     color: var(--hi-color-muted);
   }
 
-  // w-max + auto margins center the whole calendar (rail included) on
-  // wide cards while letting narrow screens scroll from the left edge —
-  // auto margins resolve to zero when the content overflows, so mobile
-  // keeps its natural scroll origin.
+  // The strip's scroll host is HkScrollContainer — the root element carries
+  // .hk-scroll-container PLUS this class. The native horizontal bar is gone
+  // (2026-11-08: the battle heatmap's platform bar was the last one in the
+  // chart family and read as an embedded widget); hikari's auto-hiding
+  // overlay scrollbar is the only bar, and the container's align="center"
+  // centers the calendar while it fits and lets it scroll when it does not
+  // (the old auto-margin recipe now lives there — do NOT re-add overflow
+  // here: a native bar would come back and the overlay chrome would stack
+  // under it).
+  //
+  // padding-bottom is the OVERLAY TRACK's strip, not breathing room: the
+  // shared chrome is positioned against this root (bottom: 2px, height:
+  // 6px), so 8px of padding keeps the bar BELOW the Sunday rail instead of
+  // painting over it while the strip scrolls.
   &-scroll {
     margin-top: 12px;
+    padding-bottom: 8px;
+  }
+
+  // ── Legacy plain-form fallback (Rust/WASM renderer) ──────────────────
+  // The Vue form mounted the strip on HkScrollContainer (above), but the
+  // Rust/WASM CalendarHeatmap (packages/components/src/data/calendar_heatmap.rs)
+  // still renders the pre-migration plain -.hk-calendar-heatmap-scroll div and
+  // reads THIS sheet through the generated vue-mirror. The mirror sheet no
+  // longer owns the plain form's overflow/centering, so restore the previous
+  // horizontal scrolling here for the plain form ONLY: a Vue strip carries
+  // .hk-scroll-container on the same element and never matches, so the
+  // overlay chrome can never be re-claimed by this rule. The platform bar is
+  // suppressed (the chart family's no-native-bar invariant) — until the Rust
+  // renderer migrates onto the shared scroll-container script this form
+  // scrolls by wheel/touch/keyboard without a visible bar, the same
+  // bar-less trade the suppression-only scrollers take.
+  &-scroll:not(.hk-scroll-container) {
     overflow-x: auto;
-    padding-bottom: 4px;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    > .hk-calendar-heatmap-body {
+      margin-inline: auto;
+    }
   }
 
+  // width: max-content keeps the strip's natural extent (the container's
+  // aligner owns the centering, so no auto margins here — they would be
+  // resolved inside a box sized exactly to this element's content).
   &-body {
     display: flex;
     width: max-content;
-    margin-inline: auto;
     gap: 8px;
   }
 

package/src/components/HkCalendarHeatmap.test.tsx

@@ -1,9 +1,23 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, reactive } from "vue";
 
 import HkCalendarHeatmap from "./HkCalendarHeatmap";
 import { HEATMAP_LEVEL_OPACITY, shiftIso } from "./calendarHeatmap";
 
+const here = dirname(fileURLToPath(import.meta.url));
+
+/** Resolve after two animation frames: the scroll container coalesces its
+ *  sensing pass through the shared animationBus, whose rAF is scheduled one
+ *  frame ahead of the awaited callback. */
+const flushFrames = async () => {
+  await new Promise<void>((r) => requestAnimationFrame(() => r()));
+  await new Promise<void>((r) => requestAnimationFrame(() => r()));
+};
+
 const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
 
 function mount(node: ReturnType<typeof h>) {
@@ -381,3 +395,125 @@ describe("HkCalendarHeatmap", () => {
     }
   });
 });
+// ── Overlay scroll strip (2026-11-08) ────────────────────────────────────
+// The calendar body rides HkScrollContainer now: hikari's auto-hiding
+// overlay bar is the only bar, the strip opens focused on the NEWEST day
+// (anchor="end"), a host can opt back to the start, and a series
+// replacement re-parks at the end. happy-dom performs no layout, so the
+// strip's extent is stubbed and a dispatched scroll event runs the
+// container's coalesced sensing pass.
+describe("HkCalendarHeatmap overlay scroll strip", () => {
+  const stripOf = (c: HTMLElement): HTMLElement =>
+    c.querySelector<HTMLElement>(".hk-calendar-heatmap-scroll")!;
+  const viewportOf = (c: HTMLElement): HTMLElement =>
+    c.querySelector<HTMLElement>(".hk-scroll-container-viewport")!;
+
+  /** Mount a live render function (reactive props re-render — the range
+   *  switch test replaces the series). */
+  function mountLive(render: () => ReturnType<typeof h>): HTMLElement {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const app = createApp({ render });
+    app.mount(container);
+    mounts.push({ app, container });
+    return container;
+  }
+
+  /** Give the viewport a scrollable extent. Only the SIZES are stubbed:
+   *  the position stays happy-dom's settable scrollLeft, so the park's
+   *  write is observable exactly as a reader's scroll would be. */
+  function stubStrip(el: HTMLElement, scrollWidth: number, clientWidth: number) {
+    Object.defineProperties(el, {
+      scrollWidth: { configurable: true, get: () => scrollWidth },
+      clientWidth: { configurable: true, get: () => clientWidth },
+    });
+  }
+
+  it("mounts the overlay chrome over the strip, with the body still inside", () => {
+    const c = mount(
+      h(HkCalendarHeatmap, { days: daysFrom(CLEAN_HEAD_MON, 7), first: null }),
+    );
+    const strip = stripOf(c);
+    // The class contract survives (consumers style .hk-calendar-heatmap-scroll)
+    // and the element IS the scroll container root.
+    expect(strip.classList.contains("hk-scroll-container")).toBe(true);
+    // hikari's auto-hiding overlay track is the only bar…
+    expect(
+      c.querySelector('.hk-scrollbar-track[data-axis="horizontal"]'),
+    ).not.toBeNull();
+    // …the overflow glow is opted in (the strip hides days at its edges)…
+    expect(strip.getAttribute("data-overflow-glow")).toBe("true");
+    // …and the body still rides inside the scrolling viewport.
+    expect(viewportOf(c).querySelector(".hk-calendar-heatmap-body")).not.toBeNull();
+  });
+
+  it("keeps native overflow out of the Vue form (source contract)", () => {
+    const sheet = readFileSync(join(here, "HkCalendarHeatmap.scss"), "utf8");
+    // The -rail/-cells contract is pinned by calendarHeatmapRail.contract;
+    // this pin owns the STRIP rule the migration rewrote.
+    const scrollRule = sheet.match(/&-scroll \{[\s\S]*?\n  \}/)?.[0] ?? "";
+    expect(scrollRule, "the &-scroll rule still owns the strip box").toContain("&-scroll {");
+    // The Vue strip IS the HkScrollContainer root. Any overflow declaration
+    // in this rule would bring a NATIVE bar back on top of the overlay chrome
+    // (the 2026-11-08 regression this migration fixed).
+    expect(scrollRule).not.toMatch(/overflow/);
+    // The Rust/WASM renderer still renders the plain div, so the sheet keeps
+    // a fallback scroller for it — but ONLY off the container form, and the
+    // platform bar stays suppressed (the chart family's native-bar invariant;
+    // the Rust form is bar-less until it migrates onto the shared script).
+    const fallback =
+      sheet.match(/&-scroll:not\(\.hk-scroll-container\) \{[\s\S]*?\n  \}/)?.[0] ?? "";
+    expect(fallback, "the plain-form fallback must exist for the Rust mirror").not.toBe("");
+    expect(fallback).toContain("overflow-x: auto");
+    expect(fallback).toContain("scrollbar-width: none");
+    expect(fallback).toMatch(/&::-webkit-scrollbar\s*\{[\s\S]*?display:\s*none/);
+    expect(fallback, "the plain form keeps its centering").toContain("margin-inline: auto");
+  });
+
+  it("opens focused on the newest end (anchor=end parks the strip)", async () => {
+    const c = mount(
+      h(HkCalendarHeatmap, { days: daysFrom(CLEAN_HEAD_MON, 7), first: null }),
+    );
+    const viewport = viewportOf(c);
+    stubStrip(viewport, 300, 100);
+    viewport.dispatchEvent(new Event("scroll"));
+    await flushFrames();
+    expect(viewport.scrollLeft, "parked at max = 300 - 100").toBe(200);
+  });
+
+  it("forwards anchor=start so a host can opt back to the oldest end", async () => {
+    const c = mount(
+      h(HkCalendarHeatmap, {
+        days: daysFrom(CLEAN_HEAD_MON, 7),
+        first: null,
+        anchor: "start",
+      }),
+    );
+    const viewport = viewportOf(c);
+    stubStrip(viewport, 300, 100);
+    viewport.dispatchEvent(new Event("scroll"));
+    await flushFrames();
+    expect(viewport.scrollLeft).toBe(0);
+  });
+
+  it("re-parks at the end when the series is replaced (range switch)", async () => {
+    const state = reactive({ days: daysFrom(CLEAN_HEAD_MON, 7) });
+    const c = mountLive(() => h(HkCalendarHeatmap, { days: state.days, first: null }));
+    const viewport = viewportOf(c);
+    stubStrip(viewport, 300, 100);
+    viewport.dispatchEvent(new Event("scroll"));
+    await flushFrames();
+    expect(viewport.scrollLeft, "initial end focus").toBe(200);
+
+    // A reader scrolls back to the oldest day…
+    viewport.scrollLeft = 0;
+    // …then switches range: the new series must land on ITS newest end
+    // (the container's sticky anchor deliberately would not, since the
+    // reader is no longer parked — the days watcher is the deterministic
+    // re-park).
+    state.days = daysFrom("2025-11-01", 30);
+    await nextTick();
+    await nextTick();
+    expect(viewport.scrollLeft).toBe(200);
+  });
+});

package/src/components/HkCalendarHeatmap.tsx

@@ -1,6 +1,7 @@
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
 
 import { useI18n } from "../i18n/context";
+import HkScrollContainer from "./HkScrollContainer";
 import {
   calendarGrid,
   heatmapCellFill,
@@ -53,6 +54,18 @@ function fill(template: string, vars: Record<string, string | number>): string {
  * null = never). All math lives in ./calendarHeatmap (pure, pinned by
  * its own tests). The `toolbar` slot rides right of the legend — the
  * consumer's range tabs / controls belong there.
+ *
+ * Scrolling (2026-11-08): the calendar body rides HkScrollContainer
+ * (axis="horizontal", align="center") so the strip uses hikari's own
+ * auto-hiding overlay scrollbar and NEVER a native bar — a chart that
+ * paints a platform scrollbar reads as an embedded widget, and the
+ * battle heatmap's bar was the last one in the family. The container's
+ * `anchor` prop defaults to "end" here: the newest day is the reading
+ * interest, so the strip opens focused on it (and the `anchor` prop lets
+ * a host opt back to "start"), while the container's overflow glow marks
+ * the side that still hides days. A series replacement (range switch,
+ * refetch across midnight) re-parks at the end explicitly — see the
+ * days watcher.
  */
 export default defineComponent({
   name: "HkCalendarHeatmap",
@@ -72,6 +85,15 @@ export default defineComponent({
     /** Square-cell scale (GitHub-scale: a 53-week grid stays compact). */
     cellSize: { type: Number, default: 14 },
     cellGap: { type: Number, default: 3 },
+    /** Which end of the horizontal strip is focused first: the default
+     *  "end" opens on the NEWEST day (the reading interest — a year-wide
+     *  series otherwise starts at the oldest, faded edge, which is exactly
+     *  the "why is the chart empty-looking?" report this default answers).
+     *  Forwarded to HkScrollContainer's `anchor`; the days/range watcher
+     *  still re-parks at the end on a data change, so this prop changes the
+     *  INITIAL focus (and the sticky behaviour) rather than the re-park
+     *  contract. Pass "start" to restore the old GitHub-style origin. */
+    anchor: { type: String as PropType<"start" | "end">, default: "end" },
   },
   setup(props, { slots }) {
     const { t } = useI18n();
@@ -160,6 +182,38 @@ export default defineComponent({
         : undefined;
     });
 
+    // The strip's scroll host. Only the two handle members the heatmap
+    // uses are named (structural typing, the consumers' house convention):
+    // the end park and the sensing refresh.
+    const scroller = ref<{
+      scrollToEnd: (behavior?: ScrollBehavior) => void;
+      refresh: () => void;
+    } | null>(null);
+
+    /** Re-park at the newest day whenever the caller replaces the series —
+     *  a range switch (the toolbar tabs), a refetch across UTC midnight, a
+     *  totalled window. The container's `anchor="end"` only keeps a
+     *  viewport that ALREADY sits at the end, deliberately (it must never
+     *  fight a reader who scrolled back); switching range from mid-strip is
+     *  a data replacement, so "land on the newest" is made unconditional
+     *  here instead.
+     *
+     *  flush: "post" is load-bearing — the grid must have re-rendered (new
+     *  scrollWidth, possibly a narrower strip) before the target is
+     *  measured, or the park would aim at the previous range's extent.
+     *  refresh() then re-derives the overlay chrome from the same new
+     *  extent: a range that shrinks the series from overflowing to fitting
+     *  fires no scroll event, so without it the auto-hiding track could
+     *  stay painted over content that no longer overflows. */
+    watch(
+      () => props.days,
+      () => {
+        scroller.value?.scrollToEnd("auto");
+        scroller.value?.refresh();
+      },
+      { flush: "post" },
+    );
+
     return () => (
       <div class="hk-calendar-heatmap">
         {/* The legend row: the scale in the caller's one unit on the
@@ -191,10 +245,23 @@ export default defineComponent({
           {slots.toolbar?.({})}
         </div>
 
-        {/* The scroll wrapper centers the whole calendar (rail included)
-         * on wide cards while letting narrow screens scroll from the
-         * left edge (see the SCSS). */}
-        <div class="hk-calendar-heatmap-scroll">
+        {/* The strip rides HkScrollContainer: hikari's own auto-hiding
+         * overlay scrollbar is the ONLY bar (a native one would read as an
+         * embedded platform widget — the battle heatmap's last regression),
+         * align="center" keeps the whole calendar (rail included) centered
+         * while it fits and lets it scroll once it does not, and
+         * anchor="end" opens it focused on the newest day. The class stays
+         * on the container root, so consumers styling
+         * .hk-calendar-heatmap-scroll keep working; overflowGlow lights the
+         * side that still hides days. */}
+        <HkScrollContainer
+          ref={scroller}
+          class="hk-calendar-heatmap-scroll"
+          axis="horizontal"
+          align="center"
+          anchor={props.anchor}
+          overflowGlow
+        >
           <div class="hk-calendar-heatmap-body">
             {/* Weekday rail: the first (Monday) and last (Sunday) rows
              * carry the labels, the wowsp convention. */}
@@ -271,7 +338,7 @@ export default defineComponent({
               </div>
             </div>
           </div>
-        </div>
+        </HkScrollContainer>
       </div>
     );
   },

package/src/components/HkCard.scss

@@ -10,7 +10,7 @@
   background: color-mix(in srgb, rgb(var(--color-surface)) 70%, transparent);
   @include backdrop-filter(blur(var(--blur-md)));
   border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-lg, 12px);
   box-shadow: var(--shadow-elevated);
 }
 

package/src/components/HkCardList.scss

@@ -105,7 +105,7 @@
     top: 50%;
     transform: translateY(-50%);
     padding: 0.125rem;
-    border-radius: var(--radius-sm, 0.375rem);
+    border-radius: var(--radius-sm, 4px);
     background: rgb(var(--color-surface, 255 255 255));
     box-shadow: 0 2px 10px rgb(var(--color-border, 100 100 100) / 22%);
     opacity: 0;
@@ -137,7 +137,7 @@
   height: 1.625rem;
   padding: 0;
   border: 1px solid transparent;
-  border-radius: var(--radius-xs, 0.25rem);
+  border-radius: var(--radius-md, 8px);
   background: transparent;
   color: rgb(var(--color-muted, 108 108 108));
   cursor: pointer;