@celestia-island/hikari 0.55.192 → 0.55.193

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.192",
+  "version": "0.55.193",
   "private": false,
   "type": "module",
-  "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",
+  "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",
   "license": "SySL-1.0",
   "repository": {
     "type": "git",

package/src/components/HkBreadcrumb.scss

@@ -83,7 +83,7 @@
   // Padding
   padding: var(--space-4) var(--space-8);
   margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-8));
-  border-radius: vars.$hikari-radius-fui-sm;
+  border-radius: vars.$hikari-radius-fine-sm;
 
   // Display
   display: inline-flex;
@@ -215,7 +215,7 @@
     z-index: var(--hk-z-header);
 
     // Appearance
-    border-radius: vars.$hikari-radius-fui-md;
+    border-radius: vars.$hikari-radius-fine-md;
     border: 1px solid var(--hi-color-border);
     background: var(--hi-surface);
     backdrop-filter: blur(4px);
@@ -320,7 +320,7 @@
   .hk-breadcrumb-item {
     background: var(--hi-card-bg);
     padding: 0.375rem 0.75rem;
-    border-radius: vars.$hikari-radius-fui-sm;
+    border-radius: vars.$hikari-radius-fine-sm;
 
     &:not(:last-child):hover {
       background: var(--hi-primary);

package/src/components/HkIconButton.scss

@@ -3,7 +3,7 @@
 @use "./HkIconButtonVars.scss";
 
 // ------
-// Hikari IconButton Component - FUI Styling
+// Hikari IconButton Component styling
 // Three-layer CSS variable system:
 // - Layer1: Foundation variables (foundation.scss)
 // - Layer2: Component variables (HkIconButtonVars.scss)

package/src/components/HkPasswordSurface.scss

@@ -141,6 +141,13 @@
      matching the blur/select hints' style. */
   font-style: italic;
   color: var(--hi-color-text-secondary, #666666);
+  /* Italic final strokes lean past the glyph advance; the base rule's
+     overflow:hidden shaves them at the padding edge. The cushion is
+     clipping room inside the box (HkAffixPicker's data-unset fix), and
+     symmetric because this box centers its placeholder — one-sided room
+     would read as a small optical shift (same reasoning as the select
+     trigger values). */
+  padding-inline: 0.2em;
 }
 
 @keyframes hk-pwd-breathe {

package/src/components/HkPopupSelect.scss

@@ -104,6 +104,13 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  /* Italic overhang cushion (menu-item label rule): the value truncates
+   * at the padding edge and an italicized value's trailing stroke leans
+   * past the last advance. Symmetric because the trigger centers its
+   * value — one-sided room would read as a 0.1em optical shift. The
+   * token is declared on menu-item rows, and the trigger sits outside
+   * that grammar — hence the fallback. */
+  padding-inline: var(--hk-menu-item-label-cushion, 0.2em);
 }
 
 .hk-popup-select-arrow {

package/src/components/HkSelect.scss

@@ -91,6 +91,13 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  /* Italic overhang cushion (menu-item label rule): the value truncates
+   * at the padding edge and an italicized value's trailing stroke leans
+   * past the last advance. Symmetric because the trigger centers its
+   * value — one-sided room would read as a 0.1em optical shift. The
+   * token is declared on menu-item rows, and the trigger sits outside
+   * that grammar — hence the fallback. */
+  padding-inline: var(--hk-menu-item-label-cushion, 0.2em);
 }
 
 .hk-select-arrow {

package/src/components/HkTerminal.scss

@@ -10,7 +10,7 @@
   padding: 0.35rem 0.45rem;
   background: rgb(var(--color-background, 20 22 26));
   border: 1px solid rgb(var(--color-border, 128 128 128) / 15%);
-  border-radius: vars.$hikari-radius-fui-md;
+  border-radius: vars.$hikari-radius-fine-md;
   box-sizing: border-box;
   overflow: hidden;
 
@@ -22,6 +22,6 @@
 
   /* The viewport scrollbar inherits the shared chrome shape. */
   .xterm-viewport {
-    border-radius: vars.$hikari-radius-fui-sm;
+    border-radius: vars.$hikari-radius-fine-sm;
   }
 }

package/src/components/HkThemeToggle.scss

@@ -248,6 +248,11 @@
 .s-theme-item-row[data-name-suffix="slot"] .s-theme-item-name {
   flex: 0 1 auto;
   white-space: normal;
+  /* The suffix mark is pinned DIRECTLY against the name's trailing edge
+   * (the variant's whole point), and this variant wraps instead of
+   * truncating — the label mixin's italic overhang cushion would open a
+   * dead 0.2em gap ahead of the mark for no clipping room in return. */
+  padding-inline-end: 0;
 }
 
 .s-theme-item-name-suffix {

package/src/components/_hikari-vars.scss

@@ -2,5 +2,5 @@ $hikari-font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
 // Keep in sync with HIKARI_FONT_MONO in packages/vue/src/theme/fontContext.ts.
 $hikari-font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', 'Liberation Mono', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', monospace;
 $hikari-font-size-sm: 0.875rem;
-$hikari-radius-fui-sm: 4px;
-$hikari-radius-fui-md: 6px;
+$hikari-radius-fine-sm: 4px;
+$hikari-radius-fine-md: 6px;

package/src/components/_menu-item.contract.test.ts

@@ -111,4 +111,19 @@ describe("menu-item grammar contract", () => {
       /\.s-user-header \{[^}]*padding: var\(--space-10\) var\(--space-14\) var\(--space-12\)/,
     );
   });
+
+  it("spends the italic overhang cushion in the label mixin only", () => {
+    // Italic final strokes lean past the last glyph's advance and the
+    // label's overflow:hidden clips at the padding edge — an italic row
+    // label (host-styled sentinel rows) loses its trailing stroke
+    // (reported from the field: wowsp's all-clients sentinel row). The
+    // cushion is declared once with the grammar tokens and spent by the
+    // label mixin only — it is clipping room for the truncation box, not
+    // row spacing, so the item/icon mixins must stay cushion-free.
+    expect(grammar).toMatch(/--hk-menu-item-label-cushion: 0\.2em/);
+    expect(grammar).toMatch(
+      /@mixin label[^}]*padding-inline-end: var\(--hk-menu-item-label-cushion\)/,
+    );
+    expect(grammar.match(/var\(--hk-menu-item-label-cushion\)/g)?.length).toBe(1);
+  });
 });

