@celestia-island/hikari 0.45.2 → 0.45.4

package/package.json

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

@@ -72,6 +72,14 @@
   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));
+}
+
 .s-about-modal-tagline {
   margin: var(--space-2, 0.125rem) 0 0;
   font-size: var(--text-xs, 0.75rem);
@@ -80,8 +88,9 @@
 
 .s-about-modal-description {
   margin: 0;
-  font-size: var(--text-sm, 0.8125rem);
-  line-height: 1.55;
+  font-size: var(--text-xs, 0.75rem);
+  line-height: 1.6;
+  text-align: center;
   color: rgb(var(--color-muted));
 }
 
@@ -127,6 +136,7 @@
 .s-about-modal-links-list {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   gap: var(--space-8, 0.5rem);
 }
 
@@ -154,7 +164,25 @@
     0 0 0 4px rgb(var(--color-primary));
 }
 
+.s-about-modal-footer-links {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--space-12, 0.75rem);
+}
+
+.s-about-modal-footer-link {
+  font-size: var(--text-xs, 0.75rem);
+  color: rgb(var(--color-muted));
+  text-decoration: none;
+}
+
+.s-about-modal-footer-link:hover {
+  color: rgb(var(--color-primary));
+  text-decoration: underline;
+}
+
 .s-about-modal-footer {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
 }

package/src/components/HkAboutModal.test.tsx

@@ -94,15 +94,18 @@ describe("HkAboutModal branding", () => {
     expect(query<HTMLElement>(".s-about-modal-description").textContent).toBe("Save the world.");
   });
 
