@celestia-island/hikari 0.46.0 → 0.47.1

package/package.json

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

package/src/components/HkAuthMethodList.scss

@@ -1,8 +1,12 @@
-/* Alternative sign-in methods as an icon button group (login card). The
-   block container `.s-auth-methods` and its spacing are owned by
-   HkAuthCard's slot styles (styles/admin-tokens.scss); this file only
-   styles the divider and the icon group row the component renders into
-   that slot. */
+/* Alternative sign-in methods as CENTERED INDEPENDENT framed icon tiles
+ * (login card). The block container `.s-auth-methods` and its spacing are
+ * owned by HkAuthCard's slot styles (styles/admin-tokens.scss); this file
+ * only styles the divider and the tile row the component renders into that
+ * slot.
+ *
+ * Deliberately NOT a button group (2026-09-14 user direction): no shared
+ * track, no shared frame — each provider carries its own border so the row
+ * stays as wide as its content, centered in the card. */
 
 /* "Other ways to sign in" divider row between rules. */
 .s-auth-methods-divider {
@@ -24,16 +28,91 @@
 }
 
 /* The component's own wrapper is `display: contents` — layout-wise the
-   divider and the group row remain direct children of HkAuthCard's
+   divider and the tile row remain direct children of HkAuthCard's
    `.s-auth-methods` slot container. */
 .s-auth-methods-list {
   display: contents;
 }
 
-/* The icon button group row: fill the card column and center the
-   provider tiles inside it (descendant match off `.s-auth-methods` —
-   the wrapper generates no box of its own). */
-.s-auth-methods .hk-icon-group.s-auth-methods-group {
+/* The tile row: fill the card column and center the independent tiles
+   inside it. The gap between tiles is the INDEPENDENT-action spacing
+   (--space-12) — comfortable air, unlike a group's shoulder-to-shoulder
+   track gap. */
+.s-auth-methods .s-auth-methods-tiles {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-12, 0.75rem);
   width: 100%;
+}
+
+/* The HkTooltip wrapper span is the flex child between tiles — let it
+   shrink to the button so the row gap (not the wrapper) spaces them. */
+.s-auth-methods .s-auth-methods-tiles > .hk-tooltip-wrapper {
+  display: inline-flex;
+  flex: none;
+}
+
+/* One provider tile: a framed 44px square (the login-chooser tile size,
+   same as the icon group's md item). Each tile owns its whole frame —
+   border, hover wash, focus ring — with no track around the row. */
+.s-auth-methods-tile {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  font: inherit;
+  color: rgb(var(--color-text, 25 30 40));
+  background: rgb(var(--color-surface, 255 255 255) / 55%);
+  border: 1px solid rgb(var(--color-border, 222 224 228) / 55%);
+  border-radius: var(--radius-md, 8px);
+  cursor: pointer;
+  outline: none;
+  transition-property: background-color, border-color, color, box-shadow, opacity, transform;
+  transition-duration: var(--duration-short, 0.15s);
+  transition-timing-function: ease;
+
+  /* A real <button disabled> still matches :hover — guard the dead ones. */
+  &:hover:not(:disabled) {
+    color: rgb(var(--color-text, 25 30 40));
+    background: var(--c-primary-faint, rgb(var(--color-primary, 90 140 255) / 5%));
+    border-color: var(--c-primary-medium, rgb(var(--color-primary, 90 140 255) / 25%));
+  }
+
+  /* Tactile press feedback — the button-family cadence. */
+  &:active:not(:disabled) {
+    transform: scale(0.96);
+  }
+
+  /* Outset double ring, same grammar as .hk-btn. */
+  &:focus-visible {
+    box-shadow:
+      0 0 0 2px rgb(var(--color-surface, 255 255 255)),
+      0 0 0 4px rgb(var(--color-primary, 90 140 255));
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.s-auth-methods-tile-icon {
+  display: inline-flex;
+  align-items: center;
   justify-content: center;
+  line-height: 0;
+  /* Brand marks (svg/img vnodes) at their intrinsic size; lucide comps
+     sized by the host. The box never grows past the square. */
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.s-auth-methods-tile-initial {
+  font-size: var(--text-sm, 0.8125rem);
+  font-weight: 600;
+  line-height: 1;
 }

package/src/components/HkAuthMethodList.test.tsx

@@ -28,27 +28,39 @@ const methods = [
 ];
 
 describe("HkAuthMethodList", () => {
-  it("renders the provider row as an icon button group with an optional divider", () => {
+  it("renders centered independent framed tiles with an optional divider", () => {
     // The card's `methods` slot owns the `.s-auth-methods` container —
-    // reproduce that context here (the divider and the group row are layout
+    // reproduce that context here (the divider and the tile row are layout
     // children of it through the component's display:contents wrapper).
     const c = mount(
       h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { divider: "其他方式登录", methods })),
     );
     const divider = c.querySelector(".s-auth-methods-divider");
     expect(divider?.textContent).toContain("其他方式登录");
-    const group = c.querySelector<HTMLElement>(".s-auth-methods .hk-icon-group");
-    expect(group).toBeTruthy();
-    expect(group!.classList.contains("hk-icon-group-buttons")).toBe(true);
-    const buttons = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .hk-icon-group-item");
-    expect(buttons.length).toBe(2);
+    const tiles = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .s-auth-methods-tile");
+    expect(tiles.length).toBe(2);
     // Icon-only: the label is the accessible name + tooltip, never visible text.
-    expect(buttons[0]!.getAttribute("aria-label")).toBe("GitHub");
-    expect(buttons[1]!.getAttribute("aria-label")).toBe("LinuxDo");
-    expect(buttons[0]!.textContent).not.toContain("GitHub");
+    expect(tiles[0]!.getAttribute("aria-label")).toBe("GitHub");
+    expect(tiles[1]!.getAttribute("aria-label")).toBe("LinuxDo");
+    expect(tiles[0]!.textContent).not.toContain("GitHub");
   });
 
-  it("wraps every item in a tooltip carrying the provider label", () => {
+  it("never wraps the providers in a button-group track", () => {
+    // 2026-09-14 user direction: a shared group frame (one wide bordered
+    // track with the icons floating inside) is NOT this component's
+    // grammar — every provider is an independent framed tile. A regression
+    // back to HkIconButtonGroup (or any .hk-icon-group markup) must fail
+    // here, because the button group is reserved for selectors and tight
+    // action strips.
+    const c = mount(
+      h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { methods })),
+    );
+    expect(c.querySelector(".s-auth-methods .hk-icon-group")).toBeNull();
+    expect(c.querySelector(".s-auth-methods [role='group']")).toBeNull();
+    expect(c.querySelector(".s-auth-methods [role='radiogroup']")).toBeNull();
+  });
+
+  it("wraps every tile in a tooltip carrying the provider label", () => {
     const c = mount(
       h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { methods })),
     );
@@ -71,12 +83,12 @@ describe("HkAuthMethodList", () => {
         },
       })),
     );
-    const buttons = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .hk-icon-group-item");
-    buttons[1]!.click();
+    const tiles = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .s-auth-methods-tile");
+    tiles[1]!.click();
     await nextTick();
     // Both rows are asserted so a constant-literal emit cannot ride an
     // accidental fixture coincidence.
-    buttons[0]!.click();
+    tiles[0]!.click();
     await nextTick();
     expect(picked).toEqual(["linuxdo", "github"]);
   });
