@celestia-island/hikari 0.55.279 → 0.55.281

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.279",
+  "version": "0.55.281",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkCornerBadge.tsx

@@ -13,6 +13,12 @@ export type CornerBadgeVariant =
   | "info"
   | "muted";
 
+/** Which corner of the anchor the mark hangs on. Exported so hosts that
+ *  embed the shell (HkTabs' trigger badge) share the one vocabulary
+ *  instead of re-spelling the union; HkIconButton's dot borrows the tone
+ *  channels but is an inset span of its own, not a corner mark. */
+export type CornerBadgeCorner = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+
 /**
  * HkCornerBadge — the generic corner mark for ANY anchor (user
  * direction 2026-10-15): a green/red/traffic dot, a notification count
@@ -44,7 +50,7 @@ export default defineComponent({
     text: { type: String, default: undefined },
     /** Which corner of the anchor. */
     corner: {
-      type: String as PropType<"top-right" | "top-left" | "bottom-right" | "bottom-left">,
+      type: String as PropType<CornerBadgeCorner>,
       default: "top-right",
     },
     /** Extra clearance from the corner in px (0 = sit ON the corner,

package/src/components/HkModelCard.scss

@@ -0,0 +1,97 @@
+@use "../styles/polyfill" as *;
+
+/* HkModelCard — the dense model card for tier-grouped model grids: a
+   leading identity lane (the consumer's model tag), an optional actions
+   lane (the serving switch), an optional caption (which provider a
+   merged card came from) and an optional footer (usage + capability
+   hints). The tier rides the card as an inset leading stripe; disabled
+   dims without killing the controls inside.
+
+   Motion contract: hover feedback is BORDER COLOR ONLY. The card never
+   transforms — a hover lift displaces nothing, reflows nothing, and
+   (2026-11-04 user direction) never animates the card upward. */
+
+.hk-model-card {
+  --hk-model-card-accent: transparent;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  padding: var(--space-6) var(--space-8);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  background: rgb(var(--color-muted) / 4%);
+  min-width: 0;
+  box-shadow: inset 2px 0 0 0 var(--hk-model-card-accent);
+}
+
+.hk-model-card[data-tier="deep"] {
+  --hk-model-card-accent: rgb(var(--color-primary));
+}
+
+.hk-model-card[data-tier="normal"] {
+  --hk-model-card-accent: rgb(var(--color-success));
+}
+
+.hk-model-card[data-tier="basic"] {
+  --hk-model-card-accent: rgb(var(--color-muted) / 45%);
+}
+
+.hk-model-card[data-hoverable] {
+  transition: border-color var(--duration-normal) ease;
+}
+
+.hk-model-card[data-hoverable]:hover {
+  border-color: rgb(var(--color-muted) / 30%);
+}
+
+.hk-model-card[data-interactive] {
+  cursor: pointer;
+  @include user-select(none);
+}
+
+.hk-model-card[data-interactive]:focus-visible {
+  outline: 2px solid rgb(var(--color-primary));
+  outline-offset: 2px;
+}
+
+.hk-model-card[data-disabled] {
+  opacity: 0.5;
+  --hk-model-card-accent: transparent;
+}
+
+.hk-model-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-6);
+  min-width: 0;
+}
+
+.hk-model-card-leading {
+  min-width: 0;
+}
+
+.hk-model-card-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.hk-model-card-caption {
+  font-size: var(--text-2xs);
+  color: rgb(var(--color-muted));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hk-model-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-6);
+  min-width: 0;
+  color: rgb(var(--color-muted));
+}

package/src/components/HkModelCard.test.tsx

