@celestia-island/hikari 0.55.78 → 0.55.80

package/package.json

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

package/src/components/HkAdminTablePage.test.tsx

@@ -0,0 +1,93 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import { HkAdminTablePage } from "./HkAdminTablePage";
+
+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();
+  }
+});
+
+const COLS = [{ key: "name", title: "Name" }];
+
+describe("HkAdminTablePage", () => {
+  it("forwards title/subtitle/dense to the page header", () => {
+    const c = mount(
+      h(HkAdminTablePage, {
+        title: "Webhooks", subtitle: "Inbound endpoints", dense: true,
+        rows: [{ name: "a" }], columns: COLS,
+      }),
+    );
+    expect(c.querySelector(".hk-page-header-title-text")?.textContent).toBe("Webhooks");
+    expect(c.querySelector(".hk-page-header-subtitle")?.textContent).toBe("Inbound endpoints");
+    expect((c.querySelector(".hk-page-header") as HTMLElement).className).toContain("hk-page-header-dense");
+    expect(c.querySelector("table")).toBeTruthy();
+  });
+
+  it("renders the filter slot between header and table", () => {
+    const c = mount(
+      h(HkAdminTablePage, {
+        title: "T", rows: [{ name: "a" }], columns: COLS,
+      }, {
+        filter: () => h("div", { class: "probe-filter" }, "filter-chrome"),
+      }),
+    );
+    const filter = c.querySelector(".hk-admin-table-page-filter .probe-filter");
+    expect(filter).toBeTruthy();
+    // filter sits above the table card, not inside it
+    expect(c.querySelector(".hk-card")?.contains(filter as Node)).toBe(false);
+  });
+
+  it("staleError renders a banner while rows stay on screen", () => {
+    const c = mount(
+      h(HkAdminTablePage, {
+        title: "T", staleError: "refresh failed", rows: [{ name: "a" }], columns: COLS,
+      }),
+    );
+    expect(c.textContent).toContain("refresh failed");
+    expect(c.querySelector("table")).toBeTruthy();
+  });
+
+  it("hard error still replaces the table", () => {
+    const c = mount(
+      h(HkAdminTablePage, {
+        title: "T", error: "boom", rows: [], columns: COLS,
+      }),
+    );
+    expect(c.textContent).toContain("boom");
+    expect(c.querySelector("table")).toBeNull();
+  });
+
+  it("empty state carries the empty-action slot", () => {
+    const c = mount(
+      h(HkAdminTablePage, {
+        title: "T", rows: [], columns: COLS, emptyTitle: "Nothing here",
+      }, {
+        "empty-action": () => h("button", { class: "probe-retry" }, "Retry"),
+      }),
+    );
+    expect(c.querySelector(".hk-empty-state")).toBeTruthy();
+    expect(c.querySelector(".probe-retry")).toBeTruthy();
+  });
+
+  it("shows the spinner while loading with no rows yet", () => {
+    const c = mount(
+      h(HkAdminTablePage, { title: "T", loading: true, rows: [], columns: COLS }),
+    );
+    expect(c.querySelector(".hk-spinner-wrapper")).toBeTruthy();
+    expect(c.querySelector("table")).toBeNull();
+  });
+});

package/src/components/HkAdminTablePage.tsx

