@celestia-island/hikari 0.55.239 → 0.55.241

package/src/components/HkFaceShell.rail.test.tsx

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { createApp, defineComponent, h, ref } from "vue";
+import { createApp, defineComponent, h, ref, type VNode } from "vue";
 
 // Same stub shape as HkFaceShell.test.tsx: HDrawer teleports and
 // animates; the desktop rail contract is testable without the overlay
@@ -33,6 +33,7 @@ vi.mock("@celestia-island/hikari", async (importOriginal) => {
 
 import { HkFaceShell } from "./HkFaceShell";
 import { HkAdminShell } from "./HkAdminShell";
+import HkMenu, { type HkMenuItem } from "./HkMenu";
 
 /**
  * HkFaceShell desktop rail + peek integration (2026-10-30). What this
@@ -75,11 +76,19 @@ interface RailMount {
   main(): HTMLElement;
   toggle(): HTMLButtonElement;
   slotParams: SlotParams[];
+  headerParams: Array<Record<string, unknown>>;
+  /** Open the mobile nav drawer through the header's onOpenDrawer (the
+   *  sanctioned host channel — the hamburger lives in the header slot). */
+  openDrawer(): void;
   emitted: string[];
 }
 
-function mountShell(props: Record<string, unknown> = {}): RailMount {
+function mountShell(
+  props: Record<string, unknown> = {},
+  sidebarSlot?: (params: SlotParams) => VNode,
+): RailMount {
   const slotParams: SlotParams[] = [];
+  const headerParams: Array<Record<string, unknown>> = [];
   const emitted: string[] = [];
   const container = document.createElement("div");
   document.body.appendChild(container);
@@ -100,10 +109,13 @@ function mountShell(props: Record<string, unknown> = {}): RailMount {
             railStyle.value = v as "expanded" | "rail";
           },
         }, {
-          header: () => null,
+          header: (params: Record<string, unknown>) => {
+            headerParams.push(params);
+            return null;
+          },
           sidebar: (params: SlotParams) => {
             slotParams.push(params);
-            return h("div", { class: "sidebar-mock" }, "NAV");
+            return sidebarSlot?.(params) ?? h("div", { class: "sidebar-mock" }, "NAV");
           },
           content: () => h("div", { class: "content-mock" }, "CONTENT"),
         });
@@ -121,6 +133,8 @@ function mountShell(props: Record<string, unknown> = {}): RailMount {
     toggle: () =>
       container.querySelector(".hk-sidebar-rail-toggle button") as HTMLButtonElement,
     slotParams,
+    headerParams,
+    openDrawer: () => (headerParams[headerParams.length - 1]!.onOpenDrawer as () => void)(),
     emitted,
   };
 }
@@ -130,6 +144,11 @@ afterEach(() => {
     app.unmount();
     container.remove();
   }
+  // HkMenu's rail rows ride HkTooltip (teleported to the overlay root).
+  document.querySelectorAll("#hk-overlay-root, .hk-tooltip-popup").forEach((n) => n.remove());
+  // The drawer-path tests below resize the window to the mobile side;
+  // every other case here assumes the desktop width.
+  window.innerWidth = 1024;
   vi.useRealTimers();
 });
 
@@ -611,3 +630,265 @@ describe("HkFaceShell hover suppression: a pointer on the toggle never peeks", (
     expect(c.aside().hasAttribute("data-pinning"), "the peek pin is a rail -> expanded flip").toBe(true);
   });
 });
