@celestia-island/hikari 0.40.36 → 0.41.1

package/package.json

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

package/src/components/HkAffixPicker.scss

@@ -134,6 +134,11 @@
   &[data-unset] {
     font-style: italic;
     color: rgb(var(--color-muted));
+    /* Italic final strokes lean past the glyph advance; overflow:hidden
+     * (the ellipsis pair above) shaves them at the content edge. The
+     * inline-end cushion is clipping room, and because it sits INSIDE
+     * the padding box it never triggers the ellipsis for fitting text. */
+    padding-inline-end: 0.2em;
   }
 }
 

package/src/components/HkStatusBar.test.tsx

@@ -38,6 +38,52 @@ afterEach(() => {
 });
 
 describe("HkStatusBar", () => {
+  it("renders extraDetails rows capped at 400px with an ellipsized, title-backed value", async () => {
+    const container = mountBar({
+      version: "1.2.3",
+      connectionStatus: "connected",
+      connectionInfo: INFO,
+      extraDetails: [
+        { key: "gateway", label: "Gateway", value: "gateway.celestia.world" },
+      ],
+    });
+    await nextTick();
+    // Popover content teleports to <body> and only renders once the tag
+    // is hovered open (same grammar as the protocol/network rows).
+    const tag = container.querySelector<HTMLElement>(".s-status-bar-tag")!;
+    tag.dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel");
+    expect(panel, "popover opens on hover").toBeTruthy();
+    const row = panel!.querySelector('[data-extra-detail="gateway"]');
+    expect(row).not.toBeNull();
+    expect((row as HTMLElement).style.maxWidth).toBe("400px");
+    const value = panel!.querySelector("span[title]") as HTMLElement;
+    expect(value.textContent).toBe("gateway.celestia.world");
+    expect(value.title).toBe("gateway.celestia.world");
+    expect(value.style.textOverflow).toBe("ellipsis");
+    // The label column keeps a minimum width — a long value must not
+    // squeeze it (the row space-between-aligns instead).
+    const label = row!.querySelector("span[style*='min-width'], span:nth-child(2)") as HTMLElement;
+    expect(label.style.minWidth).toBe("72px");
+    expect(label.style.flexShrink).toBe("0");
+  });
+
+  it("renders no extraDetails rows when the prop is absent", async () => {
+    const container = mountBar({
+      version: "1.2.3",
+      connectionStatus: "connected",
+      connectionInfo: INFO,
+    });
+    await nextTick();
+    container
+      .querySelector<HTMLElement>(".s-status-bar-tag")!
+      .dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    const panel = document.body.querySelector(".hk-popover-panel");
+    expect(panel?.querySelector("[data-extra-detail]")).toBeNull();
+  });
+
   it("mounts with the traffic light and version rows inline, protocol row on hover-open", async () => {
     const container = mountBar({
       version: "1.2.3",

package/src/components/HkStatusBar.tsx

@@ -96,6 +96,21 @@ export const HkStatusBar = defineComponent({
     transportTier: { type: String as PropType<string>, default: undefined },
     attemptNumber: { type: Number, default: undefined },
     countdown: { type: Number, default: undefined },
+    /**
+     * Optional extra rows appended to the connection-info popover (after
+     * the network row): host-supplied label/value pairs with a prebuilt
+     * icon vnode each — the same loose-icon contract as HkAuthMethodList.
+     * Rows grow with their content but cap at 400px; values past the cap
+     * ellipsize (full text rides the native title). Lets a host surface
+     * stage endpoints (gateway, registry…) inside the popover without
+     * forking the component.
+     */
+    extraDetails: {
+      type: Array as PropType<
+        Array<{ key: string; icon?: unknown; label: string; value: string }>
+      >,
+      default: undefined,
+    },
   },
   setup(props) {
     const popupOpen = ref(false);
@@ -358,6 +373,13 @@ export const HkStatusBar = defineComponent({
                     <span style={{ opacity: 0.5, marginRight: "auto" }}>{t("hikari::statusBar.network", "Network")}</span>
                     <span>{regionDisplayName(info.region, locale, t)}{info.asn != null ? ` · AS${info.asn}` : ""}{info.isLocalhost ? " · " + t("hikari::statusBar.local", "Local") : ""}</span>
                   </div>
+                  {(props.extraDetails ?? []).map((row) => (
+                    <div key={row.key} data-extra-detail={row.key} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "6px", maxWidth: "400px" }}>
+                      <span style={{ opacity: 0.5, flexShrink: 0, display: "inline-flex" }}>{row.icon}</span>
+                      <span style={{ opacity: 0.5, flexShrink: 0, minWidth: "72px", marginRight: "auto" }}>{row.label}</span>
+                      <span title={row.value} style={{ fontFamily: `var(--font-mono, ${HIKARI_FONT_MONO})`, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{row.value}</span>
+                    </div>
+                  ))}
                 </>
               ) : (
                 <div style={{ opacity: 0.5 }}>{t("hikari::statusBar.fetching", "Fetching connection info...")}</div>

package/src/components/HkTimeline.scss

@@ -3,6 +3,17 @@
   align-items: center;
   gap: 0;
   width: 100%;
+
+  // Shared node geometry — ONE source of truth for the 24px indicator
+  // circle and the rail thickness. Every connector math keys off these:
+  // window-mode links center on the node along the inline axis, the
+  // vertical rail hangs centered under it, so both stay glued to the
+  // circles even if the node size ever changes.
+  --hk-timeline-node-size: 24px;
+  --hk-timeline-link-thickness: 2px;
+  --hk-timeline-link-top: calc(
+    (var(--hk-timeline-node-size) - var(--hk-timeline-link-thickness)) / 2
+  );
 }
 
 .hk-timeline[data-orientation="vertical"] {
@@ -26,12 +37,9 @@
   // Geometry contract with the stacked steps above: the node is the 24px
   // indicator circle at the top of every stack, so its center sits half a
   // node below the cell top in ALL columns — that is where link segments go.
-  --hk-timeline-node-size: 24px;
+  // (Node size, thickness and link-top are the shared tokens on
+  // `.hk-timeline`.)
   --hk-timeline-link-clearance: 20px;
-  --hk-timeline-link-thickness: 2px;
-  --hk-timeline-link-top: calc(
-    (var(--hk-timeline-node-size) - var(--hk-timeline-link-thickness)) / 2
-  );
 }
 
 .hk-timeline[data-mode="window"] .hk-timeline-window {
@@ -142,6 +150,95 @@
   transform: scaleX(-1);
 }
 
+/* ── Vertical window mode ────────────────────────────────────────────────
+   The height-starved sibling of the compact horizontal window: when the
+   host cannot fit the full column, the timeline collapses to the same
+   three-cell window (previous / current / next) stacked as equal thirds,
+   the outer two dimmed exactly like their left/right counterparts, and
+   vertical rail segments joining the node centers on an overlay — with
+   fading continuations past the top/bottom edges where hidden steps go. */
+.hk-timeline[data-orientation="vertical"][data-mode="window"] {
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+  align-items: stretch;
+
+  // Each cell centers its step within its third, which puts every node
+  // center at the SAME fractions of the host height as the horizontal
+  // mode puts them across the width (1/6, 1/2, 5/6) — the link math
+  // below is the horizontal one rotated, nothing more.
+  .hk-timeline-window {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 0;
+  }
+
+  .hk-timeline-window .hk-timeline-step {
+    flex: 0 0 auto;
+    max-width: 100%;
+
+    [data-el="label"] {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  // Vertical rails: centered under the node column, spanning between the
+  // cells' node centers (at 1/6, 1/2, 5/6 of the height) minus the same
+  // clearance the horizontal bonds keep from the circles. Each segment
+  // also re-asserts the inline geometry — the horizontal segment rules
+  // above carry the same attribute specificity and must not leak in.
+  .hk-timeline-link {
+    width: var(--hk-timeline-link-thickness);
+    height: auto;
+    inset-inline-start: var(--hk-timeline-link-top);
+    top: auto;
+    bottom: auto;
+
+    &[data-segment="before-current"] {
+      inset-inline-start: var(--hk-timeline-link-top);
+      width: var(--hk-timeline-link-thickness);
+      top: calc(16.6667% + var(--hk-timeline-link-clearance));
+      height: calc(33.3334% - (var(--hk-timeline-link-clearance) * 2));
+    }
+
+    &[data-segment="current-after"] {
+      inset-inline-start: var(--hk-timeline-link-top);
+      width: var(--hk-timeline-link-thickness);
+      top: calc(50% + var(--hk-timeline-link-clearance));
+      height: calc(33.3334% - (var(--hk-timeline-link-clearance) * 2));
+    }
+
+    // Continuation hints: from the container edge toward that cell's node,
+    // fading INTO the edge ("more steps exist beyond this side").
+    &[data-segment="edge-before"] {
+      inset-inline-start: var(--hk-timeline-link-top);
+      width: var(--hk-timeline-link-thickness);
+      top: 0;
+      height: calc(16.6667% - var(--hk-timeline-link-clearance));
+    }
+
+    &[data-segment="edge-after"] {
+      inset-inline-start: var(--hk-timeline-link-top);
+      width: var(--hk-timeline-link-thickness);
+      top: auto;
+      bottom: 0;
+      height: calc(16.6667% - var(--hk-timeline-link-clearance));
+    }
+
+    &[data-fade-dir="up"] {
+      background-color: transparent;
+      background-image: linear-gradient(to top, var(--_link-color), transparent);
+    }
+
+    &[data-fade-dir="down"] {
+      background-color: transparent;
+      background-image: linear-gradient(to bottom, var(--_link-color), transparent);
+    }
+  }
+}
+
 
 .hk-timeline-step {
   display: flex;
@@ -187,7 +284,7 @@
   }
 
   [data-el="connector"] {
-    height: 2px;
+    height: var(--hk-timeline-link-thickness);
     flex: 1 1 0%;
     min-width: 0.5rem;
     margin: 0 var(--hi-space-4, 4px);
@@ -198,19 +295,41 @@
   flex: 0 0 auto;
 }
 
-.hk-timeline[data-orientation="vertical"] .hk-timeline-step {
+.hk-timeline[data-orientation="vertical"][data-mode="full"] .hk-timeline-step {
   flex-direction: row;
   flex: 0 0 auto;
-  padding-bottom: var(--hi-space-24, 24px);
+
+  // The gap this step's rail must bridge: exactly the space between the
+  // bottom edge of this step's node circle and the top edge of the next
+  // step's node circle. Padding and rail height share the token, so the
+  // rail always lands flush on both circles — no floating dashes, no
+  // overlap, whatever the rhythm is tuned to.
+  --hk-timeline-vert-gap: var(--hi-space-24, 24px);
+  padding-bottom: var(--hk-timeline-vert-gap);
 
   [data-el="connector"] {
-    width: 2px;
-    height: 1rem;
+    width: var(--hk-timeline-link-thickness);
+    // The horizontal base rule leaves `min-width: 0.5rem` behind; on an
+    // absolutely-positioned rail min-width beats width, which once fatted
+    // the rail to 8px and shoved it off the node center. Neutralize the
+    // leaked sizing constraints explicitly.
+    min-width: 0;
     flex: 0 0 auto;
     position: absolute;
-    left: 0.6875rem;
-    top: 1.5rem;
+    height: var(--hk-timeline-vert-gap);
+    // Centered under the NODE, not the row: the circle occupies the first
+    // node-size square of the row, so the rail's inline offset is
+    // (node − thickness) / 2. Logical property mirrors it under RTL
+    // together with the flipped flex column.
+    inset-inline-start: calc(
+      (var(--hk-timeline-node-size) - var(--hk-timeline-link-thickness)) / 2
+    );
+    inset-inline-end: auto;
+    top: var(--hk-timeline-node-size);
+    bottom: auto;
     margin: 0;
+    // Rounded caps keep the rail's ends from aliasing against the circles.
+    border-radius: calc(var(--hk-timeline-link-thickness) / 2);
   }
 }
 

package/src/components/HkTimeline.test.tsx

@@ -138,10 +138,48 @@ describe("HkTimeline full mode", () => {
     expect(els[3].getAttribute("aria-current")).toBeNull();
   });
 
-  it("keeps vertical orientation in full mode", () => {
-    const t = mountTimeline({ currentKey: "b", orientation: "vertical", collapse: "always" });
+  it("keeps a short vertical timeline in full mode", () => {
+    // A 3-step vertical timeline is its own window: nothing to collapse.
+    const steps = [
+      { key: "a", label: "Alpha" },
+      { key: "b", label: "Beta" },
+      { key: "c", label: "Gamma" },
+    ];
+    const t = mountTimeline({ currentKey: "b", orientation: "vertical", collapse: "always" }, steps);
     expect(t.container.querySelector(".hk-timeline")?.getAttribute("data-mode")).toBe("full");
   });
+
+  it("collapses a vertical timeline into the stacked window", () => {
+    const t = mountTimeline({ currentKey: "c", orientation: "vertical", collapse: "always" });
+    const root = t.container.querySelector(".hk-timeline");
+    expect(root?.getAttribute("data-orientation")).toBe("vertical");
+    expect(root?.getAttribute("data-mode")).toBe("window");
+
+    const before = t.container.querySelector('.hk-timeline-window[data-side="before"]');
+    const current = t.container.querySelector('.hk-timeline-window[data-side="current"]');
+    const after = t.container.querySelector('.hk-timeline-window[data-side="after"]');
+
+    expect(before?.querySelector('[data-el="label"]')?.textContent).toBe("Beta");
+    expect(current?.querySelector('[data-el="label"]')?.textContent).toBe("Gamma");
+    expect(after?.querySelector('[data-el="label"]')?.textContent).toBe("Delta");
+
+    // Same dimming grammar as the horizontal window: outer cells dimmed,
+    // the current cell at full strength.
+    expect(before?.hasAttribute("data-dimmed")).toBe(true);
+    expect(current?.hasAttribute("data-dimmed")).toBe(false);
+    expect(after?.hasAttribute("data-dimmed")).toBe(true);
+
+    // Vertical continuation hints fade along the block axis.
+    expect(
+      t.container.querySelector('.hk-timeline-link[data-segment="edge-before"]')?.getAttribute("data-fade-dir"),
+    ).toBe("up");
+    expect(
+      t.container.querySelector('.hk-timeline-link[data-segment="edge-after"]')?.getAttribute("data-fade-dir"),
+    ).toBe("down");
+
+    // The current step keeps its aria contract inside the stacked window.
+    expect(current?.querySelector(".hk-timeline-step")?.getAttribute("aria-current")).toBe("step");
+  });
 });
 
 describe("HkTimeline window mode", () => {

package/src/components/HkTimeline.tsx

@@ -91,6 +91,23 @@ function naturalRowWidth(el: HTMLElement): number {
   return Math.ceil(width);
 }
 
+/** Vertical twin of [`naturalRowWidth`]: the column's natural height when
+ *  free to grow past the host (steps are `flex: 0 0 auto`, so an offscreen
+ *  clone with `height: max-content` measures the unclamped stack). */
+function naturalColumnHeight(el: HTMLElement): number {
+  const probe = el.cloneNode(true) as HTMLElement;
+  probe.style.position = "absolute";
+  probe.style.visibility = "hidden";
+  probe.style.pointerEvents = "none";
+  probe.style.height = "max-content";
+  const parent = el.parentElement;
+  if (!parent) return el.scrollHeight;
+  parent.appendChild(probe);
+  const height = probe.getBoundingClientRect().height;
+  probe.remove();
+  return Math.ceil(height);
+}
+
 export default defineComponent({
   name: "HkTimeline",
   props: {
@@ -112,22 +129,22 @@ export default defineComponent({
   setup(props, { emit }) {
     const host = ref<HTMLElement | null>(null);
     const collapsed = ref(false);
-    /** Full-row width captured right before collapsing; used as the
-     *  expand-again threshold (plus hysteresis) while windowed. */
-    let fullNaturalWidth = 0;
+    /** Full-row width (horizontal) or full-column height (vertical)
+     *  captured right before collapsing; used as the expand-again
+     *  threshold (plus hysteresis) while windowed. */
+    let fullNaturalSize = 0;
     let observer: ResizeObserver | undefined;
 
     const currentIndex = computed(() =>
       props.steps.findIndex((s) => s.key === props.currentKey),
     );
 
-    /** The window only makes sense for a horizontal row with more steps
-     *  than the window can show (a 3-step row is its own window). */
+    /** The window only makes sense for more steps than the window can show
+     *  (a 3-step timeline is its own window). Horizontal collapse keys off
+     *  width overflow, vertical collapse off height overflow — the stepper
+     *  behaves the same whether the host squeezes its row or its column. */
     const windowable = computed(
-      () =>
-        props.orientation === "horizontal" &&
-        props.steps.length > 3 &&
-        currentIndex.value >= 0,
+      () => props.steps.length > 3 && currentIndex.value >= 0,
     );
 
     const windowed = computed(
@@ -152,23 +169,25 @@ export default defineComponent({
 
     function measure(): void {
       const el = host.value;
-      if (!el || !windowable.value || props.collapse !== "auto") {
+      if (!el || props.collapse !== "auto") {
         collapsed.value = false;
         return;
       }
+      const vertical = props.orientation === "vertical";
+      const fitSize = vertical ? el.clientHeight : el.clientWidth;
       if (collapsed.value) {
-        // Expand again only once the host comfortably fits the full row it
-        // could not fit when we collapsed (16px hysteresis against flapping
-        // around the exact threshold).
-        if (fullNaturalWidth > 0 && el.clientWidth >= fullNaturalWidth + 16) {
+        // Expand again only once the host comfortably fits the full row or
+        // column it could not fit when we collapsed (16px hysteresis
+        // against flapping around the exact threshold).
+        if (fullNaturalSize > 0 && fitSize >= fullNaturalSize + 16) {
           collapsed.value = false;
-          fullNaturalWidth = 0;
+          fullNaturalSize = 0;
         }
         return;
       }
-      const natural = naturalRowWidth(el);
-      if (natural > el.clientWidth + 1) {
-        fullNaturalWidth = natural;
+      const natural = vertical ? naturalColumnHeight(el) : naturalRowWidth(el);
+      if (natural > fitSize + 1) {
+        fullNaturalSize = natural;
         collapsed.value = true;
       }
     }
@@ -197,7 +216,7 @@ export default defineComponent({
       ],
       () => {
         collapsed.value = false;
-        fullNaturalWidth = 0;
+        fullNaturalSize = 0;
         void nextTick(measure);
       },
     );
@@ -288,7 +307,7 @@ export default defineComponent({
                     class="hk-timeline-link"
                     data-segment="edge-before"
                     data-status={statusOf(w.beforeIndex)}
-                    data-fade-dir="left"
+                    data-fade-dir={props.orientation === "vertical" ? "up" : "left"}
                   />
                 )}
                 {w.afterIndex >= 0 && w.fadeAfter && (
@@ -296,7 +315,7 @@ export default defineComponent({
                     class="hk-timeline-link"
                     data-segment="edge-after"
                     data-status={statusOf(w.afterIndex)}
-                    data-fade-dir="right"
+                    data-fade-dir={props.orientation === "vertical" ? "down" : "right"}
                   />
                 )}
               </div>

package/src/i18n/context.flatKeys.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+
+import { setLocale, useI18n } from "./context";
+
+/**
+ * Regression (2026-09-08 user report): the language tag's "Not set"
+ * placeholder stayed ENGLISH on a Chinese UI. Root cause —
+ * buildLocaleMessages only merged nested domain sections and silently
+ * DROPPED every top-level flat key ("hikari::x.y": "…"), so all
+ * post-0.3 flat additions (affixPicker.*, messageBox.*,
+ * localizedInput.noMatches, …) fell back to the inline English default
+ * at runtime on every locale. These tests pin flat-key loading.
+ */
+describe("i18n flat-key loading", () => {
+  it("serves top-level flat keys from the locale bundle", async () => {
+    await setLocale("zh-Hans");
+    const { t } = useI18n();
+    expect(t("hikari::affixPicker.unset", "Not set")).toBe("未设置");
+    expect(t("hikari::affixPicker.remove", "Remove")).toBe("移除");
+    expect(t("hikari::affixPicker.removeConfirmTitle", "Remove entry")).toBe("移除条目");
+    expect(t("hikari::messageBox.confirm", "Confirm")).toBe("确认");
+  });
+
+  it("keeps nested legacy sections loading beside the flat keys", async () => {
+    await setLocale("zh-Hans");
+    const { t } = useI18n();
+    expect(t("hikari::localizedInput.chooseLanguage", "Choose editing language")).toBe(
+      "选择编辑语言",
+    );
+    expect(t("hikari::modal.close", "Close")).toBe("关闭");
+  });
+
+  it("other locales serve their own flat translations, not English", async () => {
+    await setLocale("ja");
+    const { t } = useI18n();
+    expect(t("hikari::affixPicker.unset", "Not set")).toBe("未設定");
+    await setLocale("ko");
+    expect(t("hikari::affixPicker.unset", "Not set")).toBe("미설정");
+  });
+});

package/src/i18n/context.ts

@@ -3,7 +3,7 @@ import { reactive } from "vue";
 type Messages = Record<string, string>;
 
 interface LocaleModule {
-  default: Record<string, Messages>;
+  default: Record<string, unknown>;
 }
 
 const localeModules = import.meta.glob<LocaleModule>(
@@ -18,9 +18,18 @@ function buildLocaleMessages(locale: string): Messages {
   for (const [path, mod] of Object.entries(localeModules)) {
     if (!path.startsWith(prefix)) continue;
     const domain = mod.default;
-    for (const [_section, keys] of Object.entries(domain)) {
-      if (typeof keys === "object" && keys !== null) {
-        Object.assign(merged, keys);
+    for (const [key, value] of Object.entries(domain)) {
+      if (typeof value === "string") {
+        // Flat leaf — the appended-at-the-bottom style
+        // ("hikari::x.y": "…") every post-0.3 locale addition uses
+        // (affixPicker.*, messageBox.*, localizedInput.noMatches, …).
+        // The old object-only merge SILENTLY DROPPED these, so every
+        // flat key fell back to English at runtime no matter the
+        // locale (2026-09-08 user report: "Not set" stayed English).
+        merged[key] = value;
+      } else if (value !== null && typeof value === "object") {
+        // Legacy nested domain section ("components", "chat", …).
+        Object.assign(merged, value as Messages);
       }
     }
   }

package/src/i18n/flatKeyParity.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+
+/**
+ * Flat-key parity guard (2026-09-10, follow-up to the flat-loader fix):
+ * buildLocaleMessages now serves top-level flat keys ("hikari::x.y": "…")
+ * beside the legacy nested sections — but a key missing from a locale's
+ * components.json still silently falls back to English for that locale.
+ * Every flat key in the en bundle must therefore exist in ALL 11 locale
+ * bundles. (This is the guard that would have caught the affixPicker/
+ * messageBox flat family missing from 8 locales for months.)
+ */
+const modules = import.meta.glob<{ default: Record<string, unknown> }>(
+  "./locales/*/components.json",
+  { eager: true },
+);
+
+const EXPECTED_LOCALES = [
+  "ar", "de", "en", "es", "fr", "ja", "ko", "pt", "ru", "zh-Hans", "zh-Hant",
+];
+
+describe("components.json flat-key parity", () => {
+  const bundles = Object.entries(modules).map(([path, mod]) => ({
+    locale: path.match(/locales\/([^/]+)\/components\.json/)?.[1] ?? "",
+    flat: Object.fromEntries(
+      Object.entries(mod.default).filter(([, v]) => typeof v === "string"),
+    ) as Record<string, string>,
+  }));
+
+  it("covers all 11 locales", () => {
+    expect(bundles.map((b) => b.locale).sort()).toEqual(EXPECTED_LOCALES);
+  });
+
+  it("defines every en flat key in every locale, non-empty", () => {
+    const en = bundles.find((b) => b.locale === "en");
+    expect(en, "en bundle renders").toBeTruthy();
+    const keys = Object.keys(en!.flat);
+    expect(keys.length, "en has flat keys").toBeGreaterThan(0);
+    for (const { locale, flat } of bundles) {
+      for (const key of keys) {
+        expect(typeof flat[key], `${locale} must define ${key}`).toBe("string");
+        expect((flat[key] ?? "").length, `${locale} ${key} must not be empty`).toBeGreaterThan(0);
+      }
+    }
+  });
+});

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

@@ -182,5 +182,23 @@
     "hikari::zoomToolbar.reset": "إعادة تعيين التكبير",
     "hikari::zoomToolbar.zoomIn": "تكبير",
     "hikari::zoomToolbar.zoomOut": "تصغير"
-  }
+  },
+  "hikari::affixPicker.unset": "غير محدد",
+  "hikari::affixPicker.title": "الخيارات",
+  "hikari::affixPicker.search": "بحث",
+  "hikari::affixPicker.empty": "لا تطابقات",
+  "hikari::affixPicker.selected": "المحدد",
+  "hikari::affixPicker.selectedCount": "تم اختيار {count}",
+  "hikari::affixPicker.switchTo": "التبديل إلى",
+  "hikari::affixPicker.remove": "إزالة",
+  "hikari::affixPicker.useCustom": "استخدام \"{query}\"",
+  "hikari::affixPicker.removeConfirmTitle": "إزالة العنصر",
+  "hikari::affixPicker.removeConfirm": "إزالة \"{label}\"؟ لا يمكن التراجع عن هذا الإجراء.",
+  "hikari::localizedInput.noMatches": "لا توجد لغة مطابقة",
+  "hikari::messageBox.confirm": "تأكيد",
+  "hikari::messageBox.cancel": "إلغاء",
+  "hikari::messageBox.ok": "موافق",
+  "hikari::messageBox.alertTitle": "تنبيه",
+  "hikari::messageBox.confirmTitle": "يرجى التأكيد",
+  "hikari::messageBox.promptTitle": "إدخال"
 }

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

@@ -182,5 +182,23 @@
     "hikari::zoomToolbar.reset": "Zoom zurücksetzen",
     "hikari::zoomToolbar.zoomIn": "Vergrößern",
     "hikari::zoomToolbar.zoomOut": "Verkleinern"
-  }
+  },
+  "hikari::affixPicker.unset": "Nicht festgelegt",
+  "hikari::affixPicker.title": "Optionen",
+  "hikari::affixPicker.search": "Suchen",
+  "hikari::affixPicker.empty": "Keine Treffer",
+  "hikari::affixPicker.selected": "Ausgewählt",
+  "hikari::affixPicker.selectedCount": "{count} ausgewählt",
+  "hikari::affixPicker.switchTo": "Wechseln zu",
+  "hikari::affixPicker.remove": "Entfernen",
+  "hikari::affixPicker.useCustom": "„{query}“ verwenden",
+  "hikari::affixPicker.removeConfirmTitle": "Eintrag entfernen",
+  "hikari::affixPicker.removeConfirm": "„{label}“ entfernen? Dies kann nicht rückgängig gemacht werden.",
+  "hikari::localizedInput.noMatches": "Keine passende Sprache",
+  "hikari::messageBox.confirm": "Bestätigen",
+  "hikari::messageBox.cancel": "Abbrechen",
+  "hikari::messageBox.ok": "OK",
+  "hikari::messageBox.alertTitle": "Hinweis",
+  "hikari::messageBox.confirmTitle": "Bitte bestätigen",
+  "hikari::messageBox.promptTitle": "Eingabe"
 }

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

@@ -182,5 +182,23 @@
     "hikari::zoomToolbar.reset": "Restablecer zoom",
     "hikari::zoomToolbar.zoomIn": "Acercar",
     "hikari::zoomToolbar.zoomOut": "Alejar"
-  }
+  },
+  "hikari::affixPicker.unset": "Sin establecer",
+  "hikari::affixPicker.title": "Opciones",
+  "hikari::affixPicker.search": "Buscar",
+  "hikari::affixPicker.empty": "Sin coincidencias",
+  "hikari::affixPicker.selected": "Seleccionados",
+  "hikari::affixPicker.selectedCount": "{count} seleccionados",
+  "hikari::affixPicker.switchTo": "Cambiar a",
+  "hikari::affixPicker.remove": "Quitar",
+  "hikari::affixPicker.useCustom": "Usar «{query}»",
+  "hikari::affixPicker.removeConfirmTitle": "Quitar elemento",
+  "hikari::affixPicker.removeConfirm": "¿Quitar «{label}»? Esto no se puede deshacer.",
+  "hikari::localizedInput.noMatches": "Ningún idioma coincidente",
+  "hikari::messageBox.confirm": "Confirmar",
+  "hikari::messageBox.cancel": "Cancelar",
+  "hikari::messageBox.ok": "Aceptar",
+  "hikari::messageBox.alertTitle": "Aviso",
+  "hikari::messageBox.confirmTitle": "Confirme",
+  "hikari::messageBox.promptTitle": "Entrada"
 }

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

@@ -182,5 +182,23 @@
     "hikari::zoomToolbar.reset": "Réinitialiser le zoom",
     "hikari::zoomToolbar.zoomIn": "Agrandir",
     "hikari::zoomToolbar.zoomOut": "Réduire"
-  }
+  },
+  "hikari::affixPicker.unset": "Non défini",
+  "hikari::affixPicker.title": "Options",
+  "hikari::affixPicker.search": "Rechercher",
+  "hikari::affixPicker.empty": "Aucun résultat",
+  "hikari::affixPicker.selected": "Sélectionnés",
+  "hikari::affixPicker.selectedCount": "{count} sélectionnés",
+  "hikari::affixPicker.switchTo": "Passer à",
+  "hikari::affixPicker.remove": "Retirer",
+  "hikari::affixPicker.useCustom": "Utiliser « {query} »",
+  "hikari::affixPicker.removeConfirmTitle": "Retirer l’entrée",
+  "hikari::affixPicker.removeConfirm": "Retirer « {label} » ? Cette action est irréversible.",
+  "hikari::localizedInput.noMatches": "Aucune langue correspondante",
+  "hikari::messageBox.confirm": "Confirmer",
+  "hikari::messageBox.cancel": "Annuler",
+  "hikari::messageBox.ok": "OK",
+  "hikari::messageBox.alertTitle": "Avis",
+  "hikari::messageBox.confirmTitle": "Veuillez confirmer",
+  "hikari::messageBox.promptTitle": "Saisie"
 }

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

@@ -182,5 +182,23 @@
     "hikari::zoomToolbar.reset": "ズームをリセット",
     "hikari::zoomToolbar.zoomIn": "拡大",
     "hikari::zoomToolbar.zoomOut": "縮小"
-  }
+  },
+  "hikari::affixPicker.unset": "未設定",
+  "hikari::affixPicker.title": "オプション",
+  "hikari::affixPicker.search": "検索",
+  "hikari::affixPicker.empty": "一致なし",
+  "hikari::affixPicker.selected": "選択中",
+  "hikari::affixPicker.selectedCount": "{count} 件選択中",
+  "hikari::affixPicker.switchTo": "切り替え",
+  "hikari::affixPicker.remove": "削除",
+  "hikari::affixPicker.useCustom": "「{query}」を使用",
+  "hikari::affixPicker.removeConfirmTitle": "項目を削除",
+  "hikari::affixPicker.removeConfirm": "「{label}」を削除しますか？この操作は元に戻せません。",
+  "hikari::localizedInput.noMatches": "一致する言語がありません",
+  "hikari::messageBox.confirm": "確認",
+  "hikari::messageBox.cancel": "キャンセル",
+  "hikari::messageBox.ok": "OK",
+  "hikari::messageBox.alertTitle": "お知らせ",
+  "hikari::messageBox.confirmTitle": "確認してください",
+  "hikari::messageBox.promptTitle": "入力"
 }

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

@@ -182,5 +182,23 @@
     "hikari::zoomToolbar.reset": "줌 초기화",
     "hikari::zoomToolbar.zoomIn": "확대",
     "hikari::zoomToolbar.zoomOut": "축소"
-  }
+  },
+  "hikari::affixPicker.unset": "미설정",
+  "hikari::affixPicker.title": "옵션",
+  "hikari::affixPicker.search": "검색",
+  "hikari::affixPicker.empty": "일치 항목 없음",
+  "hikari::affixPicker.selected": "선택됨",
+  "hikari::affixPicker.selectedCount": "{count}개 선택됨",
+  "hikari::affixPicker.switchTo": "전환",
+  "hikari::affixPicker.remove": "제거",
+  "hikari::affixPicker.useCustom": "\"{query}\" 사용",
+  "hikari::affixPicker.removeConfirmTitle": "항목 제거",
+  "hikari::affixPicker.removeConfirm": "\"{label}\"을(를) 제거할까요? 이 작업은 되돌릴 수 없습니다.",
+  "hikari::localizedInput.noMatches": "일치하는 언어가 없습니다",
+  "hikari::messageBox.confirm": "확인",
+  "hikari::messageBox.cancel": "취소",
+  "hikari::messageBox.ok": "확인",
+  "hikari::messageBox.alertTitle": "알림",
+  "hikari::messageBox.confirmTitle": "확인 필요",
+  "hikari::messageBox.promptTitle": "입력"
 }

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

@@ -182,5 +182,23 @@
     "hikari::zoomToolbar.reset": "Redefinir zoom",
     "hikari::zoomToolbar.zoomIn": "Ampliar",
     "hikari::zoomToolbar.zoomOut": "Reduzir"
-  }
+  },
+  "hikari::affixPicker.unset": "Não definido",
+  "hikari::affixPicker.title": "Opções",
+  "hikari::affixPicker.search": "Pesquisar",
+  "hikari::affixPicker.empty": "Sem correspondências",
+  "hikari::affixPicker.selected": "Selecionados",
+  "hikari::affixPicker.selectedCount": "{count} selecionados",
+  "hikari::affixPicker.switchTo": "Mudar para",
+  "hikari::affixPicker.remove": "Remover",
+  "hikari::affixPicker.useCustom": "Usar \"{query}\"",
+  "hikari::affixPicker.removeConfirmTitle": "Remover item",
+  "hikari::affixPicker.removeConfirm": "Remover \"{label}\"? Isso não pode ser desfeito.",
+  "hikari::localizedInput.noMatches": "Nenhum idioma correspondente",
+  "hikari::messageBox.confirm": "Confirmar",
+  "hikari::messageBox.cancel": "Cancelar",
+  "hikari::messageBox.ok": "OK",
+  "hikari::messageBox.alertTitle": "Aviso",
+  "hikari::messageBox.confirmTitle": "Confirme",
+  "hikari::messageBox.promptTitle": "Entrada"
 }

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

@@ -182,5 +182,23 @@
     "hikari::zoomToolbar.reset": "Сбросить масштаб",
     "hikari::zoomToolbar.zoomIn": "Увеличить",
     "hikari::zoomToolbar.zoomOut": "Уменьшить"
-  }
+  },
+  "hikari::affixPicker.unset": "Не задано",
+  "hikari::affixPicker.title": "Параметры",
+  "hikari::affixPicker.search": "Поиск",
+  "hikari::affixPicker.empty": "Нет совпадений",
+  "hikari::affixPicker.selected": "Выбрано",
+  "hikari::affixPicker.selectedCount": "Выбрано: {count}",
+  "hikari::affixPicker.switchTo": "Переключиться на",
+  "hikari::affixPicker.remove": "Удалить",
+  "hikari::affixPicker.useCustom": "Использовать «{query}»",
+  "hikari::affixPicker.removeConfirmTitle": "Удалить запись",
+  "hikari::affixPicker.removeConfirm": "Удалить «{label}»? Это действие нельзя отменить.",
+  "hikari::localizedInput.noMatches": "Нет подходящего языка",
+  "hikari::messageBox.confirm": "Подтвердить",
+  "hikari::messageBox.cancel": "Отмена",
+  "hikari::messageBox.ok": "ОК",
+  "hikari::messageBox.alertTitle": "Уведомление",
+  "hikari::messageBox.confirmTitle": "Подтвердите",
+  "hikari::messageBox.promptTitle": "Ввод"
 }