@celestia-island/hikari 0.55.224 → 0.55.226

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.224",
+  "version": "0.55.226",
   "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/HkScrollContainer.fade.contract.test.ts

@@ -0,0 +1,66 @@
+/**
+ * Source contract for the scroll-container edge fades (the 2026-10
+ * revision): each edge owns a CSS var and the viewport mask INTERSECTS a
+ * vertical and a horizontal gradient, so a two-axis container fades on all
+ * four sides and the corners fall off naturally.
+ *
+ * The regression this pins (user report: "the light effect is clipped at
+ * the two sides"): the old sheet wrote ONE `mask-image` per axis, so the
+ * last matching rule won, the other axis never faded, and its band ended in
+ * a hard cut. Vertical fades were missing entirely. Hence:
+ *   - exactly ONE mask declaration pair lives in the sheet (the composed
+ *     block on the viewport) — a new per-axis `mask-image` rule is drift;
+ *   - all four edge vars are declared (top/right/bottom/left, 0px base);
+ *   - start/end/both rules exist for BOTH axes;
+ *   - RTL swaps the horizontal vars instead of rewriting the mask.
+ */
+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));
+const sheet = readFileSync(join(here, "HkScrollContainer.scss"), "utf-8");
+
+describe("scroll fade composition contract", () => {
+  it("declares one composed mask on the viewport (no per-axis overrides)", () => {
+    const declarations = sheet.match(/^\s*-?(?:webkit-)?mask-image:/gm) ?? [];
+    // The composed block owns exactly one pair: -webkit-mask-image + mask-image.
+    expect(declarations.length).toBe(2);
+    expect(sheet).toContain("mask-composite: intersect");
+    expect(sheet).toContain("-webkit-mask-composite: source-in");
+  });
+
+  it("declares the four edge vars with zero defaults", () => {
+    for (const edge of ["top", "right", "bottom", "left"]) {
+      expect(sheet).toContain(`--hk-scroll-fade-${edge}: 0px;`);
+    }
+  });
+
+  it("fades both axes from the sensed overflow", () => {
+    for (const axis of ["v", "h"]) {
+      for (const state of ["start", "end", "both"]) {
+        expect(sheet).toContain(
+          `[data-${axis}-overflow="${state}"]`,
+        );
+      }
+    }
+    // The vertical half is what the old sheet was missing entirely.
+    expect(sheet).toContain('--hk-scroll-fade-top: var(--hk-scroll-fade-size)');
+    expect(sheet).toContain('--hk-scroll-fade-bottom: var(--hk-scroll-fade-size)');
+  });
+
+  it("swaps horizontal sides under RTL instead of rewriting the mask", () => {
+    expect(sheet).toContain(
+      '[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="start"]',
+    );
+    expect(sheet).toContain(
+      '[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="end"]',
+    );
+  });
+
+  it("routes the dock fades through the same edge vars", () => {
+    expect(sheet).toContain('--hk-scroll-fade-bottom: var(--hk-scroll-dock-fade, 2rem)');
+    expect(sheet).toContain('--hk-scroll-fade-top: var(--hk-scroll-dock-fade, 2rem)');
+  });
+});

package/src/components/HkScrollContainer.scss

@@ -39,18 +39,104 @@
   margin-inline: auto;
 }
 
