@celestia-island/hikari 0.45.9 → 0.46.0

package/src/components/HkIconButtonGroup.test.tsx

@@ -0,0 +1,182 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick, ref } from "vue";
+
+import HkIconButtonGroup from "./HkIconButtonGroup";
+
+/**
+ * HkIconButtonGroup contract tests:
+ * - "buttons" mode: no selection state, select fires on every click
+ * - "single" mode: radiogroup semantics — v-model update + data-active,
+ *   no re-fire on the already-active key
+ * - "multiple" mode: toggle set in v-model, aria-pressed mirrors state
+ * - tooltips: every labeled item rides an HkTooltip wrapper (label text),
+ *   an explicit `tooltip: ""` suppresses it
+ * - disabled items / disabled group stay dead
+ * - extra attrs (aria-label) fall through onto the root
+ *
+ * House style: no @vue/test-utils dependency — raw createApp mounts on a
+ * shared container list torn down after each case.
+ */
+
+const mounts: Array<ReturnType<typeof createApp>> = [];
+
+function mountComp(render: () => ReturnType<typeof h>): HTMLElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp(defineComponent({ setup: () => render }));
+  mounts.push(app);
+  app.mount(container);
+  return container;
+}
+
+afterEach(() => {
+  for (const app of mounts.splice(0)) app.unmount();
+  for (const popup of [...document.querySelectorAll(".hk-tooltip-popup")]) popup.remove();
+});
+
+const options = [
+  { key: "totp", label: "验证器 App" },
+  { key: "passkey", label: "Passkey" },
+];
+
+describe("HkIconButtonGroup", () => {
+  it("renders plain action buttons in buttons mode and emits select on every click", async () => {
+    const picked: string[] = [];
+    const c = mountComp(() =>
+      h(HkIconButtonGroup, { options, onSelect: (k: string) => picked.push(k) }),
+    );
+    const group = c.querySelector<HTMLElement>(".hk-icon-group")!;
+    expect(group.getAttribute("role")).toBe("group");
+    expect(group.classList.contains("hk-icon-group-buttons")).toBe(true);
+    const buttons = c.querySelectorAll<HTMLButtonElement>(".hk-icon-group-item");
+    expect(buttons.length).toBe(2);
+    expect(group.querySelectorAll(".hk-tooltip-wrapper").length).toBe(2);
+    buttons[0]!.click();
+    await Promise.resolve();
+    buttons[0]!.click();
+    await Promise.resolve();
+    expect(picked).toEqual(["totp", "totp"]);
+    // No selection state exists in buttons mode.
+    expect(c.querySelectorAll("[data-active]").length).toBe(0);
+  });
+
+  it("updates v-model and marks the active item in single mode", async () => {
+    const model = ref<string | null>(null);
+    const c = mountComp(() =>
+      h(HkIconButtonGroup, {
+        options,
+        mode: "single",
+        modelValue: model.value,
+        "onUpdate:modelValue": (v: string | string[]) => {
+          model.value = v as string;
+        },
+      }),
+    );
+    const group = c.querySelector<HTMLElement>(".hk-icon-group")!;
+    expect(group.getAttribute("role")).toBe("radiogroup");
+    const buttons = [...c.querySelectorAll<HTMLButtonElement>(".hk-icon-group-item")];
+    expect(buttons[0]!.getAttribute("role")).toBe("radio");
+    expect(buttons[0]!.getAttribute("aria-checked")).toBe("false");
+    buttons[0]!.click();
+    await nextTick();
+    expect(model.value).toBe("totp");
+    expect(buttons[0]!.dataset.active).toBe("true");
+    expect(buttons[0]!.getAttribute("aria-checked")).toBe("true");
+  });
+
+  it("does not re-fire when the active key is re-clicked in single mode", async () => {
+    const events: string[] = [];
+    const c = mountComp(() =>
+      h(HkIconButtonGroup, {
+        options,
+        mode: "single",
+        modelValue: "totp",
+        "onUpdate:modelValue": () => events.push("update"),
+        onSelect: (k: string) => events.push(`select:${k}`),
+      }),
+    );
+    const button = c.querySelector<HTMLButtonElement>(".hk-icon-group-item")!;
+    expect(button.dataset.active).toBe("true");
+    button.click();
+    await Promise.resolve();
+    expect(events).toEqual([]);
+  });
+
+  it("toggles keys into and out of the v-model array in multiple mode", async () => {
+    const seen: Array<string | string[]> = [];
+    const c = mountComp(() =>
+      h(HkIconButtonGroup, {
+        options,
+        mode: "multiple",
+        modelValue: ["passkey"],
+        "onUpdate:modelValue": (v: string | string[]) => seen.push(v),
+      }),
+    );
+    const group = c.querySelector<HTMLElement>(".hk-icon-group")!;
+    expect(group.getAttribute("role")).toBe("group");
+    const buttons = [...c.querySelectorAll<HTMLButtonElement>(".hk-icon-group-item")];
+    expect(buttons[1]!.getAttribute("aria-pressed")).toBe("true");
+    buttons[0]!.click();
+    buttons[1]!.click();
+    await Promise.resolve();
+    expect(seen).toEqual([["passkey", "totp"], []]);
+  });
+
+  it("suppresses the tooltip with an explicit empty override and keeps the label as the a11y name", () => {
+    const c = mountComp(() =>
+      h(HkIconButtonGroup, {
+        options: [
+          { key: "a", label: "Alpha" },
+          { key: "b", label: "Beta", tooltip: "" },
+        ],
+      }),
+    );
+    expect(c.querySelectorAll(".hk-tooltip-wrapper").length).toBe(1);
+    const beta = c.querySelectorAll<HTMLButtonElement>(".hk-icon-group-item")[1]!;
+    expect(beta.getAttribute("aria-label")).toBe("Beta");
+    // The HkTooltip popup owns the hover text — the button carries no title.
+    expect(beta.getAttribute("title")).toBeNull();
+  });
+
+  it("renders the given icon vnode and falls back to the label initial without one", () => {
+    const c = mountComp(() =>
+      h(HkIconButtonGroup, {
+        options: [
+          { key: "a", label: "Alpha", icon: h("span", { class: "glyph" }) },
+          { key: "b", label: "Beta" },
+        ],
+      }),
+    );
+    const buttons = c.querySelectorAll<HTMLButtonElement>(".hk-icon-group-item");
+    expect(buttons[0]!.querySelector(".glyph")).toBeTruthy();
+    expect(buttons[1]!.querySelector<HTMLElement>(".hk-icon-group-item-initial")?.textContent).toBe("B");
+  });
+
+  it("keeps disabled items and the group-level disable inert", async () => {
+    const picked: string[] = [];
+    const c = mountComp(() =>
+      h(HkIconButtonGroup, {
+        options: [
+          { key: "a", label: "Alpha", disabled: true },
+          { key: "b", label: "Beta" },
+        ],
+        disabled: true,
+        onSelect: (k: string) => picked.push(k),
+      }),
+    );
+    const buttons = [...c.querySelectorAll<HTMLButtonElement>(".hk-icon-group-item")];
+    expect(buttons.every((b) => b.disabled)).toBe(true);
+    buttons[1]!.click();
+    await Promise.resolve();
+    expect(picked).toEqual([]);
+  });
+
+  it("falls extra attrs through onto the group root", () => {
+    const c = mountComp(() =>
+      h(HkIconButtonGroup, { options, "aria-label": "验证方式", "data-test": "probe" }),
+    );
+    const group = c.querySelector<HTMLElement>(".hk-icon-group")!;
+    expect(group.getAttribute("aria-label")).toBe("验证方式");
+    expect(group.getAttribute("data-test")).toBe("probe");
+  });
+});

