fix(ui): render drawer close glyph and tighten mobile heading

bun.lock

@@ -688,7 +688,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.65",
+      "version": "0.8.66",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },

packages/ui/components/Drawer.wrn

@@ -150,7 +150,7 @@ open: boolean = false
                 aria-label='{closeLabel}'
                 @click='hideDrawer("close-button", event)'
               >
-                <span class="icon-[lucide--x]" aria-hidden="true"></span>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M6 6l12 12M18 6 6 18" /></svg>
               </button>
             {/if}
           </header>
@@ -397,7 +397,7 @@ open: boolean = false
 
     .wrn-drawer__header {
       display: flex;
-      align-items: flex-start;
+      align-items: center;
       justify-content: space-between;
       gap: 1rem;
       padding: 1.35rem 1.35rem 1.1rem;
@@ -519,6 +519,12 @@ open: boolean = false
       display: none;
     }
 
+    @media (max-width: 767px) {
+      .wrn-drawer__header {
+        padding-block: 0.75rem;
+      }
+    }
+
     @media (max-width: 639px) {
       .wrn-drawer[data-placement="right"] .wrn-drawer__panel,
       .wrn-drawer[data-placement="left"] .wrn-drawer__panel {

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.65",
+  "version": "0.8.66",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/test/account-shell-regressions.test.ts

@@ -8,6 +8,23 @@ import { Window } from "happy-dom";
 const source = (name: string) => readFileSync(uiComponentPath(name), "utf8");
 
 describe("account shell UI regressions", () => {
+  test("Drawer has a self-contained close icon and a compact centered mobile header", async () => {
+    const dom = mountHtml(
+      await renderComponent(source("Drawer"), { title: "Account center", open: true, duration: 0 }),
+    );
+    const close = dom.querySelector(".wrn-drawer__close") as HTMLButtonElement;
+    expect(close.getAttribute("aria-label")).toBe("Close drawer");
+    expect(close.querySelector('svg[aria-hidden="true"] path')).not.toBeNull();
+    expect(close.querySelector('[class*="icon-"]')).toBeNull();
+    expect(source("Drawer")).toMatch(/\.wrn-drawer__header\s*\{[^}]*align-items: center;/);
+    expect(source("Drawer")).toContain("padding-block: 0.75rem;");
+    let closed = false;
+    dom.querySelector('[data-ui-component="Drawer"]')?.addEventListener("wrnexus:close", () => {
+      closed = true;
+    });
+    close.click();
+    expect(closed).toBe(true);
+  });
   test("Dropdown allows anchored mobile menus without changing existing sheet defaults", async () => {
     for (const mobilePanel of [undefined, "dropdown", "sheet"]) {
       const dom = mountHtml(