@celestia-island/hikari 0.55.276 → 0.55.279

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.276",
+  "version": "0.55.279",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/animation/registerAnimations.ts

@@ -134,3 +134,7 @@ registerCssAnimation("hk-persistent-toast-card-in");
 // The styles/theme/mixins.scss ambient/glow/entrance keyframes were
 // retired with the legacy Gen-1 sheet vendoring (hikari #476) — their
 // registrar entries went with them.
+// components/HkScreenIdentifyCard.scss — the identify card's entrance
+// (opacity + 6px rise, plays once; the card unmounts at dwell end, so
+// no leave keyframe).
+registerCssAnimation("hk-screen-identify-in");

package/src/components/HkAmbientLayer.scss

@@ -0,0 +1,23 @@
+// HkAmbientLayer — the ambient HUD host (see HkAmbientLayer.tsx).
+//
+// The wrapper lives INSIDE #hk-hud-root (overlay/hudRoot.scss owns the
+// root's document elevation). It spans the viewport so slot children can
+// position themselves against the screen edges, but it is a ghost for
+// pointers: annotations must never block the window they annotate.
+
+.hk-ambient-layer {
+  position: fixed;
+  inset: 0;
+  z-index: var(--hk-overlay-z-hud, 1);
+  overflow: visible;
+  pointer-events: none;
+
+  // The one opt-in for a clickable HUD targets the slot CONTENT, never
+  // the wrapper: the wrapper spans the viewport, so re-enabling pointer
+  // events on it would swallow every click on the page behind an
+  // "interactive" HUD (R2 S2). Children restore their own
+  // pointer-events, the layer itself stays a ghost.
+  &[data-pointer-events="auto"] > * {
+    pointer-events: auto;
+  }
+}

package/src/components/HkAmbientLayer.styles.test.ts

