@celestia-island/hikari 0.45.3 → 0.45.5

package/package.json

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

@@ -32,8 +32,16 @@
 
 .s-about-modal-header {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  text-align: center;
+}
+
+.s-about-modal-header > div {
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: var(--space-12, 0.75rem);
 }
 
 .s-about-modal-logo-img {
@@ -72,6 +80,21 @@
   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-made-by {
+  margin: 0;
+  font-size: var(--text-sm, 0.8125rem);
+  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 +103,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 +151,7 @@
 .s-about-modal-links-list {
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   gap: var(--space-8, 0.5rem);
 }
 
@@ -154,7 +179,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,30 +94,70 @@ 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 sentence with a linked author name", async () => {
     mountAbout({
-      author: "Celestia Island",
-      authorHref: "https://github.com/celestia-island",
-      license: "BUSL-1.1",
+      madeByPrefix: "由",
+      madeByName: "伊欧",
+      madeByNameHref: "https://github.com/langyo",
+      madeBySuffix: " 主创，来自 Celestia Island",
     });
     await flushModal();
+    const line = query<HTMLElement>(".s-about-modal-made-by");
+    expect(line.textContent).toBe("由伊欧 主创，来自 Celestia Island");
     const link = query<HTMLAnchorElement>(".s-about-modal-row-link");
-    expect(link.textContent).toBe("Celestia Island");
-    expect(link.getAttribute("href")).toBe("https://github.com/celestia-island");
+    expect(link.textContent).toBe("伊欧");
+    expect(link.getAttribute("href")).toBe("https://github.com/langyo");
     expect(link.getAttribute("target")).toBe("_blank");
-    const rows = [...document.body.querySelectorAll<HTMLElement>(".s-about-modal-row")];
-    const licenseRow = rows.find((row) => row.textContent?.includes("BUSL-1.1"));
-    expect(licenseRow, "license row renders").toBeTruthy();
-    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 sentence without a link when no href", async () => {
+    mountAbout({ madeByPrefix: "由", madeByName: "伊欧", madeBySuffix: " 主创" });
     await flushModal();
-    expect(query<HTMLElement>(".s-about-modal-row").textContent).toContain("Celestia Island");
+    expect(query<HTMLElement>(".s-about-modal-made-by").textContent).toBe("由伊欧 主创");
     expect(document.body.querySelector(".s-about-modal-row-link")).toBeNull();
   });
 
+  it("renders software-component version rows", async () => {
+    mountAbout({
+      componentVersions: [
+        { label: "WebUI 版本", value: "0.1.138 REW2HF 生产" },
+        { label: "计算引擎版本", value: "0.1.0" },
+      ],
+    });
+    await flushModal();
+    const rows = [...document.body.querySelectorAll<HTMLElement>(".s-about-modal-row")];
+    expect(rows.length).toBe(2);
+    expect(rows[0]!.textContent).toContain("WebUI 版本");
+    expect(rows[0]!.textContent).toContain("0.1.138 REW2HF 生产");
+    expect(rows[1]!.textContent).toContain("计算引擎版本");
+  });
+
+  it("renders centered license chips", async () => {
+    mountAbout({
+      licenses: [
+        { label: "SySL-1.0", href: "https://github.com/celestia-island/hikari/blob/master/LICENSE" },
+        { label: "BUSL-1.1", href: "https://github.com/celestia-island/shittim-chest/blob/master/LICENSE" },
+      ],
+    });
+    await flushModal();
+    const chips = [...document.body.querySelectorAll<HTMLAnchorElement>(".s-about-modal-link")];
+    expect(chips.map((chip) => chip.textContent)).toEqual(["SySL-1.0", "BUSL-1.1"]);
+    for (const chip of chips) expect(chip.getAttribute("target")).toBe("_blank");
+  });
+
+  it("renders centered legal footer links", async () => {
+    mountAbout({
+      footerLinks: [{ label: "京ICP备2026xxxx号", href: "https://beian.miit.gov.cn/" }],
+    });
+    await flushModal();
+    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 +199,11 @@ 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" });
-    await flushModal();
-    const rows = () => [
-      ...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);
-
-    setLocale("en");
+  it("renders no branding rows when no branding props are given", async () => {
+    mountAbout();
     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(document.body.querySelectorAll(".s-about-modal-row").length).toBe(0);
+    expect(document.body.querySelector(".s-about-modal-made-by")).toBeNull();
+    expect(document.body.querySelector(".s-about-modal-links")).toBeNull();
   });
 });

package/src/components/HkAboutModal.tsx

@@ -10,17 +10,23 @@ export interface HAboutLink {
   href: string;
 }
 