@@ -95,15 +107,15 @@ describe("HkAuthMethodList", () => {
         },
       })),
     );
-    const buttons = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .hk-icon-group-item");
-    expect(buttons.length).toBe(3);
-    // The prebuilt brand vnode renders inside the icon column.
-    expect(buttons[0]!.querySelector(".brand-gh")).toBeTruthy();
+    const tiles = c.querySelectorAll<HTMLButtonElement>(".s-auth-methods .s-auth-methods-tile");
+    expect(tiles.length).toBe(3);
+    // The prebuilt brand vnode renders inside the icon box.
+    expect(tiles[0]!.querySelector(".brand-gh")).toBeTruthy();
     // A missing icon falls back to the label initial (never an empty box).
-    expect(buttons[2]!.querySelector<HTMLElement>(".hk-icon-group-item-initial")?.textContent).toBe("F");
+    expect(tiles[2]!.querySelector<HTMLElement>(".s-auth-methods-tile-initial")?.textContent).toBe("F");
     // Disabled entries render dead and swallow clicks.
-    expect(buttons[1]!.disabled).toBe(true);
-    buttons[1]!.click();
+    expect(tiles[1]!.disabled).toBe(true);
+    tiles[1]!.click();
     await nextTick();
     expect(picked).toBe("");
   });

package/src/components/HkAuthMethodList.tsx

@@ -1,23 +1,27 @@
 import { defineComponent } from "vue";