-  it("renders author and license rows with an linked author", async () => {
+  it("renders the made-by row with a linked origin", async () => {
     mountAbout({
-      author: "Celestia Island",
-      authorHref: "https://github.com/celestia-island",
+      author: "由 伊欧 主创",
+      origin: "来自 Celestia Island",
+      originHref: "https://github.com/celestia-island",
       license: "BUSL-1.1",
     });
     await flushModal();
+    const row = query<HTMLElement>(".s-about-modal-row");
+    expect(row.querySelector(".s-about-modal-row-label")?.textContent).toBe("由 伊欧 主创");
     const link = query<HTMLAnchorElement>(".s-about-modal-row-link");
-    expect(link.textContent).toBe("Celestia Island");
+    expect(link.textContent).toBe("来自 Celestia Island");
     expect(link.getAttribute("href")).toBe("https://github.com/celestia-island");
     expect(link.getAttribute("target")).toBe("_blank");
     const rows = [...document.body.querySelectorAll<HTMLElement>(".s-about-modal-row")];
@@ -111,13 +114,28 @@ describe("HkAboutModal branding", () => {
     expect(licenseRow!.textContent).toContain("License");
   });
 
-  it("renders the author row as plain text without authorHref", async () => {
-    mountAbout({ author: "Celestia Island" });
+  it("renders the made-by row as plain text without originHref", async () => {
+    mountAbout({ author: "由 伊欧 主创", origin: "来自 Celestia Island" });
     await flushModal();
-    expect(query<HTMLElement>(".s-about-modal-row").textContent).toContain("Celestia Island");
+    expect(query<HTMLElement>(".s-about-modal-row").textContent).toContain("来自 Celestia Island");
     expect(document.body.querySelector(".s-about-modal-row-link")).toBeNull();
   });
 
+  it("renders the centered slogan and 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"),
+    ];
+    expect(links.length).toBe(1);
+    expect(links[0]!.textContent).toBe("京ICP备2026xxxx号");
+    expect(links[0]!.getAttribute("href")).toBe("https://beian.miit.gov.cn/");
+  });
+
   it("renders the backdrop factory inside the clipped layer", async () => {
     mountAbout({ backdrop: () => h("div", { class: "test-backdrop-marker" }) });
     await flushModal();
@@ -159,23 +177,19 @@ describe("HkAboutModal branding", () => {
     expect(badge.textContent).toContain(`© ${year} Test App`);
   });
 
-  it("localizes the author and license labels", async () => {
-    mountAbout({ author: "Celestia Island", license: "BUSL-1.1" });
+  it("localizes the license label", async () => {
+    mountAbout({ license: "BUSL-1.1" });
     await flushModal();
-    const rows = () => [
+    const labels = () => [
       ...document.body.querySelectorAll<HTMLElement>(".s-about-modal-row-label"),
     ];
 
     setLocale("zh-Hans");
     await flushModal();
-    let text = rows().map((el) => el.textContent);
-    expect(text.some((t) => t === "作者")).toBe(true);
-    expect(text.some((t) => t === "许可证")).toBe(true);
+    expect(labels().some((el) => el.textContent === "许可证")).toBe(true);
 
     setLocale("en");
     await flushModal();
-    text = rows().map((el) => el.textContent);
-    expect(text.some((t) => t === "Author")).toBe(true);
-    expect(text.some((t) => t === "License")).toBe(true);
+    expect(labels().some((el) => el.textContent === "License")).toBe(true);
   });
 });

package/src/components/HkAboutModal.tsx

@@ -15,12 +15,13 @@ export interface HAboutLink {
  * (Upstreamed from shittim-chest's plana-legacy layer.)
  *
  * Shows the app identity and version metadata plus optional branding: a
- * logo image, tagline, organization blurb, author / license rows, a
- * decorative backdrop layer (canvas or anything else, rendered behind the
- * content and pointer-inert) and external links. 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.
+ * 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.
  */
 export const HkAboutModal = defineComponent({
   name: "HkAboutModal",
@@ -40,18 +41,24 @@ export const HkAboutModal = defineComponent({
     logoSrc: { type: String, default: undefined },
     /** Optional one-liner under the version (e.g. the app tagline). */
     tagline: { type: String, default: undefined },
-    /** Optional paragraph below the header (vision / organization blurb). */
+    /** 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). */
     description: { type: String, default: undefined },
-    /** Optional author / organization row. */
+    /** Optional made-by row: left label (e.g. "由 伊欧 主创"). */
     author: { type: String, default: undefined },
-    /** Optional link applied to the author value. */
-    authorHref: { 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 },
     /** Optional copyright holder in the footer (defaults to the app name). */
     copyright: { type: String, default: undefined },
     /** Optional external links (e.g. GitHub, docs). */
     links: { type: Array as PropType<HAboutLink[]>, default: () => [] },
+    /** Optional centered legal links above the copyright (ICP filings). */
+    footerLinks: { type: Array as PropType<HAboutLink[]>, default: () => [] },
     /**
      * Optional decorative backdrop factory, rendered behind the content
      * inside a clipped, pointer-inert layer. The modal owns only the layer —
@@ -70,16 +77,16 @@ export const HkAboutModal = defineComponent({
       return hash.length > 12 ? `${hash.slice(0, 12)}…` : hash;
     }
 
-    const renderAuthorValue = () => {
-      if (!props.authorHref) return props.author;
+    const renderOriginValue = () => {
+      if (!props.originHref) return props.origin;
       return (
         <a
           class="s-about-modal-row-link"
-          href={props.authorHref}
+          href={props.originHref}
           target="_blank"
           rel="noopener noreferrer"
         >
-          {props.author}
+          {props.origin}
         </a>
       );
     };
@@ -113,13 +120,14 @@ export const HkAboutModal = defineComponent({
               </div>
             </header>
 
+            {props.slogan && <p class="s-about-modal-slogan">{props.slogan}</p>}
             {props.description && <p class="s-about-modal-description">{props.description}</p>}
 
             <div class="s-about-modal-rows">
-              {props.author && (
+              {(props.author || props.origin) && (
                 <div class="s-about-modal-row">
-                  <span class="s-about-modal-row-label">{t("hikari::about.author", "Author")}</span>
-                  <span class="s-about-modal-row-value">{renderAuthorValue()}</span>
+                  <span class="s-about-modal-row-label">{props.author}</span>
+                  <span class="s-about-modal-row-value">{renderOriginValue()}</span>
                 </div>
               )}
               {props.license && (
@@ -176,6 +184,22 @@ export const HkAboutModal = defineComponent({
               </div>
             )}
 
+            {props.footerLinks.length > 0 && (
+              <div class="s-about-modal-footer-links">
+                {props.footerLinks.map((link) => (
+                  <a
+                    key={link.href}
+                    href={link.href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="s-about-modal-footer-link"
+                  >
+                    {link.label}
+                  </a>
+                ))}
+              </div>
+            )}
+
             <footer class="s-about-modal-footer">
               <HBadge variant="muted">
                 © {new Date().getFullYear()} {props.copyright ?? props.appName}

package/src/components/HkModal.footerLead.test.tsx

@@ -0,0 +1,123 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkModal from "./HkModal";
+
+/**
+ * HkModal footerLead slot contract tests:
+ * - the named slot renders inside .hk-modal-footer BEFORE the action buttons,
+ *   wrapped in .hk-modal-footer-lead, with the band marked .hk-modal-footer--lead
+ * - the band still renders with ONLY a footerLead (no footerActions) — a lead
+ *   alone must not vanish with the actions
+ * - absent the slot, no new DOM appears (backward compat)
+ * - the explicit `footer` slot keeps precedence over footerLead + footerActions
+ *   (existing full-custom contract unchanged)
+ */
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+interface Harness {
+  container: HTMLElement;
+  footer: HTMLElement | null;
+}
+
+async function mountModal(
+  props: Record<string, unknown>,
+  slots: Record<string, unknown> = {},
+): Promise<Harness> {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const open = ref(true);
+  const Wrapper = defineComponent({
+    setup() {
+      // A FRESH slots object per Wrapper render: updateSlots mutates the
+      // slots object it is handed (deleting keys absent from a later
+      // sibling mount's shape), and a shared literal would lose footerLead
+      // on re-render.
+      return () =>
+        h(HkModal, {
+          ...props,
+          modelValue: open.value,
+          "onUpdate:modelValue": (v: boolean) => { open.value = v; },
+        }, { ...slots });
+    },
+  });
+  const app = createApp(Wrapper);
+  app.mount(container);
+  mounts.push({ app, container });
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await nextTick();
+  // HkModal teleports to body and sibling test files in this worker can
+  // leave their own modals behind — scope to the NEWEST mounted footer
+  // instead of the document-first match.
+  const footers = document.querySelectorAll(".hk-modal-footer");
+  return {
+    container,
+    footer: footers.length ? (footers[footers.length - 1] as HTMLElement) : null,
+  };
+}
+
+describe("HkModal footerLead slot", () => {
+  it("renders the lead before the action buttons inside the band", async () => {
+    const { footer } = await mountModal(
+      {
+        title: "Config",
+        footerActions: [{ label: "Add", variant: "primary" }],
+      },
+      { footerLead: () => h("button", { class: "lead-jump", "data-test": "jump" }, "JUMP") },
+    );
+    expect(footer).not.toBeNull();
+    expect(footer?.classList.contains("hk-modal-footer--lead")).toBe(true);
+    const lead = footer?.querySelector(".hk-modal-footer-lead");
+    expect(lead).not.toBeNull();
+    expect(lead?.querySelector(".lead-jump")?.textContent).toBe("JUMP");
+
+    const children = footer ? Array.from(footer.children) : [];
+    expect(children[0]?.classList.contains("hk-modal-footer-lead")).toBe(true);
+    expect(children.length).toBe(2);
+    expect(children[1]?.textContent).toBe("Add");
+  });
+
+  it("keeps the band alive with ONLY a footerLead and no actions", async () => {
+    const { footer } = await mountModal(
+      { title: "Config" },
+      { footerLead: () => h("button", { class: "lead-jump" }, "JUMP") },
+    );
+    expect(footer).not.toBeNull();
+    expect(footer?.classList.contains("hk-modal-footer--lead")).toBe(true);
+    expect(footer?.querySelector(".hk-modal-footer-lead")).not.toBeNull();
+    // No action buttons — the only children are the lead wrapper.
+    const children = footer ? Array.from(footer.children) : [];
+    expect(children).toHaveLength(1);
+  });
+
+  it("adds no lead DOM and no band when both lead and actions are absent", async () => {
+    const { footer } = await mountModal({ title: "Config" });
+    expect(footer).toBeNull();
+  });
+
+  it("the explicit footer slot keeps precedence over footerLead and actions", async () => {
+    const { footer } = await mountModal(
+      {
+        title: "Config",
+        footerActions: [{ label: "Add" }],
+      },
+      {
+        footer: () => h("div", { class: "custom-footer" }, "CUSTOM"),
+        footerLead: () => h("button", { class: "lead-jump" }, "JUMP"),
+      },
+    );
+    expect(footer).not.toBeNull();
+    expect(footer?.classList.contains("hk-modal-footer--lead")).toBe(false);
+    expect(footer?.querySelector(".custom-footer")?.textContent).toBe("CUSTOM");
+    expect(footer?.querySelector(".hk-modal-footer-lead")).toBeNull();
+    expect(footer?.textContent).not.toContain("Add");
+  });
+});

package/src/components/HkModal.scss

@@ -298,6 +298,21 @@
   }
 }
 
+// Lead content (e.g. a ghost jump link into the admin console) rendered at
+// the footer's inline-start with the action buttons still pinned at
+// inline-end — the footer counterpart of .hk-modal-header-lead. The lead's
+// auto inline-end margin absorbs the slack (same distribution trick the
+// header uses), so the layout mirrors correctly in RTL without a
+// space-between override.
+.hk-modal-footer--lead {
+  .hk-modal-footer-lead {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    margin-inline-end: auto;
+  }
+}
+
 // ------
 // Responsive — full-screen on narrow viewports
 // ------

package/src/components/HkModal.tsx

@@ -695,10 +695,13 @@ export default defineComponent({
       if (slots.footer) {
         return <div class="hk-modal-footer">{slots.footer()}</div>;
       }
-      if (props.footerActions && props.footerActions.length > 0) {
+      const hasLead = Boolean(slots.footerLead);
+      const hasActions = Boolean(props.footerActions && props.footerActions.length > 0);
+      if (hasLead || hasActions) {
         return (
-          <div class="hk-modal-footer">
-            {props.footerActions.map((action, i) => (
+          <div class={["hk-modal-footer", hasLead ? "hk-modal-footer--lead" : ""]}>
+            {hasLead && <div class="hk-modal-footer-lead">{slots.footerLead?.()}</div>}
+            {props.footerActions?.map((action, i) => (
               <HButton
                 key={i}
                 variant={action.variant ?? "secondary"}

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

@@ -17,7 +17,6 @@
     "hikari::about.buildHash": "البناء",
     "hikari::about.engineVersion": "إصدار المحرك",
     "hikari::about.engineBuildHash": "بناء المحرك",
-    "hikari::about.author": "المؤلف",
     "hikari::about.license": "الترخيص",
     "hikari::theme.mode": "وضع السمة",
     "hikari::theme.modeLight": "فاتح",

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

@@ -17,7 +17,6 @@
     "hikari::about.buildHash": "Build",
     "hikari::about.engineVersion": "Engine-Version",
     "hikari::about.engineBuildHash": "Engine-Build",
-    "hikari::about.author": "Autor",
     "hikari::about.license": "Lizenz",
     "hikari::theme.mode": "Design-Modus",
     "hikari::theme.modeLight": "Hell",

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

@@ -17,7 +17,6 @@
     "hikari::about.buildHash": "Build",
     "hikari::about.engineVersion": "Engine version",
     "hikari::about.engineBuildHash": "Engine build",
-    "hikari::about.author": "Author",
     "hikari::about.license": "License",
     "hikari::theme.mode": "Theme mode",
     "hikari::theme.modeLight": "Light",

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

@@ -17,7 +17,6 @@
     "hikari::about.buildHash": "Compilación",
     "hikari::about.engineVersion": "Versión del motor",
     "hikari::about.engineBuildHash": "Compilación del motor",
-    "hikari::about.author": "Autor",
     "hikari::about.license": "Licencia",
     "hikari::theme.mode": "Modo de tema",
     "hikari::theme.modeLight": "Claro",

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

@@ -17,7 +17,6 @@
     "hikari::about.buildHash": "Build",
     "hikari::about.engineVersion": "Version du moteur",
     "hikari::about.engineBuildHash": "Build du moteur",
-    "hikari::about.author": "Auteur",
     "hikari::about.license": "Licence",
     "hikari::theme.mode": "Mode du thème",
     "hikari::theme.modeLight": "Clair",

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

@@ -17,7 +17,6 @@
     "hikari::about.buildHash": "ビルド",
     "hikari::about.engineVersion": "エンジンバージョン",
     "hikari::about.engineBuildHash": "エンジンビルド",
-    "hikari::about.author": "作者",
     "hikari::about.license": "ライセンス",
     "hikari::theme.mode": "テーマモード",
     "hikari::theme.modeLight": "ライト",

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

@@ -17,7 +17,6 @@
     "hikari::about.buildHash": "빌드",
     "hikari::about.engineVersion": "엔진 버전",
     "hikari::about.engineBuildHash": "엔진 빌드",
-    "hikari::about.author": "제작자",
     "hikari::about.license": "라이선스",
     "hikari::theme.mode": "테마 모드",
     "hikari::theme.modeLight": "라이트",

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

@@ -17,7 +17,6 @@
     "hikari::about.buildHash": "Build",
     "hikari::about.engineVersion": "Versão do motor",
     "hikari::about.engineBuildHash": "Build do motor",
-    "hikari::about.author": "Autor",
     "hikari::about.license": "Licença",
     "hikari::theme.mode": "Modo do tema",
     "hikari::theme.modeLight": "Claro",

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

@@ -17,7 +17,6 @@
     "hikari::about.buildHash": "Сборка",
     "hikari::about.engineVersion": "Версия движка",
     "hikari::about.engineBuildHash": "Сборка движка",
-    "hikari::about.author": "Автор",
     "hikari::about.license": "Лицензия",
     "hikari::theme.mode": "Режим темы",
     "hikari::theme.modeLight": "Светлая",

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

@@ -17,7 +17,6 @@
     "hikari::about.buildHash": "构建",
     "hikari::about.engineVersion": "引擎版本",
     "hikari::about.engineBuildHash": "引擎构建",
-    "hikari::about.author": "作者",
     "hikari::about.license": "许可证",
     "hikari::theme.mode": "主题模式",
     "hikari::theme.modeLight": "浅色",

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

@@ -17,7 +17,6 @@
     "hikari::about.buildHash": "建置",
     "hikari::about.engineVersion": "引擎版本",
     "hikari::about.engineBuildHash": "引擎建置",
-    "hikari::about.author": "作者",
     "hikari::about.license": "授權條款",
     "hikari::theme.mode": "主題模式",
     "hikari::theme.modeLight": "淺色",