@celestia-island/hikari 0.55.138 → 0.55.140

package/package.json

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

package/src/components/HkFilterChip.scss

@@ -0,0 +1,79 @@
+/**
+ * HkFilterChip chrome — the facet filter chip (trigger) and its popup
+ * body. The pill group itself is HkPillToggleGroup's. Ported from the
+ * wowsp 水表查询 filter bar's grammar: a solid-surface chip (never a
+ * bare alpha tint — a lone chip over wallpaper reads as a hole).
+ */
+
+.hk-filter-chip-anchor {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.hk-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6);
+  /* Vertical padding = trigger padding + one track step: the chip shares
+   * its row with segmented HkTabs-style chrome, whose track adds
+   * var(--space-2) around its triggers (the wowsp filter bar's alignment
+   * rule — a bare var(--space-4) chip lands two steps short of the row). */
+  padding: calc(var(--space-4) + var(--space-2)) var(--space-12);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: rgb(var(--color-muted));
+  white-space: nowrap;
+  cursor: pointer;
+  border: 1px solid rgb(var(--color-border) / 25%);
+  border-radius: var(--radius-sm);
+  background: rgb(var(--color-surface));
+  transition:
+    color var(--duration-short) ease,
+    background var(--duration-short) var(--ease-standard),
+    border-color var(--duration-short) var(--ease-standard);
+
+  &:hover {
+    color: rgb(var(--color-text));
+  }
+
+  &:active {
+    transform: scale(0.96);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: 1px;
+  }
+
+  /* Concrete selection — the active trigger's primary ink mixed into the
+   * solid surface (a bare alpha tint would go translucent). */
+  &--on {
+    color: rgb(var(--color-primary));
+    background: color-mix(in srgb, rgb(var(--color-primary)) 12%, rgb(var(--color-surface)));
+    border-color: rgb(var(--color-primary) / 25%);
+
+    &:hover {
+      color: rgb(var(--color-primary));
+    }
+  }
+}
+
+.hk-filter-chip-caret {
+  opacity: 0.6;
+  flex: 0 0 auto;
+}
+
+.hk-filter-chip-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8, 0.5rem);
+  max-width: min(92vw, 40rem);
+}
+
+.hk-filter-chip-hint {
+  color: rgb(var(--color-muted));
+  font-size: var(--text-2xs);
+  line-height: 1.4;
+}

package/src/components/HkFilterChip.test.tsx

