@celestia-island/hikari 0.55.78 → 0.55.80

package/src/components/HkNodeCanvas.tsx

@@ -1293,27 +1293,35 @@ export default defineComponent({
                       data-edge-id={edge.id}
                       data-edge-type={edge.type}
                     >
-                      {props.interactiveEdges && strokes.map((sp, i) => (
-                        <path
-                          key={`halo-${i}`}
-                          class="hk-node-canvas-edge-halo"
-                          d={sp.d}
-                          fill="none"
-                          stroke={edge.color ?? "var(--hk-border-3, #555)"}
-                          stroke-width={sp.width * 3}
-                          stroke-dasharray={sp.dashed ? "6 4" : undefined}
-                        />
-                      ))}
-                      {strokes.map((sp, i) => (
-                        <path
-                          key={`ink-${i}`}
-                          d={sp.d}
-                          fill="none"
-                          stroke={edge.color ?? "var(--hk-border-3, #555)"}
-                          stroke-width={sp.width}
-                          stroke-dasharray={sp.dashed ? "6 4" : undefined}
-                        />
-                      ))}
+                      {props.interactiveEdges && strokes.map((sp, i) => {
+                        const edgeInk = edge.color ?? "var(--hk-border-3, #555)";
+                        return (
+                          <path
+                            key={`halo-${i}`}
+                            class="hk-node-canvas-edge-halo"
+                            d={sp.d}
+                            fill="none"
+                            stroke={edgeInk}
+                            style={{ stroke: edgeInk }}
+                            stroke-width={sp.width * 3}
+                            stroke-dasharray={sp.dashed ? "6 4" : undefined}
+                          />
+                        );
+                      })}
+                      {strokes.map((sp, i) => {
+                        const edgeInk = edge.color ?? "var(--hk-border-3, #555)";
+                        return (
+                          <path
+                            key={`ink-${i}`}
+                            d={sp.d}
+                            fill="none"
+                            stroke={edgeInk}
+                            style={{ stroke: edgeInk }}
+                            stroke-width={sp.width}
+                            stroke-dasharray={sp.dashed ? "6 4" : undefined}
+                          />
+                        );
+                      })}
                       {edge.label && (
                         <text
                           x={mid.x}
@@ -1321,6 +1329,7 @@ export default defineComponent({
                           text-anchor="middle"
                           font-size="11"
                           fill="var(--hk-text-2, #aaa)"
+                          style={{ fill: "var(--hk-text-2, #aaa)" }}
                         >
                           {edge.label}
                         </text>

package/src/components/HkPageHeader.scss

@@ -78,3 +78,22 @@
     height: var(--space-24, 1.5rem);
   }
 }
+
+/* lead — a back affordance (or any leading control) riding before the
+ * title inside the h1 box, keeping the heading semantics intact. */
+.hk-page-header-lead {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* titleExtra — inline chips (status badges, mono ids) after the title
+ * text; baseline-aligned with the title, wrapping with it. */
+.hk-page-header-title-extra {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 400;
+  min-width: 0;
+}

package/src/components/HkPageHeader.test.ts

@@ -64,4 +64,21 @@ describe("HkPageHeader", () => {
       "hk-page-header-dense",
     );
   });
+  it("renders the lead slot before the title icon", () => {
+    const c = mountHeader({ title: "T" }, { lead: () => h("button", { class: "probe-back" }, "Back") });
+    const title = c.querySelector(".hk-page-header-title")!;
+    expect(title.querySelector(".hk-page-header-lead .probe-back")).toBeTruthy();
+    const lead = c.querySelector(".hk-page-header-lead")!;
+    const icon = c.querySelector(".hk-page-header-icon");
+    if (icon) {
+      expect(lead.compareDocumentPosition(icon) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    }
+  });
+
+  it("renders titleExtra inline after the title text", () => {
+    const c = mountHeader({ title: "T" }, { titleExtra: () => h("span", { class: "probe-chip" }, "stable") });
+    const extra = c.querySelector(".hk-page-header-title-text + .hk-page-header-title-extra") ??
+      c.querySelector(".hk-page-header-title-extra");
+    expect(extra?.textContent).toContain("stable");
+  });
 });

package/src/components/HkPageHeader.tsx

@@ -31,12 +31,14 @@ export const HkPageHeader = defineComponent({
       <div class={["hk-page-header", props.dense && "hk-page-header-dense"]}>
         <div class="hk-page-header-main">
           <h1 class="hk-page-header-title">
+            {slots.lead ? <span class="hk-page-header-lead">{slots.lead()}</span> : null}
             {slots.icon
               ? <span class="hk-page-header-icon">{slots.icon()}</span>
               : props.icon
                 ? <span class="hk-page-header-icon">{h(props.icon)}</span>
                 : null}
             <span class="hk-page-header-title-text">{props.title}</span>
+            {slots.titleExtra ? <span class="hk-page-header-title-extra">{slots.titleExtra()}</span> : null}
           </h1>
           {props.subtitle && (
             <p class="hk-page-header-subtitle">{props.subtitle}</p>

package/src/components/HkSectionHeader.scss

@@ -0,0 +1,81 @@
+/* HkSectionHeader — the standard in-card / in-page section header. */
+
+.hk-section-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4, 0.25rem);
+  min-width: 0;
+}
+
+.hk-section-header-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  min-width: 0;
+}
+
+.hk-section-header-icon {
+  display: inline-flex;
+  color: rgb(var(--color-muted));
+  flex-shrink: 0;
+}
+
+.hk-section-header-title {
+  margin: 0;
+  font-size: var(--text-sm, 0.875rem);
+  font-weight: 600;
+  color: rgb(var(--color-text));
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-8, 0.5rem);
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.hk-section-header-count {
+  font-size: var(--text-2xs, 0.625rem);
+  font-weight: 400;
+  color: rgb(var(--color-muted));
+  white-space: nowrap;
+}
+
+.hk-section-header-actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  flex-shrink: 0;
+}
+
+.hk-section-header-description {
+  margin: 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: rgb(var(--color-muted));
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+
+/* ── dense: tighter rhythm for dense panels ─────────────────────────── */
+.hk-section-header-dense {
+  gap: var(--space-2, 0.125rem);
+}
+
+/* ── micro: tiny uppercase eyebrow label ────────────────────────────── */
+.hk-section-header-micro .hk-section-header-title {
+  font-size: var(--text-2xs, 0.625rem);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgb(var(--color-muted));
+}
+
+/* ── mono: mono-caption idiom for ledgers/detail rails ──────────────── */
+.hk-section-header-mono .hk-section-header-title {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: var(--text-xs, 0.75rem);
+  font-weight: 500;
+}
+
+.hk-section-header-mono .hk-section-header-count {
+  font-family: var(--font-mono, ui-monospace, monospace);
+}

package/src/components/HkSectionHeader.test.tsx

@@ -0,0 +1,70 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, defineComponent, h } from "vue";
+
+import { HkSectionHeader } from "./HkSectionHeader";
+
+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 FakeIcon = defineComponent({
+  name: "FakeIcon",
+  props: { size: { type: [Number, String], default: 24 } },
+  setup: (props) => () => h("svg", { "data-fake-icon": "", width: props.size, height: props.size }),
+});
+
+describe("HkSectionHeader", () => {
+  it("renders an h3 title by default with the count beside it", () => {
+    const c = mount(h(HkSectionHeader, { title: "Token Usage", count: "12 total" }));
+    const title = c.querySelector("h3.hk-section-header-title") as HTMLElement;
+    expect(title).toBeTruthy();
+    expect(title.textContent).toContain("Token Usage");
+    expect(c.querySelector(".hk-section-header-count")?.textContent).toBe("12 total");
+  });
+
+  it("honors the level prop for the document outline", () => {
+    const c = mount(h(HkSectionHeader, { title: "T", level: "h2" }));
+    expect(c.querySelector("h2.hk-section-header-title")).toBeTruthy();
+    const c2 = mount(h(HkSectionHeader, { title: "T", level: "div" }));
+    expect(c2.querySelector("h2, h3")).toBeNull();
+    expect(c2.querySelector(".hk-section-header-title")).toBeTruthy();
+  });
+
+  it("renders description under the row and actions right-aligned in the row", () => {
+    const c = mount(
+      h(HkSectionHeader, { title: "T", description: "one-liner" }, {
+        actions: () => h("button", { class: "probe-action" }, "Export"),
+      }),
+    );
+    expect(c.querySelector(".hk-section-header-description")?.textContent).toBe("one-liner");
+    expect(c.querySelector(".hk-section-header-row .hk-section-header-actions .probe-action")).toBeTruthy();
+  });
+
+  it("renders the leading icon inside the row", () => {
+    const c = mount(h(HkSectionHeader, { title: "T", icon: FakeIcon }));
+    expect(c.querySelector(".hk-section-header-row .hk-section-header-icon svg[data-fake-icon]")).toBeTruthy();
+  });
+
+  it("applies variant and dense classes", () => {
+    const c = mount(h(HkSectionHeader, { title: "T", variant: "micro", dense: true }));
+    const root = c.querySelector(".hk-section-header") as HTMLElement;
+    expect(root.className).toContain("hk-section-header-micro");
+    expect(root.className).toContain("hk-section-header-dense");
+    const c2 = mount(h(HkSectionHeader, { title: "T", variant: "mono" }));
+    expect((c2.querySelector(".hk-section-header") as HTMLElement).className).toContain("hk-section-header-mono");
+  });
+});

package/src/components/HkSectionHeader.tsx

@@ -0,0 +1,76 @@
+import { defineComponent, h, type Component, type PropType } from "vue";
+
+import "./HkSectionHeader.scss";
+
+export type SectionHeaderVariant = "default" | "micro" | "mono";
+
+/**
+ * HkSectionHeader — the standard in-card / in-page section header.
+ *
+ * The audit that introduced this counted ~89 distinct hand-rolled
+ * treatments for the same anatomy across the consumers: a small
+ * semibold heading, an optional one-line description under (or beside)
+ * it, an optional right-aligned actions cluster, and occasionally a
+ * leading icon or a trailing count badge. One component replaces the
+ * family.
+ *
+ * Variants:
+ * - `default` — `text-sm font-semibold` heading (the dominant idiom).
+ * - `micro`   — tiny uppercase eyebrow label for dense panels.
+ * - `mono`    — mono-caption idiom used by ledgers/detail rails.
+ *
+ * ```tsx
+ * <HkSectionHeader title="Token Usage" description="Per model this range">
+ *   {{ actions: () => <HkButton size="sm">Export</HkButton> }}
+ * </HkSectionHeader>
+ * ```
+ */
+export const HkSectionHeader = defineComponent({
+  name: "HkSectionHeader",
+  props: {
+    title: { type: String, required: true },
+    /** Heading element: h2/h3 keep document outline, div for visual-only. */
+    level: { type: String as PropType<"h2" | "h3" | "div">, default: "h3" },
+    /** One-line description rendered under the heading. */
+    description: { type: String, default: undefined },
+    /** Leading icon component. */
+    icon: { type: Object as PropType<Component>, default: undefined },
+    /** Trailing count badge (e.g. "12 total") rendered beside the title. */
+    count: { type: String, default: undefined },
+    variant: { type: String as PropType<SectionHeaderVariant>, default: "default" },
+    /** Tighter spacing for dense panels. */
+    dense: { type: Boolean, default: false },
+  },
+  setup(props, { slots }) {
+    return () => {
+      const heading = h(
+        props.level,
+        { class: "hk-section-header-title" },
+        [
+          props.title,
+          props.count != null ? <span class="hk-section-header-count">{props.count}</span> : null,
+        ],
+      );
+      return (
+        <div
+          class={[
+            "hk-section-header",
+            `hk-section-header-${props.variant}`,
+            props.dense && "hk-section-header-dense",
+          ]}
+        >
+          <div class="hk-section-header-row">
+            {props.icon ? <span class="hk-section-header-icon">{h(props.icon, { size: 15 })}</span> : null}
+            {heading}
+            {slots.actions ? <div class="hk-section-header-actions">{slots.actions()}</div> : null}
+          </div>
+          {props.description ? (
+            <p class="hk-section-header-description">{props.description}</p>
+          ) : slots.description ? (
+            <p class="hk-section-header-description">{slots.description()}</p>
+          ) : null}
+        </div>
+      );
+    };
+  },
+});

package/src/components/HkStatCard.scss

@@ -187,3 +187,13 @@
 .hk-stat-card-bar-detail {
   max-width: 100%;
 }
+
+/* footer slot — free-form content row under the value/hint (badge rows,
+ * deltas, sparklines). Wraps; does not collapse like the hint. */
+.hk-stat-card-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-8, 0.5rem);
+  max-width: 100%;
+}

package/src/components/HkStatCard.tsx

@@ -15,6 +15,8 @@ export type StatTone = "success" | "warning" | "error" | "info" | "primary" | "m
  *   hint (the original anatomy, still the default).
  * - `chip`  — horizontal: a tone-tinted icon chip beside value + label,
  *   with an optional trailing `aside` slot (tier badge, delta, …).
+ *   Every variant also takes a `footer` slot — a free-form content row
+ *   under the value/hint for badge rows and deltas.
  * - `ring`  — a single utilization ring with the value inside, the label
  *   (with the icon) underneath, and the hint as the detail line.
  * - `bar`   — label + value on one row over a tone-colored progress bar,
@@ -126,6 +128,7 @@ export const HkStatCard = defineComponent({
               {slots.aside && <div class="hk-stat-card-aside">{slots.aside()}</div>}
             </div>
             {props.hint && <div class="hk-stat-card-hint">{props.hint}</div>}
+            {slots.footer && <div class="hk-stat-card-footer">{slots.footer()}</div>}
           </div>
         );
       }
@@ -157,6 +160,7 @@ export const HkStatCard = defineComponent({
                 {props.hint}
               </div>
             )}
+            {slots.footer && <div class="hk-stat-card-footer">{slots.footer()}</div>}
           </div>
         );
       }
