@celestia-island/hikari 0.55.250 → 0.55.251

package/package.json

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

package/src/components/HkAdminHeader.test.tsx

@@ -1,6 +1,15 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, h } from "vue";
 
+/** The slice of HkMenu's item shape this stub renders. */
+interface MenuItemStub {
+  key: string;
+  label?: string;
+  checked?: boolean;
+  danger?: boolean;
+  children?: MenuItemStub[];
+}
+
 // HkMenu renders its levels through HkSelectPanel, which teleports to
 // body — replace just HkMenu (imported by the component from
 // ./HkMenu) with an inline passthrough that renders the header slot
@@ -10,18 +19,19 @@ import { createApp, h } from "vue";
 // re-declared as an emit, which would strip it from props).
 vi.mock("./HkMenu", async () => {
   const { defineComponent, h } = await import("vue");
+  const { asPropType } = await import("../utils/typing");
   const HMenuStub = defineComponent({
     name: "HMenu",
     props: {
       open: { type: Boolean, default: false },
-      items: { type: Array, default: () => [] },
+      items: { type: asPropType<MenuItemStub[]>(Array), default: () => [] },
       title: { type: String, default: "" },
     },
     setup(props, { slots, attrs }) {
       return () => {
         if (!props.open) return null;
         const rows: ReturnType<typeof h>[] = [];
-        const flatten = (items: any[]) => {
+        const flatten = (items: MenuItemStub[]) => {
           for (const item of items ?? []) {
             rows.push(
               h(
@@ -31,7 +41,10 @@ vi.mock("./HkMenu", async () => {
                   "data-key": item.key,
                   "data-checked": item.checked || undefined,
                   "data-danger": item.danger || undefined,
-                  onClick: () => (attrs as any).onSelect?.(item.key),
+                  onClick: () => {
+                    const onSelect = attrs.onSelect;
+                    if (typeof onSelect === "function") onSelect(item.key);
+                  },
                 },
                 item.label,
               ),
@@ -39,7 +52,7 @@ vi.mock("./HkMenu", async () => {
             if (item.children?.length) flatten(item.children);
           }
         };
-        flatten(props.items as any[]);
+        flatten(props.items);
         return h("div", { class: "menu-stub" }, [...(slots.header?.() ?? []), ...rows]);
       };
     },

package/src/components/HkAltSignIn.tsx

@@ -1,8 +1,17 @@
-import { defineComponent, ref } from "vue";
-import HkPopover from "./HkPopover";
+import { defineComponent, ref, type PropType } from "vue";
+import HkPopover, { type PopupPlacement } from "./HkPopover";
 import HkMenuActionItem from "./HkMenuActionItem";
+import { asPropType } from "../utils/typing";
 import "./HkAltSignIn.scss";
 
+/** One alternative sign-in entry offered in the popover. */
+export interface HkAltSignInEntry {
+  key: string;
+  label: string;
+  icon?: Record<string, unknown>;
+  danger?: boolean;
+}
+
 /**
  * Shared "alternative sign-in" entry for auth cards (P77).
  *
@@ -23,18 +32,13 @@ export default defineComponent({
     label: { type: String, required: true },
     /** Alternative sign-in entries offered in the dropdown. */
     entries: {
-      type: Array as unknown as () => Array<{
-        key: string;
-        label: string;
-        icon?: Record<string, unknown>;
-        danger?: boolean;
-      }>,
+      type: asPropType<HkAltSignInEntry[]>(Array),
       required: true,
     },
     disabled: { type: Boolean, default: false },
     /** Popover placement around the trigger row. */
     placement: {
-      type: String,
+      type: String as PropType<PopupPlacement>,
       default: "top",
     } as const,
   },
@@ -71,7 +75,7 @@ export default defineComponent({
         <HkPopover
           modelValue={open.value}
           onUpdate:modelValue={(v: boolean) => (open.value = v)}
-          placement={props.placement as never}
+          placement={props.placement}
           anchorRef={anchor.value}
         >
           <div class="hk-alt-signin__panel" role="menu">

package/src/components/HkAuthCard.test.tsx

@@ -6,23 +6,25 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { createApp, h } from "vue";
 
 import { HkAuthCard } from "./HkAuthCard";
+import { fakeAs } from "../test-utils/fakes";
 
 /** Injectable ResizeObserver: captures the callback so tests can fire
  *  content changes deterministically (happy-dom's own RO never fires —
  *  there is no layout engine). Same harness as useSizeMorph.test.ts. */
-class FakeResizeObserver {
+class FakeResizeObserver implements ResizeObserver {
   static instances: FakeResizeObserver[] = [];
   callback: () => void;
   observed: Element[] = [];
   disconnected = false;
 
-  constructor(callback: () => void) {
+  constructor(callback: (...args: never[]) => void) {
     this.callback = callback;
     FakeResizeObserver.instances.push(this);
   }
   observe(el: Element): void {
     this.observed.push(el);
   }
+  unobserve(): void {}
   disconnect(): void {
     this.disconnected = true;
   }
@@ -77,7 +79,7 @@ function fireTransitionEnd(el: HTMLElement, propertyName: string) {
 beforeEach(() => {
   FakeResizeObserver.instances = [];
   naturalHeight = 140;
-  globalThis.ResizeObserver = FakeResizeObserver as unknown as typeof ResizeObserver;
+  globalThis.ResizeObserver = FakeResizeObserver;
   Object.defineProperty(offsetHeightOwner(), "offsetHeight", {
     configurable: true,
     get: () => naturalHeight,
@@ -194,7 +196,7 @@ describe("HkAuthCard", () => {
 
   it("snaps unclipped under prefers-reduced-motion without arming the backstop", () => {
     vi.useFakeTimers();
-    vi.spyOn(window, "matchMedia").mockReturnValue({ matches: true } as unknown as MediaQueryList);
+    vi.spyOn(window, "matchMedia").mockReturnValue(fakeAs<MediaQueryList>({ matches: true }));
     naturalHeight = 140;
     const c = mount(h(HkAuthCard, { title: "T" }));
     const wrapper = wrapperOf(c);

package/src/components/HkAuthMethodList.tsx

@@ -1,7 +1,23 @@
 import { defineComponent } from "vue";
 import HkTooltip from "./HkTooltip";
+import { asPropType } from "../utils/typing";
 import "./HkAuthMethodList.scss";
 
+/** One third-party sign-in provider tile. */
+export interface HkAuthMethodListEntry {
+  key: string;
+  /** Accessible name + tooltip text (the hover reveal). */
+  label: string;
+  /** Prebuilt icon vnode (brand SVG, <img>, …) rendered inside the
+   *  framed tile. Typed loose on purpose (same as HkIconButtonGroup
+   *  options): hosts materialize hikari against their own vue store,
+   *  and a hard VNode type breaks typecheck whenever the host's vue
+   *  minor differs. A missing icon falls back to the label's
+   *  initial. */
+  icon?: unknown;
+  disabled?: boolean;
+}
+
 /**
  * HkAuthMethodList — the auth card's third-party sign-in block (the
  * "other ways to sign in" row under the credentials form).
@@ -34,19 +50,7 @@ export default defineComponent({
     divider: { type: String, default: "" },
     /** Provider entries, in render order. */
     methods: {
-      type: Array as unknown as () => Array<{
-        key: string;
-        /** Accessible name + tooltip text (the hover reveal). */
-        label: string;
-        /** Prebuilt icon vnode (brand SVG, <img>, …) rendered inside the
-         *  framed tile. Typed loose on purpose (same as HkIconButtonGroup
-         *  options): hosts materialize hikari against their own vue store,
-         *  and a hard VNode type breaks typecheck whenever the host's vue
-         *  minor differs. A missing icon falls back to the label's
-         *  initial. */
-        icon?: unknown;
-        disabled?: boolean;
-      }>,
+      type: asPropType<HkAuthMethodListEntry[]>(Array),
       required: true,
     },
   },

package/src/components/HkBarChart.scss

@@ -0,0 +1,54 @@
+// HkBarChart anatomy — self-sufficient styling (the component
+// self-sufficiency guard): every class lives here, no host atomic or
+// utility layer. Ink comes from theme tokens so scheme flips repaint
+// with no re-render.
+//
+// Upstreamed from wowsp's PlaytimeTrendChart.scss.
+//
+// AI-generated (GLM-5.3 via ZCode), 2026-10-31 — SySL-1.0 §2.3.
+
+.hk-bar-chart {
+  display: block;
+  width: 100%;
+  height: auto;
+
+  &--empty {
+    height: 120px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--text-sm, 13px);
+    color: var(--hi-color-muted);
+  }
+
+  &__grid {
+    stroke: rgb(var(--color-text) / 0.12);
+    stroke-width: 1;
+  }
+
+  &__axis {
+    fill: rgb(var(--color-text) / 0.55);
+    font-size: 10px;
+    text-anchor: end;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__x {
+    fill: rgb(var(--color-text) / 0.55);
+    font-size: 10px;
+    text-anchor: middle;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__bar {
+    fill: rgb(var(--color-primary));
+    outline: none;
+    cursor: pointer;
+    transition: filter 0.16s ease;
+
+    &:hover,
+    &:focus-visible {
+      filter: brightness(1.08) saturate(1.15);
+    }
+  }
+}

package/src/components/HkBarChart.test.tsx

@@ -0,0 +1,62 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import HkBarChart from "./HkBarChart";
+
+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 BARS = [
+  { label: "Mon", value: 3600, hint: "Mon: 1h" },
+  { label: "Tue", value: 7200, hint: "Tue: 2h" },
+  { label: "Wed", value: 0 },
+];
+
+describe("HkBarChart", () => {
+  it("renders one labeled bar per bucket and skips zero buckets' paths", () => {
+    const el = mount(<HkBarChart bars={BARS} />);
+    const bars = el.querySelectorAll(".hk-bar-chart__bar");
+    expect(bars).toHaveLength(2); // the zero bucket has no path
+    expect([...bars].map((b) => b.getAttribute("data-hint"))).toEqual(["Mon: 1h", "Tue: 2h"]);
+    const xs = [...el.querySelectorAll(".hk-bar-chart__x")].map((t) => t.textContent);
+    expect(xs).toEqual(["Mon", "Tue", "Wed"]);
+  });
+
+  it("formats axis guides through the value formatter", () => {
+    const el = mount(
+      <HkBarChart bars={BARS} formatValue={(v) => `${Math.round(v / 3600)}h`} />,
+    );
+    const axis = [...el.querySelectorAll(".hk-bar-chart__axis")].map((t) => t.textContent);
+    // niceMax(7200s) = 10000s → guides 0 / 5000 / 10000.
+    expect(axis).toEqual(["0h", "1h", "3h"]);
+  });
+
+  it("shows the empty state when every bucket is zero", () => {
+    const el = mount(
+      <HkBarChart bars={[{ label: "a", value: 0 }]} emptyText="nothing here" />,
+    );
+    expect(el.querySelector(".hk-bar-chart--empty")?.textContent).toBe("nothing here");
+  });
+
+  it("carries the chart-level aria label", () => {
+    const el = mount(<HkBarChart bars={BARS} ariaLabel="weekly playtime" />);
+    expect(el.querySelector(".hk-bar-chart")?.getAttribute("aria-label")).toBe(
+      "weekly playtime",
+    );
+  });
+});

package/src/components/HkBarChart.tsx

@@ -0,0 +1,114 @@
+import { computed, defineComponent, type PropType } from "vue";
+
+import { barLayout, type BarSlot } from "./barChart";
+import "./HkBarChart.scss";
+
+/**
+ * HkBarChart — one bar per bucket over a hand-drawn declarative SVG (no
+ * chart library; the HkTreemap/HkCalendarHeatmap dependency-free line).
+ *
+ * Upstreamed from wowsp's playtime trend chart (2026-10 user direction:
+ * the apps' best charts become standard hikari business components).
+ * Gridlines at 0 / half / a nice max, x labels under every bar, ink
+ * styled in SCSS from theme tokens so scheme flips repaint without a
+ * re-render, and hover hints through the consumer's own tooltip channel
+ * (`hint` lands in both `aria-label` and the `data-hint` attribute the
+ * wowsp delegated-tooltip hook reads — hikari itself renders no native
+ * title bubble).
+ *
+ * Dumb by design: the caller owns aggregation and passes the settled
+ * buckets in. All geometry lives in ./barChart (pure, pinned by its own
+ * tests).
+ *
+ * AI-generated (GLM-5.3 via ZCode), 2026-10-31 — SySL-1.0 §2.3.
+ */
+export default defineComponent({
+  name: "HkBarChart",
+  props: {
+    /** The bars, in axis order (oldest → newest for trend charts). */
+    bars: {
+      type: Array as PropType<{ label: string; value: number; hint?: string }[]>,
+      required: true,
+    },
+    /** Frame size (the SVG viewBox; CSS scales it). */
+    width: { type: Number, default: 640 },
+    height: { type: Number, default: 220 },
+    /** Value formatter for the axis guides and the aria label. */
+    formatValue: {
+      type: Function as PropType<(v: number) => string>,
+      default: (v: number) => String(Math.round(v)),
+    },
+    /** Accessible name for the whole chart; defaults to a value summary. */
+    ariaLabel: { type: String, default: null },
+    /** Rendered when every bucket is zero / the array is empty. */
+    emptyText: { type: String, default: "No data" },
+  },
+  emits: {
+    /** A bar was clicked (its bucket index). */
+    select: (index: number) => typeof index === "number",
+  },
+  setup(props, { emit }) {
+    const layout = computed(() =>
+      barLayout(props.bars.map((b) => b.value), {
+        width: props.width,
+        height: props.height,
+      }),
+    );
+    const empty = computed(() => props.bars.every((b) => !(b.value > 0)));
+    const aria = computed(
+      () =>
+        props.ariaLabel ??
+        props.bars.map((b) => `${b.label} ${props.formatValue(b.value)}`).join(", "),
+    );
+    const hintOf = (b: { label: string; value: number; hint?: string }, i: number): string =>
+      b.hint ?? `${b.label}: ${props.formatValue(b.value)}`;
+
+    return () => {
+      if (empty.value) {
+        return <div class="hk-bar-chart hk-bar-chart--empty">{props.emptyText}</div>;
+      }
+      const l = layout.value;
+      return (
+        <svg
+          class="hk-bar-chart"
+          viewBox={`0 0 ${l.width} ${l.height}`}
+          preserveAspectRatio="xMidYMid meet"
+          role="img"
+          aria-label={aria.value}
+        >
+          {l.gridlines.map((g) => (
+            <g key={g.value}>
+              <line
+                class="hk-bar-chart__grid"
+                x1={l.sidePad}
+                y1={g.y}
+                x2={l.width - 8}
+                y2={g.y}
+              />
+              <text class="hk-bar-chart__axis" x={l.sidePad - 6} y={g.y + 3}>
+                {props.formatValue(g.value)}
+              </text>
+            </g>
+          ))}
+          {l.bars.map((s: BarSlot, i: number) => (
+            <g key={i}>
+              {s.path ? (
+                <path
+                  class="hk-bar-chart__bar"
+                  d={s.path}
+                  data-hint={hintOf(props.bars[i], i)}
+                  aria-label={hintOf(props.bars[i], i)}
+                  tabindex={0}
+                  onClick={() => emit("select", i)}
+                />
+              ) : null}
+              <text class="hk-bar-chart__x" x={s.centerX} y={l.baselineY + 14}>
+                {props.bars[i].label}
+              </text>
+            </g>
+          ))}
+        </svg>
+      );
+    };
+  },
+});

package/src/components/HkBoard.scale.test.ts

@@ -33,10 +33,7 @@ async function mountBoard() {
   // The board reads its viewport size at mount (clientWidth/Height, i.e. the
   // layout box): pin it on the prototype for the duration so the camera's
   // clamp has a real viewport to work with, the way a laid-out page would.
-  const proto = HTMLElement.prototype as unknown as {
-    clientWidth: number;
-    clientHeight: number;
-  };
+  const proto = HTMLElement.prototype;
   const beforeW = Object.getOwnPropertyDescriptor(proto, "clientWidth");
   const beforeH = Object.getOwnPropertyDescriptor(proto, "clientHeight");
   Object.defineProperty(proto, "clientWidth", {

package/src/components/HkBoard3D.test.tsx

@@ -6,6 +6,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 import * as THREE from "three";
+import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js";
 
 const H = vi.hoisted(() => {
   class FakeWebGLRenderer {
@@ -186,7 +187,7 @@ describe("HkBoard3D", () => {
     expect(body.userData.board3dId).toBe("node-1");
     expect(label.classList.contains("hk-board3d-label")).toBe(true);
     // Label rides the object as a CSS2D child at the requested offset.
-    const tag = body.children.find((c) => (c as unknown as { element?: HTMLElement }).element === label);
+    const tag = body.children.find((c) => c instanceof CSS2DObject && c.element === label);
     expect(tag).toBeDefined();
     expect(tag!.position.y).toBe(2);
 
@@ -329,7 +330,7 @@ describe("HkBoard3D", () => {
     };
     engine!.setObject("node", { object: body, label: chip() });
     const labelChildren = () =>
-      body.children.filter((c) => (c as unknown as { isCSS2DObject?: boolean }).isCSS2DObject).length;
+      body.children.filter((c) => c instanceof CSS2DObject).length;
     expect(labelChildren()).toBe(1);
 
     // Re-registering the same id must REPLACE its chip, not stack a second.
@@ -414,9 +415,9 @@ describe("HkBoard3D", () => {
     const body = new THREE.Mesh(new THREE.SphereGeometry(1, 8, 6), new THREE.MeshBasicMaterial());
     engine!.setObject("node", { object: body });
 
-    // A consumer casting the view to a mutable Map must not be able to
-    // desynchronise the board from its own scene.
-    (engine!.objects() as unknown as Map<string, unknown>).clear();
+    // An untyped consumer reaching for the mutable Map API must not be able
+    // to desynchronise the board from its own scene.
+    Map.prototype.clear.call(engine!.objects());
     expect(engine!.objects().has("node")).toBe(true);
     engine!.setObject("node", null);
     expect(body.parent).toBeNull();
@@ -448,7 +449,7 @@ describe("HkBoard3D", () => {
     // radius to `max(min, min(max, r))`, so a reversed window pins the
     // eye at 600 and defeats every fit (the mocked controls in this
     // suite do not clamp, hence the direct assertion).
-    const controls = engine!.controls as unknown as { minDistance: number; maxDistance: number };
+    const controls = engine!.controls;
     expect(controls.minDistance).toBe(2);
     expect(controls.maxDistance).toBe(600);
 
@@ -615,10 +616,8 @@ describe("HkBoard3D", () => {
     engine!.applyLighting({ ambientIntensity: 0.9 });
     engine!.fitGround({ min: [0, 0, 0], max: [10, 0, 10] });
     engine!.setAmbientIntensity(0.3);
-    const ambient = engine!.scene.children.find(
-      (c) => c.constructor.name === "AmbientLight",
-    ) as unknown as { intensity: number };
-    expect(ambient.intensity).toBeCloseTo(0.3, 5);
+    const ambient = engine!.scene.children.find((c) => c instanceof THREE.AmbientLight);
+    expect(ambient!.intensity).toBeCloseTo(0.3, 5);
   });
 
   it("disposes the lighting rig (and its shadow map) on unmount", async () => {
@@ -632,11 +631,9 @@ describe("HkBoard3D", () => {
       ambientIntensity: 0.9,
       points: [{ color: [1, 0, 0], intensity: 2, range: 10, position: [0, 3, 0] }],
     });
-    const sun = engine!.scene.children.find(
-      (c) => c.constructor.name === "DirectionalLight",
-    ) as unknown as { dispose: () => void; shadow: { dispose: () => void } };
-    const sunSpy = vi.spyOn(sun, "dispose");
-    const shadowSpy = vi.spyOn(sun.shadow, "dispose");
+    const sun = engine!.scene.children.find((c) => c instanceof THREE.DirectionalLight);
+    const sunSpy = vi.spyOn(sun!, "dispose");
+    const shadowSpy = vi.spyOn(sun!.shadow, "dispose");
     const scene = engine!.scene;
 
     const m = mounts.splice(0)[0];

package/src/components/HkBoard3D.tsx

@@ -86,6 +86,7 @@ import {
   type LightingRigOptions,
 } from "../scene3d/lighting";
 import { BOARD3D_HELPERS_LAYER, BOARD3D_MAIN_LAYER, fitDistance } from "../utils/scene3d";
+import { asPropType } from "../utils/typing";
 import {
   createHoverBox,
   isVisibleInHierarchy,
@@ -336,11 +337,11 @@ export default defineComponent({
     /** Starting eye / orbit target. STATIC after mount (a non-finite
      *  or short array falls back to the defaults). */
     initialPosition: {
-      type: Array as unknown as PropType<[number, number, number]>,
+      type: asPropType<[number, number, number]>(Array),
       default: () => [22, 16, 26],
     },
     initialTarget: {
-      type: Array as unknown as PropType<[number, number, number]>,
+      type: asPropType<[number, number, number]>(Array),
       default: () => [0, 0, 0],
     },
     /** Orbit distance window. STATIC after mount (applied to the

package/src/components/HkCalendarHeatmap.barrel.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import * as barrel from "../index";
+import { asIndexable } from "../utils/typing";
 
 /**
  * The public barrel guard for the calendar heatmap's exports (R3 on the
@@ -15,7 +16,7 @@ import * as barrel from "../index";
  */
 describe("the public barrel", () => {
   it("exports the heatmap component under both family names", () => {
-    const hk = barrel.HkCalendarHeatmap as unknown as { name?: string };
+    const hk = asIndexable(barrel.HkCalendarHeatmap);
     expect(hk, "HkCalendarHeatmap must be re-exported").toBeTruthy();
     expect(hk.name).toBe("HkCalendarHeatmap");
     // The H- alias rides the HCard/HkCard family convention.

package/src/components/HkCaptchaWidget.tsx

@@ -2,6 +2,7 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, ref, watch, type
 import { ShieldAlert } from "lucide-vue-next";
 
 import { useI18n } from "../i18n/context";
+import { asIndexable } from "../utils/typing";
 
 import "./HkCaptchaWidget.scss";
 
@@ -65,7 +66,7 @@ type GrecaptchaApi = {
 };
 
 function getGlobal(name: string): unknown {
-  return (window as unknown as Record<string, unknown>)[name];
+  return asIndexable(window)[name];
 }
 
 export const HkCaptchaWidget = defineComponent({

package/src/components/HkCheckbox.test.tsx

@@ -2,6 +2,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkCheckbox from "./HkCheckbox";
+import { invalidInput } from "../test-utils/invalid";
 
 /**
  * HkCheckbox contract tests:
@@ -89,7 +90,8 @@ describe("HkCheckbox model states", () => {
   });
 
   it("maps modelValue=null to the indeterminate dash without checking the input", () => {
-    const c = mount(h(HkCheckbox, { modelValue: null as unknown as boolean }));
+    // deliberately type-invalid: JS consumers pass null to the boolean prop
+    const c = mount(h(HkCheckbox, { modelValue: invalidInput<boolean>(null) }));
     const box = c.querySelector<HTMLElement>(".hk-checkbox-box")!;
     expect(box.getAttribute("data-indeterminate")).toBe("");
     expect(box.hasAttribute("data-checked")).toBe(false);
@@ -107,7 +109,9 @@ describe("HkCheckbox model states", () => {
     expect(checked.querySelector(".hk-checkbox-icon")).toBeNull();
 
     // null in radio mode: no dash — indeterminate is checkbox-only.
-    const unset = mount(h(HkCheckbox, { modelValue: null as unknown as boolean, type: "radio" }));
+    const unset = mount(
+      h(HkCheckbox, { modelValue: invalidInput<boolean>(null), type: "radio" }),
+    );
     expect(unset.querySelector(".hk-checkbox-indeterminate")).toBeNull();
     expect(unset.querySelector(".hk-checkbox-dot")).toBeNull();
   });

package/src/components/HkColorPicker.tsx

@@ -2,6 +2,7 @@ import { computed, defineComponent, onBeforeUnmount, ref, watch, type PropType }
 import { clampRgbToBands, hueDelta, rgbToHsl, wrapHue, type HueClamp } from "../theme/tokenGroups";
 import { useOverlay } from "../runtime/useOverlay";
 import { useI18n } from "../i18n/context";
+import { asPropType } from "../utils/typing";
 import HInput from "./HkInput";
 import HPopover from "./HkPopover";
 import "./HkColorPicker.scss";
@@ -142,9 +143,9 @@ export default defineComponent({
     /** Optional physical-color clamp: hue locked to center±range (degrees, circular). */
     hueClamp: { type: Object as PropType<HueClamp>, default: undefined },
     /** Optional saturation safe band, 0–1. */
-    sRange: { type: Array as unknown as PropType<[number, number]>, default: undefined },
+    sRange: { type: asPropType<[number, number]>(Array), default: undefined },
     /** Optional lightness safe band, 0–1. */
-    lRange: { type: Array as unknown as PropType<[number, number]>, default: undefined },
+    lRange: { type: asPropType<[number, number]>(Array), default: undefined },
   },
   emits: {
     change: (_rgb: { r: number; g: number; b: number }) => true,

package/src/components/HkConnectionStatus.shell.test.tsx

@@ -18,7 +18,7 @@ describe("HkConnectionStatus (shell)", () => {
   it("renders an inert unknown state with zero network calls", () => {
     const fetchSpy = vi.fn();
     const holder = globalThis.fetch;
-    globalThis.fetch = fetchSpy as unknown as typeof fetch;
+    globalThis.fetch = fetchSpy;
     try {
       const container = document.createElement("div");
       document.body.appendChild(container);