@@ -0,0 +1,136 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, ref } from "vue";
+
+import HkFilterChip from "./HkFilterChip";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  return mountRendered(() => node);
+}
+
+/** Mount with the vnode built INSIDE the render fn, so reactive props
+ * (a host's open ref) re-render the tree when they change. */
+function mountRendered(build: () => ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => build() });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  document.body.querySelectorAll(".hk-popover-scrim, .hk-popover-panel").forEach((el) => el.remove());
+});
+
+const OPTIONS = [
+  { value: "deepseek", label: "DeepSeek" },
+  { value: "openai", label: "OpenAI" },
+  { value: "anthropic", label: "Anthropic" },
+  { value: "gemini", label: "Gemini" },
+];
+
+const chipButton = (c: HTMLElement) => c.querySelector<HTMLButtonElement>(".hk-filter-chip")!;
+
+describe("HkFilterChip", () => {
+  it("renders the chip closed, labelled by the all-label when nothing is picked", () => {
+    const c = mount(
+      h(HkFilterChip, { label: "Providers", allLabel: "All providers", options: OPTIONS }),
+    );
+    const btn = chipButton(c);
+    expect(btn.textContent).toContain("All providers");
+    expect(btn.getAttribute("aria-haspopup")).toBe("dialog");
+    expect(btn.getAttribute("aria-expanded")).toBe("false");
+    expect(btn.className).not.toContain("hk-filter-chip--on");
+    // Nothing teleported while closed.
+    expect(document.body.querySelector(".hk-pill-group")).toBeNull();
+  });
+
+  it("opens the pill group in a popover and reports toggle / all", async () => {
+    const open = ref(false);
+    const toggled: string[] = [];
+    const allClicks: number[] = [];
+    const c = mountRendered(
+      () =>
+        h(HkFilterChip, {
+          label: "Providers",
+          allLabel: "All providers",
+          options: OPTIONS,
+          open: open.value,
+          "onUpdate:open": (v: boolean) => (open.value = v),
+          onToggle: (v: string) => toggled.push(v),
+          onAll: () => allClicks.push(1),
+          hint: "Multi-select hint line",
+        }),
+    );
+    chipButton(c).dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(open.value).toBe(true);
+    expect(chipButton(c).getAttribute("aria-expanded")).toBe("true");
+
+    // HkPopover teleports the surface to the body — the pill group and
+    // the host-authored hint line live there, not in the anchor.
+    const group = document.body.querySelector(".hk-pill-group");
+    expect(group, "pill group mounted in the popover after the chip click").toBeTruthy();
+    expect(document.body.querySelector(".hk-filter-chip-hint")?.textContent).toContain("Multi-select hint line");
+
+    const pills = [...document.body.querySelectorAll<HTMLButtonElement>(".hk-pill-group-pill")];
+    expect(pills.length).toBe(OPTIONS.length + 1);
+    pills[2].dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    expect(toggled).toEqual(["openai"]);
+
+    pills[0].dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    expect(allClicks.length).toBe(1);
+    expect(toggled).toEqual(["openai"]);
+  });
+
+  it("mirrors the selection on the chip in canonical option order, capped with a +N tail", async () => {
+    // Canonical order wins over Set insertion order; the 4th pick caps
+    // the label instead of growing the chip without bound.
+    const selected = new Set(["gemini", "openai", "anthropic", "deepseek"]);
+    const c = mount(
+      h(HkFilterChip, {
+        label: "Providers",
+        allLabel: "All providers",
+        options: OPTIONS,
+        selected,
+        open: true,
+      }),
+    );
+    const text = chipButton(c).querySelector(".hk-filter-chip-text")!.textContent;
+    expect(text).toBe("DeepSeek, OpenAI, Anthropic +1");
+    expect(chipButton(c).className).toContain("hk-filter-chip--on");
+    // The accessible name carries the SAME selection the eye sees — an
+    // aria-label of just the category would mask the mirror (R1 P2).
+    expect(chipButton(c).getAttribute("aria-label")).toContain("DeepSeek, OpenAI, Anthropic +1");
+  });
+
+  it("re-renders when the host's selected set changes post-mount", async () => {
+    const selected = ref(new Set<string>());
+    const c = mountRendered(
+      () =>
+        h(HkFilterChip, {
+          label: "Providers",
+          allLabel: "All providers",
+          options: OPTIONS,
+          selected: selected.value,
+          open: false,
+        }),
+    );
+    expect(chipButton(c).querySelector(".hk-filter-chip-text")!.textContent).toBe("All providers");
+    selected.value = new Set(["openai"]);
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(chipButton(c).querySelector(".hk-filter-chip-text")!.textContent).toBe("OpenAI");
+    expect(chipButton(c).className).toContain("hk-filter-chip--on");
+    expect(chipButton(c).getAttribute("aria-label")).toContain("OpenAI");
+  });
+});

package/src/components/HkFilterChip.tsx

