@celestia-island/hikari 0.55.164 → 0.55.165

package/package.json

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

package/src/components/HkFilterOperatorIcon.tsx

@@ -0,0 +1,69 @@
+import { defineComponent } from "vue";
+import { Equal, EqualApproximately, EqualNot } from "lucide-vue-next";
+
+import type { HkFilterOperator } from "./HkFilterPanel";
+
+/**
+ * The operator glyph as an ICON, never a text character (user direction
+ * 2026-10-15: font stacks render U+2249 ≉ unevenly — the operator
+ * buttons are UI chrome, so they draw like every other icon in the
+ * family). Lucide ships =, ≠ and ≈; the ordered four and ≉ are
+ * hikari-authored in lucide's exact stroke grammar (24×24, stroke 2,
+ * currentColor) — ≉ is lucide's own ≈ path pair with EqualNot's slash
+ * composed in, so the set reads as one family.
+ */
+
+// Lucide's EqualApproximately path pair (ISC, verbatim) + its EqualNot
+// slash — composed rather than reinvented.
+const NAPPROX_PATHS = [
+  "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",
+];
+
+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"],
+  gt: ["m5 6 11 6-11 6"],
+  gte: ["m5 5 11 6-11 6", "M5 20h11"],
+};
+
+const LUCIDE: Partial<Record<HkFilterOperator, typeof Equal>> = {
+  eq: Equal,
+  ne: EqualNot,
+  approx: EqualApproximately,
+};
+
+export default defineComponent({
+  name: "HkFilterOperatorIcon",
+  props: {
+    op: { type: String as () => HkFilterOperator, required: true },
+    size: { type: Number, default: 14 },
+  },
+  setup(props) {
+    return () => {
+      const Lucide = LUCIDE[props.op];
+      if (Lucide) return <Lucide size={props.size} aria-hidden="true" />;
+      const paths = CUSTOM[props.op]!;
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width={props.size}
+          height={props.size}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          {paths.map((d) => (
+            <path key={d} d={d} />
+          ))}
+        </svg>
+      );
+    };
+  },
+});

package/src/components/HkFilterPanel.scss

@@ -42,6 +42,14 @@
   /* Minimum outer margins for every column (user direction
    * 2026-10-12): the rows never touch the panel edge. */
   padding: var(--space-8, 0.5rem) var(--space-12, 0.75rem);
+  /* Empty panel collapses to the add verb's own width (user direction
+   * 2026-10-15): no rows means nothing to align columns against, so the
+   * popover hugs the 添加条件 button instead of holding the full-row
+   * width. Desktop only — the phone branch below re-widens to 100%. */
+  &[data-empty] {
+    width: max-content;
+    min-width: 0;
+  }
 }
 
 /* A row is not a box — it donates its three cells to the panel grid so

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

@@ -73,6 +73,12 @@ describe("HkFilterPanel stylesheet contract", () => {
     expect(rule).toContain("justify-self: start");
   });
 
+  it("the empty panel collapses to the add verb's own width", () => {
+    // 2026-10-15: no rows = nothing to align columns against — the
+    // desktop popover hugs the 添加条件 button (data-empty marker).
+    expect(css).toMatch(/\.hk-filter-panel\[data-empty\]\s*\{[^}]*width:\s*max-content/);
+  });
+
   it("the phone operator column keeps its widened cap (≥ the old 4.25rem)", () => {
     expect(css).toContain("@media (max-width: 767px)");
     const media = css.slice(css.indexOf("@media (max-width: 767px)"));

package/src/components/HkFilterPanel.test.tsx

@@ -45,6 +45,9 @@ describe("HkFilterPanel (array state, 2026-10-15)", () => {
     expect(c.querySelectorAll(".hk-filter-panel-row")).toHaveLength(0);
     expect(c.querySelector(".hk-filter-panel-add")).toBeTruthy();
     expect(c.querySelectorAll(".hk-filter-panel-field")).toHaveLength(0);
+    // The empty panel carries the collapse marker (width hugs the add
+    // verb on desktop — pinned in the styles contract test).
+    expect(c.querySelector(".hk-filter-panel")!.getAttribute("data-empty")).toBe("true");
 
     const state: HkFilterState = [
       { key: "tool", op: "approx", value: "web" },
@@ -188,13 +191,15 @@ describe("HkFilterPanel (array state, 2026-10-15)", () => {
     );
     const rows = [...c.querySelectorAll(".hk-filter-panel-row")];
     const opsOf = (row: Element) =>
-      [...row.querySelectorAll(".hk-filter-panel-op")].map((b) => b.textContent);
+      [...row.querySelectorAll(".hk-filter-panel-op")].map((b) => b.getAttribute("title"));
     // Text speaks ONLY the fuzzy pair (2026-10-15: 等于其实是模糊匹配 —
     // label it ≈, and the exclusion ≉).
-    expect(opsOf(rows[0]!)).toEqual(["≈", "≉"]);
-    expect(opsOf(rows[1]!)).toEqual(["<", "≤", "=", "≥", ">"]);
-    expect(opsOf(rows[2]!)).toEqual(["=", "≠"]);
-    expect(opsOf(rows[3]!)).toEqual(["≥", "≤"]);
+    expect(opsOf(rows[0]!)).toEqual(["fuzzy match", "fuzzy non-match"]);
+    expect(opsOf(rows[1]!)).toEqual(["less than", "at most", "equals", "at least", "greater than"]);
+    // Select speaks ONLY the eq/ne pair — rendered as the fuzzy pair
+    // glyphs (2026-10-15 follow-up: 等于/不等于 换成 ≈/≉).
+    expect(opsOf(rows[2]!)).toEqual(["fuzzy match", "fuzzy non-match"]);
+    expect(opsOf(rows[3]!)).toEqual(["at least", "at most"]);
   });
 
   it("emits a new state when an operator is picked (live, no confirm)", async () => {
@@ -207,7 +212,7 @@ describe("HkFilterPanel (array state, 2026-10-15)", () => {
       }),
     );
     const notMatch = [...c.querySelectorAll(".hk-filter-panel-row")[0]!.querySelectorAll(".hk-filter-panel-op")]
-      .find((b) => b.textContent === "≉")!;
+      .find((b) => b.getAttribute("title") === "fuzzy non-match")!;
     notMatch.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     await Promise.resolve();
     expect(seen).toEqual([{ key: "tool", op: "napprox", value: "web" }]);

package/src/components/HkFilterPanel.tsx

@@ -5,6 +5,7 @@ import HkDatePicker from "./HkDatePicker";
 import HkInput from "./HkInput";
 import HkPopover from "./HkPopover";
 import HkPopupSelect, { type HkPopupSelectOption } from "./HkPopupSelect";
+import HkFilterOperatorIcon from "./HkFilterOperatorIcon";
 import HkScrollContainer from "./HkScrollContainer";
 import { useI18n } from "../i18n/context";
 import "./HkFilterPanel.scss";
@@ -53,16 +54,15 @@ export interface HkFilterCondition {
  * field chooser. */
 export type HkFilterState = HkFilterCondition[];
 
