@celestia-island/hikari 0.55.163 → 0.55.165

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.163",
+  "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/HkCornerBadge.scss

@@ -0,0 +1,132 @@
+/**
+ * HkCornerBadge — the generic corner mark (dot / count / label) pinned
+ * to one corner of the default-slot anchor (see HkCornerBadge.tsx for
+ * the contract). Geometry follows the house pattern the trigger dots
+ * and the Rust family's .hk-badge-wrapper established: the anchor is a
+ * relative inline-flex wrapper (the badge escapes nothing — hosts wrap
+ * ANY child), the mark centers ON the corner via translate(50%,-50%)
+ * with an optional --hk-corner-badge-offset clearance.
+ */
+
+.hk-corner-badge-anchor {
+  position: relative;
+  display: inline-flex;
+}
+
+.hk-corner-badge {
+  position: absolute;
+  /* Centered on the corner; the corner data-attribute flips the axes
+   * and the offset var adds clearance without re-deriving transforms. */
+  transform: translate(var(--hk-corner-badge-tx, 50%), var(--hk-corner-badge-ty, -50%));
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.hk-corner-badge[data-corner="top-right"] {
+  top: var(--hk-corner-badge-offset, 0px);
+  right: var(--hk-corner-badge-offset, 0px);
+  --hk-corner-badge-tx: 50%;
+  --hk-corner-badge-ty: -50%;
+}
+
+.hk-corner-badge[data-corner="top-left"] {
+  top: var(--hk-corner-badge-offset, 0px);
+  left: var(--hk-corner-badge-offset, 0px);
+  --hk-corner-badge-tx: -50%;
+  --hk-corner-badge-ty: -50%;
+}
+
+.hk-corner-badge[data-corner="bottom-right"] {
+  bottom: var(--hk-corner-badge-offset, 0px);
+  right: var(--hk-corner-badge-offset, 0px);
+  --hk-corner-badge-tx: 50%;
+  --hk-corner-badge-ty: 50%;
+}
+
+.hk-corner-badge[data-corner="bottom-left"] {
+  bottom: var(--hk-corner-badge-offset, 0px);
+  left: var(--hk-corner-badge-offset, 0px);
+  --hk-corner-badge-tx: -50%;
+  --hk-corner-badge-ty: 50%;
+}
+
+/* Dot form: a filled circle in the variant's tone (same token trio
+ * HkBadge uses — variant classes below set all three channels). */
+.hk-corner-badge--dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--hk-badge-bg);
+  box-shadow: 0 0 0 1.5px rgb(var(--color-surface) / 85%);
+}
+
+/* Pill form: the compact count/label chip (18px min, text-4xs mono
+ * digits — notification-badge geometry across the family). */
+.hk-corner-badge--pill {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full, 999px);
+  background: var(--hk-badge-bg);
+  color: var(--hk-badge-text);
+  border: 1px solid var(--hk-badge-border);
+  font-size: var(--text-4xs, 0.625rem);
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Variant tones — the same channel triplets HkBadge.scss ships; kept
+ * literal here so the corner badge owns its own (tiny) sheet. */
+.hk-corner-badge-default {
+  --hk-badge-bg: rgb(var(--color-primary) / 12%);
+  --hk-badge-text: rgb(var(--color-text));
+  --hk-badge-border: rgb(var(--color-primary) / 35%);
+}
+
+.hk-corner-badge-primary {
+  --hk-badge-bg: rgb(var(--color-primary));
+  --hk-badge-text: rgb(var(--color-on-primary, 255 255 255));
+  --hk-badge-border: transparent;
+}
+
+.hk-corner-badge-success {
+  --hk-badge-bg: rgb(var(--color-success));
+  --hk-badge-text: rgb(var(--color-on-primary, 255 255 255));
+  --hk-corner-badge-ring: rgb(var(--color-surface) / 85%);
+  --hk-badge-border: transparent;
+}
+
+.hk-corner-badge-error {
+  --hk-badge-bg: rgb(var(--color-error));
+  --hk-badge-text: rgb(var(--color-on-primary, 255 255 255));
+  --hk-badge-border: transparent;
+}
+
+.hk-corner-badge-warning {
+  --hk-badge-bg: rgb(var(--color-warning));
+  --hk-badge-text: rgb(var(--color-text));
+  --hk-badge-border: transparent;
+}
+
+.hk-corner-badge-info {
+  --hk-badge-bg: rgb(var(--color-info, var(--color-primary)));
+  --hk-badge-text: rgb(var(--color-on-primary, 255 255 255));
+  --hk-badge-border: transparent;
+}
+
+.hk-corner-badge-muted {
+  --hk-badge-bg: rgb(var(--color-text) / 55%);
+  --hk-badge-text: rgb(var(--color-surface));
+  --hk-badge-border: transparent;
+}
+
+/* The success dot's ring token feeds the dot form's surface cutout so
+ * the mark reads ON the anchor, not under it (the icon-group marker's
+ * trick, generalized). */
+.hk-corner-badge-success.hk-corner-badge--dot {
+  box-shadow: 0 0 0 1.5px var(--hk-corner-badge-ring, rgb(var(--color-surface) / 85%));
+}

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

