@celestia-island/hikari 0.55.225 → 0.55.227

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.225",
+  "version": "0.55.227",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkAboutBody.test.tsx

@@ -0,0 +1,124 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick } from "vue";
+
+import { HkAboutBody } from "./HkAboutModal";
+
+/**
+ * HkAboutBody contract tests for the extraction wave (2026-10-29): the
+ * body is the modal's whole layout mountable OUTSIDE a modal — the desktop
+ * settings' About pane renders it directly, and a second hand-copied body
+ * is exactly how the credits links drifted. These tests pin the two
+ * body-level knobs the modal never needed:
+ * - `filingsAsChips` renders the legal filings as their own chip group
+ *   (`data-slot="filings"`) and NO bare footer-links row
+ * - default (modal) behavior keeps the bare footer-links row and no filings
+ *   group
+ * - the default slot appends host content after the copyright footer
+ * - without a backdrop factory no backdrop layer renders (a body host may
+ *   not want the decorative canvas at all)
+ *
+ * (Repo test convention: raw createApp + document queries, no
+ * @vue/test-utils dependency.)
+ */
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mountBody(props: Record<string, unknown> = {}, slot?: () => unknown): void {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(HkAboutBody, { appName: "Test App", version: "1.2.3", ...props }, slot ? { default: slot } : undefined);
+    },
+  });
+  const app = createApp(Wrapper);
+  app.mount(container);
+  mounts.push({ app, container });
+}
+
+function query<T extends Element>(selector: string): T {
+  const el = document.body.querySelector<T>(selector);
+  expect(el, `${selector} renders`).toBeTruthy();
+  return el!;
+}
+
+async function flush() {
+  await nextTick();
+  await nextTick();
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+const FILINGS = [
+  { label: "苏ICP备2025155733号-2", href: "https://beian.miit.gov.cn/", face: "chip" as const },
+];
+
+describe("HkAboutBody extraction", () => {
+  it("mounts the full body outside a modal", async () => {
+    mountBody({
+      tagline: "Chat with your AI agents",
+      credits: [
+        { text: "来自 " },
+        { name: "Celestia Island", href: "https://celestia.world", face: "accent" },
+        { text: "，由 " },
+        { name: "伊欧", href: "https://github.com/langyo", face: "accent" },
+        { text: " 主创" },
+      ],
+      componentVersions: [{ label: "WebUI 版本", value: "0.1.0 master:abc1234" }],
+    });
+    await flush();
+
+    expect(query(".s-about-modal")).toBeTruthy();
+    // No HModal shell around it: no dialog surface, no overlay.
+    expect(document.body.querySelector(".hk-modal")).toBeNull();
+    expect(query(".s-about-modal-name").textContent).toContain("Test App");
+    expect(document.body.querySelectorAll(".s-about-modal-credit-link")).toHaveLength(2);
+    expect(query(".s-about-modal-row-number").textContent).toContain("master:abc1234");
+  });
+
+  it("filingsAsChips renders the filings group and no footer-links row", async () => {
+    mountBody({ footerLinks: FILINGS, filingsAsChips: true });
+    await flush();
+
+    const group = query('.s-about-modal-links[data-slot="filings"]');
+    const link = group.querySelector<HTMLAnchorElement>(".s-about-modal-link");
+    expect(link?.getAttribute("data-face")).toBe("chip");
+    expect(link?.getAttribute("href")).toBe("https://beian.miit.gov.cn/");
+    // The bare row is the modal face; chips mode must not render both.
+    expect(document.body.querySelector(".s-about-modal-footer-links")).toBeNull();
+  });
+
+  it("default filings keep the bare footer-links row with no group", async () => {
+    mountBody({ footerLinks: [{ label: "ICP", href: "https://beian.miit.gov.cn/" }] });
+    await flush();
+
+    expect(query(".s-about-modal-footer-links")).toBeTruthy();
+    expect(document.body.querySelector('.s-about-modal-links[data-slot="filings"]')).toBeNull();
+  });
+
+  it("appends default-slot content after the copyright footer", async () => {
+    mountBody({}, () => h("button", { class: "body-slot-row" }, "Check update"));
+    await flush();
+
+    const body = query(".s-about-modal-body");
+    const footer = body.querySelector(".s-about-modal-footer")!;
+    const button = body.querySelector(".body-slot-row")!;
+    expect(button).toBeTruthy();
+    // After the footer in document order: the slot rides at the body's end.
+    expect(footer.compareDocumentPosition(button) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
+  it("renders no backdrop layer when the host passes no factory", async () => {
+    mountBody();
+    await flush();
+
+    expect(document.body.querySelector(".s-about-modal-backdrop")).toBeNull();
+  });
+});

package/src/components/HkAboutModal.tsx

@@ -82,24 +82,27 @@ export interface HAboutComponentVersion {
 }
 
 /**
- * HkAboutModal — version / about dialog.
- * (Upstreamed from shittim-chest's plana-legacy layer.)
+ * HkAboutBody — the About dialog's body, mountable OUTSIDE a modal.
  *
- * 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 names, plus the
- * organization blurb), a
- * bordered spec card holding the software-component versions, and the
- * 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` / tinted `accent`) 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.
+ * Extracted verbatim from HkAboutModal (2026-10-29): the desktop settings'
+ * About section renders this same body inside its own pane, so every
+ * surface shares one implementation of the identity hero, the credits
+ * sentence, the spec card and the link rows — the hand-copied second body
+ * is exactly how the credits links drifted (both names pointing at the
+ * organization's URL, the trailing role word lost).
+ *
+ * Two body-level knobs exist for hosts that are not a modal:
+ *  - `filingsAsChips` renders the legal filings as a chip group
+ *    (`data-slot="filings"`) instead of the bare footer-text row — the
+ *    desktop surface's standing direction (2026-10-23: no bare text
+ *    hyperlinks on that surface) while the modal keeps the plain row
+ *    (2026-09-14).
+ *  - the default slot appends host content after the copyright footer
+ *    (the desktop's update-check row), still inside the body's flow.
  */
-export const HkAboutModal = defineComponent({
-  name: "HkAboutModal",
+export const HkAboutBody = defineComponent({
+  name: "HkAboutBody",
   props: {
-    modelValue: { type: Boolean, default: false },
     /** Application display name. */
     appName: { type: String, required: true },
     /** Application version (e.g. "0.1.4"). */
@@ -134,18 +137,17 @@ export const HkAboutModal = defineComponent({
     links: { type: Array as PropType<HAboutLink[]>, default: () => [] },
     /** Optional centered legal links above the copyright (ICP filings). */
     footerLinks: { type: Array as PropType<HAboutLink[]>, default: () => [] },
+    /** Render the legal filings as a chip group instead of the bare
+     *  footer-text row (the desktop surface's standing direction). */
+    filingsAsChips: { type: Boolean, default: false },
     /**
      * Optional decorative backdrop factory, rendered behind the content
-     * inside a clipped, pointer-inert layer. The modal owns only the layer —
+     * inside a clipped, pointer-inert layer. The body owns only the layer —
      * sizing, theming and the render loop belong to the returned subtree.
      */
     backdrop: { type: Function as PropType<() => unknown>, default: undefined },
-    title: { type: String, default: undefined },
-  },
-  emits: {
-    "update:modelValue": (_v: boolean) => true,
   },
-  setup(props, { emit }) {
+  setup(props, { slots }) {
     const { t } = useI18n();
 
     // One link renderer for every link in the dialog: credits names,
@@ -233,102 +235,195 @@ export const HkAboutModal = defineComponent({
     };
 
     return () => (
-      <HModal
-        modelValue={props.modelValue}
-        onUpdate:modelValue={(v: boolean) => emit("update:modelValue", v)}
-        title={props.title ?? t("hikari::about.title", "About")}
-        width="30rem"
-      >
-        <div class="s-about-modal">
-          {props.backdrop && (
-            <div class="s-about-modal-backdrop" aria-hidden="true">
-              {props.backdrop()}
+      <div class="s-about-modal">
+        {props.backdrop && (
+          <div class="s-about-modal-backdrop" aria-hidden="true">
+            {props.backdrop()}
+          </div>
+        )}
+        <div class="s-about-modal-body">
+          <header class="s-about-modal-header">
+            <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-body">
-            <header class="s-about-modal-header">
-              <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 class="s-about-modal-identity">
+              <h2 class="s-about-modal-name">{props.appName}</h2>
+              <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>
+                  </>
                 )}
-              </div>
-              <div class="s-about-modal-identity">
-                <h2 class="s-about-modal-name">{props.appName}</h2>
-                <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>
-              </div>
-            </header>
+              </p>
+            </div>
+          </header>
 
-            {(props.credits.length > 0 || props.description) && (
-              <div class="s-about-modal-credits">
-                {renderCredits()}
-                {props.description && (
-                  <p class="s-about-modal-description">{props.description}</p>
-                )}
-              </div>
-            )}
+          {(props.credits.length > 0 || props.description) && (
+            <div class="s-about-modal-credits">
+              {renderCredits()}
+              {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">
-                      <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.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.licenses.length > 0 || props.links.length > 0) && (
-              <div class="s-about-modal-chips">
-                {renderLinks(props.licenses, "licenses")}
-                {renderLinks(props.links, "links")}
-              </div>
-            )}
+          {(props.licenses.length > 0 || props.links.length > 0) && (
+            <div class="s-about-modal-chips">
+              {renderLinks(props.licenses, "licenses")}
+              {renderLinks(props.links, "links")}
+            </div>
+          )}
 
-            {visibleLinks(props.footerLinks).length > 0 && (
-              <div class="s-about-modal-footer-links">
-                {visibleLinks(props.footerLinks).map((link, index) =>
-                  renderLink(link, "s-about-modal-footer-link", `legal:${index}`),
-                )}
-              </div>
-            )}
+          {props.filingsAsChips
+            ? // The desktop surface's filings: chips in their own group,
+              // in the body flow (2026-10-23 direction).
+              renderLinks(props.footerLinks, "filings")
+            : visibleLinks(props.footerLinks).length > 0 && (
+                <div class="s-about-modal-footer-links">
+                  {visibleLinks(props.footerLinks).map((link, index) =>
+                    renderLink(link, "s-about-modal-footer-link", `legal:${index}`),
+                  )}
+                </div>
+              )}
 
-            <footer class="s-about-modal-footer">
-              <HBadge variant="muted">
-                © {new Date().getFullYear()} {props.copyright ?? props.appName}
-              </HBadge>
-            </footer>
-          </div>
+          <footer class="s-about-modal-footer">
+            <HBadge variant="muted">
+              © {new Date().getFullYear()} {props.copyright ?? props.appName}
+            </HBadge>
+          </footer>
+
+          {slots.default?.()}
         </div>
+      </div>
+    );
+  },
+});
+
+/**
+ * HkAboutModal — version / about dialog.
+ * (Upstreamed from shittim-chest's plana-legacy layer.)
+ *
+ * A centered HModal wrapping {@link HkAboutBody} — the body carries the
+ * whole layout (identity hero, credits block, spec card, link rows) and is
+ * the piece other surfaces mount directly, so the modal and the settings
+ * pane cannot drift. Every link opens in a new tab and renders in the face
+ * its entry asks for: the ghost chip, or bare text (`plain` / tinted
+ * `accent`) 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",
+  props: {
+    modelValue: { type: Boolean, default: false },
+    /** Application display name. */
+    appName: { type: String, required: true },
+    /** Application version (e.g. "0.1.4"). */
+    version: { type: String, required: true },
+    /** Optional logo image URL — replaces the first-letter tile. */
+    logoSrc: { type: String, default: undefined },
+    /** Optional one-liner shown beside the version (e.g. the app tagline). */
+    tagline: { type: String, default: undefined },
+    /** Optional centered small line under the credits (organization blurb). */
+    description: { type: String, default: undefined },
+    /**
+     * Credits sentence, assembled from text runs and linked names
+     * (e.g. 来自 <Celestia Island>，由 <伊欧> 主创). Each name renders in the
+     * face its entry asks for — `chip`, bare text with `plain`, or bare
+     * text tinted in the primary colour with `accent`.
+     */
+    credits: { type: Array as PropType<HAboutCredit[]>, default: () => [] },
+    /** 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: {
+      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. 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: () => [] },
+    /** Render the legal filings as a chip group (see {@link HkAboutBody}). */
+    filingsAsChips: { type: Boolean, default: false },
+    /**
+     * Optional decorative backdrop factory, rendered behind the content
+     * inside a clipped, pointer-inert layer. The modal owns only the layer —
+     * sizing, theming and the render loop belong to the returned subtree.
+     */
+    backdrop: { type: Function as PropType<() => unknown>, default: undefined },
+    title: { type: String, default: undefined },
+  },
+  emits: {
+    "update:modelValue": (_v: boolean) => true,
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n();
+
+    return () => (
+      <HModal
+        modelValue={props.modelValue}
+        onUpdate:modelValue={(v: boolean) => emit("update:modelValue", v)}
+        title={props.title ?? t("hikari::about.title", "About")}
+        width="30rem"
+      >
+        <HkAboutBody
+          appName={props.appName}
+          version={props.version}
+          logoSrc={props.logoSrc}
+          tagline={props.tagline}
+          description={props.description}
+          credits={props.credits}
+          licenses={props.licenses}
+          componentVersions={props.componentVersions}
+          copyright={props.copyright}
+          links={props.links}
+          footerLinks={props.footerLinks}
+          filingsAsChips={props.filingsAsChips}
+          backdrop={props.backdrop}
+        />
       </HModal>
     );
   },

package/src/components/HkPopupSelect.mobile.test.tsx

@@ -31,6 +31,10 @@ afterEach(() => {
 
 const OPTIONS = [{ value: "a1", label: "Agent One" }];
 
+const DESCRIBED_OPTIONS = [
+  { value: "a1", label: "Agent One", description: "Personal · /srv/one" },
+];
+
 describe("HkPopupSelect (mobile sheet)", () => {
   it("hideLabel keeps the sheet's breadcrumb title on the field's name", async () => {
     // hideLabel only suppresses the INLINE caption; the sheet header
@@ -47,4 +51,18 @@ describe("HkPopupSelect (mobile sheet)", () => {
     expect(title, "the sheet renders a title band").toBeTruthy();
     expect(title!.textContent).toBe("Agent");
   });
+
+  it("described options keep their second line inside the sheet", async () => {
+    const c = mount(
+      h(HkPopupSelect, { modelValue: "", options: DESCRIBED_OPTIONS }),
+    );
+    const trigger = c.querySelector<HTMLButtonElement>(".hk-popup-select-trigger")!;
+    trigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const desc = document.body.querySelector(
+      ".hk-popover-panel .hk-popup-select-item-desc",
+    );
+    expect(desc?.textContent).toBe("Personal · /srv/one");
+  });
 });

package/src/components/HkPopupSelect.scss

@@ -149,6 +149,38 @@
   @include mi.item;
 }
 
+/* Two-line option rows, rendered ONLY for options that carry a
+ * description — a stock row keeps the bare label span (wrap allowed, no
+ * optical shift) so existing consumers see byte-identical geometry (R2).
+ * The body owns the row's flex growth so both lines ellipsis against the
+ * same edge. */
+.hk-popup-select-item-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.hk-popup-select-item-label {
+  @include mi.label;
+}
+
+/* The secondary line inherits the row color (hover/checked tints flow
+ * through) and steps down via opacity + the caption size, so it stays
+ * clearly meta against both the plain and the primary checked face. */
+.hk-popup-select-item-desc {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-xs);
+  font-weight: 400;
+  color: inherit;
+  opacity: 0.62;
+  /* Same italic-overhang clipping room the label mixin reserves. */
+  padding-inline-end: var(--hk-menu-item-label-cushion);
+}
+
 /* Keyboard highlight face yields to checked/active; the hover face comes
  * from mi.item's own guarded :hover (identical values, higher specificity). */
 .hk-popup-select-item[data-highlighted]:not([data-checked]):not([data-active]) {

package/src/components/HkPopupSelect.test.tsx

@@ -81,4 +81,51 @@ describe("HkPopupSelect", () => {
     const c = mount(h(HkPopupSelect, { modelValue: "a1", label: "Agent", options: OPTIONS }));
     expect(c.querySelector(".hk-popup-select-trigger")!.getAttribute("aria-label")).toBeNull();
   });
+
+  it("an option description renders its own muted line under the label", async () => {
+    const c = mount(
+      h(HkPopupSelect, {
+        modelValue: "",
+        options: [{ value: "a1", label: "Agent One", description: "Personal · /srv/one" }],
+      }),
+    );
+    // Open the popout — option rows live in the anchored panel, which
+    // mounts across a microtask (the mobile sheet tests await the same).
+    c.querySelector<HTMLButtonElement>(".hk-popup-select-trigger")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const item = document.body.querySelector(".hk-popup-select-item")!;
+    expect(item.textContent).toContain("Agent One");
+    const desc = item.querySelector(".hk-popup-select-item-desc");
+    expect(desc?.textContent).toBe("Personal · /srv/one");
+    // The label sits in its own span so the two lines never merge.
+    expect(item.querySelector(".hk-popup-select-item-label")?.textContent).toBe("Agent One");
+  });
+
+  it("no description → the exact stock DOM: bare label span, no body wrapper", async () => {
+    const c = mount(h(HkPopupSelect, { modelValue: "", options: OPTIONS }));
+    c.querySelector<HTMLButtonElement>(".hk-popup-select-trigger")!
+      .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const item = document.body.querySelector(".hk-popup-select-item")!;
+    // R2 contract: description-less rows render the pre-description DOM —
+    // no two-line anatomy, so no mi.label ellipsis/optical spec applies.
+    expect(item.querySelector(".hk-popup-select-item-body")).toBeNull();
+    expect(item.querySelector(".hk-popup-select-item-label")).toBeNull();
+    expect(item.querySelector("span")?.textContent).toBe("Agent One");
+  });
+
+  it("the collapsed trigger shows the label only, never the description", () => {
+    const c = mount(
+      h(HkPopupSelect, {
+        modelValue: "a1",
+        options: [{ value: "a1", label: "Agent One", description: "secret-meta" }],
+      }),
+    );
+    const value = c.querySelector(".hk-popup-select-value")!;
+    expect(value.textContent).toBe("Agent One");
+    expect(value.textContent).not.toContain("secret-meta");
+  });
 });

package/src/components/HkPopupSelect.tsx

@@ -9,6 +9,15 @@ import "./HkPopupSelect.scss";
 export interface HkPopupSelectOption {
   value: string;
   label: string;
+  /** Secondary line under the label, inside the same option row — a
+   * muted, single-line ellipsis strip for meta text (a row's owner,
+   * address, type) that must stay visible without leaking into the
+   * collapsed trigger, which keeps showing `label` alone. Absent → the
+   * row renders the EXACT stock DOM (bare label span, wrap allowed, no
+   * optical shift): the two-line anatomy exists only when there is a
+   * second line to show (R2: the mi.label ellipsis + 0.5px spec is a
+   * behavior change stock rows must not inherit silently). */
+  description?: string;
 }
 
 const activePopupId = ref<string | null>(null);
@@ -232,7 +241,16 @@ export default defineComponent({
                     onClick={() => select(opt.value)}
                     onPointerenter={() => { highlightedIndex.value = i; }}
                   >
-                    <span>{opt.label}</span>
+                    {opt.description ? (
+                      <span class="hk-popup-select-item-body">
+                        <span class="hk-popup-select-item-label">{opt.label}</span>
+                        <span class="hk-popup-select-item-desc">{opt.description}</span>
+                      </span>
+                    ) : (
+                      // Stock rows keep the exact pre-description DOM: no
+                      // body wrapper, no mi.label spec — the R2 contract.
+                      <span>{opt.label}</span>
+                    )}
                   </div>
                 ))}
           </HkScrollContainer>

package/src/index.ts

@@ -534,6 +534,7 @@ export { HkCaptchaModal as HCaptchaModal } from "./components/HkCaptchaModal";
 export { HkProtocolModal as HProtocolModal } from "./components/HkProtocolModal";
 export {
   HkAboutModal as HAboutModal,
+  HkAboutBody as HAboutBody,
   type HAboutComponentVersion,
   type HAboutCredit,
   type HAboutLink,
@@ -806,6 +807,7 @@ export { HkCaptchaWidget as HkCaptchaWidget } from "./components/HkCaptchaWidget
 export { HkCaptchaModal as HkCaptchaModal } from "./components/HkCaptchaModal";
 export { HkProtocolModal as HkProtocolModal } from "./components/HkProtocolModal";
 export { HkAboutModal as HkAboutModal } from "./components/HkAboutModal";
+export { HkAboutBody as HkAboutBody } from "./components/HkAboutModal";
 export { HkLogWindow as HkLogWindow } from "./components/HkLogWindow";
 export { HkSettingsBody as HkSettingsBody } from "./components/HkSettingsDialog";
 export { HkSettingsDialog as HkSettingsDialog } from "./components/HkSettingsDialog";