@celestia-island/hikari 0.48.0 → 0.49.1

package/package.json

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

package/src/components/HkAboutModal.scss

@@ -228,7 +228,7 @@
   color: rgb(var(--color-warning));
 }
 
-/* ── Chips: licenses and external links ───────────────────────────────── */
+/* ── Links: licenses, external links, credits names and filings ───────── */
 
 .s-about-modal-chips {
   display: flex;
@@ -237,10 +237,10 @@
   gap: var(--space-8, 0.5rem);
 }
 
-// One chip group (licenses / links). Must span the chips block — inside an
+// One link group (licenses / links). Must span the chips block — inside an
 // `align-items: center` column a plain block would shrink to fit-content and
-// a long chip list would then wrap against that collapsed width instead of
-// the modal's.
+// a long list would then wrap against that collapsed width instead of the
+// modal's.
 .s-about-modal-links {
   width: 100%;
 }
@@ -250,10 +250,12 @@
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--space-6, 0.375rem);
+  // The row's own size, so it holds for either face: `plain` links inherit
+  // it (chips set their own).
+  font-size: var(--text-xs, 0.75rem);
 }
 
-// Ghost pills: every link in this dialog is a tag, so they share one face —
-// credits names, licenses, external links and the legal filings.
+// Chip face (default) — the ghost pill.
 .s-about-modal-link {
   padding: var(--space-2, 0.125rem) var(--space-10, 0.625rem);
   border: 1px solid var(--border-subtle, rgb(100 100 100 / 12%));
@@ -268,6 +270,55 @@
     background var(--duration-short, 0.15s) ease;
 }
 
+// Plain face: a bare text link (user direction 2026-09-14 — the organization
+// / author names, the site domains and the filing numbers read as ordinary
+// sentence text, not as tags). No frame, no pill padding, no underline; the
+// hover colour shift is the entire affordance. Colour and size are inherited
+// so the link melts into the run it sits in — the credits sentence
+// (full-contrast text) or a muted link row.
+//
+// The face never has to out-shout the base `:hover` rules below: this rule
+// (0,2,0) beats the chip base (0,1,0), and the `[data-face="plain"]:hover` /
+// `:active` rules (0,3,0) are what keep the hover surface-free and the colour
+// shift alive. Drop those two and the plain face silently regains the chip's
+// tinted hover box.
+.s-about-modal-link[data-face="plain"] {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  vertical-align: baseline;
+}
+
+// A link carrying an icon is one aligned unit (the mark, then the optional
+// label) — icon-only links are how the GitHub mark rides beside the domains.
+// Same specificity as the `plain` block above, so source order decides: this
+// one wins the tie, which is what turns an icon-only link into inline-flex
+// instead of the plain `inline`.
+.s-about-modal-link.s-about-modal-link-has-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4, 0.25rem);
+  vertical-align: middle;
+}
+
+.s-about-modal-link-icon {
+  flex-shrink: 0;
+}
+
+// An icon-only link carries no text to click, so the mark buys its target
+// width here; its height is whatever the row's line box gives it (the mark is
+// centred in that), which keeps a row of plain links exactly as tall as its
+// text.
+.s-about-modal-link[data-face="plain"].s-about-modal-link-has-icon {
+  padding: 0 var(--space-6, 0.375rem);
+}
+
 // Chips inside the credits sentence sit in a text run: keep them on the
 // baseline and let the surrounding spaces do the spacing.
 .s-about-modal-credit-link {
@@ -282,10 +333,21 @@
   color: rgb(var(--color-primary));
 }
 
+// The plain face owns no surface to tint — only the glyph changes colour.
+.s-about-modal-link[data-face="plain"]:hover {
+  background: none;
+  color: rgb(var(--color-primary));
+}
+
 .s-about-modal-link:active {
   background: var(--c-primary-subtle, rgb(var(--color-primary) / 8%));
 }
 