@@ -0,0 +1,61 @@
+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 HkCornerBadge — the anchoring contract
+ * (2026-10-15): the anchor wrapper is a relative inline-flex host (any
+ * child can carry the mark), the mark centers ON its corner via
+ * translate(±50%,±50%), and each data-corner flips the right axes.
+ * Vitest stubs CSS, so the runtime suite can never catch a lost rule.
+ */
+
+const componentDir = resolve(dirname(fileURLToPath(import.meta.url)));
+
+const css = compile(resolve(componentDir, "HkCornerBadge.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("HkCornerBadge stylesheet contract", () => {
+  it("compiles", () => {
+    expect(css).toContain(".hk-corner-badge");
+  });
+
+  it("the anchor is a relative inline-flex wrapper (any child carries the mark)", () => {
+    const rule = ruleFor(".hk-corner-badge-anchor {");
+    expect(rule).toContain("position: relative");
+    expect(rule).toContain("display: inline-flex");
+  });
+
+  it("the mark never takes pointer events and never wraps", () => {
+    const rule = ruleFor(".hk-corner-badge {");
+    expect(rule).toContain("position: absolute");
+    expect(rule).toContain("pointer-events: none");
+    expect(rule).toContain("white-space: nowrap");
+  });
+
+  it("each corner flips the translate axes", () => {
+    expect(ruleFor('.hk-corner-badge[data-corner=top-right] {')).toContain("--hk-corner-badge-tx: 50%");
+    expect(ruleFor('.hk-corner-badge[data-corner=top-left] {')).toContain("--hk-corner-badge-tx: -50%");
+    expect(ruleFor('.hk-corner-badge[data-corner=bottom-right] {')).toContain("--hk-corner-badge-ty: 50%");
+    expect(ruleFor('.hk-corner-badge[data-corner=bottom-left] {')).toContain("--hk-corner-badge-tx: -50%");
+  });
+
+  it("the dot is round and the pill is a tabular-numbers chip", () => {
+    const dot = ruleFor(".hk-corner-badge--dot {");
+    expect(dot).toContain("border-radius: 50%");
+    const pill = ruleFor(".hk-corner-badge--pill {");
+    expect(pill).toContain("font-variant-numeric: tabular-nums");
+  });
+});

package/src/components/HkCornerBadge.test.tsx

@@ -0,0 +1,86 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import HkCornerBadge from "./HkCornerBadge";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+describe("HkCornerBadge — the generic corner mark (2026-10-15)", () => {
+  it("anchors the default slot in a relative wrapper with no mark by default", () => {
+    const c = mount(h(HkCornerBadge, null, () => h("button", { class: "probe" }, "x")));
+    const anchor = c.querySelector(".hk-corner-badge-anchor")!;
+    expect(anchor, "anchor wrapper present").toBeTruthy();
+    // (The relative/inline-flex anchoring is pinned by the compiled-css
+    // contract test — vitest stubs styles, so no computed assertions.)
+    expect(c.querySelector(".probe"), "slot content rendered").toBeTruthy();
+    expect(c.querySelector(".hk-corner-badge")).toBeNull();
+  });
+
+  it("dot form: a variant-colored dot at the requested corner, decorative by default", () => {
+    const c = mount(
+      h(HkCornerBadge, { dot: true, variant: "success", corner: "bottom-right" }, () => h("i")),
+    );
+    const badge = c.querySelector(".hk-corner-badge")!;
+    expect(badge).toBeTruthy();
+    expect(badge.className).toContain("hk-corner-badge--dot");
+    expect(badge.className).toContain("hk-corner-badge-success");
+    expect(badge.getAttribute("data-corner")).toBe("bottom-right");
+    expect(badge.getAttribute("aria-hidden")).toBe("true");
+    expect(badge.getAttribute("role")).toBeNull();
+  });
+
+  it("count form: renders the number, caps past max, hides zero unless showZero", () => {
+    const c = mount(h(HkCornerBadge, { count: 7 }, () => h("i")));
+    expect(c.querySelector(".hk-corner-badge")!.textContent).toBe("7");
+    const capped = mount(h(HkCornerBadge, { count: 130, max: 99 }, () => h("i")));
+    expect(capped.querySelector(".hk-corner-badge")!.textContent).toBe("99+");
+    const zero = mount(h(HkCornerBadge, { count: 0 }, () => h("i")));
+    expect(zero.querySelector(".hk-corner-badge")).toBeNull();
+    const zeroShown = mount(h(HkCornerBadge, { count: 0, showZero: true }, () => h("i")));
+    expect(zeroShown.querySelector(".hk-corner-badge")!.textContent).toBe("0");
+  });
+
+  it("custom label form: a text pill from the default slot", () => {
+    const c = mount(h(HkCornerBadge, { variant: "primary", text: "5h" }, () => h("i")));
+    const badge = c.querySelector(".hk-corner-badge")!;
+    expect(badge.textContent).toBe("5h");
+    expect(badge.className).toContain("hk-corner-badge--pill");
+  });
+
+  it("accessible mode: role=img + aria-label instead of aria-hidden", () => {
+    const c = mount(h(HkCornerBadge, { dot: true, label: "3 active filters" }, () => h("i")));
+    const badge = c.querySelector(".hk-corner-badge")!;
+    expect(badge.getAttribute("role")).toBe("img");
+    expect(badge.getAttribute("aria-label")).toBe("3 active filters");
+    expect(badge.getAttribute("aria-hidden")).toBeNull();
+  });
+
+  it("dot wins when both dot and count/text are set", () => {
+    const c = mount(h(HkCornerBadge, { dot: true, count: 9 }, () => h("i")));
+    const badge = c.querySelector(".hk-corner-badge")!;
+    expect(badge.className).toContain("hk-corner-badge--dot");
+    expect(badge.textContent).toBe("");
+  });
+
+  it("offset writes the clearance custom property", () => {
+    const c = mount(h(HkCornerBadge, { dot: true, offset: 2 }, () => h("i")));
+    const badge = c.querySelector(".hk-corner-badge") as HTMLElement;
+    expect(badge.style.getPropertyValue("--hk-corner-badge-offset")).toBe("2px");
+  });
+});