package/src/components/HkIconButtonGroup.tsx

@@ -0,0 +1,152 @@
+import { computed, defineComponent, type PropType } from "vue";
+import HkTooltip from "./HkTooltip";
+import type { TooltipPlacement } from "../runtime/tooltipPosition";
+import "./HkIconButtonGroup.scss";
+
+/** One selectable icon in the group. */
+export interface HkIconButtonGroupOption {
+  /** Stable identity — the value surfaced through v-model / select. */
+  key: string;
+  /** Accessible name AND the default tooltip text. Required on purpose:
+   *  an icon-only control without a label is an a11y hole. */
+  label: string;
+  /** Icon-only content: a prebuilt vnode (brand SVG, lucide component,
+   *  <img>) or anything renderable. Typed loose on purpose (same as
+   *  HkAuthMethodList entries): hosts materialize hikari against their
+   *  own vue minor, and a hard VNode type breaks typecheck whenever the
+   *  host's vue differs. Missing icons fall back to the label's initial. */
+  icon?: unknown;
+  disabled?: boolean;
+  /** Tooltip text override; an EMPTY string suppresses the tooltip. */
+  tooltip?: string;
+}
+
+/**
+ * HkIconButtonGroup — the icon-only variant of the button-group family
+ * (the same centered strip grammar as HkTabs, minus the text).
+ *
+ * Three working modes:
+ *   - "buttons"  a plain action group (no selection state) — the auth
+ *                card's OAuth provider row
+ *   - "single"   a radiogroup: one active key (v-model), re-clicking the
+ *                active key is a no-op — radio semantics
+ *   - "multiple" a toggle group: v-model is a string[] of active keys,
+ *                every item carries aria-pressed
+ *
+ * Every item is icon-only and rides one size taller than a standard
+ * icon button (md = 44px vs the 32px icon button / 40px text button) —
+ * the Windows/macOS-style login chooser. Because an icon alone is
+ * unlabelable at a glance, each item wraps itself in an HkTooltip
+ * (text = the option's label unless overridden), so the hover reveal is
+ * built in rather than left to every consumer.
+ *
+ * Known a11y limitation (documented 2026-09-13): single mode uses a
+ * radiogroup role with every item tabbable, not the full WAI-APG roving
+ * tabindex. All-items-tabbable keeps keyboard reachability identical
+ * across the three modes; roving focus is a follow-up if a host needs
+ * strict APG conformance.
+ */
+export default defineComponent({
+  name: "HkIconButtonGroup",
+  inheritAttrs: false,
+  props: {
+    options: { type: Array as unknown as () => HkIconButtonGroupOption[], required: true },
+    /** Active key ("single") or keys ("multiple"); null when nothing is
+     *  active — required/ignored by "buttons" mode. */
+    modelValue: { type: [String, Array] as PropType<string | string[] | null>, default: null },
+    mode: { type: String as PropType<"buttons" | "single" | "multiple">, default: "buttons" },
+    size: { type: String as PropType<"sm" | "md" | "lg">, default: "md" },
+    disabled: { type: Boolean, default: false },
+    tooltipPlacement: { type: String as PropType<TooltipPlacement>, default: "top" },
+    tooltipDelay: { type: Number, default: 300 },
+  },
+  emits: {
+    /** v-model for "single" (string) and "multiple" (string[]). */
+    "update:modelValue": (_value: string | string[]) => true,
+    /** An item was activated (or toggled). Never fires for a no-op
+     *  re-click of the already-active key in "single" mode. */
+    select: (_key: string) => true,
+  },
+  setup(props, { emit, attrs }) {
+    const cls = computed(() => [
+      "hk-icon-group",
+      `hk-icon-group-${props.mode}`,
+      `hk-icon-group-${props.size}`,
+    ]);
+
+    const groupRole = computed(() => (props.mode === "single" ? "radiogroup" : "group"));
+
+    function isActive(key: string): boolean {
+      if (props.mode === "multiple") {
+        return Array.isArray(props.modelValue) && props.modelValue.includes(key);
+      }
+      if (props.mode === "single") {
+        return props.modelValue === key;
+      }
+      return false;
+    }
+
+    function onSelect(option: HkIconButtonGroupOption) {
+      if (props.disabled || option.disabled) return;
+      if (props.mode === "single") {
+        if (isActive(option.key)) return; // radio semantics: no re-fire
+        emit("update:modelValue", option.key);
+      } else if (props.mode === "multiple") {
+        const current = Array.isArray(props.modelValue) ? props.modelValue : [];
+        const next = current.includes(option.key)
+          ? current.filter((k) => k !== option.key)
+          : [...current, option.key];
+        emit("update:modelValue", next);
+      }
+      emit("select", option.key);
+    }
+
+    return () => (
+      <div class={cls.value} role={groupRole.value} {...attrs}>
+        {props.options.map((option) => {
+          const tooltip = option.tooltip !== undefined ? option.tooltip : option.label;
+          const active = isActive(option.key);
+          const button = (
+            <button
+              key={option.key}
+              type="button"
+              class="hk-icon-group-item"
+              data-key={option.key}
+              data-active={active || undefined}
+              role={props.mode === "single" ? "radio" : undefined}
+              aria-checked={props.mode === "single" ? active : undefined}
+              aria-pressed={props.mode === "multiple" ? active : undefined}
+              aria-label={option.label}
+              title={undefined} // the HkTooltip popup owns the hover text
+              disabled={props.disabled || option.disabled}
+              onClick={() => onSelect(option)}
+            >
+              <span class="hk-icon-group-item-icon">
+                {option.icon != null
+                  ? option.icon
+                  : (
+                    <span class="hk-icon-group-item-initial" aria-hidden="true">
+                      {option.label.charAt(0).toUpperCase()}
+                    </span>
+                  )}
+              </span>
+            </button>
+          );
+          // An empty tooltip override suppresses the wrapper entirely.
+          return tooltip
+            ? (
+              <HkTooltip
+                key={option.key}
+                text={tooltip}
+                placement={props.tooltipPlacement}
+                delay={props.tooltipDelay}
+              >
+                {button}
+              </HkTooltip>
+            )
+            : button;
+        })}
+      </div>
+    );
+  },
+});