@@ -0,0 +1,43 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+/**
+ * HkAmbientLayer layout contract (R2 S2): the layer spans the viewport so
+ * slot children can position themselves against the screen edges, which
+ * means the WRAPPER must never take pointer input — enabling it there
+ * would make a transparent full-screen div swallow every click on the
+ * page. The `pointerEvents="auto"` opt-in therefore targets the slot
+ * children only.
+ */
+const here = dirname(fileURLToPath(import.meta.url));
+const scss = readFileSync(join(here, "HkAmbientLayer.scss"), "utf8");
+
+/** Comments stripped: a comment naming a property must not satisfy a
+ *  guard about it. */
+const declarations = scss.replace(/\/\/[^\n]*/g, "");
+
+describe("HkAmbientLayer pointer contract", () => {
+  it("spans the viewport but stays a pointer ghost", () => {
+    expect(declarations).toMatch(/position:\s*fixed;/);
+    expect(declarations).toMatch(/inset:\s*0;/);
+    expect(declarations).toMatch(/pointer-events:\s*none;/);
+  });
+
+  it("opt-in pointer events target the slot children, not the wrapper", () => {
+    // The auto declaration must live inside the CHILD-scoped block. This
+    // is the S2 footgun: a transparent full-viewport wrapper with
+    // pointer-events:auto swallows every page click.
+    const autoAt = declarations.indexOf("pointer-events: auto");
+    expect(autoAt).toBeGreaterThan(-1);
+    const blockStart = declarations.lastIndexOf('[data-pointer-events="auto"]', autoAt);
+    expect(blockStart).toBeGreaterThan(-1);
+    expect(declarations.slice(blockStart, autoAt)).toContain("> *");
+  });
+
+  it("sits on the HUD ordinal band, below its root's document elevation", () => {
+    expect(declarations).toMatch(/z-index:\s*var\(--hk-overlay-z-hud/);
+  });
+});

package/src/components/HkAmbientLayer.test.tsx

@@ -0,0 +1,124 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, nextTick } from "vue";
+
+import HkAmbientLayer from "./HkAmbientLayer";
+
+type LayerProps = {
+  pointerEvents?: "none" | "auto";
+  zIndex?: number;
+  label?: string;
+};
+
+/**
+ * HkAmbientLayer contract:
+ * - the slot teleports into #hk-hud-root (never <body> directly), which
+ *   is what makes an annotation out-paint the whole popup tree;
+ * - the wrapper is a pointer ghost by default and exposes its own
+ *   pointer-events opt-in;
+ * - zIndex orders ambient layers against each other inside the root;
+ * - the label turns the layer into a named landmark; no label keeps it
+ *   decorative (the card carries its own status role);
+ * - unmounting removes the content from the root.
+ *
+ * (Repo test convention: raw createApp + document queries.)
+ */
+
+const mounts: Array<() => void> = [];
+
+function mountLayer(props: LayerProps = {}, slotText = "HUD") {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp(
+    defineComponent({
+      setup() {
+        return () =>
+          h(
+            HkAmbientLayer,
+            props,
+            { default: () => h("span", { class: "hud-probe" }, slotText) },
+          );
+      },
+    }),
+  );
+  app.mount(container);
+  mounts.push(() => {
+    app.unmount();
+    container.remove();
+  });
+  return container;
+}
+
+afterEach(() => {
+  while (mounts.length) mounts.pop()?.();
+  // The HUD root is a module-owned singleton; leave the DOM tidy for the
+  // next case (the root itself stays, layer content must be gone).
+  document.querySelectorAll("#hk-hud-root .hk-ambient-layer").forEach((el) => el.remove());
+});
+
+describe("HkAmbientLayer", () => {
+  it("teleports the slot into the ambient HUD root", async () => {
+    mountLayer();
+    await nextTick();
+    const root = document.querySelector("#hk-hud-root");
+    expect(root).not.toBeNull();
+    const layer = root!.querySelector(".hk-ambient-layer");
+    expect(layer).not.toBeNull();
+    expect(layer!.querySelector(".hud-probe")?.textContent).toBe("HUD");
+  });
+
+  it("does not leave the slot in <body> outside the root", async () => {
+    const container = mountLayer();
+    await nextTick();
+    expect(container.querySelector(".hud-probe")).toBeNull();
+    const inRoot = document
+      .querySelector("#hk-hud-root")!
+      .querySelector(".hud-probe");
+    expect(inRoot).not.toBeNull();
+  });
+
+  it("is a pointer ghost by default and exposes the auto opt-in", async () => {
+    mountLayer();
+    await nextTick();
+    const layer = document.querySelector<HTMLElement>("#hk-hud-root .hk-ambient-layer")!;
+    expect(layer.getAttribute("data-pointer-events")).toBe("none");
+  });
+
+  it("carries the auto pointer mode when asked", async () => {
+    mountLayer({ pointerEvents: "auto" });
+    await nextTick();
+    const layer = document.querySelector<HTMLElement>("#hk-hud-root .hk-ambient-layer")!;
+    expect(layer.getAttribute("data-pointer-events")).toBe("auto");
+  });
+
+  it("orders ambient layers by the zIndex prop inside the root", async () => {
+    mountLayer({ zIndex: 7 });
+    await nextTick();
+    const layer = document.querySelector<HTMLElement>("#hk-hud-root .hk-ambient-layer")!;
+    expect(layer.style.zIndex).toBe("7");
+  });
+
+  it("labels the layer as a landmark only when a label is given", async () => {
+    mountLayer();
+    await nextTick();
+    let layer = document.querySelector<HTMLElement>("#hk-hud-root .hk-ambient-layer")!;
+    expect(layer.hasAttribute("role")).toBe(false);
+    expect(layer.hasAttribute("aria-label")).toBe(false);
+  });
+
+  it("turns a labelled layer into a named region", async () => {
+    mountLayer({ label: "Recording" });
+    await nextTick();
+    const layer = document.querySelector<HTMLElement>("#hk-hud-root .hk-ambient-layer")!;
+    expect(layer.getAttribute("role")).toBe("region");
+    expect(layer.getAttribute("aria-label")).toBe("Recording");
+  });
+
+  it("removes its content from the root on unmount", async () => {
+    mountLayer();
+    await nextTick();
+    expect(document.querySelector("#hk-hud-root .hud-probe")).not.toBeNull();
+    mounts.pop()?.();
+    await nextTick();
+    expect(document.querySelector("#hk-hud-root .hud-probe")).toBeNull();
+  });
+});

package/src/components/HkAmbientLayer.tsx

