@celestia-island/hikari 0.45.4 → 0.45.6

package/package.json

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

@@ -30,17 +30,39 @@
   gap: var(--space-16, 1rem);
 }
 
+/* ── Identity hero: haloed logo → name → version · tagline ─────────────── */
+
 .s-about-modal-header {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: var(--space-12, 0.75rem);
+  gap: var(--space-10, 0.625rem);
+  text-align: center;
 }
 
-.s-about-modal-logo-img {
-  width: 3rem;
-  height: 3rem;
+// Framed mark. The app logo is a light-on-light illustration (a white tablet
+// render with its own baked soft shadow), so it needs a tinted, bounded bed:
+// floating on the modal surface it read as a stray smudge, and the same bed
+// gives it contrast on dark themes without hard-coding a mode.
+.s-about-modal-logo-frame {
+  display: grid;
+  place-items: center;
+  width: 5rem;
+  height: 5rem;
   flex-shrink: 0;
-  border-radius: var(--radius-lg, 12px);
+  border: 1px solid rgb(var(--color-primary) / 14%);
+  border-radius: var(--radius-xl, 16px);
+  background: linear-gradient(
+    155deg,
+    rgb(var(--color-primary) / 13%),
+    rgb(var(--color-primary) / 4%)
+  );
+  box-shadow: 0 6px 18px rgb(var(--color-primary) / 12%);
+}
+
+.s-about-modal-logo-img {
+  width: 3.75rem;
+  height: 3.75rem;
   object-fit: contain;
   user-select: none;
 }
@@ -49,41 +71,89 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 3rem;
-  height: 3rem;
-  flex-shrink: 0;
+  width: 3.25rem;
+  height: 3.25rem;
   border-radius: var(--radius-lg, 12px);
-  background: rgb(var(--color-primary));
+  background: linear-gradient(
+    150deg,
+    rgb(var(--color-primary)),
+    rgb(var(--color-secondary, var(--color-primary)))
+  );
   color: rgb(var(--color-on-solid-text, 255 255 255));
-  font-size: var(--text-lg, 1.125rem);
+  font-size: var(--text-xl, 1.25rem);
   font-weight: 700;
 }
 
+.s-about-modal-identity {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-2, 0.125rem);
+}
+
 .s-about-modal-name {
   margin: 0;
-  font-size: var(--text-lg, 1.125rem);
+  font-size: var(--text-xl, 1.25rem);
   font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: 0.01em;
   color: rgb(var(--color-text));
 }
 
+// Version and tagline share one compact muted line — two stacked lines of
+// equal weight made the hero read as a form.
+.s-about-modal-subtitle {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-6, 0.375rem);
+  margin: 0;
+  font-size: var(--text-xs, 0.75rem);
+  line-height: 1.5;
+  color: rgb(var(--color-muted));
+}
+
 .s-about-modal-version {
-  margin: var(--space-4, 0.25rem) 0 0;
-  font-size: var(--text-sm, 0.8125rem);
+  font-variant-numeric: tabular-nums;
+}
+
+.s-about-modal-subtitle-sep {
+  color: rgb(var(--color-border));
+}
+
+.s-about-modal-tagline {
   color: rgb(var(--color-muted));
 }
 
-.s-about-modal-slogan {
+/* ── Credits: made-by sentence + organization blurb ────────────────────── */
+
+.s-about-modal-credits {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4, 0.25rem);
+  margin-top: calc(-1 * var(--space-4, 0.25rem));
+}
+
+.s-about-modal-made-by {
   margin: 0;
-  font-size: var(--text-base, 1rem);
-  font-weight: 600;
+  font-size: var(--text-sm, 0.8125rem);
   text-align: center;
   color: rgb(var(--color-text));
 }
 
-.s-about-modal-tagline {
-  margin: var(--space-2, 0.125rem) 0 0;
-  font-size: var(--text-xs, 0.75rem);
-  color: rgb(var(--color-muted));
+.s-about-modal-made-by .s-about-modal-row-link {
+  margin: 0 0.15em;
+}
+
+.s-about-modal-row-link {
+  color: rgb(var(--color-primary));
+  text-decoration: none;
+}
+
+.s-about-modal-row-link:hover {
+  text-decoration: underline;
 }
 
 .s-about-modal-description {
@@ -91,45 +161,84 @@
   font-size: var(--text-xs, 0.75rem);
   line-height: 1.6;
   text-align: center;
+  text-wrap: pretty;
   color: rgb(var(--color-muted));
 }
 
+/* ── Spec card: component version rows ────────────────────────────────── */
+
 .s-about-modal-rows {
   display: flex;
   flex-direction: column;
-  gap: var(--space-8, 0.5rem);
+  padding: var(--space-2, 0.125rem) var(--space-14, 0.875rem);
+  border: 1px solid var(--border-subtle, rgb(100 100 100 / 12%));
+  border-radius: var(--radius-lg, 12px);
+  background: rgb(var(--color-primary) / 3%);
 }
 
 .s-about-modal-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--space-8, 0.5rem);
