@celestia-island/hikari 0.40.4 → 0.40.6

package/package.json

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

package/src/components/HkAffixPicker.test.tsx

@@ -5,6 +5,7 @@ import HkAffixPicker, { type HkAffixOption } from "./HkAffixPicker";
 
 const OPTIONS: HkAffixOption[] = [
   { key: "cn", label: "China", meta: "+86", flag: "🇨🇳", keywords: "zhongguo 中国 0086" },
+  { key: "cn-main", label: "中华人民共和国", meta: "+86", flag: "🇨🇳" },
   { key: "jp", label: "Japan", meta: "+81", flag: "🇯🇵" },
   { key: "us", label: "United States", meta: "+1", flag: "🇺🇸" },
 ];
@@ -154,9 +155,9 @@ describe("HkAffixPicker", () => {
   it("single mode lists every option, marks the active one, closes on pick", async () => {
     const { events, container } = mountPicker({ selected: "cn" });
     await openPopup(container);
-    expect(rows()).toHaveLength(3);
+    expect(rows()).toHaveLength(4);
     expect(rows()[0].hasAttribute("data-active")).toBe(true);
-    rows()[1].click();
+    rows()[2].click();
     await nextTick();
     expect(events.select.at(-1)).toBe("jp");
     // Single mode closes after the pick (leave transition may linger).
@@ -176,6 +177,30 @@ describe("HkAffixPicker", () => {
     expect(document.querySelector(".hk-affix-empty")?.textContent).toContain("No matches");
   });
 
+  it("fuzzy fallback finds a renamed CJK label by in-order subsequence", async () => {
+    const { container } = mountPicker();
+    await openPopup(container);
+    // 中国 is NOT a substring of 中华人民共和国 — only the in-order
+    // subsequence fallback (中 at 0, 国 at 6) can surface the cn-main
+    // row the substring pass misses.
+    await typeQuery("中国");
+    const labels = rows().map((r) => r.textContent);
+    // Both the China row (keyword substring match) and the renamed
+    // cn-main row (fuzzy subsequence) surface.
+    expect(labels).toContain("🇨🇳China+86");
+    expect(labels.some((l) => l.includes("中华人民共和国"))).toBe(true);
+  });
+
+  it("order-violating query does not fuzzy-match the CJK label", async () => {
+    const { container } = mountPicker();
+    await openPopup(container);
+    // 国民 is out of order in 中华人民共和国 (国 comes after 民) — the
+    // subsequence pass must NOT surface the row.
+    await typeQuery("国民");
+    expect(rows()).toHaveLength(0);
+    expect(document.querySelector(".hk-affix-empty")?.textContent).toContain("No matches");
+  });
+
   it("re-attaches the row list when the empty-state query is cleared", async () => {
     const { container } = mountPicker();
     await openPopup(container);
@@ -190,6 +215,7 @@ describe("HkAffixPicker", () => {
     expect(document.querySelector(".hk-affix-empty")).toBeNull();
     expect(rows().map((r) => r.textContent)).toEqual([
       expect.stringContaining("China"),
+      expect.stringContaining("中华人民共和国"),
       expect.stringContaining("Japan"),
       expect.stringContaining("United States"),
     ]);
@@ -197,7 +223,12 @@ describe("HkAffixPicker", () => {
     expect(document.querySelector(".hk-affix-list")).toBeTruthy();
     // Re-filtering after the remount keeps working on the live list.
     await typeQuery("+86");
-    expect(rows().map((r) => r.textContent)).toEqual([expect.stringContaining("China")]);
+    // Both +86 rows match by substring (the cn-main row via its meta) —
+    // the original fixtured "China" row is still surfaced.
+    expect(rows().map((r) => r.textContent)).toEqual([
+      expect.stringContaining("China"),
+      expect.stringContaining("中华人民共和国"),
+    ]);
   });
 
   it("multi mode renders selected tags and offers only the remaining rows", async () => {
@@ -211,13 +242,17 @@ describe("HkAffixPicker", () => {
     expect(tags()[0].querySelector(".hk-affix-tag-dot")).toBeTruthy();
     expect(tags()[1].querySelector(".hk-affix-tag-dot")).toBeNull();
     // Rows exclude the already-selected keys.
-    expect(rows().map((r) => r.textContent)).toEqual([expect.stringContaining("United States")]);
+    expect(rows().map((r) => r.textContent)).toEqual([
+      expect.stringContaining("中华人民共和国"),
+      expect.stringContaining("United States"),
+    ]);
   });
 
   it("multi mode keeps the popup open when a row is picked", async () => {
     const { events, container } = mountPicker({ mode: "multi", selected: ["cn"] });
     await openPopup(container);
-    rows()[0].click();
+    // With cn selected, the remaining rows are [cn-main, jp, us]; pick jp.
+    rows()[1].click();
     await nextTick();
     expect(events.select.at(-1)).toBe("jp");
     expect(rows().length).toBeGreaterThan(0);

package/src/components/HkAffixPicker.tsx

@@ -38,6 +38,18 @@ export interface HkAffixOption {
   disabled?: boolean;
 }
 
+/** True when every character of `query` appears in `text` in the same
+ *  order — gaps allowed ("中国" finds 中华人民共和国). Callers lowercase
+ *  both sides first, matching the substring pass. */
+function isSubsequence(query: string, text: string): boolean {
+  let i = 0;
+  for (const ch of text) {
+    if (ch === query[i]) i++;
+    if (i === query.length) return true;
+  }
+  return false;
+}
+
 /**
  * HkAffixPicker — the standardized "affix chip + searchable popup list"
  * control. A chip rides the prefix (left) or suffix (right) slot of a
@@ -190,7 +202,16 @@ export const HkAffixPicker = defineComponent({
     );
 
     /** Rows of the pick list. Multi hides already-selected keys (they
-     *  live in the tag list instead); single always shows everything. */
+     *  live in the tag list instead); single always shows everything.
+     *
+     *  Filtering is TWO-PASS over a single field at a time (never across
+     *  concatenated fields, which produces noise):
+     *    1. an exact substring match for precision (label / meta / key /
+     *       keywords, case-folded);
+     *    2. an in-order character subsequence fallback (gaps allowed) —
+     *       so a renamed or CJK-composed label like "中华人民共和国" is
+     *       still found by its short form "中国" (中 at 0, 国 at 6).
+     */
     const filteredRows = computed<readonly HkAffixOption[]>(() => {
       const base =
         props.mode === "multi"
@@ -202,7 +223,12 @@ export const HkAffixPicker = defineComponent({
         if (o.label.toLowerCase().includes(q)) return true;
         if (o.meta && o.meta.toLowerCase().includes(q)) return true;
         if (o.key.toLowerCase().includes(q)) return true;
-        return !!o.keywords && o.keywords.toLowerCase().includes(q);
+        if (o.keywords && o.keywords.toLowerCase().includes(q)) return true;
+        // Fuzzy fallback — per field, in-order subsequence, gaps allowed.
+        if (isSubsequence(q, o.label.toLowerCase())) return true;
+        if (o.meta && isSubsequence(q, o.meta.toLowerCase())) return true;
+        if (isSubsequence(q, o.key.toLowerCase())) return true;
+        return !!o.keywords && isSubsequence(q, o.keywords.toLowerCase());
       });
     });
 

package/src/components/HkPhoneInput.test.tsx

@@ -117,12 +117,12 @@ describe("HkPhoneInput", () => {
     }
   });
 
-  it("still finds the PRC row when searching the short alias", async () => {
+  it("still finds the PRC row when searching the short form 中国", async () => {
     const { container } = mountPhone();
     await openPicker(container);
-    // The row renders the formal zh name (中华人民共和国), which no longer
-    // contains 中国 as a substring — the catalog's zhAlias keeps the old
-    // short form reachable from the search field.
+    // The row renders the formal zh name (中华人民共和国), which contains
+    // 中国 only as an in-order subsequence (中 at 0, 国 at 6) — the affix
+    // picker's fuzzy fallback surfaces the +86 row, no alias needed.
     const search = document.querySelector<HTMLInputElement>(
       ".hk-affix-search .hk-input-element",
     );

package/src/components/HkPhoneInput.tsx

@@ -102,15 +102,14 @@ export const HkPhoneInput = defineComponent({
     );
 
     /** Picker rows come from the shared affix catalog shape; the
-     *  keywords haystack keeps the old filter reach: en/zh names plus
-     *  the optional zh search alias, ISO code, bare and zero-prefixed
-     *  dial digits ("86"/"0086"). */
+     *  keywords haystack keeps the old filter reach: en/zh names, ISO
+     *  code, bare and zero-prefixed dial digits ("86"/"0086"). */
     const dialOptions = computed<readonly HkAffixOption[]>(() =>
       props.countries.map((c) => ({
         key: c.iso,
         label: dialCodeName(c, locale),
         meta: `+${c.dial}`,
-        keywords: `${c.en} ${c.zh} ${c.zhAlias ?? ""} ${c.iso} +${c.dial} 00${c.dial}`,
+        keywords: `${c.en} ${c.zh} ${c.iso} +${c.dial} 00${c.dial}`,
       })),
     );
 

package/src/data/dialCodes.test.ts

@@ -17,7 +17,6 @@ describe("dialCodes catalog", () => {
       dial: "86",
       en: "China",
       zh: "中华人民共和国",
-      zhAlias: "中国",
     });
     for (const entry of DIAL_CODES) {
       expect(entry.iso).toMatch(/^[a-z]{2}$/);

package/src/data/dialCodes.ts

@@ -19,12 +19,6 @@ export interface DialCodeEntry {
   en: string;
   /** Simplified Chinese country name. */
   zh: string;
-  /** Search-only Chinese alias — never rendered as the display name.
-   *  HkPhoneInput folds it into the popup's keyword haystack so the old
-   *  short form still finds the entry after a formal rename (e.g. the
-   *  PRC row renamed to 中华人民共和国 no longer contains 中国 as a
-   *  substring). */
-  zhAlias?: string;
 }
 
 /** Flag glyph for an ISO 3166-1 alpha-2 code (regional indicators). */
@@ -49,7 +43,7 @@ export function dialCodeName(entry: DialCodeEntry, locale: string): string {
  * prefixes like +1 / +7).
  */
 export const DIAL_CODES: readonly DialCodeEntry[] = [
-  { iso: "cn", dial: "86", en: "China", zh: "中华人民共和国", zhAlias: "中国" },
+  { iso: "cn", dial: "86", en: "China", zh: "中华人民共和国" },
   { iso: "hk", dial: "852", en: "Hong Kong (China)", zh: "中国香港" },
   { iso: "mo", dial: "853", en: "Macau (China)", zh: "中国澳门" },
   { iso: "tw", dial: "886", en: "Taiwan (China)", zh: "中国台湾" },