@celestia-island/hikari 0.45.7 → 0.45.8

package/package.json

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

@@ -126,7 +126,7 @@
   color: rgb(var(--color-muted));
 }
 
-/* ── Credits: made-by sentence + organization blurb ────────────────────── */
+/* ── Credits: credits sentence + organization blurb ────────────────────── */
 
 .s-about-modal-credits {
   display: flex;
@@ -136,24 +136,19 @@
   margin-top: calc(-1 * var(--space-4, 0.25rem));
 }
 
-.s-about-modal-made-by {
+// Inline flow (not flex): the sentence is assembled from text runs and
+// chips, and the runs carry their own spaces around the chips.
+.s-about-modal-credits-line {
   margin: 0;
   font-size: var(--text-sm, 0.8125rem);
+  line-height: 2;
   text-align: center;
+  text-wrap: pretty;
   color: rgb(var(--color-text));
 }
 
-.s-about-modal-made-by .s-about-modal-row-link {
-  margin: 0 0.15em;
-}
-
-.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-credit-name {
+  color: rgb(var(--color-text));
 }
 
 .s-about-modal-description {
@@ -257,8 +252,8 @@
   gap: var(--space-6, 0.375rem);
 }
 
-// Ghost pills: the chips are secondary navigation, so they carry a hairline
-// instead of a filled brand block.
+// Ghost pills: every link in this dialog is a tag, so they share one face —
+// credits names, licenses, external links and the legal filings.
 .s-about-modal-link {
   padding: var(--space-2, 0.125rem) var(--space-10, 0.625rem);
   border: 1px solid var(--border-subtle, rgb(100 100 100 / 12%));
@@ -273,6 +268,14 @@
     background var(--duration-short, 0.15s) ease;
 }
 
+// Chips inside the credits sentence sit in a text run: keep them on the
+// baseline and let the surrounding spaces do the spacing.
+.s-about-modal-credit-link {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0 0.1em;
+}
+
 .s-about-modal-link:hover {
   border-color: var(--c-primary-strong, rgb(var(--color-primary) / 40%));
   background: var(--c-primary-faint, rgb(var(--color-primary) / 5%));
@@ -292,25 +295,20 @@
 
 /* ── Legal footer: filing links + copyright ───────────────────────────── */
 
+// Filing numbers are long, so the legal chips render a notch smaller than
+// the license / link rows.
+.s-about-modal-footer-link {
+  font-size: var(--text-2xs, 0.625rem);
+}
+
 .s-about-modal-footer-links {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: var(--space-16, 1rem);
+  gap: var(--space-6, 0.375rem);
   margin-top: calc(-1 * var(--space-4, 0.25rem));
 }
 
-.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: center;

package/src/components/HkAboutModal.test.tsx

@@ -9,8 +9,9 @@ import { setLocale } from "../i18n/context";
  * - the first-letter tile is the default identity and `logoSrc` swaps it
  *   for an image inside the identity frame
  * - version and tagline share one subtitle line
- * - description / made-by / license / copyright render the given strings,
- *   madeByNameHref turns the author name into an external link
+ * - the credits sentence assembles text runs and linked name chips, and a
+ *   name without an href stays plain text
+ * - description / license / copyright render the given strings
  * - component rows split the machine value from an optional meta pill
  * - the backdrop factory renders inside the clipped backdrop layer
  * - licenses and links render as chips under one centered block
@@ -96,27 +97,44 @@ describe("HkAboutModal branding", () => {
     expect(query<HTMLElement>(".s-about-modal-description").textContent).toBe("Save the world.");
   });
 
-  it("renders the made-by sentence with a linked author name", async () => {
+  it("renders the credits sentence with linked name chips", async () => {
     mountAbout({
-      madeByPrefix: "由",
-      madeByName: "伊欧",
-      madeByNameHref: "https://github.com/langyo",
-      madeBySuffix: " 主创，来自 Celestia Island",
+      credits: [
+        { text: "来自 " },
+        { name: "Celestia Island", href: "https://github.com/celestia-island" },
+        { text: "，由 " },
+        { name: "伊欧", href: "https://github.com/langyo" },
+        { text: " 倾力设计" },
+      ],
     });
     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("伊欧");
-    expect(link.getAttribute("href")).toBe("https://github.com/langyo");
-    expect(link.getAttribute("target")).toBe("_blank");
+    const line = query<HTMLElement>(".s-about-modal-credits-line");
+    expect(line.textContent).toBe("来自 Celestia Island，由 伊欧 倾力设计");
+    const chips = [
+      ...document.body.querySelectorAll<HTMLAnchorElement>(".s-about-modal-credit-link"),
+    ];
+    expect(chips.map((chip) => chip.textContent)).toEqual(["Celestia Island", "伊欧"]);
+    // Every link in the dialog is a tag and opens in a new tab.
+    for (const chip of chips) {
+      expect(chip.classList.contains("s-about-modal-link")).toBe(true);
+      expect(chip.getAttribute("target")).toBe("_blank");
+      expect(chip.getAttribute("rel")).toContain("noopener");
+    }
+    expect(chips[0]!.getAttribute("href")).toBe("https://github.com/celestia-island");
+  });
+
+  it("keeps a credit name as plain text when no href is given", async () => {
+    mountAbout({ credits: [{ text: "由 " }, { name: "伊欧" }, { text: " 主创" }] });
+    await flushModal();
+    expect(query<HTMLElement>(".s-about-modal-credits-line").textContent).toBe("由 伊欧 主创");
+    expect(query<HTMLElement>(".s-about-modal-credit-name").textContent).toBe("伊欧");
+    expect(document.body.querySelector(".s-about-modal-credit-link")).toBeNull();
   });
 
-  it("renders the made-by sentence without a link when no href", async () => {
-    mountAbout({ madeByPrefix: "由", madeByName: "伊欧", madeBySuffix: " 主创" });
+  it("skips empty credit parts", async () => {
+    mountAbout({ credits: [{ text: "" }, { name: "" }, { text: "仅此一句。" }] });
     await flushModal();
-    expect(query<HTMLElement>(".s-about-modal-made-by").textContent).toBe("由伊欧 主创");
-    expect(document.body.querySelector(".s-about-modal-row-link")).toBeNull();
+    expect(query<HTMLElement>(".s-about-modal-credits-line").textContent).toBe("仅此一句。");
   });
 
   it("renders software-component version rows with a meta pill and tone", async () => {
@@ -234,7 +252,7 @@ describe("HkAboutModal branding", () => {
     mountAbout();
     await flushModal();
     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-credits-line")).toBeNull();
     expect(document.body.querySelector(".s-about-modal-links")).toBeNull();
     expect(document.body.querySelector(".s-about-modal-chips")).toBeNull();
     expect(document.body.querySelector(".s-about-modal-credits")).toBeNull();

package/src/components/HkAboutModal.tsx

@@ -10,6 +10,24 @@ export interface HAboutLink {
   href: string;
 }
 
+/**
+ * One piece of the credits line.
+ *
+ * The line is a sentence assembled from parts so a host can phrase (and
+ * order) it freely per locale: literal `text` runs sit between linked
+ * `name` chips (organization first, author second, …). The names render as
+ * the same chips as the license / link rows — every link in this dialog is
+ * a tag.
+ */
+export interface HAboutCredit {
+  /** Literal sentence fragment (mutually exclusive with `name`). */
+  text?: string;
+  /** Linked chip label (mutually exclusive with `text`). */
+  name?: string;
+  /** Target for a `name` chip; opens in a new tab. */
+  href?: string;
+}
+
 /**
  * One software-component version row.
  *
@@ -33,10 +51,11 @@ export interface HAboutComponentVersion {
  *
  * Layout (2026-09 redesign): a centered identity hero (haloed logo, name,
  * then version + tagline on one compact line), an optional credits block
- * (made-by sentence with a linked author name + organization blurb), a
- * bordered spec card holding the software-component versions, ghost chip
- * rows for licenses / external links, and a muted legal footer (filing
- * links + copyright). Every branding prop is optional — the modal degrades
+ * (a sentence built from text runs and linked name chips, plus the
+ * organization blurb), a
+ * bordered spec card holding the software-component versions, and the
+ * link rows — licenses, external links, legal filings and the credits
+ * names all render as the same ghost tag. Every one opens in a new tab. Every branding prop is optional — the modal degrades
  * to the plain identity card when none are given.
  */
 export const HkAboutModal = defineComponent({
@@ -53,14 +72,12 @@ export const HkAboutModal = defineComponent({
     tagline: { type: String, default: undefined },
     /** Optional centered small line under the credits (organization blurb). */
     description: { 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 },
+    /**
+     * Credits sentence, assembled from text runs and linked name chips
+     * (e.g. 来自 <Celestia Island>，由 <伊欧> 倾力设计). Names render as the
+     * same chips as the license / link rows.
+     */
+    credits: { type: Array as PropType<HAboutCredit[]>, default: () => [] },
     /** 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. */
@@ -88,25 +105,38 @@ export const HkAboutModal = defineComponent({
   setup(props, { emit }) {
     const { t } = useI18n();
 
-    const renderMadeBy = () => {
-      if (!props.madeByName) return null;
-      const name = props.madeByNameHref ? (
-        <a
-          class="s-about-modal-row-link"
-          href={props.madeByNameHref}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {props.madeByName}
-        </a>
-      ) : (
-        <span>{props.madeByName}</span>
-      );
+    // One chip renderer for every link in the dialog: credits names,
+    // licenses, external links and the legal filings all render as tags.
+    const renderChip = (label: string, href: string, extraClass: string) => (
+      <a
+        key={`${extraClass}:${href}`}
+        class={`s-about-modal-link ${extraClass}`}
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {label}
+      </a>
+    );
+
+    const renderCredits = () => {
+      const parts = props.credits.filter((part) => part.text || part.name);
+      if (parts.length === 0) return null;
       return (
-        <p class="s-about-modal-made-by">
-          {props.madeByPrefix}
-          {name}
-          {props.madeBySuffix}
+        <p class="s-about-modal-credits-line">
+          {parts.map((part, index) =>
+            part.name ? (
+              part.href ? (
+                renderChip(part.name, part.href, "s-about-modal-credit-link")
+              ) : (
+                <span key={`name:${index}`} class="s-about-modal-credit-name">
+                  {part.name}
+                </span>
+              )
+            ) : (
+              <span key={`text:${index}`}>{part.text}</span>
+            ),
+          )}
         </p>
       );
     };
@@ -116,17 +146,7 @@ export const HkAboutModal = defineComponent({
       return (
         <div class="s-about-modal-links" data-slot={slot}>
           <div class="s-about-modal-links-list">
-            {items.map((item) => (
-              <a
-                key={item.href}
-                href={item.href}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="s-about-modal-link"
-              >
-                {item.label}
-              </a>
-            ))}
+            {items.map((item) => renderChip(item.label, item.href, ""))}
           </div>
         </div>
       );
@@ -177,9 +197,9 @@ export const HkAboutModal = defineComponent({
               </div>
             </header>
 
-            {(props.madeByName || props.description) && (
+            {(props.credits.length > 0 || props.description) && (
               <div class="s-about-modal-credits">
-                {renderMadeBy()}
+                {renderCredits()}
                 {props.description && (
                   <p class="s-about-modal-description">{props.description}</p>
                 )}
@@ -216,17 +236,9 @@ export const HkAboutModal = defineComponent({
 
             {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>
-                ))}
+                {props.footerLinks.map((link) =>
+                  renderChip(link.label, link.href, "s-about-modal-footer-link"),
+                )}
               </div>
             )}
 

package/src/index.ts

@@ -356,6 +356,7 @@ export { HkProtocolModal as HProtocolModal } from "./components/HkProtocolModal"
 export {
   HkAboutModal as HAboutModal,
   type HAboutComponentVersion,
+  type HAboutCredit,
   type HAboutLink,
 } from "./components/HkAboutModal";
 export { HkLogWindow as HLogWindow, type HLogTab } from "./components/HkLogWindow";