@celestia-island/hikari 0.55.280 → 0.55.281

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.280",
+  "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/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/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";