@celestia-island/hikari 0.55.30 → 0.55.32

package/package.json

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

package/src/components/HkBlockingToast.test.tsx

@@ -237,4 +237,57 @@ describe("HkBlockingToast", () => {
     await settle();
     expect(cards().length).toBe(0);
   });
+
+  it("pins simultaneously leaving card slots to their pre-patch boxes", async () => {
+    mountHost();
+    const gateA = showBlockingToast("First prompt", { title: "One" });
+    const gateB = showBlockingToast("Second prompt", { title: "Two" });
+    await settle();
+
+    // Same multi-removal stub as HkToast.test: once the first slot goes
+    // position:absolute mid-patch, the shrink-to-fit column re-fits, so
+    // a live read in the second slot's before-leave would freeze the
+    // reflowed box. The pin must carry the pre-patch geometry instead.
+    const slots = document.querySelectorAll<HTMLElement>(".hk-blocking-toast-slot");
+    const [first, second] = slots;
+    const wrapper = first.parentElement as HTMLElement;
+    const reflowed = () => first.classList.contains("hk-blocking-toast-leave-active");
+    Object.defineProperty(wrapper, "clientWidth", {
+      configurable: true,
+      get: () => (reflowed() ? 138 : 384),
+    });
+    const stub = (
+      el: HTMLElement,
+      box: { top: number; left: number; width: number; height: number },
+    ) => {
+      Object.defineProperty(el, "offsetParent", { value: wrapper, configurable: true });
+      Object.defineProperty(el, "offsetTop", { configurable: true, get: () => (reflowed() ? 0 : box.top) });
+      Object.defineProperty(el, "offsetLeft", { configurable: true, get: () => (reflowed() ? 0 : box.left) });
+      Object.defineProperty(el, "offsetWidth", { configurable: true, get: () => (reflowed() ? 138 : box.width) });
+      Object.defineProperty(el, "offsetHeight", { configurable: true, get: () => box.height });
+    };
+    stub(first, { top: 0, left: 0, width: 384, height: 120 });
+    stub(second, { top: 132, left: 0, width: 384, height: 120 });
+
+    cancelButton(cards()[0]).click();
+    cancelButton(cards()[1]).click();
+    await nextTick();
+
+    const [pinFirst, pinSecond] =
+      document.querySelectorAll<HTMLElement>(".hk-blocking-toast-leave-active");
+    // The second slot's pin mirrors its PRE-patch box — full-width bar at
+    // its own row — not the reflowed sliver at the vacated top slot.
+    expect(pinFirst!.style.right).toBe("0px");
+    expect(pinFirst!.style.top).toBe("0px");
+    expect(pinFirst!.style.width).toBe("384px");
+    expect(pinFirst!.style.height).toBe("120px");
+    expect(pinSecond!.style.right).toBe("0px");
+    expect(pinSecond!.style.top).toBe("132px");
+    expect(pinSecond!.style.width).toBe("384px");
+    expect(pinSecond!.style.height).toBe("120px");
+
+    await Promise.allSettled([gateA, gateB]);
+    await settle();
+    expect(cards().length).toBe(0);
+  });
 });

package/src/components/HkBlockingToast.tsx

