@celestia-island/hikari 0.40.4 → 0.40.7

package/package.json

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

package/src/DemoApp.tsx

@@ -8,6 +8,8 @@ import {
   HButton, HIconButton, HTooltip, HBadge, HTag, HIcon, HSpinner,
   HProgressBar, HProgressRing, HGaugeRing,
   HInput, HSearchInput, HNumberInput, HPasswordInput, HTextarea,
+  HFileField,
+  type PickedFile, type RemoteFsAdapter,
   HCheckbox, HSwitch, HRadio, HSelect, HSelectPanel,
   HLocalizedInput,
   HSkeleton, HSkeletonList, HAvatar, HKbd, HDivider,
@@ -98,6 +100,28 @@ export default defineComponent({
   name: "DemoApp",
   setup() {
     const form = ref({ text: "", search: "", number: 0, password: "", textarea: "" });
+    const localFiles = ref<PickedFile[]>([]);
+    const remoteFiles = ref<PickedFile[]>([]);
+    // In-memory remote FS so the remote picker demo browses something real.
+    const demoRemoteFs: RemoteFsAdapter = (() => {
+      const tree: Record<string, { name: string; kind: "file" | "dir"; size?: number }[]> = {
+        "/": [
+          { name: "data", kind: "dir" },
+          { name: "reports", kind: "dir" },
+          { name: "readme.md", kind: "file", size: 1200 },
+        ],
+        "/data": [
+          { name: "stations.csv", kind: "file", size: 20480 },
+          { name: "sensors.json", kind: "file", size: 860 },
+        ],
+        "/reports": [{ name: "2026-Q3.pdf", kind: "file", size: 409600 }],
+      };
+      return {
+        async list(path: string) {
+          return { path, entries: tree[path] ?? [] };
+        },
+      };
+    })();
     const anyForm = computed(() =>
       Object.values(form.value).filter((v) => v !== "" && v !== 0).join(", ") || null,
     );
@@ -267,6 +291,32 @@ export default defineComponent({
           {anyForm.value ? <p class="result">Form: {anyForm.value}</p> : null}
         </section>
 
+        <section>
+          <h2>HFileField / HFileBrowserDialog</h2>
+          <div class="form-grid">
+            <HFileField
+              modelValue={localFiles.value}
+              onUpdate:modelValue={(v: PickedFile[]) => (localFiles.value = v)}
+              label="Local file"
+              multiple
+              accept=".csv,.json,.txt"
+            />
+            <HFileField
+              modelValue={remoteFiles.value}
+              onUpdate:modelValue={(v: PickedFile[]) => (remoteFiles.value = v)}
+              mode="remote"
+              label="Remote file"
+              adapter={demoRemoteFs}
+              quickLinks={[{ label: "Root", path: "/" }, { label: "Data", path: "/data" }]}
+            />
+          </div>
+          {localFiles.value.length + remoteFiles.value.length > 0 ? (
+            <p class="result">
+              Picked: {[...localFiles.value, ...remoteFiles.value].map((f) => f.name).join(", ")}
+            </p>
+          ) : null}
+        </section>
+
         <section>
           <h2>HCheckbox / HSwitch / HRadio</h2>
           <div class="row">

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());
       });
     });