@@ -0,0 +1,142 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h, ref } from "vue";
+
+import HkModelCard from "./HkModelCard";
+
+/**
+ * HkModelCard anatomy + state guards.
+ *
+ * (Repo test convention: raw createApp + document queries, no
+ * @vue/test-utils dependency.)
+ */
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mountCard(
+  props: Record<string, unknown> = {},
+  slots: Record<string, () => unknown> = {},
+): HTMLElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const Wrapper = defineComponent({
+    setup() {
+      return () => h(HkModelCard, props, slots);
+    },
+  });
+  const app = createApp(Wrapper);
+  app.mount(container);
+  mounts.push({ app, container });
+  const root = container.querySelector<HTMLElement>(".hk-model-card");
+  expect(root, ".hk-model-card renders").toBeTruthy();
+  return root!;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts) {
+    app.unmount();
+    container.remove();
+  }
+  mounts.length = 0;
+});
+
+describe("HkModelCard anatomy", () => {
+  it("renders the top lane with title and actions content", () => {
+    const root = mountCard(
+      {},
+      {
+        title: () => h("span", { class: "t" }, "GLM 5.3"),
+        actions: () => h("button", { class: "a" }, "on"),
+      },
+    );
+    expect(root.querySelector(".hk-model-card-top")).toBeTruthy();
+    expect(root.querySelector(".hk-model-card-leading .t")?.textContent).toBe("GLM 5.3");
+    expect(root.querySelector(".hk-model-card-actions .a")).toBeTruthy();
+  });
+
+  it("collapses caption and footer when their slots are empty", () => {
+    const root = mountCard({}, { title: () => h("span", "m") });
+    expect(root.querySelector(".hk-model-card-caption")).toBeNull();
+    expect(root.querySelector(".hk-model-card-footer")).toBeNull();
+  });
+
+  it("renders caption and footer lanes when they carry content", () => {
+    const root = mountCard(
+      {},
+      {
+        title: () => h("span", "m"),
+        caption: () => "zai",
+        footer: () => h("span", { class: "f" }, "200.0k"),
+      },
+    );
+    expect(root.querySelector(".hk-model-card-caption")?.textContent).toBe("zai");
+    expect(root.querySelector(".hk-model-card-footer .f")?.textContent).toBe("200.0k");
+  });
+
+  it("treats a comment-placeholder slot (consumer v-if) as empty", () => {
+    const show = ref(false);
+    const root = mountCard(
+      {},
+      {
+        title: () => h("span", "m"),
+        caption: () => (show.value ? h("span", "shown") : null),
+      },
+    );
+    // A null-render slot produces only the comment placeholder — the
+    // caption lane must collapse, not render an empty row.
+    expect(root.querySelector(".hk-model-card-caption")).toBeNull();
+  });
+
+  it("treats a fragment of dead v-if comments as empty (the JSX <>{cond && …}</> shape)", () => {
+    const show = ref(false);
+    const slotsOf = () => ({
+      title: () => h("span", "m"),
+      // The compiled shape of a consumer's conditional footer is a
+      // Fragment vnode whose children are dead comment placeholders —
+      // the guard must recurse into it, not stop at the Fragment.
+      footer: () => (<>{show.value && <span class="live" />}</>),
+    });
+    // All-dead fragment → the footer lane collapses.
+    expect(mountCard({}, slotsOf()).querySelector(".hk-model-card-footer")).toBeNull();
+    // A fragment with live content still renders its lane.
+    show.value = true;
+    const live = mountCard({}, slotsOf());
+    expect(live.querySelector(".hk-model-card-footer .live")?.textContent).toBe("");
+  });
+});
+
+describe("HkModelCard state attributes", () => {
+  it("lands the tier as data-tier", () => {
+    expect(mountCard({ tier: "deep" }, {}).dataset.tier).toBe("deep");
+    expect(mountCard({ tier: "normal" }, {}).dataset.tier).toBe("normal");
+    expect(mountCard({ tier: "basic" }, {}).dataset.tier).toBe("basic");
+  });
+
+  it("an absent tier lands no data-tier at all", () => {
+    expect(mountCard({}, {}).hasAttribute("data-tier")).toBe(false);
+  });
+
+  it("hoverable is the default and drops out when disabled", () => {
+    expect(mountCard({}, {}).hasAttribute("data-hoverable")).toBe(true);
+    expect(mountCard({ disabled: true }, {}).hasAttribute("data-hoverable")).toBe(false);
+    expect(mountCard({ hoverable: false }, {}).hasAttribute("data-hoverable")).toBe(false);
+  });
+
+  it("disabled lands the dim marker, interactive lands its marker", () => {
+    expect(mountCard({ disabled: true }, {}).hasAttribute("data-disabled")).toBe(true);
+    expect(mountCard({ interactive: true }, {}).hasAttribute("data-interactive")).toBe(true);
+    // interactive + disabled: the dim wins, the clickability marker goes.
+    expect(mountCard({ interactive: true, disabled: true }, {}).hasAttribute("data-interactive")).toBe(false);
+  });
+});
+
+describe("HkModelCard interaction", () => {
+  it("emits click with the native event", () => {
+    let seen: MouseEvent | null = null;
+    const root = mountCard(
+      { onClick: (e: MouseEvent) => (seen = e) },
+      { title: () => h("span", "m") },
+    );
+    root.querySelector<HTMLElement>(".hk-model-card-leading")!.click();
+    expect(seen).toBeInstanceOf(MouseEvent);
+  });
+});