@@ -0,0 +1,74 @@
+import { defineComponent, type PropType, Teleport } from "vue";
+
+import { ensureHudRoot } from "../overlay/hudRoot";
+import "./HkAmbientLayer.scss";
+
+/**
+ * HkAmbientLayer — the shared host for always-visible, NON-INTERACTIVE
+ * annotations: a slot teleported into hikari's ambient HUD root
+ * (`#hk-hud-root`, overlay/hudRoot.ts) so it paints above EVERY popup —
+ * the modal backdrop included — without entering the popup manager's
+ * window/anchored/tooltip stack.
+ *
+ * The 2026-11-05 identify defect is the reason this exists: the
+ * screen-identify card was teleported to `<body>` with a hand-written
+ * `z-index: 5000`, so the modal tree (document band 90000) buried it and
+ * the card showed through the scrim as dimmed background. Layer
+ * selection is a LIBRARY decision, not a per-consumer number: one HUD
+ * root, one band (`--hk-z-hud`), and a single reviewable floor
+ * (`--hk-overlay-z-hud`) for layers inside it.
+ *
+ * Non-interactive by default: the wrapper spans the viewport but lets
+ * every pointer through (`pointer-events: none`). Pass
+ * `pointerEvents="auto"` only for a HUD that really is clickable (an
+ * annotation chip with a dismiss button), and keep its footprint small so
+ * it never swallows the page.
+ *
+ * Usage:
+ *
+ * ```tsx
+ * <HkAmbientLayer>
+ *   <div class="hk-recording-dot" />
+ * </HkAmbientLayer>
+ * ```
+ *
+ * `zIndex` orders several ambient layers against each other inside the
+ * HUD root (default: the base floor). The wrapper never leaves the root,
+ * so it cannot be covered by a later-opened modal.
+ */
+export default defineComponent({
+  name: "HkAmbientLayer",
+  props: {
+    /** Whether the layer's CONTENT accepts pointer input. Default `none`
+     *  — an annotation must not block the window it annotates. `auto`
+     *  restores pointer events on the slot children only; the
+     *  viewport-spanning wrapper itself always stays a ghost, so an
+     *  interactive HUD can never swallow page clicks. */
+    pointerEvents: {
+      type: String as PropType<"none" | "auto">,
+      default: "none",
+      validator: (value: string) => value === "none" || value === "auto",
+    },
+    /** Stacking order among ambient layers (larger = nearer the user).
+     *  Local to the HUD root, never a document-space number. */
+    zIndex: { type: Number, default: 1 },
+    /** Accessible name for the layer as a landmark. Omit for purely
+     *  decorative hosts; the card inside carries its own status role. */
+    label: { type: String, default: undefined },
+  },
+  setup(props, { slots }) {
+    return () => (
+      <Teleport to={ensureHudRoot()}>
+        <div
+          class="hk-ambient-layer"
+          data-pointer-events={props.pointerEvents}
+          role={props.label ? "region" : undefined}
+          aria-label={props.label}
+          style={{ zIndex: String(props.zIndex) }}
+        >
+          {slots.default?.()}
+        </div>
+      </Teleport>
+    );
+  },
+});

package/src/components/HkButton.test.tsx