@@ -0,0 +1,105 @@
+import { computed, defineComponent, ref, type PropType } from "vue";
+import { ChevronDown } from "lucide-vue-next";
+
+import HkPopover, { type PopupPlacement } from "./HkPopover";
+import HkPillToggleGroup, { type HkPillToggleGroupOption } from "./HkPillToggleGroup";
+import "./HkFilterChip.scss";
+
+/**
+ * HkFilterChip — the FACET filter member of the filter family: a chip
+ * trigger that opens a popover (desktop) / bottom sheet (mobile, via
+ * HkPopover's sheetOnMobile) holding an HkPillToggleGroup multi-select —
+ * the 水表查询 filter-bar grammar, upstreamed from wowsp's
+ * FilterCategoryChip (2026-10-11). The sort/direction arrows and the
+ * drag-reorderable chip strip stay host-side there; this is the pure
+ * facet member.
+ *
+ * Semantics ride the thin group contract: `toggle(value)` reports one
+ * option toggled, `all()` reports the all-pill — the HOST decides
+ * whether all means clear or select-everything. The chip label mirrors
+ * the selection: the all-label when nothing is picked, otherwise the
+ * picked labels in canonical option order (capped at three plus a +N
+ * tail, so a wide facet cannot blow up the chip strip's width).
+ */
+export default defineComponent({
+  name: "HkFilterChip",
+  props: {
+    /** Popup title + the trigger's accessible name (the category). */
+    label: { type: String, required: true },
+    /** Chip text with nothing picked, and the all-pill's label. */
+    allLabel: { type: String, required: true },
+    /** Facet values in canonical display order (also the chip-label
+     * order — picked labels mirror it, not the Set's insertion order). */
+    options: {
+      type: Array as PropType<HkPillToggleGroupOption[]>,
+      default: () => [],
+    },
+    /** The picked values — single source of truth, never mutated here. */
+    selected: { type: Object as PropType<Set<string>>, default: () => new Set<string>() },
+    open: { type: Boolean, default: false },
+    placement: { type: String as PropType<PopupPlacement>, default: "bottom-start" },
+    /** Bottom hint line below the pill group. Host-provided on purpose:
+     * the facet's semantics (multi-select? radio? clears what?) are the
+     * host's story to tell. */
+    hint: { type: String, default: undefined },
+  },
+  emits: {
+    "update:open": (_v: boolean) => true,
+    toggle: (_value: string) => true,
+    all: () => true,
+  },
+  setup(props, { emit }) {
+    const anchorRef = ref<HTMLElement | null>(null);
+
+    /** Picked options in canonical order — the chip label's source. */
+    const picked = computed(() => props.options.filter((o) => props.selected.has(o.value)));
+
+    const chipText = computed(() => {
+      if (picked.value.length === 0) return props.allLabel;
+      const names = picked.value.map((o) => o.label);
+      const head = names.slice(0, 3).join(", ");
+      const rest = names.length - 3;
+      return rest > 0 ? `${head} +${rest}` : head;
+    });
+
+    return () => (
+      <span ref={anchorRef} class="hk-filter-chip-anchor">
+        <button
+          type="button"
+          class={["hk-filter-chip", props.selected.size > 0 && "hk-filter-chip--on"]}
+          aria-haspopup="dialog"
+          aria-expanded={props.open ? "true" : "false"}
+          aria-label={
+            picked.value.length > 0 ? `${props.label}: ${chipText.value}` : props.label
+          }
+          title={props.label}
+          onClick={() => emit("update:open", !props.open)}
+        >
+          <span class="hk-filter-chip-text">{chipText.value}</span>
+          <ChevronDown size={12} class="hk-filter-chip-caret" />
+        </button>
+        <HkPopover
+          modelValue={props.open}
+          onUpdate:modelValue={(v: boolean) => emit("update:open", v)}
+          anchorRef={anchorRef.value}
+          placement={props.placement}
+          offset={6}
+          sheetOnMobile
+          title={props.label}
+        >
+          <div class="hk-filter-chip-body">
+            <HkPillToggleGroup
+              label={props.label}
+              options={props.options}
+              selected={props.selected}
+              allLabel={props.allLabel}
+              onToggle={(v: string) => emit("toggle", v)}
+              onAll={() => emit("all")}
+            />
+            {props.hint && <div class="hk-filter-chip-hint">{props.hint}</div>}
+          </div>
+        </HkPopover>
+      </span>
+    );
+  },
+});

package/src/components/HkPillToggleGroup.scss

