@celestia-island/hikari 0.55.273 → 0.55.275

package/package.json

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

package/src/components/HkBarChart.scss

@@ -40,15 +40,41 @@
     font-variant-numeric: tabular-nums;
   }
 
+  // Above-bar value label (showValues) — the same 10-unit voice as the
+  // axis, a step stronger so the count reads first.
+  &__value {
+    fill: rgb(var(--color-text) / 0.75);
+    font-size: 10px;
+    text-anchor: middle;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // Slot mark (a bar's icon — the supership Star): a nested <svg> whose
+  // ink follows currentColor, so lucide's stroke picks up the axis voice
+  // without per-icon wiring.
+  &__xmark {
+    color: rgb(var(--color-text) / 0.55);
+  }
+
   &__bar {
     fill: rgb(var(--color-primary));
     outline: none;
     cursor: pointer;
-    transition: filter 0.16s ease;
+    transition: filter 0.16s ease, opacity 0.16s ease;
 
     &:hover,
-    &:focus-visible {
+    &:focus-visible,
+    // Dim-pair head (activeIndex): keeps the hover lift while the
+    // pointer may sit anywhere — the host pairs bars by wiring
+    // activeIndex from the hover events.
+    &[data-hot] {
       filter: brightness(1.08) saturate(1.15);
     }
+
+    // Dim-pair follower: every other bar recedes, same ease family as
+    // the lift so the pair breathes together.
+    &[data-dim] {
+      opacity: 0.45;
+    }
   }
 }

package/src/components/HkBarChart.test.tsx

@@ -27,6 +27,10 @@ const BARS = [
   { label: "Wed", value: 0 },
 ];
 
+/** A tiny stand-in for a lucide glyph: any icon FUNCTION draws the
+ * 24-unit box the slot-mark wrapper maps onto its 12-unit mark. */
+const StarGlyph = () => <rect x="0" y="0" width="24" height="24" />;
+
 describe("HkBarChart", () => {
   it("renders one labeled bar per bucket and skips zero buckets' paths", () => {
     const el = mount(<HkBarChart bars={BARS} />);
@@ -59,4 +63,126 @@ describe("HkBarChart", () => {
       "weekly playtime",
     );
   });
+
+  // ── showValues ───────────────────────────────────────────────────
+
+  it("showValues renders formatValue above each bar and skips zero buckets", () => {
+    const el = mount(
+      <HkBarChart bars={BARS} showValues formatValue={(v) => `${Math.round(v / 3600)}h`} />,
+    );
+    const values = [...el.querySelectorAll(".hk-bar-chart__value")];
+    // The zero bucket (Wed) carries no label — the wowsp tier histogram's
+    // old labelY-null behavior: an empty slot never shows a stray "0".
+    expect(values.map((t) => t.textContent)).toEqual(["1h", "2h"]);
+    // Each label's baseline sits exactly 5 units above its bar's top —
+    // the path's y coordinates sit at odd indices ("M x0 y L x0 y… Q x y
+    // x y …"), and their minimum IS the top.
+    const topOf = (d: string) => {
+      const nums = d.split(/[\sMLQAZ]+/).filter(Boolean).map(Number);
+      return Math.min(...nums.filter((_, i) => i % 2 === 1));
+    };
+    const tops = [...el.querySelectorAll(".hk-bar-chart__bar")].map((p) =>
+      topOf(p.getAttribute("d") ?? ""),
+    );
+    expect(Number(values[0].getAttribute("y"))).toBeCloseTo(tops[0] - 5, 6);
+    expect(Number(values[1].getAttribute("y"))).toBeCloseTo(tops[1] - 5, 6);
+  });
+
+  it("showValues off by default — old usage renders no value labels", () => {
+    const el = mount(<HkBarChart bars={BARS} />);
+    expect(el.querySelectorAll(".hk-bar-chart__value")).toHaveLength(0);
+  });
+
+  // ── hover event + activeIndex dim-pair ───────────────────────────
+
+  it("emits hover on bar mouseenter / mouseleave with focus / blur parity", () => {
+    const hovers: (number | null)[] = [];
+    const el = mount(<HkBarChart bars={BARS} onHover={(i) => hovers.push(i)} />);
+    const bars = [...el.querySelectorAll(".hk-bar-chart__bar")];
+    bars[0].dispatchEvent(new Event("mouseenter"));
+    bars[1].dispatchEvent(new Event("focus"));
+    bars[1].dispatchEvent(new Event("blur"));
+    bars[0].dispatchEvent(new Event("mouseleave"));
+    expect(hovers).toEqual([0, 1, null, null]);
+  });
+
+  it("activeIndex carries data-hot on the paired bar and data-dim on the others", () => {
+    const el = mount(<HkBarChart bars={BARS} activeIndex={0} />);
+    const bars = [...el.querySelectorAll(".hk-bar-chart__bar")];
+    expect(bars[0].getAttribute("data-hot")).toBe("true");
+    expect(bars[0].hasAttribute("data-dim")).toBe(false);
+    expect(bars[1].getAttribute("data-dim")).toBe("true");
+    expect(bars[1].hasAttribute("data-hot")).toBe(false);
+  });
+
+  it("defaults to no pair — no data-hot / data-dim anywhere", () => {
+    const el = mount(<HkBarChart bars={BARS} />);
+    expect(el.querySelector("[data-hot], [data-dim]")).toBeNull();
+  });
+
+  // ── icon slot mark (the supership Star) ──────────────────────────
+
+  it("renders a resolvable icon in place of the x-label text, sized and centered", () => {
+    const el = mount(
+      <HkBarChart
+        bars={[
+          { label: "10", value: 5, icon: StarGlyph },
+          { label: "11", value: 7 },
+        ]}
+      />,
+    );
+    const marks = [...el.querySelectorAll(".hk-bar-chart__xmark")];
+    expect(marks).toHaveLength(1);
+    // The nested-svg wrapper maps the 24-unit lucide box onto a 12-unit
+    // mark centered on slot 0 (centerX 182) at the x-label's optical
+    // center (baselineY 196 + 4).
+    expect(marks[0].getAttribute("viewBox")).toBe("0 0 24 24");
+    expect(marks[0].getAttribute("width")).toBe("12");
+    expect(marks[0].getAttribute("height")).toBe("12");
+    expect(marks[0].getAttribute("x")).toBe("176");
+    expect(marks[0].getAttribute("y")).toBe("200");
+    // The icon swapped out that slot's text; the other slot keeps its text.
+    expect([...el.querySelectorAll(".hk-bar-chart__x")].map((t) => t.textContent)).toEqual([
+      "11",
+    ]);
+    // The bar's aria string keeps the TEXT label, icon or not.
+    expect(el.querySelector(".hk-bar-chart__bar")?.getAttribute("aria-label")).toContain("10");
+  });
+
+  it("normalizes icons like HkPillToggleGroup — vnode passes through, junk falls back to text", () => {
+    const el = mount(
+      <HkBarChart
+        bars={[
+          { label: "a", value: 3, icon: <rect x="4" y="4" width="16" height="16" /> },
+          { label: "b", value: 4, icon: "not-an-icon" },
+        ]}
+      />,
+    );
+    // The prebuilt vnode rides the mark wrapper; the junk string does not
+    // blank the slot — it falls back to the text label.
+    expect(el.querySelectorAll(".hk-bar-chart__xmark")).toHaveLength(1);
+    expect(el.querySelectorAll(".hk-bar-chart__xmark rect")).toHaveLength(1);
+    expect([...el.querySelectorAll(".hk-bar-chart__x")].map((t) => t.textContent)).toEqual(["b"]);
+  });
+
+  // ── back-compat: the wowsp PlaytimeView usage surface ────────────
+
+  it("old-props usage renders exactly the old surface", () => {
+    const el = mount(
+      <HkBarChart
+        bars={BARS.map((b) => ({ label: b.label, value: b.value, hint: b.hint }))}
+        width={480}
+        formatValue={(v) => `${Math.round(v / 3600)}h`}
+      />,
+    );
+    expect(el.querySelectorAll(".hk-bar-chart__bar")).toHaveLength(2);
+    expect(el.querySelectorAll(".hk-bar-chart__value")).toHaveLength(0);
+    expect(el.querySelectorAll(".hk-bar-chart__xmark")).toHaveLength(0);
+    expect(el.querySelector("[data-hot], [data-dim]")).toBeNull();
+    expect([...el.querySelectorAll(".hk-bar-chart__x")].map((t) => t.textContent)).toEqual([
+      "Mon",
+      "Tue",
+      "Wed",
+    ]);
+  });
 });

package/src/components/HkBarChart.tsx

@@ -1,8 +1,43 @@
-import { computed, defineComponent, type PropType } from "vue";
+import { computed, defineComponent, h, type PropType, type VNode } from "vue";
 
 import { barLayout, type BarSlot } from "./barChart";
 import "./HkBarChart.scss";
 
+/** One bar entry. */
+export interface HkBarChartBar {
+  /** Text label under the slot — also the bar's aria string, even when
+   * an `icon` replaces the visible text. */
+  label: string;
+  value: number;
+  /** Hover/focus hint; defaults to `label: formatValue(value)`. */
+  hint?: string;
+  /** Optional slot mark rendered IN PLACE of the x-label text (the tier
+   * histogram's supership Star). Accepts EITHER a component (a lucide
+   * icon function, a defineComponent options object) or a prebuilt
+   * vnode — normalized exactly like HkPillToggleGroup's icon handling;
+   * anything else falls back to the text label (never a blank slot). */
+  icon?: unknown;
+}
+
+/** Normalize a bar icon to a renderable vnode — the HkPillToggleGroup
+ * convention verbatim: a component (function or options object) is
+ * instantiated with `h`; a prebuilt vnode passes through; anything
+ * else (string, number, null) renders nothing, and the caller falls
+ * back to the text label. */
+function resolveIcon(icon: unknown): VNode | null {
+  if (icon == null) return null;
+  if (typeof icon === "object") return icon as VNode;
+  if (typeof icon === "function") return h(icon as Parameters<typeof h>[0]);
+  return null;
+}
+
+/** The slot-mark box (wowsp's tier-star convention): lucide glyphs draw
+ * in a 24×24 box, so the wrapper nested <svg> maps that box onto a
+ * 12-unit mark centered on the x-label's optical center — the 10-unit
+ * text's baseline is baselineY + 14 and its glyph box spans
+ * ≈ baselineY + 6 … + 14, so a mark from +4 to +16 shares its center. */
+const BAR_MARK = { glyphBox: 24, size: 12, top: 4 } as const;
+
 /**
  * HkBarChart — one bar per bucket over a hand-drawn declarative SVG (no
  * chart library; the HkTreemap/HkCalendarHeatmap dependency-free line).
@@ -16,6 +51,15 @@ import "./HkBarChart.scss";
  * wowsp delegated-tooltip hook reads — hikari itself renders no native
  * title bubble).
  *
+ * The tier histogram's needs ride along as OPTIONAL props (wowsp
+ * ShipDistCharts): `showValues` paints formatValue(value) above each
+ * bar (empty slots carry no label), `hover` + `activeIndex` implement a
+ * dim-pair — the HOST wires activeIndex from the hover events, the bar
+ * at activeIndex carries `data-hot` and every other bar `data-dim` —
+ * and a bar's `icon` replaces its x-label text (the supership slot's
+ * nested-svg Star, positioned/sized here from the 24-unit lucide box).
+ * Defaults reproduce the old output exactly.
+ *
  * Dumb by design: the caller owns aggregation and passes the settled
  * buckets in. All geometry lives in ./barChart (pure, pinned by its own
  * tests).
@@ -27,7 +71,7 @@ export default defineComponent({
   props: {
     /** The bars, in axis order (oldest → newest for trend charts). */
     bars: {
-      type: Array as PropType<{ label: string; value: number; hint?: string }[]>,
+      type: Array as PropType<HkBarChartBar[]>,
       required: true,
     },
     /** Frame size (the SVG viewBox; CSS scales it). */
@@ -42,10 +86,25 @@ export default defineComponent({
     ariaLabel: { type: String, default: null },
     /** Rendered when every bucket is zero / the array is empty. */
     emptyText: { type: String, default: "No data" },
+    /** Paint formatValue(value) as a small label ABOVE each bar. Skip
+     * rule: bars with value <= 0 carry NO label (their slot stays an
+     * empty slot) — the wowsp tier histogram's old labelY-null behavior,
+     * so an unplayed bucket never shows a stray "0". */
+    showValues: { type: Boolean, default: false },
+    /** The dim-pair head: when set, the bar at this index carries
+     * `data-hot` (kept hover lift) and every other bar carries
+     * `data-dim` (≈0.45 opacity). The HOST implements the pair by
+     * wiring this from the `hover` events; null (the default) draws no
+     * pair at all. */
+    activeIndex: { type: Number as PropType<number | null>, default: null },
   },
   emits: {
     /** A bar was clicked (its bucket index). */
     select: (index: number) => typeof index === "number",
+    /** The pointer entered a bar (its bucket index) or left it / the
+     * keyboard focus moved onto or off one (focus/blur parity — null
+     * when the hover ended). */
+    hover: (index: number | null) => typeof index === "number" || index === null,
   },
   setup(props, { emit }) {
     const layout = computed(() =>
@@ -60,7 +119,12 @@ export default defineComponent({
         props.ariaLabel ??
         props.bars.map((b) => `${b.label} ${props.formatValue(b.value)}`).join(", "),
     );
-    const hintOf = (b: { label: string; value: number; hint?: string }, i: number): string =>
+    /** The dim-pair head, normalized: anything but a number (undefined,
+     * null, garbage) means "no pair". */
+    const active = computed(() =>
+      typeof props.activeIndex === "number" ? props.activeIndex : null,
+    );
+    const hintOf = (b: HkBarChartBar, i: number): string =>
       b.hint ?? `${b.label}: ${props.formatValue(b.value)}`;
 
     return () => {
@@ -90,23 +154,58 @@ export default defineComponent({
               </text>
             </g>
           ))}
-          {l.bars.map((s: BarSlot, i: number) => (
-            <g key={i}>
-              {s.path ? (
-                <path
-                  class="hk-bar-chart__bar"
-                  d={s.path}
-                  data-hint={hintOf(props.bars[i], i)}
-                  aria-label={hintOf(props.bars[i], i)}
-                  tabindex={0}
-                  onClick={() => emit("select", i)}
-                />
-              ) : null}
-              <text class="hk-bar-chart__x" x={s.centerX} y={l.baselineY + 14}>
-                {props.bars[i].label}
-              </text>
-            </g>
-          ))}
+          {l.bars.map((s: BarSlot, i: number) => {
+            const bar = props.bars[i];
+            const mark = resolveIcon(bar.icon);
+            return (
+              <g key={i}>
+                {s.path ? (
+                  <path
+                    class="hk-bar-chart__bar"
+                    d={s.path}
+                    data-hint={hintOf(bar, i)}
+                    aria-label={hintOf(bar, i)}
+                    tabindex={0}
+                    data-hot={active.value === i || undefined}
+                    data-dim={(active.value !== null && active.value !== i) || undefined}
+                    onClick={() => emit("select", i)}
+                    onMouseenter={() => emit("hover", i)}
+                    onMouseleave={() => emit("hover", null)}
+                    onFocus={() => emit("hover", i)}
+                    onBlur={() => emit("hover", null)}
+                  />
+                ) : null}
+                {props.showValues && s.labelY != null ? (
+                  <text class="hk-bar-chart__value" x={s.centerX} y={s.labelY}>
+                    {props.formatValue(bar.value)}
+                  </text>
+                ) : null}
+                {mark != null ? (
+                  // The slot mark (the supership's Star): a nested <svg>
+                  // wrapper maps the icon's 24-unit glyph box onto a
+                  // 12-unit mark centered on the x-label's optical
+                  // center — positioned HERE so the consumer passes a
+                  // bare lucide component and knows no geometry. Ink
+                  // (currentColor) lives in SCSS.
+                  <svg
+                    class="hk-bar-chart__xmark"
+                    x={s.centerX - BAR_MARK.size / 2}
+                    y={l.baselineY + BAR_MARK.top}
+                    width={BAR_MARK.size}
+                    height={BAR_MARK.size}
+                    viewBox={`0 0 ${BAR_MARK.glyphBox} ${BAR_MARK.glyphBox}`}
+                    aria-hidden="true"
+                  >
+                    {mark}
+                  </svg>
+                ) : (
+                  <text class="hk-bar-chart__x" x={s.centerX} y={l.baselineY + 14}>
+                    {bar.label}
+                  </text>
+                )}
+              </g>
+            );
+          })}
         </svg>
       );
     };

package/src/components/HkPersistentToast.scss

@@ -65,6 +65,10 @@ button.hk-persistent-toast {
   color: rgb(var(--color-muted));
 }
 
+.hk-persistent-toast--success .hk-persistent-toast__icon {
+  color: rgb(var(--color-success));
+}
+
 .hk-persistent-toast__label {
   overflow: hidden;
   text-overflow: ellipsis;

package/src/components/HkPersistentToast.test.tsx

@@ -111,6 +111,15 @@ describe("HkPersistentToast inert default", () => {
     expect(container.querySelector(".hk-persistent-toast__spinner")).not.toBeNull();
   });
 
+  it("renders a static icon for the success tone", () => {
+    const { container } = mount({ props: { tone: "success", label: "Saved" } });
+    const c = chip(container);
+    expect(c.classList.contains("hk-persistent-toast--success")).toBe(true);
+    // Success renders a static lucide icon like the other non-loading tones.
+    expect(container.querySelector(".hk-persistent-toast__spinner")).toBeNull();
+    expect(c.querySelector("svg")).not.toBeNull();
+  });
+
   it("renders the ✕ sibling button only when dismissible", () => {
     const onDismiss = vi.fn();
     const { container } = mount({ props: { label: "x", dismissible: true }, onDismiss });

package/src/components/HkPersistentToast.tsx

@@ -1,4 +1,4 @@
-import { AlertTriangle, Info, X } from "lucide-vue-next";
+import { AlertTriangle, Check, Info, X } from "lucide-vue-next";
 import {
   computed,
   defineComponent,
@@ -15,7 +15,7 @@ import { useI18n } from "../i18n/context";
 import "./HkPersistentToast.scss";
 import { ensureOverlayRoot } from "../overlay/overlayRoot";
 
-export type PersistentToastTone = "loading" | "info" | "warning" | "error";
+export type PersistentToastTone = "loading" | "info" | "warning" | "error" | "success";
 
 /** Viewport gutter the detail card clamps into (mirror of
  *  --viewport-gutter's desktop value; the card is chrome-adjacent and
@@ -251,6 +251,8 @@ export default defineComponent({
               <span class="hk-persistent-toast__spinner" aria-hidden="true" />
             ) : props.tone === "error" || props.tone === "warning" ? (
               <AlertTriangle size={12} class="hk-persistent-toast__icon" aria-hidden="true" />
+            ) : props.tone === "success" ? (
+              <Check size={12} class="hk-persistent-toast__icon" aria-hidden="true" />
             ) : (
               <Info size={12} class="hk-persistent-toast__icon" aria-hidden="true" />
             )}