@celestia-island/hikari 0.55.322 → 0.55.324

package/package.json

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

package/src/components/HkAdminTablePage.test.tsx

@@ -138,4 +138,61 @@ describe("HkAdminTablePage", () => {
     expect(got[0]![0]).toBe(rows[0]);
     expect(got[0]![1]).toBe(btn);
   });
+
+  it("renders the count readout in the header, preferring the declared total", () => {
+    // User direction 2026-11-08: every standard list names its size —
+    // the scaffold owns the "N in total" wording so pages stop
+    // hand-rolling their own count spans.
+    const c = mount(
+      h(HkAdminTablePage, {
+        title: "T",
+        rows: Array.from({ length: 12 }, (_, i) => ({ name: `r${i}` })),
+        columns: COLS,
+        total: 500,
+      }),
+    );
+    const readout = c.querySelector('[data-testid="hk-admin-table-page-count"]');
+    expect(readout).not.toBeNull();
+    expect(readout!.textContent).toBe("500 in total");
+  });
+
+  it("falls back to the delivered row count when no total is declared", () => {
+    const c = mount(
+      h(HkAdminTablePage, { title: "T", rows: [{ name: "a" }, { name: "b" }], columns: COLS }),
+    );
+    expect(c.querySelector('[data-testid="hk-admin-table-page-count"]')!.textContent).toBe("2 in total");
+  });
+
+  it("hides the readout on an empty list and honors countReadout:false", () => {
+    const empty = mount(h(HkAdminTablePage, { title: "T", rows: [], columns: COLS }));
+    expect(empty.querySelector('[data-testid="hk-admin-table-page-count"]')).toBeNull();
+    const optedOut = mount(
+      h(HkAdminTablePage, { title: "T", rows: [{ name: "a" }], columns: COLS, countReadout: false }),
+    );
+    expect(optedOut.querySelector('[data-testid="hk-admin-table-page-count"]')).toBeNull();
+  });
+
+  it("renders the readout beside page actions, rightmost", () => {
+    const slots = { actions: () => h("button", { class: "page-action" }, "Do") };
+    const c = mount(
+      h(HkAdminTablePage, { title: "T", rows: [{ name: "a" }], columns: COLS }, slots),
+    );
+    const header = c.querySelector(".hk-page-header")!;
+    expect(header.querySelector("button.page-action")).not.toBeNull();
+    // The count span trails the page's own actions inside the header row.
+    const actions = header.querySelector(".hk-page-header-actions") ?? header;
+    expect(actions.textContent).toContain("1 in total");
+  });
+
+  it("keeps the headerless actions band for a bare readout", () => {
+    // No title: the band is the readout's only host — one slim right
+    // aligned row, never a second stacked header (安全扫描 report,
+    // 2026-11-08).
+    const c = mount(
+      h(HkAdminTablePage, { rows: [{ name: "a" }], columns: COLS }),
+    );
+    const readout = c.querySelector('[data-testid="hk-admin-table-page-count"]');
+    expect(readout).not.toBeNull();
+    expect(readout!.textContent).toBe("1 in total");
+  });
 });

package/src/components/HkAdminTablePage.tsx

