@celestia-island/hikari 0.55.94 → 0.55.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.94",
+  "version": "0.55.95",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/components/HkJsonTree.contract.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+/**
+ * Source contract: the JSON tree's spacing rhythm is token-based, not
+ * ad-hoc. The 2026-09-30 normalization replaced the off-scale gaps
+ * (2px toggle margin, 0.35em colon, 0.75em type hint) with design
+ * units and added the toggle's first-line centering formula — this
+ * contract keeps the file from drifting back to magic values, which is
+ * exactly the "crooked collapsed/expanded alignment" regression class
+ * the normalization fixed.
+ */
+const here = dirname(fileURLToPath(import.meta.url));
+const scss = readFileSync(join(here, "HkJsonTree.scss"), "utf-8");
+
+describe("HkJsonTree spacing contract", () => {
+  it("keeps the toggle exactly one spacing unit from the row text", () => {
+    const block = scss.slice(scss.indexOf(".s-jt-toggle {"), scss.indexOf(".s-jt-toggle[data-parent]"));
+    expect(block).toContain("margin-inline-end: var(--space-4");
+  });
+
+  it("centers the toggle box on the first text line by formula", () => {
+    const block = scss.slice(scss.indexOf(".s-jt-toggle {"), scss.indexOf(".s-jt-toggle[data-parent]"));
+    expect(block).toContain("align-self: flex-start");
+    expect(block).toContain("margin-block-start: max(0px, calc((1.55em - var(--jt-toggle, 14px)) / 2))");
+  });
+
+  it("keeps every --jt-toggle fallback at the 14px the formula assumes", () => {
+    // Regex sweep, not a blacklist: ANY fallback other than 14px (today
+    // or added later) would de-center the box by the delta.
+    const fallbacks = [...scss.matchAll(/var\(--jt-toggle,\s*([^)]+)\)/g)].map((m) => m[1].trim());
+    expect(fallbacks.length, "fallback sites were scanned").toBeGreaterThan(2);
+    expect(fallbacks.every((f) => f === "14px"), `fallbacks = ${fallbacks}`).toBe(true);
+  });
+
+  it("pins the depth step to exactly one toggle width", () => {
+    const tsx = readFileSync(join(here, "HkJsonTree.tsx"), "utf-8");
+    expect(tsx).toContain("const JT_INDENT = JT_TOGGLE;");
+  });
+
+  it("keeps the key colon gap on one spacing unit", () => {
+    const block = scss.slice(scss.indexOf(".s-jt-colon {"), scss.indexOf(".s-jv-null"));
+    expect(block).toContain("margin-inline-end: var(--space-4");
+    expect(block).not.toContain("0.35em");
+  });
+
+  it("keeps the type hint gap on two spacing units", () => {
+    const block = scss.slice(scss.indexOf(".s-jt-type {"), scss.indexOf(".s-jt-badge {"));
+    expect(block).toContain("margin-inline-start: var(--space-8");
+    expect(block).not.toContain("0.75em");
+  });
+
+  it("leaves no off-scale magic gaps anywhere in the tree stylesheet", () => {
+    expect(scss).not.toMatch(/margin-inline-end: 0\.\d+em/);
+    expect(scss).not.toMatch(/margin-inline-start: 0\.\d+em/);
+  });
+});

package/src/components/HkJsonTree.scss

@@ -69,14 +69,20 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--jt-toggle, 1rem);
-  height: var(--jt-toggle, 1rem);
+  width: var(--jt-toggle, 14px);
+  height: var(--jt-toggle, 14px);
   flex-shrink: 0;
-  margin-inline-end: var(--space-2, 0.125rem);
+  /* Toggle → text is ONE spacing unit everywhere (leaf, collapsed and
+     expanded parents alike) — the collapsed row and its children read
+     on the same rhythm instead of ad-hoc gaps. */
+  margin-inline-end: var(--space-4, 0.25rem);
   /* The toggle box has no text baseline of its own — pin it to the line
-     top instead of letting it join the row's baseline group with a
-     synthesized border-box baseline. */
+     top and center it on the FIRST text line by formula (line-height
+     1.55 × font-size vs the fixed box), so the chevron/leaf sits on the
+     text's optical center in collapsed and expanded rows alike instead
+     of floating above the baseline group. */
   align-self: flex-start;
+  margin-block-start: max(0px, calc((1.55em - var(--jt-toggle, 14px)) / 2));
 }
 
 .s-jt-toggle[data-parent] {
@@ -117,7 +123,7 @@
 
 .s-jt-colon {
   color: rgb(var(--color-muted));
-  margin-inline-end: 0.35em;
+  margin-inline-end: var(--space-4, 0.25rem);
 }
 
 .s-jv-null {
@@ -152,7 +158,7 @@
   font-size: var(--text-3xs, 0.5rem);
   font-style: italic;
   font-weight: 400;
-  margin-inline-start: 0.75em;
+  margin-inline-start: var(--space-8, 0.5rem);
 }
 
 .s-jt-badge {

package/src/components/HkJsonTree.tsx

@@ -130,14 +130,24 @@ function initialExpandedSet(root: HJsonNode): Set<number> {
 /**
  * HkJsonTree — the interactive expandable JSON tree.
  *
- * This is the exact renderer the chat card flow uses for tool results
- * (extracted verbatim from HkToolBlock, same DOM and `s-jt-*` stylesheet, so
- * the two can never drift). Feed it either pre-parsed `value` or a raw JSON
- * `text`; non-container input renders nothing.
+ * A first-class family component (same tier as the rich-text surfaces):
+ * the chat tool blocks, the chest error landing's raw-details pane and
+ * any host pane render through THIS component — HkToolBlock consumes it
+ * directly, and the `s-jt-*` stylesheet single-sources the visual
+ * language, so the two can never drift. Feed it either pre-parsed
+ * `value` or a raw JSON `text`; non-container input renders nothing.
  *
  * The root keeps the legacy `s-tool-json-tree` class: hosts (including
  * HkToolBlock's deferred scrollbar pass) target it, and the pane chrome
  * (mono font, capped height, hidden native scrollbars) lives there.
+ *
+ * Spacing contract (pinned by HkJsonTree.contract.test.ts): the toggle
+ * box is 14px and sits ONE `--space-4` from the row text — identical for
+ * leaf dots, collapsed previews and expanded parents — and is centered
+ * on the first text line by formula, so collapsed and expanded states
+ * align with the same left rhythm; `key:` gaps are one unit, type hints
+ * two; the depth step is one toggle width (JT_INDENT = JT_TOGGLE,
+ * pinned alongside the stylesheet contract).
  */
 export const HkJsonTree = defineComponent({
   name: "HkJsonTree",