package/src/components/HkModelCard.tsx

@@ -0,0 +1,80 @@
+import { defineComponent, type PropType } from "vue";
+import { Comment, Fragment, type VNode } from "vue";
+
+import "./HkModelCard.scss";
+
+/** The capability tier a model card belongs to — the family's shared
+ *  vocabulary (arona serves it on every roster row, the consumers group
+ *  by it). The tier only drives the inset accent stripe; the card never
+ *  interprets it beyond color. */
+export type ModelCardTier = "deep" | "normal" | "basic";
+
+/** Whether a slot actually rendered anything. Testing the slot function
+ *  for truthiness is not enough: a consumer's `v-if` slot renders a
+ *  comment placeholder vnode, and a consumer's `<>{cond && …}</>`
+ *  fragment compiles to a Fragment vnode carrying those same dead
+ *  comments — both must read as empty (same guard as HkCardList's
+ *  renderedRows, recursed into fragments). */
+function hasRenderedContent(nodes: unknown): boolean {
+  if (nodes == null || nodes === false || nodes === "") return false;
+  if (Array.isArray(nodes)) return nodes.some((n) => hasRenderedContent(n));
+  if (typeof nodes === "object") {
+    const node = nodes as VNode;
+    if (node.type === Fragment) return hasRenderedContent(node.children);
+    return node.type !== Comment;
+  }
+  return true; // non-empty text content
+}
+
+export default defineComponent({
+  name: "HkModelCard",
+  props: {
+    /** Capability tier accent (inset leading stripe). Absent = no stripe. */
+    tier: { type: String as PropType<ModelCardTier>, default: undefined },
+    /** Dimmed, accent-free, hover-inert presentation for a switched-off
+     *  model. Deliberately NOT pointer-events: none — the row's controls
+     *  (the serving switch) stay operable exactly to un-disable it. */
+    disabled: { type: Boolean, default: false },
+    /** Border-emphasis hover feedback. The house standard is color only —
+     *  the card never transforms, so hovering never displaces neighbors
+     *  or reflows the grid (2026-11-04 user direction). */
+    hoverable: { type: Boolean, default: true },
+    /** Clickable-card presentation (cursor + focus ring) for surfaces
+     *  that cycle state on click. Pure presentation — the consumer owns
+     *  the actual click semantics and a11y wiring. */
+    interactive: { type: Boolean, default: false },
+  },
+  emits: {
+    click: (_e: MouseEvent) => true,
+  },
+  setup(props, { emit, slots }) {
+    return () => {
+      const caption = slots.caption?.();
+      const footer = slots.footer?.();
+      const actions = slots.actions?.();
+      return (
+        <div
+          class="hk-model-card"
+          data-tier={props.tier}
+          data-disabled={props.disabled || undefined}
+          data-hoverable={props.hoverable && !props.disabled ? "" : undefined}
+          data-interactive={props.interactive && !props.disabled ? "" : undefined}
+          onClick={(e: MouseEvent) => emit("click", e)}
+        >
+          <div class="hk-model-card-top">
+            <div class="hk-model-card-leading">{slots.title?.()}</div>
+            {hasRenderedContent(actions) && (
+              <div class="hk-model-card-actions">{actions}</div>
+            )}
+          </div>
+          {hasRenderedContent(caption) && (
+            <div class="hk-model-card-caption">{caption}</div>
+          )}
+          {hasRenderedContent(footer) && (
+            <div class="hk-model-card-footer">{footer}</div>
+          )}
+        </div>
+      );
+    };
+  },
+});

package/src/components/HkTabs.test.ts

@@ -5,6 +5,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkTabs from "./HkTabs";
+import type { TabItem } from "./HkTabs";
 import { CROSSFADE_WATCHDOG_MS } from "./HkCrossfade";
 import { DEFAULT_ANIMATION_DURATION_MS } from "../composables/useAnimationLoop";
 
@@ -661,3 +662,111 @@ describe("HkTabs panel morph (HkTransitionContainer consumption)", () => {
     expect(container.querySelector(".hk-tabs-panel")).toBeNull();
   });
 });
