@celestia-island/hikari 0.43.16 → 0.43.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.43.16",
+  "version": "0.43.18",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/animation/registerAnimations.ts

@@ -103,20 +103,6 @@ registerCssAnimation("s-voice-wave-bounce", { infinite: true });
 // components/HkPlaceholderMarquee.scss — overflowing placeholder sweep
 // (loops forever; pure CSS, loop geometry on inline custom properties).
 registerCssAnimation("hk-placeholder-marquee-scroll", { infinite: true });
-// styles/theme/mixins.scss — ambient/glow pulses (loop forever) and the
-// one-shot entrance/exit grammar, vendored byte-identical from
-// packages/theme. #353 brought the file under src/ without registering
-// its keyframes — the parity test caught the gap 6 days later.
-registerCssAnimation("pulse", { infinite: true });
-registerCssAnimation("ambient-move", { infinite: true });
-registerCssAnimation("pulse-glow-animation", { infinite: true });
-registerCssAnimation("expand-horizontal");
-registerCssAnimation("collapse-vertical");
-registerCssAnimation("slide-in-left");
-registerCssAnimation("slide-in-right");
-registerCssAnimation("slide-in-top");
-registerCssAnimation("slide-in-bottom");
-registerCssAnimation("fade-in-scale");
-registerCssAnimation("fade-out-scale");
-registerCssAnimation("blur-in");
-registerCssAnimation("bounce-in");
+// The styles/theme/mixins.scss ambient/glow/entrance keyframes were
+// retired with the legacy Gen-1 sheet vendoring (hikari #476) — their
+// registrar entries went with them.

package/src/components/HkAboutModal.scss