-/* ── Optional edge fades (fade=true) ──────────────────────────────
-   Pure CSS driven by the sensed overflow state the component mirrors
-   onto the root (data-h-overflow). Only the sides with hidden
-   content fade. The fade size custom property is declared on the
-   root so consumers can override it from the container element. */
+/* ── Optional edge fades (fade=true / dock fades) ─────────────────
+   FOUR-EDGE composition (2026-10 revision): each edge owns a CSS var, and
+   the viewport's mask INTERSECTS a vertical and a horizontal gradient, so
+   the fade reaches zero on every side that hides content and the corners
+   fall off naturally in all four directions. The previous per-axis rules
+   overwrote one `mask-image` property, so a two-axis container only faded
+   one axis AND the band ended in a hard cut at the other axis's edges
+   (user report: the light effect is clipped at the two sides). Vertical
+   fades were missing entirely. Dock fades ride the same vars, which also
+   removes their old mask-override conflict. */
+.hk-scroll-container:is([data-fade="true"], [data-dock-fade]) > .hk-scroll-container-viewport {
+  --hk-scroll-fade-top: 0px;
+  --hk-scroll-fade-right: 0px;
+  --hk-scroll-fade-bottom: 0px;
+  --hk-scroll-fade-left: 0px;
+  -webkit-mask-image:
+    linear-gradient(
+      to bottom,
+      transparent 0,
+      #000 var(--hk-scroll-fade-top),
+      #000 calc(100% - var(--hk-scroll-fade-bottom)),
+      transparent 100%
+    ),
+    linear-gradient(
+      to right,
+      transparent 0,
+      #000 var(--hk-scroll-fade-left),
+      #000 calc(100% - var(--hk-scroll-fade-right)),
+      transparent 100%
+    );
+  -webkit-mask-composite: source-in;
+  -webkit-mask-repeat: no-repeat;
+  mask-image:
+    linear-gradient(
+      to bottom,
+      transparent 0,
+      #000 var(--hk-scroll-fade-top),
+      #000 calc(100% - var(--hk-scroll-fade-bottom)),
+      transparent 100%
+    ),
+    linear-gradient(
+      to right,
+      transparent 0,
+      #000 var(--hk-scroll-fade-left),
+      #000 calc(100% - var(--hk-scroll-fade-right)),
+      transparent 100%
+    );
+  mask-composite: intersect;
+  mask-repeat: no-repeat;
+}
+
 .hk-scroll-container[data-fade="true"] {
   --hk-scroll-fade-size: var(--space-24);
 }
 
-.hk-scroll-container[data-fade="true"][data-h-overflow="end"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--hk-scroll-fade-size));
-  mask-image: linear-gradient(to left, transparent 0, #000 var(--hk-scroll-fade-size));
+/* Vertical axis — the half the old implementation never had. */
+.hk-scroll-container[data-fade="true"][data-v-overflow="start"] {
+  --hk-scroll-fade-top: var(--hk-scroll-fade-size);
+}
+
+.hk-scroll-container[data-fade="true"][data-v-overflow="end"] {
+  --hk-scroll-fade-bottom: var(--hk-scroll-fade-size);
+}
+
+.hk-scroll-container[data-fade="true"][data-v-overflow="both"] {
+  --hk-scroll-fade-top: var(--hk-scroll-fade-size);
+  --hk-scroll-fade-bottom: var(--hk-scroll-fade-size);
+}
+
+/* Horizontal axis (LTR: inline start = left). */
+.hk-scroll-container[data-fade="true"][data-h-overflow="start"] {
+  --hk-scroll-fade-left: var(--hk-scroll-fade-size);
+}
+
+.hk-scroll-container[data-fade="true"][data-h-overflow="end"] {
+  --hk-scroll-fade-right: var(--hk-scroll-fade-size);
+}
+
+.hk-scroll-container[data-fade="true"][data-h-overflow="both"] {
+  --hk-scroll-fade-left: var(--hk-scroll-fade-size);
+  --hk-scroll-fade-right: var(--hk-scroll-fade-size);
+}
+
+/* RTL: the inline start edge is the right side, so the horizontal vars
+   swap instead of the mask (the mask itself is direction-neutral). */
+[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="start"] {
+  --hk-scroll-fade-left: 0px;
+  --hk-scroll-fade-right: var(--hk-scroll-fade-size);
+}
+
+[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="end"] {
+  --hk-scroll-fade-right: 0px;
+  --hk-scroll-fade-left: var(--hk-scroll-fade-size);
+}
+
+[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="both"] {
+  --hk-scroll-fade-left: var(--hk-scroll-fade-size);
+  --hk-scroll-fade-right: var(--hk-scroll-fade-size);
 }
 
 /* ── Anchored docks (dockTop / dockBottom slots) ─────────────────
@@ -74,14 +160,12 @@
    instead of a hard clip against the dock's top edge. Content never
    sits under the dock, so this fades the viewport's last few pixels,
    not the dock itself. */
-.hk-scroll-container[data-dock-fade="bottom"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hk-scroll-dock-fade, 2rem)), transparent);
-  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hk-scroll-dock-fade, 2rem)), transparent);
+.hk-scroll-container[data-dock-fade="bottom"] {
+  --hk-scroll-fade-bottom: var(--hk-scroll-dock-fade, 2rem);
 }
 