@@ -13,19 +13,35 @@ export interface HTableColumn {
 }
 
 /**
- * CRUD table-page scaffold: HkPageHeader + loading spinner + error alert +
- * empty state + HTable. Slots:
+ * CRUD table-page scaffold: HkPageHeader + (filter slot) + loading
+ * spinner + error alert + empty state + HTable. Slots:
  * - `actions`      — header actions (e.g. a "Create" button)
+ * - `filter`       — filter chrome (HkFilterBar) between header and table
  * - `cell-<key>`   — per-column cell templates, forwarded to HTable
+ * - `empty-action` — action inside the empty state (Retry, …)
  * - `create-modal` — create dialog, rendered after the table
  * - `edit-modal`   — edit dialog, rendered after the table
+ *
+ * Error model: `error` is the hard failure (no data — replaces the
+ * table), while `staleError` renders a banner ABOVE rows that are still
+ * on screen after a failed refresh, so a failed reload never hides data
+ * the user already had.
  */
 export const HkAdminTablePage = defineComponent({
   name: "HkAdminTablePage",
   props: {
     title: { type: String, default: "" },
+    /** Forwarded to the page header. */
+    subtitle: { type: String, default: undefined },
+    /** Forwarded to the page header. */
+    icon: { type: Object, default: undefined },
+    /** Compact page header variant. */
+    dense: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },
     error: { type: String as PropType<string | undefined>, default: undefined },
+    /** Refresh failed while rows are still on screen — banner, not a
+     *  replacement of the table. */
+    staleError: { type: String as PropType<string | undefined>, default: undefined },
     rows: { type: Array as PropType<Record<string, unknown>[]>, required: true },
     columns: { type: Array as PropType<HTableColumn[]>, required: true },
     rowKey: { type: String, default: "id" },
@@ -37,10 +53,16 @@ export const HkAdminTablePage = defineComponent({
     return () => {
       const { t } = useI18n();
       const emptyTitle = props.emptyTitle || t("hikari::tablePage.emptyTitle", "No data");
+      // Extracted to an identifier: JSX children given as an inline object
+      // literal are not normalized to slots the way a bound one is (the
+      // chest retrySlots idiom this mirrors relies on the identifier form).
+      const emptySlots = slots["empty-action"]
+        ? { action: () => slots["empty-action"]?.() }
+        : undefined;
       return (
         <div>
           {props.title ? (
-            <HkPageHeader title={props.title}>
+            <HkPageHeader title={props.title} subtitle={props.subtitle} icon={props.icon} dense={props.dense}>
               {{ actions: () => slots.actions?.() }}
             </HkPageHeader>
           ) : slots.actions ? (
@@ -48,12 +70,21 @@ export const HkAdminTablePage = defineComponent({
               {slots.actions()}
             </div>
           ) : null}
+          {slots.filter ? <div class="hk-admin-table-page-filter">{slots.filter()}</div> : null}
+
+          {props.staleError ? <HAlert message={props.staleError} /> : null}
           {props.error ? (
             <HAlert message={props.error} />
           ) : props.loading && !props.rows.length ? (
             <HSpinner center />
           ) : !props.rows.length ? (
-            <HEmptyState boxed title={emptyTitle} description={props.emptyDescription} />
+            <HEmptyState
+              boxed
+              title={emptyTitle}
+              description={props.emptyDescription}
+            >
+              {emptySlots}
+            </HEmptyState>
           ) : (
             <HCard padded={false}>
               <HTable columns={props.columns} rows={props.rows} rowKey={props.rowKey}>

package/src/components/HkBoard.tsx

@@ -98,6 +98,11 @@ export interface BoardEdgeInput {
   width?: number;
 }
 
+// Ink colors ride INLINE STYLES beside the stroke presentation attribute:
+// var() references in a presentation attribute are not substituted on every
+// engine (Firefox drops the whole declaration → stroke:none → invisible
+// edges; svgwg#1031, 2025-11: browsers still disagree). Same contract as
+// HkGaugeRing/HkProgressRing.
 const DEFAULT_INK = "rgb(var(--color-primary) / 38%)";
 
 export default defineComponent({
@@ -426,6 +431,7 @@ export default defineComponent({
                 class="hk-board-edge"
                 d={e.d}
                 stroke={e.ink}
+                style={{ stroke: e.ink }}
                 stroke-width={e.width}
                 stroke-dasharray={e.dashed ? "6 5" : undefined}
                 fill="none"

package/src/components/HkCardList.scss

@@ -0,0 +1,68 @@
+/* HkCardList / HkListRow — the standard card list anatomy. */
+
+.hk-card-list {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+
+  /* hairline dividers between rows (the CSS-native divide-y) */
+  > .hk-list-row + .hk-list-row {
+    border-top: 1px solid rgb(var(--color-border) / 10%);
+  }
+}
+
+.hk-list-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12, 0.75rem);
+  padding: var(--space-12, 0.75rem) var(--space-16, 1rem);
+  min-width: 0;
+  text-align: left;
+}
+
+.hk-list-row-clickable {
+  cursor: pointer;
+  transition: background-color var(--duration-normal, 0.3s) ease;
+
+  &:hover {
+    background: rgb(var(--color-text) / 4%);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: -2px;
+  }
+}
+
+.hk-list-row-main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.hk-list-row-title {
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 600;
+  color: rgb(var(--color-text));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hk-list-row-subtitle {
+  font-size: var(--text-xs, 0.75rem);
+  color: rgb(var(--color-muted));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hk-list-row-trailing {
+  margin-left: auto;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+}

package/src/components/HkCardList.test.tsx

@@ -0,0 +1,141 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, createCommentVNode, defineComponent, h } from "vue";
+
+import { HkCardList, HkListRow } from "./HkCardList";
+
+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();
+  }
+});
+
+const FakeIcon = defineComponent({
+  name: "FakeIcon",
+  props: { size: { type: [Number, String], default: 24 } },
+  setup: (props) => () => h("svg", { "data-fake-icon": "", width: props.size, height: props.size }),
+});
+
+describe("HkCardList", () => {
+  it("renders rows inside an unpadded card list landmark", () => {
+    const c = mount(
+      h(HkCardList, () => h(HkListRow, { title: "A" })),
+    );
+    expect(c.querySelector(".hk-card")).toBeTruthy();
+    expect(c.querySelector(".hk-card-body-unpadded")).toBeTruthy();
+    const list = c.querySelector(".hk-card-list") as HTMLElement;
+    expect(list.getAttribute("role")).toBe("list");
+    expect(list.querySelectorAll(".hk-list-row")).toHaveLength(1);
+  });
+
+  it("renders the empty slot instead of the list when provided without rows", () => {
+    const c = mount(h(HkCardList, null, { empty: () => h("p", { class: "probe-empty" }, "empty") }));
+    expect(c.querySelector(".hk-card-list")).toBeNull();
+    expect(c.querySelector(".probe-empty")?.textContent).toBe("empty");
+  });
+
+  it("falls back to the empty slot when the default slot renders no rows (v-for idiom)", () => {
+    const rows: Array<{ name: string }> = [];
+    const c = mount(
+      h(HkCardList, null, {
+        default: () => rows.map((r) => h(HkListRow, { title: r.name })),
+        empty: () => h("p", { class: "probe-empty" }, "empty"),
+      }),
+    );
+    expect(c.querySelector(".hk-card-list")).toBeNull();
+    expect(c.querySelector(".probe-empty")?.textContent).toBe("empty");
+  });
+
+  it("falls back to the empty slot when the default slot renders null (v-if idiom)", () => {
+    const c = mount(
+      h(HkCardList, null, {
+        default: () => null,
+        empty: () => h("p", { class: "probe-empty" }, "empty"),
+      }),
+    );
+    expect(c.querySelector(".hk-card-list")).toBeNull();
+    expect(c.querySelector(".probe-empty")).toBeTruthy();
+  });
+
+  it("falls back to the empty slot when the default slot is only a comment placeholder", () => {
+    const c = mount(
+      h(HkCardList, null, {
+        default: () => [createCommentVNode("v-if", true)],
+        empty: () => h("p", { class: "probe-empty" }, "empty"),
+      }),
+    );
+    expect(c.querySelector(".hk-card-list")).toBeNull();
+    expect(c.querySelector(".probe-empty")).toBeTruthy();
+  });
+
+  it("keeps the list when rows exist even with the empty slot present", () => {
+    const c = mount(
+      h(HkCardList, null, {
+        default: () => [h(HkListRow, { title: "A" })],
+        empty: () => h("p", { class: "probe-empty" }, "empty"),
+      }),
+    );
+    expect(c.querySelector(".hk-card-list")).toBeTruthy();
+    expect(c.querySelectorAll(".hk-list-row")).toHaveLength(1);
+    expect(c.querySelector(".probe-empty")).toBeNull();
+  });
+});
+
+describe("HkListRow", () => {
+  it("renders icon chip, title, subtitle and the trailing slot", () => {
+    const c = mount(
+      h(HkListRow, { icon: FakeIcon, iconTone: "success", title: "gpu-1", subtitle: "192.168.2.10" }, {
+        trailing: () => h("span", { class: "probe-badge" }, "online"),
+      }),
+    );
+    const row = c.querySelector(".hk-list-row") as HTMLElement;
+    expect(row.getAttribute("role")).toBe("listitem");
+    expect(row.querySelector(".hk-icon-chip-tone-success svg[data-fake-icon]")).toBeTruthy();
+    expect(row.querySelector(".hk-list-row-title")?.textContent).toBe("gpu-1");
+    expect(row.querySelector(".hk-list-row-subtitle")?.textContent).toBe("192.168.2.10");
+    expect(row.querySelector(".hk-list-row-trailing .probe-badge")?.textContent).toBe("online");
+  });
+
+  it("keeps the default slot beside title/subtitle inside the main column", () => {
+    const c = mount(
+      h(HkListRow, { title: "T" }, { default: () => h("div", { class: "probe-extra" }, "extra") }),
+    );
+    expect(c.querySelector(".hk-list-row-main .probe-extra")).toBeTruthy();
+  });
+
+  it("activates on Enter/Space when clickable, ignoring bubbled keys", async () => {
+    const clicks: string[] = [];
+    const c = mount(
+      h(HkListRow, {
+        title: "T",
+        clickable: true,
+        onClick: (e: MouseEvent | KeyboardEvent) => clicks.push("key" in e ? e.key : "mouse"),
+      }),
+    );
+    const row = c.querySelector(".hk-list-row") as HTMLElement;
+    expect(row.getAttribute("tabindex")).toBe("0");
+    for (const key of ["Enter", " "]) {
+      row.dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }));
+      await Promise.resolve();
+    }
+    expect(clicks).toEqual(["Enter", " "]);
+  });
+
+  it("is not interactive without clickable", () => {
+    const c = mount(h(HkListRow, { title: "T" }));
+    const row = c.querySelector(".hk-list-row") as HTMLElement;
+    expect(row.className).not.toContain("hk-list-row-clickable");
+    expect(row.getAttribute("tabindex")).toBeNull();
+  });
+});

package/src/components/HkCardList.tsx

@@ -0,0 +1,113 @@
+import { Comment, defineComponent, type Component, type PropType, type VNode } from "vue";
+
+import HkCard from "./HkCard";
+import { HkIconChip } from "./HkIconChip";
+import type { StatTone } from "./HkStatCard";
+import "./HkCardList.scss";
+
+/**
+ * Whether a default slot actually rendered any row. Testing
+ * `slots.default` for truthiness is not enough: the canonical template
+ * idiom (`<HkListRow v-for>` plus `<template #empty>`) always provides a
+ * default slot whose v-for renders zero vnodes, and a `v-if` row renders
+ * a comment placeholder — both would otherwise show an empty bordered
+ * card where the empty state belongs.
+ */
+function renderedRows(nodes: unknown): boolean {
+  if (nodes == null || nodes === false || nodes === "") return false;
+  if (Array.isArray(nodes)) return nodes.some((n) => renderedRows(n));
+  if (typeof nodes === "object") return (nodes as VNode).type !== Comment;
+  return true; // non-empty text content
+}
+
+/**
+ * HkCardList — the standard card list: an unpadded HkCard whose body is
+ * a `role="list"` column of HkListRow entries separated by hairlines.
+ *
+ * This anatomy is what the console family calls "card rows, never raw
+ * ul/ol" (the host's UnoCSS setup has no preflight, so `<ul>` indents
+ * 40px): a bordered card surface, rows at `px-4 py-3` with a 12px gutter,
+ * hairline dividers between them. It was copy-pasted across ten views
+ * before becoming a component.
+ *
+ * ```tsx
+ * <HkCardList>
+ *   <HkListRow icon={Server} title={row.name} subtitle={row.url}
+ *              trailing={() => <HkBadge>{row.status}</HkBadge>} />
+ * </HkCardList>
+ * ```
+ */
+export const HkCardList = defineComponent({
+  name: "HkCardList",
+  setup(_props, { slots }) {
+    return () => {
+      const rows = slots.default?.();
+      return (
+        <HkCard padded={false}>
+          {slots.empty && !renderedRows(rows) ? (
+            slots.empty()
+          ) : (
+            <div class="hk-card-list" role="list">
+              {rows}
+            </div>
+          )}
+        </HkCard>
+      );
+    };
+  },
+});
+
+/**
+ * HkListRow — one entry of an HkCardList: an optional tone-tinted icon
+ * chip, a main column (title / subtitle / free-form default slot), and a
+ * trailing slot pinned to the right edge (badges, switches, actions).
+ *
+ * The row is a list item, not a button — set `clickable` when the whole
+ * row drills through, which adds the cursor/focus/hover contract the
+ * stat cards use.
+ */
+export const HkListRow = defineComponent({
+  name: "HkListRow",
+  props: {
+    /** Leading icon — rendered through the standard HkIconChip. */
+    icon: { type: Object as PropType<Component>, default: undefined },
+    iconTone: { type: String as PropType<StatTone>, default: "primary" },
+    title: { type: String, default: undefined },
+    subtitle: { type: String, default: undefined },
+    /** Whole-row click (drill-through). */
+    clickable: { type: Boolean, default: false },
+  },
+  emits: { click: (_e: MouseEvent | KeyboardEvent) => true },
+  setup(props, { emit, slots }) {
+    return () => (
+      <div
+        class={["hk-list-row", props.clickable && "hk-list-row-clickable"]}
+        role="listitem"
+        tabindex={props.clickable ? 0 : undefined}
+        onKeydown={
+          props.clickable
+            ? (e: KeyboardEvent) => {
+                // role listitem + tabindex promises keyboard activation
+                // only when the row itself is made interactive; keys
+                // bubbling from focusable children are left alone.
+                if (e.target !== e.currentTarget) return;
+                if (e.key !== "Enter" && e.key !== " ") return;
+                e.preventDefault();
+                emit("click", e);
+              }
+            : undefined
+        }
+        onClick={props.clickable ? (e: MouseEvent) => emit("click", e) : undefined}
+
+      >
+        {props.icon ? <HkIconChip icon={props.icon} tone={props.iconTone} /> : null}
+        <div class="hk-list-row-main">
+          {props.title ? <div class="hk-list-row-title">{props.title}</div> : null}
+          {props.subtitle ? <div class="hk-list-row-subtitle">{props.subtitle}</div> : null}
+          {slots.default?.()}
+        </div>
+        {slots.trailing ? <div class="hk-list-row-trailing">{slots.trailing()}</div> : null}
+      </div>
+    );
+  },
+});

package/src/components/HkIconChip.scss

@@ -0,0 +1,27 @@
+/* HkIconChip — the standard leading icon chip.
+ * The tone rules mirror HkStatCard's chip-icon palette verbatim so the
+ * two never drift apart. */
+.hk-icon-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md, 0.5rem);
+  flex-shrink: 0;
+}
+
+.hk-icon-chip-md {
+  width: var(--space-28, 1.75rem);
+  height: var(--space-28, 1.75rem);
+}
+
+.hk-icon-chip-sm {
+  width: var(--space-24, 1.5rem);
+  height: var(--space-24, 1.5rem);
+}
+
+.hk-icon-chip-tone-success { background: rgb(var(--color-success) / 12%); color: rgb(var(--color-success)); }
+.hk-icon-chip-tone-warning { background: rgb(var(--color-warning) / 12%); color: rgb(var(--color-warning)); }
+.hk-icon-chip-tone-error { background: rgb(var(--color-error) / 12%); color: rgb(var(--color-error)); }
+.hk-icon-chip-tone-info { background: rgb(var(--color-info, rgb(var(--color-primary))) / 12%); color: rgb(var(--color-info, rgb(var(--color-primary)))); }
+.hk-icon-chip-tone-primary { background: rgb(var(--color-primary) / 12%); color: rgb(var(--color-primary)); }
+.hk-icon-chip-tone-muted { background: rgb(var(--color-muted) / 12%); color: rgb(var(--color-muted)); }

package/src/components/HkIconChip.test.tsx

@@ -0,0 +1,56 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h } from "vue";
+
+import { HkIconChip } from "./HkIconChip";
+
+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();
+  }
+});
+
+const FakeIcon = defineComponent({
+  name: "FakeIcon",
+  props: { size: { type: [Number, String], default: 24 } },
+  setup: (props) => () => h("svg", { "data-fake-icon": "", width: props.size, height: props.size }),
+});
+
+describe("HkIconChip", () => {
+  it("renders the icon at the md box size by default", () => {
+    const c = mount(h(HkIconChip, { icon: FakeIcon }));
+    const chip = c.querySelector(".hk-icon-chip") as HTMLElement;
+    expect(chip).toBeTruthy();
+    expect(chip.className).toContain("hk-icon-chip-md");
+    expect(chip.className).toContain("hk-icon-chip-tone-primary");
+    expect(chip.getAttribute("aria-hidden")).toBe("true");
+    expect(chip.querySelector("svg[data-fake-icon]")?.getAttribute("width")).toBe("15");
+  });
+
+  it("renders the sm box with a 13px glyph", () => {
+    const c = mount(h(HkIconChip, { icon: FakeIcon, size: "sm" }));
+    const chip = c.querySelector(".hk-icon-chip") as HTMLElement;
+    expect(chip.className).toContain("hk-icon-chip-sm");
+    expect(chip.querySelector("svg[data-fake-icon]")?.getAttribute("width")).toBe("13");
+  });
+
+  it("carries the tone class for every palette entry", () => {
+    for (const tone of ["success", "warning", "error", "info", "primary", "muted"] as const) {
+      const c = mount(h(HkIconChip, { icon: FakeIcon, tone }));
+      expect((c.querySelector(".hk-icon-chip") as HTMLElement).className).toContain(
+        `hk-icon-chip-tone-${tone}`,
+      );
+    }
+  });
+});

package/src/components/HkIconChip.tsx

@@ -0,0 +1,42 @@
+import { defineComponent, h, type Component, type PropType } from "vue";
+
+import type { StatTone } from "./HkStatCard";
+import "./HkIconChip.scss";
+
+/**
+ * HkIconChip — the standard leading icon chip: a small rounded square
+ * painted in a 10% tint of the tone color with the tone color as the
+ * glyph ink. This anatomy was copy-pasted as inline styles across the
+ * consumers (roster rows, card headers, stat strips) before it became a
+ * component; the tone palette is the one HkStatCard owns, so chips always
+ * match the stat card's health colors.
+ *
+ * Purely decorative by contract — the chip is aria-hidden and the icon
+ * meaning must be conveyed by adjacent text (row title, card label).
+ *
+ * ```tsx
+ * <HkIconChip icon={Cpu} tone="info" />
+ * <HkIconChip icon={Coins} size="sm" />
+ * ```
+ */
+export const HkIconChip = defineComponent({
+  name: "HkIconChip",
+  props: {
+    /** Icon component (lucide-vue-next style). */
+    icon: { type: Object as PropType<Component>, required: true },
+    /** Tone drives both the tint background and the glyph ink. */
+    tone: { type: String as PropType<StatTone>, default: "primary" },
+    /** sm = 24px box / 13px glyph, md = 28px box / 15px glyph. */
+    size: { type: String as PropType<"sm" | "md">, default: "md" },
+  },
+  setup(props) {
+    return () => (
+      <span
+        class={["hk-icon-chip", `hk-icon-chip-${props.size}`, `hk-icon-chip-tone-${props.tone}`]}
+        aria-hidden="true"
+      >
+        {h(props.icon, { size: props.size === "sm" ? 13 : 15 })}
+      </span>
+    );
+  },
+});

package/src/components/HkMinimap.tsx

@@ -269,6 +269,7 @@ export default defineComponent({
             height={b.bounds.h * s}
             rx={2}
             fill={b.color}
+            style={{ fill: b.color, stroke: b.color }}
             opacity="0.28"
             stroke={b.color}
             stroke-width="0.6"
@@ -305,6 +306,7 @@ export default defineComponent({
                   cy={hubP[1]}
                   r={3}
                   fill="rgb(var(--color-primary))"
+                  style={{ fill: "rgb(var(--color-primary))" }}
                   filter="drop-shadow(0 0 2px rgb(var(--color-primary) / 0.6))"
                 />
               )}
@@ -315,6 +317,7 @@ export default defineComponent({
                 height={Math.max(1, vr.h)}
                 fill="none"
                 stroke="rgb(var(--color-primary))"
+                style={{ stroke: "rgb(var(--color-primary))" }}
                 stroke-width="1"
                 stroke-dasharray="3 2"
                 rx="2"