@celestia-island/hikari 0.45.9 → 0.47.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/composables/useConnectionProbe.ts

@@ -1,6 +1,7 @@
 import { onMounted, onUnmounted, ref, type Ref } from "vue";
 
 import { scheduleInterval, scheduleIntervalAfter, type IntervalHandle } from "../runtime/intervalBus";
+import { reportHkRuntime, type HkRuntimeHandle } from "../runtime/registry";
 
 /** Fetch-based connectivity probe — the hikari-local successor of the
  *  plana-ui probe. Polls `/api/health` (or a custom endpoint set via
@@ -28,6 +29,20 @@ const DEFAULT_RETRY_TOTAL = 3;
 
 let probeEndpoint: string | (() => string) = "";
 
+// Runtime-registry reporting (the "context of contexts"): the probe is a
+// per-component composable, so the MODULE is the hook — one registry
+// entry counting live probe instances, with the configured endpoint in
+// the read facet. Registration API unchanged.
+let liveProbes = 0;
+let probeRuntime: HkRuntimeHandle | null = null;
+function ensureProbeRuntime(): HkRuntimeHandle {
+  return (probeRuntime ??= reportHkRuntime("connectionProbe", {
+    kind: "hook",
+    description: "The fetch-based connectivity probe: per-component /api/health polling with retry and countdown.",
+    read: () => ({ liveProbes, endpoint: endpointUrl() }),
+  }));
+}
+
 /** Override the probed endpoint (defaults to same-origin `/api/health`). */
 export function setProbeEndpoint(endpoint: string | (() => string)): void {
   probeEndpoint = endpoint;
@@ -127,11 +142,15 @@ export function useConnectionProbe(): {
   }
 
   onMounted(() => {
+    liveProbes += 1;
+    ensureProbeRuntime().pulse({ liveProbes });
     void probeOnce();
     tickHandle = scheduleInterval(applyCountdown, 1000);
   });
 
   onUnmounted(() => {
+    liveProbes = Math.max(0, liveProbes - 1);
+    probeRuntime?.pulse({ liveProbes });
     pollHandle?.disconnect();
     pollHandle = null;
     tickHandle?.disconnect();

package/src/composables/useProgressDialog.ts

@@ -1,5 +1,7 @@
 import { reactive } from "vue";
 
+import { reportHkRuntime, type HkRuntimeHandle } from "../runtime/registry";
+
 export interface ProgressDialogState {
   open: boolean;
   title: string;
@@ -24,7 +26,27 @@ const state = reactive<ProgressDialogState>({
   max: 100,
 });
 
+// Runtime-registry reporting (the "context of contexts"). Lazy: the
+// progress-dialog context reports itself on first use and pulses on
+// open/close, so the live dialog tree is answerable from
+// readHkRuntime("progressDialog") without importing this module.
+let runtimeReport: HkRuntimeHandle | null = null;
+function ensureRuntimeReport(): HkRuntimeHandle {
+  return (runtimeReport ??= reportHkRuntime("progressDialog", {
+    kind: "context",
+    description: "The progress dialog context: the single global task-progress surface (title, log tail, value/max).",
+    read: () => ({
+      open: state.open,
+      title: state.title,
+      logLines: state.logs.length,
+      value: state.value,
+      max: state.max,
+    }),
+  }));
+}
+
 export function showProgressDialog(opts: { title: string }): ProgressDialogHandle {
+  ensureRuntimeReport().pulse({ open: true, title: opts.title });
   state.title = opts.title;
   state.logs = [];
   state.value = null;
@@ -43,10 +65,12 @@ export function showProgressDialog(opts: { title: string }): ProgressDialogHandl
     },
     close() {
       state.open = false;
+      runtimeReport?.pulse({ open: false });
     },
   };
 }
 
 export function useProgressDialog(): ProgressDialogState {
+  ensureRuntimeReport();
   return state;
 }

package/src/errorReporting/state.ts

@@ -1,5 +1,7 @@
 import { ref, type Ref } from "vue";
 
+import { reportHkRuntime, type HkRuntimeHandle } from "../runtime/registry";
+
 /** Where a reported error came from. */
 export type HkErrorSource = "vue" | "window" | "rejection" | "manual";
 
@@ -66,6 +68,10 @@ export function getErrorReportingOptions(): HkErrorReportingOptions {
 
 export function setErrorReportingOptions(options: HkErrorReportingOptions): void {
   activeOptions = options;
+  runtimeReport?.setMeta({
+    captureWindow: options.captureWindow !== false,
+    captureRejection: options.captureRejection !== false,
+  });
 }
 
 export function useErrorReportingState(): Ref<HkReportedError | null> {
@@ -86,6 +92,11 @@ export function reportError(err: unknown, source: HkErrorSource, info?: string):
 
   if (currentError.value !== null) return null;
 
+  // Accepted onto the landing (first-error-wins): later errors while the
+  // landing is up still log/fire onError above but do not count.
+  acceptedReports += 1;
+  runtimeReport?.pulse({ reports: acceptedReports });
+
   const normalized = normalizeError(err);
   const record: HkReportedError = {
     source,
@@ -102,3 +113,22 @@ export function reportError(err: unknown, source: HkErrorSource, info?: string):
 export function clearErrorReportingState(): void {
   currentError.value = null;
 }
+
+// Runtime-registry reporting (the "context of contexts"): the error
+// reporting module is a global singleton, so it reports itself at module
+// init and pulses on every accepted error. The read facet keeps the
+// current landing card observable (name/message/source only — never the
+// whole error object) from readHkRuntime("errorReporting").
+let acceptedReports = 0;
+const runtimeReport: HkRuntimeHandle = reportHkRuntime("errorReporting", {
+  kind: "plugin",
+  description: "The global error reporting landing: app.config.errorHandler + window/rejection hooks with the full-screen error card.",
+  meta: { captureWindow: activeOptions.captureWindow !== false, captureRejection: activeOptions.captureRejection !== false },
+  read: () => ({
+    reports: acceptedReports,
+    landingUp: currentError.value !== null,
+    current: currentError.value
+      ? { name: currentError.value.name, message: currentError.value.message, source: currentError.value.source }
+      : null,
+  }),
+});

package/src/i18n/context.ts

@@ -1,5 +1,7 @@
 import { reactive } from "vue";
 
+import { reportHkRuntime } from "../runtime/registry";
+
 type Messages = Record<string, string>;
 
 interface LocaleModule {
@@ -63,6 +65,7 @@ export async function setLocale(locale: string): Promise<void> {
     ...(mergedMessages["en"] ?? {}),
     ...(mergedMessages[locale] ?? {}),
   };
+  runtime.pulse({ locale });
 }
 
 export function mergeMessages(userMessages: Messages, locale?: string): void {
@@ -82,6 +85,7 @@ export function mergeMessages(userMessages: Messages, locale?: string): void {
     ...(mergedMessages["en"] ?? {}),
     ...(mergedMessages[state.locale] ?? {}),
   };
+  runtime.pulse({ locale: state.locale });
 }
 
 export function useI18n() {
@@ -96,3 +100,31 @@ export function useI18n() {
 
   return { t, locale: state.locale };
 }
+
+// Runtime-registry reporting (the "context of contexts"): the i18n
+// context is a module singleton, so it reports itself at module init and
+// pulses on every locale switch / message merge. The facets make the
+// locale tree reachable and steerable from anywhere via
+// readHkRuntime("i18n") / writeHkRuntime("i18n", …) without importing
+// this module.
+const runtime = reportHkRuntime("i18n", {
+  kind: "context",
+  description: "The i18n context: active locale, message tables and per-locale merged overrides.",
+  meta: { locale: state.locale },
+  read: () => ({
+    locale: state.locale,
+    keys: Object.keys(state.messages).length,
+    mergedLocales: Object.keys(mergedMessages),
+  }),
+  write: (op) => {
+    if (op.type === "setLocale" && typeof op.locale === "string") {
+      void setLocale(op.locale);
+      return;
+    }
+    if (op.type === "mergeMessages" && typeof op.messages === "object" && op.messages !== null) {
+      mergeMessages(op.messages as Messages, typeof op.locale === "string" ? op.locale : undefined);
+      return;
+    }
+    throw new Error(`unknown i18n write op "${op.type}"`);
+  },
+});

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,26 @@ export {
   type SafeAreaInsets,
   type BackGuard,
   type BackGuardOptions,
+  installHkTooltipBridge,
+  type HkTooltipBridgeOptions,
+  installHkImageFallback,
+  type HkImageFallbackOptions,
+  reportHkRuntime,
+  getHkRuntimeEntry,
+  listHkRuntime,
+  readHkRuntime,
+  writeHkRuntime,
+  hkRuntimeSnapshot,
+  useHkRegistry,
+  type HkRuntimeKind,
+  type HkRuntimeStatus,
+  type HkRuntimeMeta,
+  type HkRuntimeEntryState,
+  type HkRuntimeReport,
+  type HkRuntimeHandle,
+  type HkRuntimeWriteOp,
+  type HkRuntimeSnapshot,
+  type HkRuntimeSnapshotEntry,
 } from "./runtime";
 
 // i18n