@celestia-island/hikari 0.55.152 → 0.55.154

package/package.json

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

package/src/components/HkFilterPanel.scss

@@ -6,15 +6,26 @@
  * narrows to roughly TWO visible symbols and scrolls horizontally
  * instead.
  *
- * Row anatomy: [field label | operator symbol group | value control].
- * 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.
+ * 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.
+ *
+ * ONE GRID, ONE AXIS (user direction 2026-10-12): the panel itself is
+ * the grid and each row contributes `display: contents` cells, so the
+ * three columns track ONE set of widths across every row and the add
+ * row lines up with the operator column exactly. `align-items: center`
+ * puts every cell of every row on the same vertical axis — label,
+ * symbol group, control, and remove button all share it.
  */
 
 .hk-filter-panel {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: minmax(4.5rem, auto) minmax(4.5rem, auto) minmax(6rem, 1fr);
+  align-items: center;
   gap: var(--space-8, 0.5rem);
   /* Bounded width: wide enough for the operator group, narrow enough to
    * read as a header dropdown (the popover host clamps to the viewport
@@ -25,14 +36,16 @@
    * a field-rich page must not grow an unbounded dropdown. */
   max-height: min(26rem, 60vh);
   overflow-y: auto;
-  padding: var(--space-4, 0.25rem);
+  /* 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);
 }
 
-.hk-filter-panel-row {
-  display: grid;
-  grid-template-columns: minmax(4.5rem, auto) minmax(0, auto) minmax(0, 1fr);
-  align-items: center;
-  gap: var(--space-8, 0.5rem);
+/* A row is not a box — it donates its three cells to the panel grid so
+ * column widths stay shared across all rows (and the add row). */
+.hk-filter-panel-row,
+.hk-filter-panel-addrow {
+  display: contents;
 }
 
 .hk-filter-panel-field {
@@ -93,23 +106,90 @@
   cursor: not-allowed;
 }
 
+/* Value cell: the control takes what is left (min-width guarded, never
+ * hard-coded — it shrinks with the panel, user direction 2026-10-12);
+ * the remove verb rides at the row's end on the same axis. */
 .hk-filter-panel-value {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4, 0.25rem);
   min-width: 0;
 }
 
