@celestia-island/hikari 0.55.94 → 0.55.96

package/package.json

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

package/src/components/HkAffixPicker.scss

@@ -13,9 +13,11 @@
   gap: 0.3rem;
   max-width: 11rem;
   /* Logical axes: the wide side reserves caret room at inline-end and
-   * flips together with the host input's RTL suffix/prefix side. */
-  padding-block: 2px;
-  padding-inline: 4px 6px;
+   * flips together with the host input's RTL suffix/prefix side.
+   * Roomy padding: the pill's fill must not hug the label — the text
+   * keeps clear air on both sides (user direction, round N). */
+  padding-block: 4px;
+  padding-inline: 9px 11px;
   border: none;
   border-radius: var(--radius-sm, 6px);
   background: transparent;

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

@@ -0,0 +1,85 @@
+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);
+    // The canonical definition itself: the TSX drives depth steps and
+    // guide lines from JT_TOGGLE = 14 — a different definition desyncs
+    // CSS geometry from the TS geometry with zero other red.
+    expect(scss).toContain("--jt-toggle: 14px;");
+  });
+
+  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("reads collapsed summaries one tab in, at full row size", () => {
+    const tsx = readFileSync(join(here, "HkJsonTree.tsx"), "utf-8");
+    // Both collapsed shapes (object preview and long string) carry the
+    // one-tab slot before the summary — the collapsed text sits in the
+    // child column instead of hugging the chevron.
+    expect(tsx.match(/<span class="s-jt-indent" \/>/g)?.length).toBe(2);
+    const preview = scss.slice(scss.indexOf(".s-jt-preview {"));
+    // A smaller preview font would shrink a keyless row's line box below
+    // the toggle centering assumption and float the row high.
+    expect(preview).toContain("font-size: inherit");
+    expect(preview).not.toContain("0.5rem");
+  });
+
+  it("keeps the collapsed summary indent slot exactly one tab wide", () => {
+    const indent = scss.slice(scss.indexOf(".s-jt-indent {"), scss.indexOf(".s-jt-preview {"));
+    // Deleting the whole rule (not just tweaking it) must also go red —
+    // this slot IS the second-round "collapsed text hugs the chevron" fix.
+    expect(indent, ".s-jt-indent rule present").not.toBe("");
+    expect(indent).toContain("width: var(--jt-toggle, 14px)");
+    expect(indent).toContain("flex-shrink: 0");
+  });
+
+  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 {
@@ -172,9 +178,22 @@
   font-weight: 400;
 }
 
+.s-jt-indent {
+  /* The collapsed summary reads one tab in — the same column the
+     children occupy when the node is expanded — instead of hugging the
+     chevron. Kept as a flex slot (not padding) so it can never shrink. */
+  flex-shrink: 0;
+  width: var(--jt-toggle, 14px);
+}
+
 .s-jt-preview {
   color: rgb(var(--color-muted));
-  font-size: var(--text-3xs, 0.5rem);
+  /* Full row size: a keyless collapsed root's ONLY text is the preview,
+     and a smaller font here would shrink the line box below the toggle's
+     centering assumption and float the whole row high (the 2026-09-30
+     second-round screenshot report). Quietness comes from the muted
+     color, not a smaller size. */
+  font-size: inherit;
   font-weight: 400;
   opacity: 0.7;
 }

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",
@@ -224,6 +234,7 @@ export const HkJsonTree = defineComponent({
             </span>
             {node.key !== null && <span class="s-jt-key">{node.key}</span>}
             {node.key !== null && <span class="s-jt-colon">: </span>}
+            <span class="s-jt-indent" />
             <span class="s-jt-preview">{node.preview}</span>
           </div>
         );
@@ -257,6 +268,7 @@ export const HkJsonTree = defineComponent({
             </span>
             {node.key !== null && <span class="s-jt-key">{node.key}</span>}
             {node.key !== null && <span class="s-jt-colon">: </span>}
+            <span class="s-jt-indent" />
             <span class="s-jv-str">"{truncateStr(node.stringValue, STR_PREVIEW_LEN)}"</span>
             <span class="s-jt-type">string ({node.stringValue.length})</span>
           </div>