-import HkIconButtonGroup from "./HkIconButtonGroup";
+import HkTooltip from "./HkTooltip";
 import "./HkAuthMethodList.scss";
 
 /**
  * HkAuthMethodList — the auth card's third-party sign-in block (the
  * "other ways to sign in" row under the credentials form).
  *
- * Since 2026-09-13 (user direction) the block renders as the ICON
- * BUTTON GROUP by default: one centered `HkIconButtonGroup` row of
- * icon-only provider buttons (mode "buttons", size md) instead of the
- * stacked full-width [icon | label] buttons. Provider identity is
- * revealed on hover — every item wraps itself in an HkTooltip with the
- * provider label — which matches the platform login-chooser pattern
- * (Windows/macOS account tiles) and keeps the card compact when a
- * deployment offers several providers. The `select` event carries the
- * provider `key` exactly as before, so consumers swap rendering
- * without touching their OAuth flow.
+ * Since 2026-09-14 (user direction) the block renders as CENTERED
+ * INDEPENDENT icon tiles: every provider is its own framed 44px icon
+ * button with its own tooltip — NOT a button group. A group track (one
+ * shared frame stretched across the card with the icons floating in
+ * the middle) reads as an oversized empty box; the button-group
+ * component is reserved for its two fundamental jobs — a selector
+ * (single/multiple) and a tight action strip (see HkIconButtonGroup).
  *
- * The wrapper stays `display: contents`: the divider and the group row
+ * Provider identity is revealed on hover: each tile wraps itself in an
+ * HkTooltip carrying the provider label, which matches the platform
+ * login-chooser pattern (Windows/macOS account tiles) and keeps the
+ * card compact when a deployment offers several providers. The
+ * `select` event carries the provider `key` exactly as before, so
+ * consumers swap rendering without touching their OAuth flow.
+ *
+ * The wrapper stays `display: contents`: the divider and the tile row
  * remain layout children of HkAuthCard's `.s-auth-methods` slot
  * container (it owns the side padding and vertical rhythm).
  */
@@ -35,11 +39,11 @@ export default defineComponent({
         /** Accessible name + tooltip text (the hover reveal). */
         label: string;
         /** Prebuilt icon vnode (brand SVG, <img>, …) rendered inside the
-         *  icon-only button. Typed loose on purpose (same as
-         *  HkIconButtonGroup options): hosts materialize hikari against
-         *  their own vue store, and a hard VNode type breaks typecheck
-         *  whenever the host's vue minor differs. A missing icon falls
-         *  back to the label's initial. */
+         *  framed tile. Typed loose on purpose (same as HkIconButtonGroup
+         *  options): hosts materialize hikari against their own vue store,
+         *  and a hard VNode type breaks typecheck whenever the host's vue
+         *  minor differs. A missing icon falls back to the label's
+         *  initial. */
         icon?: unknown;
         disabled?: boolean;
       }>,
@@ -47,7 +51,7 @@ export default defineComponent({
     },
   },
   emits: {
-    /** A provider button was clicked. */
+    /** A provider tile was clicked. */
     select: (_key: string) => true,
   },
   setup(props, { emit }) {
@@ -58,18 +62,42 @@ export default defineComponent({
             <span>{props.divider}</span>
           </div>
         )}
-        <HkIconButtonGroup
-          class="s-auth-methods-group"
-          mode="buttons"
-          size="md"
-          options={props.methods.map((method) => ({
-            key: method.key,
-            label: method.label,
-            icon: method.icon,
-            disabled: method.disabled === true,
-          }))}
-          onSelect={(key: string) => emit("select", key)}
-        />
+        {/* A plain row, deliberately NOT role="group": every tile is an
+            independent action (its own frame, its own tooltip), and the
+            divider above names the section for sighted users. Group
+            semantics belong to the selector/tight-strip components. */}
+        <div class="s-auth-methods-tiles">
+          {props.methods.map((method) => {
+            const tile = (
+              <button
+                key={method.key}
+                type="button"
+                class="s-auth-methods-tile"
+                data-key={method.key}
+                aria-label={method.label}
+                title={undefined} // the HkTooltip popup owns the hover text
+                disabled={method.disabled === true}
+                onClick={() => emit("select", method.key)}
+              >
+                <span class="s-auth-methods-tile-icon" aria-hidden="true">
+                  {method.icon != null
+                    ? method.icon
+                    : (
+                      <span class="s-auth-methods-tile-initial">
+                        {method.label.charAt(0).toUpperCase()}
+                      </span>
+                    )
+                  }
+                </span>
+              </button>
+            );
+            return (
+              <HkTooltip key={method.key} text={method.label} placement="top" delay={300}>
+                {tile}
+              </HkTooltip>
+            );
+          })}
+        </div>
       </div>
     );
   },

package/src/components/HkIconButtonGroup.tsx

@@ -25,13 +25,21 @@ export interface HkIconButtonGroupOption {
  * 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
+ * The group has exactly TWO fundamental jobs (2026-09-14 user direction
+ * — a group is a semantic component, not a generic box to throw buttons
+ * into), carried by three working modes:
+ *   - a SELECTOR: "single" (radiogroup: one active key via v-model,
+ *     re-clicking the active key is a no-op — radio semantics) or
+ *     "multiple" (toggle set: v-model is a string[] of active keys,
+ *     every item carries aria-pressed)
+ *   - a TIGHT ACTION STRIP: "buttons" (no selection state) — related
+ *     actions packed shoulder-to-shoulder in ONE shared track, the
+ *     toolbar grammar
+ *
+ * Anything else is NOT a group: independent actions that merely live on
+ * the same row (e.g. a login card's third-party provider tiles) render
+ * as separate framed buttons with comfortable spacing — see
+ * HkAuthMethodList for the reference pattern.
  *
  * 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) —

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

@@ -244,6 +244,22 @@ export {
   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