-/* Phones: the operator column narrows hard (about two symbols visible)
- * and the row lets the value control take the remaining width. The
- * group itself scrolls — same interaction, smaller footprint. */
+.hk-filter-panel-control {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.hk-filter-panel-remove {
+  flex: 0 0 auto;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-muted, var(--color-text-secondary)));
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.hk-filter-panel-remove:hover {
+  background: rgb(var(--color-error) / 12%);
+  color: rgb(var(--color-error));
+}
+
+.hk-filter-panel-remove:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* The growth verb: parked in the OPERATOR COLUMN (grid-column 2), so it
+ * reads as part of the aligned axis — not a stray footer link. Ghost
+ * face; it appends the next latent field. */
+.hk-filter-panel-add {
+  grid-column: 2 / -1;
+  justify-self: start;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4, 0.25rem);
+  min-height: 2rem;
+  padding: 0 var(--space-8, 0.5rem);
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-muted, var(--color-text-secondary)));
+  font-family: inherit;
+  font-size: var(--text-xs, 0.75rem);
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.hk-filter-panel-add:hover {
+  background: rgb(var(--color-primary) / 12%);
+  color: rgb(var(--color-primary));
+}
+
+.hk-filter-panel-add:disabled {
+  opacity: 0.5;
+  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
+ * scrolls — same interaction, smaller footprint. */
 @media (max-width: 767px) {
   .hk-filter-panel {
     width: 100%;
-  }
-
-  .hk-filter-panel-row {
-    grid-template-columns: minmax(3.75rem, auto) minmax(3.9rem, auto) minmax(0, 1fr);
+    grid-template-columns: minmax(3.75rem, auto) minmax(4.75rem, auto) minmax(5rem, 1fr);
   }
 
   .hk-filter-panel-ops {
-    max-width: 4.25rem;
+    max-width: 5.25rem;
   }
 }

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

@@ -0,0 +1,82 @@
+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 HkFilterPanel — the one-axis anatomy the
+ * 2026-10-12 user direction pinned:
+ *
+ *   1. the panel is a single grid with `align-items: center` (every cell
+ *      of every row on ONE vertical axis);
+ *   2. rows/add-row donate `display: contents` cells so column widths
+ *      stay shared (the add button lands in the operator column);
+ *   3. real horizontal padding (minimum outer margins);
+ *   4. the value column shrinks (min-width floors, nothing hard-coded);
+ *   5. the phone operator column keeps its widened cap.
+ *
+ * Vitest stubs CSS, so the runtime suite can never catch a lost rule —
+ * this compiles the sheet directly and asserts the contract.
+ */
+
+const componentDir = resolve(dirname(fileURLToPath(import.meta.url)));
+
+const css = compile(resolve(componentDir, "HkFilterPanel.scss"), {
+  style: "expanded",
+}).css;
+
+function ruleFor(selector: string): string {
+  const start = css.indexOf(selector);
+  expect(start, `${selector} present in the compiled sheet`).toBeGreaterThanOrEqual(0);
+  const open = css.indexOf("{", start);
+  const close = css.indexOf("}", open);
+  return css.slice(start, close + 1);
+}
+
+describe("HkFilterPanel stylesheet contract", () => {
+  it("compiles without warnings", () => {
+    expect(css).toContain(".hk-filter-panel");
+  });
+
+  it("the panel is one grid, vertically centered on a single axis", () => {
+    const rule = ruleFor(".hk-filter-panel {");
+    expect(rule).toContain("display: grid");
+    expect(rule).toContain("align-items: center");
+  });
+
+  it("rows and the add row donate contents cells to the shared grid", () => {
+    // sass keeps the selector list wrapped: `.row,` newline `.addrow {`.
+    expect(css).toMatch(/\.hk-filter-panel-row,\s*\.hk-filter-panel-addrow\s*\{[^}]*display:\s*contents/);
+  });
+
+  it("keeps minimum outer margins on the columns", () => {
+    const rule = ruleFor(".hk-filter-panel {");
+    // Inline padding (both edges) — not the old 0.25rem sliver.
+    expect(rule).toMatch(/padding:[^;]*var\(--space-12/);
+  });
+
+  it("the value column shrinks with the panel (min floors, nothing fixed)", () => {
+    const rule = ruleFor(".hk-filter-panel {");
+    expect(rule).toMatch(/minmax\(6rem,\s*1fr\)/);
+    const value = ruleFor(".hk-filter-panel-value {");
+    expect(value).toContain("min-width: 0");
+    const control = ruleFor(".hk-filter-panel-control {");
+    expect(control).toContain("min-width: 0");
+  });
+
+  it("parks the add button in the operator column (grid-column 2 to the end)", () => {
+    const rule = ruleFor(".hk-filter-panel-add {");
+    // sass normalizes the track list ("2 / -1" → "2/-1").
+    expect(rule).toMatch(/grid-column:\s*2\s*\/\s*-1/);
+    expect(rule).toContain("justify-self: start");
+  });
+
+  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)"));
+    expect(media).toMatch(/max-width:\s*5\.25rem/);
+    expect(media).toMatch(/minmax\(4\.75rem,\s*auto\)/);
+  });
+});

package/src/components/HkFilterPanel.test.tsx

@@ -28,17 +28,74 @@ const FIELDS = [
   { key: "since", label: "Since", kind: "date" as const },
 ];
 