@@ -0,0 +1,62 @@
+/**
+ * HkPillToggleGroup chrome — the segmented pill track. Ported from the
+ * wowsp 水表查询 filter bar's option group, token for token: shared
+ * chrome around per-option buttons, the active option carrying the
+ * indicator tint directly (multi-select cannot use HkTabs — its sliding
+ * indicator is radio semantics).
+ */
+
+.hk-pill-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4, 4px);
+  padding: 2px;
+  border-radius: var(--radius-sm);
+  border: 1px solid rgb(var(--color-border) / 25%);
+  background: rgb(var(--color-surface) / 60%);
+}
+
+.hk-pill-group-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-6, 6px);
+  padding: var(--space-4) var(--space-12);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: rgb(var(--color-muted));
+  white-space: nowrap;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  outline: none;
+  transition: color var(--duration-short) ease, transform var(--duration-short) ease;
+
+  &:hover {
+    color: rgb(var(--color-text));
+  }
+
+  &:active {
+    transform: scale(0.96);
+  }
+
+  &[data-active] {
+    color: rgb(var(--color-primary));
+    background: rgb(var(--color-primary) / 12%);
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary));
+    outline-offset: -2px;
+  }
+}
+
+.hk-pill-group-icon {
+  display: inline-flex;
+  align-items: center;
+  /* An icon never widens the hit floor: replaced-element glyphs
+   * contribute nothing to a button's min-content width, so shrink
+   * pressure would collapse them before the label felt it. */
+  flex: 0 0 auto;
+}

package/src/components/HkPillToggleGroup.test.tsx

@@ -0,0 +1,114 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import HkPillToggleGroup from "./HkPillToggleGroup";
+
+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();
+  }
+});
+
+const OPTIONS = [
+  { value: "deepseek", label: "DeepSeek" },
+  { value: "openai", label: "OpenAI" },
+  { value: "anthropic", label: "Anthropic" },
+];
+
+describe("HkPillToggleGroup", () => {
+  it("renders one pill per option plus the all-pill, active state from the selected set", () => {
+    const c = mount(
+      h(HkPillToggleGroup, {
+        label: "Providers",
+        options: OPTIONS,
+        selected: new Set(["openai"]),
+        allLabel: "All",
+      }),
+    );
+    const pills = [...c.querySelectorAll<HTMLButtonElement>(".hk-pill-group-pill")];
+    expect(pills.map((p) => p.textContent?.trim())).toEqual(["All", "DeepSeek", "OpenAI", "Anthropic"]);
+    // Active tint rides data-active (the segmented grammar — no aria-only state).
+    expect(pills[0].hasAttribute("data-active")).toBe(false);
+    expect(pills[2].hasAttribute("data-active")).toBe(true);
+    // Every pill is a pressed-state toggle button (screen readers hear the set).
+    expect(pills[2].getAttribute("aria-pressed")).toBe("true");
+    expect(pills[1].getAttribute("aria-pressed")).toBe("false");
+    expect(c.querySelector(".hk-pill-group")!.getAttribute("role")).toBe("group");
+  });
+
+  it("marks the all-pill active when nothing is picked, and hides it without allLabel", () => {
+    const withAll = mount(
+      h(HkPillToggleGroup, { label: "P", options: OPTIONS, selected: new Set<string>(), allLabel: "All" }),
+    );
+    expect(withAll.querySelectorAll(".hk-pill-group-pill")[0].hasAttribute("data-active")).toBe(true);
+
+    const bare = mount(h(HkPillToggleGroup, { label: "P", options: OPTIONS, selected: new Set<string>() }));
+    expect(bare.querySelectorAll(".hk-pill-group-pill").length).toBe(OPTIONS.length);
+  });
+
+  it("reports toggle(value) and all() — the set itself is never mutated here", async () => {
+    const seen: string[] = [];
+    const allClicks: number[] = [];
+    const selected = new Set<string>(["deepseek"]);
+    const c = mount(
+      h(HkPillToggleGroup, {
+        label: "P",
+        options: OPTIONS,
+        selected,
+        allLabel: "All",
+        onToggle: (v: string) => seen.push(v),
+        onAll: () => allClicks.push(1),
+      }),
+    );
+    const pills = [...c.querySelectorAll<HTMLButtonElement>(".hk-pill-group-pill")];
+    pills[2].dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    expect(seen).toEqual(["openai"]);
+    // The host-owned set is untouched — the component only reports.
+    expect([...selected]).toEqual(["deepseek"]);
+
+    pills[0].dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    await Promise.resolve();
+    expect(allClicks.length).toBe(1);
+    expect(seen).toEqual(["openai"]);
+  });
+
+  it("normalizes option icons: components render, junk renders nothing, nothing stringifies", async () => {
+    const { h } = await import("vue");
+    const { Zap } = await import("lucide-vue-next");
+    const c = mount(
+      h(HkPillToggleGroup, {
+        label: "P",
+        selected: new Set<string>(),
+        options: [
+          { value: "fn", label: "Fn", icon: Zap },
+          { value: "vnode", label: "Vn", icon: h(Zap) },
+          { value: "junk", label: "Jk", icon: 42 },
+        ],
+      }),
+    );
+    await Promise.resolve();
+    const pills = [...c.querySelectorAll<HTMLButtonElement>(".hk-pill-group-pill")];
+    // A raw lucide component FUNCTION must render as its <svg> — the R1
+    // landmine: unnormalized it stringifies into source text.
+    expect(pills[0].querySelector("svg"), "function icon renders").toBeTruthy();
+    expect(pills[0].textContent).not.toContain("h(");
+    // A prebuilt vnode passes through identically.
+    expect(pills[1].querySelector("svg"), "vnode icon renders").toBeTruthy();
+    // Junk (a number) renders nothing — and never its digits.
+    expect(pills[2].querySelector(".hk-pill-group-icon")).toBeNull();
+    expect(pills[2].textContent?.trim()).toBe("Jk");
+  });
+});

