npm - @celestia-island/hikari - Versions diffs - 0.55.66 → 0.55.68 - Mend

@celestia-island/hikari 0.55.66 → 0.55.68

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json +1 -1
package/src/components/HkStepFlow.test.tsx +133 -1
package/src/components/HkStepFlow.tsx +29 -0
package/src/composables/useSizeMorph.test.ts +8 -3
package/src/composables/useSizeMorph.ts +39 -0

package/package.json CHANGED Viewed

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

package/src/components/HkStepFlow.test.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { createApp, defineComponent, h, nextTick, ref } from "vue";
+import { createApp, defineComponent, h, nextTick, onMounted, ref } from "vue";
 import HkStepFlow, { STEPFLOW_SWAP_EVENT } from "./HkStepFlow";
 import type { StepFlowSlotProps } from "./HkStepFlow";
@@ -198,6 +198,138 @@ describe("HkStepFlow", () => {
   });
 });
+describe("HkStepFlow focus handoff on swap", () => {
+  /** Mount with an input in `b`; `a` optionally autofocuses its own field
+   *  the moment the entering body mounts. */
+  function mountFocusRig(options: {
+    initial: string;
+    autoFocusEntry?: boolean;
+    hideTimeline?: boolean;
+    timelineClickable?: boolean;
+  }): { container: HTMLElement; setCurrent: (key: string) => void } {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const current = ref(options.initial);
+    const AutoField = defineComponent({
+      setup() {
+        const el = ref<HTMLInputElement | null>(null);
+        onMounted(() => el.value?.focus());
+        return () => h("input", { ref: el, class: "auto-input" });
+      },
+    });
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(
+            HkStepFlow,
+            {
+              steps: STEPS,
+              modelValue: current.value,
+              hideTimeline: options.hideTimeline ?? true,
+              timelineClickable: options.timelineClickable ?? false,
+              "onUpdate:modelValue": (key: string) => { current.value = key; },
+            },
+            {
+              a: () =>
+                options.autoFocusEntry
+                  ? h(AutoField)
+                  : h("p", { class: "step-body" }, "a-body"),
+              b: () => h("input", { class: "step-input" }),
+              c: () => h("p", { class: "step-body" }, "c-body"),
+              d: () => h("p", { class: "step-body" }, "d-body"),
+            },
+          );
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    return { container, setCurrent: (key) => { current.value = key; } };
+  }
+  it("drops focus out of the leaving body when an animated swap starts", async () => {
+    // Round-22 chest report: the leaving body keeps its DOM node — and so
+    // its focus — through the whole slide, so a focused endpoint field had
+    // Android re-anchoring its autofill suggestion panel on every frame of
+    // the height morph (the panel strobed for the length of the swap). The
+    // motion stub matters: on the instant path the node is recycled at
+    // once and the browser drops focus by itself, which would make this
+    // assertion pass for the wrong reason.
+    stubMotion("0.15s");
+    const t = mountFocusRig({ initial: "b" });
+    const input = t.container.querySelector<HTMLInputElement>(".step-input");
+    expect(input).not.toBeNull();
+    input!.focus();
+    expect(document.activeElement).toBe(input);
+    t.setCurrent("a");
+    await flushSwap();
+    // The slide is still in flight, so the leaving body — and its input —
+    // are still mounted; that is exactly the window that used to strobe.
+    expect(t.container.contains(input)).toBe(true);
+    expect(document.activeElement).not.toBe(input);
+  });
+  it("keeps focus on the timeline step that drove the change", async () => {
+    // The timeline sits inside the flow but is NOT leaving the stage: a
+    // keyboard or pointer user who activated a completed step must keep
+    // their focus. Blurring it drops them to <body> — the next Tab
+    // restarts at the top of the document, and HkModal's Tab trap stops
+    // engaging, so focus can escape the dialog.
+    stubMotion("0.15s");
+    const t = mountFocusRig({
+      initial: "c",
+      hideTimeline: false,
+      timelineClickable: true,
+    });
+    const stepEl = t.container.querySelector<HTMLElement>(
+      ".hk-timeline-step[data-clickable]",
+    );
+    expect(stepEl).not.toBeNull();
+    stepEl!.focus();
+    expect(document.activeElement).toBe(stepEl);
+    t.setCurrent("a");
+    await flushSwap();
+    expect(document.activeElement).toBe(stepEl);
+  });
+  it("lets the entering step's own autofocus win over the blur", async () => {
+    // The blur runs at the top of the swap watcher, before the entering
+    // body mounts, so a step that focuses its own first field on entry
+    // still wins. Moving the call below the mount turns this red.
+    stubMotion("0.15s");
+    const t = mountFocusRig({ initial: "b", autoFocusEntry: true });
+    const leaving = t.container.querySelector<HTMLInputElement>(".step-input");
+    expect(leaving).not.toBeNull();
+    leaving!.focus();
+    expect(document.activeElement).toBe(leaving);
+    t.setCurrent("a");
+    await flushSwap();
+    const entered = t.container.querySelector<HTMLInputElement>(".auto-input");
+    expect(entered).not.toBeNull();
+    expect(document.activeElement).toBe(entered);
+  });
+  it("leaves focus outside the flow alone", async () => {
+    const t = mountFocusRig({ initial: "a" });
+    const outside = document.createElement("input");
+    document.body.appendChild(outside);
+    containers.push(outside);
+    outside.focus();
+    expect(document.activeElement).toBe(outside);
+    t.setCurrent("b");
+    await flushSwap();
+    // Containment, not a blanket blur.
+    expect(document.activeElement).toBe(outside);
+  });
+});
 describe("HkStepFlow split-window swap (motion enabled)", () => {
   it("slides both bodies across one window, then morphs the sheet after", async () => {
     stubMotion();

package/src/components/HkStepFlow.tsx CHANGED Viewed

@@ -287,10 +287,39 @@ export default defineComponent({
     // Sticky-header whitespace strategy (2026-09-14): see HkScrollPin.
     const pinStrategy = ref<"offset" | "bleed">("bleed");
+    /** Drop focus out of the step bodies the moment a swap starts.
+     *
+     *  The leaving body keeps its DOM node — and therefore its focus —
+     *  for the whole slide window, and its input rides the cell while
+     *  the sheet morphs its height. Android re-anchors an open autofill
+     *  suggestion panel on every layout change, so a focused endpoint
+     *  field made the system's autofill sheet strobe at roughly the
+     *  frame rate for the entire animation (round-22 chest report: the
+     *  panel toggled over ~94% of the sheet body for ~250ms while the
+     *  step changed). Blurring before the first animated frame dismisses
+     *  the panel outright; the field the user was typing in is leaving
+     *  the stage anyway, so nothing is taken from them.
+     *
+     *  Containment is the BODIES, not the flow: HkTimeline renders the
+     *  completed steps as `role="button" tabindex="0"` inside this same
+     *  element, and a timeline step that drove the change is not leaving
+     *  the stage. Blurring it would drop a keyboard or pointer user to
+     *  `<body>` — Tab restarts at the top of the document, and HkModal's
+     *  Tab trap stops engaging so focus can escape the dialog. */
+    function dropFlowFocus(): void {
+      if (typeof document === "undefined") return; // SSR guard
+      const active = document.activeElement;
+      if (!(active instanceof HTMLElement)) return;
+      const body = active.closest(".hk-stepflow-body");
+      if (!body || !flowRef.value?.contains(body)) return;
+      active.blur();
+    }
     watch(
       () => props.modelValue,
       async (next, prev) => {
         if (next === prev) return;
+        dropFlowFocus();
         preemptSwap();
         const leaving = bodies.value.find((b) => b.phase === "active");
         if (!leaving) return;

package/src/composables/useSizeMorph.test.ts CHANGED Viewed

@@ -332,9 +332,12 @@ describe("useSizeMorph clip reveal", () => {
     await settle();
     // The pin landed at the new height with no height animation staged.
     expect(h.frame.style.height).toBe("360px");
-    // The sweep runs: end-state clip (promotion stays resident).
+    // The sweep runs: end-state clip, carried on a DEMOTED frame (see the
+    // demotion note in startRevealSweep). The clip contract is unchanged —
+    // only the promotion comes off, so the edge travels as a main-thread
+    // paint that a phone GPU cannot drop the sheet's tiles out from under.
     expect(h.frame.style.clipPath).toBe("inset(0px 0 0 0 round 0px 0px 0px 0px)");
-    expect(h.frame.style.willChange).toBe("clip-path");
+    expect(h.frame.style.willChange).toBe("");
     expect(h.frame.style.transition).toBe("");
     fireTransitionEnd(h.frame, "clip-path");
@@ -641,7 +644,9 @@ describe("useSizeMorph clip reveal", () => {
     h.remeasure();
     expect(h.frame.style.height).toBe("450px");
     expect(h.frame.style.clipPath).toBe("inset(70px 0 0 0 round 0px 0px 0px 0px)");
-    expect(h.frame.style.willChange).toBe("clip-path");
+    // Re-staging demotes again, and the remember-what-to-restore answer
+    // survives the re-stage (see startRevealSweep's idempotence note).
+    expect(h.frame.style.willChange).toBe("");
   });
   it("cancels a pending warmup when a second growth re-stages mid-warmup", async () => {

package/src/composables/useSizeMorph.ts CHANGED Viewed

@@ -256,6 +256,11 @@ export function useSizeMorph(
   let morphDemoted = false;
   let morphSavedFrameWill = "";
   let morphSavedRiderWills: Array<[HTMLElement, string]> = [];
+  /** The frame's promotion as it stood when the live sweep demoted it (see
+   *  startRevealSweep): put back on landing, dropped outright when the open
+   *  cycle unwinds first (clearResidentWill) so a sheet that is closing is
+   *  never re-promoted by a sweep's own settle. */
+  let revealSavedWill = "";
   /** Identity of the sweep currently staged/folding, echoed to consumers. */
   let sweepSeq = 0;
   let activeSweep = 0;
@@ -422,6 +427,12 @@ export function useSizeMorph(
       } else {
         revealEl.style.clipPath = "";
       }
+      // Put the sweep's demotion back (see startRevealSweep). Empty means
+      // the frame carried no promotion to begin with — nothing to restore.
+      if (revealSavedWill) {
+        revealEl.style.willChange = revealSavedWill;
+        revealSavedWill = "";
+      }
     }
     const hadSweep = revealEl !== null;
     const sweptId = activeSweep;
@@ -459,6 +470,9 @@ export function useSizeMorph(
     morphSavedRiderWills = [];
     morphSavedFrameWill = "";
     morphDemoted = false;
+    // A sweep still in flight must not put its promotion back on a sheet
+    // whose open cycle is already unwinding (mirrors morphSavedFrameWill).
+    revealSavedWill = "";
     for (const el of residentRideEls) {
       el.style.willChange = "";
     }
@@ -779,6 +793,31 @@ export function useSizeMorph(
       });
       const dir = revealDir;
       const insetPx = Math.abs(delta);
+      // Demote the frame for the whole sweep window — staging, warmup and
+      // edge travel. A promoted layer runs the per-frame clip re-raster on
+      // the GPU, and a phone GPU drops tiles under it, so the sheet's
+      // surface goes missing for those frames and the page behind shows
+      // through it (round-23 chest report: 变高必闪、变矮几乎不闪, and the
+      // same viewport on a desktop engine does not reproduce at all). The
+      // height-morph path has always demoted for exactly this reason
+      // ("the height animation's per-frame paint happens on the main
+      // thread, which is slower but never leaves a frame where the sheet's
+      // surface is missing"); the clip sweep kept its promotion and was
+      // the last per-frame GPU re-raster of the full-width sheet. The
+      // demotion lands BEFORE the warmup on purpose: those two bus frames
+      // are the window the demoted layout's raster needs, exactly as they
+      // already are for the staged pin. The promotion goes back on landing
+      // (stopReveal). Note this is a per-sweep DEMOTION of a promotion that
+      // is still resident from arm time — not the per-sweep promotion
+      // #620's round-5 finding ruled out.
+      // Idempotent across a re-staged dance: the FIRST staging remembers
+      // what to put back and later ones keep that answer — the frame is a
+      // clip-mode sheet by construction here, so the resident promotion is
+      // `clip-path`. clearResidentWill blanks it outright when the open
+      // cycle unwinds first, which is what keeps a closing sheet from
+      // being re-promoted by its own sweep's settle.
+      if (!revealSavedWill) revealSavedWill = f.style.willChange || "clip-path";
+      f.style.willChange = "";
       let framesLeft = REVEAL_WARMUP_FRAMES;
       const armWarmup = (): void => {
         revealWarmup = scheduleFrame(() => {