@celestia-island/hikari 0.55.258 → 0.55.260

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.258",
+  "version": "0.55.260",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkDateTag.scss

@@ -1,33 +1,43 @@
 // AI-generated: developed with the DeepSeek Harness agent (model DeepSeek V4.1 Flash); human-directed.
 
-/* HkDateTag — the locale-aware stacked date capsule (see the component
- * docblock for the contract). Rows are calendar segments; the year and
- * the optional time row read as context (muted, a touch smaller), the
- * month/day figures carry the full text color. */
+/* HkDateTag — the locale-aware one-line date pill (see the component
+ * docblock for the contract). Segments are the calendar figures laid
+ * out on ONE horizontal line in the active locale's order; the year
+ * and the optional time segment read as context (muted ink). */
 
 .hk-date-tag {
   display: inline-flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
+  align-items: baseline;
   padding: var(--space-2, 2px) var(--space-10, 0.625rem);
   border-radius: var(--radius-full, 999px);
   background: rgb(var(--color-text) / 6%);
   white-space: nowrap;
+  /* One size for the whole pill: segments AND separators inherit it,
+   * so a large ambient host font cannot inflate the separators. */
+  font-size: var(--text-2xs, 0.625rem);
+  line-height: 1.4;
 }
 
-.hk-date-tag__row {
-  display: block;
-  text-align: center;
-  line-height: 1.25;
-  font-size: var(--text-2xs, 0.625rem);
+.hk-date-tag__seg {
   font-variant-numeric: tabular-nums;
   color: rgb(var(--color-text));
 }
 
-/* Context rows: the year (wherever the locale puts it) and the optional
- * time row — muted and a touch smaller than the month/day figures. */
-.hk-date-tag__row--year,
-.hk-date-tag__row--time {
+/* Context segments: the year (wherever the locale puts it) and the
+ * optional time segment — muted, same size so the one-line baseline
+ * stays even. */
+.hk-date-tag__seg--year,
+.hk-date-tag__seg--time {
+  color: rgb(var(--color-text) / 55%);
+}
+
+/* The locale's own separator literals (and the blank one ahead of the
+ * time segment) — muted like the context ink. `pre` keeps that blank
+ * separator's single space alive: a space-only flex item would
+ * otherwise trim it at line end under the pill's nowrap and glue the
+ * time segment to the date. */
+.hk-date-tag__sep {
   color: rgb(var(--color-text) / 55%);
-  font-size: calc(var(--text-2xs, 0.625rem) - 1px);
+  white-space: pre;
 }

package/src/components/HkDateTag.test.tsx

@@ -6,17 +6,18 @@ import HkDateTagDefault, { HkDateTag } from "./HkDateTag";
 import { setLocale } from "../i18n/context";
 
 /**
- * HkDateTag — the locale-aware date capsule. These cases pin the
- * COMPONENT contract: the row order follows the ACTIVE hikari locale
- * (year on top for zh-Hans, year LAST for en), the order re-derives
- * live when the host flips the locale, `time` appends the muted
- * fourth row, and unparseable input renders the empty capsule shell.
+ * HkDateTag — the locale-aware one-line date pill. These cases pin the
+ * COMPONENT contract: the segment order follows the ACTIVE hikari
+ * locale (year first for zh-Hans, year LAST for en) with that locale's
+ * own separators, the order re-derives live when the host flips the
+ * locale, `time` appends the muted trailing segment, and unparseable
+ * input renders the empty pill shell.
  */
 
 const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
 
 // Built in LOCAL time so the calendar fields (2024-10-06 14:30) survive
-// every CI time zone; the capsule renders local calendar segments.
+// every CI time zone; the pill renders local calendar segments.
 const SHIP_DATE = new Date(2024, 9, 6, 14, 30);
 
 function mountTag(props: { value: string | number | Date; time?: boolean }): HTMLElement {
@@ -28,16 +29,20 @@ function mountTag(props: { value: string | number | Date; time?: boolean }): HTM
   return container;
 }
 
-function rowsOf(container: HTMLElement): HTMLElement[] {
-  return [...container.querySelectorAll<HTMLElement>(".hk-date-tag__row")];
+function segsOf(container: HTMLElement): HTMLElement[] {
+  return [...container.querySelectorAll<HTMLElement>(".hk-date-tag__seg")];
 }
 
-function capsuleOf(container: HTMLElement): HTMLElement {
+function pillOf(container: HTMLElement): HTMLElement {
   const el = container.querySelector<HTMLElement>(".hk-date-tag");
-  expect(el, "capsule renders").toBeTruthy();
+  expect(el, "pill renders").toBeTruthy();
   return el!;
 }
 
+function textOf(container: HTMLElement): string {
+  return pillOf(container).textContent ?? "";
+}
+
 // setLocale mutates the module-global i18n state — restore the default
 // after every case (the HkSolarLocationSetting suite's idiom).
 afterEach(async () => {
@@ -49,81 +54,91 @@ afterEach(async () => {
 });
 
 describe("HkDateTag locale ordering", () => {
-  it("renders year/month/day rows top to bottom for zh-Hans", async () => {
+  it("lays year/month/day segments out on one line for zh-Hans", async () => {
     await setLocale("zh-Hans");
     const container = mountTag({ value: SHIP_DATE });
 
-    const capsule = capsuleOf(container);
-    expect(capsule.classList.contains("hk-date-tag")).toBe(true);
-    const rows = rowsOf(container);
-    expect(rows.map((r) => r.textContent)).toEqual(["2024", "10", "06"]);
-    // The year row carries its modifier wherever it lands.
-    expect(rows[0].classList.contains("hk-date-tag__row--year")).toBe(true);
-    expect(rows[1].classList.contains("hk-date-tag__row--year")).toBe(false);
+    const pill = pillOf(container);
+    expect(pill.classList.contains("hk-date-tag")).toBe(true);
+    // One horizontal run of segments, in the locale's order, joined by
+    // the locale's own separators.
+    const segs = segsOf(container);
+    expect(segs.map((s) => s.textContent)).toEqual(["2024", "10", "06"]);
+    expect(textOf(container)).toBe("2024/10/06");
+    // The year segment carries its modifier wherever it lands.
+    expect(segs[0].classList.contains("hk-date-tag__seg--year")).toBe(true);
+    expect(segs[1].classList.contains("hk-date-tag__seg--year")).toBe(false);
   });
 
   it("orders month/day/year for en — the year goes LAST", async () => {
     await setLocale("en");
     const container = mountTag({ value: SHIP_DATE });
 
-    const rows = rowsOf(container);
-    expect(rows.map((r) => r.textContent)).toEqual(["10", "06", "2024"]);
-    expect(rows[2].classList.contains("hk-date-tag__row--year")).toBe(true);
+    const segs = segsOf(container);
+    expect(segs.map((s) => s.textContent)).toEqual(["10", "06", "2024"]);
+    expect(textOf(container)).toBe("10/06/2024");
+    expect(segs[2].classList.contains("hk-date-tag__seg--year")).toBe(true);
   });
 
-  it("re-orders the rows live when the locale flips under a mounted capsule", async () => {
+  it("re-orders the line live when the locale flips under a mounted pill", async () => {
     await setLocale("zh-Hans");
     const container = mountTag({ value: SHIP_DATE });
-    expect(rowsOf(container).map((r) => r.textContent)).toEqual(["2024", "10", "06"]);
+    expect(segsOf(container).map((s) => s.textContent)).toEqual(["2024", "10", "06"]);
 
     await setLocale("en");
     await nextTick();
-    expect(rowsOf(container).map((r) => r.textContent)).toEqual(["10", "06", "2024"]);
+    expect(segsOf(container).map((s) => s.textContent)).toEqual(["10", "06", "2024"]);
 
     await setLocale("zh-Hans");
     await nextTick();
-    expect(rowsOf(container).map((r) => r.textContent)).toEqual(["2024", "10", "06"]);
+    expect(segsOf(container).map((s) => s.textContent)).toEqual(["2024", "10", "06"]);
   });
 });
 
-describe("HkDateTag time row", () => {
-  it("appends the muted time row only when asked", async () => {
+describe("HkDateTag time segment", () => {
+  it("appends the muted time segment only when asked", async () => {
     await setLocale("zh-Hans");
-    const withTime = rowsOf(mountTag({ value: SHIP_DATE, time: true }));
+    const withTimeContainer = mountTag({ value: SHIP_DATE, time: true });
+    const withTime = segsOf(withTimeContainer);
     expect(withTime).toHaveLength(4);
-    expect(withTime[3].classList.contains("hk-date-tag__row--time")).toBe(true);
+    expect(withTime[3].classList.contains("hk-date-tag__seg--time")).toBe(true);
     expect(withTime[3].textContent).toBe("14:30");
+    // The blank separator between the date and the time reads as one
+    // space in the pill's text.
+    expect(textOf(withTimeContainer)).toBe("2024/10/06 14:30");
 
-    const withoutTime = rowsOf(mountTag({ value: SHIP_DATE }));
+    const withoutTimeContainer = mountTag({ value: SHIP_DATE });
+    const withoutTime = segsOf(withoutTimeContainer);
     expect(withoutTime).toHaveLength(3);
-    expect(withoutTime.some((r) => r.classList.contains("hk-date-tag__row--time"))).toBe(false);
+    expect(withoutTime.some((s) => s.classList.contains("hk-date-tag__seg--time"))).toBe(false);
   });
 
-  it("formats the time row for the active locale", async () => {
+  it("formats the time segment for the active locale", async () => {
     await setLocale("en");
-    const rows = rowsOf(mountTag({ value: SHIP_DATE, time: true }));
-    expect(rows).toHaveLength(4);
-    expect(rows[3].textContent).toBe("02:30 PM");
+    const container = mountTag({ value: SHIP_DATE, time: true });
+    const segs = segsOf(container);
+    expect(segs).toHaveLength(4);
+    expect(segs[3].textContent).toBe("02:30 PM");
+    expect(textOf(container)).toBe("10/06/2024 02:30 PM");
   });
 });
 
 describe("HkDateTag value normalization", () => {
   it("accepts epoch milliseconds and date strings like the Date form", async () => {
     await setLocale("en");
-    const expected = ["10", "06", "2024"];
-    expect(rowsOf(mountTag({ value: SHIP_DATE })).map((r) => r.textContent)).toEqual(expected);
+    expect(textOf(mountTag({ value: SHIP_DATE }))).toBe("10/06/2024");
     // A number is epoch MILLISECONDS.
-    expect(rowsOf(mountTag({ value: SHIP_DATE.getTime() })).map((r) => r.textContent)).toEqual(expected);
-    expect(rowsOf(mountTag({ value: "2024-10-06T14:30:00" })).map((r) => r.textContent)).toEqual(expected);
+    expect(textOf(mountTag({ value: SHIP_DATE.getTime() }))).toBe("10/06/2024");
+    expect(textOf(mountTag({ value: "2024-10-06T14:30:00" }))).toBe("10/06/2024");
   });
 
-  it("renders the empty capsule shell for unparseable input", async () => {
+  it("renders the empty pill shell for unparseable input", async () => {
     await setLocale("zh-Hans");
     const container = mountTag({ value: "not-a-date" });
 
-    const capsule = capsuleOf(container);
-    expect(capsule.children).toHaveLength(0);
-    expect(rowsOf(container)).toHaveLength(0);
+    const pill = pillOf(container);
+    expect(pill.children).toHaveLength(0);
+    expect(segsOf(container)).toHaveLength(0);
   });
 });
 

package/src/components/HkDateTag.tsx

@@ -5,43 +5,44 @@ import { activeLocale } from "../i18n/context";
 import "./HkDateTag.scss";
 
 /**
- * HkDateTag — a locale-aware date capsule: a small pill whose calendar
- * segments are stacked vertically, ONE PER ROW, each centered, ordered
- * the way the ACTIVE hikari locale orders dates (zh: year → month → day
- * top to bottom; en: month → day → year, the year LAST; de: day first …).
- * With the `time` flag a fourth, muted row carries the locale time
- * (hour + minute, 2-digit each).
+ * HkDateTag — a locale-aware date pill: ONE horizontal line whose
+ * calendar segments read in the order the ACTIVE hikari locale writes
+ * dates (zh: 2024/10/06 — year first; en: 10/06/2024 — the year LAST;
+ * de: 06.10.2024 — day first), joined by that locale's own literal
+ * separators. With the `time` flag a fourth, muted segment carries the
+ * locale time (hour + minute, 2-digit) after a blank separator.
  *
  * Generic business part (peer of HkTemplateText / HkMarkdownRenderer,
- * NOT of the HkInput family): hosts render compact per-row dates in data
- * tables and cards — wowsp's water-meter ship tables are the first
- * consumer.
+ * NOT of the HkInput family): hosts render compact per-row dates in
+ * data tables and cards — wowsp's water-meter ship tables are the
+ * first consumer.
  *
  * Contract:
  *  - `value` accepts a Date, an epoch-MILLISECONDS number or a
  *    date-ish string, normalized with `new Date(value)` (so a number is
  *    NEVER seconds — pass what `Date.now()` returns). Unparseable input
- *    renders NOTHING but the empty capsule shell; the caller owns the
+ *    renders NOTHING but the empty pill shell; the caller owns the
  *    empty state.
- *  - The row order is derived from the locale itself, never a hardcoded
- *    locale→order map: `Intl.DateTimeFormat(activeLocale(), { year,
- *    month, day }).formatToParts(date)` supplies the year/month/day
- *    segments in the order that locale writes them. The component is a
- *    computed over the reactive i18n state, so a host `setLocale`
- *    re-orders the rows live.
- *  - `time` (default false) appends the muted time row
- *    (`hk-date-tag__row--time`) under the date rows.
+ *  - The segment order AND the separators come from the locale itself,
+ *    never a hardcoded locale→layout map:
+ *    `Intl.DateTimeFormat(activeLocale(), { year, month, day })
+ *    .formatToParts(date)` supplies the year/month/day segments and
+ *    the literal separators in the order that locale writes them. The
+ *    component is a computed over the reactive i18n state, so a host
+ *    `setLocale` re-orders the line live.
+ *  - `time` (default false) appends the muted time segment
+ *    (`hk-date-tag__seg--time`) after a blank separator.
  */
 export const HkDateTag = defineComponent({
   name: "HkDateTag",
   props: {
     /** The date to render — Date, epoch milliseconds or a parseable
-     * string. Invalid input renders the empty capsule. */
+     * string. Invalid input renders the empty pill. */
     value: {
       type: [String, Number, Date] as PropType<string | number | Date>,
       required: true,
     },
-    /** Append the muted locale time row (hour + minute, 2-digit). */
+    /** Append the muted locale time segment (hour + minute, 2-digit). */
     time: { type: Boolean, default: false },
   },
   setup(props) {
@@ -52,25 +53,24 @@ export const HkDateTag = defineComponent({
 
     // The locale is read through the reactive i18n state (activeLocale
     // reads it on every evaluation), so this computed re-runs — and the
-    // rows re-order — whenever the host calls setLocale. One formatter
+    // line re-orders — whenever the host calls setLocale. One formatter
     // per shape per locale, rebuilt only on a locale/value change (the
     // HkCalendarHeatmap idiom).
     const locale = computed(() => activeLocale());
 
-    /** The year/month/day segments in the locale's own order. */
-    const rows = computed<Intl.DateTimeFormatPart[]>(() => {
+    /** Every format part — the year/month/day segments interleaved
+     * with the locale's own literal separators. */
+    const parts = computed<Intl.DateTimeFormatPart[]>(() => {
       const d = date.value;
       if (d === null) return [];
       return new Intl.DateTimeFormat(locale.value, {
         year: "numeric",
         month: "2-digit",
         day: "2-digit",
-      })
-        .formatToParts(d)
-        .filter((part) => part.type === "year" || part.type === "month" || part.type === "day");
+      }).formatToParts(d);
     });
 
-    /** The locale time (hour + minute, 2-digit) when the capsule opts
+    /** The locale time (hour + minute, 2-digit) when the pill opts
      * in — null without `time` or for an invalid date. */
     const timeText = computed<string | null>(() => {
       const d = date.value;
@@ -80,16 +80,31 @@ export const HkDateTag = defineComponent({
 
     return () => (
       <span class="hk-date-tag">
-        {rows.value.map((part) => (
-          <span
-            key={part.type}
-            class={part.type === "year" ? "hk-date-tag__row hk-date-tag__row--year" : "hk-date-tag__row"}
-          >
-            {part.value}
+        {parts.value.map((part, index) =>
+          part.type === "literal" ? (
+            part.value ? (
+              <span key={`sep-${index}`} class="hk-date-tag__sep">
+                {part.value}
+              </span>
+            ) : null
+          ) : (
+            <span
+              key={part.type}
+              class={part.type === "year" ? "hk-date-tag__seg hk-date-tag__seg--year" : "hk-date-tag__seg"}
+            >
+              {part.value}
+            </span>
+          ),
+        )}
+        {timeText.value !== null && (
+          <span key="time-sep" class="hk-date-tag__sep">
+            {" "}
           </span>
-        ))}
+        )}
         {timeText.value !== null && (
-          <span key="time" class="hk-date-tag__row hk-date-tag__row--time">{timeText.value}</span>
+          <span key="time" class="hk-date-tag__seg hk-date-tag__seg--time">
+            {timeText.value}
+          </span>
         )}
       </span>
     );

package/src/components/HkTimeline.bondcell.contract.test.ts

@@ -1,10 +1,10 @@
 /**
  * Source contract for the bond CELLS of the horizontal stepper (2026-10-31
- * user rule; 60 % share since the same evening's second look).
+ * user rule; share trimmed 80→60→50 % over the same day's three looks).
  *
  * The row is read as one cell per step plus one cell per bond: the steps
  * keep their content width, the leftover splits into EQUAL bond cells, and
- * each bond paints 60 % of its own cell CENTERED, so both ends keep a 20 %
+ * each bond paints 50 % of its own cell CENTERED, so both ends keep a 25 %
  * air gap. Before that rule the bond filled whatever the step had left after
  * its label, minus two fixed 4px margins — measured on a real engine at the
  * provider wizard's 590px row that put the bond 12px off its own label but
@@ -95,7 +95,7 @@ describe("horizontal bond cell contract", () => {
     // while the bond→node air is margin alone — the 12/4 asymmetry that
     // made the bond look glued to the next circle.
     expect(cell).toContain(`margin-inline: calc(-1 * ${GAP}) 0;`);
-    // The box must not paint itself: the visible 60 % is the ::before.
+    // The box must not paint itself: the visible 50 % is the ::before.
     expect(cell).toContain("background: none;");
     // The ::before resolves percentage insets against this box.
     expect(cell).toContain("position: relative;");
@@ -106,7 +106,7 @@ describe("horizontal bond cell contract", () => {
     expect(blockFor(".hk-timeline-step")).toContain(`gap: ${GAP};`);
   });
 
-  it("paints 60 % of the cell centred with a 20 % inset on each end", () => {
+  it("paints 50 % of the cell centred with a 25 % inset on each end", () => {
     // The parser above only yields top-level rules; the paint lives in the
     // nested block, so lift it out of the cell rule's body.
     const paint = /&::before\s*\{([^}]*)\}/.exec(blockFor(BOND_CELL))?.[1] ?? "";
@@ -114,7 +114,7 @@ describe("horizontal bond cell contract", () => {
     expect(paint).toContain('content: "";');
     expect(paint).toContain("position: absolute;");
     expect(paint).toContain("inset-block: 0;");
-    expect(paint).toContain("inset-inline: 20%;");
+    expect(paint).toContain("inset-inline: 25%;");
     expect(paint).toContain("background: var(--_bond-color);");
     // Percentage PADDING would resolve against the step, not the bond —
     // ban the MECHANISM on both boxes, not one pinned value (a stray
@@ -189,6 +189,18 @@ describe("horizontal bond cell contract", () => {
     expect(unscoped, "no unscoped connector background reset").toHaveLength(0);
   });
 
+  it("keeps the indicator numbers unselectable through the family policy", () => {
+    // Measured on a real engine: the indicator computes user-select: none
+    // via styles/selection.scss's html-level deny (chrome text is not
+    // content). The timeline must not opt back in, and must not mark its
+    // chrome with the .hk-selectable whitelist class.
+    expect(src).not.toMatch(/user-select:\s*text/);
+    expect(src).not.toContain("@include user-select");
+    const tsx = readFileSync(join(here, "HkTimeline.tsx"), "utf-8");
+    expect(tsx).not.toContain("hk-selectable");
+    expect(tsx).not.toContain("user-select");
+  });
+
   it("rides the status crossfade on the painted box, not just the frame", () => {
     // The paint moved to the ::before, so the crossfade must cover THAT
     // selector. Asserting the bare selector name proves nothing (the

package/src/components/HkTimeline.scss

@@ -312,12 +312,12 @@
   }
 }
 
-/* ── Bond cells (2026-10-31 user rule; 60 % share the same evening) ────
+/* ── Bond cells (2026-10-31 user rule; trimmed 80→60→50 % the same day) ─
    The horizontal row reads as one cell per step plus one cell per bond: the
    steps keep their content width, the leftover splits into EQUAL bond cells,
-   and each bond paints 60 % of its cell CENTERED, so both ends keep a 20 %
-   air gap. (The first cut painted 80 %/10 % — centred, but the completed
-   bond read as long as ever, so the share was trimmed the same evening.)
+   and each bond paints 50 % of its cell CENTERED, so both ends keep a 25 %
+   air gap. (80 %/10 % read as long as ever; 60 %/20 % still did; 50 %/25 %
+   is where the user asked it to land.)
    Three mechanics make that exact:
 
    1. The bond's box must span the WHOLE cell. Its cell begins where its own
@@ -329,8 +329,8 @@
       off the next node: the completed bond read as glued to the next circle.
    2. The painted share cannot be `padding-inline` — a percentage padding
       resolves against the CONTAINING block (the step), not the bond's own
-      box, which would inset it by a slice of the step instead of 20 % of the
-      cell. So the colour lives on a ::before pinned `inset-inline: 20%`,
+      box, which would inset it by a slice of the step instead of 25 % of the
+      cell. So the colour lives on a ::before pinned `inset-inline: 25%`,
       which does resolve against the bond. The status rules below therefore
       publish `--_bond-color`; the vertical rail keeps painting its own box
       (it is a rail hanging under the node, not a cell-wide bond).
@@ -368,7 +368,7 @@
     content: "";
     position: absolute;
     inset-block: 0;
-    inset-inline: 20%;
+    inset-inline: 25%;
     background: var(--_bond-color);
   }
 }
@@ -437,7 +437,7 @@
   }
 
   [data-el="connector"] {
-    // The bonds paint 60 % of their cell through a ::before (see the
+    // The bonds paint 50 % of their cell through a ::before (see the
     // full-mode cell rule); the token is the single source for both that
     // paint and the vertical rail's own box.
     --_bond-color: var(--hi-color-primary);
@@ -527,7 +527,7 @@
 
 // Status crossfade: the data-status driven colors (indicator fill/border,
 // label color, connector fill) transition instead of flipping. The
-// horizontal bond's paint lives on its ::before (the 60 % cell rule), so
+// horizontal bond's paint lives on its ::before (the 50 % cell rule), so
 // that box rides the crossfade too — without it a status flip snaps there
 // while the vertical rail keeps easing.
 .hk-timeline-step [data-el="indicator"],