+.s-about-modal-link[data-face="plain"]:active {
+  background: none;
+  color: var(--c-primary-strong, rgb(var(--color-primary) / 40%));
+}
+
 .s-about-modal-link:focus-visible {
   outline: none;
   box-shadow:
@@ -295,7 +357,7 @@
 
 /* ── Legal footer: filing links + copyright ───────────────────────────── */
 
-// Filing numbers are long, so the legal chips render a notch smaller than
+// Filing numbers are long, so the legal row renders a notch smaller than
 // the license / link rows.
 .s-about-modal-footer-link {
   font-size: var(--text-2xs, 0.625rem);
@@ -307,6 +369,7 @@
   justify-content: center;
   gap: var(--space-6, 0.375rem);
   margin-top: calc(-1 * var(--space-4, 0.25rem));
+  font-size: var(--text-2xs, 0.625rem);
 }
 
 .s-about-modal-footer {

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

@@ -55,4 +55,140 @@ describe("HkAboutModal stylesheet contract", () => {
       .sort();
     expect(dead, "stylesheet selectors with no matching element").toEqual([]);
   });
+
+  /**
+   * Declaration-level guards for the two link faces.
+   *
+   * The checks above only compare class *names*, so the whole
+   * `[data-face="plain"]` contract — the part the user actually asked for —
+   * was invisible to them: emptying that rule (Dart Sass then drops the
+   * selector entirely), re-adding a pill padding, or losing `font-size:
+   * inherit` all left the suite green while turning bare text links back
+   * 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", () => {
+      const plain = ruleBody(css, PLAIN);
+      expect(plain, "the plain-face rule must survive compilation").not.toBe("");
+      expect({
+        padding: declaration(plain, "padding"),
+        border: declaration(plain, "border"),
+        radius: declaration(plain, "border-radius"),
+        background: declaration(plain, "background"),
+        // Inherited colour and size are what let a name melt into the credits
+        // sentence (13px) or a domain into the 12px link row, instead of
+        // keeping the chip's own 12px scale.
+        color: declaration(plain, "color"),
+        fontSize: declaration(plain, "font-size"),
+        lineHeight: declaration(plain, "line-height"),
+      }).toEqual({
+        padding: "0",
+        border: "0",
+        radius: "0",
+        background: "none",
+        color: "inherit",
+        fontSize: "inherit",
+        lineHeight: "inherit",
+      });
+      // Both faces promise "no underline" (these rows are text with a click
+      // target, not document links): the base rule turns the UA underline off
+      // and the plain face must not bring one back.
+      expect(declaration(ruleBody(css, ".s-about-modal-link"), "text-decoration")).toBe("none");
+      expect(declaration(plain, "text-decoration")).not.toContain("underline");
+    });
+
+    it("keeps the plain hover a colour shift, not a tinted box", () => {
+      const hover = ruleBody(css, `${PLAIN}:hover`);
+      expect(declaration(hover, "background")).toBe("none");
+      expect(declaration(hover, "color")).toBe("rgb(var(--color-primary))");
+      expect(declaration(ruleBody(css, `${PLAIN}:active`), "background")).toBe("none");
+    });
+
+    it("keeps an icon link one aligned unit with a visible mark", () => {
+      const iconLink = ruleBody(css, ".s-about-modal-link.s-about-modal-link-has-icon");
+      expect(declaration(iconLink, "display")).toBe("inline-flex");
+      expect(declaration(iconLink, "align-items")).toBe("center");
+      // The wrapper is what the alignment hangs off — a hidden or collapsing
+      // one takes the mark with it, leaving an icon-only link as an invisible
+      // target (the failure the empty-entry filter exists to prevent).
+      const iconWrap = ruleBody(css, ".s-about-modal-link-icon");
+      expect(declaration(iconWrap, "flex-shrink")).toBe("0");
+      expect(declaration(iconWrap, "display")).not.toBe("none");
+      // Icon-only: the mark carries no text, so the padding is the target.
+      expect(declaration(ruleBody(css, `${PLAIN}.s-about-modal-link-has-icon`), "padding")).toBe(
+        "0 var(--space-6, 0.375rem)",
+      );
+    });
+
+    it("sizes every row the plain face inherits from", () => {
+      // The plain face inherits, so the rows own the type scale the chips used
+      // to bring themselves (16px body text otherwise): the credits sentence
+      // supplies the names' 13px, the link row the domains' 12px, the legal
+      // row the filings' 10px.
+      expect(declaration(ruleBody(css, ".s-about-modal-credits-line"), "font-size")).toBe(
+        "var(--text-sm, 0.8125rem)",
+      );
+      expect(declaration(ruleBody(css, ".s-about-modal-links-list"), "font-size")).toBe(
+        "var(--text-xs, 0.75rem)",
+      );
+      expect(declaration(ruleBody(css, ".s-about-modal-footer-links"), "font-size")).toBe(
+        "var(--text-2xs, 0.625rem)",
+      );
+    });
+
+    it("keeps the pill the hosts that ask for nothing already ship", () => {
+      // The plain face is additive: a consumer passing `{ label, href }` must
+      // keep exactly the tag it had, so the chip's geometry is pinned here
+      // instead of being assumed.
+      const chip = ruleBody(css, ".s-about-modal-link");
+      expect(declaration(chip, "padding")).toBe(
+        "var(--space-2, 0.125rem) var(--space-10, 0.625rem)",
+      );
+      expect(declaration(chip, "border")).toContain("1px solid var(--border-subtle");
+      expect(declaration(chip, "border-radius")).toBe("var(--radius-full, 9999px)");
+      expect(declaration(chip, "color")).toBe("rgb(var(--color-muted))");
+    });
+
+    it("keeps the icon rule after the plain rule it refines", () => {
+      // Both are (0,2,0), so source order is the only thing that turns an
+      // icon link into inline-flex rather than the plain `inline` — the
+      // tie-break is part of the contract, not an accident of file layout.
+      const plainAt = css.indexOf(`${PLAIN} {`);
+      const iconAt = css.indexOf(".s-about-modal-link.s-about-modal-link-has-icon {");
+      expect(plainAt).toBeGreaterThanOrEqual(0);
+      expect(iconAt).toBeGreaterThan(plainAt);
+    });
+  });
 });

package/src/components/HkAboutModal.test.tsx

@@ -16,6 +16,9 @@ import { setLocale } from "../i18n/context";
  * - the backdrop factory renders inside the clipped backdrop layer
  * - licenses and links render as chips under one centered block
  * - footer (filing) links render as external links
+ * - `face: "plain"` turns any of them into a bare text link (still a link,
+ *   still a new tab), and an entry carrying an `icon` renders the mark, with
+ *   an accessible name when it has no label to be named by
  *
  * (Repo test convention: raw createApp + document queries, no
  * @vue/test-utils dependency.)
@@ -104,25 +107,190 @@ describe("HkAboutModal branding", () => {
         { name: "Celestia Island", href: "https://github.com/celestia-island" },
         { text: "，由 " },
         { name: "伊欧", href: "https://github.com/langyo" },
-        { text: " 倾力设计" },
+        { text: " 主创" },
       ],
     });
     await flushModal();
     const line = query<HTMLElement>(".s-about-modal-credits-line");
-    expect(line.textContent).toBe("来自 Celestia Island，由 伊欧 倾力设计");
+    expect(line.textContent).toBe("来自 Celestia Island，由 伊欧 主创");
     const chips = [
       ...document.body.querySelectorAll<HTMLAnchorElement>(".s-about-modal-credit-link"),
     ];
     expect(chips.map((chip) => chip.textContent)).toEqual(["Celestia Island", "伊欧"]);
-    // Every link in the dialog is a tag and opens in a new tab.
+    // Every link in the dialog opens in a new tab; the chip is the default
+    // face, so an entry that asks for nothing keeps the tag.
     for (const chip of chips) {
       expect(chip.classList.contains("s-about-modal-link")).toBe(true);
+      expect(chip.getAttribute("data-face")).toBe("chip");
       expect(chip.getAttribute("target")).toBe("_blank");
       expect(chip.getAttribute("rel")).toContain("noopener");
     }
     expect(chips[0]!.getAttribute("href")).toBe("https://github.com/celestia-island");
   });
 
+  it("renders a credit name as a plain text link when the entry asks for it", async () => {
+    mountAbout({
+      credits: [
+        { text: "来自 " },
+        { name: "Celestia Island", href: "https://github.com/celestia-island", face: "plain" },
+        { text: "，由 " },
+        { name: "伊欧", href: "https://github.com/langyo", face: "plain" },
+        { text: " 主创" },
+      ],
+    });
+    await flushModal();
+    // The names stay inside the sentence — same text, same flow, no frame.
+    expect(query<HTMLElement>(".s-about-modal-credits-line").textContent).toBe(
+      "来自 Celestia Island，由 伊欧 主创",
+    );
+    const links = [
+      ...document.body.querySelectorAll<HTMLAnchorElement>(".s-about-modal-credit-link"),
+    ];
+    expect(links.map((link) => link.textContent)).toEqual(["Celestia Island", "伊欧"]);
+    for (const link of links) {
+      expect(link.getAttribute("data-face")).toBe("plain");
+      expect(link.classList.contains("s-about-modal-link")).toBe(true);
+      expect(link.getAttribute("target")).toBe("_blank");
+      // A text link is named by its own text — no redundant aria-label.
+      expect(link.getAttribute("aria-label")).toBeNull();
+    }
+  });
+
+  it("renders plain faces across the link rows and the legal filings", async () => {
+    mountAbout({
+      links: [
+        { label: "celestia.world", href: "https://celestia.world", face: "plain" },
+        { label: "celestia.ac.cn", href: "https://celestia.ac.cn", face: "plain" },
+      ],
+      footerLinks: [
+        { label: "苏ICP备2025155733号-2", href: "https://beian.miit.gov.cn/", face: "plain" },
+      ],
+    });
+    await flushModal();
+    const links = [
+      ...document.body.querySelectorAll<HTMLAnchorElement>(
+        ".s-about-modal-links-list .s-about-modal-link",
+      ),
+    ];
+    expect(links.map((link) => link.textContent)).toEqual(["celestia.world", "celestia.ac.cn"]);
+    expect(links.map((link) => link.getAttribute("data-face"))).toEqual(["plain", "plain"]);
+    expect(
+      query<HTMLElement>(".s-about-modal-footer-link").getAttribute("data-face"),
+    ).toBe("plain");
+  });
+
+  it("renders an icon-only link with an accessible name beside the text links", async () => {
+    mountAbout({
+      links: [
+        { label: "celestia.world", href: "https://celestia.world", face: "plain" },
+        {
+          icon: "github",
+          href: "https://github.com/celestia-island/shittim-chest",
+          face: "plain",
+          ariaLabel: "GitHub",
+        },
+      ],
+    });
+    await flushModal();
+    const links = [
+      ...document.body.querySelectorAll<HTMLAnchorElement>(
+        ".s-about-modal-links-list .s-about-modal-link",
+      ),
+    ];
+    expect(links.length).toBe(2);
+    const mark = links[1]!;
+    expect(mark.textContent).toBe("");
+    expect(mark.classList.contains("s-about-modal-link-has-icon")).toBe(true);
+    expect(mark.getAttribute("aria-label")).toBe("GitHub");
+    expect(mark.getAttribute("href")).toBe("https://github.com/celestia-island/shittim-chest");
+    expect(mark.getAttribute("target")).toBe("_blank");
+    expect(mark.querySelector(".s-about-modal-link-icon svg")).toBeTruthy();
+    // …and it is the GitHub mark, not just any glyph.
+    expect(
+      mark
+        .querySelector(".s-about-modal-link-icon svg")!
+        .classList.contains("lucide-github-icon"),
+    ).toBe(true);
+    // The mark is decoration: it must not join the link's accessible name.
+    expect(
+      mark.querySelector(".s-about-modal-link-icon")!.getAttribute("aria-hidden"),
+    ).toBe("true");
+    // The text link next to it stays text: no mark, no extra naming.
+    expect(links[0]!.querySelector("svg")).toBeNull();
+    expect(links[0]!.getAttribute("aria-label")).toBeNull();
+  });
+
+  it("names an icon-only link from the icon when none is given", async () => {
+    mountAbout({ links: [{ icon: "github", href: "https://example.test/repo", face: "plain" }] });
+    await flushModal();
+    const mark = query<HTMLElement>(".s-about-modal-link");
+    expect(mark.getAttribute("aria-label")).toBe("GitHub");
+    expect(mark.getAttribute("data-face")).toBe("plain");
+  });
+
+  it("lets a host name a text link explicitly", async () => {
+    mountAbout({
+      links: [
+        {
+          label: "celestia.world",
+          href: "https://celestia.world",
+          ariaLabel: "Celestia World 官网",
+        },
+      ],
+    });
+    await flushModal();
+    // An explicit name outranks the visible text (and the visible text stays).
+    const link = query<HTMLAnchorElement>(".s-about-modal-link");
+    expect(link.getAttribute("aria-label")).toBe("Celestia World 官网");
+    expect(link.textContent).toBe("celestia.world");
+  });
+
+  it("drops a link entry with neither a label nor an icon", async () => {
+    mountAbout({
+      links: [
+        { label: "celestia.world", href: "https://celestia.world", face: "plain" },
+        // No text and no mark: an invisible but focusable link named by its
+        // raw URL is worse than no link.
+        { href: "https://example.test/blank" },
+      ],
+    });
+    await flushModal();
+    const links = [
+      ...document.body.querySelectorAll<HTMLAnchorElement>(
+        ".s-about-modal-links-list .s-about-modal-link",
+      ),
+    ];
+    expect(links.map((link) => link.textContent)).toEqual(["celestia.world"]);
+    expect(document.body.textContent).not.toContain("example.test/blank");
+  });
+
+  it("renders no link row when every entry is empty", async () => {
+    mountAbout({ links: [{ href: "https://example.test/blank" }] });
+    await flushModal();
+    expect(document.body.querySelector(".s-about-modal-links")).toBeNull();
+  });
+
+  it("drops an empty legal entry too", async () => {
+    mountAbout({
+      footerLinks: [
+        { label: "苏ICP备2025155733号-2", href: "https://beian.miit.gov.cn/" },
+        { href: "https://example.test/blank-filing" },
+      ],
+    });
+    await flushModal();
+    const links = [
+      ...document.body.querySelectorAll<HTMLAnchorElement>(".s-about-modal-footer-link"),
+    ];
+    expect(links.map((link) => link.textContent)).toEqual(["苏ICP备2025155733号-2"]);
+    expect(document.body.textContent).not.toContain("example.test/blank-filing");
+  });
+
+  it("renders no legal row when every filing is empty", async () => {
+    mountAbout({ footerLinks: [{ href: "https://example.test/blank-filing" }] });
+    await flushModal();
+    expect(document.body.querySelector(".s-about-modal-footer-links")).toBeNull();
+  });
+
   it("keeps a credit name as plain text when no href is given", async () => {
     mountAbout({ credits: [{ text: "由 " }, { name: "伊欧" }, { text: " 主创" }] });
     await flushModal();

package/src/components/HkAboutModal.tsx

@@ -1,13 +1,45 @@
 import { defineComponent, type PropType } from "vue";
+import { Github } from "lucide-vue-next";
 import { HBadge, HModal } from "@celestia-island/hikari";
 
 import { useI18n } from "../i18n/context";
 
 import "./HkAboutModal.scss";
 
+/**
+ * How a link presents itself.
+ *
+ * `chip` is the dialog's original face — a ghost tag. `plain` is bare text:
+ * no frame, no underline, so the hover colour shift is the whole
+ * affordance. Chosen per link, because one dialog can want both (the
+ * credits names / URLs / filings read as sentence text, the licenses stay
+ * tags).
+ */
+export type HAboutLinkFace = "chip" | "plain";
+
+/** Leading icon a link can carry; an icon-only link shows it alone. */
+export type HAboutLinkIcon = "github";
+
+// The mark behind each icon key. Brand names are locale-invariant, so they
+// double as the accessible name of an icon-only link.
+const ICONS: Record<HAboutLinkIcon, typeof Github> = { github: Github };
+const ICON_NAMES: Record<HAboutLinkIcon, string> = { github: "GitHub" };
+
 export interface HAboutLink {
-  label: string;
+  /** Visible text. Omit for an icon-only link — then name it with
+   *  `ariaLabel`. */
+  label?: string;
   href: string;
+  /** Optional leading icon (e.g. the project's GitHub home). */
+  icon?: HAboutLinkIcon;
+  /** Link face; defaults to `chip`. */
+  face?: HAboutLinkFace;
+  /**
+   * Accessible name for an icon-only link — falls back to `label`, then to
+   * the icon's own name (brand names are locale-invariant, so they need no
+   * i18n key of their own).
+   */
+  ariaLabel?: string;
 }
 
 /**
@@ -15,17 +47,19 @@ export interface HAboutLink {
  *
  * The line is a sentence assembled from parts so a host can phrase (and
  * order) it freely per locale: literal `text` runs sit between linked
- * `name` chips (organization first, author second, …). The names render as
- * the same chips as the license / link rows — every link in this dialog is
- * a tag.
+ * `name` runs (organization first, author second, …). Each linked name
+ * carries its own `face`, so one dialog can mix a chip here with bare text
+ * there (and an unlinked name is always plain text).
  */
 export interface HAboutCredit {
   /** Literal sentence fragment (mutually exclusive with `name`). */
   text?: string;
-  /** Linked chip label (mutually exclusive with `text`). */
+  /** Linked name (mutually exclusive with `text`). */
   name?: string;
-  /** Target for a `name` chip; opens in a new tab. */
+  /** Target for a `name`; opens in a new tab. */
   href?: string;
+  /** Face for a linked `name` (an unlinked name stays plain text). */
+  face?: HAboutLinkFace;
 }
 
 /**
@@ -51,12 +85,14 @@ export interface HAboutComponentVersion {
  *
  * Layout (2026-09 redesign): a centered identity hero (haloed logo, name,
  * then version + tagline on one compact line), an optional credits block
- * (a sentence built from text runs and linked name chips, plus the
+ * (a sentence built from text runs and linked names, plus the
  * organization blurb), a
  * bordered spec card holding the software-component versions, and the
- * link rows — licenses, external links, legal filings and the credits
- * names all render as the same ghost tag. Every one opens in a new tab. Every branding prop is optional — the modal degrades
- * to the plain identity card when none are given.
+ * link rows — licenses, external links and legal filings. Every link opens
+ * in a new tab and renders in the face its entry asks for: the ghost chip,
+ * or bare text (`plain`) for names / URLs / filings that should read as
+ * ordinary sentence text. Every branding prop is optional — the modal
+ * degrades to the plain identity card when none are given.
  */
 export const HkAboutModal = defineComponent({
   name: "HkAboutModal",
@@ -73,12 +109,12 @@ export const HkAboutModal = defineComponent({
     /** Optional centered small line under the credits (organization blurb). */
     description: { type: String, default: undefined },
     /**
-     * Credits sentence, assembled from text runs and linked name chips
-     * (e.g. 来自 <Celestia Island>，由 <伊欧> 倾力设计). Names render as the
-     * same chips as the license / link rows.
+     * Credits sentence, assembled from text runs and linked names
+     * (e.g. 来自 <Celestia Island>，由 <伊欧> 主创). Each name renders in the
+     * face its entry asks for — `chip`, or bare text with `plain`.
      */
     credits: { type: Array as PropType<HAboutCredit[]>, default: () => [] },
-    /** License chips (e.g. SySL-1.0 / BUSL-1.1), rendered centered. */
+    /** License links (e.g. SySL-1.0 / BUSL-1.1), rendered centered. */
     licenses: { type: Array as PropType<HAboutLink[]>, default: () => [] },
     /** Software-component version rows (WebUI / engines), label + value. */
     componentVersions: {
@@ -87,7 +123,11 @@ export const HkAboutModal = defineComponent({
     },
     /** Optional copyright holder in the footer (defaults to the app name). */
     copyright: { type: String, default: undefined },
-    /** Optional external links (e.g. GitHub, docs). */
+    /**
+     * Optional external links (e.g. the site domains, the project's GitHub
+     * home). An entry may carry an `icon` instead of a `label` — that is how
+     * the GitHub mark rides at the end of the domain row.
+     */
     links: { type: Array as PropType<HAboutLink[]>, default: () => [] },
     /** Optional centered legal links above the copyright (ICP filings). */
     footerLinks: { type: Array as PropType<HAboutLink[]>, default: () => [] },
@@ -105,19 +145,45 @@ export const HkAboutModal = defineComponent({
   setup(props, { emit }) {
     const { t } = useI18n();
 
-    // One chip renderer for every link in the dialog: credits names,
-    // licenses, external links and the legal filings all render as tags.
-    const renderChip = (label: string, href: string, extraClass: string) => (
-      <a
-        key={`${extraClass}:${href}`}
-        class={`s-about-modal-link ${extraClass}`}
-        href={href}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {label}
-      </a>
-    );
+    // One link renderer for every link in the dialog: credits names,
+    // licenses, external links and the legal filings. `face` picks the tag
+    // or the bare-text face; an `icon` may replace or lead the label.
+    const renderLink = (
+      item: HAboutLink,
+      extraClass: string,
+      key: string,
+    ) => {
+      const label = item.label ?? "";
+      const Icon = item.icon ? ICONS[item.icon] : undefined;
+      const classes = ["s-about-modal-link", extraClass];
+      if (Icon) classes.push("s-about-modal-link-has-icon");
+      return (
+        <a
+          key={key}
+          class={classes}
+          data-face={item.face ?? "chip"}
+          href={item.href}
+          target="_blank"
+          rel="noopener noreferrer"
+          // A text link is named by its own label unless the host names it
+          // explicitly; an icon-only link has no text to be named by, so it
+          // always needs a name of its own.
+          aria-label={
+            item.ariaLabel ?? (label ? undefined : item.icon ? ICON_NAMES[item.icon] : item.href)
+          }
+        >
+          {Icon && (
+            // Wrapped rather than classed on the lucide component: lucide
+            // merges its own classes with the passed ones and emits the token
+            // twice.
+            <span class="s-about-modal-link-icon" aria-hidden="true">
+              <Icon size={14} />
+            </span>
+          )}
+          {label}
+        </a>
+      );
+    };
 
     const renderCredits = () => {
       const parts = props.credits.filter((part) => part.text || part.name);
@@ -127,7 +193,11 @@ export const HkAboutModal = defineComponent({
           {parts.map((part, index) =>
             part.name ? (
               part.href ? (
-                renderChip(part.name, part.href, "s-about-modal-credit-link")
+                renderLink(
+                  { label: part.name, href: part.href, face: part.face },
+                  "s-about-modal-credit-link",
+                  `name:${index}`,
+                )
               ) : (
                 <span key={`name:${index}`} class="s-about-modal-credit-name">
                   {part.name}
@@ -141,12 +211,19 @@ export const HkAboutModal = defineComponent({
       );
     };
 
-    const renderChips = (items: HAboutLink[], slot: string) => {
-      if (items.length === 0) return null;
+    // An entry with neither text nor a mark would render an invisible but
+    // focusable link whose only name is its raw URL — drop it rather than
+    // ship a blank target. Every row filters through here.
+    const visibleLinks = (items: HAboutLink[]) =>
+      items.filter((item) => item.label || item.icon);
+
+    const renderLinks = (items: HAboutLink[], slot: string) => {
+      const visible = visibleLinks(items);
+      if (visible.length === 0) return null;
       return (
         <div class="s-about-modal-links" data-slot={slot}>
           <div class="s-about-modal-links-list">
-            {items.map((item) => renderChip(item.label, item.href, ""))}
+            {visible.map((item, index) => renderLink(item, "", `${slot}:${index}`))}
           </div>
         </div>
       );
@@ -229,15 +306,15 @@ export const HkAboutModal = defineComponent({
 
             {(props.licenses.length > 0 || props.links.length > 0) && (
               <div class="s-about-modal-chips">
-                {renderChips(props.licenses, "licenses")}
-                {renderChips(props.links, "links")}
+                {renderLinks(props.licenses, "licenses")}
+                {renderLinks(props.links, "links")}
               </div>
             )}
 
-            {props.footerLinks.length > 0 && (
+            {visibleLinks(props.footerLinks).length > 0 && (
               <div class="s-about-modal-footer-links">
-                {props.footerLinks.map((link) =>
-                  renderChip(link.label, link.href, "s-about-modal-footer-link"),
+                {visibleLinks(props.footerLinks).map((link, index) =>
+                  renderLink(link, "s-about-modal-footer-link", `legal:${index}`),
                 )}
               </div>
             )}

package/src/components/HkBlockingToast.scss

@@ -11,7 +11,7 @@
   top: 4rem;
   /* Same viewport gutter the anchored popups clamp to (16px desktop /
    * 8px mobile) — the toast stack is a floating layer too. */
-  inset-inline-end: var(--viewport-gutter, 1rem);
+  inset-inline-end: var(--viewport-gutter, 16px);
   z-index: var(--hk-z-toast, 4000);
   max-width: 24rem;
   pointer-events: none;

package/src/components/HkDatePicker.test.ts

@@ -48,6 +48,43 @@ async function settle() {
   await nextTick();
 }
 
+/** Poll until the drilled view's title button reads `expected`. The drill
+ *  transition is frame/timeout based and a fixed 20 ms settle raced it on
+ *  the CI runner (the year-grid test once read the previous view's title),
+ *  so the view STATE — not a sleep — is what this waits on. */
+function titleText(): string {
+  return panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.textContent ?? "";
+}
+
+async function waitForTitle(expected: string): Promise<void> {
+  const deadline = Date.now() + 2000;
+  for (;;) {
+    if (titleText() === expected) return;
+    if (Date.now() > deadline) {
+      throw new Error(`title never became ${JSON.stringify(expected)} (last: ${JSON.stringify(titleText())})`);
+    }
+    await new Promise((r) => setTimeout(r, 10));
+  }
+}
+
+/** Generic state poll over the same drill race: wait until `probe` holds. */
+async function waitForView(desc: string, probe: () => boolean): Promise<void> {
+  const deadline = Date.now() + 2000;
+  while (!probe()) {
+    if (Date.now() > deadline) throw new Error(`view never reached: ${desc}`);
+    await new Promise((r) => setTimeout(r, 10));
+  }
+}
+
+function titleBtn(): HTMLButtonElement | null | undefined {
+  return panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn");
+}
+
+/** The pick cells of the CURRENT view (months or years, both carry 12). */
+function pickCells(): HTMLButtonElement[] {
+  return Array.from(panel()?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']") ?? []);
+}
+
 function openViaEnter(harness: PickerHarness) {
   const trigger = harness.container.querySelector<HTMLElement>(".hk-dp-trigger");
   trigger?.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
@@ -326,23 +363,24 @@ describe("HkDatePicker", () => {
     const p = mountPicker({ modelValue: "2026-08-16" });
     openViaEnter(p);
     await nextTick();
-    // days → months
-    panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.click();
-    await settle();
-    // months → years (the year button is the months-view title)
-    panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.click();
-    await settle();
-    const yearCells = Array.from(panel()?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']") ?? []);
-    expect(yearCells.length).toBe(12);
-    // 2027 sits inside the 2016–2027 block of the 2026 view year.
-    const t2027 = yearCells.find((c) => c.textContent === "2027");
-    t2027?.click();
-    await settle();
-    expect(panel()?.querySelector<HTMLButtonElement>(".hk-dp-title-btn")?.textContent).toBe("2027");
-    const months = Array.from(panel()?.querySelectorAll<HTMLButtonElement>(".hk-dp-cell[data-variant='pick']") ?? []);
-    months[6]?.click(); // July
-    await settle();
-    expect(panel()?.querySelectorAll(".hk-dp-cell").length).toBe(42);
+    // Every drill below waits for the DESTINATION view's state, not a
+    // fixed settle: the transition is frame/timeout based and the CI
+    // runner raced both the days→months click (the second click landed
+    // mid-transition and was swallowed) and the months→years read.
+    // days → months: the title button becomes the view year.
+    titleBtn()?.click();
+    await waitForView("the months grid of 2026", () => titleText() === "2026");
+    // months → years (the year button is the months-view title): the
+    // 2016–2027 block of the 2026 view year holds a 2027 cell.
+    titleBtn()?.click();
+    await waitForView("the year grid showing 2027", () =>
+      pickCells().some((c) => c.textContent === "2027"));
+    pickCells().find((c) => c.textContent === "2027")?.click();
+    // Picking a year lands on the months grid of that year.
+    await waitForTitle("2027");
+    pickCells()[6]?.click(); // July
+    // ...and picking a month lands back on the days grid.
+    await waitForView("the days grid", () => panel()?.querySelectorAll(".hk-dp-cell").length === 42);
     const fmt = new Intl.DateTimeFormat("en", { year: "numeric", month: "long" });
     expect(panel()?.querySelector<HTMLElement>(".hk-dp-title")?.textContent).toContain(
       fmt.format(new Date(2027, 6, 1)),

package/src/components/HkDateTimePicker.test.ts

@@ -8,6 +8,29 @@ const mounts: ReturnType<typeof createApp>[] = [];
 const containers: HTMLElement[] = [];
 const originalWidth = window.innerWidth;
 
+/** The fixed model the suite mounts with. Every expected year/month/day
+ *  in the assertions derives from THIS constant — never from a bare
+ *  literal, and never from Date.now() — so the file cannot rot when a
+ *  calendar year rolls over. */
+const BASE = new Date(2026, 7, 16, 9, 30);
+
+/** Local-ISO day (`YYYY-MM-DD`) — the native date input's wire format. */
+function isoDay(d: Date): string {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+}
+
+/** Local-ISO minute (`YYYY-MM-DDTHH:mm`) — datetime-local's wire format. */
+function isoMinute(d: Date): string {
+  return `${isoDay(d)}T${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+
+/** A day inside the mounted (BASE) month, optionally with a clock time. */
+function dayOf(day: number, hours?: number, minutes?: number): Date {
+  return hours === undefined
+    ? new Date(BASE.getFullYear(), BASE.getMonth(), day)
+    : new Date(BASE.getFullYear(), BASE.getMonth(), day, hours, minutes ?? 0);
+}
+
 interface PickerHarness {
   container: HTMLElement;
   emitted: Date[];
@@ -18,7 +41,7 @@ function mountPicker(props: Record<string, unknown> = {}): PickerHarness {
   document.body.appendChild(container);
   containers.push(container);
 
-  const value = ref(props.modelValue as Date ?? new Date(2026, 7, 16, 9, 30));
+  const value = ref(props.modelValue as Date ?? BASE);
   const emitted: Date[] = [];
   const Wrapper = defineComponent({
     setup() {
@@ -44,6 +67,22 @@ async function settle() {
   await nextTick();
 }
 
+/** Poll until the drilled view's title button reads `expected`. The drill
+ *  transition is frame/timeout based and a fixed 20 ms settle raced it
+ *  under full-suite load (the assertion once read the days-view title),
+ *  so the view STATE — not a sleep — is what this waits on. */
+async function waitForTitle(expected: string): Promise<void> {
+  const deadline = Date.now() + 2000;
+  for (;;) {
+    const title = picker()?.querySelector<HTMLButtonElement>(".hk-dtp-title-btn")?.textContent ?? "";
+    if (title === expected) return;
+    if (Date.now() > deadline) {
+      throw new Error(`title never became ${JSON.stringify(expected)} (last: ${JSON.stringify(title)})`);
+    }
+    await new Promise((r) => setTimeout(r, 10));
+  }
+}
+
 function picker(): HTMLElement | null {
   return document.querySelector<HTMLElement>(".hk-dtp");
 }
@@ -124,7 +163,9 @@ describe("HkDateTimePicker", () => {
 
   it("re-derives month and weekday labels after a locale switch", async () => {
     mountPicker();
-    const zhMonth = new Intl.DateTimeFormat("zh-Hans", { month: "long" }).format(new Date(2026, 7, 1));
+    const zhMonth = new Intl.DateTimeFormat("zh-Hans", { month: "long" }).format(
+      new Date(BASE.getFullYear(), BASE.getMonth(), 1),
+    );
     await setLocale("zh-Hans");
     await nextTick();
     const title = picker()?.querySelector<HTMLElement>(".hk-dtp-title-btn")?.textContent ?? "";
@@ -173,14 +214,14 @@ describe("HkDateTimePicker", () => {
     const monthBtn = picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-title-btn")[0];
     monthBtn?.click();
     await settle();
-    expect(picker()?.querySelector<HTMLButtonElement>(".hk-dtp-title-btn")?.textContent).toBe("2026");
+    await waitForTitle(String(BASE.getFullYear()));
     const navs = picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-nav");
     navs?.[1].click();
     await nextTick();
-    expect(picker()?.querySelector<HTMLButtonElement>(".hk-dtp-title-btn")?.textContent).toBe("2027");
+    await waitForTitle(String(BASE.getFullYear() + 1));
     navs?.[0].click();
     await nextTick();
-    expect(picker()?.querySelector<HTMLButtonElement>(".hk-dtp-title-btn")?.textContent).toBe("2026");
+    await waitForTitle(String(BASE.getFullYear()));
   });
 
   it("time stepper bumps keep the drilled month view instead of snapping back", async () => {
@@ -205,14 +246,14 @@ describe("HkDateTimePicker", () => {
     expect(p.emitted.length).toBe(1);
     const d = p.emitted[0];
     expect(d instanceof Date).toBe(true);
-    expect([d.getFullYear(), d.getMonth(), d.getDate()]).toEqual([2026, 7, 20]);
+    expect([d.getFullYear(), d.getMonth(), d.getDate()]).toEqual([BASE.getFullYear(), BASE.getMonth(), 20]);
     expect([d.getHours(), d.getMinutes()]).toEqual([9, 30]);
   });
 
   it("disables days outside the inclusive min/max bounds", () => {
     mountPicker({
-      min: new Date(2026, 7, 10, 0, 0),
-      max: new Date(2026, 7, 20, 23, 59),
+      min: new Date(BASE.getFullYear(), BASE.getMonth(), 10, 0, 0),
+      max: new Date(BASE.getFullYear(), BASE.getMonth(), 20, 23, 59),
     });
     const byDay = new Map(
       dayCells().filter((c) => !c.classList.contains("is-out")).map((c) => [c.textContent ?? "", c]),
@@ -224,14 +265,14 @@ describe("HkDateTimePicker", () => {
   });
 
   it("blocked days never emit an update when clicked", async () => {
-    const p = mountPicker({ max: new Date(2026, 7, 20, 23, 59) });
+    const p = mountPicker({ max: dayOf(20, 23, 59) });
     clickDay(25);
     await nextTick();
     expect(p.emitted).toEqual([]);
   });
 
   it("marks days present in markedDays with a dot", () => {
-    mountPicker({ markedDays: new Set(["2026-08-18"]) });
+    mountPicker({ markedDays: new Set([isoDay(dayOf(18))]) });
     const marked = Array.from(picker()?.querySelectorAll<HTMLButtonElement>(".hk-dtp-cell") ?? [])
       .filter((c) => c.querySelector(".hk-dtp-cell-dot"));
     expect(marked.length).toBe(1);
@@ -257,7 +298,7 @@ describe("HkDateTimePicker", () => {
     const input = nativeInput(p.container);
     expect(input).not.toBeNull();
     expect(input?.type).toBe("datetime-local");
-    expect(input?.value).toBe("2026-08-16T09:30");
+    expect(input?.value).toBe(isoMinute(BASE));
     expect(p.container.querySelector(".hk-dtp")).toBeNull();
     expect(p.container.querySelector(".hk-dtp-grid")).toBeNull();
   });
@@ -267,18 +308,15 @@ describe("HkDateTimePicker", () => {
     const p = mountPicker({ showTime: false });
     const input = nativeInput(p.container);
     expect(input?.type).toBe("date");
-    expect(input?.value).toBe("2026-08-16");
+    expect(input?.value).toBe(isoDay(BASE));
   });
 
   it("passes min/max through to the native input in its wire format", () => {
     useMobileViewport();
-    const p = mountPicker({
-      min: new Date(2026, 7, 10, 8, 0),
-      max: new Date(2026, 7, 20, 18, 30),
-    });
+    const p = mountPicker({ min: dayOf(10, 8, 0), max: dayOf(20, 18, 30) });
     const input = nativeInput(p.container);
-    expect(input?.min).toBe("2026-08-10T08:00");
-    expect(input?.max).toBe("2026-08-20T18:30");
+    expect(input?.min).toBe(isoMinute(dayOf(10, 8, 0)));
+    expect(input?.max).toBe(isoMinute(dayOf(20, 18, 30)));
   });
 
   it("keeps the custom calendar on mobile when nativeOnMobile is false", () => {
@@ -295,33 +333,34 @@ describe("HkDateTimePicker", () => {
     useMobileViewport();
     const p = mountPicker();
     const input = nativeInput(p.container);
-    input!.value = "2026-08-20T14:05";
+    input!.value = isoMinute(dayOf(20, 14, 5));
     input!.dispatchEvent(new Event("input", { bubbles: true }));
     await nextTick();
     expect(p.emitted.length).toBe(1);
-    expect(p.emitted[0].getTime()).toBe(new Date(2026, 7, 20, 14, 5).getTime());
-    expect(input?.value).toBe("2026-08-20T14:05");
+    expect(p.emitted[0].getTime()).toBe(dayOf(20, 14, 5).getTime());
+    expect(input?.value).toBe(isoMinute(dayOf(20, 14, 5)));
   });
 
   it("native date edits preserve the clock time when showTime is false", async () => {
     useMobileViewport();
     const p = mountPicker({ showTime: false });
     const input = nativeInput(p.container);
-    input!.value = "2026-08-20";
+    input!.value = isoDay(dayOf(20));
     input!.dispatchEvent(new Event("input", { bubbles: true }));
     await nextTick();
-    expect(p.emitted[0].getTime()).toBe(new Date(2026, 7, 20, 9, 30).getTime());
+    expect(p.emitted[0].getTime()).toBe(dayOf(20, 9, 30).getTime());
   });
 
   it("native input edits outside the bounds are rejected and re-synced", async () => {
     useMobileViewport();
-    const p = mountPicker({ max: new Date(2026, 7, 20, 23, 59) });
+    const p = mountPicker({ max: dayOf(20, 23, 59) });
     const input = nativeInput(p.container);
-    input!.value = "2026-09-01T10:00";
+    // Next month, past the max bound.
+    input!.value = isoMinute(new Date(BASE.getFullYear(), BASE.getMonth() + 1, 1, 10, 0));
     input!.dispatchEvent(new Event("input", { bubbles: true }));
     await nextTick();
     expect(p.emitted).toEqual([]);
-    expect(input?.value).toBe("2026-08-16T09:30");
+    expect(input?.value).toBe(isoMinute(BASE));
   });
 
   it("clearing the native input falls back to the model value", async () => {
@@ -332,7 +371,7 @@ describe("HkDateTimePicker", () => {
     input!.dispatchEvent(new Event("input", { bubbles: true }));
     await nextTick();
     expect(p.emitted).toEqual([]);
-    expect(input?.value).toBe("2026-08-16T09:30");
+    expect(input?.value).toBe(isoMinute(BASE));
   });
 
   it("native input replaces even the popup chrome on mobile", () => {

package/src/components/HkToast.gutter.contract.test.ts

@@ -0,0 +1,25 @@
+/**
+ * Source contract: the toast stacks are floating layers too, so their
+ * screen-edge inset rides the same shared --viewport-gutter token as the
+ * anchored popups (16px desktop / 8px mobile, hikari #501). Pinned here
+ * so a refactor cannot quietly re-hardcode a pixel value or drift the
+ * fallback away from the token's declared desktop magnitude.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+describe("toast container viewport gutter contract", () => {
+  for (const sheet of ["HkToast.scss", "HkBlockingToast.scss"]) {
+    it(`${sheet} pins the container inset to the shared gutter token`, () => {
+      const css = readFileSync(join(here, sheet), "utf-8");
+      // EVERY inset-inline-end declaration in the sheet must be the
+      // gutter var — no re-hardcoded pixel sibling may creep in.
+      const decls = css.match(/inset-inline-end:[^;]+;/g) ?? [];
+      expect(decls).toEqual(["inset-inline-end: var(--viewport-gutter, 16px);"]);
+    });
+  }
+});

package/src/components/HkToast.scss

@@ -3,7 +3,7 @@
   top: 4rem;
   /* Same viewport gutter the anchored popups clamp to (16px desktop /
    * 8px mobile) — the toast stack is a floating layer too. */
-  inset-inline-end: var(--viewport-gutter, 1rem);
+  inset-inline-end: var(--viewport-gutter, 16px);
   /* Toast band — the topmost popup z band (POPUP_Z_BANDS.toast; mirror in
      theme.scss). The live value arrives inline from the popup manager. */
   z-index: var(--hk-z-toast, 4000);

package/src/index.ts

@@ -380,6 +380,8 @@ export {
   type HAboutComponentVersion,
   type HAboutCredit,
   type HAboutLink,
+  type HAboutLinkFace,
+  type HAboutLinkIcon,
 } from "./components/HkAboutModal";
 export { HkLogWindow as HLogWindow, type HLogTab } from "./components/HkLogWindow";
 export { HkCookieConsent as HCookieConsent } from "./components/HkCookieConsent";

package/src/runtime/historySafetyNet.test.ts

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { installHistorySafetyNet, sanitizeHistoryUrl } from "./historySafetyNet";
+import { getHkRuntimeEntry } from "./registry";
 
 /**
  * The field bug this net closes (chest #754 lineage): some producer
@@ -136,4 +137,28 @@ describe("installHistorySafetyNet", () => {
     expect(sessionStorage.getItem("hikari:historyNet")).toBeNull();
     vi.restoreAllMocks();
   });
+
+  it("keeps the first install's fold target when a HALF-overwritten net re-patches", () => {
+    // The recorded half-self-heal edge: pushState keeps our patch while an
+    // external lib restores replaceState to native. A re-install with new
+    // options must NOT silently adopt them for the re-patched method —
+    // the still-installed first capture wins for behavior AND meta, or a
+    // per-method option split ships to production unnoticed.
+    installHistorySafetyNet({ fallback: "/" });
+    // Another library restores replaceState (pushState stays ours).
+    History.prototype.replaceState = nativeReplace;
+    // Re-install with a different fallback: the pushState marker makes
+    // this a no-op claim, so "/" must stay the active fold target.
+    installHistorySafetyNet({ fallback: "/landing" });
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    history.replaceState(null, "", "https://evil.example/x");
+    // Folded to the FIRST install's "/" — never the re-install's
+    // "/landing" (which, being same-origin, would have navigated).
+    expect(window.location.pathname).toBe("/");
+    expect(sessionStorage.getItem("hikari:historyNet")).toContain("evil.example/x");
+    // ...and the registry meta reports the option set that is actually
+    // wired into the prototype, not the newest call's.
+    expect(getHkRuntimeEntry("historySafetyNet")?.meta?.fallback).toBe("/");
+    warn.mockRestore();
+  });
 });

package/src/runtime/historySafetyNet.ts

@@ -95,9 +95,15 @@ let historyNetRuntime: ReturnType<typeof reportHkRuntime> | null = null;
  *  our patch is still on the prototype skips re-patching (the `continue`
  *  below), so the first install's fallback/evidence stay in effect — the
  *  registry meta must report THOSE, not the newest call's options, or it
- *  would misreport the active fold target. */
+ *  would misreport the active fold target. The re-patch closure reads
+ *  THESE module captures, never the invocation locals: when a net is
+ *  HALF overwritten (say replaceState restored to native while pushState
+ *  is still ours) a re-install patches the foreign method with the
+ *  still-active capture, so behavior and meta can never diverge into
+ *  per-method options. */
 let activeFallback = "/";
 let activeEvidenceKey: string | false = DEFAULT_EVIDENCE_KEY;
+let activeOptions: HistorySafetyNetOptions = {};
 function ensureHistoryNetRuntime() {
   return (historyNetRuntime ??= reportHkRuntime("historySafetyNet", {
     kind: "hook",
@@ -120,6 +126,7 @@ export function installHistorySafetyNet(options: HistorySafetyNetOptions = {}):
     // active; a no-op re-install keeps the first install's capture.
     activeFallback = fallback;
     activeEvidenceKey = evidenceKey;
+    activeOptions = options;
   }
   ensureHistoryNetRuntime().setMeta({ fallback: activeFallback, evidenceKey: activeEvidenceKey === false ? "off" : activeEvidenceKey });
   ensureHistoryNetRuntime().pulse();
@@ -133,13 +140,16 @@ export function installHistorySafetyNet(options: HistorySafetyNetOptions = {}):
     }
     const native = current as (this: History, state: unknown, title: string, url?: string | URL | null) => unknown;
     if (typeof native !== "function") continue;
+    // The closure reads the ACTIVE capture, never this call's locals —
+    // the half-overwrite path above re-patches a foreign method while
+    // the first install's options stay in effect.
     const patched = function (this: History, state: unknown, title: string, url?: string | URL | null) {
-      const safe = sanitizeHistoryUrl(url, fallback);
+      const safe = sanitizeHistoryUrl(url, activeFallback);
       if (safe !== url) {
-        const info: HistoryCoercion = { method, raw: String(url ?? ""), foldedTo: fallback };
+        const info: HistoryCoercion = { method, raw: String(url ?? ""), foldedTo: activeFallback };
         coercions += 1;
         historyNetRuntime?.pulse({ coercions });
-        reportCoercion(info, evidenceKey, options);
+        reportCoercion(info, activeEvidenceKey, activeOptions);
       }
       return native.call(this, state as never, title, safe as never);
     };