+
+/**
+ * The menu group fold vs the swap's GENERATIONS (#43, known-live-issues).
+ *
+ * HkSidebarRailSwap mounts each density as a FRESH generation — the
+ * tab-panel contract — so an HkMenu inside the sidebar slot is a NEW
+ * component instance in every generation. HkMenu's own docs still promise
+ * "a group collapsed in the rail is still collapsed after a peek/expand
+ * (and vice versa)"; 0.55.239 broke that promise by keeping the fold in
+ * instance-local refs, measured on chest (same chest source: 2 rows /
+ * aria-expanded=false on 0.55.236, 5 rows / true on 0.55.239).
+ *
+ * The fix is a stable fold store provided ABOVE the swap: every
+ * generation injects the same instance, so the user's word survives an
+ * arbitrary number of remounts. These are the tests that go red when the
+ * store stops being provided above the swap (or HkMenu stops reading it).
+ */
+const GROUP_ITEMS: HkMenuItem[] = [
+  { key: "home", label: "Home" },
+  {
+    key: "admin",
+    label: "Administration",
+    children: [
+      { key: "users", label: "Users" },
+      { key: "audit", label: "Audit log" },
+    ],
+  },
+];
+
+/** The ACTIVE generation, selected by the key it renders under: the
+ *  leaving copy is frozen at its last render (it still shows the OLD
+ *  fold), so asserting against it would pass for the wrong reason. */
+function generation(container: HTMLElement, key: "rail" | "full"): HTMLElement {
+  const gen = container.querySelector<HTMLElement>(
+    `.hk-crossfade-item[data-crossfade-key="${key}"]`,
+  );
+  expect(gen, `the ${key} generation renders`).toBeTruthy();
+  return gen!;
+}
+
+/** The group header inside a generation — the rail and full forms share
+ *  the same class + aria-expanded contract. */
+function groupToggle(root: HTMLElement): HTMLButtonElement {
+  const row = root.querySelector<HTMLButtonElement>("button.hk-menu-sidebar-group-toggle");
+  expect(row, "the menu's group header renders").toBeTruthy();
+  return row!;
+}
+
+/** Let a dissolve settle (past HkCrossfade's 450ms watchdog), then hand
+ *  back the generation that should now be the only live one. */
+async function settle(container: HTMLElement, key: "rail" | "full"): Promise<HTMLElement> {
+  await vi.advanceTimersByTimeAsync(600);
+  return generation(container, key);
+}
+
+describe("rail group fold survives the crossfade generations (#43)", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  it("keeps a group collapsed in the rail through a peek AND a full expand", async () => {
+    const c = mountShell({ sidebarCollapsible: true }, () =>
+      h(HkMenu, {
+        variant: "sidebar",
+        items: GROUP_ITEMS,
+        open: false,
+        defaultExpandGroups: true,
+      }),
+    );
+    c.toggle().click();
+    await vi.advanceTimersByTimeAsync(0);
+
+    const railGen = await settle(c.container, "rail");
+    expect(
+      groupToggle(railGen).getAttribute("aria-expanded"),
+      "table-of-contents default: every group starts open",
+    ).toBe("true");
+    groupToggle(railGen).click();
+    await vi.advanceTimersByTimeAsync(0);
+    expect(groupToggle(railGen).getAttribute("aria-expanded")).toBe("false");
+    expect(railGen.textContent, "the closed group lists no children").not.toContain("Audit log");
+
+    // Peek: the slot is handed FULL rows again — a brand-new HkMenu.
+    c.aside().dispatchEvent(POINTER_ENTER());
+    await vi.advanceTimersByTimeAsync(400);
+    const peekGen = await settle(c.container, "full");
+    expect(c.aside().hasAttribute("data-peeking"), "the peek is open").toBe(true);
+    expect(
+      groupToggle(peekGen).getAttribute("aria-expanded"),
+      "the fold crosses into the peek's fresh generation",
+    ).toBe("false");
+    expect(peekGen.textContent, "and the peek lists no children either").not.toContain("Audit log");
+
+    // Leave -> grace -> the rail generation mounts a THIRD time, closed.
+    c.aside().dispatchEvent(POINTER_LEAVE());
+    await vi.advanceTimersByTimeAsync(150);
+    const backGen = await settle(c.container, "rail");
+    expect(c.aside().hasAttribute("data-peeking")).toBe(false);
+    expect(
+      groupToggle(backGen).getAttribute("aria-expanded"),
+      "the fold survives the return leg too",
+    ).toBe("false");
+
+    // A full EXPAND (not a peek) reads the same fold.
+    c.toggle().click();
+    await vi.advanceTimersByTimeAsync(0);
+    const expandedGen = await settle(c.container, "full");
+    expect(
+      groupToggle(expandedGen).getAttribute("aria-expanded"),
+      "and the expanded sidebar inherits it",
+    ).toBe("false");
+  });
+
+  it("does not let the active row's auto-expansion resurrect a rail-collapsed group", async () => {
+    // The chest shape: the group holding the active row auto-opens on every
+    // FRESH mount (the auto seed), which is exactly what brought the
+    // collapsed group back. The user's word must outrank the re-seed.
+    const c = mountShell({ sidebarCollapsible: true }, () =>
+      h(HkMenu, {
+        variant: "sidebar",
+        items: GROUP_ITEMS,
+        open: false,
+        activeKey: "users",
+      }),
+    );
+    c.toggle().click();
+    await vi.advanceTimersByTimeAsync(0);
+
+    const railGen = await settle(c.container, "rail");
+    expect(
+      groupToggle(railGen).getAttribute("aria-expanded"),
+      "the active row auto-opens its group",
+    ).toBe("true");
+    groupToggle(railGen).click();
+    await vi.advanceTimersByTimeAsync(0);
+    expect(groupToggle(railGen).getAttribute("aria-expanded")).toBe("false");
+
+    c.aside().dispatchEvent(POINTER_ENTER());
+    await vi.advanceTimersByTimeAsync(400);
+    const peekGen = await settle(c.container, "full");
+    expect(
+      groupToggle(peekGen).getAttribute("aria-expanded"),
+      "the fresh generation re-seeds its auto set but keeps the user's word",
+    ).toBe("false");
+  });
+
+  it("shows NO expanded flash mid-dissolve, and never patches the leaving copy", async () => {
+    // MEASURED contract, not an inference. happy-dom completes a CSS
+    // transition with no duration instantly, so the leaving copy would be
+    // gone before it could be inspected; freezing rAF holds the leave open
+    // exactly the way a real browser holds it for --duration-normal (the
+    // same technique the swap test above uses).
+    const c = mountShell({ sidebarCollapsible: true }, () =>
+      h(HkMenu, {
+        variant: "sidebar",
+        items: GROUP_ITEMS,
+        open: false,
+        defaultExpandGroups: true,
+      }),
+    );
+    c.toggle().click();
+    await vi.advanceTimersByTimeAsync(0);
+    const railGen = await settle(c.container, "rail");
+    groupToggle(railGen).click();
+    await vi.advanceTimersByTimeAsync(0);
+    expect(groupToggle(railGen).getAttribute("aria-expanded")).toBe("false");
+
+    vi.stubGlobal("requestAnimationFrame", () => 0);
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+    c.aside().dispatchEvent(POINTER_ENTER());
+    await vi.advanceTimersByTimeAsync(400);
+
+    const copiesNow = () => Array.from(c.container.querySelectorAll<HTMLElement>(".hk-crossfade-item"));
+    expect(
+      copiesNow().map((el) => el.dataset.crossfadeKey),
+      "both generations share the swap cell during the dissolve",
+    ).toEqual(["rail", "full"]);
+    expect(
+      copiesNow().map((el) => groupToggle(el).getAttribute("aria-expanded")),
+      "neither copy shows the group re-opened",
+    ).toEqual(["false", "false"]);
+
+    // Now write the shared store DURING the dissolve (a toggle in the live
+    // copy). The live copy re-renders; the leaving one keeps the DOM of its
+    // last render — the frozen copy is out of the patch path, which is what
+    // makes the dissolve safe. Reading the frozen copy after the write is
+    // the measurement of that claim.
+    const live = copiesNow()[1]!;
+    groupToggle(live).click();
+    await vi.advanceTimersByTimeAsync(0);
+    const afterWrite = copiesNow().map((el) => ({
+      key: el.dataset.crossfadeKey,
+      expanded: groupToggle(el).getAttribute("aria-expanded"),
+    }));
+    expect(afterWrite).toEqual([
+      { key: "rail", expanded: "false" },
+      { key: "full", expanded: "true" },
+    ]);
+    vi.unstubAllGlobals();
+
+    // The open group is the shared word: the next rail generation after the
+    // peek closes shows it open (nothing was silently reverted mid-swap).
+    c.aside().dispatchEvent(POINTER_LEAVE());
+    await vi.advanceTimersByTimeAsync(150);
+    const backGen = await settle(c.container, "rail");
+    expect(groupToggle(backGen).getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("shares the fold with the mobile drawer's menu (the provide sits above BOTH slots)", async () => {
+    // The rail is not the only slot consumer: under the breakpoint the same
+    // sidebar slot renders inside the drawer. The store is provided from
+    // HkFaceShell's own setup, so the drawer's fresh HkMenu instance must
+    // read the desktop rail's fold too — otherwise the rail would be fixed
+    // while mobile silently loses it. (provide/inject follows the component
+    // tree, so the real HDrawer's teleport does not change the provider —
+    // this stub renders inline and still pins the channel.)
+    const c = mountShell({ sidebarCollapsible: true }, () =>
+      h(HkMenu, {
+        variant: "sidebar",
+        items: GROUP_ITEMS,
+        open: false,
+        defaultExpandGroups: true,
+      }),
+    );
+    c.toggle().click();
+    await vi.advanceTimersByTimeAsync(0);
+    const railGen = await settle(c.container, "rail");
+    groupToggle(railGen).click();
+    await vi.advanceTimersByTimeAsync(0);
+    expect(groupToggle(railGen).getAttribute("aria-expanded"), "collapsed in the rail").toBe("false");
+
+    // Phone width: the desktop sidebar unmounts, the drawer becomes the nav.
+    window.innerWidth = 800;
+    window.dispatchEvent(new Event("resize"));
+    await vi.advanceTimersByTimeAsync(0);
+    expect(c.aside(), "no desktop rail under the breakpoint").toBeFalsy();
+
+    c.openDrawer();
+    await vi.advanceTimersByTimeAsync(0);
+    const drawerBody = c.container.querySelector(".drawer-stub-body") as HTMLElement;
+    expect(drawerBody, "the drawer renders the sidebar slot").toBeTruthy();
+    expect(
+      groupToggle(drawerBody).getAttribute("aria-expanded"),
+      "the drawer's menu reads the SAME fold",
+    ).toBe("false");
+
+    // And the other direction: opening it in the drawer is what the desktop
+    // sidebar shows when the window grows back.
+    groupToggle(drawerBody).click();
+    await vi.advanceTimersByTimeAsync(0);
+    expect(groupToggle(drawerBody).getAttribute("aria-expanded")).toBe("true");
+
+    window.innerWidth = 1024;
+    window.dispatchEvent(new Event("resize"));
+    await vi.advanceTimersByTimeAsync(0);
+    const desktopGen = await settle(c.container, "rail");
+    expect(
+      groupToggle(desktopGen).getAttribute("aria-expanded"),
+      "the rail inherits the drawer's word",
+    ).toBe("true");
+  });
+});

package/src/components/HkFaceShell.tsx

@@ -2,6 +2,7 @@ import { computed, defineComponent, ref, watch, type PropType } from "vue";
 import { HkCrossfade, HDrawer, HScrollContainer, useBreakpoint } from "@celestia-island/hikari";
 import { useI18n } from "../i18n/context";
 import { useSidebarRail } from "../composables/useSidebarRail";
+import { provideMenuGroupState } from "../composables/useMenuGroupState";
 import HkSidebarRailSwap from "./HkSidebarRailSwap";
 import HkSidebarRailToggle, { isPointerOverRailToggle } from "./HkSidebarRailToggle";
 
@@ -280,6 +281,19 @@ export const HkFaceShell = defineComponent({
     const isDesktop = computed(() => viewportWidth.value >= props.mobileBreakpoint);
     const sidebarOpen = ref(false);
 
+    // ── sidebar menu GROUP fold, stable across the rail crossfade ─────
+    // The rail swap mounts each density as a FRESH generation, so an
+    // HkMenu in the sidebar slot is a new instance per generation and its
+    // instance-local group fold would be lost on every flip (a group
+    // collapsed in the rail came back expanded after a peek/expand —
+    // known-live-issues #43). Providing the fold store HERE — one level
+    // above the swap — makes every generation inject the SAME instance,
+    // so the user's word survives the remounts without a new prop and
+    // without any host-side change. Unconditional: the store is inert
+    // until an HkMenu reads it, and the mobile drawer's slot must see the
+    // same one as the desktop sidebar.
+    provideMenuGroupState();
+
     // ── desktop icon rail + hover peek (sidebarCollapsible) ──────────
     // SEMI-CONTROLLED rail state: a local session-only ref is the live
     // state, so the toggle works with NO channel bound at all (the

package/src/components/HkImageLightbox.scss

@@ -17,6 +17,8 @@
 // every wheel/pointer gesture dead because their surface had no area).
 // ------
 
+@use "../styles/polyfill" as *;
+
 .hk-modal-content.hk-image-lightbox {
   width: min(96vw, 80rem);
   height: min(90vh, 56rem);
@@ -101,7 +103,7 @@
   top: var(--space-12, 0.75rem);
   right: var(--space-12, 0.75rem);
   z-index: 2;
-  backdrop-filter: blur(6px);
+  @include backdrop-filter(blur(6px));
 
   &:hover,
   &:focus-visible {

package/src/components/HkImageViewer.scss

@@ -1,3 +1,5 @@
+@use "../styles/polyfill" as *;
+
 .hk-image-viewer {
   position: relative;
   width: 100%;
@@ -7,7 +9,7 @@
   background: rgb(0 0 0 / 45%);
   border-radius: var(--radius-sm);
   touch-action: none;
-  user-select: none;
+  @include user-select(none);
 }
 
 // The transform glide sits behind the .is-animatable gate the component

package/src/components/HkJsonTree.scss

@@ -5,6 +5,7 @@
 
 // Use theme variables with namespace to avoid conflicts
 @use "./hikari-vars" as vars;
+@use "../styles/polyfill" as *;
 
 .s-tool-json-tree {
   --jt-toggle: 14px;
@@ -16,7 +17,7 @@
   background: rgb(var(--color-surface) / 0.5);
   border-radius: var(--radius-sm, 4px);
   border: 1px solid var(--border-faint, rgb(var(--color-border) / 10%));
-  user-select: none;
+  @include user-select(none);
   max-height: 320px;
   overflow: auto;
 
@@ -48,8 +49,7 @@
   /* Tree rows are content — values users copy out of a payload — while
    * the pane chrome above stays denied (L2 selection policy, 2026-10-29;
    * the copy-tree affordance remains the bulk path). */
-  -webkit-user-select: text;
-  user-select: text;
+  @include user-select(text);
   /* Baseline alignment keeps the small type hints (boolean/number/string)
      on the value's text baseline instead of floating above it. */
   display: flex;

package/src/components/HkLoadingVeil.scss

@@ -2,6 +2,9 @@
 // The z-index sits above the toast band (--hk-z-toast) so the veil is
 // the topmost painted surface while active; pointer-events: all on the
 // root swallows every interaction beneath (the blocking contract).
+
+@use "../styles/polyfill" as *;
+
 .hk-loading-veil {
   position: fixed;
   inset: 0;
@@ -12,8 +15,7 @@
   // Semi-transparent backdrop with a slight blur: the page beneath
   // stays readable (orientation) but clearly inactive.
   background: rgb(var(--color-background, 255 255 255) / 0.55);
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
+  @include backdrop-filter(blur(6px));
   pointer-events: all;
   animation: hk-loading-veil-in 150ms ease-out;
 

package/src/components/HkLogWindow.scss

@@ -1,5 +1,6 @@
 // Use theme variables with namespace to avoid conflicts
 @use "./hikari-vars" as vars;
+@use "../styles/polyfill" as *;
 
 .s-log-viewer {
   display: flex;
@@ -121,8 +122,7 @@
    * select per-fragment, not just via the toolbar copy-all) — re-enable
    * under the L2 selection policy (2026-10-29); the toolbar chrome
    * around them stays denied. */
-  -webkit-user-select: text;
-  user-select: text;
+  @include user-select(text);
   padding: var(--space-2, 0.125rem) var(--space-4, 0.25rem);
   font-family: var(--font-mono, vars.$hikari-font-family-mono);
   font-size: var(--text-xs, 0.75rem);

package/src/components/HkLogo.scss

@@ -1,3 +1,5 @@
+@use "../styles/polyfill" as *;
+
 .hk-logo {
   display: inline-flex;
   align-items: center;
@@ -6,7 +8,7 @@
   border-radius: var(--radius-md, 8px);
   overflow: hidden;
   flex-shrink: 0;
-  user-select: none;
+  @include user-select(none);
 }
 
 a.hk-logo {

package/src/components/HkMarkdownRenderer.scss

@@ -1,12 +1,12 @@
 // Use theme variables with namespace to avoid conflicts
 @use "./hikari-vars" as vars;
+@use "../styles/polyfill" as *;
 
 .hk-markdown {
   /* Rendered prose is content by definition — the whole subtree selects
    * again under the L2 selection policy (2026-10-29); its code blocks
    * are covered twice over (whitelist tier 3). */
-  -webkit-user-select: text;
-  user-select: text;
+  @include user-select(text);
   font-size: var(--text-base);
   line-height: 1.7;
   color: var(--hi-color-text-primary, #1e1e1e);
@@ -204,6 +204,6 @@
   align-items: center;
   justify-content: center;
   background: color-mix(in srgb, var(--hi-color-surface, #ffffff) 70%, transparent);
-  backdrop-filter: blur(4px);
+  @include backdrop-filter(blur(4px));
   z-index: 10;
 }

package/src/components/HkMediaControlBar.scss

@@ -1,10 +1,12 @@
+@use "../styles/polyfill" as *;
+
 .hk-media-controls {
   display: flex;
   align-items: center;
   gap: var(--space-8);
   padding: var(--space-6) var(--space-10);
   background: rgb(var(--color-surface) / 0.85);
-  backdrop-filter: blur(var(--blur-sm));
+  @include backdrop-filter(blur(var(--blur-sm)));
   border-top: 1px solid var(--border-faint);
   color: rgb(var(--color-text));
 }
@@ -34,7 +36,7 @@
   font-variant-numeric: tabular-nums;
   color: rgb(var(--color-muted));
   white-space: nowrap;
-  user-select: none;
+  @include user-select(none);
 }
 
 .hk-media-volume {

package/src/components/HkMediaSlider.scss

@@ -1,3 +1,5 @@
+@use "../styles/polyfill" as *;
+
 .hk-media-slider {
   position: relative;
   height: 6px;
@@ -5,7 +7,7 @@
   background: rgb(var(--color-muted) / 22%);
   cursor: pointer;
   touch-action: none;
-  user-select: none;
+  @include user-select(none);
 }
 
 .hk-media-slider[data-size="sm"] {

package/src/components/HkMenu.rail.test.tsx

@@ -250,6 +250,35 @@ describe("HkMenu sidebar icon rail", () => {
     expect(groupRows(c)[0]!.getAttribute("aria-expanded")).toBe("false");
   });
 
+  it("keeps the fold INSTANCE-LOCAL when no shell provides one (standalone menus)", async () => {
+    // The other half of the #43 contract. HkFaceShell provides the fold
+    // store above its rail crossfade so a swap's fresh generations share
+    // it; a standalone menu has no shell above it and must keep the
+    // instance-local sets it has always had. A module-level singleton
+    // store would silently make two menus on one page share fold keys —
+    // that regression is what this pin catches.
+    const a = mountMenu(ITEMS, { collapsed: true });
+    const b = mountMenu(ITEMS, { collapsed: true });
+    expect(groupRows(a)[0]!.getAttribute("aria-expanded")).toBe("false");
+    expect(groupRows(b)[0]!.getAttribute("aria-expanded")).toBe("false");
+
+    groupRows(a)[0]!.click();
+    await nextTick();
+    expect(groupRows(a)[0]!.getAttribute("aria-expanded"), "menu A opens its group").toBe("true");
+    expect(
+      groupRows(b)[0]!.getAttribute("aria-expanded"),
+      "menu B keeps its own fold — nothing is shared without a provider",
+    ).toBe("false");
+
+    // And the standalone flip-in-place contract still holds: the rail and
+    // the expanded sidebar are the SAME instance here, so the fold carries
+    // exactly as it did before the shared store existed.
+    groupRows(b)[0]!.click();
+    await nextTick();
+    expect(groupRows(b)[0]!.getAttribute("aria-expanded")).toBe("true");
+    expect(groupRows(a)[0]!.getAttribute("aria-expanded"), "A is still open, B now open").toBe("true");
+  });
+
   it("recurses into nested groups — 2nd/3rd-level destinations stay reachable", async () => {
     const nested: HkMenuItem[] = [
       {