@celestia-island/hikari 0.45.5 → 0.45.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.45.5",
+  "version": "0.45.7",
   "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,25 +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-8, 0.5rem);
+  gap: var(--space-10, 0.625rem);
   text-align: center;
 }
 
-.s-about-modal-header > div {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+// 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: 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: 3rem;
-  height: 3rem;
-  flex-shrink: 0;
-  border-radius: var(--radius-lg, 12px);
+  width: 3.75rem;
+  height: 3.75rem;
   object-fit: contain;
   user-select: none;
 }
@@ -57,35 +71,69 @@
   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 {
-  margin: 0;
-  font-size: var(--text-base, 1rem);
-  font-weight: 600;
-  text-align: center;
-  color: rgb(var(--color-text));
+/* ── 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 {
@@ -95,10 +143,17 @@
   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 {
@@ -106,84 +161,143 @@
   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);
 }
 
+// One chip 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.
+.s-about-modal-links {
+  width: 100%;
+}
+
 .s-about-modal-links-list {
   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 {
@@ -200,4 +314,5 @@
 .s-about-modal-footer {
   display: flex;
   justify-content: center;
+  margin-top: calc(-1 * var(--space-6, 0.375rem));
 }

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

@@ -0,0 +1,58 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { compile } from "sass";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Compiled-stylesheet guard for HkAboutModal.
+ *
+ * Vitest stubs CSS (`test.css` is off), so the runtime suite can never catch
+ * a class the component emits that lost its rule — the #493 redesign dropped
+ * the `.s-about-modal-links` rule while keeping the element and every test
+ * stayed green. This test compiles the component sheet directly and asserts
+ * both directions of the class contract:
+ *
+ *   1. every `s-about-modal-*` class the TSX renders has a rule, and
+ *   2. every `s-about-modal-*` rule in the sheet is rendered by the TSX
+ *      (no dead selectors).
+ */
+
+const componentDir = resolve(dirname(fileURLToPath(import.meta.url)));
+
+function classesFrom(source: string): Set<string> {
+  // The component only uses static class strings; collect them from the
+  // `class="…"` attributes plus any bare `s-about-modal-*` token.
+  const found = new Set<string>();
+  for (const match of source.matchAll(/s-about-modal[\w-]*/g)) found.add(match[0]);
+  return found;
+}
+
+describe("HkAboutModal stylesheet contract", () => {
+  const tsx = readFileSync(resolve(componentDir, "HkAboutModal.tsx"), "utf8");
+  const scss = readFileSync(resolve(componentDir, "HkAboutModal.scss"), "utf8");
+  const css = compile(resolve(componentDir, "HkAboutModal.scss"), {
+    style: "expanded",
+  }).css;
+
+  it("compiles without warnings", () => {
+    expect(css).toContain(".s-about-modal");
+  });
+
+  it("gives every emitted class a rule", () => {
+    // Selector-side scan of the compiled sheet (not the SCSS source): a rule
+    // that failed to compile would otherwise still count as "present".
+    const declared = new Set([...css.matchAll(/\.(s-about-modal[\w-]*)/g)].map((m) => m[1]!));
+    const missing = [...classesFrom(tsx)].filter((name) => !declared.has(name)).sort();
+    expect(missing, "classes rendered without a stylesheet rule").toEqual([]);
+  });
+
+  it("declares no rule the component never renders", () => {
+    const rendered = classesFrom(tsx);
+    const dead = [...new Set([...scss.matchAll(/\.(s-about-modal[\w-]*)/g)].map((m) => m[1]!))]
+      .filter((name) => !rendered.has(name))
+      .sort();
+    expect(dead, "stylesheet selectors with no matching element").toEqual([]);
+  });
+});

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.)
@@ -117,10 +119,10 @@ describe("HkAboutModal branding", () => {
     expect(document.body.querySelector(".s-about-modal-row-link")).toBeNull();
   });
 
-  it("renders software-component version rows", async () => {
+  it("renders software-component version rows with a meta pill and tone", async () => {
     mountAbout({
       componentVersions: [
-        { label: "WebUI 版本", value: "0.1.138 REW2HF 生产" },
+        { label: "WebUI 版本", value: "0.1.138 REW2HF", meta: "生产", metaTone: "positive" },
         { label: "计算引擎版本", value: "0.1.0" },
       ],
     });
@@ -128,8 +130,37 @@ describe("HkAboutModal branding", () => {
     const rows = [...document.body.querySelectorAll<HTMLElement>(".s-about-modal-row")];
     expect(rows.length).toBe(2);
     expect(rows[0]!.textContent).toContain("WebUI 版本");
-    expect(rows[0]!.textContent).toContain("0.1.138 REW2HF 生产");
-    expect(rows[1]!.textContent).toContain("计算引擎版本");
+    // 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("carries the caution tone through to the pill", async () => {
+    mountAbout({
+      componentVersions: [
+        { label: "云模型调度引擎版本", value: "0.1.26", meta: "预发", metaTone: "caution" },
+      ],
+    });
+    await flushModal();
+    expect(query<HTMLElement>(".s-about-modal-row-meta").getAttribute("data-tone")).toBe(
+      "caution",
+    );
   });
 
   it("renders centered license chips", async () => {
@@ -205,5 +236,43 @@ describe("HkAboutModal branding", () => {
     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();
+  });
+
+  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();
+    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();
+  });
+
+  it("keeps version and tagline on one subtitle line", async () => {
+    mountAbout({ version: "9.9.9", tagline: "Chat with your agents" });
+    await flushModal();
+    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,23 +10,34 @@ export interface HAboutLink {
   href: string;
 }
 
-/** One software-component version row (label left, composed value right). */
+/**
+ * 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 a centered identity block (logo above the name above the tagline)
- * plus optional branding: a made-by sentence with a linked author name, a
- * centered organization line, software-component version rows, license and
- * external link chips, a decorative backdrop layer (canvas or anything
- * else, rendered behind the content and pointer-inert) and centered legal
- * footer links (e.g. ICP filings). Every branding prop is optional — the
- * modal degrades to the plain identity 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",
@@ -38,9 +49,9 @@ export const HkAboutModal = defineComponent({
     version: { type: String, required: true },
     /** 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 small line under the header (organization blurb). */
+    /** Optional centered small line under the credits (organization blurb). */
     description: { type: String, default: undefined },
     /** Made-by sentence: text before the linked author name (e.g. "由"). */
     madeByPrefix: { type: String, default: undefined },
@@ -100,6 +111,27 @@ export const HkAboutModal = defineComponent({
       );
     };
 
+    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>
+      );
+    };
+
     return () => (
       <HModal
         modelValue={props.modelValue}
@@ -115,67 +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>
 
-            {renderMadeBy()}
-            {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>
+            )}
 
             {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">{component.value}</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.licenses.length > 0 && (
-              <div class="s-about-modal-links">
-                <div class="s-about-modal-links-list">
-                  {props.licenses.map((license) => (
-                    <a
-                      key={license.href}
-                      href={license.href}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="s-about-modal-link"
-                    >
-                      {license.label}
-                    </a>
-                  ))}
-                </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/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 {