@celestia-island/hikari 0.55.232 → 0.55.233

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.232",
+  "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"