@celestia-island/hikari 0.55.280 → 0.55.282

package/package.json

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

@@ -1,10 +1,16 @@
-/* HkSolarLocationSetting — the solar-clock location strategy row and
+/* HkSolarLocationSetting — the solar-clock location strategy card and
  * its editor modal body (see the component docblock for the strategy
  * ladder). AI-generated: developed with the ZCode agent (model
  * GLM-5.3); human-directed. */
 
-/* ── The settings-page row: live summary + Edit button ────────────────── */
+/* ── The settings-page card (HkCard root; header/body classes are the
+ *    card family's own) ─────────────────────────────────────────────── */
 .hk-solar-setting {
+  min-width: 0;
+}
+
+/* ── The card body's live summary + Edit button line ──────────────────── */
+.hk-solar-row {
   display: flex;
   align-items: center;
   gap: var(--space-8, 0.5rem);
@@ -59,6 +65,61 @@
   line-height: 1.5;
 }
 
+/* ── Detected-value readout (timezone / ip panes) ───────────────────────
+ * One info item per line: a fixed label column and a value column of
+ * copyable tags, so long values keep their own row and the two columns
+ * stay aligned across rows. */
+.hk-solar-detected {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8, 0.5rem);
+}
+
+.hk-solar-detected-row {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--space-8, 0.5rem);
+  align-items: start;
+}
+
+.hk-solar-detected-label {
+  padding-top: var(--space-1, 0.125rem);
+  font-size: var(--text-xs);
+  color: rgb(var(--color-muted));
+  /* Long localized labels wrap instead of pushing the value column out. */
+  overflow-wrap: anywhere;
+}
+
+.hk-solar-detected-value {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-6, 0.375rem);
+  min-width: 0;
+}
+
+/* Values are labels, not prose — but a readout value that outruns the
+ * modal soft-wraps inside its chip instead of clipping or overflowing. */
+.hk-solar-detected-value .hk-badge {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: left;
+}
+
+/* Probe status line (IP pane): muted progress / failure note, with the
+ * retry affordance inline after the text. */
+.hk-solar-detected-status {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-6, 0.375rem);
+  color: rgb(var(--color-muted));
+  font-size: var(--text-xs);
+}
+
+.hk-solar-detected-retry {
+  flex-shrink: 0;
+}
+
 .hk-solar-manual {
   display: flex;
   flex-direction: column;