-.hk-scroll-container[data-dock-fade="top"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--hk-scroll-dock-fade, 2rem));
-  mask-image: linear-gradient(to bottom, transparent, #000 var(--hk-scroll-dock-fade, 2rem));
+.hk-scroll-container[data-dock-fade="top"] {
+  --hk-scroll-fade-top: var(--hk-scroll-dock-fade, 2rem);
 }
 
 /* ── Floating-dock tail clearance (dockTailClearance opt-in) ──────
@@ -135,39 +219,7 @@
 }
 
 
-.hk-scroll-container[data-fade="true"][data-h-overflow="start"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
-  mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
-}
-
-/* RTL: the horizontal scroll start/end edges swap sides, so the
- * directional fades flip (the "both" mask is end-symmetric — no flip). */
-[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="end"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
-  mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
-}
 
-[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="start"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--hk-scroll-fade-size));
-  mask-image: linear-gradient(to left, transparent 0, #000 var(--hk-scroll-fade-size));
-}
-
-.hk-scroll-container[data-fade="true"][data-h-overflow="both"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--hk-scroll-fade-size),
-    #000 calc(100% - var(--hk-scroll-fade-size)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--hk-scroll-fade-size),
-    #000 calc(100% - var(--hk-scroll-fade-size)),
-    transparent 100%
-  );
-}
 
 /* autoFollow content is bottom-anchored while it fits the viewport: the
    newest row hugs the bottom edge (a tail-following console, e.g. the

package/src/components/HkToast.scss

@@ -134,17 +134,21 @@
   to { transform: rotate(360deg); }
 }
 
-/* Inline action (e.g. Undo): a compact text pill in the toast chrome,
- *  between the body and the icon buttons. Sits in the same ghost-button
- *  family as copy/close, but reads as an affordance. */
+/* Inline action (e.g. Undo / open analysis): a GLASS PILL on the toast's
+ *  solid band. The old ghost outline sat flat on the accent fill — "a grey
+ *  outlined transparent button", user report 2026-10 — because it borrowed
+ *  the page-surface border tokens on a filled surface. A currentColor tint
+ *  follows every variant (white on the coloured bands, near-black on the
+ *  amber warning band) and reads as a real affordance without introducing
+ *  a second accent colour. */
 .hk-toast-action {
   flex: none;
   align-self: center;
   margin-inline-start: var(--space-4, 4px);
-  padding: var(--space-2, 2px) var(--space-8, 8px);
-  border: 1px solid rgb(var(--color-border, 100 100 100) / 30%);
-  border-radius: var(--radius-sm, 4px);
-  background: transparent;
+  padding: var(--space-4, 4px) var(--space-10, 10px);
+  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
+  border-radius: var(--radius-full, 9999px);
+  background: color-mix(in srgb, currentColor 14%, transparent);
   color: inherit;
   font: inherit;
   font-size: var(--text-sm, 0.8125rem);
@@ -152,14 +156,18 @@
   line-height: 1.4;
   cursor: pointer;
   white-space: nowrap;
-  opacity: 0.92;
-  transition: opacity var(--duration-fast, 0.15s) ease,
+  transition:
+    background var(--duration-fast, 0.15s) ease,
     border-color var(--duration-fast, 0.15s) ease;
 }
 
 .hk-toast-action:hover {
-  opacity: 1;
-  border-color: rgb(var(--color-border, 100 100 100) / 55%);
+  background: color-mix(in srgb, currentColor 24%, transparent);
+  border-color: color-mix(in srgb, currentColor 55%, transparent);
+}
+
+.hk-toast-action:active {
+  background: color-mix(in srgb, currentColor 32%, transparent);
 }
 
 .hk-toast-action:focus-visible {

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";