+/** One software-component version row (label left, composed value right). */
+export interface HAboutComponentVersion {
+  label: string;
+  value: string;
+}
+
 /**
  * HkAboutModal — version / about dialog.
  * (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.
+ * Shows a centered identity block (logo above the name above the tagline)
+ * plus optional branding: a made-by sentence with a linked author name, a
+ * centered organization line, software-component version rows, license and
+ * external link chips, a decorative backdrop layer (canvas or anything
+ * else, rendered behind the content and pointer-inert) and centered legal
+ * footer links (e.g. ICP filings). Every branding prop is optional — the
+ * modal degrades to the plain identity card when none are given.
  */
 export const HkAboutModal = defineComponent({
   name: "HkAboutModal",
@@ -30,28 +36,33 @@ export const HkAboutModal = defineComponent({
     appName: { type: String, required: true },
     /** Application version (e.g. "0.1.4"). */
     version: { type: String, required: true },
-    /** Optional app build hash / commit. */
-    buildHash: { type: String, default: undefined },
-    /** Optional engine version (backend), e.g. "0.2.1". */
-    engineVersion: { type: String, default: undefined },
-    /** Optional engine build hash / commit. */
-    engineBuildHash: { type: String, default: undefined },
     /** Optional logo image URL — replaces the first-letter tile. */
     logoSrc: { type: String, default: undefined },
     /** Optional one-liner under the version (e.g. the app tagline). */
     tagline: { type: String, default: undefined },
-    /** Optional paragraph below the header (vision / organization blurb). */
+    /** Optional centered small line under the header (organization blurb). */
     description: { type: String, default: undefined },
-    /** Optional author / organization row. */
-    author: { type: String, default: undefined },
-    /** Optional link applied to the author value. */
-    authorHref: { type: String, default: undefined },
-    /** Optional license identifier row (e.g. "BUSL-1.1"). */
-    license: { type: String, default: undefined },
+    /** Made-by sentence: text before the linked author name (e.g. "由"). */
+    madeByPrefix: { type: String, default: undefined },
+    /** Made-by sentence: the linked author name (e.g. "伊欧"). */
+    madeByName: { type: String, default: undefined },
+    /** Link applied to the author name (e.g. the GitHub profile). */
+    madeByNameHref: { type: String, default: undefined },
+    /** Made-by sentence: text after the name (e.g. " 主创，来自 …"). */
+    madeBySuffix: { type: String, default: undefined },
+    /** License chips (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. 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 —
@@ -66,21 +77,26 @@ export const HkAboutModal = defineComponent({
   setup(props, { emit }) {
     const { t } = useI18n();
 
-    function shortHash(hash: string): string {
-      return hash.length > 12 ? `${hash.slice(0, 12)}…` : hash;
-    }
-
-    const renderAuthorValue = () => {
-      if (!props.authorHref) return props.author;
-      return (
+    const renderMadeBy = () => {
+      if (!props.madeByName) return null;
+      const name = props.madeByNameHref ? (
         <a
           class="s-about-modal-row-link"
-          href={props.authorHref}
+          href={props.madeByNameHref}
           target="_blank"
           rel="noopener noreferrer"
         >
-          {props.author}
+          {props.madeByName}
         </a>
+      ) : (
+        <span>{props.madeByName}</span>
+      );
+      return (
+        <p class="s-about-modal-made-by">
+          {props.madeByPrefix}
+          {name}
+          {props.madeBySuffix}
+        </p>
       );
     };
 
@@ -113,50 +129,37 @@ export const HkAboutModal = defineComponent({
               </div>
             </header>
 
+            {renderMadeBy()}
             {props.description && <p class="s-about-modal-description">{props.description}</p>}
 
-            <div class="s-about-modal-rows">
-              {props.author && (
-                <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>
-                </div>
-              )}
-              {props.license && (
-                <div class="s-about-modal-row">
-                  <span class="s-about-modal-row-label">
-                    {t("hikari::about.license", "License")}
-                  </span>
-                  <span class="s-about-modal-row-value">{props.license}</span>
-                </div>
-              )}
-              {props.buildHash && (
-                <div class="s-about-modal-row">
-                  <span class="s-about-modal-row-label">{t("hikari::about.buildHash", "Build")}</span>
-                  <span class="s-about-modal-row-value" title={props.buildHash}>
-                    {shortHash(props.buildHash)}
-                  </span>
-                </div>
-              )}
-              {props.engineVersion && (
-                <div class="s-about-modal-row">
-                  <span class="s-about-modal-row-label">
-                    {t("hikari::about.engineVersion", "Engine version")}
-                  </span>
-                  <span class="s-about-modal-row-value">{props.engineVersion}</span>
-                </div>
-              )}
-              {props.engineBuildHash && (
-                <div class="s-about-modal-row">
-                  <span class="s-about-modal-row-label">
-                    {t("hikari::about.engineBuildHash", "Engine build")}
-                  </span>
-                  <span class="s-about-modal-row-value" title={props.engineBuildHash}>
-                    {shortHash(props.engineBuildHash)}
-                  </span>
+            {props.componentVersions.length > 0 && (
+              <div class="s-about-modal-rows">
+                {props.componentVersions.map((component) => (
+                  <div class="s-about-modal-row" key={component.label}>
+                    <span class="s-about-modal-row-label">{component.label}</span>
+                    <span class="s-about-modal-row-value">{component.value}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {props.licenses.length > 0 && (
+              <div class="s-about-modal-links">
+                <div class="s-about-modal-links-list">
+                  {props.licenses.map((license) => (
+                    <a
+                      key={license.href}
+                      href={license.href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="s-about-modal-link"
+                    >
+                      {license.label}
+                    </a>
+                  ))}
                 </div>
-              )}
-            </div>
+              </div>
+            )}
 
             {props.links.length > 0 && (
               <div class="s-about-modal-links">
@@ -176,6 +179,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

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

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

@@ -14,11 +14,6 @@
     "hikari::clipboard.copyFailed": "Kopieren fehlgeschlagen",
     "hikari::about.title": "Über",
     "hikari::about.version": "Version",
-    "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",
     "hikari::theme.modeDark": "Dunkel",

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

@@ -14,11 +14,6 @@
     "hikari::clipboard.copyFailed": "Copy failed",
     "hikari::about.title": "About",
     "hikari::about.version": "Version",
-    "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",
     "hikari::theme.modeDark": "Dark",

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

@@ -14,11 +14,6 @@
     "hikari::clipboard.copyFailed": "Error al copiar",
     "hikari::about.title": "Acerca de",
     "hikari::about.version": "Versión",
-    "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",
     "hikari::theme.modeDark": "Oscuro",

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

@@ -14,11 +14,6 @@
     "hikari::clipboard.copyFailed": "Échec de la copie",
     "hikari::about.title": "À propos",
     "hikari::about.version": "Version",
-    "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",
     "hikari::theme.modeDark": "Sombre",

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

@@ -14,11 +14,6 @@
     "hikari::clipboard.copyFailed": "コピーに失敗しました",
     "hikari::about.title": "このアプリについて",
     "hikari::about.version": "バージョン",
-    "hikari::about.buildHash": "ビルド",
-    "hikari::about.engineVersion": "エンジンバージョン",
-    "hikari::about.engineBuildHash": "エンジンビルド",
-    "hikari::about.author": "作者",
-    "hikari::about.license": "ライセンス",
     "hikari::theme.mode": "テーマモード",
     "hikari::theme.modeLight": "ライト",
     "hikari::theme.modeDark": "ダーク",

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

@@ -14,11 +14,6 @@
     "hikari::clipboard.copyFailed": "복사 실패",
     "hikari::about.title": "정보",
     "hikari::about.version": "버전",
-    "hikari::about.buildHash": "빌드",
-    "hikari::about.engineVersion": "엔진 버전",
-    "hikari::about.engineBuildHash": "엔진 빌드",
-    "hikari::about.author": "제작자",
-    "hikari::about.license": "라이선스",
     "hikari::theme.mode": "테마 모드",
     "hikari::theme.modeLight": "라이트",
     "hikari::theme.modeDark": "다크",

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

@@ -14,11 +14,6 @@
     "hikari::clipboard.copyFailed": "Falha ao copiar",
     "hikari::about.title": "Sobre",
     "hikari::about.version": "Versão",
-    "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",
     "hikari::theme.modeDark": "Escuro",

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

@@ -14,11 +14,6 @@
     "hikari::clipboard.copyFailed": "Не удалось скопировать",
     "hikari::about.title": "О программе",
     "hikari::about.version": "Версия",
-    "hikari::about.buildHash": "Сборка",
-    "hikari::about.engineVersion": "Версия движка",
-    "hikari::about.engineBuildHash": "Сборка движка",
-    "hikari::about.author": "Автор",
-    "hikari::about.license": "Лицензия",
     "hikari::theme.mode": "Режим темы",
     "hikari::theme.modeLight": "Светлая",
     "hikari::theme.modeDark": "Тёмная",

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

@@ -14,11 +14,6 @@
     "hikari::clipboard.copyFailed": "复制失败",
     "hikari::about.title": "关于",
     "hikari::about.version": "版本",
-    "hikari::about.buildHash": "构建",
-    "hikari::about.engineVersion": "引擎版本",
-    "hikari::about.engineBuildHash": "引擎构建",
-    "hikari::about.author": "作者",
-    "hikari::about.license": "许可证",
     "hikari::theme.mode": "主题模式",
     "hikari::theme.modeLight": "浅色",
     "hikari::theme.modeDark": "深色",

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

@@ -14,11 +14,6 @@
     "hikari::clipboard.copyFailed": "複製失敗",
     "hikari::about.title": "關於",
     "hikari::about.version": "版本",
-    "hikari::about.buildHash": "建置",
-    "hikari::about.engineVersion": "引擎版本",
-    "hikari::about.engineBuildHash": "引擎建置",
-    "hikari::about.author": "作者",
-    "hikari::about.license": "授權條款",
     "hikari::theme.mode": "主題模式",
     "hikari::theme.modeLight": "淺色",
     "hikari::theme.modeDark": "深色",