@@ -69,8 +69,17 @@ export const HkAdminTablePage = defineComponent({
      *  denominator (the server count behind a paged list — chest's
      *  usePagedTableFetch total). Forwarded to HTable, which
      *  self-registers with the enclosing shell viewport's registrar.
-     *  Omitted: the pill falls back to counting the delivered DOM rows. */
+     *  Omitted: the pill falls back to counting the delivered DOM rows.
+     *  The SAME number feeds the header's count readout below. */
     total: { type: Number, default: undefined },
+    /** Top-right "共 N 条" count readout in the page header (user
+     *  direction 2026-11-08: EVERY standard list names its size — the
+     *  scaffold owns the wording so pages stop hand-rolling their own
+     *  "{n} items" spans). Prefers `total` (the server count behind a
+     *  paged list) and falls back to the delivered row count; hidden at
+     *  zero so a fresh or empty list shows no "共 0 条" flash. Pages
+     *  that render their own count elsewhere set this false. */
+    countReadout: { type: Boolean, default: true },
   },
   emits: {
     reorder: (_fromIndex: number, _toIndex: number) => true,
@@ -80,21 +89,53 @@ export const HkAdminTablePage = defineComponent({
     return () => {
       const { t } = useI18n();
       const emptyTitle = props.emptyTitle || t("hikari::tablePage.emptyTitle", "No data");
+      // The header count readout: the authoritative total when declared,
+      // else the delivered rows; hidden at zero (an empty list's empty
+      // state already says so — "共 0 条" next to it reads as noise).
+      const readoutCount = props.total ?? props.rows.length;
+      const countReadout =
+        props.countReadout && readoutCount > 0 ? (
+          <span
+            data-testid="hk-admin-table-page-count"
+            style={{
+              fontSize: "var(--text-xs, 0.75rem)",
+              color: "rgb(var(--color-muted, var(--color-text-secondary)))",
+              fontVariantNumeric: "tabular-nums",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {t("hikari::tablePage.totalCount", "{n} in total").replace("{n}", String(readoutCount))}
+          </span>
+        ) : null;
       // Extracted to an identifier: JSX children given as an inline object
       // literal are not normalized to slots the way a bound one is (the
       // chest retrySlots idiom this mirrors relies on the identifier form).
       const emptySlots = slots["empty-action"]
         ? { action: () => slots["empty-action"]?.() }
         : undefined;
+      // The readout rides the header's actions row RIGHTMOST — after the
+      // page's own actions — and is the band's sole content on a
+      // headerless scaffold, so a bare readout never claims a full-width
+      // row of its own (the 安全扫描 double-margin report, 2026-11-08).
+      const actionsSlot = slots.actions
+        ? () => (
+            <>
+              {slots.actions?.()}
+              {countReadout}
+            </>
+          )
+        : countReadout
+          ? () => countReadout
+          : undefined;
       return (
         <div>
           {props.title ? (
             <HkPageHeader title={props.title} subtitle={props.subtitle} icon={props.icon} dense={props.dense}>
-              {{ actions: () => slots.actions?.() }}
+              {{ actions: actionsSlot }}
             </HkPageHeader>
-          ) : slots.actions ? (
-            <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: "var(--space-16, 1rem)" }}>
-              {slots.actions()}
+          ) : actionsSlot ? (
+            <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "var(--space-8, 0.5rem)", marginBottom: "var(--space-16, 1rem)" }}>
+              {actionsSlot()}
             </div>
           ) : null}
           {slots.filter ? <div class="hk-admin-table-page-filter">{slots.filter()}</div> : null}

package/src/components/HkAvatar.scss

@@ -50,6 +50,34 @@
   font-weight: 600;
 }
 
+/* Optical vertical centering for the single-glyph fallback (2026-11-08
+ * user report: 头像首字母偏下). Flex centers the LINE box, but a capital
+ * glyph sits on the baseline — below the line box's geometric center on
+ * every UI font whose ascent exceeds its descent (Noto Sans CJK ≈0.065em,
+ * Windows Segoe UI ≈0.064em: ≈1px at md's 16px, visible in a circle).
+ * `text-box: trim-both cap alphabetic` trims the line box to
+ * [cap-top, baseline], so the centered box hugs the glyph ink — the
+ * avatar-initial case the property was designed for. Trim only reaches
+ * BLOCK-container line boxes (Chromium ignores it on a flex container's
+ * anonymous text block — verified headless), so under the guard the span
+ * swaps flex for block + align-content/text-align centering: same box,
+ * the trimmed line is centered on the block axis instead. Engines without
+ * text-box (pre-133 Chromium / pre-18.2 Safari / pre-154 Firefox) fail
+ * @supports and keep the flex anatomy unchanged — zero regression.
+ * CJK initials stay centered: the ideograph ink center lands on the
+ * [cap, baseline] band center (德 verified side by side, headless
+ * Chrome). Support note: the guard tests the `text-box` SHORTHAND,
+ * which Chromium parses from 133 (the longhands land in 128) — engines
+ * older than that fail @supports and keep the flex anatomy. */
+@supports (text-box: trim-both cap alphabetic) {
+  .hk-avatar-fallback {
+    display: block;
+    align-content: center;
+    text-align: center;
+    text-box: trim-both cap alphabetic;
+  }
+}
+
 [data-theme="dark"] .hk-avatar {
   background-color: var(--hi-surface);
   color: var(--hi-color-text-secondary, rgba(102,102,102,0.6));

package/src/components/HkAvatarFallback.centering.styles.test.ts

@@ -0,0 +1,147 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { compile } from "sass";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Compiled-stylesheet guard for the avatar letter-fallback optical
+ * centering (2026-11-08 user report: 头像首字母偏下).
+ *
+ * Flex centering centers the LINE box, but a capital glyph sits on the
+ * baseline — below the line box's geometric center on every UI font
+ * whose ascent exceeds its descent (Noto Sans CJK ≈0.065em, Windows
+ * Segoe UI ≈0.064em). The fix trims the line box to [cap-top, baseline]
+ * with `text-box: trim-both cap alphabetic` under an @supports guard
+ * (trim only reaches BLOCK-container line boxes — Chromium ignores it on
+ * a flex container's anonymous text block, verified headless — so the
+ * height:100% fallbacks swap flex for block + align-content centering
+ * under the guard; the auto-height menu fallback only adds the trim).
+ *
+ * Vitest stubs CSS, so the runtime suite can never catch a lost rule;
+ * this guard pins the COMPILED sheets. All three sheets are mirrored
+ * verbatim into the Rust crate (vue-mirror drift tests), which catches
+ * one-sided edits — this file catches the block disappearing from BOTH
+ * copies at once. Supported engines: Chromium 133+, Safari 18.2+,
+ * Firefox 154+ (the guard tests the text-box shorthand; the longhands
+ * exist in Chromium from 128) — anything older fails @supports and keeps
+ * the flex anatomy (the pre-fix behavior), which is why the base rules
+ * below are also pinned to keep their flex centering.
+ */
+
+const componentDir = resolve(dirname(fileURLToPath(import.meta.url)));
+
+const SUPPORTS_PREAMBLE = "@supports (text-box: trim-both cap alphabetic)";
+
+const css = {
+  avatar: compile(resolve(componentDir, "HkAvatar.scss"), { style: "expanded" }).css,
+  menuIdentity: compile(resolve(componentDir, "HkMenuIdentityItem.scss"), { style: "expanded" }).css,
+  adminTokens: compile(resolve(componentDir, "../styles/admin-tokens.scss"), { style: "expanded" }).css,
+};
+
+/** The body of the FIRST @supports block with exactly `preamble`, brace-matched. */
+function supportsBody(sheetCss: string, preamble: string, label: string): string {
+  const start = sheetCss.indexOf(preamble);
+  expect(start, `${label}: ${preamble} block present in the compiled sheet`).toBeGreaterThanOrEqual(0);
+  let depth = 0;
+  let open = -1;
+  for (let at = start + preamble.length; at < sheetCss.length; at += 1) {
+    const ch = sheetCss[at];
+    if (ch === "{") {
+      if (open < 0) open = at;
+      depth += 1;
+    } else if (ch === "}") {
+      depth -= 1;
+      if (depth === 0) return sheetCss.slice(open + 1, at);
+    }
+  }
+  throw new Error(`${label}: unterminated @supports block`);
+}
+
+/** The prelude of the FIRST rule inside the first `@supports` block with
+ *  exactly `preamble` — the selector the guard actually targets. */
+function guardedSelector(sheetCss: string, preamble: string, label: string): string {
+  const body = supportsBody(sheetCss, preamble, label);
+  const open = body.indexOf("{");
+  return body.slice(0, open).trim();
+}
+
+/** The body of the top-level rule whose prelude is exactly `selector`. */
+function ruleFor(sheetCss: string, selector: string, label: string): string {
+  const needle = `${selector} {`;
+  const start = sheetCss.indexOf(needle);
+  expect(start, `${label}: ${selector} rule present in the compiled sheet`).toBeGreaterThanOrEqual(0);
+  const close = sheetCss.indexOf("}", start);
+  return sheetCss.slice(start, close + 1);
+}
+
+describe("avatar letter-fallback optical centering (text-box guard)", () => {
+  it("positive control: the extractor finds the known base anatomy", () => {
+    // If this stops matching, ruleFor/supportsBody are broken — fix the
+    // extractor, not the assertions below.
+    expect(ruleFor(css.avatar, ".hk-avatar", "avatar")).toContain("align-items: center");
+    expect(ruleFor(css.adminTokens, ".s-user-avatar", "admin-tokens")).toContain("display: flex");
+  });
+
+  it("hk-avatar-fallback: guard block swaps flex for block + centered trimmed line", () => {
+    const body = supportsBody(css.avatar, SUPPORTS_PREAMBLE, "avatar");
+    expect(guardedSelector(css.avatar, SUPPORTS_PREAMBLE, "avatar")).toBe(".hk-avatar-fallback");
+    expect(body).toContain("display: block");
+    expect(body).toContain("align-content: center");
+    expect(body).toContain("text-align: center");
+    expect(body).toContain("text-box: trim-both cap alphabetic");
+  });
+
+  it("hk-avatar-fallback: base rule keeps the flex anatomy (no-trim engines)", () => {
+    const rule = ruleFor(css.avatar, ".hk-avatar-fallback", "avatar");
+    expect(rule).toContain("display: flex");
+    expect(rule).toContain("align-items: center");
+    expect(rule).toContain("justify-content: center");
+  });
+
+  it("s-user-avatar: guard block swaps flex for block + centered trimmed line", () => {
+    const body = supportsBody(css.adminTokens, SUPPORTS_PREAMBLE, "admin-tokens");
+    expect(guardedSelector(css.adminTokens, SUPPORTS_PREAMBLE, "admin-tokens")).toBe(".s-user-avatar");
+    expect(body).toContain("display: block");
+    expect(body).toContain("align-content: center");
+    expect(body).toContain("text-align: center");
+    expect(body).toContain("text-box: trim-both cap alphabetic");
+  });
+
+  it("s-user-avatar: base rule keeps the flex anatomy (no-trim engines)", () => {
+    const rule = ruleFor(css.adminTokens, ".s-user-avatar", "admin-tokens");
+    expect(rule).toContain("display: flex");
+    expect(rule).toContain("align-items: center");
+    expect(rule).toContain("justify-content: center");
+  });
+
+  it("menu identity fallback: trim only — auto-height flex item needs no anatomy swap", () => {
+    const body = supportsBody(css.menuIdentity, SUPPORTS_PREAMBLE, "menu-identity");
+    expect(guardedSelector(css.menuIdentity, SUPPORTS_PREAMBLE, "menu-identity")).toBe(
+      ".hk-menu-identity-item__fallback",
+    );
+    expect(body).toContain("text-box: trim-both cap alphabetic");
+    expect(body).not.toContain("display:");
+  });
+});
+
+describe("avatar letter-fallback sheets stay mirrored", () => {
+  // The Rust crate compiles vendored copies of these sheets; the drift
+  // tests over there fail on one-sided edits. This re-reads the SOURCE
+  // files to pin the mirror files' presence next to the pinned behavior,
+  // so deleting the guard from BOTH copies cannot slip through silently
+  // (drift tests compare copies — they stay green when both sides lose
+  // the block together).
+  it("vendored mirror copies still carry the guard (double-sided delete tripwire)", () => {
+    const crateRoot = resolve(componentDir, "../../../components/src/styles/vue-mirror");
+    for (const rel of [
+      "components/HkAvatar.scss",
+      "components/HkMenuIdentityItem.scss",
+      "styles/admin-tokens.scss",
+    ]) {
+      const mirror = readFileSync(resolve(crateRoot, rel), "utf8");
+      expect(mirror, `${rel} mirror carries the guard`).toContain("text-box: trim-both cap alphabetic");
+    }
+  });
+});

package/src/components/HkFilterOperatorIcon.test.tsx

@@ -0,0 +1,61 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import HkFilterOperatorIcon from "./HkFilterOperatorIcon";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(op: string) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => h(HkFilterOperatorIcon, { op: op as never }) });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+/** The custom glyphs are hikari-authored SVG in lucide's stroke grammar.
+ *  Pin the exact path data: the ordered four's underlines ride y=19 — the
+ *  SAME optical center as lucide's Equal / EqualNot (ink y5..19). The
+ *  first cut drew them at y=20 and the ≥/≤ glyphs sat visibly low against
+ *  the equals family inside the 28px operator toggles (user report
+ *  2026-11-08); this pin makes a revert to y=20 RED (mutation-verified:
+ *  reverting both underlines failed this suite 2/2). */
+describe("HkFilterOperatorIcon custom glyph geometry", () => {
+  it("draws lt/gt chevrons without an underline", () => {
+    const ds = (op: string) =>
+      [...mount(op).querySelectorAll("svg path")].map((p) => p.getAttribute("d"));
+    expect(ds("lt")).toEqual(["m19 6-11 6 11 6"]);
+    expect(ds("gt")).toEqual(["m5 6 11 6-11 6"]);
+  });
+
+  it("draws the lte/gte underlines at y=19 (optically centered on y=12)", () => {
+    const ds = (op: string) =>
+      [...mount(op).querySelectorAll("svg path")].map((p) => p.getAttribute("d"));
+    expect(ds("lte")).toEqual(["m19 5-11 6 11 6", "M8 19h11"]);
+    expect(ds("gte")).toEqual(["m5 5 11 6-11 6", "M5 19h11"]);
+    // Belt against the exact regression: no underline path may reach
+    // y=20 — the ink band must stay y5..19 like the lucide equals pair.
+    for (const d of [...ds("lte"), ...ds("gte")]) {
+      expect(d).not.toMatch(/20/);
+    }
+  });
+
+  it("composes napprox from the lucide wave pair + EqualNot slash", () => {
+    const ds = [...mount("napprox").querySelectorAll("svg path")].map((p) =>
+      p.getAttribute("d"),
+    );
+    expect(ds).toEqual([
+      "M5 15a6.5 6.5 0 0 1 7 0 6.5 6.5 0 0 0 7 0",
+      "M5 9a6.5 6.5 0 0 1 7 0 6.5 6.5 0 0 0 7 0",
+      "m5 19 14-14",
+    ]);
+  });
+});

package/src/components/HkFilterOperatorIcon.tsx

@@ -24,9 +24,15 @@ const NAPPROX_PATHS = [
 const CUSTOM: Partial<Record<HkFilterOperator, string[]>> = {
   napprox: NAPPROX_PATHS,
   lt: ["m19 6-11 6 11 6"],
-  lte: ["m19 5-11 6 11 6", "M8 20h11"],
+  // The comparison underline rides y=19, NOT y=20: the chevron spans
+  // y5..17, so a y19 line centers the ink band at y12 — the SAME optical
+  // center lucide's Equal / EqualNot (paths y5..19) draw. The old y20
+  // lines dragged the ink to y5..20 and the ≷ glyphs sat visibly low
+  // against the equals family inside the 28px operator toggles (user
+  // report 2026-11-08: ≥/≤ 没有与 = 垂直对齐).
+  lte: ["m19 5-11 6 11 6", "M8 19h11"],
   gt: ["m5 6 11 6-11 6"],
-  gte: ["m5 5 11 6-11 6", "M5 20h11"],
+  gte: ["m5 5 11 6-11 6", "M5 19h11"],
 };
 
 const LUCIDE: Partial<Record<HkFilterOperator, typeof Equal>> = {

package/src/components/HkFilterPanel.test.tsx

@@ -376,3 +376,100 @@ describe("hkFieldMatches — the canonical combination semantics (2026-10-15)",
     expect(hkFieldMatches("text", [{ key: "x", op: "approx" as const, value: "WEB" }], "my-web-tool")).toBe(true);
   });
 });
+
+describe("HkFilterPanel pinned fields (枚举, 2026-11-08)", () => {
+  const PINNED_FIELDS = [
+    { key: "tier", label: "Tier", kind: "text" as const, pinned: true },
+    { key: "agent", label: "Agent", kind: "select" as const, pinned: true, options: [{ value: "a1", label: "Agent One" }] },
+    { key: "tool", label: "Tool", kind: "text" as const, placeholder: "web_automation" },
+  ];
+
+  it("renders pinned fields as permanent rows ahead of any state", () => {
+    const c = mount(h(HkFilterPanel, { fields: PINNED_FIELDS, modelValue: [] }));
+    // Two pinned fields, zero state — the rows exist anyway, marked
+    // data-pinned, and the panel is NOT data-empty anymore.
+    const rows = c.querySelectorAll(".hk-filter-panel-row");
+    expect(rows).toHaveLength(2);
+    expect(rows[0]!.getAttribute("data-pinned")).toBe("true");
+    expect(rows[1]!.getAttribute("data-pinned")).toBe("true");
+    const labels = [...c.querySelectorAll(".hk-filter-panel-field")].map((el) => el.textContent);
+    expect(labels).toEqual(["Tier", "Agent"]);
+    // Permanent furniture: NO drop verb on pinned rows.
+    expect(c.querySelector('[data-pinned="true"] .hk-filter-panel-remove')).toBeNull();
+    expect(c.querySelector(".hk-filter-panel")!.getAttribute("data-empty")).toBeNull();
+  });
+
+  it("a pinned edit appends its condition once, then patches in place", async () => {
+    let seen: HkFilterState | null = null;
+    const fields = [{ key: "tier", label: "Tier", kind: "text" as const, pinned: true }];
+    const c = mount(
+      h(HkFilterPanel, { fields, modelValue: [], "onUpdate:modelValue": (s: HkFilterState) => (seen = s) }),
+    );
+    const input = c.querySelector<HTMLInputElement>(".hk-filter-panel-row input")!;
+    input.value = "core";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    await Promise.resolve();
+    // First edit on an untouched pinned row APPENDS the condition.
+    expect(seen).toEqual([{ key: "tier", op: "approx", value: "core" }]);
+
+    const c2 = mount(
+      h(HkFilterPanel, {
+        fields,
+        modelValue: [{ key: "tier", op: "approx", value: "core" }],
+        "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
+      }),
+    );
+    const input2 = c2.querySelector<HTMLInputElement>(".hk-filter-panel-row input")!;
+    input2.value = "edge";
+    input2.dispatchEvent(new Event("input", { bubbles: true }));
+    await Promise.resolve();
+    // The row is bound to the existing entry — edits patch it, never
+    // stack a second condition on the same pinned field.
+    expect(seen).toEqual([{ key: "tier", op: "approx", value: "edge" }]);
+  });
+
+  it("pinned fields never appear in the chooser; an all-pinned panel has no add verb", async () => {
+    let seen: HkFilterState | null = null;
+    const c = mount(
+      h(HkFilterPanel, { fields: PINNED_FIELDS, modelValue: [], "onUpdate:modelValue": (s: HkFilterState) => (seen = s) }),
+    );
+    c.querySelector(".hk-filter-panel-add")!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    // Only the on-demand fields are offered.
+    const items = [...document.body.querySelectorAll(".hk-filter-add-item")].map((el) => el.textContent);
+    expect(items).toEqual(["Tool"]);
+
+    const only = mount(h(HkFilterPanel, { fields: PINNED_FIELDS.slice(0, 2), modelValue: [] }));
+    expect(only.querySelector(".hk-filter-panel-add")).toBeNull();
+    void seen;
+  });
+
+  it("surplus conditions on a pinned key render as ordinary removable rows", async () => {
+    let seen: HkFilterState | null = null;
+    const fields = [{ key: "tier", label: "Tier", kind: "text" as const, pinned: true }];
+    const c = mount(
+      h(HkFilterPanel, {
+        fields,
+        modelValue: [
+          { key: "tier", op: "eq", value: "core" },
+          { key: "tier", op: "approx", value: "edge" },
+        ],
+        "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
+      }),
+    );
+    // One permanent bound row + ONE surplus row carrying a drop verb —
+    // nothing is silently dropped.
+    const rows = c.querySelectorAll(".hk-filter-panel-row");
+    expect(rows).toHaveLength(2);
+    expect(rows[0]!.getAttribute("data-pinned")).toBe("true");
+    expect(rows[1]!.getAttribute("data-pinned")).toBeNull();
+    expect(rows[1]!.querySelector(".hk-filter-panel-remove")).not.toBeNull();
+    (rows[1]!.querySelector(".hk-filter-panel-remove") as HTMLElement).dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    await Promise.resolve();
+    // The bound entry (the FIRST condition on the pinned key) survives.
+    expect(seen).toEqual([{ key: "tier", op: "eq", value: "core" }]);
+  });
+});