@@ -26,6 +26,8 @@ import { AlertTriangle, CircleX as XCircle, Info } from "lucide-vue-next";
 import {
   defineComponent,
   onBeforeUnmount,
+  onBeforeUpdate,
+  ref,
   Teleport,
   TransitionGroup,
   watchEffect,
@@ -33,7 +35,7 @@ import {
 
 import { useI18n } from "../i18n/context";
 import { usePopupManager, type PopupHandle } from "../runtime/usePopupManager";
-import { clearLeaveGeometry, pinLeaveGeometry } from "../utils/dom";
+import { clearLeaveGeometry, pinLeaveGeometry, type LeaveBoxSnapshot } from "../utils/dom";
 import { useSurfaceTransition } from "../composables/useSurfaceTransition";
 import {
   resolveBlockingToast,
@@ -115,6 +117,31 @@ export default defineComponent({
     const itemHooks = useSurfaceTransition(320).hooks();
     const handles = new Map<number, PopupHandle>();
 
+    // Pre-patch geometry of every card, refreshed on each update — same
+    // multi-removal guard as HkToast (see the full rationale there):
+    // within one patch pass an earlier leaving card's position:absolute
+    // re-fits the shrink-to-fit column before a later card's beforeLeave
+    // reads its box, so live offset reads would teleport and squash the
+    // later cards. Snap the right anchor at snapshot time too — the
+    // wrapper's live clientWidth is already re-fit when the pin runs.
+    const hostRef = ref<{ $el?: Element } | null>(null);
+    const preLeaveBoxes = new WeakMap<Element, LeaveBoxSnapshot>();
+    onBeforeUpdate(() => {
+      const host = hostRef.value?.$el;
+      if (host == null || host.nodeType !== 1) return;
+      const parentWidth = (host as HTMLElement).clientWidth;
+      for (const child of Array.from(host.children)) {
+        const e = child as HTMLElement;
+        preLeaveBoxes.set(e, {
+          top: e.offsetTop,
+          left: e.offsetLeft,
+          width: e.offsetWidth,
+          height: e.offsetHeight,
+          right: parentWidth - (e.offsetLeft + e.offsetWidth),
+        });
+      }
+    });
+
     // Keep one popup-manager entry (kind "toast") per visible card so
     // registry introspection and stacking stay coherent; unregister on
     // removal. Cards register in queue order, so newer prompts get the
@@ -150,13 +177,14 @@ export default defineComponent({
       <Teleport to="body">
         <div class="hk-blocking-toast-container">
           <TransitionGroup
+            ref={hostRef}
             tag="div"
             name="hk-blocking-toast"
             onBeforeEnter={itemHooks.onBeforeEnter}
             onAfterEnter={itemHooks.onAfterEnter}
             onBeforeLeave={(el: Element) => {
               itemHooks.onBeforeLeave();
-              pinLeaveGeometry(el);
+              pinLeaveGeometry(el, { box: preLeaveBoxes.get(el) });
             }}
             onAfterLeave={itemHooks.onAfterLeave}
             onLeaveCancelled={(el: Element) => {

package/src/components/HkIconButtonGroup.scss

@@ -60,7 +60,13 @@
   padding: var(--hk-icon-group-inset);
   border: none;
   background: transparent;
-  gap: 0;
+  /* A visible gap between items (so the sliding thumb never visually
+   * merges neighbours) must ALSO feed the thumb's translate arithmetic —
+   * one custom property drives both, keeping the position pure index
+   * math with no JS measurement. Do not replace with a literal `gap: 0`;
+   * the thumb formula below consumes the same variable. */
+  --hk-icon-group-slider-gap: 0.375rem;
+  gap: var(--hk-icon-group-slider-gap);
   flex-wrap: nowrap;
 }
 
@@ -93,7 +99,10 @@
   border-radius: var(--radius-sm, 4px);
   background: rgb(var(--color-primary, 90 140 255) / 14%);
   transform: translateX(
-    calc(var(--hk-icon-group-active-index, 0) * var(--hk-icon-group-item-size))
+    calc(
+      var(--hk-icon-group-active-index, 0) *
+        (var(--hk-icon-group-item-size) + var(--hk-icon-group-slider-gap))
+    )
   );
   transition: transform var(--duration, 0.18s) ease;
   pointer-events: none;

package/src/components/HkToast.test.tsx

@@ -11,6 +11,11 @@ import { useToast } from "../runtime/useToast";
  *   stack column is shrink-to-fit and collapses once the toast leaves
  *   the flow — a percentage width there resolves against a dead
  *   containing block and the toast "flashes" into a sliver
+ * - the pin measures the PRE-PATCH box: during a multi-toast removal an
+ *   earlier sibling's position:absolute re-fits the column inside the
+ *   same patch pass, so live offset reads in a later sibling's
+ *   before-leave hook would teleport it onto the reflowed slot and
+ *   squash its bar (HkListTransition's pre-patch snapshot pattern)
  * - the toast is gone after the leave settles
  *
  * (Repo test convention: raw createApp + document queries, no
@@ -106,4 +111,63 @@ describe("HkToast", () => {
     await settle();
     expect(items().length).toBe(0);
   });
+
+  it("pins a later sibling to its pre-patch box when several toasts leave in one pass", async () => {
+    mountHost();
+    const toast = useToast();
+    toast.error("long enough error body that wrapped to a tall box");
+    toast.warning("medium body on the second row");
+    await settle();
+
+    const [first, second] = items();
+    // Model the browser's synchronous re-layout: once the FIRST toast
+    // goes position:absolute mid-patch, the shrink-to-fit column re-fits
+    // to the remaining in-flow toast — its box re-stretches to its own
+    // max-content (138) and it shifts up to the vacated top slot.
+    // happy-dom has no layout engine, so the stubs branch on the first
+    // toast's leave-active class to emulate the before/after readings.
+    const wrapper = first.parentElement as HTMLElement;
+    const reflowed = () => first.classList.contains("hk-toast-leave-active");
+    Object.defineProperty(wrapper, "clientWidth", {
+      configurable: true,
+      get: () => (reflowed() ? 138 : 384),
+    });
+    const stub = (
+      el: HTMLElement,
+      pre: { top: number; left: number; width: number; height: number },
+      post: { top: number; left: number; width: number; height: number },
+    ) => {
+      Object.defineProperty(el, "offsetParent", { value: wrapper, configurable: true });
+      for (const key of ["offsetTop", "offsetLeft", "offsetWidth", "offsetHeight"] as const) {
+        const short = key.slice(6).toLowerCase() as "top" | "left" | "width" | "height";
+        Object.defineProperty(el, key, {
+          configurable: true,
+          get: () => (reflowed() ? post[short] : pre[short]),
+        });
+      }
+    };
+    stub(first, { top: 0, left: 0, width: 384, height: 83 }, { top: 0, left: 0, width: 384, height: 83 });
+    stub(second, { top: 95, left: 0, width: 384, height: 48 }, { top: 0, left: 0, width: 138, height: 48 });
+
+    const [idA, idB] = toast.toasts.map((t) => t.id);
+    toast.remove(idA);
+    toast.remove(idB);
+    await nextTick();
+
+    const [pinFirst, pinSecond] =
+      document.querySelectorAll<HTMLElement>(".hk-toast-leave-active");
+    // The second toast's pin mirrors its PRE-patch box — full-width bar
+    // at its own row — not the reflowed sliver at the vacated top slot.
+    expect(pinFirst!.style.right).toBe("0px");
+    expect(pinFirst!.style.top).toBe("0px");
+    expect(pinFirst!.style.width).toBe("384px");
+    expect(pinFirst!.style.height).toBe("83px");
+    expect(pinSecond!.style.right).toBe("0px");
+    expect(pinSecond!.style.top).toBe("95px");
+    expect(pinSecond!.style.width).toBe("384px");
+    expect(pinSecond!.style.height).toBe("48px");
+
+    await settle();
+    expect(items().length).toBe(0);
+  });
 });

package/src/components/HkToast.tsx

@@ -1,5 +1,5 @@
 import { CircleX as XCircle, X } from "lucide-vue-next";
-import { computed, defineComponent, onMounted, onUnmounted, ref, Teleport, Transition, TransitionGroup, watch } from "vue";
+import { computed, defineComponent, onBeforeUpdate, onMounted, onUnmounted, ref, Teleport, Transition, TransitionGroup, watch } from "vue";
 import { AlertTriangle, CheckCircle, Copy, Info } from "lucide-vue-next";
 
 
@@ -7,7 +7,7 @@ import { useToast, type ToastItem, type ToastMessage, type ToastType } from "../
 import { useClipboard } from "../runtime/useClipboard";
 import { usePopupManager, type PopupHandle } from "../runtime/usePopupManager";
 import { useI18n } from "../i18n/context";
-import { clearLeaveGeometry, pinLeaveGeometry } from "../utils/dom";
+import { clearLeaveGeometry, pinLeaveGeometry, type LeaveBoxSnapshot } from "../utils/dom";
 import { useSurfaceTransition } from "../composables/useSurfaceTransition";
 import "./HkToast.scss";
 
@@ -173,6 +173,36 @@ export default defineComponent({
     let popupHandle: PopupHandle | null = null;
     const containerZ = ref<number | null>(null);
 
+    // Pre-patch geometry of every toast, refreshed on each update (the
+    // DOM is still the pre-patch tree at onBeforeUpdate — same pattern
+    // as HkListTransition / HkTabs). During a multi-toast removal the
+    // first leaving sibling gets its leave-active class (position:
+    // absolute) synchronously inside the patch pass, so by the time the
+    // NEXT sibling's beforeLeave runs, the shrink-to-fit stack column
+    // has already re-fit: a live offset read there would freeze the
+    // reflowed box — toasts teleport onto the top slot, a narrow toast's
+    // bar collapses to its own max-content, and the overlapped fading
+    // texts read as one squashed multi-line blob. The wrapper itself may
+    // also have re-fit when the pin runs, so the right anchor is snapped
+    // at snapshot time too (see LeaveBoxSnapshot.right).
+    const hostRef = ref<{ $el?: Element } | null>(null);
+    const preLeaveBoxes = new WeakMap<Element, LeaveBoxSnapshot>();
+    onBeforeUpdate(() => {
+      const host = hostRef.value?.$el;
+      if (host == null || host.nodeType !== 1) return;
+      const parentWidth = (host as HTMLElement).clientWidth;
+      for (const child of Array.from(host.children)) {
+        const e = child as HTMLElement;
+        preLeaveBoxes.set(e, {
+          top: e.offsetTop,
+          left: e.offsetLeft,
+          width: e.offsetWidth,
+          height: e.offsetHeight,
+          right: parentWidth - (e.offsetLeft + e.offsetWidth),
+        });
+      }
+    });
+
     onMounted(() => {
       popupHandle = manager.register("toast", false);
       containerZ.value = popupHandle.zIndex;
@@ -195,13 +225,14 @@ export default defineComponent({
       <Teleport to="body">
         <div class="hk-toast-container" style={containerStyle.value}>
           <TransitionGroup
+            ref={hostRef}
             tag="div"
             name="hk-toast"
             onBeforeEnter={itemHooks.onBeforeEnter}
             onAfterEnter={itemHooks.onAfterEnter}
             onBeforeLeave={(el: Element) => {
               itemHooks.onBeforeLeave();
-              pinLeaveGeometry(el);
+              pinLeaveGeometry(el, { box: preLeaveBoxes.get(el) });
             }}
             onAfterLeave={itemHooks.onAfterLeave}
             onLeaveCancelled={(el: Element) => {

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

@@ -51,6 +51,7 @@
     "hikari::filePicker.confirm": "اختيار",
     "hikari::filePicker.copy": "نسخ",
     "hikari::filePicker.copyPath": "نسخ المسار",
+    "hikari::filePicker.currentPath": "المسار الحالي",
     "hikari::filePicker.cut": "قص",
     "hikari::filePicker.empty": "هذا المجلد فارغ",
     "hikari::filePicker.fieldChooseMany": "اختر ملفات…",
@@ -218,5 +219,6 @@
   "hikari::tagInput.addCustom": "استخدام \"{q}\"",
   "hikari::tagInput.reorder": "إعادة الترتيب — {label}",
   "hikari::modal.hiddenLayers": "الطبقات المخفية",
-  "hikari::theme.modeTabHint": "هذه التبويبات تختار لوحة الألوان التي تحرّرها؛ لتبديل الوضع الفاتح/الداكن للتطبيق كله استخدم شريط الأوضاع أعلى نافذة السمة."
+  "hikari::theme.modeTabHint": "هذه التبويبات تختار لوحة الألوان التي تحرّرها؛ لتبديل الوضع الفاتح/الداكن للتطبيق كله استخدم شريط الأوضاع أعلى نافذة السمة.",
+  "hikari::emptyState.loading": "جارٍ التحميل"
 }

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

@@ -51,6 +51,7 @@
     "hikari::filePicker.confirm": "Auswählen",
     "hikari::filePicker.copy": "Kopieren",
     "hikari::filePicker.copyPath": "Pfad kopieren",
+    "hikari::filePicker.currentPath": "Aktueller Pfad",
     "hikari::filePicker.cut": "Ausschneiden",
     "hikari::filePicker.empty": "Dieser Ordner ist leer",
     "hikari::filePicker.fieldChooseMany": "Dateien auswählen…",
@@ -218,5 +219,6 @@
   "hikari::tagInput.addCustom": "„{q}“ verwenden",
   "hikari::tagInput.reorder": "Neu anordnen — {label}",
   "hikari::modal.hiddenLayers": "Verdeckte Ebenen",
-  "hikari::theme.modeTabHint": "Diese Reiter wählen die zu bearbeitende Palette; die appweite Hell/Dunkel-Umschaltung liegt im Modusstreifen des Themen-Popups."
+  "hikari::theme.modeTabHint": "Diese Reiter wählen die zu bearbeitende Palette; die appweite Hell/Dunkel-Umschaltung liegt im Modusstreifen des Themen-Popups.",
+  "hikari::emptyState.loading": "Wird geladen"
 }

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

@@ -51,6 +51,7 @@
     "hikari::filePicker.confirm": "Choose",
     "hikari::filePicker.copy": "Copy",
     "hikari::filePicker.copyPath": "Copy path",
+    "hikari::filePicker.currentPath": "Current path",
     "hikari::filePicker.cut": "Cut",
     "hikari::filePicker.empty": "This folder is empty",
     "hikari::filePicker.fieldChooseMany": "Choose files…",
@@ -218,5 +219,6 @@
   "hikari::tagInput.addCustom": "Use “{q}”",
   "hikari::tagInput.reorder": "Reorder {label}",
   "hikari::modal.hiddenLayers": "Hidden layers",
-  "hikari::theme.modeTabHint": "These tabs pick which palette you are EDITING; to switch the app-wide light/dark, use the mode strip at the top of the theme popup."
+  "hikari::theme.modeTabHint": "These tabs pick which palette you are EDITING; to switch the app-wide light/dark, use the mode strip at the top of the theme popup.",
+  "hikari::emptyState.loading": "Loading"
 }

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

@@ -51,6 +51,7 @@
     "hikari::filePicker.confirm": "Elegir",
     "hikari::filePicker.copy": "Copiar",
     "hikari::filePicker.copyPath": "Copiar ruta",
+    "hikari::filePicker.currentPath": "Ruta actual",
     "hikari::filePicker.cut": "Cortar",
     "hikari::filePicker.empty": "Esta carpeta está vacía",
     "hikari::filePicker.fieldChooseMany": "Elegir archivos…",
@@ -218,5 +219,6 @@
   "hikari::tagInput.addCustom": "Usar «{q}»",
   "hikari::tagInput.reorder": "Reordenar — {label}",
   "hikari::modal.hiddenLayers": "Capas ocultas",
-  "hikari::theme.modeTabHint": "Estas pestañas eligen la paleta que estás EDITANDO; para cambiar el modo claro/oscuro de toda la app, usa la franja de modos de la parte superior del panel de temas."
+  "hikari::theme.modeTabHint": "Estas pestañas eligen la paleta que estás EDITANDO; para cambiar el modo claro/oscuro de toda la app, usa la franja de modos de la parte superior del panel de temas.",
+  "hikari::emptyState.loading": "Cargando"
 }

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

@@ -51,6 +51,7 @@
     "hikari::filePicker.confirm": "Choisir",
     "hikari::filePicker.copy": "Copier",
     "hikari::filePicker.copyPath": "Copier le chemin",
+    "hikari::filePicker.currentPath": "Chemin actuel",
     "hikari::filePicker.cut": "Couper",
     "hikari::filePicker.empty": "Ce dossier est vide",
     "hikari::filePicker.fieldChooseMany": "Choisir des fichiers…",
@@ -218,5 +219,6 @@
   "hikari::tagInput.addCustom": "Utiliser « {q} »",
   "hikari::tagInput.reorder": "Réorganiser — {label}",
   "hikari::modal.hiddenLayers": "Couches masquées",
-  "hikari::theme.modeTabHint": "Ces onglets choisissent la palette éditée ; pour basculer clair/sombre dans toute l’app, utilisez la barre de mode du menu de thème."
+  "hikari::theme.modeTabHint": "Ces onglets choisissent la palette éditée ; pour basculer clair/sombre dans toute l’app, utilisez la barre de mode du menu de thème.",
+  "hikari::emptyState.loading": "Chargement"
 }

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

@@ -51,6 +51,7 @@
     "hikari::filePicker.confirm": "選択",
     "hikari::filePicker.copy": "コピー",
     "hikari::filePicker.copyPath": "パスをコピー",
+    "hikari::filePicker.currentPath": "現在のパス",
     "hikari::filePicker.cut": "切り取り",
     "hikari::filePicker.empty": "このフォルダーは空です",
     "hikari::filePicker.fieldChooseMany": "複数のファイルを選択…",
@@ -218,5 +219,6 @@
   "hikari::tagInput.addCustom": "「{q}」を使用",
   "hikari::tagInput.reorder": "並べ替え — {label}",
   "hikari::modal.hiddenLayers": "非表示の階層",
-  "hikari::theme.modeTabHint": "このタブは編集対象のパレットを選ぶだけです。アプリ全体の明/暗はテーマポップアップ上部のモードストリップで切り替えてください。"
+  "hikari::theme.modeTabHint": "このタブは編集対象のパレットを選ぶだけです。アプリ全体の明/暗はテーマポップアップ上部のモードストリップで切り替えてください。",
+  "hikari::emptyState.loading": "読み込み中"
 }

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

@@ -51,6 +51,7 @@
     "hikari::filePicker.confirm": "선택",
     "hikari::filePicker.copy": "복사",
     "hikari::filePicker.copyPath": "경로 복사",
+    "hikari::filePicker.currentPath": "현재 경로",
     "hikari::filePicker.cut": "잘라내기",
     "hikari::filePicker.empty": "이 폴더는 비어 있습니다",
     "hikari::filePicker.fieldChooseMany": "여러 파일 선택…",
@@ -218,5 +219,6 @@
   "hikari::tagInput.addCustom": "\"{q}\" 사용",
   "hikari::tagInput.reorder": "순서 변경 — {label}",
   "hikari::modal.hiddenLayers": "숨겨진 레이어",
-  "hikari::theme.modeTabHint": "이 탭은 편집할 팔레트를 고를 뿐입니다. 앱 전체 밝기/어둠은 테마 팝업 상단의 모드 스트립에서 바꾸세요."
+  "hikari::theme.modeTabHint": "이 탭은 편집할 팔레트를 고를 뿐입니다. 앱 전체 밝기/어둠은 테마 팝업 상단의 모드 스트립에서 바꾸세요.",
+  "hikari::emptyState.loading": "불러오는 중"
 }

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

@@ -51,6 +51,7 @@
     "hikari::filePicker.confirm": "Escolher",
     "hikari::filePicker.copy": "Copiar",
     "hikari::filePicker.copyPath": "Copiar caminho",
+    "hikari::filePicker.currentPath": "Caminho atual",
     "hikari::filePicker.cut": "Recortar",
     "hikari::filePicker.empty": "Esta pasta está vazia",
     "hikari::filePicker.fieldChooseMany": "Escolher arquivos…",
@@ -218,5 +219,6 @@
   "hikari::tagInput.addCustom": "Usar \"{q}\"",
   "hikari::tagInput.reorder": "Reordenar — {label}",
   "hikari::modal.hiddenLayers": "Camadas ocultas",
-  "hikari::theme.modeTabHint": "Estas abas escolhem a paleta que você está EDITANDO; para alternar o claro/escuro do app inteiro, use a faixa de modos no topo do painel de temas."
+  "hikari::theme.modeTabHint": "Estas abas escolhem a paleta que você está EDITANDO; para alternar o claro/escuro do app inteiro, use a faixa de modos no topo do painel de temas.",
+  "hikari::emptyState.loading": "Carregando"
 }

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

@@ -51,6 +51,7 @@
     "hikari::filePicker.confirm": "Выбрать",
     "hikari::filePicker.copy": "Копировать",
     "hikari::filePicker.copyPath": "Копировать путь",
+    "hikari::filePicker.currentPath": "Текущий путь",
     "hikari::filePicker.cut": "Вырезать",
     "hikari::filePicker.empty": "Эта папка пуста",
     "hikari::filePicker.fieldChooseMany": "Выбрать файлы…",
@@ -218,5 +219,6 @@
   "hikari::tagInput.addCustom": "Использовать «{q}»",
   "hikari::tagInput.reorder": "Изменить порядок — {label}",
   "hikari::modal.hiddenLayers": "Скрытые слои",
-  "hikari::theme.modeTabHint": "Вкладки выбирают редактируемую палитру; общесистемное переключение светлой/тёмной — в полосе режимов вверху меню темы."
+  "hikari::theme.modeTabHint": "Вкладки выбирают редактируемую палитру; общесистемное переключение светлой/тёмной — в полосе режимов вверху меню темы.",
+  "hikari::emptyState.loading": "Загрузка"
 }

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

@@ -51,6 +51,7 @@
     "hikari::filePicker.confirm": "选择",
     "hikari::filePicker.copy": "复制",
     "hikari::filePicker.copyPath": "复制路径",
+    "hikari::filePicker.currentPath": "当前路径",
     "hikari::filePicker.cut": "剪切",
     "hikari::filePicker.empty": "此文件夹为空",
     "hikari::filePicker.fieldChooseMany": "选择多个文件…",
@@ -222,5 +223,6 @@
   "hikari::tagInput.addCustom": "使用「{q}」",
   "hikari::tagInput.reorder": "拖动排序 — {label}",
   "hikari::modal.hiddenLayers": "隐藏层级",
-  "hikari::theme.modeTabHint": "切换这里编辑的是对应模式的调色板；要切换应用整体深/浅，请用主题弹窗顶部的模式条。"
+  "hikari::theme.modeTabHint": "切换这里编辑的是对应模式的调色板；要切换应用整体深/浅，请用主题弹窗顶部的模式条。",
+  "hikari::emptyState.loading": "加载中"
 }

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

@@ -51,6 +51,7 @@
     "hikari::filePicker.confirm": "選擇",
     "hikari::filePicker.copy": "複製",
     "hikari::filePicker.copyPath": "複製路徑",
+    "hikari::filePicker.currentPath": "目前路徑",
     "hikari::filePicker.cut": "剪下",
     "hikari::filePicker.empty": "此資料夾為空",
     "hikari::filePicker.fieldChooseMany": "選擇多個檔案…",
@@ -222,5 +223,6 @@
   "hikari::tagInput.addCustom": "使用「{q}」",
   "hikari::tagInput.reorder": "拖曳排序 — {label}",
   "hikari::modal.hiddenLayers": "隱藏層級",
-  "hikari::theme.modeTabHint": "切換這裡編輯的是對應模式的調色盤；要切換應用整體深/淺，請用主題彈窗頂部的模式條。"
+  "hikari::theme.modeTabHint": "切換這裡編輯的是對應模式的調色盤；要切換應用整體深/淺，請用主題彈窗頂部的模式條。",
+  "hikari::emptyState.loading": "載入中"
 }

package/src/i18n/usageSurface.test.ts

@@ -0,0 +1,177 @@
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+/**
+ * t() usage-surface audit (2026-09-19, follow-up to the #599 incident):
+ * flatKeyParity.test.ts proves the locale bundles AGREE with en, but both
+ * sides of that check live in the JSON — nothing pinned the source side.
+ * Renaming a key in the bundles (or deleting it from en only) left every
+ * test green while the components fell back to their hard-coded English
+ * literals in every language (exactly how the theme.modeTabHint gap sat
+ * unnoticed until #599, alongside two older strays this suite landed:
+ * emptyState.loading and filePicker.currentPath).
+ *
+ * This file closes that loop: it statically scans every consumer source
+ * file under packages/vue/src for `t("hikari::…")` literals — in ALL
+ * THREE quote forms (double, single, backtick) and across line breaks
+ * after the opening paren (HkPhoneInput.tsx:194 already uses that split
+ * form) — and asserts each referenced key exists, non-empty, in the
+ * loader-merged bundle of EVERY locale.
+ *
+ * The `hikari::` prefix is exactly hikari's own component vocabulary.
+ * Unprefixed literals ("common.time.*", "${i18nKey}.*", "locale.title")
+ * belong to the HOST-app namespace (registered at runtime via
+ * mergeMessages, or passed in as props.t) and are pinned by their own
+ * suites (timeKeys.test.ts & co.) — out of scope here by construction.
+ */
+const modules = import.meta.glob<{ default: Record<string, unknown> }>(
+  "./locales/*/*.json",
+  { eager: true },
+);
+
+const EXPECTED_LOCALES = [
+  "ar", "de", "en", "es", "fr", "ja", "ko", "pt", "ru", "zh-Hans", "zh-Hant",
+];
+
+/** The loader's own merge (i18n/context.ts buildLocaleMessages): per locale
+ *  directory, the union over every *.json of top-level flat string keys plus
+ *  one level of legacy nested sections. */
+function buildLocaleUniverse(locale: string): Map<string, string> {
+  const merged = new Map<string, string>();
+  for (const [path, mod] of Object.entries(modules)) {
+    if (!path.includes(`/locales/${locale}/`)) continue;
+    for (const [key, value] of Object.entries(mod.default)) {
+      if (typeof value === "string") merged.set(key, value);
+      else if (value !== null && typeof value === "object") {
+        for (const [leaf, text] of Object.entries(value as Record<string, unknown>)) {
+          if (typeof text === "string") merged.set(leaf, text);
+        }
+      }
+    }
+  }
+  return merged;
+}
+
+const SRC_ROOT = join(import.meta.dirname, "..");
+
+/** Consumer sources: everything under src/ EXCEPT the i18n suite itself
+ *  (its tests exercise the loader with their own literals — bundle-side
+ *  guards already cover those keys; scanning them here would just couple
+ *  this audit to test churn, not to the real usage surface). */
+function walkSources(dir: string, acc: string[] = []): string[] {
+  for (const name of readdirSync(dir)) {
+    const path = join(dir, name);
+    const info = statSync(path);
+    if (info.isDirectory()) {
+      if (dir === SRC_ROOT && name === "i18n") continue;
+      walkSources(path, acc);
+    } else if (/\.(ts|tsx|vue)$/.test(name)) acc.push(path);
+  }
+  return acc;
+}
+
+/** Static literal call sites. The `\s*` tolerates a line break between
+ *  `t(` and the key; the character class covers ", ', and ` so a template
+ *  literal WITHOUT interpolation is still a pinned literal. */
+const STATIC_USE_RE = /\bt\(\s*(["'`])hikari::[A-Za-z0-9_.]+\1/g;
+/** Dynamic families: a template key with `${…}` interpolation can never be
+ *  resolved statically — they are enumerated in DYNAMIC_KEY_FAMILIES. */
+const DYNAMIC_USE_RE = /\bt\(\s*`hikari::[A-Za-z0-9_.]*\$\{/g;
+
+interface Site {
+  key: string;
+  where: string;
+}
+
+function scanSources(): { statics: Site[]; dynamics: string[] } {
+  const statics: Site[] = [];
+  const dynamics: string[] = [];
+  for (const path of walkSources(SRC_ROOT)) {
+    const text = readFileSync(path, "utf8");
+    const rel = path.slice(SRC_ROOT.length + 1);
+    for (const match of text.matchAll(STATIC_USE_RE)) {
+      const key = match[0].slice(match[0].indexOf("hikari::"), -1);
+      statics.push({ key, where: `${rel}:${text.slice(0, match.index).split("\n").length}` });
+    }
+    for (const match of text.matchAll(DYNAMIC_USE_RE)) {
+      // The literal portion before "${" — e.g. "hikari::context." — which
+      // is the family prefix the whitelist is keyed by.
+      dynamics.push(match[0].slice(match[0].indexOf("hikari::"), -2));
+    }
+  }
+  return { statics, dynamics };
+}
+
+/** Interpolated key families that intentionally escape the static scan,
+ *  each with the reason it cannot be pinned by literal. Both directions
+ *  are enforced below: every family found in source must be listed, and
+ *  every listed family must still exist in source, so this whitelist
+ *  cannot rot into silence. */
+const DYNAMIC_KEY_FAMILIES: Record<string, string> = {
+  "hikari::context.": "HkContextRing section keys — closed enum, pinned by name in contextKeys.test.ts.",
+  "hikari::statusBar.backend.": "HkConnectionStatus — enumerated connection-state suffixes.",
+  "hikari::statusBar.region.": "HkStatusBar region names — OPTIONAL per-locale overrides over Intl.DisplayNames (see LOCALE_SPECIFIC_NESTED in flatKeyParity.test.ts).",
+  "hikari::theme.groups.": "Registry type: group/slot ids are registered by downstream apps; t() resolves via a resolveLocalizedText fallback, never a hikari bundle.",
+  "hikari::theme.tokens.": "HkColorSchemeEditor token enum — closed set defined in platform.json locales.",
+};
+
+describe("t() usage surface vs locale bundles", () => {
+  const universes = new Map(EXPECTED_LOCALES.map((l) => [l, buildLocaleUniverse(l)]));
+  const { statics, dynamics } = scanSources();
+
+  it("covers all 11 locales in the merged bundle universe", () => {
+    const found = new Set(
+      Object.keys(modules)
+        .map((p) => p.match(/locales\/([^/]+)\//)?.[1])
+        .filter((l): l is string => Boolean(l)),
+    );
+    expect([...found].sort()).toEqual(EXPECTED_LOCALES);
+  });
+
+  it("scanner self-proof: the extraction actually extracts (no vacuous pass)", () => {
+    // Zero-hit discipline: a broken regex/walk yields zeros that LOOK green.
+    // Pin the floor near today's real volume (446 files, 325 sites, 270
+    // distinct keys) so a hollowed scanner goes loudly red, and pin known
+    // positives — including one multi-line call form — by name and file.
+    expect(walkSources(SRC_ROOT).length).toBeGreaterThan(400);
+    expect(statics.length).toBeGreaterThan(320);
+    expect(new Set(statics.map((s) => s.key)).size).toBeGreaterThan(260);
+    const firstSiteOf = (key: string) =>
+      statics.find((s) => s.key === key)?.where ?? "NOT FOUND";
+    expect(firstSiteOf("hikari::theme.modeTabHint")).toMatch(/HkColorSchemeEditor\.tsx/);
+    expect(firstSiteOf("hikari::emptyState.loading")).toMatch(/HkEmptyState\.tsx/);
+    expect(firstSiteOf("hikari::filePicker.currentPath")).toMatch(/HkFileBrowserDialog\.tsx/);
+    // Split-across-lines call form (t( and the key on different lines):
+    expect(firstSiteOf("hikari::phoneInput.searchCountries")).toMatch(/HkPhoneInput\.tsx/);
+  });
+
+  it("resolves every statically referenced hikari:: key in every locale, non-empty", () => {
+    expect(statics.length, "source scan found call sites").toBeGreaterThan(0);
+    const violations: string[] = [];
+    const reported = new Set<string>();
+    for (const { key, where } of statics) {
+      for (const locale of EXPECTED_LOCALES) {
+        const value = universes.get(locale)!.get(key);
+        if (typeof value !== "string" || value.length === 0) {
+          if (reported.has(key)) continue;
+          reported.add(key);
+          violations.push(
+            `${key} (first referenced at ${where}) is missing or empty in ${locale}`,
+          );
+        }
+      }
+    }
+    expect(violations, "every referenced key must resolve in all 11 locales").toEqual([]);
+  });
+
+  it("enumerates exactly the whitelisted dynamic key families, both directions", () => {
+    const found = [...new Set(dynamics)].sort();
+    expect(found, "families found in source but missing from the whitelist").toEqual(
+      Object.keys(DYNAMIC_KEY_FAMILIES).sort(),
+    );
+    for (const family of Object.keys(DYNAMIC_KEY_FAMILIES)) {
+      expect(found, `${family} is whitelisted but no longer used — prune it`).toContain(family);
+    }
+  });
+});

package/src/utils/dom.test.ts

@@ -110,6 +110,24 @@ describe("pinLeaveGeometry", () => {
     expect(el.style.boxSizing).toBe("border-box");
   });
 
+  it("prefers the snapshot's right pin over a live clientWidth on the right anchor", () => {
+    // Right-anchored hosts re-fit mid-removal: by the time a later
+    // sibling pins, the live clientWidth has already collapsed, so the
+    // snapshot-time right offset must win over the live computation.
+    const parent = { clientWidth: 138 };
+    const el = stubEl(parent, { offsetTop: 95, offsetLeft: 0, offsetWidth: 384, offsetHeight: 48 });
+
+    pinLeaveGeometry(el as unknown as Element, {
+      box: { top: 95, left: 0, width: 384, height: 48, right: 0 },
+    });
+
+    expect(el.style.right).toBe("0px");
+    expect(el.style.top).toBe("95px");
+    expect(el.style.width).toBe("384px");
+    expect(el.style.height).toBe("48px");
+    expect(el.style.boxSizing).toBe("border-box");
+  });
+
   it("clearLeaveGeometry strips exactly the pins pinLeaveGeometry wrote", () => {
     const parent = { clientWidth: 384 };
     const el = stubEl(parent, { offsetWidth: 384, offsetHeight: 83 });

package/src/utils/dom.ts

@@ -49,6 +49,13 @@ export interface LeaveBoxSnapshot {
   left: number;
   width: number;
   height: number;
+  /** Right-pin offset (`containing-block width − (left + width)`)
+   *  computed at SNAPSHOT time. Right-anchored hosts need this because
+   *  the containing block itself re-fits mid-removal: by the time a
+   *  later sibling pins, a live `clientWidth` read would measure the
+   *  already-collapsed wrapper and shove the pinned box past the edge
+   *  the anchor is supposed to hold. */
+  right?: number;
 }
 
 /**
@@ -107,7 +114,10 @@ export function pinLeaveGeometry(
     // CSS `right` for an absolutely positioned box is measured from the
     // containing block's right padding-box edge; offsetLeft/offsetWidth
     // place the item's right border edge within that same padding box.
-    const right = parent.clientWidth - (left + width);
+    // Prefer the snapshot-time value: a live clientWidth here would
+    // measure the wrapper AFTER earlier siblings already left the flow
+    // (multi-element removal re-fits it synchronously).
+    const right = opts?.box?.right ?? parent.clientWidth - (left + width);
     node.style.right = `${right}px`;
   }
   node.style.top = `${top}px`;