@celestia-island/hikari 0.40.35 → 0.41.0

package/package.json

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

package/src/DemoApp.tsx

@@ -9,6 +9,7 @@ import {
   HProgressBar, HProgressRing, HGaugeRing,
   HInput, HSearchInput, HNumberInput, HPasswordInput, HTextarea,
   HFileField,
+  HFilePickerField,
   type PickedFile, type RemoteFsAdapter,
   HCheckbox, HSwitch, HRadio, HSelect, HSelectPanel,
   HLocalizedInput,
@@ -21,7 +22,7 @@ import {
   type TrendPen, type MinimapBox,
 } from "@celestia-island/hikari";
 
-const totalComponents = 66;
+const totalComponents = 67;
 
 const icons = ["home", "settings", "user", "search", "bell", "heart", "star", "mail", "download", "upload", "trash", "edit", "plus", "check", "x"];
 
@@ -102,6 +103,12 @@ export default defineComponent({
     const form = ref({ text: "", search: "", number: 0, password: "", textarea: "" });
     const localFiles = ref<PickedFile[]>([]);
     const remoteFiles = ref<PickedFile[]>([]);
+    const hookPath = ref("");
+    const remotePath = ref("/data");
+    // Stands in for a host-opened OS dialog (the Tauri2/Electron case —
+    // the window lives outside the webview, so the field takes a hook).
+    const fakeHostPicker = async (): Promise<string | null> =>
+      Promise.resolve("/opt/acme/install");
     // 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 }[]> = {
@@ -317,6 +324,27 @@ export default defineComponent({
           ) : null}
         </section>
 
+        <section>
+          <h2>HFilePickerField</h2>
+          <div class="form-grid">
+            <HFilePickerField
+              modelValue={hookPath.value}
+              onUpdate:modelValue={(v: string) => (hookPath.value = v)}
+              label="Install location (host hook)"
+              hint="A host-opened OS dialog — e.g. the Tauri2 dialog plugin."
+              pick={fakeHostPicker}
+            />
+            <HFilePickerField
+              modelValue={remotePath.value}
+              onUpdate:modelValue={(v: string) => (remotePath.value = v)}
+              label="Remote folder (in-app picker)"
+              backend="remote"
+              adapter={demoRemoteFs}
+              quickLinks={[{ label: "Root", path: "/" }, { label: "Data", path: "/data" }]}
+            />
+          </div>
+        </section>
+
         <section>
           <h2>HCheckbox / HSwitch / HRadio</h2>
           <div class="row">

package/src/components/HkCheckbox.tsx

@@ -52,7 +52,6 @@ export default defineComponent({
 
     return () => {
       const inputType = props.type === "radio" ? "radio" : "checkbox";
-      const isChecked = props.modelValue === true || props.modelValue === null;
 
       return (
         <label

package/src/components/HkEmptyState.test.tsx

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h } from "vue";
 
 import HkEmptyState from "./HkEmptyState";
@@ -56,6 +56,26 @@ describe("HkEmptyState", () => {
     expect(btn.textContent).toBe("Retry");
   });
 
+  it("accepts functional icon components without a prop-type warning", () => {
+    // lucide-vue-next icons are plain functions; the Object-only runtime
+    // check rejected them with a dev warning at every chest call site
+    // (fixed 2026-09-09: [Object, Function]).
+    const warnings: string[] = [];
+    const spy = vi.spyOn(console, "warn").mockImplementation((...args: unknown[]) => {
+      warnings.push(args.join(" "));
+    });
+    try {
+      // Shape-mirrors a lucide icon: a functional component accepting
+      // props (size/aria) and rendering a node.
+      const lucideLike = ((_props: unknown) => h("i", { class: "fn-icon" })) as never;
+      const c = mount(h(HkEmptyState, { title: "No items", icon: lucideLike }));
+      expect(c.querySelector(".hk-empty-icon .fn-icon")).not.toBeNull();
+      expect(warnings.filter((w) => w.includes("Invalid prop"))).toEqual([]);
+    } finally {
+      spy.mockRestore();
+    }
+  });
+
   it("renders the icon prop component in the icon well", () => {
     const c = mount(h(HkEmptyState, { title: "No items", icon: StubIcon }));
     expect(c.querySelector(".hk-empty-icon .stub-empty-icon")).not.toBeNull();

package/src/components/HkEmptyState.tsx

@@ -11,7 +11,7 @@ export default defineComponent({
     title: { type: String, default: undefined },
     description: { type: String, default: undefined },
     /** Icon component (lucide-vue-next style); rendered via h() at size 32. */
-    icon: { type: Object as PropType<Component>, default: undefined },
+    icon: { type: [Object, Function] as PropType<Component>, default: undefined },
     /** Loading variant: only a centered spinner, exposed as a status region. */
     loading: { type: Boolean, default: false },
     /** page = bounded, centered card on desktop; fill = stretch to the host. */

package/src/components/HkFileBrowserDialog.test.tsx

@@ -71,6 +71,7 @@ interface MountOptions {
   multiple?: boolean;
   quickLinks?: Array<{ label: string; path: string }>;
   initialPath?: string;
+  pickDirectory?: boolean;
 }
 
 function mountDialog(adapter: RemoteFsAdapter, opts: MountOptions = {}) {
@@ -91,6 +92,7 @@ function mountDialog(adapter: RemoteFsAdapter, opts: MountOptions = {}) {
           multiple: opts.multiple ?? false,
           quickLinks: opts.quickLinks ?? [],
           initialPath: opts.initialPath ?? "/",
+          pickDirectory: opts.pickDirectory ?? false,
           "onUpdate:modelValue": (v: boolean) => {
             openEvents.push(v);
             open.value = v;
@@ -446,3 +448,44 @@ describe("HkFileBrowserDialog load states", () => {
     expect(rowNames()).toEqual(["ok.txt"]);
   });
 });
+
+describe("HkFileBrowserDialog directory mode", () => {
+  it("confirms the listed folder without needing a selection", async () => {
+    const adapter = makeAdapter();
+    const { confirmed, openEvents } = mountDialog(adapter, { pickDirectory: true });
+    await flush();
+
+    // Nothing is selected, yet confirm is live: the current folder IS
+    // the choice.
+    const confirmBtn = q<HTMLButtonElement>(".hk-file-browser-confirm");
+    expect(confirmBtn.disabled).toBe(false);
+    expect(confirmBtn.textContent).toContain("Choose this folder");
+    confirmBtn.click();
+    await flush();
+    expect(confirmed).toEqual([[{ name: "/", path: "/" }]]);
+    expect(openEvents).toContain(false);
+  });
+
+  it("navigates into subfolders and hands back that folder's path", async () => {
+    const adapter = makeAdapter();
+    const { confirmed } = mountDialog(adapter, { pickDirectory: true });
+    await flush();
+
+    await clickRow("reports");
+    expect(adapter.list).toHaveBeenLastCalledWith("/reports");
+    const confirmBtn = q<HTMLButtonElement>(".hk-file-browser-confirm");
+    confirmBtn.click();
+    await flush();
+    expect(confirmed).toEqual([[{ name: "reports", path: "/reports" }]]);
+  });
+
+  it("never selects file rows while picking a folder", async () => {
+    const adapter = makeAdapter();
+    mountDialog(adapter, { pickDirectory: true });
+    await flush();
+
+    await clickRow("data.csv");
+    const rows = qa<HTMLButtonElement>(".hk-file-browser-row");
+    expect(rows.every((r) => r.dataset.selected === undefined)).toBe(true);
+  });
+});

package/src/components/HkFileBrowserDialog.tsx

@@ -112,6 +112,11 @@ export default defineComponent({
       type: Array as PropType<FileQuickLink[]>,
       default: () => [],
     },
+    /**
+     * Directory-picking mode: confirm chooses the folder currently
+     * listed (entries only navigate), instead of selecting files.
+     */
+    pickDirectory: { type: Boolean, default: false },
     confirmLabel: { type: String, default: undefined },
     cancelLabel: { type: String, default: undefined },
   },
@@ -290,6 +295,8 @@ export default defineComponent({
         navigate(joinPath(currentPath.value, entry.name));
         return;
       }
+      // Directory-picking mode only navigates; files are inert rows.
+      if (props.pickDirectory) return;
       const next = new Set(selected.value);
       if (props.multiple) {
         if (next.has(entry.name)) next.delete(entry.name);
@@ -306,7 +313,7 @@ export default defineComponent({
     /** Double-click activates: the file confirms immediately (and alone,
      *  even in multiple mode — a double-click names ONE file). */
     function onEntryActivate(entry: RemoteFileEntry) {
-      if (entry.kind !== "file") return;
+      if (entry.kind !== "file" || props.pickDirectory) return;
       selected.value = new Set([entry.name]);
       confirmSelection();
     }
@@ -394,6 +401,15 @@ export default defineComponent({
     }
 
     function confirmSelection() {
+      // Directory mode: the folder currently listed IS the choice —
+      // the pathbar has been showing it the whole time.
+      if (props.pickDirectory) {
+        const path = currentPath.value;
+        const name = path.replace(/\/+$/, "").split("/").filter(Boolean).pop() ?? "/";
+        emit("confirm", [{ name, path }]);
+        close();
+        return;
+      }
       if (selected.value.size === 0) return;
       const files: ConfirmedFile[] = [];
       for (const name of selected.value) {
@@ -770,10 +786,13 @@ export default defineComponent({
               variant="primary"
               size="md"
               class="hk-file-browser-confirm"
-              disabled={selected.value.size === 0}
+              disabled={!props.pickDirectory && selected.value.size === 0}
               onClick={confirmSelection}
             >
-              {props.confirmLabel ?? t("hikari::filePicker.confirm", "Confirm")}
+              {props.confirmLabel ??
+                (props.pickDirectory
+                  ? t("hikari::filePicker.chooseFolder", "Choose this folder")
+                  : t("hikari::filePicker.confirm", "Confirm"))}
             </HButton>
           </div>
         </div>
@@ -783,7 +802,12 @@ export default defineComponent({
     return () => (
       <HModal
         modelValue={props.modelValue}
-        title={props.title ?? t("hikari::filePicker.title", "Browse files")}
+        title={
+          props.title ??
+          (props.pickDirectory
+            ? t("hikari::filePicker.titleFolder", "Browse folders")
+            : t("hikari::filePicker.title", "Browse files"))
+        }
         width="56rem"
         onUpdate:modelValue={(v: boolean) => emit("update:modelValue", v)}
       >

package/src/components/HkFilePickerField.scss

@@ -0,0 +1,93 @@
+.hk-file-picker-field {
+  display: block;
+}
+
+.hk-file-picker-label {
+  display: block;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  margin-bottom: var(--space-4);
+  color: rgb(var(--color-text) / var(--hk-field-label-alpha, 72%));
+}
+
+.hk-file-picker-box {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+  padding: var(--space-4) var(--space-6);
+  min-height: 2.5rem;
+  background: color-mix(in srgb, rgb(var(--color-surface)) 55%, transparent);
+  border: 1px solid color-mix(in srgb, rgb(var(--color-text)) 14%, transparent);
+  border-radius: var(--radius-sm);
+  transition:
+    border-color var(--duration-normal) var(--ease-standard),
+    background-color var(--duration-normal) var(--ease-standard);
+
+  &:focus-within {
+    border-color: color-mix(in srgb, rgb(var(--color-text)) 38%, transparent);
+  }
+
+  &[data-error] {
+    border-color: var(--hi-color-danger);
+  }
+
+  &[data-disabled] {
+    opacity: 0.55;
+    pointer-events: none;
+  }
+}
+
+/* The shittim-chest file-picker badge: a primary-tinted rounded square
+   carrying the folder glyph, anchoring the field's affordance. */
+.hk-file-picker-badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius-xs);
+  background: color-mix(in srgb, var(--hi-color-primary) 14%, transparent);
+  color: var(--hi-color-primary);
+  pointer-events: none;
+}
+
+.hk-file-picker-input {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  outline: none;
+  color: rgb(var(--color-text));
+  font-size: var(--text-sm);
+  font-family: inherit;
+
+  &::placeholder {
+    color: rgb(var(--color-text) / 55%);
+  }
+
+  /* Paths are code — mono by default, opt out with :mono="false". */
+  .hk-file-picker-box[data-mono] & {
+    font-family: var(--font-mono, ui-monospace, monospace);
+  }
+
+  &:disabled {
+    cursor: default;
+  }
+}
+
+.hk-file-picker-browse {
+  flex-shrink: 0;
+}
+
+.hk-file-picker-hint {
+  margin: var(--space-4) 0 0;
+  font-size: var(--text-xs);
+  color: rgb(var(--color-text) / 60%);
+
+  &[data-error] {
+    color: var(--hi-color-danger);
+  }
+}

package/src/components/HkFilePickerField.test.tsx

@@ -0,0 +1,194 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkFilePickerField from "./HkFilePickerField";
+
+vi.mock("./HkFileBrowserDialog", () => {
+  return {
+    default: defineComponent({
+      name: "HkFileBrowserDialogStub",
+      props: {
+        modelValue: { type: Boolean, default: false },
+        pickDirectory: { type: Boolean, default: false },
+      },
+      emits: ["update:modelValue", "confirm"],
+      setup(props, { emit }) {
+        return () =>
+          props.modelValue
+            ? h(
+                "div",
+                { class: "picker-dialog-stub" },
+                h("button", {
+                  class: "picker-dialog-stub-confirm",
+                  onClick: () => {
+                    // Directory mode hands back the listed folder itself.
+                    emit(
+                      "confirm",
+                      props.pickDirectory
+                        ? [{ name: "data", path: "/srv/data" }]
+                        : [{ name: "a.csv", path: "/srv/data/a.csv" }],
+                    );
+                    emit("update:modelValue", false);
+                  },
+                }),
+              )
+            : null;
+      },
+    }),
+  };
+});
+
+const mounts: ReturnType<typeof createApp>[] = [];
+const containers: HTMLElement[] = [];
+
+afterEach(() => {
+  for (const app of mounts.splice(0)) app.unmount();
+  for (const el of containers.splice(0)) el.remove();
+});
+
+interface FieldHandle {
+  input: HTMLInputElement;
+  browse: HTMLButtonElement;
+  model: { value: string };
+}
+
+async function mountField(props: Record<string, unknown> = {}): Promise<FieldHandle> {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+
+  const model = ref("");
+  // An initial value seeds the ref; the wrapper keeps driving the prop.
+  if (typeof props.modelValue === "string") {
+    model.value = props.modelValue;
+    delete props.modelValue;
+  }
+  const Wrapper = defineComponent({
+    setup() {
+      return () =>
+        h(HkFilePickerField, {
+          modelValue: model.value,
+          "onUpdate:modelValue": (v: string) => {
+            model.value = v;
+          },
+          ...props,
+        });
+    },
+  });
+  const app = createApp(Wrapper);
+  mounts.push(app);
+  app.mount(container);
+  await nextTick();
+
+  return {
+    input: container.querySelector<HTMLInputElement>(".hk-file-picker-input")!,
+    browse: container.querySelector<HTMLButtonElement>(".hk-file-picker-browse")!,
+    model,
+  };
+}
+
+describe("HkFilePickerField hook backend", () => {
+  it("adopts the hook-resolved path and leaves dismissals untouched", async () => {
+    const pick = vi.fn(async () => "/opt/shun/target");
+    const field = await mountField({ pick });
+    expect(field.input.placeholder).toContain("folder");
+    await field.browse.click();
+    await nextTick();
+    expect(pick).toHaveBeenCalledTimes(1);
+    expect(field.model.value).toBe("/opt/shun/target");
+    expect(field.input.value).toBe("/opt/shun/target");
+
+    // A dismissed picker (null) keeps the current value.
+    const dismissed = vi.fn(async () => null);
+    const field2 = await mountField({ pick: dismissed, modelValue: "/keep" });
+    await field2.browse.click();
+    await nextTick();
+    expect(field2.model.value).toBe("/keep");
+  });
+
+  it("disables the browse button when the hook backend has no hook", async () => {
+    const field = await mountField({ backend: "hook" });
+    expect(field.browse.disabled).toBe(true);
+  });
+
+  it("does not offer browsing at all when disabled", async () => {
+    const pick = vi.fn(async () => "/x");
+    const field = await mountField({ pick, disabled: true });
+    expect(field.browse.disabled).toBe(true);
+    field.browse.click();
+    expect(pick).not.toHaveBeenCalled();
+  });
+});
+
+describe("HkFilePickerField remote backend", () => {
+  it("auto-selects remote from the adapter and adopts the confirmed folder", async () => {
+    const adapter = { list: vi.fn(async (path: string) => ({ path, entries: [] })) };
+    const field = await mountField({ adapter });
+    // The dialog renders inside the field's mount, not the stub's body.
+    await field.browse.click();
+    await nextTick();
+    const confirm = field.browse
+      .closest(".hk-file-picker-field")!
+      .querySelector<HTMLButtonElement>(".picker-dialog-stub-confirm")!;
+    expect(confirm).toBeTruthy();
+    await confirm.click();
+    await nextTick();
+    expect(field.model.value).toBe("/srv/data");
+    expect(
+      field.browse
+        .closest(".hk-file-picker-field")!
+        .querySelector(".picker-dialog-stub"),
+    ).toBeNull();
+  });
+});
+
+describe("HkFilePickerField native backend", () => {
+  it("resolves the leaf name through the FS Access directory picker", async () => {
+    const showDirectoryPicker = vi.fn(async () => ({ name: "chosen-dir" }));
+    Object.defineProperty(window, "showDirectoryPicker", {
+      configurable: true,
+      value: showDirectoryPicker,
+    });
+    const field = await mountField({ backend: "native" });
+    await field.browse.click();
+    await nextTick();
+    expect(field.model.value).toBe("chosen-dir");
+    Object.defineProperty(window, "showDirectoryPicker", {
+      configurable: true,
+      value: undefined,
+    });
+  });
+
+  it("swallows a cancelled native picker without touching the value", async () => {
+    const showDirectoryPicker = vi.fn(async () => {
+      throw new DOMException("cancel", "AbortError");
+    });
+    Object.defineProperty(window, "showDirectoryPicker", {
+      configurable: true,
+      value: showDirectoryPicker,
+    });
+    const field = await mountField({ backend: "native", modelValue: "/keep" });
+    await field.browse.click();
+    await nextTick();
+    expect(field.model.value).toBe("/keep");
+    Object.defineProperty(window, "showDirectoryPicker", {
+      configurable: true,
+      value: undefined,
+    });
+  });
+});
+
+describe("HkFilePickerField typing", () => {
+  it("emits update:modelValue on input", async () => {
+    const field = await mountField();
+    field.input.value = "D:\\Games\\Demo";
+    field.input.dispatchEvent(new Event("input"));
+    await nextTick();
+    expect(field.model.value).toBe("D:\\Games\\Demo");
+  });
+
+  it("shows the file placeholder when directory is off", async () => {
+    const field = await mountField({ directory: false });
+    expect(field.input.placeholder).toContain("file");
+  });
+});