+
+describe("HkTabs trigger corner badge", () => {
+  /** Mount a two-tab strip with an optional badge on the first option. */
+  function mountBadge(badge: TabItem["badge"]): { container: HTMLElement } {
+    const active = ref("a");
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkTabs, {
+            variant: "segmented",
+            tabs: [
+              { key: "a", label: "Alpha", badge },
+              { key: "b", label: "Beta" },
+            ],
+            renderPanels: false,
+            modelValue: active.value,
+            "onUpdate:modelValue": (v: string) => { active.value = v; },
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    return { container };
+  }
+
+  it("renders the count through HkCornerBadge inside the trigger (no hand-rolled suffix)", () => {
+    const { container } = mountBadge({ count: 3, label: "3 items" });
+    const trig = container.querySelectorAll<HTMLElement>(".hk-tabs-trigger")[0]!;
+    // The mark is the family's corner-badge pill, anchored bottom-right
+    // (the subscript corner) of the label, not a "(3)" text suffix.
+    const mark = trig.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
+    expect(mark).not.toBeNull();
+    expect(mark.textContent).toBe("3");
+    expect(mark.dataset.corner).toBe("bottom-right");
+    expect(trig.textContent).not.toContain("(3)");
+    // Default clearance: the straddling pill must stay inside the
+    // scroller's 6px vertical clearance below the label (see
+    // TabItem.badge.offset) — the offset var pins that contract.
+    expect(mark.style.getPropertyValue("--hk-corner-badge-offset")).toBe("4px");
+    // The sibling trigger stays badge-free.
+    expect(container.querySelectorAll<HTMLElement>(".hk-tabs-trigger")[1]!.querySelector(".hk-corner-badge")).toBeNull();
+  });
+
+  it("keeps zero visible (presence count, not notification noise)", () => {
+    const { container } = mountBadge({ count: 0, label: "0 items" });
+    const mark = container.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
+    expect(mark.textContent).toBe("0");
+  });
+
+  it("collapses past max to the N+ form and names the mark for assistive tech", () => {
+    const { container } = mountBadge({ count: 120, max: 99, label: "120 pending" });
+    const mark = container.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
+    expect(mark.textContent).toBe("99+");
+    expect(mark.getAttribute("role")).toBe("img");
+    expect(mark.getAttribute("aria-label")).toBe("120 pending");
+  });
+
+  it("follows a live count change without a remount (presence stays current)", async () => {
+    const active = ref("a");
+    const tabs = ref<TabItem[]>([{ key: "a", label: "Alpha", badge: { count: 1, label: "1 item" } }]);
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkTabs, {
+            variant: "segmented",
+            tabs: tabs.value,
+            renderPanels: false,
+            modelValue: active.value,
+            "onUpdate:modelValue": (v: string) => { active.value = v; },
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    const mark = () => container.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
+    expect(mark().textContent).toBe("1");
+    tabs.value = [{ key: "a", label: "Alpha", badge: { count: 12, label: "12 items" } }];
+    await nextTick();
+    expect(mark().textContent).toBe("12");
+  });
+
+  it("warns in DEV when a badge lacks an accessible label", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      mountBadge({ count: 3 });
+      const alarms = warn.mock.calls.filter((c) => String(c[0]).includes("badge without a label"));
+      expect(alarms.length, "the a11y drift alarm must fire").toBeGreaterThan(0);
+      expect(alarms[0]![1]).toBe("a");
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("leaves badgeless triggers free of the badge anchor (plain label span render)", () => {
+    const { container } = mountBadge(undefined);
+    expect(container.querySelector(".hk-corner-badge-anchor")).toBeNull();
+    const label = container.querySelectorAll<HTMLElement>(".hk-tabs-trigger")[0]!.querySelector("span")!;
+    expect(label.textContent).toBe("Alpha");
+  });
+});

package/src/components/HkTabs.tsx

@@ -5,6 +5,8 @@ import HkScrollContainer from "./HkScrollContainer";
 import HkHoverRevealAction from "./HkHoverRevealAction";
 import HkIconButton from "./HkIconButton";
 import HkTransitionContainer from "./HkTransitionContainer";
+import HkCornerBadge from "./HkCornerBadge";
+import type { CornerBadgeCorner, CornerBadgeVariant } from "./HkCornerBadge";
 import { iconByName } from "../composables/iconRegistry";
 import { useI18n } from "../i18n/context";
 import { clearLeaveGeometry, pinLeaveGeometry, type LeaveBoxSnapshot } from "../utils/dom";
@@ -18,6 +20,39 @@ export interface TabItem {
   /** Optional icon vnode rendered before the label (the `icon-${key}`
    *  slot wins when provided). */
   icon?: unknown;
+  /** Corner-count badge rendered on the trigger through HkCornerBadge —
+   *  the ONE sup/sub decoration shell (user direction 2026-11-05:
+   *  hand-rolled "(n)" count suffixes baked into labels are being
+   *  replaced by the standard corner mark, and triggers are badge hosts
+   *  like every other button). Zero stays visible: a tab count is
+   *  presence information (the "（0）" the inline suffix carried), not
+   *  notification noise — pass no badge to hide it entirely. The badge
+   *  anchors the LABEL, so a tab with an empty label renders no badge
+   *  either; pass `label` (an accessible name like "{n} active") or the
+   *  mark is aria-hidden decoration and the count is announced nowhere
+   *  (a DEV warning fires — a silent a11y regression against the inline
+   *  suffix it replaces must at least be loud). */
+  badge?: {
+    count: number;
+    /** "N+" ceiling (HkCornerBadge.max). */
+    max?: number;
+    /** Which corner of the LABEL the mark hangs on — the subscript
+     *  corner (bottom-right) by default, per the same direction. */
+    corner?: CornerBadgeCorner;
+    /** Tone channel (HkCornerBadge.variant names, default "primary"). */
+    variant?: CornerBadgeVariant;
+    /** Corner clearance in px (HkCornerBadge.offset). Default 4: the
+     *  pill protrudes half its 18px height past the label box, and the
+     *  strip's vertical clearance below the label is trigger padding
+     *  (4px) + list padding (2px) = 6px before the scroller viewport
+     *  clips — offset 4 keeps the protrusion at 5px, inside that
+     *  clearance. 0 sits ON the corner and clips ~3px on the default
+     *  scrollable strip; raise it if your host adds no extra padding. */
+    offset?: number;
+    /** Accessible name for the mark — strongly expected (DEV-warned
+     *  when missing). */
+    label?: string;
+  };
   disabled?: boolean;
   /**
    * Slot-unit width for block (row-filling) strips: how many equal
@@ -202,6 +237,22 @@ export default defineComponent({
           props.tabs.map((tb) => tb.key).join(", "),
         );
       }
+      if (import.meta.env.DEV) {
+        // A badge the strip renders as aria-hidden decoration is a
+        // SILENT a11y regression against the inline "(n)" suffix it
+        // replaces — the count was part of the accessible name before
+        // and is announced nowhere now. Same tier as the duplicate-key
+        // drift alarm above.
+        for (const tb of props.tabs) {
+          if (tb.badge && !tb.badge.label) {
+            // eslint-disable-next-line no-console -- dev-only drift alarm
+            console.warn(
+              "[HkTabs] tab badge without a label is aria-hidden — pass badge.label so the count is announced:",
+              tb.key,
+            );
+          }
+        }
+      }
       return list;
     });
     /** Merged keys actually present in `tabs`, in tab order. */
@@ -546,7 +597,28 @@ export default defineComponent({
             }}
           >
             {icon}
-            {tab.label && <span>{tab.label}</span>}
+            {/* The badge anchors the LABEL (inside the trigger's own
+             *  padding box) rather than the button box: the mark reads
+             *  as part of the control's silhouette (the HkIconButton
+             *  dot's 2026-10-28 lesson, count form). Clipping is kept
+             *  honest by the offset default: the pill straddles the
+             *  label's corner and the scroller viewport clips at
+             *  6px below the label — see TabItem.badge.offset. */}
+            {tab.label && (tab.badge ? (
+              <HkCornerBadge
+                count={tab.badge.count}
+                max={tab.badge.max}
+                showZero
+                corner={tab.badge.corner ?? "bottom-right"}
+                offset={tab.badge.offset ?? 4}
+                variant={tab.badge.variant ?? "primary"}
+                label={tab.badge.label}
+              >
+                <span>{tab.label}</span>
+              </HkCornerBadge>
+            ) : (
+              <span>{tab.label}</span>
+            ))}
           </button>,
         );
       });

package/src/index.ts

@@ -817,6 +817,7 @@ export { default as HkMenuActionItem } from "./components/HkMenuActionItem";
 export { default as HkMenuIdentityItem } from "./components/HkMenuIdentityItem";
 export { default as HkMenuSection } from "./components/HkMenuSection";
 export { default as HkTagDotRow } from "./components/HkTagDotRow";
+export { default as HkModelCard, type ModelCardTier } from "./components/HkModelCard";
 export { default as HkRowActions } from "./components/HkRowActions";
 export { default as HkPopupSelect } from "./components/HkPopupSelect";
 export { default as HkProgressBar } from "./components/HkProgressBar";