@celestia-island/hikari 0.55.204 → 0.55.205

package/package.json

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

package/src/components/HkAdminHeader.tsx

@@ -20,6 +20,14 @@ export const HkAdminHeader = defineComponent({
     title: { type: String, default: "" },
     showHamburger: { type: Boolean, default: false },
     compact: { type: Boolean, default: false },
+    /** Desktop shell face whose header IS the window title bar (Tauri
+     *  decorations:false): pass true iff the header renders the
+     *  HkWindowControls cluster, so the right inset follows the
+     *  window-controls chrome contract (.s-glass-header--chrome /
+     *  --hk-window-controls-edge-inset) instead of the content inset —
+     *  a standard-mode cluster glued to the frame corner is the flush
+     *  variant's look worn by the wrong mode (field report 2026-10-25). */
+    chrome: { type: Boolean, default: false },
     actions: { type: Array as PropType<VNode[]>, default: () => [] },
     /** Signed-in identity. Drives the avatar fallback letter, the
      *  dropdown identity block and the pending-state branch — it is
@@ -192,6 +200,7 @@ export const HkAdminHeader = defineComponent({
           "s-glass-header",
           "s-balanced-header",
           props.compact ? "s-glass-header--compact" : "",
+          props.chrome ? "s-glass-header--chrome" : "",
         ]}
       >
         <div ref={userTriggerRef} class="s-admin-header-user s-header-wing-start">

package/src/components/HkWindowControls.scss

@@ -3,7 +3,12 @@
 // standard: borderless ghost buttons at the header chrome's own size
 // step (2rem boxes, 16px glyphs, 0.375rem gaps) — no borders, no
 // dividers, no container chrome; the close hover is a small rounded
-// red wash. Reads as one family with gear/search icon buttons.
+// red wash. Reads as one family with gear/search icon buttons. The
+// HOST keeps the canonical right edge inset
+// (--hk-window-controls-edge-inset, declared in styles/admin-tokens)
+// — a standard cluster never rides the frame; gluing it to the corner
+// is the flush mode's look worn by the wrong mode (field report
+// 2026-10-25: the chest login strip had no right padding at all).
 //
 // flush: edge-riding squares for thin captions — the host zeroes its
 // own right padding (the s-header-bar--chrome contract pattern); the

package/src/components/HkWindowControls.tsx

@@ -15,6 +15,17 @@ import "./HkWindowControls.scss";
  *   with comfortable gaps. The whole top-right reads as one family of
  *   identical buttons; the close hover is a small rounded red wash.
  *   THE mode for content-height headers (3rem-class bars).
+ *   HOST CONTRACT: this mode never rides the window edge (that is the
+ *   flush variant's job) — the host keeps the canonical inset
+ *   `var(--hk-window-controls-edge-inset)` (≤1023px:
+ *   `--hk-window-controls-edge-inset-compact`) between the cluster
+ *   and the frame — token values live once in styles/admin-tokens,
+ *   not restated here. A standard cluster glued to the frame corner
+ *   is the wrong mode's look (field report 2026-10-25: the chest
+ *   login strip rendered with no end padding at all);
+ *   `.s-glass-header--chrome` is the in-library implementation of the
+ *   contract for admin headers, and the chat face sources its
+ *   `--chrome` padding from the same tokens.
  *
  * - `flush` — edge-riding squares that fill the host's height (the
  *   host must zero its own right padding so the close button rides

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

@@ -0,0 +1,125 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+/**
+ * Static pins for the window-controls chrome-edge contract (field report
+ * 2026-10-25: the chest login strip rendered the standard HkWindowControls
+ * cluster glued to the frame corner — zero right padding — while the chat
+ * face had ruled the inset to 12px/8px and the console face kept a full
+ * 24px of dead air; three faces, three ad-hoc computations of the same
+ * number). happy-dom has no layout engine, so — adminHeaderChrome-style —
+ * these read the declarations themselves; reverting any pinned value keeps
+ * the rest of the suite green, so each pin below is the only red-if-broken
+ * evidence for its contract. A deliberate rewrite is expected to update
+ * them.
+ *
+ * Pinned here:
+ *   1. the canonical tokens exist at :root (admin-tokens.scss top level —
+ *      a nested declaration would not reach host headers);
+ *   2. .s-glass-header--chrome sources BOTH bands from the tokens (the
+ *      in-library implementation of the host contract);
+ *   3. HkAdminHeader actually hangs the class from the `chrome` prop
+ *      (the prop without the class, or vice versa, ships the 24px inset);
+ *   4. the standard-mode HOST CONTRACT is documented on HkWindowControls
+ *      (the doc is the contract's prose home — keep it in sync).
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+const adminTokens = readFileSync(join(here, "..", "styles", "admin-tokens.scss"), "utf8");
+const adminHeader = readFileSync(join(here, "HkAdminHeader.tsx"), "utf8");
+const windowControls = readFileSync(join(here, "HkWindowControls.tsx"), "utf8");
+
+/** Brace depth of `code` at character index `at` (0 = top level). */
+function braceDepthAt(code: string, at: number): number {
+  let depth = 0;
+  for (let i = 0; i < at; i += 1) {
+    if (code[i] === "{") depth += 1;
+    else if (code[i] === "}") depth -= 1;
+  }
+  return depth;
+}
+
+/** Declarations of every rule whose prelude IS `selector` (whole-prelude
+ *  match, comments stripped), with whether it sits inside an at-block. */
+function allRuleDeclarations(
+  source: string,
+  selector: string,
+): Array<{ nested: boolean; decls: Array<[string, string]> }> {
+  const code = source.replace(/\/\*[\s\S]*?\*\//g, "");
+  const out: Array<{ nested: boolean; decls: Array<[string, string]> }> = [];
+  for (let at = code.indexOf(selector); at >= 0; at = code.indexOf(selector, at + 1)) {
+    const open = code.indexOf("{", at + selector.length);
+    if (open < 0) continue;
+    if (code.slice(at + selector.length, open).trim() !== "") continue;
+    let boundary = at - 1;
+    while (boundary >= 0 && !"}{;".includes(code[boundary])) boundary -= 1;
+    if (code.slice(boundary + 1, at).replace(/\s+/g, " ").trim() !== "") continue;
+    const nested = braceDepthAt(code, at) > 0;
+    const body = code.slice(open + 1, code.indexOf("}", open));
+    const decls: Array<[string, string]> = [];
+    for (const part of body.split(";")) {
+      const m = /^\s*([-a-zA-Z]+)\s*:\s*([\s\S]+?)\s*$/.exec(part);
+      if (m) decls.push([m[1], m[2].replace(/\s+/g, " ")]);
+    }
+    out.push({ nested, decls });
+  }
+  return out;
+}
+
+describe("window-controls chrome-edge contract (the three faces had drifted)", () => {
+  it("declares the canonical edge-inset tokens at :root top level", () => {
+    // :root is a top-level rule; a token declared inside an at-block (or
+    // renamed) silently falls every consumer back to its var() fallback —
+    // the token must exist AND sit where it cascades.
+    const rootRules = allRuleDeclarations(adminTokens, ":root").filter((r) => !r.nested);
+    expect(rootRules.length, ":root must be declared at top level").toBeGreaterThan(0);
+    const joined = rootRules.flatMap((r) => r.decls);
+    expect(joined).toContainEqual(["--hk-window-controls-edge-inset", "0.75rem"]);
+    expect(joined).toContainEqual(["--hk-window-controls-edge-inset-compact", "0.5rem"]);
+  });
+
+  it("sources the chrome header's desktop inset from the token (logical property)", () => {
+    // padding-INLINE-END, not padding-right: in a dir="rtl" host the
+    // caption row flips to the visual left and the inset must flip with
+    // it (same reasoning as the RTL-mirrored titlebar close button).
+    const rules = allRuleDeclarations(adminTokens, ".s-glass-header.s-glass-header--chrome").filter(
+      (r) => !r.nested,
+    );
+    expect(rules.length, ".s-glass-header--chrome must be declared at top level").toBe(1);
+    expect(rules[0].decls).toContainEqual([
+      "padding-inline-end",
+      "var(--hk-window-controls-edge-inset, 0.75rem)",
+    ]);
+  });
+
+  it("sources the chrome header's ≤1023px inset from the compact token", () => {
+    const rules = allRuleDeclarations(adminTokens, ".s-glass-header.s-glass-header--chrome").filter(
+      (r) => r.nested,
+    );
+    expect(rules.length, "the compact band must override the chrome inset").toBe(1);
+    expect(rules[0].decls).toContainEqual([
+      "padding-inline-end",
+      "var(--hk-window-controls-edge-inset-compact, 0.5rem)",
+    ]);
+  });
+
+  it("hangs the chrome class from the HkAdminHeader chrome prop", () => {
+    // The prop without the class (or the class without a producer) leaves
+    // the console face on the base 24px inset — both halves are the pin.
+    expect(adminHeader).toMatch(/chrome:\s*\{\s*type:\s*Boolean,\s*default:\s*false\s*\}/);
+    expect(adminHeader).toMatch(
+      /props\.chrome\s*\?\s*"s-glass-header--chrome"\s*:\s*""/,
+    );
+  });
+
+  it("documents the standard-mode host contract on HkWindowControls", () => {
+    // The doc comment is the contract's prose home: the token name and the
+    // never-flush rule must stay stated where hosts read the component.
+    expect(windowControls).toContain("HOST CONTRACT");
+    expect(windowControls).toContain("--hk-window-controls-edge-inset");
+    expect(windowControls).toContain("never rides the window edge");
+  });
+});

package/src/styles/admin-tokens.scss

@@ -9,6 +9,19 @@
   /* ── Layout tokens ─ */
   --s-footer-height: 3rem;
   --s-header-height: 3rem;
+
+  /* ── Window-control chrome insets ─
+   * The right padding a host title-bar header keeps between the standard
+   * HkWindowControls cluster and the window edge (canonical home since
+   * the chest login strip shipped the cluster glued to the frame corner —
+   * field report 2026-10-25). The standard cluster NEVER rides the edge
+   * (that is the flush variant's job), so every chrome face sources its
+   * padding from here instead of restating half-of-the-header-inset per
+   * face — the faces had drifted three ways (chat 12px/8px, console a
+   * full 24px of dead air, auth 0px). Values are the 2026-10-23 ruling's
+   * halvings of the base/compact header insets, promoted to tokens. */
+  --hk-window-controls-edge-inset: 0.75rem; /* desktop: half of the 24px base header inset */
+  --hk-window-controls-edge-inset-compact: 0.5rem; /* ≤1023px: half of the 16px compact header inset */
   /* Layout/type/motion scale tokens (--space-*, --text-*, --blur-*, --z-*,
    * --duration-*, --ease-*) used to be mirrored here ("keep both in sync")
    * — they now live once in styles/theme/scale.scss, which every entry
@@ -437,6 +450,27 @@
   padding: 0 var(--space-16);
 }
 
+/* Chrome variant (HkAdminHeader `chrome` prop — the desktop face whose
+ * header IS the window title bar): the inline-end inset follows the
+ * window-controls contract token, not the content inset — the default
+ * 24px reads as dead air next to the standard HkWindowControls cluster
+ * (the same 2026-10-23 user direction that halved the chat face's gap).
+ * LOGICAL property, like the RTL-mirrored titlebar close button (the
+ * [dir="rtl"] .hk-titlebar-btn-close rule in components/HkTitleBar.scss):
+ * in a dir="rtl" host the caption row flips to the visual left and the
+ * inset must flip with it, not stay on the physical right. (0,2,0)
+ * outranks the base rule and the compact band alike, so the chrome
+ * inset wins regardless of load order. */
+.s-glass-header.s-glass-header--chrome {
+  padding-inline-end: var(--hk-window-controls-edge-inset, 0.75rem);
+}
+
+@media (max-width: 1023px) {
+  .s-glass-header.s-glass-header--chrome {
+    padding-inline-end: var(--hk-window-controls-edge-inset-compact, 0.5rem);
+  }
+}
+
 /* ── Balanced header columns (the ONE three-zone header layout) ─────────
  * The shared geometry behind every top bar that owns a header-centre
  * group: the frontend chat header (chest ChatLayout's .s-header-bar-*)