@celestia-island/hikari 0.55.258 → 0.55.259

package/package.json

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