@celestia-island/hikari 0.55.68 → 0.55.70

package/package.json

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

package/src/components/HkStepFlow.scss

@@ -32,7 +32,22 @@
     --hk-stepflow-sticky-bg,
     color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 95%, transparent)
   );
-  top: var(--hk-stepflow-sticky-top, 0px);
+  // The HOST's declared gutter owns the resting offset, not this rule. The
+  // pin contract's offset rule is (0,3,0) and parks a top pin at
+  // var(--hk-scroll-pad-top, 0px); this rule is (0,4,0), so a bare `0px`
+  // default silently out-specified it and parked the stuck pin flush
+  // against the scrollport edge instead of at the gutter line. The
+  // window-mode bonds sit 11-13px below the pin's top, so they landed
+  // INSIDE the host's own gutter cover (HkModal paints
+  // `.hk-modal-body::before` there at z-index 3), leaving their visibility
+  // resting entirely on the pin's z-index 10 staying inside that cover's
+  // stacking context. Any promoted wrapper between the scroll host and the
+  // pin collapses that: the bond measures 0 % under an opaque cover and
+  // exactly 5.0 % under a 95 % one — the round-24 phone signature
+  // (左中右三段式的步骤左右没有横线). Deferring to the gutter moves the
+  // bond to pad+11, clear of the cover band, and keeps a consumer's own
+  // override working through --hk-stepflow-sticky-top.
+  top: var(--hk-stepflow-sticky-top, var(--hk-scroll-pad-top, 0px));
   margin-bottom: 0;
   padding-bottom: var(--hk-stepflow-header-gap, var(--space-16, 1rem));
 }

package/src/components/HkTimeline.bondvisibility.contract.test.ts

@@ -0,0 +1,86 @@
+/**
+ * Source contract for the window-mode bond's visibility.
+ *
+ * Round-24 chest report: 左中右三段式的步骤左右没有横线 — the provider wizard's
+ * step indicator rendered its three cells but neither the completed bond,
+ * the pending bond, nor the edge continuations read as lines. Two
+ * independent causes, both measured on a real engine, both pinned here:
+ *
+ *   1. The stuck pin ignored the host's declared gutter. The step-flow's
+ *      sticky rule is (0,4,0) and the pin contract's offset rule is
+ *      (0,3,0), so a bare `0px` default out-specified the contract and
+ *      parked the pin flush against the scrollport edge. The window-mode
+ *      bonds sit 11-13px below the pin's top and therefore landed inside
+ *      HkModal's own gutter cover (`.hk-modal-body::before`, z-index 3),
+ *      which left their visibility resting entirely on the pin's z-index
+ *      beating that cover. One promoted wrapper between the scroll host
+ *      and the pin collapses it: the bond then measures 0 % under an
+ *      opaque cover and exactly 5.0 % under a 95 % one.
+ *   2. The pending bond derived its colour from `--hi-color-border`, which
+ *      the shipped schemes define WITH alpha (rgb(128 128 128 / 15%)), so
+ *      the bond computed to 15 % × 30 % = 4.5 % — and a 2px line at 4.5 %
+ *      is not a line.
+ *
+ * Both are pure stylesheet facts, which is why they are asserted against
+ * the source: jsdom runs no cascade, and the failure only shows up as
+ * pixels. The geometry half of the same investigation (the containing
+ * block is correct — the overlay anchors to the sticky timeline) needs no
+ * assertion; it was never wrong.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const read = (name: string): string => readFileSync(join(here, name), "utf-8");
+
+const stepflow = read("HkStepFlow.scss");
+const timeline = read("HkTimeline.scss");
+const scrollpin = read("HkScrollPin.scss");
+
+/** The declaration block of the first rule whose selector starts at `from`. */
+function blockAfter(source: string, from: number): string {
+  const end = source.indexOf("}", from);
+  return end < 0 ? source.slice(from) : source.slice(from, end);
+}
+
+describe("window-mode bond visibility contract", () => {
+  it("keeps the pin contract's gutter as the sticky step-flow header's default offset", () => {
+    // The pin contract still declares the gutter for an offset top pin...
+    expect(scrollpin).toContain("top: var(--hk-scroll-pad-top, 0px)");
+
+    // ...and the step-flow override DEFERS to it instead of replacing it
+    // with 0. Losing this is silent: the pin still pins, the cells still
+    // render, only the bonds fall under the host's gutter cover.
+    const at = stepflow.indexOf(
+      ".hk-step-flow[data-sticky-header] > .hk-timeline.hk-scroll-pin",
+    );
+    expect(at).toBeGreaterThan(-1);
+    const block = blockAfter(stepflow, at);
+    expect(block).toContain(
+      "top: var(--hk-stepflow-sticky-top, var(--hk-scroll-pad-top, 0px));",
+    );
+    // The old bare default must not come back.
+    expect(block).not.toContain("top: var(--hk-stepflow-sticky-top, 0px);");
+  });
+
+  it("derives the pending bond from an opaque tone so its alpha is not multiplied", () => {
+    const at = timeline.indexOf('&[data-status="pending"]');
+    expect(at).toBeGreaterThan(-1);
+    const block = blockAfter(timeline, at);
+    expect(block).toContain("--_link-color:");
+    expect(block).toContain("var(--hi-color-muted");
+    // Deriving from the border token multiplied its own alpha.
+    expect(block).not.toContain("var(--hi-color-border)");
+  });
+
+  it("carries both bonds as real boxes on the shared node geometry", () => {
+    // The segments are positioned off the shared tokens, so a bond can only
+    // be invisible through colour or occlusion — never through zero size.
+    expect(timeline).toContain("--hk-timeline-link-thickness: 2px");
+    expect(timeline).toContain("--hk-timeline-link-clearance: 20px");
+    expect(timeline).toContain('&[data-segment="before-current"]');
+    expect(timeline).toContain('&[data-segment="current-after"]');
+  });
+});