@@ -2,6 +2,29 @@
 @use "./hikari-vars" as vars;
 
 .s-about-modal {
+  position: relative;
+}
+
+// Clipped, pointer-inert decorative layer (canvas or any subtree handed in
+// through the `backdrop` prop). Sits under `.s-about-modal-body`; sizing,
+// background and animation belong to the consumer's subtree.
+.s-about-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  border-radius: var(--radius-lg, 12px);
+  pointer-events: none;
+
+  > * {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.s-about-modal-body {
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: column;
   gap: var(--space-16, 1rem);
@@ -13,6 +36,15 @@
   gap: var(--space-12, 0.75rem);
 }
 
+.s-about-modal-logo-img {
+  width: 3rem;
+  height: 3rem;
+  flex-shrink: 0;
+  border-radius: var(--radius-lg, 12px);
+  object-fit: contain;
+  user-select: none;
+}
+
 .s-about-modal-logo {
   display: flex;
   align-items: center;
@@ -40,6 +72,19 @@
   color: rgb(var(--color-muted));
 }
 
+.s-about-modal-tagline {
+  margin: var(--space-2, 0.125rem) 0 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: rgb(var(--color-muted));
+}
+
+.s-about-modal-description {
+  margin: 0;
+  font-size: var(--text-sm, 0.8125rem);
+  line-height: 1.55;
+  color: rgb(var(--color-muted));
+}
+
 .s-about-modal-rows {
   display: flex;
   flex-direction: column;
@@ -64,6 +109,15 @@
   font-family: var(--font-mono, vars.$hikari-font-family-mono);
 }
 
+.s-about-modal-row-link {
+  color: rgb(var(--color-primary));
+  text-decoration: none;
+}
+
+.s-about-modal-row-link:hover {
+  text-decoration: underline;
+}
+
 .s-about-modal-links {
   display: flex;
   flex-direction: column;

package/src/components/HkAboutModal.test.tsx

@@ -0,0 +1,181 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import { HkAboutModal } from "./HkAboutModal";
+import { setLocale } from "../i18n/context";
+
+/**
+ * HkAboutModal contract tests for the branding wave:
+ * - the first-letter tile is the default identity and `logoSrc` swaps it
+ *   for an image
+ * - tagline / description / author / license / copyright render the given
+ *   strings, authorHref turns the author value into an external link
+ * - the backdrop factory renders inside the clipped backdrop layer
+ * - links render as external chips
+ * - author / license labels resolve through the i18n bundles
+ *
+ * (Repo test convention: raw createApp + document queries, no
+ * @vue/test-utils dependency.)
+ */
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+interface AboutHarness {
+  open: ReturnType<typeof ref<boolean>>;
+  unmount: () => void;
+}
+
+function mountAbout(props: Record<string, unknown> = {}): AboutHarness {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+
+  const open = ref(true);
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(HkAboutModal, {
+          appName: "Test App",
+          version: "1.2.3",
+          ...props,
+          modelValue: open.value,
+          "onUpdate:modelValue": (v: boolean) => {
+            open.value = v;
+          },
+        });
+    },
+  });
+  const app = createApp(Wrapper);
+  app.mount(container);
+  mounts.push({ app, container });
+  return { open, unmount: () => app.unmount() };
+}
+
+function query<T extends Element>(selector: string): T {
+  const el = document.body.querySelector<T>(selector);
+  expect(el, `${selector} renders`).toBeTruthy();
+  return el!;
+}
+
+async function flushModal() {
+  await nextTick();
+  await nextTick();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  setLocale("en");
+});
+
+describe("HkAboutModal branding", () => {
+  it("renders the first-letter tile when no logoSrc is given", async () => {
+    mountAbout();
+    await flushModal();
+    const tile = query<HTMLElement>(".s-about-modal-logo");
+    expect(tile.textContent?.trim()).toBe("T");
+    expect(document.body.querySelector(".s-about-modal-logo-img")).toBeNull();
+  });
+
+  it("renders the logo image when logoSrc is given", async () => {
+    mountAbout({ logoSrc: "data:image/webp;base64,AAA" });
+    await flushModal();
+    const img = query<HTMLImageElement>("img.s-about-modal-logo-img");
+    expect(img.getAttribute("src")).toBe("data:image/webp;base64,AAA");
+    expect(document.body.querySelector(".s-about-modal-logo")).toBeNull();
+  });
+
+  it("renders tagline and description strings", async () => {
+    mountAbout({ tagline: "Chat with your agents", description: "Save the world." });
+    await flushModal();
+    expect(query<HTMLElement>(".s-about-modal-tagline").textContent).toBe("Chat with your agents");
+    expect(query<HTMLElement>(".s-about-modal-description").textContent).toBe("Save the world.");
+  });
+
+  it("renders author and license rows with an linked author", async () => {
+    mountAbout({
+      author: "Celestia Island",
+      authorHref: "https://github.com/celestia-island",
+      license: "BUSL-1.1",
+    });
+    await flushModal();
+    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.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" });
+    await flushModal();
+    expect(query<HTMLElement>(".s-about-modal-row").textContent).toContain("Celestia Island");
+    expect(document.body.querySelector(".s-about-modal-row-link")).toBeNull();
+  });
+
+  it("renders the backdrop factory inside the clipped layer", async () => {
+    mountAbout({ backdrop: () => h("div", { class: "test-backdrop-marker" }) });
+    await flushModal();
+    const layer = query<HTMLElement>(".s-about-modal-backdrop");
+    expect(layer.getAttribute("aria-hidden")).toBe("true");
+    expect(layer.querySelector(".test-backdrop-marker")).toBeTruthy();
+  });
+
+  it("renders links as external chips", async () => {
+    mountAbout({
+      links: [
+        { label: "celestia.world", href: "https://celestia.world" },
+        { label: "celestia.ac.cn", href: "https://celestia.ac.cn" },
+      ],
+    });
+    await flushModal();
+    const chips = [
+      ...document.body.querySelectorAll<HTMLAnchorElement>(".s-about-modal-link"),
+    ];
+    expect(chips.map((chip) => chip.textContent)).toEqual(["celestia.world", "celestia.ac.cn"]);
+    for (const chip of chips) {
+      expect(chip.getAttribute("target")).toBe("_blank");
+      expect(chip.getAttribute("rel")).toContain("noopener");
+    }
+  });
+
+  it("honors the copyright override and defaults to the app name", async () => {
+    const year = String(new Date().getFullYear());
+    const harness = mountAbout({ copyright: "Celestia Island" });
+    await flushModal();
+    let badge = query<HTMLElement>(".s-about-modal-footer");
+    expect(badge.textContent).toContain(`© ${year} Celestia Island`);
+    harness.unmount();
+    await flushModal();
+
+    mountAbout();
+    await flushModal();
+    badge = query<HTMLElement>(".s-about-modal-footer");
+    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");
+    await flushModal();
+    text = rows().map((el) => el.textContent);
+    expect(text.some((t) => t === "Author")).toBe(true);
+    expect(text.some((t) => t === "License")).toBe(true);
+  });
+});