-const OPERATOR_SYMBOL: Record<HkFilterOperator, string> = {
-  eq: "=",
-  ne: "≠",
-  approx: "≈",
-  napprox: "≉",
-  lt: "<",
-  lte: "≤",
-  gte: "≥",
-  gt: ">",
-};
+/** Which ICON the operator renders as: fields that speak ONLY the
+ * eq/ne pair (select) render the fuzzy pair ≈/≉ (2026-10-15 — 等于
+ * 其实是模糊匹配 applies to them too); number's exact = keeps the
+ * plain equals icon inside the ordered five. */
+function glyphOpFor(kind: HkFilterFieldDef["kind"], op: HkFilterOperator): HkFilterOperator {
+  if (kind === "select" && op === "eq") return "approx";
+  if (kind === "select" && op === "ne") return "napprox";
+  return op;
+}
 
 const OPERATOR_LABEL: Record<HkFilterOperator, { key: string; fallback: string }> = {
   eq: { key: "hikari::filterPanel.op.eq", fallback: "equals" },
@@ -309,7 +309,7 @@ export default defineComponent({
     return () => {
       const label = props.label ?? t("hikari::filterBar.trigger", "Filters");
       return (
-        <div class="hk-filter-panel" data-testid="hk-filter-panel" data-active={activeCount.value > 0 || undefined} aria-label={label}>
+        <div class="hk-filter-panel" data-testid="hk-filter-panel" data-active={activeCount.value > 0 || undefined} data-empty={rows.value.length === 0 || undefined} aria-label={label}>
           {rows.value.map((cond, index) => {
             const field = fieldByKey(cond.key);
             // An undeclared key (the page renamed a field under live
@@ -322,20 +322,23 @@ export default defineComponent({
               <div key={index} class="hk-filter-panel-row" data-kind={kind}>
                 <span class="hk-filter-panel-field">{labelText}</span>
                 <div class="hk-filter-panel-ops" role="group" aria-label={`${labelText} — ${label}`}>
-                  {ops.map((op) => (
+                  {ops.map((op) => {
+                    const glyph = glyphOpFor(kind, op);
+                    return (
                     <button
                       key={op}
                       type="button"
                       class="hk-filter-panel-op"
                       aria-pressed={cond.op === op}
-                      aria-label={t(OPERATOR_LABEL[op].key, OPERATOR_LABEL[op].fallback)}
-                      title={t(OPERATOR_LABEL[op].key, OPERATOR_LABEL[op].fallback)}
+                      aria-label={t(OPERATOR_LABEL[glyph].key, OPERATOR_LABEL[glyph].fallback)}
+                      title={t(OPERATOR_LABEL[glyph].key, OPERATOR_LABEL[glyph].fallback)}
                       disabled={props.disabled || !field}
                       onClick={() => emitCondition(index, { op })}
                     >
-                      {OPERATOR_SYMBOL[op]}
+                      <HkFilterOperatorIcon op={glyph} />
                     </button>
-                  ))}
+                    );
+                  })}
                 </div>
                 <div class="hk-filter-panel-value">
                   <div class="hk-filter-panel-control">

package/src/components/HkFilterTrigger.test.tsx

@@ -319,7 +319,7 @@ describe("HkFilterTrigger", () => {
     // stand down for it, not swallow it. (Pick the ≈ toggle; the first
     // op button is the already-pressed =.)
     const op = [...document.body.querySelectorAll<HTMLButtonElement>(".hk-filter-panel .hk-filter-panel-op")].find(
-      (b) => b.textContent === "≈",
+      (b) => b.getAttribute("title") === "fuzzy match",
     )!;
     op.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     await Promise.resolve();

package/src/components/HkFilterTrigger.tsx

@@ -1,5 +1,5 @@
 import { computed, defineComponent, ref, type PropType } from "vue";
-import { SlidersHorizontal } from "lucide-vue-next";
+import { Filter } from "lucide-vue-next";
 
 import HkButton from "./HkButton";
 import HkCornerBadge from "./HkCornerBadge";
@@ -74,7 +74,7 @@ export default defineComponent({
                 open.value = !open.value;
               }}
             >
-              {{ icon: () => <SlidersHorizontal size={16} /> }}
+              {{ icon: () => <Filter size={16} /> }}
             </HkIconButton>
           </HkCornerBadge>
           <HkPopover