package/src/components/HkCornerBadge.tsx

@@ -0,0 +1,91 @@
+import { computed, defineComponent, type PropType } from "vue";
+
+import "./HkCornerBadge.scss";
+
+/** The color channels HkBadge already standardizes (same variant names,
+ * same override escape hatch — kept in lockstep with HkBadge.tsx). */
+export type CornerBadgeVariant =
+  | "default"
+  | "primary"
+  | "success"
+  | "error"
+  | "warning"
+  | "info"
+  | "muted";
+
+/**
+ * HkCornerBadge — the generic corner mark for ANY anchor (user
+ * direction 2026-10-15): a green/red/traffic dot, a notification count
+ * ("9+"), or a custom text label pinned to one corner of whatever sits
+ * in the default slot. The Vue package had every consumer hand-rolling
+ * its own absolute span (the filter/search trigger dots, the icon-group
+ * marker, chest's dock time-range pill); this is the one component they
+ * converge on — API parity with the Rust family's badge.rs (dot / count
+ * / max "N+" / showZero), plus the corner + custom-label the web needs.
+ *
+ * Decorative by default (aria-hidden): the mark VISUALIZES state the
+ * anchor already exposes (a filtered trigger, a selected range); pass
+ * `label` when it is the only place a count is announced.
+ */
+export default defineComponent({
+  name: "HkCornerBadge",
+  props: {
+    variant: { type: String as PropType<CornerBadgeVariant>, default: "primary" },
+    /** Bare dot form (the green/red/traffic light). */
+    dot: { type: Boolean, default: false },
+    /** Count form: renders the number, or "max+" past `max`. Hidden at
+     * 0 unless showZero (notification semantics). */
+    count: { type: Number, default: undefined },
+    max: { type: Number, default: undefined },
+    showZero: { type: Boolean, default: false },
+    /** Custom label text (the pill form). The default slot is the
+     *  ANCHOR, never the label — overloading it made every anchored
+     *  child's own text leak into the badge. */
+    text: { type: String, default: undefined },
+    /** Which corner of the anchor. */
+    corner: {
+      type: String as PropType<"top-right" | "top-left" | "bottom-right" | "bottom-left">,
+      default: "top-right",
+    },
+    /** Extra clearance from the corner in px (0 = sit ON the corner,
+     * the translate(50%,-50%) centering). */
+    offset: { type: Number, default: 0 },
+    /** Accessible name for the mark (without it the badge is
+     * aria-hidden decoration). */
+    label: { type: String, default: undefined },
+  },
+  setup(props, { slots }) {
+    const text = computed<string | null>(() => {
+      if (props.count !== undefined) {
+        if (props.count === 0 && !props.showZero) return null;
+        if (props.max !== undefined && props.count > props.max) return `${props.max}+`;
+        return String(props.count);
+      }
+      return props.text && props.text.length > 0 ? props.text : null;
+    });
+
+    const show = computed(() => props.dot || text.value !== null);
+
+    return () => (
+      <span class="hk-corner-badge-anchor">
+        {slots.default?.()}
+        {show.value && (
+          <span
+            class={[
+              "hk-corner-badge",
+              `hk-corner-badge-${props.variant}`,
+              props.dot ? "hk-corner-badge--dot" : "hk-corner-badge--pill",
+            ]}
+            data-corner={props.corner}
+            style={props.offset ? { "--hk-corner-badge-offset": `${props.offset}px` } : undefined}
+            aria-hidden={props.label ? undefined : "true"}
+            role={props.label ? "img" : undefined}
+            aria-label={props.label}
+          >
+            {props.dot ? null : text.value}
+          </span>
+        )}
+      </span>
+    );
+  },
+});

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)"));