@@ -201,7 +201,9 @@ describe("HkButton icon-only square contract", () => {
 // over the square width. Textual assertions because happy-dom does not
 // lay out.
 describe("HkButton icon-only SCSS contract", () => {
-  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8");
+  // autocrlf checkouts write CRLF to disk; normalize so the LF-joined
+  // selector anchor below matches what git stores regardless of platform.
+  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8").replace(/\r\n/g, "\n");
 
   it("self-declares the collapsed square geometry", () => {
     const rule = scss.match(/\.hk-btn-icon-only\s*{[^}]*}/)?.[0] ?? "";
@@ -310,7 +312,8 @@ describe("HkButton label prop + responsive collapse contract", () => {
 // useBreakpoint px scale (sm 640 / md 768 / lg 1024 / xl 1280), and must
 // land on the exact icon-only square width of its size.
 describe("HkButton label-collapse SCSS contract", () => {
-  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8");
+  // Normalized to LF (autocrlf checkouts) — see the icon-only contract above.
+  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8").replace(/\r\n/g, "\n");
 
   const breakpoints: Array<[string, string]> = [
     ["sm", "639.98px"],

package/src/components/HkJsonTree.contract.test.ts

@@ -13,7 +13,9 @@ import { fileURLToPath } from "node:url";
  * the normalization fixed.
  */
 const here = dirname(fileURLToPath(import.meta.url));
-const scss = readFileSync(join(here, "HkJsonTree.scss"), "utf-8");
+// autocrlf checkouts write CRLF to disk; normalize so the LF-joined
+// selector anchor below matches what git stores regardless of platform.
+const scss = readFileSync(join(here, "HkJsonTree.scss"), "utf-8").replace(/\r\n/g, "\n");
 
 describe("HkJsonTree spacing contract", () => {
   it("keeps the toggle exactly one spacing unit from the row text", () => {

package/src/components/HkModal.open-close-scale.test.ts

@@ -0,0 +1,150 @@
+/**
+ * Source contract for the DESKTOP modal open/close choreography (user
+ * direction 2026-11-04): the window grows by scaling the content itself
+ * about the frame's center — width pinned at 100% (scaleX 1), height
+ * scaling 90% → 100% — replacing the 2026-09-14 clip unveil (and the
+ * #508/#512/#524 lineage before it). The old "content rides rigidly,
+ * never squashed" invariant was DELIBERATELY dropped: the rigid ride is
+ * exactly what made the unveil read as dead weight on ordinary modals.
+ *
+ * Pinned on the stylesheet SOURCE (computed animation geometry is not
+ * observable in happy-dom), mirroring the sheetmorph / tokenHygiene
+ * guard pattern.
+ */
+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 src = readFileSync(join(here, "HkModal.scss"), "utf-8");
+
+/** The desktop choreography block — the mobile sheet block (≤767px)
+ *  carries its own enter/leave classes and must not leak in. */
+const desktop = src.slice(
+  src.indexOf("@media (min-width: 768px)"),
+  src.indexOf("@media (max-width: 767px)"),
+);
+
+/** The mobile sheet block — sliced the same way, for the parity guard. */
+const mobile = src.slice(src.indexOf("@media (max-width: 767px)"));
+
+/** Body of one rule (selector possibly grouped / multi-line). Line
+ * comments are stripped so prose in the sheet cannot satisfy or break
+ * a structural assertion. */
+function bodyOf(selector: string, scope: string = desktop): string {
+  const escaped = selector.replace(/\./g, "\\.");
+  const match = scope.match(new RegExp(`${escaped}[^{]*\\{([^}]*)\\}`));
+  expect(match, `rule ${selector} must exist in scope`).toBeTruthy();
+  return match![1]
+    .replace(/\/\/[^\n]*/g, "")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+const ENTER_LEAVE = [
+  ".hk-modal-content-enter-active",
+  ".hk-modal-content-leave-active",
+  ".hk-modal-content-enter-from",
+  ".hk-modal-content-enter-to",
+  ".hk-modal-content-leave-from",
+  ".hk-modal-content-leave-to",
+] as const;
+
+/** The centering translate: every transform state keeps it as the
+ * leading term, so the frame never re-seats mid-flight (dragged windows
+ * keep their shift through the animation). */
+const CENTERING =
+  /translate\(\s*calc\(-50% \+ var\(--hk-modal-shift-x, 0px\)\),\s*calc\(-50% \+ var\(--hk-modal-shift-y, 0px\)\)\s*\)/;
+
+describe("HkModal desktop content-scale open/close contract (user direction 2026-11-04)", () => {
+  it("scales the content from 90% height about the center on enter", () => {
+    const from = bodyOf(".hk-modal-content-enter-from");
+    expect(from).toMatch(CENTERING);
+    expect(from).toMatch(/scale\(1, 0\.9\)/);
+    // scaleX stays 1 — the width is pinned at 100% for the whole ride.
+    expect(from).not.toMatch(/scale\(0\.9\)/);
+    expect(from).toMatch(/opacity:\s*0/);
+  });
+
+  it("collapses back to 90% height on leave (the reveal's true reverse)", () => {
+    const to = bodyOf(".hk-modal-content-leave-to");
+    expect(to).toMatch(CENTERING);
+    expect(to).toMatch(/scale\(1, 0\.9\)/);
+    expect(to).toMatch(/opacity:\s*0/);
+    const from = bodyOf(".hk-modal-content-leave-from");
+    expect(from).toMatch(CENTERING);
+    expect(from).toMatch(/opacity:\s*1/);
+  });
+
+  it("rests at the identity transform (no scale, no offset) at both ends", () => {
+    const enterTo = bodyOf(".hk-modal-content-enter-to");
+    expect(enterTo).toMatch(CENTERING);
+    // The identity state carries NO trailing transform term — the
+    // scale-to-1 end of the interpolation is a bare translate, so the
+    // transform lists on both ends share one shape and interpolate
+    // continuously (the clip-era "pin the identity clip" workaround is
+    // structurally unnecessary now).
+    expect(enterTo).toMatch(new RegExp(`transform:\\s*${CENTERING.source};`));
+    expect(enterTo).not.toMatch(/scale\(|translate[XY]\(/);
+  });
+
+  it("anchors the scale at the frame's center for the whole ride", () => {
+    for (const active of [
+      ".hk-modal-content-enter-active",
+      ".hk-modal-content-leave-active",
+    ]) {
+      expect(bodyOf(active)).toMatch(/transform-origin:\s*50% 50%/);
+    }
+  });
+
+  it("retires the clip unveil: no clip-path and no Y drift in any open/close rule", () => {
+    // History: the 2026-09-14 unveil rode translateY(5%) + inset() clip
+    // (with the #508 identity-clip fix). The scale grammar replaces the
+    // whole mechanism — any reappearance is a regression to the retired
+    // choreography.
+    for (const rule of ENTER_LEAVE) {
+      const body = bodyOf(rule);
+      expect(body, `${rule} must not clip`).not.toMatch(/clip-path/);
+      expect(body, `${rule} must not drift`).not.toMatch(/translateY\(/);
+    }
+  });
+
+  it("keeps the ride animated on the timing tokens (never a snap)", () => {
+    // The retired close-collapse contract pinned "transitions clip-path
+    // on leave (the collapse animates, not snaps)"; its replacement must
+    // not be weaker on that axis. Deleting the transition blocks (or
+    // hardcoding their durations away from the family tokens) must turn
+    // this red — computed animation is unobservable in happy-dom, so
+    // this source pin is the only CI guard for "it animates at all".
+    const enter = bodyOf(".hk-modal-content-enter-active");
+    expect(enter).toMatch(
+      /opacity var\(--hk-modal-duration, 0\.42s\) var\(--hk-modal-ease-out, cubic-bezier\(0\.33, 1, 0\.68, 1\)\)/,
+    );
+    expect(enter).toMatch(
+      /transform var\(--hk-modal-duration, 0\.42s\) var\(--hk-modal-ease-out, cubic-bezier\(0\.33, 1, 0\.68, 1\)\)/,
+    );
+    expect(enter).not.toMatch(/clip-path/);
+
+    const leave = bodyOf(".hk-modal-content-leave-active");
+    expect(leave).toMatch(
+      /opacity var\(--hk-modal-duration, 0\.32s\) var\(--hk-modal-ease-in, cubic-bezier\(0\.45, 0, 0\.55, 1\)\)/,
+    );
+    expect(leave).toMatch(
+      /transform var\(--hk-modal-duration, 0\.32s\) var\(--hk-modal-ease-in, cubic-bezier\(0\.45, 0, 0\.55, 1\)\)/,
+    );
+    expect(leave).not.toMatch(/clip-path/);
+
+    for (const active of [
+      ".hk-modal-content-enter-active",
+      ".hk-modal-content-leave-active",
+    ]) {
+      expect(bodyOf(active)).toMatch(/will-change: transform, opacity/);
+    }
+  });
+
+  it("keeps the mobile sheet's translateY choreography untouched", () => {
+    const from = bodyOf(".hk-modal-content-enter-from", mobile);
+    expect(from).toMatch(/translateY\(100%\)/);
+  });
+});

package/src/components/HkModal.scss

@@ -97,56 +97,46 @@
 // ------
 // Content enter/leave transitions (desktop ≥768px)
 //
-// Height-style unveil WITHOUT layout: the visible box starts at 90% of
-// its height and grows to 100% while the frame settles from a +5% offset
-// back to rest (user spec 2026-09-14). Numbers line up so the character
-// of the old height-grow reveal is preserved exactly:
-//   t=0  box [center−0.45h, center+0.45h] shifted +0.05h, bottom 10%
-//        clipped → visible [center−0.40h, center+0.40h] (the old 80%
-//        centered start);
-//   t=1  clip 0, offset 0 → visible [center−0.50h, center+0.50h];
-//   the bottom edge is pinned at its final line the whole time and the
-//   top edge sweeps up 0.1h — content rides rigidly (never squashed).
-// Implemented with transform (translate) + clip-path (inset) + opacity:
-// all compositor/paint-level, zero layout per frame — the previous
-// height-keyword reveal re-laid-out the entire modal subtree every frame
-// and re-filtered the frame's own backdrop blur per frame (visible frame
-// drops on content-heavy modals, chest history topic detail). Scoped to
-// ≥768px; ≤767px keeps the sheet's translateY choreography below.
+// Content-scale reveal (user direction 2026-11-04): the frame grows by
+// SCALING the content itself about the frame's center — the width stays
+// pinned at 100% the whole time while the height scales from 90% up to
+// 100%. No clip-path and no Y offset ride the open/close any more: the
+// visible box IS the frame at every t, so nothing is ever sliced off
+// (the 2026-09-14 clip unveil — and the #508/#512/#524 lineage before
+// it — is superseded; the "content rides rigidly" invariant was the
+// very thing that made the old reveal read as dead weight on ordinary
+// modals). Implemented with transform (translate + uniform-axis scale)
+// + opacity: all compositor-level, zero layout per frame, and the
+// centering translate stays the leading term of EVERY transform state
+// so the frame never re-seats mid-flight (dragged windows keep their
+// shift). Scoped to ≥768px; ≤767px keeps the sheet's translateY
+// choreography below.
 // ------
 
 @media (min-width: 768px) {
   .hk-modal-content-enter-active {
+    // The scale anchors at the frame's center: the window expands from
+    // the middle outward on the Y axis only (X is pinned by scaleX 1).
+    transform-origin: 50% 50%;
     transition:
       opacity var(--hk-modal-duration, 0.42s)
         var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1)),
       transform var(--hk-modal-duration, 0.42s)
-        var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1)),
-      clip-path var(--hk-modal-duration, 0.42s)
         var(--hk-modal-ease-out, cubic-bezier(0.33, 1, 0.68, 1));
-    will-change: transform, opacity, clip-path;
+    will-change: transform, opacity;
   }
 
-  // Close: the unveil's TRUE reverse — the visible box collapses back
-  // toward the center (top edge sweeps down, bottom edge sweeps up,
-  // content rides rigidly — never squashed) while the frame fades
-  // (user report 2026-09-15: the fade+drift close read as the box
-  // shrinking straight down instead of folding back into its center).
-  // The earlier re-clip attempt (#508) broke because leave-from had no
-  // clip at all: interpolating `none → inset()` is DISCRETE, so the
-  // bottom band (the footer) vanished at the first frame. Pinning the
-  // identity clip in leave-from — byte-identical to enter-to — makes
-  // the same-shape insets interpolate continuously, which structurally
-  // rules that jump out while restoring the symmetric collapse.
+  // Close: the reveal's TRUE reverse — the frame scales back down to
+  // 90% height about its center (both vertical edges ease toward the
+  // center line) while fading out.
   .hk-modal-content-leave-active {
+    transform-origin: 50% 50%;
     transition:
       opacity var(--hk-modal-duration, 0.32s)
         var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1)),
       transform var(--hk-modal-duration, 0.32s)
-        var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1)),
-      clip-path var(--hk-modal-duration, 0.32s)
         var(--hk-modal-ease-in, cubic-bezier(0.45, 0, 0.55, 1));
-    will-change: transform, opacity, clip-path;
+    will-change: transform, opacity;
   }
 
   .hk-modal-content-enter-from {
@@ -155,9 +145,7 @@
           calc(-50% + var(--hk-modal-shift-x, 0px)),
           calc(-50% + var(--hk-modal-shift-y, 0px))
         )
-        translateY(5%);
-    clip-path: inset(0 0 10% 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
-                                 var(--hk-modal-radius, var(--radius-lg, 12px)));
+        scale(1, 0.9);
   }
 
   .hk-modal-content-enter-to {
@@ -166,8 +154,6 @@
           calc(-50% + var(--hk-modal-shift-x, 0px)),
           calc(-50% + var(--hk-modal-shift-y, 0px))
         );
-    clip-path: inset(0 0 0 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
-                              var(--hk-modal-radius, var(--radius-lg, 12px)));
   }
 
   .hk-modal-content-leave-from {
@@ -176,24 +162,20 @@
           calc(-50% + var(--hk-modal-shift-x, 0px)),
           calc(-50% + var(--hk-modal-shift-y, 0px))
         );
-    // The pinned identity clip: identical to enter-to so the leave's
-    // clip interpolates (never jumps) — see the close note above.
-    clip-path: inset(0 0 0 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
-                              var(--hk-modal-radius, var(--radius-lg, 12px)));
   }
 
   .hk-modal-content-leave-to {
     opacity: 0;
-    // Mirror of enter-from: shifted +5% with the bottom 10% clipped, the
-    // visible box is 90% and centered — both edges ease toward the
-    // center line, exactly reversing the unveil.
+    // Mirror of enter-from. No identity pin is needed any more: CSS
+    // transform-list interpolation pads the shorter list with identity
+    // scale(1, 1), so translate()+scale(1, 0.9) ↔ bare translate()
+    // interpolates continuously (unlike `none → inset()` clips, which
+    // are DISCRETE — the #508 lesson does not apply to transforms).
     transform: translate(
           calc(-50% + var(--hk-modal-shift-x, 0px)),
           calc(-50% + var(--hk-modal-shift-y, 0px))
         )
-        translateY(5%);
-    clip-path: inset(0 0 10% 0 round 0 0 var(--hk-modal-radius, var(--radius-lg, 12px))
-                                 var(--hk-modal-radius, var(--radius-lg, 12px)));
+        scale(1, 0.9);
   }
 }
 

package/src/components/HkModal.tsx

@@ -588,7 +588,7 @@ export default defineComponent({
           // Flush the growth deferred through the unfold. One tick later
           // the transition classes are off the frame, so the base height
           // transition animates the pin change instead of the enter's
-          // transform/clip-only transition list swallowing it as a snap.
+          // opacity/transform-only transition list swallowing it as a snap.
           void nextTick(() => {
             if (machine.phase.value === "open") morph.remeasure();
           });

package/src/components/HkScreenIdentify.barrel.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+
+import * as barrel from "../index";
+import { asIndexable } from "../utils/typing";
+
+/**
+ * Public barrel guard for the screen-identify family (R3 precedent: a
+ * forgotten index.ts line keeps the whole suite green because every
+ * other test reaches the module directly — only external consumers
+ * notice). Same shape as HkFaceShell.barrel.test.ts.
+ *
+ * This file deliberately does NOT mock "@celestia-island/hikari": the
+ * package's self-reference resolves to the very same src/index.ts module
+ * as "../index".
+ */
+describe("the screen-identify family in the public barrel", () => {
+  it("exports the card and the once-per-window host under both names", () => {
+    const card = asIndexable(barrel.HkScreenIdentifyCard);
+    const host = asIndexable(barrel.HkScreenIdentifyHost);
+    expect(card, "HkScreenIdentifyCard must be re-exported").toBeTruthy();
+    expect(card.name).toBe("HkScreenIdentifyCard");
+    expect(host.name).toBe("HkScreenIdentifyHost");
+    // The H- alias rides the HCard/HkCard family convention.
+    expect(barrel.HScreenIdentifyCard).toBe(barrel.HkScreenIdentifyCard);
+    expect(barrel.HScreenIdentifyHost).toBe(barrel.HkScreenIdentifyHost);
+  });
+
+  it("exports the ambient HUD layer primitive and its root", () => {
+    const layer = asIndexable(barrel.HkAmbientLayer);
+    expect(layer.name).toBe("HkAmbientLayer");
+    expect(barrel.HAmbientLayer).toBe(barrel.HkAmbientLayer);
+    expect(typeof barrel.ensureHudRoot).toBe("function");
+    expect(barrel.HUD_ROOT_SELECTOR).toBe("#hk-hud-root");
+    expect(barrel.HUD_ROOT_DOCUMENT_Z).toBe(90050);
+  });
+
+  it("exports the context that drives the card", () => {
+    expect(typeof barrel.useScreenIdentify).toBe("function");
+    expect(typeof barrel.showScreenIdentify).toBe("function");
+    expect(typeof barrel.dismissScreenIdentify).toBe("function");
+    expect(barrel.SCREEN_IDENTIFY_DEFAULT_MS).toBe(3000);
+    // The context accessor hands out live refs and the two verbs.
+    const identify = barrel.useScreenIdentify();
+    expect(identify.active.value).toBe(false);
+    expect(typeof identify.show).toBe("function");
+    expect(typeof identify.dismiss).toBe("function");
+  });
+});