package/src/components/HkAboutModal.tsx

@@ -14,9 +14,13 @@ export interface HAboutLink {
  * HkAboutModal — version / about dialog.
  * (Upstreamed from shittim-chest's plana-legacy layer.)
  *
- * Shows the app identity and version metadata plus optional external
- * links. Version/build hashes render as short hashes when longer than 12
- * chars (full value in `title` tooltip).
+ * 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.
  */
 export const HkAboutModal = defineComponent({
   name: "HkAboutModal",
@@ -32,8 +36,28 @@ export const HkAboutModal = defineComponent({
     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). */
+    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 },
+    /** 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 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: {
@@ -46,6 +70,20 @@ export const HkAboutModal = defineComponent({
       return hash.length > 12 ? `${hash.slice(0, 12)}…` : hash;
     }
 
+    const renderAuthorValue = () => {
+      if (!props.authorHref) return props.author;
+      return (
+        <a
+          class="s-about-modal-row-link"
+          href={props.authorHref}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {props.author}
+        </a>
+      );
+    };
+
     return () => (
       <HModal
         modelValue={props.modelValue}
@@ -54,59 +92,97 @@ export const HkAboutModal = defineComponent({
         width="30rem"
       >
         <div class="s-about-modal">
-          <header class="s-about-modal-header">
-            <div class="s-about-modal-logo">{props.appName.slice(0, 1).toUpperCase()}</div>
-            <div>
-              <h2 class="s-about-modal-name">{props.appName}</h2>
-              <p class="s-about-modal-version">
-                {t("hikari::about.version", "Version")} {props.version}
-              </p>
+          {props.backdrop && (
+            <div class="s-about-modal-backdrop" aria-hidden="true">
+              {props.backdrop()}
             </div>
-          </header>
-
-          <div class="s-about-modal-rows">
-            {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>
+          )}
+          <div class="s-about-modal-body">
+            <header class="s-about-modal-header">
+              {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>
+                <h2 class="s-about-modal-name">{props.appName}</h2>
+                <p class="s-about-modal-version">
+                  {t("hikari::about.version", "Version")} {props.version}
+                </p>
+                {props.tagline && <p class="s-about-modal-tagline">{props.tagline}</p>}
               </div>
-            )}
-          </div>
+            </header>
 
-          {props.links.length > 0 && (
-            <div class="s-about-modal-links">
-              <span class="s-about-modal-row-label">{t("hikari::about.links", "Links")}</span>
-              <div class="s-about-modal-links-list">
-                {props.links.map((link) => (
-                  <a key={link.href} href={link.href} target="_blank" rel="noopener noreferrer" class="s-about-modal-link">
-                    {link.label}
-                  </a>
-                ))}
-              </div>
+            {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>
+                </div>
+              )}
             </div>
-          )}
 
-          <footer class="s-about-modal-footer">
-            <HBadge variant="muted">
-              © {new Date().getFullYear()} {props.appName}
-            </HBadge>
-          </footer>
+            {props.links.length > 0 && (
+              <div class="s-about-modal-links">
+                <span class="s-about-modal-row-label">{t("hikari::about.links", "Links")}</span>
+                <div class="s-about-modal-links-list">
+                  {props.links.map((link) => (
+                    <a
+                      key={link.href}
+                      href={link.href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="s-about-modal-link"
+                    >
+                      {link.label}
+                    </a>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <footer class="s-about-modal-footer">
+              <HBadge variant="muted">
+                © {new Date().getFullYear()} {props.copyright ?? props.appName}
+              </HBadge>
+            </footer>
+          </div>
         </div>
       </HModal>
     );

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

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

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

@@ -18,6 +18,8 @@
     "hikari::about.engineVersion": "Engine-Version",
     "hikari::about.engineBuildHash": "Engine-Build",
     "hikari::about.links": "Links",
+    "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

@@ -18,6 +18,8 @@
     "hikari::about.engineVersion": "Engine version",
     "hikari::about.engineBuildHash": "Engine build",
     "hikari::about.links": "Links",
+    "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

@@ -18,6 +18,8 @@
     "hikari::about.engineVersion": "Versión del motor",
     "hikari::about.engineBuildHash": "Compilación del motor",
     "hikari::about.links": "Enlaces",
+    "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

@@ -18,6 +18,8 @@
     "hikari::about.engineVersion": "Version du moteur",
     "hikari::about.engineBuildHash": "Build du moteur",
     "hikari::about.links": "Liens",
+    "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

@@ -18,6 +18,8 @@
     "hikari::about.engineVersion": "エンジンバージョン",
     "hikari::about.engineBuildHash": "エンジンビルド",
     "hikari::about.links": "リンク",
+    "hikari::about.author": "作者",
+    "hikari::about.license": "ライセンス",
     "hikari::theme.mode": "テーマモード",
     "hikari::theme.modeLight": "ライト",
     "hikari::theme.modeDark": "ダーク",

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

@@ -18,6 +18,8 @@
     "hikari::about.engineVersion": "엔진 버전",
     "hikari::about.engineBuildHash": "엔진 빌드",
     "hikari::about.links": "링크",
+    "hikari::about.author": "제작자",
+    "hikari::about.license": "라이선스",
     "hikari::theme.mode": "테마 모드",
     "hikari::theme.modeLight": "라이트",
     "hikari::theme.modeDark": "다크",

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

@@ -18,6 +18,8 @@
     "hikari::about.engineVersion": "Versão do motor",
     "hikari::about.engineBuildHash": "Build do motor",
     "hikari::about.links": "Links",
+    "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

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

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

@@ -18,6 +18,8 @@
     "hikari::about.engineVersion": "引擎版本",
     "hikari::about.engineBuildHash": "引擎构建",
     "hikari::about.links": "链接",
+    "hikari::about.author": "作者",
+    "hikari::about.license": "许可证",
     "hikari::theme.mode": "主题模式",
     "hikari::theme.modeLight": "浅色",
     "hikari::theme.modeDark": "深色",

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

@@ -18,6 +18,8 @@
     "hikari::about.engineVersion": "引擎版本",
     "hikari::about.engineBuildHash": "引擎建置",
     "hikari::about.links": "連結",
+    "hikari::about.author": "作者",
+    "hikari::about.license": "授權條款",
     "hikari::theme.mode": "主題模式",
     "hikari::theme.modeLight": "淺色",
     "hikari::theme.modeDark": "深色",

package/src/styles/admin-tokens.scss

@@ -19,7 +19,6 @@
   --c-primary-light: rgb(var(--color-primary, 255 107 157) / 15%);
   --c-primary-subtle: rgb(var(--color-primary, 255 107 157) / 8%);
   --c-primary-overlay: rgb(var(--color-primary, 255 107 157) / 15%);
-  --border-faint: rgb(var(--color-border, 100 100 100) / 10%);
 
   /* ── Hikari color bridge ─ */
   --hi-color-primary: rgb(var(--color-primary, 255 107 157));