@celestia-island/hikari 0.55.231 → 0.55.233

package/package.json

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

package/src/components/HkAboutBody.test.tsx

@@ -16,6 +16,9 @@ import { HkAboutBody } from "./HkAboutModal";
  * - the default slot appends host content after the copyright footer
  * - without a backdrop factory no backdrop layer renders (a body host may
  *   not want the decorative canvas at all)
+ * - a version row's `metaTone: "danger"` reaches the pill as
+ *   `data-tone="danger"`, and an EMPTY `value` drops the mono number cell
+ *   entirely (the "component not wired up" row shows only its red label)
  *
  * (Repo test convention: raw createApp + document queries, no
  * @vue/test-utils dependency.)
@@ -121,4 +124,36 @@ describe("HkAboutBody extraction", () => {
 
     expect(document.body.querySelector(".s-about-modal-backdrop")).toBeNull();
   });
+
+  it("tints a version row's meta pill with the danger tone", async () => {
+    mountBody({
+      componentVersions: [
+        { label: "Edge engine", value: "1.4.0", meta: "Not connected", metaTone: "danger" },
+      ],
+    });
+    await flush();
+
+    const pill = query(".s-about-modal-row-meta");
+    expect(pill.getAttribute("data-tone")).toBe("danger");
+    expect(pill.textContent).toBe("Not connected");
+  });
+
+  it("drops the mono number cell when a row's value is empty", async () => {
+    mountBody({
+      componentVersions: [
+        // A host with nothing to report names the state in `meta` and leaves
+        // `value` empty (the "not wired up" row).
+        { label: "Edge engine", value: "", meta: "Not connected", metaTone: "danger" },
+      ],
+    });
+    await flush();
+
+    // No blank tabular slot: the mono cell is absent, not just empty.
+    expect(document.body.querySelector(".s-about-modal-row-number")).toBeNull();
+    // The label and the pill still carry the row.
+    expect(query(".s-about-modal-row-label").textContent).toContain("Edge engine");
+    const pill = query(".s-about-modal-row-meta");
+    expect(pill.textContent).toBe("Not connected");
+    expect(pill.getAttribute("data-tone")).toBe("danger");
+  });
 });

package/src/components/HkAboutModal.scss

@@ -228,6 +228,14 @@
   color: rgb(var(--color-warning));
 }
 
