@celestia-island/hikari 0.45.3 → 0.45.4

package/package.json

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