package/src/components/HkPillToggleGroup.tsx

@@ -0,0 +1,95 @@
+import { defineComponent, h, type PropType, type VNode } from "vue";
+
+import "./HkPillToggleGroup.scss";
+
+/** One toggleable pill of the group. */
+export interface HkPillToggleGroupOption {
+  /** Stable identity — the value emitted back through `toggle`. */
+  value: string;
+  label: string;
+  /** Optional leading glyph. Accepts EITHER a component (a lucide icon
+   * function, a defineComponent options object) or a prebuilt vnode —
+   * both normalize to a rendered element; anything else is skipped
+   * (never stringified: a raw function child renders as source text,
+   * which is exactly the landmine this normalization defuses). */
+  icon?: unknown;
+}
+
+/** Normalize an option icon to a renderable vnode. A component (function
+ * or options object) is instantiated with `h`; a prebuilt vnode passes
+ * through; anything else (string, number, null) renders nothing. */
+function resolveIcon(icon: unknown): VNode | null {
+  if (icon == null) return null;
+  if (typeof icon === "object") return icon as VNode;
+  if (typeof icon === "function") return h(icon as Parameters<typeof h>[0]);
+  return null;
+}
+
+/**
+ * HkPillToggleGroup — the segmented pill-track multi-select: shared
+ * chrome around per-option toggle buttons, the active option carrying
+ * the indicator tint directly (multi-select cannot use HkTabs — its
+ * sliding indicator is radio semantics). Grammar ported from the wowsp
+ * 水表查询 filter bar's option strip (2026-10-11), wrapping instead of
+ * panning: hikari ships page-sized groups, and hosts with strip-scale
+ * sets host their own panning track.
+ *
+ * Deliberately THIN (the host owns the set): `toggle(value)` reports one
+ * pill toggled; the optional leading all-pill reports `all()` and the
+ * HOST decides what that means (clear the facet, or select everything —
+ * both are legitimate; see HkFilterChip and the provider model groups).
+ * `selected` is the single source of truth and is never mutated here.
+ */
+export default defineComponent({
+  name: "HkPillToggleGroup",
+  props: {
+    /** Accessible name of the group (role=group aria-label). */
+    label: { type: String, required: true },
+    options: {
+      type: Array as PropType<HkPillToggleGroupOption[]>,
+      default: () => [],
+    },
+    /** The picked values — single source of truth, never mutated here. */
+    selected: { type: Object as PropType<Set<string>>, default: () => new Set<string>() },
+    /** The leading all-pill's label; omit to hide the all-pill. The pill
+     * wears the active tint exactly when nothing is picked. */
+    allLabel: { type: String, default: undefined },
+  },
+  emits: {
+    toggle: (_value: string) => true,
+    all: () => true,
+  },
+  setup(props, { emit }) {
+    return () => (
+      <div class="hk-pill-group" role="group" aria-label={props.label}>
+        {props.allLabel != null && (
+          <button
+            type="button"
+            class="hk-pill-group-pill"
+            data-active={props.selected.size === 0 || undefined}
+            aria-pressed={props.selected.size === 0 ? "true" : "false"}
+            onClick={() => emit("all")}
+          >
+            {props.allLabel}
+          </button>
+        )}
+        {props.options.map((o) => {
+          const icon = resolveIcon(o.icon);
+          return (
+            <button
+              type="button"
+              key={o.value}
+              class="hk-pill-group-pill"
+              data-active={props.selected.has(o.value) || undefined}
+              aria-pressed={props.selected.has(o.value) ? "true" : "false"}
+              onClick={() => emit("toggle", o.value)}
+            >
+              {icon != null && <span class="hk-pill-group-icon">{icon}</span>}
+              {o.label}
+            </button>
+          );
+        })}
+      </div>
+    );
+  },
+});