package/src/components/HkTimeline.scss

@@ -137,7 +137,16 @@
   // the current step is never a link endpoint (HkTimeline.tsx statusOf),
   // so no "active" key here.
   &[data-status="pending"] {
-    --_link-color: color-mix(in srgb, var(--hi-color-border) 30%, transparent);
+    // 30 % of a SOLID muted tone. Deriving from --hi-color-border multiplied
+    // that token's own alpha: the shipped schemes define it as
+    // `rgb(128 128 128 / 15%)`, so the bond computed to 15 % × 30 % = 4.5 %
+    // — a 2px line at 4.5 % reads as no line at all, which is what the
+    // round-24 report saw on the right bond and on both edge continuations
+    // (左中右三段式的步骤左右没有横线). --hi-color-muted is an opaque text
+    // tone in the family's schemes, so the 30 % below is the strength it
+    // looks like; the intent ("a third as loud as the completed bond")
+    // survives whatever alpha a theme gives its border token.
+    --_link-color: color-mix(in srgb, var(--hi-color-muted, #6c6c6c) 30%, transparent);
   }
 
   background-color: var(--_link-color);

package/src/composables/useSizeMorph.test.ts

@@ -332,12 +332,9 @@ 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, 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.
+    // The sweep runs: end-state clip (promotion stays resident).
     expect(h.frame.style.clipPath).toBe("inset(0px 0 0 0 round 0px 0px 0px 0px)");
-    expect(h.frame.style.willChange).toBe("");
+    expect(h.frame.style.willChange).toBe("clip-path");
     expect(h.frame.style.transition).toBe("");
 
     fireTransitionEnd(h.frame, "clip-path");
@@ -644,9 +641,7 @@ 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)");
-    // 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("");
+    expect(h.frame.style.willChange).toBe("clip-path");
   });
 
   it("cancels a pending warmup when a second growth re-stages mid-warmup", async () => {

package/src/composables/useSizeMorph.ts

@@ -256,11 +256,6 @@ 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;
@@ -427,12 +422,6 @@ 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;
@@ -470,9 +459,6 @@ 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 = "";
     }
@@ -793,31 +779,6 @@ 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(() => {