@celestia-island/hikari 0.40.7 → 0.40.9

package/package.json

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

package/src/components/HkContextRing.scss

@@ -36,6 +36,15 @@
   color: rgb(var(--color-text));
 }
 
+/* Mobile sheet mode: the docked sheet spans the viewport, so the fixed
+ * 18rem pop would hug the sheet's left edge with dead space to the right.
+ * Fill the sheet instead — the panel chrome keeps its own symmetric
+ * horizontal gutters (the glass content padding), so the bar and legend
+ * get equal left/right insets. Desktop stays anchored at 18rem. */
+.hk-popover-panel.hk-is-sheet .hk-ctx-pop {
+  width: 100%;
+}
+
 .hk-ctx-pop-model {
   display: flex;
 }

package/src/components/HkModal.scss

@@ -173,6 +173,10 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  // Window chrome, not content — titles never participate in text
+  // selection (2026-09-04 user report alongside the sheet chrome pass).
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .hk-modal-close {
@@ -339,9 +343,10 @@
     // modal rendered ~60vh of blank body under three rows). The top inset
     // now only bounds the sheet via the max-height cap below.
     top: auto;
-    // --hk-sheet-bottom-gap keeps the docked sheet from touching the very
-    // bottom edge (host-tunable; chest narrows the default visual gap).
-    bottom: var(--hk-sheet-bottom-gap, 0.375rem);
+    // --hk-sheet-bottom-gap: hosts may lift the docked sheet off the very
+    // bottom edge; the family default sits flush on it (2026-09-04 user
+    // report: even the tightened 0.375rem default still read as a seam).
+    bottom: var(--hk-sheet-bottom-gap, 0px);
     left: 0;
     right: 0;
     transform: none;
@@ -356,10 +361,10 @@
     // Plain-vh fallback first: dvh-less engines (older Android WebView /
     // Tauri) would drop the whole dvh calc and leave the sheet uncapped.
     max-height: calc(
-      100vh - var(--hk-sheet-top-inset, 4.25rem) - var(--hk-sheet-bottom-gap, 0.375rem)
+      100vh - var(--hk-sheet-top-inset, 4.25rem) - var(--hk-sheet-bottom-gap, 0px)
     );
     max-height: calc(
-      100dvh - var(--hk-sheet-top-inset, 4.25rem) - var(--hk-sheet-bottom-gap, 0.375rem)
+      100dvh - var(--hk-sheet-top-inset, 4.25rem) - var(--hk-sheet-bottom-gap, 0px)
     );
   }
 

package/src/components/HkModal.sheetgap.test.ts

