@celestia-island/hikari 0.55.323 → 0.55.324

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.323",
+  "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/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" }]);
+  });
+});