@celestia-island/hikari 0.55.4 → 0.55.6

package/package.json

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

package/src/components/HkAuthSubmitButton.tsx

@@ -20,13 +20,19 @@ export interface AuthSubmitContext {
  * 3. `onCaptcha` (optional) — acquire a captcha verification token.
  * 4. Call `onSubmit` with the assembled `AuthSubmitContext`.
  *
- * While solving, the button shows its own spinner; `loading` stays
- * external so callers can reflect server-side submission progress.
+ * While solving or submitting, the button renders its loading look —
+ * a leading spinner beside the caller's label (chest-style; user report
+ * 2026-09-16: swapping the whole caption for a challenge string read as
+ * a different control). Hosts that want the verbose challenge caption
+ * can opt back in with `solvingLabel`.
  */
 export default defineComponent({
   name: "HkAuthSubmitButton",
   props: {
     label: { type: String, required: true },
+    /** Optional caption while the challenge is being solved; defaults to
+     *  the regular label beside the spinner. */
+    solvingLabel: { type: String, default: undefined },
     loading: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     error: { type: String, default: undefined },
@@ -83,8 +89,8 @@ export default defineComponent({
           disabled={props.disabled || busy.value}
           onClick={() => void handleClick()}
         >
-          {solving.value
-            ? t("hikari::auth.solvingChallenge", "Verifying challenge…")
+          {solving.value && props.solvingLabel
+            ? props.solvingLabel
             : props.label}
         </HButton>
         {props.error && <p class="s-auth-submit-error">{props.error}</p>}

package/src/components/HkColorSchemeDialog.scss

@@ -6,6 +6,25 @@
 
 .s-scheme-mode-switch {
   align-self: center;
+
+  /* The strip needs a track of its own: pill-on-dialog-surface is
+     same-on-same in dark mode and read as bare text links (user report
+     2026-09-16), hiding that it is a segmented control — and that it
+     picks the EDITING target, not the applied app mode. */
+  .hk-tabs-list {
+    background: color-mix(in srgb, var(--hi-color-text-primary, rgb(var(--color-text))) 8%, transparent);
+    padding: var(--space-2, 2px);
+    border-radius: var(--hi-radius-sm, 4px);
+  }
+}
+
+/* Why-this-strip note: the tabs switch which palette you are EDITING;
+   the applied mode lives in the theme popup's color-mode strip. */
+.s-scheme-mode-hint {
+  align-self: center;
+  font-size: var(--text-xs, 0.75rem);
+  color: rgb(var(--color-muted));
+  margin-top: calc(var(--space-8, 0.5rem) * -1);
 }
 
 .s-scheme-colors {

package/src/components/HkColorSchemeEditor.tsx

@@ -418,6 +418,7 @@ export const HkColorSchemeEditor = defineComponent({
           onUpdate:modelValue={(v: string) => { modeTab.value = v; }}
           tabs={modeTabs.value}
         />
+        <p class="s-scheme-mode-hint">{t("hikari::theme.modeTabHint")}</p>
         <div class="s-scheme-colors">
           {editableTokens.map((key) => (
             <HColorPicker

package/src/components/HkDockBar.scss

@@ -0,0 +1,95 @@
+/**
+ * HkDockBar.scss — the shared dock surface chrome (single source of
+ * truth). `--hk-dock-inset` is declared by the foundation layer so every
+ * dock reads a defined value; change it once, all surfaces move
+ * together.
+ */
+
+.hk-dock-bar {
+  /* Transparent anchor box — never intercepts canvas gestures around
+   * the docked surface. */
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4, 4px);
+
+  /* ── page anchor: absolute bottom-center of the nearest positioned
+   *     ancestor, resting --hk-dock-inset above its content floor. */
+  &[data-anchor="page"] {
+    position: absolute;
+    left: 50%;
+    bottom: var(--hk-dock-inset, 12px);
+    transform: translateX(-50%);
+    z-index: 50;
+  }
+
+  /* ── plane anchor: in-flow inside a host plane (a fixed footer band);
+   *     the host owns the positioning, this container centers the
+   *     surface horizontally and lifts it by the shared dock inset. */
+  &[data-anchor="plane"] {
+    margin: 0 auto var(--hk-dock-inset, 12px);
+  }
+
+  /* ── corner anchors: absolute attachment with the same inset, for
+   *     pagers, toolbars and HUD panels that live off-center. */
+  &[data-anchor="top-left"],
+  &[data-anchor="top-right"],
+  &[data-anchor="bottom-left"],
+  &[data-anchor="bottom-right"] {
+    position: absolute;
+    z-index: 50;
+  }
+
+  &[data-anchor="top-left"] {
+    top: var(--hk-dock-inset, 12px);
+    left: var(--hk-dock-inset, 12px);
+    align-items: flex-start;
+  }
+
+  &[data-anchor="top-right"] {
+    top: var(--hk-dock-inset, 12px);
+    right: var(--hk-dock-inset, 12px);
+    align-items: flex-end;
+  }
+
+  &[data-anchor="bottom-left"] {
+    bottom: var(--hk-dock-inset, 12px);
+    left: var(--hk-dock-inset, 12px);
+    align-items: flex-start;
+  }
+
+  &[data-anchor="bottom-right"] {
+    bottom: var(--hk-dock-inset, 12px);
+    right: var(--hk-dock-inset, 12px);
+    align-items: flex-end;
+  }
+}
+
+.hk-dock-bar-surface {
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: var(--dock-width, auto);
+  max-width: var(--dock-max-width, calc(100vw - var(--space-16, 16px)));
+  padding: var(--dock-padding, var(--space-8, 8px) var(--space-12, 12px));
+  background: rgb(var(--color-surface));
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  /* Reverse soft light — dark mode: white halo; light mode: soft black
+   * shadow. Strength scales with --glow-scale (Style → Shadow). */
+  box-shadow: var(--glow-dock);
+}
+
+/* Glass surface (default) — blur the page canvas behind the dock. */
+.hk-dock-bar[data-surface="glass"] .hk-dock-bar-surface {
+  backdrop-filter: blur(var(--blur-lg));
+}
+
+/* Solid surface — no blur, for moving 3D canvases (per-frame backdrop
+ * re-sampling over a live WebGL scene is expensive; the surface must
+ * stay opaque anyway for contrast over the scene). */
+.hk-dock-bar[data-surface="solid"] .hk-dock-bar-surface {
+  backdrop-filter: none;
+}

package/src/components/HkDockBar.test.tsx

@@ -0,0 +1,76 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick } from "vue";
+
+import HkDockBar from "./HkDockBar";
+
+const apps: ReturnType<typeof createApp>[] = [];
+const containers: HTMLElement[] = [];
+
+afterEach(() => {
+  for (const app of apps.splice(0)) app.unmount();
+  for (const el of containers.splice(0)) el.remove();
+  document.body.innerHTML = "";
+});
+
+async function flush() {
+  await nextTick();
+  await nextTick();
+}
+
+/** Mount a dock with the given props and return its root section. */
+async function mountDock(props: Record<string, unknown> = {}) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  containers.push(container);
+  const Host = defineComponent({
+    setup() {
+      return () =>
+        h(HkDockBar, props, { default: () => h("button", { class: "probe" }, "go") });
+    },
+  });
+  const app = createApp(Host);
+  apps.push(app);
+  app.mount(container);
+  await flush();
+  return container.querySelector<HTMLElement>(".hk-dock-bar")!;
+}
+
+describe("HkDockBar", () => {
+  it("renders slot content inside the surface", async () => {
+    const root = await mountDock();
+    const probe = root.querySelector<HTMLElement>(".probe");
+    expect(probe?.textContent).toBe("go");
+    expect(root.querySelector(".hk-dock-bar-surface")).toBeTruthy();
+  });
+
+  it("defaults to the page anchor with a glass surface", async () => {
+    const root = await mountDock();
+    expect(root.dataset.anchor).toBe("page");
+    expect(root.dataset.surface).toBe("glass");
+  });
+
+  it.each(["plane", "top-left", "top-right", "bottom-left", "bottom-right"] as const)(
+    "accepts the %s anchor",
+    async (anchor) => {
+      const root = await mountDock({ anchor });
+      expect(root.dataset.anchor).toBe(anchor);
+    },
+  );
+
+  it("exposes style hooks for width, max-width and padding", async () => {
+    const root = await mountDock({
+      width: "22rem",
+      maxWidth: "30rem",
+      padding: "4px 6px",
+    });
+    const style = root.style;
+    expect(style.getPropertyValue("--dock-width")).toBe("22rem");
+    expect(style.getPropertyValue("--dock-max-width")).toBe("30rem");
+    expect(style.getPropertyValue("--dock-padding")).toBe("4px 6px");
+  });
+
+  it("drops the blur on the solid surface", async () => {
+    const root = await mountDock({ surface: "solid" });
+    expect(root.dataset.surface).toBe("solid");
+  });
+});

package/src/components/HkDockBar.tsx

@@ -0,0 +1,77 @@
+import { computed, defineComponent, type PropType } from "vue";
+
+import "./HkDockBar.scss";
+
+export type HkDockBarAnchor =
+  | "page"
+  | "plane"
+  | "top-left"
+  | "top-right"
+  | "bottom-left"
+  | "bottom-right";
+export type HkDockBarSurface = "glass" | "solid";
+
+/**
+ * HkDockBar — the ONE dock container. Every floating surface that docks
+ * to an edge or corner of a canvas — bottom-center cruise docks, corner
+ * step pagers, floating chat bars, nameplate pills — mounts its content
+ * inside THIS container; the page only provides slot content. One chrome
+ * (surface, blur, border, radius, reverse glow) means no dock surface
+ * ever re-declares its own background or shadow again.
+ *
+ * Anchors:
+ *   - `page`  (default): absolute bottom-center of the nearest positioned
+ *     ancestor, `--hk-dock-inset` above its content floor.
+ *   - `plane`: in-flow — the host provides the plane (e.g. a fixed
+ *     footer band); this container centers the surface horizontally.
+ *   - `top-left` / `top-right` / `bottom-left` / `bottom-right`:
+ *     absolute corner attachment with the same inset, for pagers,
+ *     toolbars and HUD panels that live off-center.
+ *
+ * Surfaces:
+ *   - `glass` (default): translucent surface + backdrop blur.
+ *   - `solid`: opaque, no blur — for moving canvases (WebGL scenes)
+ *     where per-frame backdrop re-sampling is expensive.
+ *
+ * Pointer-events contract: the anchored box is transparent to canvas
+ * gestures (pointer-events: none); the surface catches them.
+ */
+const HkDockBar = defineComponent({
+  name: "HkDockBar",
+  props: {
+    /** Which plane carries the dock: page (bottom-center), a host plane
+     *  (in-flow), or one of the four corners. */
+    anchor: { type: String as PropType<HkDockBarAnchor>, default: "page" },
+    /** Surface finish: glass (blur) or solid (moving canvas). */
+    surface: { type: String as PropType<HkDockBarSurface>, default: "glass" },
+    /** CSS width of the surface; undefined = shrink-wrap content. */
+    width: { type: String, default: undefined },
+    /** CSS max-width of the surface (content caps, e.g. minimap clearance). */
+    maxWidth: { type: String, default: undefined },
+    /** CSS padding override; defaults to the shared chrome rhythm. */
+    padding: { type: String, default: undefined },
+  },
+  setup(props, { slots }) {
+    const style = computed(() => {
+      const s: Record<string, string> = {};
+      if (props.width) s["--dock-width"] = props.width;
+      if (props.maxWidth) s["--dock-max-width"] = props.maxWidth;
+      if (props.padding) s["--dock-padding"] = props.padding;
+      return s;
+    });
+
+    return () => (
+      <section
+        class="hk-dock-bar"
+        data-anchor={props.anchor}
+        data-surface={props.surface}
+        style={style.value}
+      >
+        <div class="hk-dock-bar-surface">{slots.default?.()}</div>
+      </section>
+    );
+  },
+});
+
+export default HkDockBar;
+export { HkDockBar };

package/src/components/HkModal.scss

@@ -233,6 +233,17 @@
   flex-shrink: 0;
 }
 
+// Caller's header actions (HkModal's headerActions slot): a gap-separated
+// row of icon buttons / pills sitting at inline-end, one beat before the
+// close button (which keeps its own flex-shrink: 0 and glyph).
+.hk-modal-header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2, 4px);
+  margin-inline-start: var(--space-8, 8px);
+  flex-shrink: 0;
+}
+
 // ------
 // Sub-header (caller-provided slot)
 // ------

package/src/components/HkModal.tsx

@@ -836,6 +836,16 @@ export default defineComponent({
                         <h2 class="hk-modal-title">
                           {slots.header ? (props.title ?? "") : (props.title ?? "")}
                         </h2>
+                        {slots.headerActions && (
+                          // Caller's header actions (icon buttons, status
+                          // pills) — parked at inline-end, just before the
+                          // close button. The container participates in the
+                          // header flex; the title's auto margin keeps the
+                          // title+actions cluster apart.
+                          <div class="hk-modal-header-actions">
+                            {slots.headerActions()}
+                          </div>
+                        )}
                         {props.closable && (
                           // Unified window-close affordance: the shared
                           // icon button + registry X glyph (see

package/src/components/HkTimeline.scss

@@ -239,7 +239,9 @@
 .hk-timeline-step {
   display: flex;
   align-items: center;
-  gap: var(--space-8, 8px);
+  // Host-tunable rhythm: the node→label breathing room (a rail host with
+  // roomy rows raises it; the 8px stock keeps compact wizards tight).
+  gap: var(--hk-timeline-step-gap, var(--space-8, 8px));
   position: relative;
   flex: 1 1 auto;
   min-width: 0;
@@ -273,7 +275,9 @@
   }
 
   [data-el="label"] {
-    font-size: var(--text-xs, 0.75rem);
+    // Host-tunable: rails in side columns read better a notch up from
+    // the compact --text-xs wizard label.
+    font-size: var(--hk-timeline-label-size, var(--text-xs, 0.75rem));
     white-space: nowrap;
     flex-shrink: 0;
   }
@@ -290,6 +294,17 @@
   flex: 0 0 auto;
 }
 
+/* Disabled step: visible so the flow's shape reads, but dimmed and inert
+   (data-clickable is withheld upstream; cursor says so too). */
+.hk-timeline-step[data-disabled] {
+  cursor: default;
+
+  & [data-el="label"],
+  & [data-el="indicator"] {
+    opacity: 0.45;
+  }
+}
+
 .hk-timeline[data-orientation="vertical"][data-mode="full"] .hk-timeline-step {
   flex-direction: row;
   flex: 0 0 auto;

package/src/components/HkTimeline.tsx

@@ -20,6 +20,10 @@ export interface TimelineStep {
   key: string;
   label: string;
   icon?: string;
+  /** Greyed and inert when set — a gate the host enforces elsewhere (a
+   *  login wall, an unsatisfied precondition); the step stays visible so
+   *  the flow's shape reads, it just cannot be clicked into. */
+  disabled?: boolean;
 }
 
 /**
@@ -246,17 +250,19 @@ export default defineComponent({
           data-status={status}
           data-last={opts.last || undefined}
           aria-current={status === "active" ? "step" : undefined}
-          data-clickable={(props.clickable && status === "completed") || undefined}
-          role={props.clickable ? "button" : undefined}
-          tabindex={props.clickable && status === "completed" ? 0 : undefined}
+          data-disabled={step.disabled || undefined}
+          data-clickable={(props.clickable && status === "completed" && !step.disabled) || undefined}
+          role={props.clickable && !step.disabled ? "button" : undefined}
+          tabindex={props.clickable && status === "completed" && !step.disabled ? 0 : undefined}
           onClick={() => {
-            if (props.clickable && status === "completed")
+            if (props.clickable && status === "completed" && !step.disabled)
               emit("select", step.key);
           }}
           onKeydown={(e: KeyboardEvent) => {
             if (
               props.clickable &&
               status === "completed" &&
+              !step.disabled &&
               (e.key === "Enter" || e.key === " ")
             ) {
               e.preventDefault();

package/src/index.ts

@@ -18,6 +18,11 @@ export { HkColorSchemeEditor } from "./components/HkColorSchemeEditor";
 export { default as HConfirmDialog } from "./components/HkConfirmDialog";
 export { default as HCrossfade } from "./components/HkCrossfade";
 export { default as HDivider } from "./components/HkDivider";
+export {
+  default as HDockBar,
+  type HkDockBarAnchor as HDockBarAnchor,
+  type HkDockBarSurface as HDockBarSurface,
+} from "./components/HkDockBar";
 export { default as HDrawer } from "./components/HkDrawer";
 export { default as HEmptyState } from "./components/HkEmptyState";
 export { default as HExpansionPanel } from "./components/HkExpansionPanel";