@celestia-island/hikari 0.55.95 → 0.55.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.95",
+  "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

@@ -33,6 +33,10 @@ describe("HkJsonTree spacing contract", () => {
     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", () => {
@@ -40,6 +44,28 @@ describe("HkJsonTree spacing contract", () => {
     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");

package/src/components/HkJsonTree.scss

@@ -178,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

@@ -234,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>
         );
@@ -267,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>