+// Red state: the component is not wired up / unreachable. The row then
+// carries no version at all, so this pill is the whole value cell.
+.s-about-modal-row-meta[data-tone="danger"] {
+  border-color: rgb(var(--color-error) / 32%);
+  background: rgb(var(--color-error) / 10%);
+  color: rgb(var(--color-error));
+}
+
 /* ── Links: licenses, external links, credits names and filings ───────── */
 
 .s-about-modal-chips {

package/src/components/HkAboutModal.styles.test.ts

@@ -29,6 +29,36 @@ function classesFrom(source: string): Set<string> {
   return found;
 }
 
+/**
+ * Body of one compiled rule, by exact selector (Sass drops the quotes around
+ * an attribute value: `[data-face=plain]`).
+ *
+ * The selector must compile exactly once: a second copy — say inside a media
+ * query, or a later override — would otherwise stay invisible here while
+ * still winning the cascade.
+ */
+function ruleBody(sheet: string, selector: string): string {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const matches = [...sheet.matchAll(new RegExp(`${escaped}\\s*\\{([^}]*)\\}`, "g"))];
+  expect(matches, `${selector} compiles exactly once`).toHaveLength(1);
+  return matches[0]?.[1] ?? "";
+}
+
+/**
+ * One declaration's value inside a rule body.
+ *
+ * A property declared twice is a failure rather than a coincidence: CSS
+ * resolves a repeat last-wins, so a first-match reader would report the stale
+ * value and happily accept the override.
+ */
+function declaration(body: string, property: string): string {
+  const values = [
+    ...body.matchAll(new RegExp(`(?:^|;)\\s*${property}\\s*:([^;]*)`, "g")),
+  ].map((match) => match[1]!.trim());
+  expect(values.length, `${property} is declared at most once`).toBeLessThanOrEqual(1);
+  return values[0] ?? "";
+}
+
 describe("HkAboutModal stylesheet contract", () => {
   const tsx = readFileSync(resolve(componentDir, "HkAboutModal.tsx"), "utf8");
   const scss = readFileSync(resolve(componentDir, "HkAboutModal.scss"), "utf8");
@@ -67,36 +97,6 @@ describe("HkAboutModal stylesheet contract", () => {
    * into chips. These assertions read the compiled declarations instead.
    */
   describe("link faces", () => {
-    /**
-     * Body of one compiled rule, by exact selector (Sass drops the quotes
-     * around an attribute value: `[data-face=plain]`).
-     *
-     * The selector must compile exactly once: a second copy — say inside a
-     * media query, or a later override — would otherwise stay invisible here
-     * while still winning the cascade.
-     */
-    function ruleBody(sheet: string, selector: string): string {
-      const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      const matches = [...sheet.matchAll(new RegExp(`${escaped}\\s*\\{([^}]*)\\}`, "g"))];
-      expect(matches, `${selector} compiles exactly once`).toHaveLength(1);
-      return matches[0]?.[1] ?? "";
-    }
-
-    /**
-     * One declaration's value inside a rule body.
-     *
-     * A property declared twice is a failure rather than a coincidence: CSS
-     * resolves a repeat last-wins, so a first-match reader would report the
-     * stale value and happily accept the override.
-     */
-    function declaration(body: string, property: string): string {
-      const values = [
-        ...body.matchAll(new RegExp(`(?:^|;)\\s*${property}\\s*:([^;]*)`, "g")),
-      ].map((match) => match[1]!.trim());
-      expect(values.length, `${property} is declared at most once`).toBeLessThanOrEqual(1);
-      return values[0] ?? "";
-    }
-
     const PLAIN = ".s-about-modal-link[data-face=plain]";
 
     it("keeps the plain face a bare text link", () => {
@@ -229,4 +229,32 @@ describe("HkAboutModal stylesheet contract", () => {
       expect(iconAt).toBeGreaterThan(plainAt);
     });
   });
+
+  /**
+   * Row-meta tones are self-contained rules, so the class-name checks above
+   * cannot see them: reverting a tone to `neutral` (or dropping its rule)
+   * leaves the `data-tone` attribute intact and the runtime suite green while
+   * the pill silently loses its colour — the whole point of the tone.
+   */
+  describe("row meta tones", () => {
+    const TONE = (tone: string) => `.s-about-modal-row-meta[data-tone=${tone}]`;
+
+    it("paints the danger tone in the theme's error colour", () => {
+      const danger = ruleBody(css, TONE("danger"));
+      expect(danger, "the danger-tone rule must survive compilation").not.toBe("");
+      expect({
+        borderColor: declaration(danger, "border-color"),
+        background: declaration(danger, "background"),
+        color: declaration(danger, "color"),
+      }).toEqual({
+        // Same geometry as the positive / caution tones, only the channel
+        // differs — `--color-error` is the theme's existing danger token.
+        // (Dart Sass compiles the seed-relative form without spaces around
+        // the slash.)
+        borderColor: "rgb(var(--color-error)/32%)",
+        background: "rgb(var(--color-error)/10%)",
+        color: "rgb(var(--color-error))",
+      });
+    });
+  });
 });

package/src/components/HkAboutModal.tsx

@@ -73,12 +73,19 @@ export interface HAboutCredit {
  * rendered as a separate muted pill so it never melts into the version
  * string. `metaTone` tints that pill when the tag carries a status
  * meaning (e.g. a production environment).
+ *
+ * `danger` is the red "not wired up / unreachable" state: a host whose
+ * component (e.g. an edge master node engine) has no version to report
+ * passes an EMPTY `value` and names the state in `meta` with
+ * `metaTone: "danger"`. The empty value then renders the pill alone —
+ * the mono number cell is dropped rather than leaving a blank tabular
+ * slot — so the row reads as one red label instead of `unknown`.
  */
 export interface HAboutComponentVersion {
   label: string;
   value: string;
   meta?: string;
-  metaTone?: "neutral" | "positive" | "caution";
+  metaTone?: "neutral" | "positive" | "caution" | "danger";
 }
 
 /**
@@ -288,7 +295,14 @@ export const HkAboutBody = defineComponent({
                 <div class="s-about-modal-row" key={component.label}>
                   <span class="s-about-modal-row-label">{component.label}</span>
                   <span class="s-about-modal-row-value">
-                    <span class="s-about-modal-row-number">{component.value}</span>
+                    {/* An empty value means the host has no version to
+                        report (e.g. the component is not wired up) and
+                        carries the state in `meta` instead — skip the mono
+                        cell so the row does not open with a blank tabular
+                        slot and a stray gap. */}
+                    {component.value && (
+                      <span class="s-about-modal-row-number">{component.value}</span>
+                    )}
                     {component.meta && (
                       <span
                         class="s-about-modal-row-meta"

package/src/components/HkCalendarHeatmap.scss

@@ -0,0 +1,90 @@
+// HkCalendarHeatmap — GitHub-style calendar heatmap anatomy.
+//
+// Self-sufficient styling (the component self-sufficiency guard): every
+// class lives here, no host atomic/utility layer. The dynamic geometry
+// (cell size, gap, week-column count, rail row rhythm) stays inline in
+// the component; this sheet owns the static layout and typography.
+
+.hk-calendar-heatmap {
+  // The legend row: scale on the LEFT, toolbar slot on the RIGHT.
+  &-head {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 16px;
+    row-gap: 8px;
+  }
+
+  &-legend {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    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.
+  &-scroll {
+    margin-top: 12px;
+    overflow-x: auto;
+    padding-bottom: 4px;
+  }
+
+  &-body {
+    display: flex;
+    width: max-content;
+    margin-inline: auto;
+    gap: 8px;
+  }
+
+  // Weekday rail: the first (Monday) and last (Sunday) rows carry the
+  // labels (the wowsp convention); sticky so it survives horizontal
+  // scroll on narrow screens.
+  &-rail {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    padding-right: 2px;
+    font-size: 10px;
+    line-height: 14px;
+    color: var(--hi-color-muted);
+    background: var(--hi-color-surface);
+
+    > span {
+      white-space: nowrap;
+    }
+  }
+
+  &-cells {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // Month markers, one slot per week column; labels overflow their
+  // 14px column into the empty cells ahead (the GitHub convention — a
+  // month marker is always followed by unmarked columns), so no
+  // truncating: a clipped "O…" tells nothing.
+  &-markers {
+    display: grid;
+    margin-bottom: 4px;
+    font-size: 10px;
+    line-height: 12px;
+    color: var(--hi-color-muted);
+
+    > span {
+      white-space: nowrap;
+    }
+  }
+
+  // The grid itself: cells flow column-first into 7 rows.
+  &-grid {
+    display: grid;
+  }
+}

package/src/components/HkCalendarHeatmap.test.tsx

@@ -0,0 +1,240 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, reactive } from "vue";
+
+import HkCalendarHeatmap from "./HkCalendarHeatmap";
+import { HEATMAP_LEVEL_OPACITY, todayIso } from "./calendarHeatmap";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+/** A Monday, NOT the 1st — the leading-partial-month shape. */
+const MID_MONTH_MON = "2025-10-27";
+/** A Monday AND the 1st — the clean head shape. */
+const CLEAN_HEAD_MON = "2025-12-01";
+
+const daysFrom = (start: string, count: number, value = 0) =>
+  Array.from({ length: count }, (_, i) => {
+    const d = new Date(`${start}T00:00:00Z`);
+    d.setUTCDate(d.getUTCDate() + i);
+    return { date: d.toISOString().slice(0, 10), value };
+  });
+
+describe("HkCalendarHeatmap", () => {
+  it("renders the legend (less → more, five swatches) and the grid anatomy", () => {
+    const c = mount(
+      h(HkCalendarHeatmap, {
+        days: daysFrom(CLEAN_HEAD_MON, 7),
+        first: null,
+        unit: "度",
+      }),
+    );
+    const grid = c.querySelector('[data-testid="hk-calendar-heatmap"]') as HTMLElement;
+    expect(grid).toBeTruthy();
+    expect(grid.getAttribute("role")).toBe("img");
+    // One row of days pads into exactly one week.
+    expect(grid.getAttribute("aria-label")).toContain("1");
+    const legend = c.querySelector('[data-testid="hk-calendar-heatmap-legend"]');
+    expect(legend?.textContent).toContain("Less");
+    expect(legend?.textContent).toContain("More");
+    expect(c.querySelectorAll("[data-legend-level]")).toHaveLength(
+      HEATMAP_LEVEL_OPACITY.length,
+    );
+    // One week of days, all level 0 (no consumption): plain muted cells.
+    expect(grid.querySelectorAll('[data-level="0"]')).toHaveLength(7);
+  });
+
+  it("suppresses the leading month marker when the window starts mid-month", async () => {
+    const c = mount(
+      h(HkCalendarHeatmap, {
+        // Trailing-October tail + November: the partial October head is
+        // unlabeled, November's Monday carries the only marker.
+        days: daysFrom(MID_MONTH_MON, 10),
+        first: null,
+      }),
+    );
+    await nextTick();
+    const markers = c.querySelectorAll(
+      ".hk-calendar-heatmap-markers > span",
+    ) as NodeListOf<HTMLElement>;
+    expect(markers.length).toBeGreaterThanOrEqual(2);
+    expect(markers[0].textContent).toBe(""); // partial October — suppressed
+    expect(markers[1].textContent).not.toBe(""); // November — labeled
+  });
+
+  it("shows the leading month marker when the grid's first column opens its month", async () => {
+    const c = mount(
+      h(HkCalendarHeatmap, {
+        days: daysFrom(CLEAN_HEAD_MON, 9),
+        first: null,
+      }),
+    );
+    await nextTick();
+    const markers = c.querySelectorAll(
+      ".hk-calendar-heatmap-markers > span",
+    ) as NodeListOf<HTMLElement>;
+    expect(markers[0].textContent).not.toBe(""); // Dec 1 — labeled
+  });
+
+  it("renders gap cells hatched and inert (no tooltip, no level claim)", () => {
+    // A one-day series AT today, anchored at first = today: the head
+    // padding hatches as "before", the tail as "after" — both phases in
+    // one grid, all deterministic against the real clock.
+    const today = todayIso();
+    const c = mount(
+      h(HkCalendarHeatmap, {
+        days: [{ date: today, value: 5 }],
+        first: today,
+      }),
+    );
+    const grid = c.querySelector('[data-testid="hk-calendar-heatmap"]') as HTMLElement;
+    const gaps = grid.querySelectorAll("[data-gap]") as NodeListOf<HTMLElement>;
+    expect(gaps.length).toBeGreaterThan(0);
+    const phases = new Set(
+      Array.from(gaps, (gap) => gap.getAttribute("data-gap")),
+    );
+    expect(phases.has("before")).toBe(true);
+    expect(phases.has("after")).toBe(true);
+    for (const gap of gaps) {
+      expect(gap.getAttribute("aria-hidden")).toBe("true");
+      expect(gap.getAttribute("title")).toBeNull();
+      expect(gap.style.pointerEvents).toBe("none");
+    }
+  });
+
+  it("tooltips day cells with the unit when one is given", () => {
+    const c = mount(
+      h(HkCalendarHeatmap, {
+        days: daysFrom(CLEAN_HEAD_MON, 1, 5),
+        first: null,
+        unit: "度",
+      }),
+    );
+    const cell = c.querySelector('[data-level]:not([data-level="0"])') as HTMLElement;
+    expect(cell).toBeTruthy();
+    // The UTC zone is explicit (R2: a negative-offset host must not
+    // land the tooltip a day off) — the date is TZ-deterministic.
+    expect(cell.getAttribute("title")).toContain("Dec 1, 2025");
+    expect(cell.getAttribute("title")).toContain("5");
+    expect(cell.getAttribute("title")).toContain("度");
+  });
+
+  it("wires the max prop into the cell buckets, not just data-max", () => {
+    const c = mount(
+      h(HkCalendarHeatmap, {
+        // Peak 10 in-window; the pinned max 100 flattens both days to
+        // level 1 (R2 S1: the prop was a dead wire to data-max).
+        days: [{ date: CLEAN_HEAD_MON, value: 10 }, { date: "2025-12-02", value: 1 }],
+        first: null,
+        max: 100,
+      }),
+    );
+    const grid = c.querySelector('[data-testid="hk-calendar-heatmap"]') as HTMLElement;
+    expect(grid.getAttribute("data-max")).toBe("100");
+    expect(grid.querySelectorAll('[data-level="1"]')).toHaveLength(2);
+    expect(grid.querySelectorAll('[data-level="4"]')).toHaveLength(0);
+  });
+
+  it("tooltips day cells without a dangling separator when unitless", () => {
+    const c = mount(
+      h(HkCalendarHeatmap, {
+        days: daysFrom(CLEAN_HEAD_MON, 1, 5),
+        first: null,
+      }),
+    );
+    const cell = c.querySelector('[data-level]:not([data-level="0"])') as HTMLElement;
+    // The unitless title ends at the count — no trailing "· <empty>".
+    expect(cell.getAttribute("title")).toMatch(/· 5$/);
+  });
+
+  it("labels the weekday rail on the first and last rows only", () => {
+    const c = mount(
+      h(HkCalendarHeatmap, { days: daysFrom(CLEAN_HEAD_MON, 7), first: null }),
+    );
+    const rail = c.querySelector(".hk-calendar-heatmap-rail") as HTMLElement;
+    const rows = rail.querySelectorAll(":scope > span") as NodeListOf<HTMLElement>;
+    expect(rows).toHaveLength(7);
+    expect(rows[0].textContent).not.toBe(""); // Monday
+    expect(rows[6].textContent).not.toBe(""); // Sunday
+    expect(rows[3].textContent).toBe(""); // middle rows unlabeled
+  });
+
+  it("renders the toolbar slot right of the legend", () => {
+    const Toolbar = defineComponent({
+      name: "FakeToolbar",
+      setup: () => () => h("div", { "data-fake-toolbar": "" }, "tabs"),
+    });
+    const c = mount(
+      h(HkCalendarHeatmap, { days: daysFrom(CLEAN_HEAD_MON, 7), first: null }, {
+        toolbar: () => h(Toolbar),
+      }),
+    );
+    expect(c.querySelector("[data-fake-toolbar]")?.textContent).toBe("tabs");
+  });
+
+  it("renders an empty grid without markers for an empty series", () => {
+    const c = mount(h(HkCalendarHeatmap, { days: [], first: null }));
+    const grid = c.querySelector('[data-testid="hk-calendar-heatmap"]') as HTMLElement;
+    expect(grid).toBeTruthy();
+    expect(grid.querySelectorAll("[data-level]")).toHaveLength(0);
+    expect(c.querySelectorAll(".hk-calendar-heatmap-markers > span")).toHaveLength(0);
+  });
+
+  it("re-takes today per recompute — a refetch across UTC midnight un-gaps the new today cell", async () => {
+    // R2 S2 + R3 变异留证: today frozen at setup rendered the next
+    // day as an "after" gap even after the caller refetched a series
+    // that includes it. A recompute (the refetch's new `days`) must
+    // re-evaluate todayIso() — the crossed-midnight day becomes a day.
+    // (A rerender with NO dep change legitimately keeps the cached
+    // cells — computed semantics, nothing changed.)
+    vi.useFakeTimers();
+    try {
+      vi.setSystemTime(new Date("2025-12-01T10:00:00Z"));
+      // Dense series through the mount-time today: Fri 11-28 .. Mon 12-01.
+      const days = daysFrom("2025-11-28", 4);
+      const state = reactive({ days });
+      // The vnode is built INSIDE the render so the reactive `days`
+      // re-renders — the shared eager mount helper would capture one
+      // static vnode.
+      const container = document.createElement("div");
+      document.body.appendChild(container);
+      const app = createApp({
+        render: () => h(HkCalendarHeatmap, { days: state.days, first: null, unit: "度" }),
+      });
+      app.mount(container);
+      mounts.push({ app, container });
+      const grid = container.querySelector('[data-testid="hk-calendar-heatmap"]') as HTMLElement;
+      const tomorrowAtMount = grid.querySelector('[data-date="2025-12-02"]') as HTMLElement;
+      expect(tomorrowAtMount.getAttribute("data-gap")).toBe("after");
+
+      // Cross UTC midnight; the refetched series now includes the new
+      // today (12-02, 3 度) — a new array instance, so the cells
+      // computed recomputes and re-takes today.
+      vi.setSystemTime(new Date("2025-12-02T10:00:00Z"));
+      state.days = [...days, { date: "2025-12-02", value: 3 }];
+      // Two ticks: the parent's render → the child's props update → the
+      // child's re-render land in sequence.
+      await nextTick();
+      await nextTick();
+      const nowToday = grid.querySelector('[data-date="2025-12-02"]') as HTMLElement;
+      expect(nowToday.getAttribute("data-gap")).toBeNull();
+      expect(nowToday.getAttribute("data-level")).toBe("4");
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});