+  gap: var(--space-12, 0.75rem);
+  min-height: 2.125rem;
+}
+
+.s-about-modal-row + .s-about-modal-row {
+  border-top: 1px solid var(--border-faint, rgb(100 100 100 / 10%));
 }
 
 .s-about-modal-row-label {
-  font-size: var(--text-sm, 0.8125rem);
+  flex: 0 1 auto;
+  font-size: var(--text-xs, 0.75rem);
   color: rgb(var(--color-muted));
 }
 
 .s-about-modal-row-value {
-  font-size: var(--text-sm, 0.8125rem);
-  color: rgb(var(--color-text));
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  flex: 0 0 auto;
+}
+
+.s-about-modal-row-number {
   font-family: var(--font-mono, vars.$hikari-font-family-mono);
+  font-size: var(--text-xs, 0.75rem);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+  color: rgb(var(--color-text));
 }
 
-.s-about-modal-row-link {
-  color: rgb(var(--color-primary));
-  text-decoration: none;
+// Environment word (生产 / 测试) lives in its own pill so it never melts
+// into the version string.
+.s-about-modal-row-meta {
+  padding: 0 var(--space-6, 0.375rem);
+  border: 1px solid var(--border-subtle, rgb(100 100 100 / 12%));
+  border-radius: var(--radius-full, 9999px);
+  font-size: var(--text-2xs, 0.625rem);
+  line-height: 1.6;
+  white-space: nowrap;
+  color: rgb(var(--color-muted));
 }
 
-.s-about-modal-row-link:hover {
-  text-decoration: underline;
+.s-about-modal-row-meta[data-tone="positive"] {
+  border-color: rgb(var(--color-success) / 32%);
+  background: rgb(var(--color-success) / 10%);
+  color: rgb(var(--color-success));
 }
 
-.s-about-modal-links {
+.s-about-modal-row-meta[data-tone="caution"] {
+  border-color: rgb(var(--color-warning) / 32%);
+  background: rgb(var(--color-warning) / 10%);
+  color: rgb(var(--color-warning));
+}
+
+/* ── Chips: licenses and external links ───────────────────────────────── */
+
+.s-about-modal-chips {
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: var(--space-8, 0.5rem);
 }
 
@@ -137,38 +246,50 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: var(--space-8, 0.5rem);
+  gap: var(--space-6, 0.375rem);
 }
 
+// Ghost pills: the chips are secondary navigation, so they carry a hairline
+// instead of a filled brand block.
 .s-about-modal-link {
-  padding: var(--space-4, 0.25rem) var(--space-8, 0.5rem);
-  border-radius: var(--radius-sm, 4px);
-  background: rgb(var(--color-primary) / 12%);
-  color: rgb(var(--color-primary));
+  padding: var(--space-2, 0.125rem) var(--space-10, 0.625rem);
+  border: 1px solid var(--border-subtle, rgb(100 100 100 / 12%));
+  border-radius: var(--radius-full, 9999px);
+  color: rgb(var(--color-muted));
   font-size: var(--text-xs, 0.75rem);
+  line-height: 1.7;
   text-decoration: none;
-  transition: background 200ms ease;
+  transition:
+    color var(--duration-short, 0.15s) ease,
+    border-color var(--duration-short, 0.15s) ease,
+    background var(--duration-short, 0.15s) ease;
 }
 
 .s-about-modal-link:hover {
-  background: rgb(var(--color-primary) / 20%);
+  border-color: var(--c-primary-strong, rgb(var(--color-primary) / 40%));
+  background: var(--c-primary-faint, rgb(var(--color-primary) / 5%));
+  color: rgb(var(--color-primary));
 }
 
 .s-about-modal-link:active {
-  background: rgb(var(--color-primary) / 26%);
+  background: var(--c-primary-subtle, rgb(var(--color-primary) / 8%));
 }
 
 .s-about-modal-link:focus-visible {
+  outline: none;
   box-shadow:
     0 0 0 2px rgb(var(--color-surface)),
     0 0 0 4px rgb(var(--color-primary));
 }
 
+/* ── Legal footer: filing links + copyright ───────────────────────────── */
+
 .s-about-modal-footer-links {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: var(--space-12, 0.75rem);
+  gap: var(--space-16, 1rem);
+  margin-top: calc(-1 * var(--space-4, 0.25rem));
 }
 
 .s-about-modal-footer-link {
@@ -185,4 +306,5 @@
 .s-about-modal-footer {
   display: flex;
   justify-content: center;
+  margin-top: calc(-1 * var(--space-6, 0.375rem));
 }

package/src/components/HkAboutModal.test.tsx

@@ -5,14 +5,16 @@ import { HkAboutModal } from "./HkAboutModal";
 import { setLocale } from "../i18n/context";
 
 /**
- * HkAboutModal contract tests for the branding wave:
+ * HkAboutModal contract tests for the branding + redesign waves:
  * - the first-letter tile is the default identity and `logoSrc` swaps it
- *   for an image
- * - tagline / description / author / license / copyright render the given
- *   strings, authorHref turns the author value into an external link
+ *   for an image inside the identity frame
+ * - version and tagline share one subtitle line
+ * - description / made-by / license / copyright render the given strings,
+ *   madeByNameHref turns the author name into an external link
+ * - component rows split the machine value from an optional meta pill
  * - the backdrop factory renders inside the clipped backdrop layer
- * - links render as external chips
- * - author / license labels resolve through the i18n bundles
+ * - licenses and links render as chips under one centered block
+ * - footer (filing) links render as external links
  *
  * (Repo test convention: raw createApp + document queries, no
  * @vue/test-utils dependency.)
@@ -94,40 +96,79 @@ describe("HkAboutModal branding", () => {
     expect(query<HTMLElement>(".s-about-modal-description").textContent).toBe("Save the world.");
   });
 
-  it("renders the made-by row with a linked origin", async () => {
+  it("renders the made-by sentence with a linked author name", async () => {
     mountAbout({
-      author: "由 伊欧 主创",
-      origin: "来自 Celestia Island",
-      originHref: "https://github.com/celestia-island",
-      license: "BUSL-1.1",
+      madeByPrefix: "由",
+      madeByName: "伊欧",
+      madeByNameHref: "https://github.com/langyo",
+      madeBySuffix: " 主创，来自 Celestia Island",
     });
     await flushModal();
-    const row = query<HTMLElement>(".s-about-modal-row");
-    expect(row.querySelector(".s-about-modal-row-label")?.textContent).toBe("由 伊欧 主创");
+    const line = query<HTMLElement>(".s-about-modal-made-by");
+    expect(line.textContent).toBe("由伊欧 主创，来自 Celestia Island");
     const link = query<HTMLAnchorElement>(".s-about-modal-row-link");
-    expect(link.textContent).toBe("来自 Celestia Island");
-    expect(link.getAttribute("href")).toBe("https://github.com/celestia-island");
+    expect(link.textContent).toBe("伊欧");
+    expect(link.getAttribute("href")).toBe("https://github.com/langyo");
     expect(link.getAttribute("target")).toBe("_blank");
-    const rows = [...document.body.querySelectorAll<HTMLElement>(".s-about-modal-row")];
-    const licenseRow = rows.find((row) => row.textContent?.includes("BUSL-1.1"));
-    expect(licenseRow, "license row renders").toBeTruthy();
-    expect(licenseRow!.textContent).toContain("License");
   });
 
-  it("renders the made-by row as plain text without originHref", async () => {
-    mountAbout({ author: "由 伊欧 主创", origin: "来自 Celestia Island" });
+  it("renders the made-by sentence without a link when no href", async () => {
+    mountAbout({ madeByPrefix: "由", madeByName: "伊欧", madeBySuffix: " 主创" });
     await flushModal();
-    expect(query<HTMLElement>(".s-about-modal-row").textContent).toContain("来自 Celestia Island");
+    expect(query<HTMLElement>(".s-about-modal-made-by").textContent).toBe("由伊欧 主创");
     expect(document.body.querySelector(".s-about-modal-row-link")).toBeNull();
   });
 
-  it("renders the centered slogan and centered legal footer links", async () => {
+  it("renders software-component version rows with a meta pill and tone", async () => {
+    mountAbout({
+      componentVersions: [
+        { label: "WebUI 版本", value: "0.1.138 REW2HF", meta: "生产", metaTone: "positive" },
+        { label: "计算引擎版本", value: "0.1.0" },
+      ],
+    });
+    await flushModal();
+    const rows = [...document.body.querySelectorAll<HTMLElement>(".s-about-modal-row")];
+    expect(rows.length).toBe(2);
+    expect(rows[0]!.textContent).toContain("WebUI 版本");
+    // The number and the environment word are separate nodes: the value
+    // stays machine-readable, the tag carries the typography.
+    const number = query<HTMLElement>(".s-about-modal-row-number");
+    expect(number.textContent).toBe("0.1.138 REW2HF");
+    const meta = query<HTMLElement>(".s-about-modal-row-meta");
+    expect(meta.textContent).toBe("生产");
+    expect(meta.getAttribute("data-tone")).toBe("positive");
+    // The second row has no meta, so it renders no pill.
+    expect(rows[1]!.querySelector(".s-about-modal-row-meta")).toBeNull();
+  });
+
+  it("defaults the meta pill to the neutral tone", async () => {
+    mountAbout({
+      componentVersions: [{ label: "计算引擎版本", value: "0.1.0", meta: "测试" }],
+    });
+    await flushModal();
+    expect(query<HTMLElement>(".s-about-modal-row-meta").getAttribute("data-tone")).toBe(
+      "neutral",
+    );
+  });
+
+  it("renders centered license chips", async () => {
+    mountAbout({
+      licenses: [
+        { label: "SySL-1.0", href: "https://github.com/celestia-island/hikari/blob/master/LICENSE" },
+        { label: "BUSL-1.1", href: "https://github.com/celestia-island/shittim-chest/blob/master/LICENSE" },
+      ],
+    });
+    await flushModal();
+    const chips = [...document.body.querySelectorAll<HTMLAnchorElement>(".s-about-modal-link")];
+    expect(chips.map((chip) => chip.textContent)).toEqual(["SySL-1.0", "BUSL-1.1"]);
+    for (const chip of chips) expect(chip.getAttribute("target")).toBe("_blank");
+  });
+
+  it("renders centered legal footer links", async () => {
     mountAbout({
-      slogan: "技术宅拯救世界。",
       footerLinks: [{ label: "京ICP备2026xxxx号", href: "https://beian.miit.gov.cn/" }],
     });
     await flushModal();
-    expect(query<HTMLElement>(".s-about-modal-slogan").textContent).toBe("技术宅拯救世界。");
     const links = [
       ...document.body.querySelectorAll<HTMLAnchorElement>(".s-about-modal-footer-link"),
     ];
@@ -177,19 +218,49 @@ describe("HkAboutModal branding", () => {
     expect(badge.textContent).toContain(`© ${year} Test App`);
   });
 
-  it("localizes the license label", async () => {
-    mountAbout({ license: "BUSL-1.1" });
+  it("renders no branding rows when no branding props are given", async () => {
+    mountAbout();
     await flushModal();
-    const labels = () => [
-      ...document.body.querySelectorAll<HTMLElement>(".s-about-modal-row-label"),
-    ];
+    expect(document.body.querySelectorAll(".s-about-modal-row").length).toBe(0);
+    expect(document.body.querySelector(".s-about-modal-made-by")).toBeNull();
+    expect(document.body.querySelector(".s-about-modal-links")).toBeNull();
+    expect(document.body.querySelector(".s-about-modal-chips")).toBeNull();
+    expect(document.body.querySelector(".s-about-modal-credits")).toBeNull();
+  });
 
-    setLocale("zh-Hans");
+  it("groups license and link chips under one centered chips block", async () => {
+    mountAbout({
+      licenses: [{ label: "SySL-1.0", href: "https://example.test/sysl" }],
+      links: [{ label: "celestia.world", href: "https://celestia.world" }],
+    });
     await flushModal();
-    expect(labels().some((el) => el.textContent === "许可证")).toBe(true);
+    const chips = query<HTMLElement>(".s-about-modal-chips");
+    const slots = [...chips.querySelectorAll<HTMLElement>(".s-about-modal-links")].map((el) =>
+      el.getAttribute("data-slot"),
+    );
+    expect(slots).toEqual(["licenses", "links"]);
+    expect(
+      [...chips.querySelectorAll<HTMLAnchorElement>(".s-about-modal-link")].map(
+        (chip) => chip.textContent,
+      ),
+    ).toEqual(["SySL-1.0", "celestia.world"]);
+  });
+
+  it("frames the logo image inside the identity frame", async () => {
+    mountAbout({ logoSrc: "data:image/webp;base64,AAA" });
+    await flushModal();
+    const frame = query<HTMLElement>(".s-about-modal-logo-frame");
+    expect(frame.querySelector("img.s-about-modal-logo-img")).toBeTruthy();
+  });
 
-    setLocale("en");
+  it("keeps version and tagline on one subtitle line", async () => {
+    mountAbout({ version: "9.9.9", tagline: "Chat with your agents" });
     await flushModal();
-    expect(labels().some((el) => el.textContent === "License")).toBe(true);
+    const subtitle = query<HTMLElement>(".s-about-modal-subtitle");
+    expect(subtitle.querySelector(".s-about-modal-version")?.textContent).toContain("9.9.9");
+    expect(subtitle.querySelector(".s-about-modal-tagline")?.textContent).toBe(
+      "Chat with your agents",
+    );
+    expect(subtitle.querySelector(".s-about-modal-subtitle-sep")).toBeTruthy();
   });
 });

package/src/components/HkAboutModal.tsx

@@ -10,18 +10,34 @@ export interface HAboutLink {
   href: string;
 }
 
+/**
+ * One software-component version row.
+ *
+ * `value` is the machine-readable half (version, optionally plus a build
+ * hash) and renders in the mono/tabular face; `meta` is the optional
+ * human-facing trailing tag (e.g. the environment word 生产 / 测试),
+ * 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).
+ */
+export interface HAboutComponentVersion {
+  label: string;
+  value: string;
+  meta?: string;
+  metaTone?: "neutral" | "positive" | "caution";
+}
+
 /**
  * HkAboutModal — version / about dialog.
  * (Upstreamed from shittim-chest's plana-legacy layer.)
  *
- * Shows the app identity and version metadata plus optional branding: a
- * logo image, tagline, centered slogan + organization line, a made-by /
- * origin row, license row, a decorative backdrop layer (canvas or anything
- * else, rendered behind the content and pointer-inert), external link
- * chips and centered legal footer links (e.g. ICP filings). Version/build
- * hashes render as short hashes when longer than 12 chars (full value in
- * `title` tooltip). Every branding prop is optional — the modal degrades
- * to the plain identity + version card when none are given.
+ * Layout (2026-09 redesign): a centered identity hero (haloed logo, name,
+ * then version + tagline on one compact line), an optional credits block
+ * (made-by sentence with a linked author name + organization blurb), a
+ * bordered spec card holding the software-component versions, ghost chip
+ * rows for licenses / external links, and a muted legal footer (filing
+ * links + copyright). Every branding prop is optional — the modal degrades
+ * to the plain identity card when none are given.
  */
 export const HkAboutModal = defineComponent({
   name: "HkAboutModal",
@@ -31,28 +47,27 @@ export const HkAboutModal = defineComponent({
     appName: { type: String, required: true },
     /** Application version (e.g. "0.1.4"). */
     version: { type: String, required: true },
-    /** Optional app build hash / commit. */
-    buildHash: { type: String, default: undefined },
-    /** Optional engine version (backend), e.g. "0.2.1". */
-    engineVersion: { type: String, default: undefined },
-    /** Optional engine build hash / commit. */
-    engineBuildHash: { type: String, default: undefined },
     /** Optional logo image URL — replaces the first-letter tile. */
     logoSrc: { type: String, default: undefined },
-    /** Optional one-liner under the version (e.g. the app tagline). */
+    /** Optional one-liner shown beside the version (e.g. the app tagline). */
     tagline: { type: String, default: undefined },
-    /** Optional centered slogan below the header (the app's one-liner). */
-    slogan: { type: String, default: undefined },
-    /** Optional centered small line under the slogan (organization blurb). */
+    /** Optional centered small line under the credits (organization blurb). */
     description: { type: String, default: undefined },
-    /** Optional made-by row: left label (e.g. "由 伊欧 主创"). */
-    author: { type: String, default: undefined },
-    /** Optional right value of the made-by row (e.g. "来自 Celestia Island"). */
-    origin: { type: String, default: undefined },
-    /** Optional link applied to the origin value. */
-    originHref: { type: String, default: undefined },
-    /** Optional license identifier row (e.g. "BUSL-1.1"). */
-    license: { type: String, default: undefined },
+    /** Made-by sentence: text before the linked author name (e.g. "由"). */
+    madeByPrefix: { type: String, default: undefined },
+    /** Made-by sentence: the linked author name (e.g. "伊欧"). */
+    madeByName: { type: String, default: undefined },
+    /** Link applied to the author name (e.g. the GitHub profile). */
+    madeByNameHref: { type: String, default: undefined },
+    /** Made-by sentence: text after the name (e.g. " 主创，来自 …"). */
+    madeBySuffix: { type: String, default: undefined },
+    /** License chips (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: {
+      type: Array as PropType<HAboutComponentVersion[]>,
+      default: () => [],
+    },
     /** Optional copyright holder in the footer (defaults to the app name). */
     copyright: { type: String, default: undefined },
     /** Optional external links (e.g. GitHub, docs). */
@@ -73,21 +88,47 @@ export const HkAboutModal = defineComponent({
   setup(props, { emit }) {
     const { t } = useI18n();
 
-    function shortHash(hash: string): string {
-      return hash.length > 12 ? `${hash.slice(0, 12)}…` : hash;
-    }
-
-    const renderOriginValue = () => {
-      if (!props.originHref) return props.origin;
-      return (
+    const renderMadeBy = () => {
+      if (!props.madeByName) return null;
+      const name = props.madeByNameHref ? (
         <a
           class="s-about-modal-row-link"
-          href={props.originHref}
+          href={props.madeByNameHref}
           target="_blank"
           rel="noopener noreferrer"
         >
-          {props.origin}
+          {props.madeByName}
         </a>
+      ) : (
+        <span>{props.madeByName}</span>
+      );
+      return (
+        <p class="s-about-modal-made-by">
+          {props.madeByPrefix}
+          {name}
+          {props.madeBySuffix}
+        </p>
+      );
+    };
+
+    const renderChips = (items: HAboutLink[], slot: string) => {
+      if (items.length === 0) return null;
+      return (
+        <div class="s-about-modal-links" data-slot={slot}>
+          <div class="s-about-modal-links-list">
+            {items.map((item) => (
+              <a
+                key={item.href}
+                href={item.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                class="s-about-modal-link"
+              >
+                {item.label}
+              </a>
+            ))}
+          </div>
+        </div>
       );
     };
 
@@ -106,81 +147,70 @@ export const HkAboutModal = defineComponent({
           )}
           <div class="s-about-modal-body">
             <header class="s-about-modal-header">
-              {props.logoSrc ? (
-                <img class="s-about-modal-logo-img" src={props.logoSrc} alt="" draggable={false} />
-              ) : (
-                <div class="s-about-modal-logo">{props.appName.slice(0, 1).toUpperCase()}</div>
-              )}
-              <div>
+              <div class="s-about-modal-logo-frame">
+                {props.logoSrc ? (
+                  <img
+                    class="s-about-modal-logo-img"
+                    src={props.logoSrc}
+                    alt=""
+                    draggable={false}
+                  />
+                ) : (
+                  <div class="s-about-modal-logo">{props.appName.slice(0, 1).toUpperCase()}</div>
+                )}
+              </div>
+              <div class="s-about-modal-identity">
                 <h2 class="s-about-modal-name">{props.appName}</h2>
-                <p class="s-about-modal-version">
-                  {t("hikari::about.version", "Version")} {props.version}
+                <p class="s-about-modal-subtitle">
+                  <span class="s-about-modal-version">
+                    {t("hikari::about.version", "Version")} {props.version}
+                  </span>
+                  {props.tagline && (
+                    <>
+                      <span class="s-about-modal-subtitle-sep" aria-hidden="true">
+                        ·
+                      </span>
+                      <span class="s-about-modal-tagline">{props.tagline}</span>
+                    </>
+                  )}
                 </p>
-                {props.tagline && <p class="s-about-modal-tagline">{props.tagline}</p>}
               </div>
             </header>
 
-            {props.slogan && <p class="s-about-modal-slogan">{props.slogan}</p>}
-            {props.description && <p class="s-about-modal-description">{props.description}</p>}
+            {(props.madeByName || props.description) && (
+              <div class="s-about-modal-credits">
+                {renderMadeBy()}
+                {props.description && (
+                  <p class="s-about-modal-description">{props.description}</p>
+                )}
+              </div>
+            )}
 
-            <div class="s-about-modal-rows">
-              {(props.author || props.origin) && (
-                <div class="s-about-modal-row">
-                  <span class="s-about-modal-row-label">{props.author}</span>
-                  <span class="s-about-modal-row-value">{renderOriginValue()}</span>
-                </div>
-              )}
-              {props.license && (
-                <div class="s-about-modal-row">
-                  <span class="s-about-modal-row-label">
-                    {t("hikari::about.license", "License")}
-                  </span>
-                  <span class="s-about-modal-row-value">{props.license}</span>
-                </div>
-              )}
-              {props.buildHash && (
-                <div class="s-about-modal-row">
-                  <span class="s-about-modal-row-label">{t("hikari::about.buildHash", "Build")}</span>
-                  <span class="s-about-modal-row-value" title={props.buildHash}>
-                    {shortHash(props.buildHash)}
-                  </span>
-                </div>
-              )}
-              {props.engineVersion && (
-                <div class="s-about-modal-row">
-                  <span class="s-about-modal-row-label">
-                    {t("hikari::about.engineVersion", "Engine version")}
-                  </span>
-                  <span class="s-about-modal-row-value">{props.engineVersion}</span>
-                </div>
-              )}
-              {props.engineBuildHash && (
-                <div class="s-about-modal-row">
-                  <span class="s-about-modal-row-label">
-                    {t("hikari::about.engineBuildHash", "Engine build")}
-                  </span>
-                  <span class="s-about-modal-row-value" title={props.engineBuildHash}>
-                    {shortHash(props.engineBuildHash)}
-                  </span>
-                </div>
-              )}
-            </div>
+            {props.componentVersions.length > 0 && (
+              <div class="s-about-modal-rows">
+                {props.componentVersions.map((component) => (
+                  <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>
+                      {component.meta && (
+                        <span
+                          class="s-about-modal-row-meta"
+                          data-tone={component.metaTone ?? "neutral"}
+                        >
+                          {component.meta}
+                        </span>
+                      )}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
 
-            {props.links.length > 0 && (
-              <div class="s-about-modal-links">
-                <div class="s-about-modal-links-list">
-                  {props.links.map((link) => (
-                    <a
-                      key={link.href}
-                      href={link.href}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="s-about-modal-link"
-                    >
-                      {link.label}
-                    </a>
-                  ))}
-                </div>
+            {(props.licenses.length > 0 || props.links.length > 0) && (
+              <div class="s-about-modal-chips">
+                {renderChips(props.licenses, "licenses")}
+                {renderChips(props.links, "links")}
               </div>
             )}
 

package/src/i18n/locales/ar/platform.json

@@ -14,10 +14,6 @@
     "hikari::clipboard.copyFailed": "فشل النسخ",
     "hikari::about.title": "حول",
     "hikari::about.version": "الإصدار",
-    "hikari::about.buildHash": "البناء",
-    "hikari::about.engineVersion": "إصدار المحرك",
-    "hikari::about.engineBuildHash": "بناء المحرك",
-    "hikari::about.license": "الترخيص",
     "hikari::theme.mode": "وضع السمة",
     "hikari::theme.modeLight": "فاتح",
     "hikari::theme.modeDark": "داكن",

package/src/i18n/locales/de/platform.json

@@ -14,10 +14,6 @@
     "hikari::clipboard.copyFailed": "Kopieren fehlgeschlagen",
     "hikari::about.title": "Über",
     "hikari::about.version": "Version",
-    "hikari::about.buildHash": "Build",
-    "hikari::about.engineVersion": "Engine-Version",
-    "hikari::about.engineBuildHash": "Engine-Build",
-    "hikari::about.license": "Lizenz",
     "hikari::theme.mode": "Design-Modus",
     "hikari::theme.modeLight": "Hell",
     "hikari::theme.modeDark": "Dunkel",

package/src/i18n/locales/en/platform.json

@@ -14,10 +14,6 @@
     "hikari::clipboard.copyFailed": "Copy failed",
     "hikari::about.title": "About",
     "hikari::about.version": "Version",
-    "hikari::about.buildHash": "Build",
-    "hikari::about.engineVersion": "Engine version",
-    "hikari::about.engineBuildHash": "Engine build",
-    "hikari::about.license": "License",
     "hikari::theme.mode": "Theme mode",
     "hikari::theme.modeLight": "Light",
     "hikari::theme.modeDark": "Dark",

package/src/i18n/locales/es/platform.json

@@ -14,10 +14,6 @@
     "hikari::clipboard.copyFailed": "Error al copiar",
     "hikari::about.title": "Acerca de",
     "hikari::about.version": "Versión",
-    "hikari::about.buildHash": "Compilación",
-    "hikari::about.engineVersion": "Versión del motor",
-    "hikari::about.engineBuildHash": "Compilación del motor",
-    "hikari::about.license": "Licencia",
     "hikari::theme.mode": "Modo de tema",
     "hikari::theme.modeLight": "Claro",
     "hikari::theme.modeDark": "Oscuro",

package/src/i18n/locales/fr/platform.json

@@ -14,10 +14,6 @@
     "hikari::clipboard.copyFailed": "Échec de la copie",
     "hikari::about.title": "À propos",
     "hikari::about.version": "Version",
-    "hikari::about.buildHash": "Build",
-    "hikari::about.engineVersion": "Version du moteur",
-    "hikari::about.engineBuildHash": "Build du moteur",
-    "hikari::about.license": "Licence",
     "hikari::theme.mode": "Mode du thème",
     "hikari::theme.modeLight": "Clair",
     "hikari::theme.modeDark": "Sombre",

package/src/i18n/locales/ja/platform.json

@@ -14,10 +14,6 @@
     "hikari::clipboard.copyFailed": "コピーに失敗しました",
     "hikari::about.title": "このアプリについて",
     "hikari::about.version": "バージョン",
-    "hikari::about.buildHash": "ビルド",
-    "hikari::about.engineVersion": "エンジンバージョン",
-    "hikari::about.engineBuildHash": "エンジンビルド",
-    "hikari::about.license": "ライセンス",
     "hikari::theme.mode": "テーマモード",
     "hikari::theme.modeLight": "ライト",
     "hikari::theme.modeDark": "ダーク",

package/src/i18n/locales/ko/platform.json

@@ -14,10 +14,6 @@
     "hikari::clipboard.copyFailed": "복사 실패",
     "hikari::about.title": "정보",
     "hikari::about.version": "버전",
-    "hikari::about.buildHash": "빌드",
-    "hikari::about.engineVersion": "엔진 버전",
-    "hikari::about.engineBuildHash": "엔진 빌드",
-    "hikari::about.license": "라이선스",
     "hikari::theme.mode": "테마 모드",
     "hikari::theme.modeLight": "라이트",
     "hikari::theme.modeDark": "다크",

package/src/i18n/locales/pt/platform.json

@@ -14,10 +14,6 @@
     "hikari::clipboard.copyFailed": "Falha ao copiar",
     "hikari::about.title": "Sobre",
     "hikari::about.version": "Versão",
-    "hikari::about.buildHash": "Build",
-    "hikari::about.engineVersion": "Versão do motor",
-    "hikari::about.engineBuildHash": "Build do motor",
-    "hikari::about.license": "Licença",
     "hikari::theme.mode": "Modo do tema",
     "hikari::theme.modeLight": "Claro",
     "hikari::theme.modeDark": "Escuro",

package/src/i18n/locales/ru/platform.json

@@ -14,10 +14,6 @@
     "hikari::clipboard.copyFailed": "Не удалось скопировать",
     "hikari::about.title": "О программе",
     "hikari::about.version": "Версия",
-    "hikari::about.buildHash": "Сборка",
-    "hikari::about.engineVersion": "Версия движка",
-    "hikari::about.engineBuildHash": "Сборка движка",
-    "hikari::about.license": "Лицензия",
     "hikari::theme.mode": "Режим темы",
     "hikari::theme.modeLight": "Светлая",
     "hikari::theme.modeDark": "Тёмная",

package/src/i18n/locales/zh-Hans/platform.json

@@ -14,10 +14,6 @@
     "hikari::clipboard.copyFailed": "复制失败",
     "hikari::about.title": "关于",
     "hikari::about.version": "版本",
-    "hikari::about.buildHash": "构建",
-    "hikari::about.engineVersion": "引擎版本",
-    "hikari::about.engineBuildHash": "引擎构建",
-    "hikari::about.license": "许可证",
     "hikari::theme.mode": "主题模式",
     "hikari::theme.modeLight": "浅色",
     "hikari::theme.modeDark": "深色",

package/src/i18n/locales/zh-Hant/platform.json

@@ -14,10 +14,6 @@
     "hikari::clipboard.copyFailed": "複製失敗",
     "hikari::about.title": "關於",
     "hikari::about.version": "版本",
-    "hikari::about.buildHash": "建置",
-    "hikari::about.engineVersion": "引擎版本",
-    "hikari::about.engineBuildHash": "引擎建置",
-    "hikari::about.license": "授權條款",
     "hikari::theme.mode": "主題模式",
     "hikari::theme.modeLight": "淺色",
     "hikari::theme.modeDark": "深色",

package/src/index.ts

@@ -353,7 +353,11 @@ export { HkSecretRevealModal as HSecretRevealModal } from "./components/HkSecret
 export { HkCaptchaWidget as HCaptchaWidget, type HkCaptchaProvider } from "./components/HkCaptchaWidget";
 export { HkCaptchaModal as HCaptchaModal } from "./components/HkCaptchaModal";
 export { HkProtocolModal as HProtocolModal } from "./components/HkProtocolModal";
-export { HkAboutModal as HAboutModal, type HAboutLink } from "./components/HkAboutModal";
+export {
+  HkAboutModal as HAboutModal,
+  type HAboutComponentVersion,
+  type HAboutLink,
+} from "./components/HkAboutModal";
 export { HkLogWindow as HLogWindow, type HLogTab } from "./components/HkLogWindow";
 export { HkCookieConsent as HCookieConsent } from "./components/HkCookieConsent";
 export {