package/src/components/HkTooltip.tsx

@@ -1,13 +1,13 @@
 import { computed, defineComponent, onBeforeUnmount, onMounted, ref, Teleport, type CSSProperties, type PropType } from "vue";
 import { usePopupManager, type PopupHandle } from "../runtime/usePopupManager";
-import { ancestorZoom } from "../runtime/cssZoom";
+import { tooltipPositionStyle, type TooltipPlacement } from "../runtime/tooltipPosition";
 import "./HkTooltip.scss";
 
 export default defineComponent({
   name: "HkTooltip",
   props: {
     text: { type: String, required: true },
-    placement: { type: String as PropType<"top" | "bottom" | "left" | "right">, default: "top" },
+    placement: { type: String as PropType<TooltipPlacement>, default: "top" },
     delay: { type: Number, default: 300 },
     maxWidth: { type: String, default: undefined },
   },
@@ -33,46 +33,11 @@ export default defineComponent({
     function updatePosition() {
       if (!wrapperRef.value) return;
       const rect = wrapperRef.value.getBoundingClientRect();
-      const gap = 8;
-      // The tooltip teleports to <body> — inside any root CSS zoom
-      // subtree — while `rect` is already in the root visual space
-      // (standardized zoom reports ancestor zoom applied). The browser
-      // scales the tooltip's local px back up at paint, so the visual
-      // rect values must be written divided by the cumulative zoom or
-      // the tooltip drifts zoom× off its trigger (chest's root-level
-      // manual DPI scale).
-      const z = ancestorZoom(document.body);
-      const local = (v: number) => `${v / z}px`;
-      const style: CSSProperties = {};
-
-      if (props.maxWidth) {
-        style.maxWidth = props.maxWidth;
-      }
-
-      switch (props.placement) {
-        case "top":
-          style.top = local(rect.top - gap);
-          style.left = local(rect.left + rect.width / 2);
-          style.transform = "translate(-50%, -100%)";
-          break;
-        case "bottom":
-          style.top = local(rect.bottom + gap);
-          style.left = local(rect.left + rect.width / 2);
-          style.transform = "translate(-50%, 0)";
-          break;
-        case "left":
-          style.top = local(rect.top + rect.height / 2);
-          style.left = local(rect.left - gap);
-          style.transform = "translate(-100%, -50%)";
-          break;
-        case "right":
-          style.top = local(rect.top + rect.height / 2);
-          style.left = local(rect.right + gap);
-          style.transform = "translate(0, -50%)";
-          break;
-      }
-
-      tooltipStyle.value = style;
+      // Placement geometry lives in the shared runtime helper (it also
+      // serves the document-level tooltip bridge) — including the
+      // ancestor-zoom division that keeps teleported popups pinned to
+      // their trigger inside scaled roots.
+      tooltipStyle.value = tooltipPositionStyle(rect, props.placement, props.maxWidth);
     }
 
     function show() {

package/src/index.ts

@@ -24,6 +24,7 @@ export { default as HExpansionPanel } from "./components/HkExpansionPanel";
 export { default as HFab, type HFabAction } from "./components/HkFab";
 export { default as HIcon } from "./components/HkIcon";
 export { default as HIconButton } from "./components/HkIconButton";
+export { default as HIconButtonGroup, type HkIconButtonGroupOption } from "./components/HkIconButtonGroup";
 export { default as HImageLightbox } from "./components/HkImageLightbox";
 export { default as HImagePreview, type ImagePreviewObjectFit } from "./components/HkImagePreview";
 export { default as HInput } from "./components/HkInput";
@@ -239,6 +240,10 @@ export {
   type SafeAreaInsets,
   type BackGuard,
   type BackGuardOptions,
+  installHkTooltipBridge,
+  type HkTooltipBridgeOptions,
+  installHkImageFallback,
+  type HkImageFallbackOptions,
 } from "./runtime";
 
 // i18n

package/src/runtime/imageFallback.scss

@@ -0,0 +1,13 @@
+/* installHkImageFallback — the `.hk-img-broken` treatment.
+ *
+ * The bundled placeholder SVG carries its own muted tile + glyph; this
+ * sheet only keeps the img box polite while it shows the placeholder
+ * (never stretches it, faint surface behind transparent areas) and
+ * neutralizes any fancy borders a consumer put on the healthy image. */
+
+img.hk-img-broken {
+  object-fit: contain;
+  background: rgb(var(--color-surface, 255 255 255) / 30%);
+  border-radius: var(--radius-sm, 4px);
+  box-shadow: none;
+}

package/src/runtime/imageFallback.test.ts

@@ -0,0 +1,149 @@
+import { afterEach, describe, expect, it } from "vitest";
+
+import { installHkImageFallback } from "./imageFallback";
+
+/**
+ * installHkImageFallback contract tests:
+ * - a broken <img> (capture-phase error) gains `.hk-img-broken` and its
+ *   src swaps to the bundled inline-SVG placeholder, exactly once
+ *   (data flag — a failing fallback can never loop)
+ * - a load of REAL content after a breakage clears the state; the load
+ *   OF the placeholder keeps it
+ * - escape hatches: [data-hk-img-native], selector/exclude options
+ * - custom fallbackSrc override; `""` marks without swapping
+ * - idempotent install; uninstall stops further marking
+ */
+
+const uninstalls: Array<() => void> = [];
+
+function install(options?: Parameters<typeof installHkImageFallback>[0]) {
+  const uninstall = installHkImageFallback(options);
+  uninstalls.push(uninstall);
+  return uninstall;
+}
+
+function img(src = "https://example.invalid/pic.png"): HTMLImageElement {
+  const el = document.createElement("img");
+  el.src = src;
+  document.body.appendChild(el);
+  return el;
+}
+
+function fail(el: HTMLImageElement) {
+  el.dispatchEvent(new Event("error"));
+}
+
+function load(el: HTMLImageElement) {
+  el.dispatchEvent(new Event("load"));
+}
+
+afterEach(() => {
+  for (const u of uninstalls.splice(0)) u();
+});
+
+describe("installHkImageFallback", () => {
+  it("marks a broken image and swaps in the placeholder once", () => {
+    install();
+    const el = img();
+    fail(el);
+    expect(el.classList.contains("hk-img-broken")).toBe(true);
+    expect(el.dataset.hkImgFallback).toBe("1");
+    expect(el.getAttribute("src")?.startsWith("data:image/svg+xml,")).toBe(true);
+    const swapped = el.getAttribute("src")!;
+    // The placeholder's own failure must not loop.
+    fail(el);
+    expect(el.getAttribute("src")).toBe(swapped);
+    expect(el.classList.contains("hk-img-broken")).toBe(true);
+  });
+
+  it("clears the broken state when real content loads later", () => {
+    install();
+    const el = img();
+    fail(el);
+    expect(el.classList.contains("hk-img-broken")).toBe(true);
+    // A repaired src loads: recovery clears class AND the one-shot flag.
+    el.setAttribute("src", "https://example.invalid/fixed.png");
+    load(el);
+    expect(el.classList.contains("hk-img-broken")).toBe(false);
+    expect(el.dataset.hkImgFallback).toBeUndefined();
+    // So a SECOND breakage marks again.
+    fail(el);
+    expect(el.classList.contains("hk-img-broken")).toBe(true);
+  });
+
+  it("keeps the treatment when the placeholder itself loads", () => {
+    install();
+    const el = img();
+    fail(el);
+    const placeholder = el.getAttribute("src")!;
+    load(el);
+    expect(el.getAttribute("src")).toBe(placeholder);
+    expect(el.classList.contains("hk-img-broken")).toBe(true);
+  });
+
+  it("leaves native-escape-hatch images alone", () => {
+    install();
+    const el = img();
+    el.setAttribute("data-hk-img-native", "");
+    fail(el);
+    expect(el.classList.contains("hk-img-broken")).toBe(false);
+    expect(el.getAttribute("src")).toBe("https://example.invalid/pic.png");
+  });
+
+  it("honors selector and exclude options", () => {
+    install({ selector: "img.content", exclude: ".keep" });
+    const wrong = img();
+    fail(wrong);
+    expect(wrong.classList.contains("hk-img-broken")).toBe(false);
+    const kept = img();
+    kept.className = "content keep";
+    fail(kept);
+    expect(kept.classList.contains("hk-img-broken")).toBe(false);
+    const covered = img();
+    covered.className = "content";
+    fail(covered);
+    expect(covered.classList.contains("hk-img-broken")).toBe(true);
+  });
+
+  it("supports a custom fallbackSrc override", () => {
+    install({ fallbackSrc: "data:image/svg+xml,custom" });
+    const custom = img();
+    fail(custom);
+    expect(custom.getAttribute("src")).toBe("data:image/svg+xml,custom");
+  });
+
+  it("supports an empty fallbackSrc that marks without swapping", () => {
+    install({ fallbackSrc: "" });
+    const marked = img();
+    fail(marked);
+    expect(marked.classList.contains("hk-img-broken")).toBe(true);
+    expect(marked.getAttribute("src")).toBe("https://example.invalid/pic.png");
+  });
+
+  it("keeps the one-shot marker across repeat errors even without a src swap", () => {
+    // Mark-only mode: no src to dedupe against, so the dataset flag is the
+    // only once-guard — pin it (repeat errors must stay marked, and the
+    // flag must exist for the recovery path to clear).
+    install({ fallbackSrc: "" });
+    const el = img();
+    fail(el);
+    expect(el.classList.contains("hk-img-broken")).toBe(true);
+    expect(el.dataset.hkImgFallback).toBe("1");
+    fail(el);
+    fail(el);
+    expect(el.dataset.hkImgFallback).toBe("1");
+    expect(el.classList.contains("hk-img-broken")).toBe(true);
+  });
+
+  it("is idempotent per document and uninstallable", () => {
+    install();
+    install(); // duplicate: silently reuses the first bridge
+    const el = img();
+    fail(el);
+    expect(el.dataset.hkImgFallback).toBe("1");
+    uninstalls.splice(0)[0]!();
+    const after = img();
+    fail(after);
+    expect(after.classList.contains("hk-img-broken")).toBe(false);
+  });
+});