@celestia-island/hikari 0.40.34 → 0.40.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.40.34",
+  "version": "0.40.36",
   "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/HkButton.test.tsx

@@ -0,0 +1,159 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import HkButton from "./HkButton";
+
+/**
+ * HkButton contract tests:
+ * - variant / size / block / loading class mapping on the root <button>
+ * - the native disabled attribute is the click guard (disabled OR loading)
+ * - loading renders the spinner INSTEAD of the icon and flags aria-busy
+ * - default-slot text, aria-label (icon-only usage), suffix, shortcut kbd
+ * - attr fallthrough: inheritAttrs is false, the component MUST spread
+ *   $attrs itself (type / data-* / class merging)
+ *
+ * House style: raw createApp mounts on a shared container list torn down
+ * after each case; DOM assertions via document queries.
+ */
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+function button(c: HTMLElement): HTMLButtonElement {
+  return c.querySelector("button")!;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+describe("HkButton class mapping", () => {
+  it("renders the default primary/md classes with default-slot text and type=button", () => {
+    const c = mount(h(HkButton, () => "Deploy"));
+    const btn = button(c);
+    expect(btn).not.toBeNull();
+    expect(btn.className).toBe("hk-btn hk-btn-primary hk-btn-md");
+    expect(btn.getAttribute("type")).toBe("button");
+    expect(btn.textContent).toContain("Deploy");
+  });
+
+  it("maps variant and size props to modifier classes", () => {
+    const c = mount(h(HkButton, { variant: "danger", size: "sm" }, () => "Delete"));
+    const cls = button(c).className;
+    expect(cls).toContain("hk-btn-danger");
+    expect(cls).toContain("hk-btn-sm");
+    expect(cls).not.toContain("hk-btn-primary");
+    expect(cls).not.toContain("hk-btn-md");
+  });
+
+  it("adds the block modifier only when block is set", () => {
+    const blocked = mount(h(HkButton, { block: true }, () => "wide"));
+    expect(button(blocked).className).toContain("hk-btn-block");
+    const plain = mount(h(HkButton, () => "narrow"));
+    expect(button(plain).className).not.toContain("hk-btn-block");
+  });
+});
+
+describe("HkButton click guard", () => {
+  it("emits the declared click event on activation", async () => {
+    let clicks = 0;
+    const c = mount(h(HkButton, { onClick: () => { clicks += 1; } }, () => "go"));
+    button(c).click();
+    await Promise.resolve();
+    expect(clicks).toBe(1);
+  });
+
+  it("suppresses the click emit while disabled", async () => {
+    let clicks = 0;
+    const c = mount(h(HkButton, { disabled: true, onClick: () => { clicks += 1; } }, () => "no"));
+    // The guard is the NATIVE disabled attribute: the platform (and
+    // happy-dom) fires no click listeners on a disabled button.
+    expect(button(c).disabled).toBe(true);
+    button(c).click();
+    await Promise.resolve();
+    expect(clicks).toBe(0);
+  });
+
+  it("disables the button and suppresses clicks while loading", async () => {
+    let clicks = 0;
+    const c = mount(h(HkButton, { loading: true, onClick: () => { clicks += 1; } }, () => "busy"));
+    const btn = button(c);
+    expect(btn.disabled).toBe(true); // loading implies disabled
+    expect(btn.className).toContain("hk-btn-loading");
+    expect(btn.getAttribute("aria-busy")).toBe("true");
+    btn.click();
+    await Promise.resolve();
+    expect(clicks).toBe(0);
+  });
+
+  it("clears the loading state back to a clickable button (aria-busy drops off)", () => {
+    const busy = mount(h(HkButton, { loading: true }, () => "x"));
+    expect(busy.querySelector(".hk-spinner")).not.toBeNull();
+    const idle = mount(h(HkButton, () => "x"));
+    const btn = button(idle);
+    expect(idle.querySelector(".hk-spinner")).toBeNull();
+    expect(btn.disabled).toBe(false);
+    expect(btn.getAttribute("aria-busy")).toBeNull();
+    expect(btn.className).not.toContain("hk-btn-loading");
+  });
+});
+
+describe("HkButton content slots", () => {
+  it("renders the leading icon only when NOT loading", () => {
+    const idle = mount(h(HkButton, { icon: "close" }, () => "x"));
+    expect(idle.querySelector(".hk-btn-icon")).not.toBeNull();
+    expect(idle.querySelector(".hk-spinner")).toBeNull();
+
+    // Loading swaps the icon out for the spinner — never both.
+    const busy = mount(h(HkButton, { icon: "close", loading: true }, () => "x"));
+    expect(busy.querySelector(".hk-btn-icon")).toBeNull();
+    expect(busy.querySelector(".hk-spinner")).not.toBeNull();
+  });
+
+  it("renders the suffix icon slot", () => {
+    const c = mount(h(HkButton, { suffix: "close" }, () => "Open"));
+    expect(c.querySelector(".hk-btn-suffix")).not.toBeNull();
+  });
+
+  it("renders the shortcut kbd and its marker class", () => {
+    const c = mount(h(HkButton, { shortcut: "Ctrl+Enter" }, () => "Send"));
+    const btn = button(c);
+    expect(btn.className).toContain("hk-btn-has-shortcut");
+    const kbd = c.querySelector("kbd.hk-kbd")!;
+    expect(kbd).not.toBeNull();
+    expect(kbd.textContent).toContain("Ctrl");
+    expect(kbd.textContent).toContain("Enter");
+  });
+
+  it("exposes aria-label for icon-only usage", () => {
+    const c = mount(h(HkButton, { icon: "close", ariaLabel: "Close inspector" }));
+    expect(button(c).getAttribute("aria-label")).toBe("Close inspector");
+  });
+});
+
+describe("HkButton attr fallthrough (inheritAttrs: false)", () => {
+  it("spreads extra attrs and honors an explicit type", () => {
+    const c = mount(h(HkButton, { type: "submit", "data-test": "probe" }, () => "Save"));
+    const btn = button(c);
+    expect(btn.getAttribute("type")).toBe("submit");
+    expect(btn.getAttribute("data-test")).toBe("probe");
+  });
+
+  it("merges a fallthrough class onto its own class list", () => {
+    const c = mount(h(HkButton, { class: "extra-class" }, () => "x"));
+    const cls = button(c).className;
+    expect(cls).toContain("hk-btn");
+    expect(cls).toContain("extra-class");
+  });
+});

package/src/components/HkCheckbox.test.tsx

@@ -0,0 +1,202 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkCheckbox from "./HkCheckbox";
+
+/**
+ * HkCheckbox contract tests:
+ * - tri-state model wiring: false → unlit box, true → check icon (or dot
+ *   in radio mode), null → indeterminate dash (checkbox mode only)
+ * - the label shell is a real <label> wrapping the native input, so
+ *   clicking the TEXT forwards to the input and toggles (label association)
+ * - change events carry the input's NEW checked value; disabled drops them
+ * - the data-animating pulse is set on change and cleared by the 300ms
+ *   cron one-shot
+ *
+ * House style: raw createApp mounts on a shared container list torn down
+ * after each case; DOM assertions via document queries.
+ */
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+/** v-model harness: mirrors consumer usage, records every emitted value. */
+function mountVModel(initial: boolean | null, props: Record<string, unknown> = {}) {
+  const model = ref<boolean | null>(initial);
+  const emitted: Array<boolean> = [];
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp(defineComponent({
+    setup: () => () =>
+      h(HkCheckbox, {
+        ...props,
+        modelValue: model.value as boolean,
+        "onUpdate:modelValue": (v: boolean) => {
+          model.value = v;
+          emitted.push(v);
+        },
+      }),
+  }));
+  app.mount(container);
+  mounts.push({ app, container });
+  const input = () => container.querySelector<HTMLInputElement>("input")!;
+  const box = () => container.querySelector<HTMLElement>(".hk-checkbox-box")!;
+  const root = () => container.querySelector<HTMLElement>("label")!;
+  return { container, model, emitted, input, box, root };
+}
+
+afterEach(() => {
+  vi.useRealTimers();
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+describe("HkCheckbox model states", () => {
+  it("renders an unlit box and an unchecked native checkbox by default", () => {
+    const c = mount(h(HkCheckbox));
+    const root = c.querySelector<HTMLElement>("label")!;
+    expect(root.className).toBe("hk-checkbox hk-checkbox-md");
+    expect(root.getAttribute("data-type")).toBe("checkbox");
+    const input = c.querySelector<HTMLInputElement>("input")!;
+    expect(input.type).toBe("checkbox");
+    expect(input.checked).toBe(false);
+    const box = c.querySelector<HTMLElement>(".hk-checkbox-box")!;
+    expect(box.hasAttribute("data-checked")).toBe(false);
+    expect(box.hasAttribute("data-indeterminate")).toBe(false);
+    expect(c.querySelector(".hk-checkbox-icon")).toBeNull();
+    expect(c.querySelector(".hk-checkbox-indeterminate")).toBeNull();
+  });
+
+  it("maps modelValue=true to the checked box with the check icon", () => {
+    const c = mount(h(HkCheckbox, { modelValue: true }));
+    const box = c.querySelector<HTMLElement>(".hk-checkbox-box")!;
+    expect(box.getAttribute("data-checked")).toBe("");
+    expect(c.querySelector<HTMLInputElement>("input")!.checked).toBe(true);
+    // The glyph is the lucide Check svg itself (lucide puts the class on
+    // its root <svg>), not the radio dot.
+    expect(c.querySelector("svg.hk-checkbox-icon")).not.toBeNull();
+    expect(c.querySelector(".hk-checkbox-dot")).toBeNull();
+  });
+
+  it("maps modelValue=null to the indeterminate dash without checking the input", () => {
+    const c = mount(h(HkCheckbox, { modelValue: null as unknown as boolean }));
+    const box = c.querySelector<HTMLElement>(".hk-checkbox-box")!;
+    expect(box.getAttribute("data-indeterminate")).toBe("");
+    expect(box.hasAttribute("data-checked")).toBe(false);
+    // null is NOT true: the native input stays unchecked.
+    expect(c.querySelector<HTMLInputElement>("input")!.checked).toBe(false);
+    expect(c.querySelector(".hk-checkbox-indeterminate")).not.toBeNull();
+    expect(c.querySelector(".hk-checkbox-icon")).toBeNull();
+  });
+
+  it("radio mode swaps the check icon for the dot and drops the indeterminate dash", () => {
+    const checked = mount(h(HkCheckbox, { modelValue: true, type: "radio" }));
+    expect(checked.querySelector("label")!.getAttribute("data-type")).toBe("radio");
+    expect(checked.querySelector<HTMLInputElement>("input")!.type).toBe("radio");
+    expect(checked.querySelector(".hk-checkbox-dot")).not.toBeNull();
+    expect(checked.querySelector(".hk-checkbox-icon")).toBeNull();
+
+    // null in radio mode: no dash — indeterminate is checkbox-only.
+    const unset = mount(h(HkCheckbox, { modelValue: null as unknown as boolean, type: "radio" }));
+    expect(unset.querySelector(".hk-checkbox-indeterminate")).toBeNull();
+    expect(unset.querySelector(".hk-checkbox-dot")).toBeNull();
+  });
+
+  it("maps the size prop to the shell modifier", () => {
+    const c = mount(h(HkCheckbox, { size: "sm" }));
+    expect(c.querySelector("label")!.className).toContain("hk-checkbox-sm");
+  });
+});
+
+describe("HkCheckbox label", () => {
+  it("renders the label prop through the HkLabel shell", () => {
+    const c = mount(h(HkCheckbox, { label: "Remember login" }));
+    const label = c.querySelector<HTMLElement>(".hk-label")!;
+    expect(label).not.toBeNull();
+    expect(label.textContent).toBe("Remember login");
+  });
+
+  it("prefers default-slot content over the label prop", () => {
+    const c = mount(
+      h(HkCheckbox, { label: "plain" }, () => ["rich ", h("b", "text")]),
+    );
+    expect(c.querySelector(".hk-label")!.textContent).toBe("rich text");
+  });
+
+  it("renders no label shell without label prop or slot", () => {
+    const c = mount(h(HkCheckbox));
+    expect(c.querySelector(".hk-label")).toBeNull();
+  });
+});
+
+describe("HkCheckbox change wiring", () => {
+  it("round-trips v-model through native input activation", async () => {
+    const t = mountVModel(false);
+    t.input().click();
+    await nextTick();
+    expect(t.emitted).toEqual([true]);
+    expect(t.model.value).toBe(true);
+    expect(t.input().checked).toBe(true);
+    expect(t.box().getAttribute("data-checked")).toBe("");
+
+    t.input().click();
+    await nextTick();
+    expect(t.emitted).toEqual([true, false]);
+    expect(t.box().hasAttribute("data-checked")).toBe(false);
+  });
+
+  it("toggles through the label text — the shell is a real <label>", async () => {
+    const t = mountVModel(false, { label: "Remember login" });
+    // Clicking the TEXT (not the input): the platform forwards the click
+    // to the first labelable descendant — the checkbox input — which
+    // toggles and fires the change the component listens to.
+    (t.container.querySelector(".hk-label") as HTMLElement).click();
+    await nextTick();
+    expect(t.emitted).toEqual([true]);
+    expect(t.input().checked).toBe(true);
+  });
+
+  it("emits the post-click indeterminate resolution as a plain boolean", async () => {
+    // null (indeterminate) + click → the input lands checked → emits true.
+    const t = mountVModel(null);
+    t.input().click();
+    await nextTick();
+    expect(t.emitted).toEqual([true]);
+    expect(t.box().getAttribute("data-checked")).toBe("");
+    expect(t.box().hasAttribute("data-indeterminate")).toBe(false);
+  });
+
+  it("pulses data-animating on change and clears it after the 300ms cron", async () => {
+    vi.useFakeTimers();
+    const t = mountVModel(false);
+    t.input().click();
+    await nextTick();
+    expect(t.root().getAttribute("data-animating")).toBe("");
+
+    vi.advanceTimersByTime(300);
+    await nextTick();
+    expect(t.root().hasAttribute("data-animating")).toBe(false);
+  });
+
+  it("drops change events entirely while disabled", async () => {
+    const t = mountVModel(false, { disabled: true });
+    expect(t.input().disabled).toBe(true);
+    expect(t.root().getAttribute("data-disabled")).toBe("");
+    // The platform fires no activation on a disabled input.
+    t.input().click();
+    t.container.querySelector<HTMLElement>(".hk-checkbox-box")!.click();
+    await nextTick();
+    expect(t.emitted).toEqual([]);
+    expect(t.input().checked).toBe(false);
+  });
+});

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