@@ -178,6 +182,7 @@ export const HkStatCard = defineComponent({
                 {props.hint}
               </div>
             )}
+            {slots.footer && <div class="hk-stat-card-footer">{slots.footer()}</div>}
           </div>
         );
       }
@@ -191,6 +196,7 @@ export const HkStatCard = defineComponent({
           </div>
           <div class="hk-stat-card-value">{props.value}</div>
           {props.hint && <div class="hk-stat-card-hint" title={props.hint}>{props.hint}</div>}
+          {slots.footer && <div class="hk-stat-card-footer">{slots.footer()}</div>}
         </div>
       );
     };

package/src/components/HkStatCard.variants.test.tsx

@@ -196,6 +196,38 @@ describe("HkStatCard bar", () => {
   });
 });
 
+describe("HkStatCard footer slot (all variants)", () => {
+  it("renders the footer content row under the value on plain", () => {
+    const c = mount(
+      h(HkStatCard, { label: "Total", value: "1.2M" }, { footer: () => h("span", { class: "probe-badge" }, "3 dims") }),
+    );
+    expect(c.querySelector(".hk-stat-card-footer .probe-badge")?.textContent).toBe("3 dims");
+  });
+
+  it("renders the footer row after the detail line on ring and bar", () => {
+    const ring = mount(
+      h(HkStatCard, { variant: "ring", value: "40%", label: "L", pct: 40 }, { footer: () => h("i", { class: "probe-r" }) }),
+    );
+    expect(ring.querySelector(".hk-stat-card-footer .probe-r")).toBeTruthy();
+    const bar = mount(
+      h(HkStatCard, { variant: "bar", value: "72%", label: "L", pct: 72 }, { footer: () => h("i", { class: "probe-b" }) }),
+    );
+    expect(bar.querySelector(".hk-stat-card-footer .probe-b")).toBeTruthy();
+  });
+
+  it("renders the footer row on the chip variant too", () => {
+    const c = mount(
+      h(HkStatCard, { variant: "chip", value: 3, label: "Running" }, { footer: () => h("i", { class: "probe-c" }) }),
+    );
+    expect(c.querySelector(".hk-stat-card-footer .probe-c")).toBeTruthy();
+  });
+
+  it("omits the footer node when the slot is absent", () => {
+    const c = mount(h(HkStatCard, { label: "L", value: 1 }));
+    expect(c.querySelector(".hk-stat-card-footer")).toBeNull();
+  });
+});
+
 describe("statToneColor", () => {
   it("maps every tone to the theme-variable palette the card paints with", () => {
     expect(statToneColor("success")).toBe("rgb(var(--color-success))");

package/src/components/HkSvgVarPresentation.test.tsx

@@ -0,0 +1,179 @@
+import { readdir, readFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import * as Hk from "../index";
+import HkBoard from "./HkBoard";
+import HkMinimap from "./HkMinimap";
+
+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();
+  }
+});
+
+/**
+ * SVG presentation attributes carrying `var()` colors are NOT substituted
+ * on every engine — Firefox drops the whole declaration (stroke:none / fill:
+ * none → invisible ink; svgwg#1031, browsers still disagree). The house
+ * contract is therefore: paint through an inline `style` channel BESIDE the
+ * attribute (inline always wins, so literal colors behave identically, while
+ * var() colors still resolve everywhere). HkGaugeRing documents the same
+ * contract for its ring colors; these tests pin the remaining SVG painters.
+ */
+
+describe("HkBoard edge ink dual channel", () => {
+  it("paints edge strokes through the inline style beside the attribute", () => {
+    const c = mount(
+      h(HkBoard, {
+        nodes: [
+          { id: "a", x: 40, y: 40, w: 120, h: 60, label: "A" },
+          { id: "b", x: 320, y: 40, w: 120, h: 60, label: "B" },
+        ],
+        edges: [{ id: "e1", from: "a", to: "b" }],
+      }),
+    );
+    const edge = c.querySelector(".hk-board-edge") as SVGPathElement;
+    expect(edge).toBeTruthy();
+    const attr = edge.getAttribute("stroke");
+    const inline = edge.style.stroke;
+    // the attribute keeps the literal value…
+    expect(attr).toBe("rgb(var(--color-primary) / 38%)");
+    // …and the inline channel carries the SAME var() form so Firefox resolves it
+    expect(inline).toBe("rgb(var(--color-primary) / 38%)");
+  });
+});
+
+describe("HkMinimap paint dual channel", () => {
+  it("paints box fill/stroke through the inline style beside the attributes", () => {
+    const c = mount(
+      h(HkMinimap, {
+        boxes: [{ id: "b1", bounds: { x: 0, y: 0, w: 100, h: 80 }, color: "rgb(var(--color-primary))" }],
+        hubPos: { x: 600, y: 400 },
+      }),
+    );
+    const box = c.querySelector(".hk-minimap-svg rect[fill]") as SVGRectElement;
+    expect(box).toBeTruthy();
+    expect(box.getAttribute("fill")).toBe("rgb(var(--color-primary))");
+    expect(box.style.fill).toBe("rgb(var(--color-primary))");
+    expect(box.style.stroke).toBe("rgb(var(--color-primary))");
+  });
+
+  it("paints the hub dot and viewport frame through the inline style", () => {
+    const c = mount(
+      h(HkMinimap, {
+        // an empty roster renders null (documented early return) — the frame
+        // and hub ride along with any painted box
+        boxes: [{ id: "b1", bounds: { x: 0, y: 0, w: 100, h: 80 }, color: "rgb(var(--color-info, #5b8def))" }],
+        hubPos: { x: 600, y: 400 },
+      }),
+    );
+    const svg = c.querySelector(".hk-minimap-svg") as SVGSVGElement;
+    expect(svg).toBeTruthy();
+    const hub = svg.querySelector("circle") as SVGCircleElement;
+    expect(hub.getAttribute("fill")).toBe("rgb(var(--color-primary))");
+    expect(hub.style.fill).toBe("rgb(var(--color-primary))");
+    const frame = svg.querySelector('rect[stroke-dasharray="3 2"]') as SVGRectElement;
+    expect(frame.getAttribute("stroke")).toBe("rgb(var(--color-primary))");
+    expect(frame.style.stroke).toBe("rgb(var(--color-primary))");
+  });
+});
+
+describe("static sweep — literal var() presentation attributes must ride an inline style", () => {
+  const dir = dirname(fileURLToPath(import.meta.url));
+
+  /** Returns offending `stroke="…var(…"` / `fill="…var(…"` literal lines that
+   *  have no compensating `style={{` within the following 3 lines. */
+  async function violations(file: string): Promise<string[]> {
+    const text = await readFile(join(dir, file), "utf-8");
+    const lines = text.split("\n");
+    const bad: string[] = [];
+    for (let i = 0; i < lines.length; i++) {
+      if (/\b(stroke|fill)="[^"]*var\(--/.test(lines[i])) {
+        const window = lines.slice(i + 1, i + 4).join("\n");
+        const prop = /stroke=/.test(lines[i]) ? "stroke" : "fill";
+        if (!window.includes(`style={{`) || !window.includes(`${prop}:`)) {
+          bad.push(`${file}:${i + 1}: ${lines[i].trim()}`);
+        }
+      }
+    }
+    return bad;
+  }
+
+  it("the sweep self-certifies on a known-bad sample", async () => {
+    // Zero-产出防呆：the detector must fire on a constructed violation, or the
+    // sweep below proves nothing.
+    const badSample = [
+      `<circle`,
+      `  cx={1}`,
+      `  fill="rgb(var(--color-x))"`,
+      `  r={2}`,
+      `/>`,
+    ].join("\n");
+    const lines = badSample.split("\n");
+    let fired = false;
+    for (let i = 0; i < lines.length; i++) {
+      if (/\b(stroke|fill)="[^"]*var\(--/.test(lines[i])) {
+        const window = lines.slice(i + 1, i + 4).join("\n");
+        if (!window.includes(`style={{`)) fired = true;
+      }
+    }
+    expect(fired).toBe(true);
+    void violations;
+  });
+
+  it("every painted component file is clean", async () => {
+    const files = (await readdir(dir)).filter((f) => /^Hk.+\.tsx$/.test(f) && !f.includes(".test."));
+    const offenders: string[] = [];
+    for (const f of files) {
+      offenders.push(...(await violations(f)));
+    }
+    expect(offenders).toEqual([]);
+  });
+});
+
+describe("index export surface smoke", () => {
+  it("exposes the standard KPI/filter/painter surfaces under both names", () => {
+    for (const name of [
+      "HkStatCard",
+      "HStatCard",
+      "HkFilterBar",
+      "HFilterBar",
+      "HkGaugeRing",
+      "HGaugeRing",
+      "HkBoard",
+      "HkMinimap",
+      "HkNodeCanvas",
+      "HkEmptyState",
+      "HkPageHeader",
+      "HkTable",
+      "HkIconChip",
+      "HIconChip",
+      "HkCardList",
+      "HCardList",
+      "HkListRow",
+      "HListRow",
+      "HkSectionHeader",
+      "HSectionHeader",
+      "HkAdminTablePage",
+    ] as const) {
+      expect(Hk, `missing export: ${name}`).toHaveProperty(name);
+    }
+    expect(typeof Hk.statToneColor).toBe("function");
+  });
+});

package/src/index.ts

@@ -754,6 +754,12 @@ export { HkStatCard as HkStatCard } from "./components/HkStatCard";
 export { statToneColor, type StatTone as StatTone, type StatVariant as StatVariant } from "./components/HkStatCard";
 export { HkStatusPill as HkStatusPill } from "./components/HkStatusPill";
 export { default as HkFilterBar } from "./components/HkFilterBar";
+export { HkIconChip as HkIconChip } from "./components/HkIconChip";
+export { HkIconChip as HIconChip } from "./components/HkIconChip";
+export { HkCardList, HkListRow } from "./components/HkCardList";
+export { HkCardList as HCardList, HkListRow as HListRow } from "./components/HkCardList";
+export { HkSectionHeader, type SectionHeaderVariant } from "./components/HkSectionHeader";
+export { HkSectionHeader as HSectionHeader } from "./components/HkSectionHeader";
 export { default as HFilterBar } from "./components/HkFilterBar";
 export { HkShareBar as HkShareBar } from "./components/HkShareBar";
 export { HkSecretRevealModal as HkSecretRevealModal } from "./components/HkSecretRevealModal";