@celestia-island/hikari 0.55.160 → 0.55.162

package/package.json

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

package/src/components/HkBreadcrumb.tsx

@@ -1,4 +1,5 @@
 import { computed, defineComponent, type PropType } from "vue";
+import { safeHref } from "../utils/safeHref";
 import { useI18n } from "../i18n/context";
 import "./HkBreadcrumb.scss";
 
@@ -19,7 +20,7 @@ export default defineComponent({
           {props.items.map((item, index) => (
             <li key={index} class="hk-breadcrumb-item">
               {item.to ? (
-                <a href={item.to} class="hk-breadcrumb-link">{item.label}</a>
+                <a href={safeHref(item.to)} class="hk-breadcrumb-link">{item.label}</a>
               ) : (
                 <span class="hk-breadcrumb-link">{item.label}</span>
               )}

package/src/components/HkDiffViewer.test.tsx

@@ -238,3 +238,115 @@ describe("HkDiffViewer", () => {
     expect(root.querySelector(".hk-diff-viewer__hunk")).toBeNull();
   });
 });
+
+// ── The fold-aware scroll map (2026-10-12 user direction) ──────────────
+// The scrollbar must represent the WHOLE document while the viewer folds
+// unchanged regions away: the map total is fold-invariant, deleted rows
+// carry no document extent (they are not in the current file), and the
+// hunk heading is chrome. Mounting and folding drives the emission.
+describe("HkDiffViewer scroll map", () => {
+  const MAPPED_DIFF = [
+    // Counts MUST match the listed lines (3 old-side, 4 new-side; then
+    // 3 and 3) or the map total drifts off totalLines.
+    "@@ -1,3 +1,4 @@",
+    " ctx1",
+    " ctx2",
+    " ctx3",
+    "+add",
+    "@@ -50,3 +51,3 @@",
+    " ctxA",
+    "-old",
+    "+new",
+    " ctxB",
+  ].join("\n");
+
+  function mountViewer(extra: Record<string, unknown> = {}) {
+    const emitted: Array<Array<{ dom: number; map: number }>> = [];
+    const root = mount({
+      diff: MAPPED_DIFF,
+      totalLines: 100,
+      onScrollMap: (segs: Array<{ dom: number; map: number }>) => emitted.push(segs),
+      ...extra,
+    });
+    return { root, emitted };
+  }
+
+  it("emits a map whose total is the document, fold-invariant", async () => {
+    const { root, emitted } = mountViewer();
+    await nextTick();
+    expect(emitted.length).toBeGreaterThanOrEqual(1);
+    const total = (segs: Array<{ map: number }>) => segs.reduce((a, s) => a + s.map, 0);
+    expect(total(emitted[emitted.length - 1])).toBe(100);
+    // Collapse a hunk: the document total must not change (the scrollbar
+    // is a map of the WHOLE file whatever is folded).
+    const head = root.querySelector<HTMLButtonElement>(".hk-diff-viewer__hunk-head")!;
+    head.click();
+    await nextTick();
+    expect(total(emitted[emitted.length - 1])).toBe(100);
+    head.click(); // back
+    await nextTick();
+    expect(total(emitted[emitted.length - 1])).toBe(100);
+  });
+
+  it("keeps an empty-batched gap's rung at zero dom while the document keeps its lines", async () => {
+    // A host answering [] marks the gap done with NO rows fetched: the
+    // rung must not claim dom extent for lines that never rendered (R2's
+    // N2 caught +1957px of phantom dom) while the document side keeps
+    // the gap's full extent.
+    const { root, emitted } = mountViewer({
+      loadContext: async () => [],
+    });
+    await nextTick();
+    // MAPPED_DIFF has no leading gap (hunk 1 starts at line 1); the first
+    // divider is the 46-line middle gap (lines 5..50, anchor=start).
+    const divider = root.querySelector<HTMLButtonElement>(".hk-diff-viewer__gap")!;
+    divider.click();
+    await tick();
+    await nextTick();
+    const segs = emitted[emitted.length - 1];
+    // The gap is DONE via the empty batch: its document extent survives
+    // as a zero-dom rung — no phantom rows for lines that never rendered.
+    expect(segs).toContainEqual({ dom: 0, map: 46 });
+    expect(segs).not.toContainEqual({ dom: 46, map: 46 });
+    // …and the document total is still the whole file.
+    expect(segs.reduce((a, x) => a + x.map, 0)).toBe(100);
+  });
+
+  it("orders an expanded anchor=start gap's revealed rung BEFORE its divider rung", async () => {
+    // R2's N3: swapping the rung order moved the remaining-divider's
+    // document start by ~727px. The render puts revealed rows above the
+    // remaining divider for anchor=start, and the map must mirror it.
+    const lines: string[] = [];
+    for (let i = 0; i < 40; i += 1) lines.push(` fetched-${i}`);
+    const { root, emitted } = mountViewer({
+      loadContext: async () => lines,
+    });
+    await nextTick();
+    // The trailing gap (anchor=start, after the last hunk).
+    const dividers = [...root.querySelectorAll<HTMLButtonElement>(".hk-diff-viewer__gap")];
+    const trailing = dividers[dividers.length - 1];
+    trailing.click();
+    await tick();
+    await nextTick();
+    const segs = emitted[emitted.length - 1];
+    // Find the trailing gap's rungs: revealed (dom>0, map=40) directly
+    // before the remaining divider (map = 100 - docBefore - 40).
+    const idx = segs.findIndex((x, i) => x.map === 40 && segs[i + 1] && segs[i + 1].map > 0 && segs[i + 1].dom >= 0 && x.dom > 0 && i > segs.length - 6);
+    expect(idx).toBeGreaterThan(-1);
+    expect(segs[idx].dom).toBeGreaterThan(0);
+    expect(segs[idx + 1].map).toBeGreaterThan(0);
+  });
+
+  it("counts deleted rows as rendered-but-not-in-the-document", async () => {
+    const { emitted } = mountViewer();
+    await nextTick();
+    const segs = emitted[emitted.length - 1];
+    const total = segs.reduce((a, s) => a + s.map, 0);
+    const dom = segs.reduce((a, s) => a + s.dom, 0);
+    // 4 context/add rows in hunk 1 + 6 in hunk 2 (one of them a DELETED
+    // row: rendered, map 0) → dom exceeds the hunks' map contribution.
+    expect(dom).toBeGreaterThan(total - 100 + 0); // sanity: dom side exists
+    const hunkRows = segs.filter((s) => s.dom === 1 && s.map <= 1);
+    expect(hunkRows.length).toBeGreaterThan(4);
+  });
+});

package/src/components/HkDiffViewer.tsx

@@ -1,9 +1,10 @@
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, onMounted, ref, watch } from "vue";
 import { AlertTriangle, ChevronDown, ChevronRight, UnfoldVertical } from "lucide-vue-next";
 import HkSpinner from "./HkSpinner";
 import { useI18n } from "../i18n/context";
 import { highlight } from "../composables/useHighlight";
 import { computeGaps, parseUnifiedDiff, type DiffLine, type UnchangedGap } from "./diffParse";
+import type { OverlayScrollMapSegment } from "../composables/useOverlayScrollbar";
 import "./HkDiffViewer.scss";
 
 /**
@@ -57,15 +58,133 @@ export default defineComponent({
      */
     loadContext: { type: Function, default: null },
   },
-  setup(props) {
+  emits: {
+    /**
+     * The fold-aware scroll map (see `OverlayScrollMapSegment`): document
+     * units are NEW-SIDE file lines (deleted rows carry none — they do
+     * not exist in the current file), dom units are MEASURED PIXELS of
+     * the rows that render (row-count fallback where nothing lays out; a
+     * hunk heading is chrome and carries no document extent). The total
+     * is FOLD-INVARIANT — expanding a region moves its extent from the
+     * divider's rung onto real rows without changing the document — so
+     * the scrollbar stays a map of the WHOLE file whatever is folded.
+     * Bind it to a HkScrollContainer's `mapSegments`.
+     */
+    "scroll-map": null as OverlayScrollMapSegment[] | null,
+  },
+  setup(props, { emit }) {
+    const host = ref<HTMLElement | null>(null);
     const { t } = useI18n();
 
     const parsed = computed(() => parseUnifiedDiff(props.diff));
     const gaps = computed(() => computeGaps(parsed.value, props.totalLines ?? null));
     const collapsedHunks = ref<Set<number>>(new Set());
+
+    /**
+     * Measured pixel heights of the three row kinds, so the map's dom
+     * side can be honest in px instead of row counts — a hunk heading is
+     * ~1.7 lines tall and a divider ~1.35, and count-units drift the
+     * rung boundaries one to two rows off the real geometry (R1's pin
+     * plateau sat 17px past the divider). Zero = not measured yet
+     * (no-layout environments), and the map falls back to counts.
+     */
+    const rowKinds = ref({ line: 0, head: 0, gap: 0 });
+
+    function measureRowKinds() {
+      const root = host.value;
+      if (!root) return;
+      const line = root.querySelector<HTMLElement>(".hk-diff-viewer__line");
+      const head = root.querySelector<HTMLElement>(".hk-diff-viewer__hunk-head");
+      const gap = root.querySelector<HTMLElement>(".hk-diff-viewer__gap");
+      const next = {
+        line: line?.offsetHeight ?? 0,
+        head: head?.offsetHeight ?? 0,
+        gap: gap?.offsetHeight ?? 0,
+      };
+      // Write only on a real change: `rowKinds` feeds the scrollMap
+      // computed, and this runs from a watcher on that computed — an
+      // unconditional assign (a fresh object with equal values) would
+      // re-trigger it and recurse forever.
+      const prev = rowKinds.value;
+      if (
+        next.line !== prev.line || next.head !== prev.head || next.gap !== prev.gap
+      ) {
+        rowKinds.value = next;
+      }
+    }
+
+    /** The fold-aware scroll map, in RENDER order (mirrors the tree the
+     *  render function interleaves below, rung for rung). */
+    const scrollMap = computed<OverlayScrollMapSegment[]>(() => {
+      const segs: OverlayScrollMapSegment[] = [];
+      const mapOfGap = (gap: UnchangedGap) => {
+        const st = gapStates.value.get(gap.start);
+        const revealed = st?.revealed ?? 0;
+        const remaining = Math.max(gap.count - revealed, 0);
+        // Dom side counts the rows that actually RENDER (the same window
+        // walk the render does): a host answering an empty batch marks
+        // the gap done with zero rows shown, and the map must not claim
+        // dom extent for them — the DOCUMENT side keeps the lines.
+        const first =
+          gap.anchor === "end" ? gap.start + gap.count - revealed : gap.start;
+        let rendered = 0;
+        for (let no = first; no < first + revealed; no += 1) {
+          if (st?.lines.has(no)) rendered += 1;
+        }
+        const px = rowKinds.value.line > 0 ? rowKinds.value.line : 1;
+        const dividerPx =
+          rowKinds.value.gap > 0 ? rowKinds.value.gap : rowKinds.value.line > 0 ? rowKinds.value.line : 1;
+        const revealedRung = { dom: rendered * px, map: revealed };
+        const dividerRung = { dom: remaining > 0 ? dividerPx : 0, map: remaining };
+        // Mirror renderGap's order: anchor=end puts the divider ABOVE the
+        // revealed rows, anchor=start below them.
+        if (gap.anchor === "end") segs.push(dividerRung, revealedRung);
+        else segs.push(revealedRung, dividerRung);
+      };
+      const mapOfHunk = (idx: number) => {
+        const hunk = parsed.value.hunks[idx];
+        const linePx = rowKinds.value.line > 0 ? rowKinds.value.line : 1;
+        const headPx = rowKinds.value.head > 0 ? rowKinds.value.head : 1;
+        // The heading is chrome: it occupies a row and no document line.
+        segs.push({ dom: headPx, map: 0 });
+        const live = hunk.lines.filter((l) => l.kind !== "del").length;
+        if (collapsedHunks.value.has(idx)) {
+          // Body hidden: the whole new-side extent rides the heading rung.
+          segs.push({ dom: 0, map: live });
+        } else {
+          for (const line of hunk.lines) {
+            // Deleted rows render but exist only in the old file.
+            segs.push({ dom: linePx, map: line.kind === "del" ? 0 : 1 });
+          }
+        }
+      };
+      const gapsByHunk = new Map<number, UnchangedGap>();
+      for (const gap of gaps.value) gapsByHunk.set(gap.beforeHunk, gap);
+      for (let i = 0; i < parsed.value.hunks.length; i += 1) {
+        const gap = gapsByHunk.get(i);
+        if (gap) mapOfGap(gap);
+        mapOfHunk(i);
+      }
+      const trailing = gapsByHunk.get(parsed.value.hunks.length);
+      if (trailing) mapOfGap(trailing);
+      return segs;
+    });
+
     /** Gap states keyed by the gap's new-side start line (stable identity). */
     const gapStates = ref<Map<number, GapState>>(new Map());
 
+    // Emit on every fold change (and once up front) — the consumer feeds
+    // it straight into its HkScrollContainer's `mapSegments`. Declared
+    // AFTER gapStates: the immediate evaluation reads it, and a watch
+    // above the declaration would hit the temporal dead zone.
+    watch(scrollMap, (segs) => emit("scroll-map", segs), { immediate: true, flush: "post" });
+    // Re-measure after the DOM catches up (mount + every fold change:
+    // a first-ever divider/heading may have appeared).
+    onMounted(() => measureRowKinds());
+    watch([() => props.diff, () => props.totalLines, scrollMap], () => {
+      measureRowKinds();
+    }, { flush: "post" });
+
     // A fresh diff invalidates every cached context line and fold state.
     watch(
       () => [props.diff, props.totalLines],
@@ -267,7 +386,7 @@ export default defineComponent({
       const trailing = gapsByHunk.get(hunks.length);
       if (trailing) blocks.push(renderGap(trailing));
       return (
-        <div class="hk-diff-viewer">
+        <div class="hk-diff-viewer" ref={host}>
           <div class="hk-diff-viewer__body">{blocks}</div>
         </div>
       );

package/src/components/HkFilterPanel.scss

@@ -9,10 +9,12 @@
  * Row anatomy: [field label | operator symbol group | value control +
  * remove]. Rows are the page's ACTIVE conditions; the trailing add row
  * (button parked in the operator column, user direction 2026-10-12)
- * materializes the next latent field. Edits commit LIVE (the desktop
- * panel has no confirm button); the mobile sheet's single confirm merely
- * closes — the standard HkPopover sheetOnMobile split renders the same
- * panel in both shapes.
+ * opens the FIELD CHOOSER — a popover of the latent fields (user
+ * direction 2026-10-14: add means pick WHO, never append by declaration
+ * order) and the picked field materializes as a row. Edits commit LIVE
+ * (the desktop panel has no confirm button); the mobile sheet's single
+ * confirm merely closes — the standard HkPopover sheetOnMobile split
+ * renders the same panel in both shapes.
  *
  * ONE GRID, ONE AXIS (user direction 2026-10-12): the panel itself is
  * the grid and each row contributes `display: contents` cells, so the
@@ -21,6 +23,7 @@
  * puts every cell of every row on the same vertical axis — label,
  * symbol group, control, and remove button all share it.
  */
+@use "./menu-item" as mi;
 
 .hk-filter-panel {
   display: grid;
@@ -179,6 +182,64 @@
   cursor: not-allowed;
 }
 
+/* The trigger's open face while the chooser is up (the popup-select
+ * trigger's [data-state="open"] grammar — the user must see the button
+ * and its menu as one surface). */
+.hk-filter-panel-add[data-state="open"] {
+  background: rgb(var(--color-primary) / 12%);
+  color: rgb(var(--color-primary));
+}
+
+/* ── The add-condition field chooser ───────────────────────────────
+ * A popover of the LATENT fields (user direction 2026-10-14): the
+ * add button opens it, the picked field materializes as a row. Same
+ * popout geometry as the panel's popup selects (min-width floor, one
+ * 240px content cap, then viewport scroll); item rows speak the
+ * unified menu-item spec, so the list reads as one family with select
+ * options and menu rows around it. The mobile sheet form flows from
+ * the shared `.hk-is-sheet` token context — touch geometry comes
+ * free, no per-component media query. */
+.hk-filter-add-content {
+  min-width: 180px;
+  max-height: 240px;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--radius-sm);
+  overflow: hidden;
+}
+
+.hk-filter-add-viewport .hk-scroll-container-viewport {
+  display: flex;
+  flex-direction: column;
+}
+
+.hk-filter-add-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-2);
+}
+
+.hk-filter-add-item {
+  @include mi.item;
+  width: 100%;
+  justify-content: flex-start;
+  text-align: start;
+}
+
+/* Keyboard highlight face — identical values to the popup-select item's
+ * [data-highlighted]; hover comes from mi.item's own guarded :hover. */
+.hk-filter-add-item[data-highlighted] {
+  background: var(--c-primary-subtle, rgb(var(--color-primary) / 8%));
+  border-color: var(--c-primary-medium, rgb(var(--color-primary) / 25%));
+  color: rgb(var(--color-text));
+}
+
+.hk-filter-add-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
 /* Phones: the operator column widens a touch (user direction
  * 2026-10-12 — the old 4.25rem cap cramped the symbol group) and the
  * row lets the value control take the remaining width. The group itself

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

@@ -79,4 +79,15 @@ describe("HkFilterPanel stylesheet contract", () => {
     expect(media).toMatch(/max-width:\s*5\.25rem/);
     expect(media).toMatch(/minmax\(4\.75rem,\s*auto\)/);
   });
+
+  it("registers the chooser rows in the sheet-context token swap (44px touch rows)", () => {
+    // The add-condition chooser docks as a bottom sheet on mobile; its
+    // items must ride the unified menu-item SHEET geometry. The swap
+    // lives in _menu-item.scss's adopter list (pulled in via the
+    // @use chain) — an unregistered class silently keeps the 34px
+    // desktop rows (R1 2026-10-14 finding: exactly that happened).
+    expect(css).toMatch(
+      /\.hk-popover-panel\.hk-is-sheet[^{]*\.hk-filter-add-item[^{]*\{[^}]*--hk-menu-item-min-h:\s*44px/,
+    );
+  });
 });

package/src/components/HkFilterPanel.test.tsx

@@ -19,6 +19,11 @@ afterEach(() => {
     app.unmount();
     container.remove();
   }
+  // The field chooser (and any popout it opened) teleports to <body>
+  // (HkPopover) — sweep the leftovers so the next test starts clean.
+  document.body
+    .querySelectorAll(".hk-filter-add-item, .hk-popover-panel, .hk-select-popout-host")
+    .forEach((el) => el.remove());
 });
 
 const FIELDS = [
@@ -59,7 +64,34 @@ describe("HkFilterPanel", () => {
     expect(c.querySelectorAll(".hk-filter-panel-row")).toHaveLength(FIELDS.length);
   });
 
-  it("adds the next latent field with its kind's default operator and an empty value", () => {
+  it("opens a field chooser on the add verb instead of appending anything", async () => {
+    let seen: HkFilterState | null = null;
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: { tool: { op: "eq", value: "web" } },
+        "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
+      }),
+    );
+    const add = c.querySelector<HTMLButtonElement>(".hk-filter-panel-add")!;
+    expect(add.getAttribute("aria-haspopup")).toBe("menu");
+    expect(add.getAttribute("aria-expanded")).toBe("false");
+    add.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    // The click itself appends NOTHING (user direction 2026-10-14: add
+    // means pick WHO — never the next field in declaration order)…
+    expect(seen).toBeNull();
+    // …and the chooser lists ONLY the latent fields, in declaration
+    // order, labeled by the field defs.
+    const items = [...document.body.querySelectorAll(".hk-filter-add-item")].map(
+      (el) => el.textContent,
+    );
+    expect(items).toEqual(["Calls", "Agent", "Since"]);
+    expect(add.getAttribute("aria-expanded")).toBe("true");
+  });
+
+  it("materializes the picked field with its kind's default operator and closes the chooser", async () => {
     let seen: HkFilterState | null = null;
     const c = mount(
       h(HkFilterPanel, {
@@ -69,9 +101,48 @@ describe("HkFilterPanel", () => {
       }),
     );
     c.querySelector(".hk-filter-panel-add")!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const item = [...document.body.querySelectorAll(".hk-filter-add-item")].find(
+      (el) => el.textContent === "Agent",
+    )!;
+    expect(item, "chooser lists the latent Agent field").toBeTruthy();
+    item.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
     expect(seen).not.toBeNull();
-    // "count" is the next unused field in declaration order; its kind's
-    // first operator (lt) and an empty value.
+    // The picked field joins with its kind's first operator (select →
+    // eq) and an empty value; the existing condition is untouched.
+    expect(seen!["agent"]).toEqual({ op: "eq", value: "" });
+    expect(seen!["tool"]).toEqual({ op: "eq", value: "web" });
+    // The chooser leaves with the pick (after the leave settle).
+    await new Promise((r) => setTimeout(r, 60));
+    expect(document.body.querySelector(".hk-filter-add-item")).toBeNull();
+  });
+
+  it("drives the chooser from the add button — arrows highlight, Enter picks", async () => {
+    let seen: HkFilterState | null = null;
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: {},
+        "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
+      }),
+    );
+    const add = c.querySelector<HTMLButtonElement>(".hk-filter-panel-add")!;
+    // ArrowDown opens the chooser with the first item highlighted.
+    add.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    const items = [...document.body.querySelectorAll(".hk-filter-add-item")];
+    expect(items).toHaveLength(4);
+    expect(items[0]!.getAttribute("data-highlighted")).toBe("true");
+    // ArrowDown again moves the highlight to the second item.
+    add.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true }));
+    await Promise.resolve();
+    expect(items[1]!.getAttribute("data-highlighted")).toBe("true");
+    // Enter confirms the highlighted field — "Calls" (number kind → lt).
+    add.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter", bubbles: true }));
+    await Promise.resolve();
     expect(seen!["count"]).toEqual({ op: "lt", value: "" });
   });