package/src/components/_menu-item.scss

@@ -50,6 +50,10 @@
   --hk-menu-item-icon-box: 16px;
   /* Label optical shift — see header comment. */
   --hk-menu-item-optical: 0.5px;
+  /* Italic overhang cushion — the inline-end clipping room the label
+   * spends (see @mixin label). em-based, so it scales with the sheet's
+   * larger item font without a sheet-token override. */
+  --hk-menu-item-label-cushion: 0.2em;
 }
 
 /* Mobile bottom-sheet geometry. */
@@ -207,6 +211,15 @@
   white-space: nowrap;
   position: relative;
   top: var(--hk-menu-item-optical);
+  /* Italic final strokes lean past the last glyph's advance, and the
+   * overflow:hidden pair above clips at the padding edge — an italic
+   * label (host-styled sentinel rows, emphasized picks) loses its
+   * trailing stroke (reported from the field: wowsp's all-clients
+   * sentinel row). The cushion is clipping room INSIDE the padding box
+   * (HkAffixPicker's `data-unset` fix, generalized to the one row
+   * spec): fitting text never gains an ellipsis, overflowing text
+   * truncates one cushion earlier. */
+  padding-inline-end: var(--hk-menu-item-label-cushion);
 }
 
 /* ── Divider row ──────────────────────────────────────────────────────

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

@@ -235,3 +235,135 @@ describe("stylesheet descender-clipping contract", () => {
     expect(unmatched).toEqual([]);
   });
 });
+
+/**
+ * Horizontal twin: the italic-overhang contract.
+ *
+ * The same `overflow: hidden` that clips descenders vertically also clips
+ * ITALIC ink horizontally: synthetic-oblique strokes lean past the last
+ * glyph's advance, the truncation box ends at the padding edge, and the
+ * trailing stroke is shaved flat (reported from the field: wowsp's italic
+ * all-clients sentinel row lost the right edge of its last glyph). The fix
+ * is an inline-end cushion — clipping room INSIDE the padding box, which
+ * never triggers the ellipsis for fitting text (HkAffixPicker's
+ * `data-unset` rule is the in-tree precedent).
+ *
+ * The scan flags a truncation box (`overflow` clip + `text-overflow:
+ * ellipsis` + `white-space: nowrap`, all three in one block) whose element
+ * resolves to `font-style: italic` somewhere in the same sheet, unless an
+ * inline-end cushion of >= 0.2em also resolves for it. The pinned list
+ * below covers the boxes NO in-tree rule italicizes but hosts do — their
+ * cushion must be unconditional, because host CSS is invisible here.
+ */
+
+/** Italic overhang floor: HkAffixPicker's shipped cushion, in em. */
+const SAFE_ITALIC_CUSHION_EM = 0.2;
+
+function truncates(body: string): boolean {
+  return (
+    clipsOverflow(body) &&
+    declaration(body, "text-overflow") !== null &&
+    /nowrap/i.test(declaration(body, "white-space") ?? "")
+  );
+}
+
+/** The em figure inside a padding value, var() fallback included. */
+function emCushion(value: string | null): number | null {
+  if (value === null) return null;
+  // The grammar label's compiled shape is a bare var() with no literal em
+  // — its 0.2em value is pinned at the source level by
+  // _menu-item.contract.test.ts, so the token counts as the floor it
+  // contracts to.
+  if (/--hk-menu-item-label-cushion/i.test(value)) return SAFE_ITALIC_CUSHION_EM;
+  const match = value.match(/([\d.]+)em/i);
+  return match ? Number(match[1]) : null;
+}
+
+/**
+ * Winning declaration for one element across the sheet, resolving the
+ * cascade exactly like `effectiveRatio` does (same-subject blocks, highest
+ * specificity then latest order).
+ */
+function effectiveDecl(clip: Block, blocks: Block[], property: string): string | null {
+  const element = subject(clip.selector);
+  const candidates = blocks
+    .filter((block) => block.selector === clip.selector || subject(block.selector) === element)
+    .map((block) => ({ block, value: declaration(block.body, property) }))
+    .filter((entry): entry is { block: Block; value: string } => entry.value !== null);
+  if (!candidates.length) return null;
+  candidates.sort(
+    (a, b) => specificity(b.block.selector) - specificity(a.block.selector) || b.block.order - a.block.order,
+  );
+  return candidates[0]!.value;
+}
+
+describe("stylesheet italic-overhang contract", () => {
+  it("never truncates an italic line without the overhang cushion", { timeout: 60_000 }, () => {
+    const findings: string[] = [];
+    for (const file of sheets()) {
+      const name = file.slice(file.indexOf("/src/") + 1);
+      const css = compile(file, { style: "expanded", loadPaths: [componentDir, stylesDir] }).css.replace(
+        /\/\*[\s\S]*?\*\//g,
+        "",
+      );
+      const blocks = [...blocksOf(css, name)];
+      for (const block of blocks) {
+        if (!truncates(block.body)) continue;
+        if (!/^italic$/i.test(effectiveDecl(block, blocks, "font-style") ?? "")) continue;
+        // Either longhand satisfies the contract — centered boxes ship the
+        // symmetric `padding-inline` shorthand instead.
+        const cushion =
+          emCushion(effectiveDecl(block, blocks, "padding-inline-end")) ??
+          emCushion(effectiveDecl(block, blocks, "padding-inline"));
+        if (cushion !== null && cushion >= SAFE_ITALIC_CUSHION_EM) continue;
+        findings.push(
+          `${block.file} — ${block.selector} — truncates a line that resolves to italic without a >= ${SAFE_ITALIC_CUSHION_EM}em inline-end cushion: the trailing stroke is shaved`,
+        );
+      }
+    }
+    expect(findings.sort(), "italic truncation boxes missing the overhang cushion").toEqual([]);
+  });
+
+  it("keeps the host-italic-exposed truncation boxes cushioned", { timeout: 60_000 }, () => {
+    // Host CSS italicizes trigger values from OUTSIDE any hikari block,
+    // so no in-tree italic backs these — the scan above cannot see the
+    // risk and the cushion must be pinned unconditionally instead.
+    const pinned: ReadonlyArray<{ file: string; selector: string; property: string }> = [
+      { file: "HkSelect.scss", selector: ".hk-select-value", property: "padding-inline" },
+      { file: "HkPopupSelect.scss", selector: ".hk-popup-select-value", property: "padding-inline" },
+      // The original precedent this contract generalizes: its italic lives
+      // on the [data-unset] subject while the truncation trio sits on the
+      // base rule — a shape the scan's subject pairing cannot see, so the
+      // shipped cushion is pinned instead.
+      { file: "HkAffixPicker.scss", selector: ".hk-affix-tag-text[data-unset]", property: "padding-inline-end" },
+    ];
+    const compiled = new Map<string, ReturnType<typeof compile>["css"]>();
+    const found: string[] = [];
+    for (const pin of pinned) {
+      const file = resolve(componentDir, pin.file);
+      if (!compiled.has(file)) {
+        compiled.set(
+          file,
+          compile(file, { style: "expanded", loadPaths: [componentDir, stylesDir] }).css.replace(
+            /\/\*[\s\S]*?\*\//g,
+            "",
+          ),
+        );
+      }
+      const block = [...blocksOf(compiled.get(file)!, pin.file)].find(
+        (entry) => entry.selector === pin.selector,
+      );
+      if (!block) {
+        found.push(`${pin.file} — ${pin.selector} — the pinned rule no longer exists`);
+        continue;
+      }
+      const cushion = emCushion(declaration(block.body, pin.property));
+      if (cushion === null || cushion < SAFE_ITALIC_CUSHION_EM) {
+        found.push(
+          `${pin.file} — ${pin.selector} — lost its ${SAFE_ITALIC_CUSHION_EM}em italic overhang cushion`,
+        );
+      }
+    }
+    expect(found.sort(), "pinned italic-cushioned truncation boxes regressed").toEqual([]);
+  });
+});