+/** State seeding all four fields — every declared row visible. */
+const ALL_SEEDED: HkFilterState = {
+  tool: { op: "eq", value: "" },
+  count: { op: "lt", value: "" },
+  agent: { op: "eq", value: "" },
+  since: { op: "gte", value: "" },
+};
+
 describe("HkFilterPanel", () => {
-  it("renders one condition row per declared field", () => {
+  it("renders rows ONLY for fields present in the state — the rest stay latent", () => {
     const c = mount(h(HkFilterPanel, { fields: FIELDS, modelValue: {} }));
-    const rows = c.querySelectorAll(".hk-filter-panel-row");
-    expect(rows).toHaveLength(FIELDS.length);
-    const labels = [...c.querySelectorAll(".hk-filter-panel-field")].map((el) => el.textContent);
-    expect(labels).toEqual(["Tool", "Calls", "Agent", "Since"]);
+    // Empty state: no condition rows at all, just the add row.
+    expect(c.querySelectorAll(".hk-filter-panel-row")).toHaveLength(0);
+    expect(c.querySelector(".hk-filter-panel-add")).toBeTruthy();
+    // Seeded subset: rows in declaration order, only for seeded keys.
+    const c2 = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: { agent: { op: "eq", value: "" }, tool: { op: "eq", value: "" } },
+      }),
+    );
+    const labels = [...c2.querySelectorAll(".hk-filter-panel-field")].map((el) => el.textContent);
+    expect(labels).toEqual(["Tool", "Agent"]);
+  });
+
+  it("hides the add row once every declared field is in the state", () => {
+    const c = mount(h(HkFilterPanel, { fields: FIELDS, modelValue: ALL_SEEDED }));
+    expect(c.querySelector(".hk-filter-panel-add")).toBeNull();
+    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", () => {
+    let seen: HkFilterState | null = null;
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: { tool: { op: "eq", value: "web" } },
+        "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
+      }),
+    );
+    c.querySelector(".hk-filter-panel-add")!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    expect(seen).not.toBeNull();
+    // "count" is the next unused field in declaration order; its kind's
+    // first operator (lt) and an empty value.
+    expect(seen!["count"]).toEqual({ op: "lt", value: "" });
+  });
+
+  it("removes a condition entirely — the key leaves the state", () => {
+    let seen: HkFilterState | null = null;
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: { tool: { op: "eq", value: "web" }, count: { op: "lt", value: "3" } },
+        "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
+      }),
+    );
+    const rows = [...c.querySelectorAll(".hk-filter-panel-row")];
+    expect(rows).toHaveLength(2);
+    rows[0]!.querySelector(".hk-filter-panel-remove")!.dispatchEvent(
+      new MouseEvent("click", { bubbles: true }),
+    );
+    expect(seen).not.toBeNull();
+    expect(seen!["tool"]).toBeUndefined();
+    expect(seen!["count"]).toEqual({ op: "lt", value: "3" });
   });
 
   it("gives each kind its default operator set (regular 3, numeric 5, select 2, date 2)", () => {
-    const c = mount(h(HkFilterPanel, { fields: FIELDS, modelValue: {} }));
+    const c = mount(h(HkFilterPanel, { fields: FIELDS, modelValue: ALL_SEEDED }));
     const rows = [...c.querySelectorAll(".hk-filter-panel-row")];
     const opCounts = rows.map(
       (row) => row.querySelectorAll(".hk-filter-panel-op").length,
@@ -78,14 +135,14 @@ describe("HkFilterPanel", () => {
     const c = mount(
       h(HkFilterPanel, {
         fields: FIELDS,
-        modelValue: {},
+        modelValue: { count: { op: "lt", value: "" } },
         "onUpdate:modelValue": (s: HkFilterState) => (seen = s),
       }),
     );
     // The number row's control is the number-variant input (type=number —
     // the browser refuses illegal keystrokes); the model side keeps the
     // shape guard (sanitizeNumberInput) as the belt.
-    const input = c.querySelectorAll<HTMLInputElement>(".hk-filter-panel-row input")[1]!;
+    const input = c.querySelectorAll<HTMLInputElement>(".hk-filter-panel-row input")[0]!;
     expect(input.type).toBe("number");
     input.value = "42.5";
     input.dispatchEvent(new Event("input", { bubbles: true }));
@@ -95,22 +152,23 @@ describe("HkFilterPanel", () => {
   });
 
   it("keeps select fields on a popup select and prepends the empty clear row", () => {
-    const c = mount(h(HkFilterPanel, { fields: FIELDS, modelValue: {} }));
-    const selectRow = c.querySelectorAll(".hk-filter-panel-row")[2]!;
+    const c = mount(h(HkFilterPanel, { fields: FIELDS, modelValue: { agent: { op: "eq", value: "" } } }));
+    const selectRow = c.querySelectorAll(".hk-filter-panel-row")[0]!;
     expect(selectRow.querySelector(".hk-popup-select-trigger")).toBeTruthy();
   });
 
   it("prepends a localized empty All row to select fields without one (the clear affordance)", async () => {
     // The select field's ONLY clear affordance is the empty value row —
-    // there is no reset verb in the header trigger. A page without its
-    // own "all" entry must therefore always find the prepended
-    // {value:"", label:All} row; a page that ships one keeps its own
-    // label. (R1 mutation f2 removed the prepend and NOTHING went red —
-    // this test is that missing pin.)
+    // removal drops the whole condition, but an EMPTY value still means
+    // "filters nothing" on the wire. A page without its own "all" entry
+    // must therefore always find the prepended {value:"", label:All} row;
+    // a page that ships one keeps its own label. (R1 mutation f2 removed
+    // the prepend and NOTHING went red — this test is that missing pin.)
     const withOwnEmpty = [
       { key: "level", label: "Level", kind: "select" as const, options: [{ value: "", label: "Everything" }, { value: "high", label: "High" }] },
     ];
-    const c = mount(h(HkFilterPanel, { fields: withOwnEmpty, modelValue: {} }));
+    const seeded = { level: { op: "eq" as const, value: "" } };
+    const c = mount(h(HkFilterPanel, { fields: withOwnEmpty, modelValue: seeded }));
     // A page shipping its own empty row keeps it as-is (no duplicate):
     // the panel prepends only when NO option carries the empty value.
     const ownTrigger = c.querySelector(".hk-filter-panel-row .hk-popup-select-trigger");
@@ -126,7 +184,7 @@ describe("HkFilterPanel", () => {
     const withoutAll = [
       { key: "level", label: "Level", kind: "select" as const, options: [{ value: "high", label: "High" }] },
     ];
-    const c2 = mount(h(HkFilterPanel, { fields: withoutAll, modelValue: {} }));
+    const c2 = mount(h(HkFilterPanel, { fields: withoutAll, modelValue: { level: { op: "eq", value: "" } } }));
     const trigger2 = c2.querySelector(".hk-filter-panel-row .hk-popup-select-trigger")!;
     trigger2.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     await Promise.resolve();
@@ -143,6 +201,36 @@ describe("HkFilterPanel", () => {
     expect(c2.querySelector(".hk-filter-panel")!.getAttribute("data-active")).toBeNull();
   });
 
+  it("suppresses the control captions (the row label is the one label) but keeps them semantic", () => {
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: { agent: { op: "eq", value: "" }, tool: { op: "eq", value: "" } },
+      }),
+    );
+    // No floating caption above either control.
+    expect(c.querySelector(".hk-popup-select-label")).toBeNull();
+    expect(c.querySelector(".hk-input-label")).toBeNull();
+    // …but the field element still carries the name for AT and the
+    // mobile select sheet's breadcrumb title.
+    const selectTrigger = c.querySelector(".hk-popup-select-trigger")!;
+    expect(selectTrigger.getAttribute("aria-label")).toBe("Agent");
+    const input = c.querySelector(".hk-input-element")!;
+    expect(input.getAttribute("aria-label")).toBe("Tool");
+  });
+
+  it("rides the compact control stock (sm variants) in the dense rows", () => {
+    const c = mount(
+      h(HkFilterPanel, {
+        fields: FIELDS,
+        modelValue: ALL_SEEDED,
+      }),
+    );
+    expect(c.querySelector(".hk-popup-select-trigger-sm")).toBeTruthy();
+    expect(c.querySelector(".hk-input-box-sm")).toBeTruthy();
+    expect(c.querySelector(".hk-dp-trigger-sm")).toBeTruthy();
+  });
+
   it("sanitizes number shapes: sign leading-only, one dot, junk stripped", () => {
     expect(sanitizeNumberInput("12a.5b9")).toBe("12.59");
     expect(sanitizeNumberInput("-3-x.1.2")).toBe("-3.12");

package/src/components/HkFilterPanel.tsx

@@ -1,4 +1,5 @@
 import { computed, defineComponent, type PropType } from "vue";
+import { Plus, X } from "lucide-vue-next";
 
 import HkDatePicker from "./HkDatePicker";
 import HkInput from "./HkInput";
@@ -30,17 +31,20 @@ export interface HkFilterFieldDef {
 }
 
 /** One condition: the operator and the (string) value. An EMPTY value
- *  means the field filters nothing — this is also how a condition is
- *  cleared (re-open the panel, empty the value; there is no separate
- *  reset verb in the header affordance). */
+ *  means the field filters nothing — pages map absent/empty onto "no
+ *  filter" at the RPC boundary; the row's own remove button is the UI
+ *  verb that drops the condition entirely. */
 export interface HkFilterCondition {
   op: HkFilterOperator;
   value: string;
 }
 
-/** Per-field condition state, keyed by the field def's key. Fields the
- *  record does not mention render with their kind's default operator and
- *  an empty value. */
+/** Per-field condition state, keyed by the field def's key. The record
+ *  IS the list of visible condition rows: a declared field the record
+ *  does not mention is latent — it only materializes when the user adds
+ *  it from the panel's add row (user direction 2026-10-12: conditions
+ *  are ADDED, not all rendered at once), and a row the user removes
+ *  leaves the record. */
 export type HkFilterState = Record<string, HkFilterCondition>;
 
 const OPERATOR_SYMBOL: Record<HkFilterOperator, string> = {
@@ -136,9 +140,13 @@ export default defineComponent({
 
     return () => {
       const label = props.label ?? t("hikari::filterBar.trigger", "Filters");
+      // The visible rows ARE the state record's declared fields, in
+      // declaration order; the rest stay latent behind the add row.
+      const rows = props.fields.filter((f) => props.modelValue[f.key] !== undefined);
+      const addable = props.fields.filter((f) => props.modelValue[f.key] === undefined);
       return (
         <div class="hk-filter-panel" data-testid="hk-filter-panel" data-active={activeCount.value > 0 || undefined} aria-label={label}>
-          {props.fields.map((field) => {
+          {rows.map((field) => {
             const condition = conditionFor(field);
             const ops = operatorsFor(field);
             return (
@@ -161,48 +169,97 @@ export default defineComponent({
                   ))}
                 </div>
                 <div class="hk-filter-panel-value">
-                  {field.kind === "select" ? (
-                    <HkPopupSelect
-                      modelValue={condition.value}
-                      onUpdate:modelValue={(v: string) => emitCondition(field, { value: v })}
-                      label={field.label}
-                      disabled={props.disabled}
-                      options={selectOptions(field)}
-                    />
-                  ) : field.kind === "date" ? (
-                    // The calendar picker — never the OS native input
-                    // (2026-10-11 direction); the wire format is the same
-                    // ISO YYYY-MM-DD the native input spoke.
-                    <HkDatePicker
-                      modelValue={condition.value || null}
-                      onUpdate:modelValue={(v: string | null) =>
-                        emitCondition(field, { value: v ?? "" })
-                      }
-                      disabled={props.disabled}
-                    />
-                  ) : (
-                    <HkInput
-                      type="text"
-                      variant={field.kind === "number" ? "number" : "text"}
-                      modelValue={condition.value}
-                      onUpdate:modelValue={(v: string) =>
-                        emitCondition(field, {
-                          // Belt over the browser's native number filtering:
-                          // the stored model keeps a clean number SHAPE only
-                          // (sign, digits, one dot), so pages can hand it to
-                          // RPC params verbatim.
-                          value: field.kind === "number" ? sanitizeNumberInput(v) : v,
-                        })
-                      }
-                      label={field.label}
-                      placeholder={field.placeholder ?? ""}
-                      disabled={props.disabled}
-                    />
-                  )}
+                  <div class="hk-filter-panel-control">
+                    {field.kind === "select" ? (
+                      <HkPopupSelect
+                        modelValue={condition.value}
+                        onUpdate:modelValue={(v: string) => emitCondition(field, { value: v })}
+                        label={field.label}
+                        // The row's left cell already names the field —
+                        // the control's own caption above it reads as
+                        // duplication (user direction 2026-10-12), and
+                        // the compact variant keeps the dense row stock.
+                        hideLabel
+                        size="sm"
+                        disabled={props.disabled}
+                        options={selectOptions(field)}
+                      />
+                    ) : field.kind === "date" ? (
+                      // The calendar picker — never the OS native input
+                      // (2026-10-11 direction); the wire format is the same
+                      // ISO YYYY-MM-DD the native input spoke.
+                      <HkDatePicker
+                        modelValue={condition.value || null}
+                        onUpdate:modelValue={(v: string | null) =>
+                          emitCondition(field, { value: v ?? "" })
+                        }
+                        size="sm"
+                        disabled={props.disabled}
+                      />
+                    ) : (
+                      <HkInput
+                        type="text"
+                        variant={field.kind === "number" ? "number" : "text"}
+                        modelValue={condition.value}
+                        onUpdate:modelValue={(v: string) =>
+                          emitCondition(field, {
+                            // Belt over the browser's native number filtering:
+                            // the stored model keeps a clean number SHAPE only
+                            // (sign, digits, one dot), so pages can hand it to
+                            // RPC params verbatim.
+                            value: field.kind === "number" ? sanitizeNumberInput(v) : v,
+                          })
+                        }
+                        label={field.label}
+                        hideLabel
+                        size="sm"
+                        placeholder={field.placeholder ?? ""}
+                        disabled={props.disabled}
+                      />
+                    )}
+                  </div>
+                  {/* Drop the condition entirely (the row leaves the
+                   * panel; the page refetches unfiltered). Clearing the
+                   * VALUE still means "filters nothing" for the wire —
+                   * removal is just the tidy-up verb on top. */}
+                  <button
+                    type="button"
+                    class="hk-filter-panel-remove"
+                    aria-label={t("hikari::filterPanel.removeCondition", "Remove condition")}
+                    title={t("hikari::filterPanel.removeCondition", "Remove condition")}
+                    disabled={props.disabled}
+                    onClick={() => {
+                      const next: HkFilterState = { ...props.modelValue };
+                      delete next[field.key];
+                      emit("update:modelValue", next);
+                    }}
+                  >
+                    <X size={14} aria-hidden="true" />
+                  </button>
                 </div>
               </div>
             );
           })}
+          {addable.length > 0 && (
+            <div class="hk-filter-panel-addrow">
+              {/* The ONE growth verb, parked in the operator column so
+               * the row grid reads as one aligned axis (user direction
+               * 2026-10-12). Appends the next unused field with its
+               * kind's default operator and an empty value. */}
+              <button
+                type="button"
+                class="hk-filter-panel-add"
+                disabled={props.disabled}
+                onClick={() => {
+                  const field = addable[0]!;
+                  emitCondition(field, { op: operatorsFor(field)[0]!, value: "" });
+                }}
+              >
+                <Plus size={14} aria-hidden="true" />
+                <span>{t("hikari::filterPanel.addCondition", "Add condition")}</span>
+              </button>
+            </div>
+          )}
         </div>
       );
     };

package/src/components/HkFilterTrigger.test.tsx

@@ -47,7 +47,10 @@ describe("HkFilterTrigger", () => {
     const c = mount(
       h(HkFilterTrigger, {
         fields: FIELDS,
-        modelValue: {},
+        // Seed one condition so the panel opens with its row (an empty
+        // state renders only the add row — conditions are added, not
+        // all rendered at once).
+        modelValue: { tool: { op: "eq", value: "" } },
         "onUpdate:modelValue": (s: Record<string, unknown>) => (seen = s),
       }),
     );