@@ -21,13 +21,14 @@ const here = dirname(fileURLToPath(import.meta.url));
 const src = readFileSync(join(here, "HkModal.scss"), "utf-8");
 
 describe("HkModal mobile sheet spacing contract", () => {
-  it("sizes the docked sheet from --hk-sheet-bottom-gap (not hard 0)", () => {
+  it("sizes the docked sheet from --hk-sheet-bottom-gap (host-tunable hook)", () => {
     const block = src.slice(src.indexOf("@media (max-width: 767px)"));
     expect(block).toContain("bottom: var(--hk-sheet-bottom-gap");
-    // Default keeps a small visible gap; hosts may narrow or zero it.
-    // (2026-08-29 user request: the docked sheet sat too far off the
-    // bottom — default tightened from 0.5rem to 0.375rem.)
-    expect(block).toMatch(/--hk-sheet-bottom-gap,\s*0\.375rem/);
+    // Family default sits flush on the bottom edge; hosts may re-add a
+    // gap via the same custom property. (History: 2026-08-29 tightened
+    // 0.5rem → 0.375rem; 2026-09-04 user report — the remaining sliver
+    // still read as a visible seam, so the default settled on 0.)
+    expect(block).toMatch(/--hk-sheet-bottom-gap,\s*0px/);
   });
 
   it("keeps the footer gap host-tunable and stacks the safe-area inset", () => {

package/src/components/HkModelCatalog.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+
+import { getModelMeta, registerModelCatalog } from "./HkModelCatalog";
+
+/**
+ * The simulated-world roster (integration world_service `agent_models`):
+ * every model id a chest card can carry must resolve a context window, or
+ * its context ring degrades to the empty "–" state — the "only the sample
+ * card shows usage" regression. The builtin catalog is the fallback that
+ * keeps unknown-to-nothing lineups legible.
+ */
+const WORLD_LINEUP = [
+  "glm-5.3-flash",
+  "claude-opus-5",
+  "deepseek-v4-pro",
+  "deepseek-v4-flash",
+  "gemini-3.1-flash-preview",
+  "gpt-5.5-pro",
+  "gemini-3.1-pro-preview",
+  "gpt-5.4",
+  "gpt-5.4-nano",
+  "claude-haiku-4-5",
+  "gemini-3-flash",
+  "qwen3.7:14b",
+  "qwen3.8:27b",
+];
+
+describe("HkModelCatalog builtin specs", () => {
+  it("resolves every world-lineup model id to a positive context window", () => {
+    for (const model of WORLD_LINEUP) {
+      const meta = getModelMeta(model);
+      expect(meta, `${model} resolves`).toBeDefined();
+      expect(meta?.contextWindow ?? 0, `${model} window`).toBeGreaterThan(0);
+    }
+  });
+
+  it("keeps ollama-style colon tags whole (only # splits)", () => {
+    expect(getModelMeta("qwen3.7:14b")?.contextWindow).toBe(262_144);
+    expect(getModelMeta("qwen3.8:27b")?.contextWindow).toBe(262_144);
+  });
+
+  it("still strips a #tag before lookup", () => {
+    expect(getModelMeta("deepseek-v4-pro#2")?.contextWindow).toBe(128_000);
+    expect(getModelMeta("claude-opus-5#7")?.contextWindow).toBe(200_000);
+  });
+
+  it("lets the registered catalog win over the builtin entries", () => {
+    registerModelCatalog({ "claude-opus-5": { contextWindow: 999 } });
+    expect(getModelMeta("claude-opus-5")?.contextWindow).toBe(999);
+  });
+});

package/src/components/HkModelCatalog.ts

@@ -64,6 +64,59 @@ const BUILTIN_CATALOG: HModelCatalog = {
     pricing: { in: 2, out: 8 },
     vision: true, reasoning: true, tools: true,
   },
+  "glm-5.3-flash": {
+    contextWindow: 128_000, maxOutput: 32_000,
+    pricing: { in: 0.5, out: 2 },
+    vision: false, reasoning: true, tools: true,
+  },
+  "gpt-5.5-pro": {
+    contextWindow: 400_000, maxOutput: 100_000,
+    pricing: { in: 10, out: 50, cached: 1 },
+    vision: true, reasoning: true, tools: true,
+  },
+  "gpt-5.4": {
+    contextWindow: 400_000, maxOutput: 64_000,
+    pricing: { in: 2.5, out: 15, cached: 0.25 },
+    vision: true, reasoning: true, tools: true,
+  },
+  "gpt-5.4-nano": {
+    contextWindow: 400_000, maxOutput: 16_000,
+    pricing: { in: 0.2, out: 1.2, cached: 0.05 },
+    vision: false, reasoning: false, tools: true,
+  },
+  "claude-opus-5": {
+    contextWindow: 200_000, maxOutput: 64_000,
+    pricing: { in: 5, out: 25, cached: 0.5 },
+    vision: true, reasoning: true, tools: true,
+  },
+  "claude-haiku-4-5": {
+    contextWindow: 200_000, maxOutput: 32_000,
+    pricing: { in: 0.8, out: 4, cached: 0.08 },
+    vision: false, reasoning: false, tools: true,
+  },
+  "gemini-3.1-pro-preview": {
+    contextWindow: 1_000_000, maxOutput: 64_000,
+    pricing: { in: 5, out: 30 },
+    vision: true, reasoning: true, tools: true,
+  },
+  "gemini-3.1-flash-preview": {
+    contextWindow: 1_000_000, maxOutput: 64_000,
+    pricing: { in: 1.5, out: 10 },
+    vision: true, reasoning: true, tools: true,
+  },
+  "gemini-3-flash": {
+    contextWindow: 1_000_000, maxOutput: 32_000,
+    pricing: { in: 1.5, out: 9 },
+    vision: true, reasoning: false, tools: true,
+  },
+  "qwen3.7:14b": {
+    contextWindow: 262_144, maxOutput: 32_768,
+    vision: false, reasoning: true, tools: true,
+  },
+  "qwen3.8:27b": {
+    contextWindow: 262_144, maxOutput: 32_768,
+    vision: false, reasoning: true, tools: true,
+  },
 };
 
 /**

package/src/components/HkPopover.scss

@@ -100,7 +100,7 @@
     72vh,
     calc(
       100vh - var(--hk-sheet-top-inset, 4.25rem) -
-        var(--hk-sheet-bottom-gap, 0.375rem)
+        var(--hk-sheet-bottom-gap, 0px)
     )
   );
   display: flex;
@@ -137,6 +137,10 @@
   cursor: pointer;
   display: flex;
   justify-content: center;
+  // Window chrome, not content — a long-press must never start a text
+  // selection over the drag handle.
+  user-select: none;
+  -webkit-user-select: none;
 
   &::before {
     content: "";
@@ -147,17 +151,81 @@
   }
 }
 
-.hk-popover-sheet-title {
+/* Sheet heading row — title on the left, explicit close on the right,
+ * one vertically-centered flex line (2026-09-04 user report: the bare
+ * title band read too small, hung right of the content it named, and
+ * long-press selected it; every other window in the app carries an ✕).
+ * The title aligns to the CONTENT edge: the leading inset defaults to
+ * --space-12, matching the padded content blocks popover sheets host
+ * (e.g. HkContextRing's 0.75rem body). Hosts tune it via
+ * --hk-sheet-title-inset; the trailing inset hugs the close button. */
+.hk-popover-sheet-header {
   flex-shrink: 0;
-  // Same heading grammar as the select sheet title: small, semibold,
-  // slightly letterspaced, inset to the content edge. Hosts tune the
-  // leading inset via --hk-sheet-title-inset.
-  padding: 0 var(--space-16, 1rem) var(--space-8, 0.5rem)
-    var(--hk-sheet-title-inset, calc(var(--space-16, 1rem) * 2));
-  font-size: var(--text-xs, 0.75rem);
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  padding: 0 var(--space-8, 0.5rem) var(--space-8, 0.5rem)
+    var(--hk-sheet-title-inset, var(--space-12, 0.75rem));
+}
+
+.hk-popover-sheet-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  // Same heading grammar as the select sheet title: semibold, slightly
+  // letterspaced — one step up from the old 0.75rem so the sheet names
+  // itself at body-text size, and window chrome never participates in
+  // text selection.
+  font-size: var(--text-base, 0.875rem);
   font-weight: 600;
   letter-spacing: 0.02em;
   color: rgb(var(--color-muted, 140 140 140));
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.hk-popover-sheet-close {
+  flex-shrink: 0;
+  // Pushes to the right edge with or without a title beside it.
+  margin-left: auto;
+  width: 2rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--hi-radius-md, 0.5rem);
+  color: var(--hk-modal-close-color, var(--hi-color-text-secondary, #666));
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+
+  &:hover {
+    background: var(
+      --hk-modal-close-hover-bg,
+      var(--hi-secondary-bg, rgba(0, 0, 0, 0.06))
+    );
+    color: var(
+      --hk-modal-close-hover-color,
+      var(--hi-color-text-primary, #333)
+    );
+  }
+
+  &:active {
+    transform: scale(0.92);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--hi-color-primary, #ffc0cb);
+    outline-offset: 2px;
+  }
 }
 
 .hk-popover-sheet-enter-active {

package/src/components/HkPopover.sheetdock.test.ts

@@ -17,11 +17,13 @@ const tsx = readFileSync(join(here, "HkPopover.tsx"), "utf-8");
 const scss = readFileSync(join(here, "HkPopover.scss"), "utf-8");
 
 describe("HkPopover mobile sheet docking contract", () => {
-  it("docks the sheet above the shared bottom gap (inline sheet style)", () => {
+  it("docks the sheet at the shared bottom-gap hook (inline sheet style)", () => {
     const block = tsx.slice(tsx.indexOf("panelStyle"));
     expect(block).toContain("var(--hk-sheet-bottom-gap");
-    // Same default as the HkModal sheet contract.
-    expect(block).toMatch(/--hk-sheet-bottom-gap,\s*0\.375rem/);
+    // Family default sits flush on the bottom edge (2026-09-04 user
+    // report: even the tightened 0.375rem lift read as a visible seam);
+    // hosts may re-add a gap via the same custom property.
+    expect(block).toMatch(/--hk-sheet-bottom-gap,\s*0px/);
   });
 
   it("keeps sheet content clear of the home bar via the safe-area inset", () => {

package/src/components/HkPopover.tsx

@@ -15,6 +15,7 @@ import {
 
 import { usePopupManager, type PopupHandle } from "../runtime/usePopupManager";
 import { useBreakpoint } from "../runtime/useBreakpoint";
+import { useI18n } from "../i18n/context";
 import { useSurfaceTransition } from "../composables/useSurfaceTransition";
 import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
 import { onceFrame } from "../runtime/animationBus";
@@ -76,6 +77,7 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const attrs = useAttrs();
     const manager = usePopupManager();
+    const { t } = useI18n();
     const handle = ref<PopupHandle | null>(null);
     const panelRef = ref<HTMLElement>();
     const resolvedPlacement = ref<PopupPlacement>(props.placement);
@@ -489,15 +491,17 @@ export default defineComponent({
 
     const panelStyle = computed(() => {
       if (sheetMode.value) {
-        // Bottom sheet: pinned above the bottom edge with the SAME
-        // host-tunable gap as the HkModal mobile docking
-        // (--hk-sheet-bottom-gap) so every bottom-up window belongs to
-        // one sheet family; full width, inside the top inset reserved
-        // for the secondary-window breadcrumb strip.
+        // Bottom sheet: sits flush on the viewport bottom edge (the
+        // host-tunable --hk-sheet-bottom-gap lift is still honored so the
+        // sheet belongs to the HkModal/HkSelect sheet family — the family
+        // default is 0 since the 2026-09-04 report: even a 0.375rem lift
+        // read as a visible seam under the docked sheet); full width,
+        // inside the top inset reserved for the secondary-window
+        // breadcrumb strip.
         return {
           left: "0",
           right: "0",
-          bottom: "var(--hk-sheet-bottom-gap, 0.375rem)",
+          bottom: "var(--hk-sheet-bottom-gap, 0px)",
           top: "auto" as const,
           position: "fixed" as const,
           pointerEvents: "auto" as const,
@@ -568,11 +572,36 @@ export default defineComponent({
                 {sheetMode.value && (
                   <div class="hk-popover-sheet-grabber" aria-hidden="true" onClick={() => close()} />
                 )}
-                {sheetMode.value && props.title && (
-                  // Sheet heading band — opt-in via the `title` prop so
-                  // anchored-desktop consumers are untouched; keeps the
-                  // docked sheet naming itself like every other window.
-                  <div class="hk-popover-sheet-title">{props.title}</div>
+                {sheetMode.value && (
+                  // Sheet heading row — the title and the close button on
+                  // one vertically-centered line (2026-09-04 user report:
+                  // the bare title band read too small and hung right of
+                  // the content it named, and every other window in the
+                  // app carries an explicit ✕). Same header grammar as the
+                  // HkModal header: title left, close on the right edge.
+                  <div class="hk-popover-sheet-header">
+                    {props.title && (
+                      <div class="hk-popover-sheet-title">{props.title}</div>
+                    )}
+                    <button
+                      class="hk-popover-sheet-close"
+                      aria-label={t("hikari::modal.close", "Close")}
+                      onClick={close}
+                    >
+                      <svg
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        width="16"
+                        height="16"
+                      >
+                        <line x1="18" y1="6" x2="6" y2="18" />
+                        <line x1="6" y1="6" x2="18" y2="18" />
+                      </svg>
+                    </button>
+                  </div>
                 )}
                 {slots.default?.()}
               </div>

package/src/components/HkPopoverSheet.test.tsx

@@ -127,4 +127,50 @@ describe("HkPopover sheetOnMobile", () => {
     expect(document.body.querySelector(".hk-popover-panel")!.classList.contains("hk-is-sheet")).toBe(true);
     expect(document.body.querySelector(".hk-popover-scrim")).toBeNull();
   });
+
+  // 2026-09-04 user report: the sheet heading was a bare small band —
+  // the sheet now names itself with a title + explicit close button on
+  // one vertically-centered line, like every other window in the app.
+  it("renders a title + close heading row when titled, close alone when not", async () => {
+    setViewport(375);
+    mountPopover({ sheetOnMobile: true, title: "Context usage" });
+    await nextTick();
+
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
+    const header = panel.querySelector<HTMLElement>(".hk-popover-sheet-header")!;
+    expect(header).toBeTruthy();
+    expect(header.querySelector(".hk-popover-sheet-title")!.textContent).toBe("Context usage");
+    const close = header.querySelector<HTMLButtonElement>(".hk-popover-sheet-close")!;
+    expect(close).toBeTruthy();
+    expect(close.getAttribute("aria-label")).toBeTruthy();
+  });
+
+  it("closes the sheet from the heading close button", async () => {
+    setViewport(375);
+    const { open } = mountPopover({ sheetOnMobile: true, title: "Context usage" });
+    await nextTick();
+    const close = document.body.querySelector<HTMLButtonElement>(".hk-popover-sheet-close")!;
+    close.click();
+    await nextTick();
+    expect(open.value).toBe(false);
+  });
+
+  it("renders the close button even without a title, right-aligned", async () => {
+    setViewport(375);
+    mountPopover({ sheetOnMobile: true });
+    await nextTick();
+    const header = document.body.querySelector<HTMLElement>(".hk-popover-sheet-header")!;
+    expect(header.querySelector(".hk-popover-sheet-title")).toBeNull();
+    expect(header.querySelector(".hk-popover-sheet-close")).toBeTruthy();
+  });
+
+  it("keeps the heading row out of anchored desktop mode", async () => {
+    setViewport(1200);
+    mountPopover({ sheetOnMobile: true, title: "Context usage" });
+    await nextTick();
+    const panel = document.body.querySelector<HTMLElement>(".hk-popover-panel")!;
+    expect(panel.querySelector(".hk-popover-sheet-header")).toBeNull();
+    expect(panel.querySelector(".hk-popover-sheet-title")).toBeNull();
+    expect(panel.querySelector(".hk-popover-sheet-close")).toBeNull();
+  });
 });

package/src/components/HkSelect.scss

@@ -244,11 +244,12 @@
   position: fixed;
   left: 0;
   right: 0;
-  /* Float off the bottom edge with the SAME host-tunable gap as the
-   * HkModal mobile docking (--hk-sheet-bottom-gap) — every bottom-up
-   * window reads as one sheet family; was glued to bottom: 0, which is
-   * exactly why dropdown sheets read as "not the standard modal". */
-  bottom: var(--hk-sheet-bottom-gap, 0.375rem);
+  /* Sit flush on the bottom edge; the host-tunable --hk-sheet-bottom-gap
+   * lift (shared with the HkModal mobile docking) stays available so
+   * every bottom-up window reads as one sheet family. Was glued to
+   * bottom: 0, then floated at the 0.375rem family default — both wrong
+   * for someone; the 2026-09-04 report settles the family on flush. */
+  bottom: var(--hk-sheet-bottom-gap, 0px);
   display: flex;
   flex-direction: column;
   /* The panel height hugs its content (up to the cap below); the sheet
@@ -266,7 +267,7 @@
     72vh,
     calc(
       100vh - var(--hk-sheet-top-inset, 4.25rem) -
-        var(--hk-sheet-bottom-gap, 0.375rem)
+        var(--hk-sheet-bottom-gap, 0px)
     )
   );
   background: rgb(var(--color-surface));
@@ -285,6 +286,10 @@
   cursor: pointer;
   display: flex;
   justify-content: center;
+  /* Window chrome — never a text-selection start (matches the popover
+   * sheet grabber). */
+  user-select: none;
+  -webkit-user-select: none;
 
   &::before {
     content: "";
@@ -302,13 +307,17 @@
    * roughly another --space-16 of leading padding inside, so the old
    * single --space-16 left the title hanging left of every row it
    * named instead of reading as the list's heading. Hosts tune it via
-   * --hk-sheet-title-inset; the trailing inset stays --space-16. */
+   * --hk-sheet-title-inset; the trailing inset stays --space-16.
+   * Size/weight match the popover sheet heading (--text-base, window
+   * chrome never text-selectable — 2026-09-04 sheet chrome pass). */
   padding: 0 var(--space-16) var(--space-8)
     var(--hk-sheet-title-inset, calc(var(--space-16) * 2));
-  font-size: var(--text-xs);
+  font-size: var(--text-base);
   font-weight: 600;
   letter-spacing: 0.02em;
   color: rgb(var(--color-muted));
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 /* Track host for the sheet list's overlay scrollbar — owns the flex

package/src/components/HkSelect.sheetdock.test.ts

@@ -16,11 +16,13 @@ const here = dirname(fileURLToPath(import.meta.url));
 const src = readFileSync(join(here, "HkSelect.scss"), "utf-8");
 
 describe("HkSelectPanel mobile sheet docking contract", () => {
-  it("floats the sheet on --hk-sheet-bottom-gap (not hard 0)", () => {
+  it("docks the sheet on the --hk-sheet-bottom-gap hook (flush family default)", () => {
     const block = src.match(/\.hk-select-sheet-panel\s*{[^}]*}/)?.[0] ?? "";
     expect(block).toContain("bottom: var(--hk-sheet-bottom-gap");
-    // Same default as the HkModal sheet contract.
-    expect(block).toMatch(/--hk-sheet-bottom-gap,\s*0\.375rem/);
+    // Family default sits flush on the bottom edge (2026-09-04 user
+    // report: the 0.375rem family default read as a seam); hosts may
+    // re-add a gap via the same custom property.
+    expect(block).toMatch(/--hk-sheet-bottom-gap,\s*0px/);
   });
 
   it("stacks the safe-area inset on the sheet list bottom padding", () => {