package/src/components/HkPlaceholderMarquee.test.ts

@@ -139,6 +139,26 @@ describe("HkPlaceholderMarquee", () => {
     expect(host.classList.contains("hk-placeholder-marquee--hidden")).toBe(false);
   });
 
+  it("keeps a sub-pixel-exact fit static instead of flipping to scroll", async () => {
+    // A shrink-wrapped host (window == text width, e.g. the status-bar
+    // version cells) compares a fractional copy width against the
+    // INTEGER clientWidth: without the epsilon, every fractional part
+    // < 0.5 made the predicate true and permanently scrolled a FITTING
+    // text (2026-10-11 R1 finding, reproduced in Chromium). The epsilon
+    // lets exact fits keep the hidden probe while real overflow (≥0.5px
+    // past the edge) still flips.
+    const { container } = mountMarquee({ text: "0.1.0 feat/model-usage-selfhosted:770f625" });
+    // Copy (incl. 24px spacing) lands 0.3px past the window: fits.
+    await forceGeometry(container, /* copy */ 224.3, /* window */ 200);
+    const host = container.querySelector(".hk-placeholder-marquee") as HTMLElement;
+    expect(host.classList.contains("hk-placeholder-marquee--hidden"), "0.3px past → still fits").toBe(true);
+    expect(container.querySelectorAll(".hk-placeholder-marquee__copy")).toHaveLength(1);
+    // 2px past the edge: real overflow, the strip takes over.
+    await forceGeometry(container, /* copy */ 226, /* window */ 200);
+    expect(host.classList.contains("hk-placeholder-marquee--hidden"), "2px past → scrolls").toBe(false);
+    expect(container.querySelectorAll(".hk-placeholder-marquee__copy")).toHaveLength(3);
+  });
+
   it("drives the sweep with CSS custom properties instead of per-frame JS", async () => {
     const { container } = mountMarquee({ text: "advent calendar of placeholders" });
     await forceGeometry(container, 500, 200);

package/src/components/HkPlaceholderMarquee.tsx

@@ -79,7 +79,16 @@ export const HkPlaceholderMarquee = defineComponent({
       const factor = space.x > 0 ? space.x : 1;
       const copyWidth = copy.getBoundingClientRect().width / factor;
       loopWidth.value = copyWidth;
-      overflowing.value = copyWidth - COPY_SPACING > host.clientWidth;
+      // Sub-pixel boundary (2026-10-11): the copy width is deliberately
+      // fractional while clientWidth is an integer. A shrink-wrapped
+      // host — window == text width, e.g. the status-bar version cells —
+      // degenerates the predicate to `textW > round(textW)`, which is
+      // TRUE for every fractional part < 0.5 and would permanently flip
+      // a FITTING text into scrolling (no size change → the
+      // ResizeObserver never re-fires; reproduced in Chromium). The
+      // epsilon keeps exact fits static; real overflow (≥0.5px past the
+      // edge) still flips.
+      overflowing.value = copyWidth - COPY_SPACING > host.clientWidth + 0.5;
       emit("overflowChange", overflowing.value);
     };
 

package/src/components/HkStatusBar.test.tsx

@@ -668,5 +668,14 @@ describe("HkStatusBar", () => {
     const popoverRule = /\.s-status-bar-popover-value\s*\{[^}]*\}/.exec(scss)?.[0] ?? "";
     expect(popoverRule, "popover value cell bound exists").toContain("max-width: min(16rem, 60vw)");
     expect(scss).toMatch(/\.s-status-bar-popover-value \.s-status-bar-version\s*\{[^}]*max-width:\s*100%/s);
+    // Dead-overlay guard: if the marquee's measurement never fires, a
+    // capped cell degrades to an ellipsis cut, never a silent hard clip.
+    expect(scss).toMatch(
+      /\.s-status-bar-version__static\s*\{[^}]*text-overflow:\s*ellipsis/s,
+    );
+    // The stale combined selector list (`.s-status-bar-version,
+    // .s-status-bar-version-sep { nowrap }`) is gone — the dedicated
+    // block owns the version cell's rules (2026-10-11 R1 cleanup).
+    expect(scss).not.toMatch(/\.s-status-bar-version,\s*\n\s*\.s-status-bar-version-sep\s*\{/);
   });
 });

package/src/index.ts

@@ -830,6 +830,9 @@ export { default as HkFilterBar } from "./components/HkFilterBar";
 export { default as HkFilterPanel, sanitizeNumberInput } from "./components/HkFilterPanel";
 export type { HkFilterOperator, HkFilterFieldDef, HkFilterCondition, HkFilterState } from "./components/HkFilterPanel";
 export { default as HkFilterTrigger } from "./components/HkFilterTrigger";
+export { default as HkFilterChip } from "./components/HkFilterChip";
+export { default as HkPillToggleGroup } from "./components/HkPillToggleGroup";
+export type { HkPillToggleGroupOption } from "./components/HkPillToggleGroup";
 export { HkIconChip as HkIconChip } from "./components/HkIconChip";
 export { HkIconChip as HIconChip } from "./components/HkIconChip";
 export { HkCardList, HkListRow } from "./components/HkCardList";

package/src/styles/admin-tokens.scss

@@ -199,9 +199,13 @@
 }
 
 .s-status-bar-version__static {
-  /* The ghost state (marquee owns the window): opacity keeps the text
-     in the layout and the a11y tree; only the paint is handed over. */
+  /* Dead-overlay guard: if the marquee's measurement never fires (RO
+     unavailable, zero-width probe), a capped cell must degrade to an
+     ellipsis cut, not a silent hard clip. Invisible while the marquee
+     owns the window (the ghost is opacity-0 by then). */
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .s-status-bar-version[data-overflowing] .s-status-bar-version__static {
@@ -258,12 +262,8 @@
   }
 }
 
-.s-status-bar-version,
 .s-status-bar-version-sep {
   white-space: nowrap;
-}
-
-.s-status-bar-version-sep {
   opacity: 0.5;
 }