@celestia-island/hikari 0.55.245 → 0.55.247

package/package.json

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

@@ -0,0 +1,33 @@
+// 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. */
+
+.hk-date-tag {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  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;
+}
+
+.hk-date-tag__row {
+  display: block;
+  text-align: center;
+  line-height: 1.25;
+  font-size: var(--text-2xs, 0.625rem);
+  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 {
+  color: rgb(var(--color-text) / 55%);
+  font-size: calc(var(--text-2xs, 0.625rem) - 1px);
+}

package/src/components/HkDateTag.test.tsx

@@ -0,0 +1,135 @@
+// AI-generated: developed with the DeepSeek Harness agent (model DeepSeek V4.1 Flash); human-directed.
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h, nextTick } from "vue";
+
+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.
+ */
+
+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.
+const SHIP_DATE = new Date(2024, 9, 6, 14, 30);
+
+function mountTag(props: { value: string | number | Date; time?: boolean }): HTMLElement {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => h(HkDateTag, props) });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+function rowsOf(container: HTMLElement): HTMLElement[] {
+  return [...container.querySelectorAll<HTMLElement>(".hk-date-tag__row")];
+}
+
+function capsuleOf(container: HTMLElement): HTMLElement {
+  const el = container.querySelector<HTMLElement>(".hk-date-tag");
+  expect(el, "capsule renders").toBeTruthy();
+  return el!;
+}
+
+// setLocale mutates the module-global i18n state — restore the default
+// after every case (the HkSolarLocationSetting suite's idiom).
+afterEach(async () => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+  await setLocale("en");
+});
+
+describe("HkDateTag locale ordering", () => {
+  it("renders year/month/day rows top to bottom 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);
+  });
+
+  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);
+  });
+
+  it("re-orders the rows live when the locale flips under a mounted capsule", async () => {
+    await setLocale("zh-Hans");
+    const container = mountTag({ value: SHIP_DATE });
+    expect(rowsOf(container).map((r) => r.textContent)).toEqual(["2024", "10", "06"]);
+
+    await setLocale("en");
+    await nextTick();
+    expect(rowsOf(container).map((r) => r.textContent)).toEqual(["10", "06", "2024"]);
+
+    await setLocale("zh-Hans");
+    await nextTick();
+    expect(rowsOf(container).map((r) => r.textContent)).toEqual(["2024", "10", "06"]);
+  });
+});
+
+describe("HkDateTag time row", () => {
+  it("appends the muted time row only when asked", async () => {
+    await setLocale("zh-Hans");
+    const withTime = rowsOf(mountTag({ value: SHIP_DATE, time: true }));
+    expect(withTime).toHaveLength(4);
+    expect(withTime[3].classList.contains("hk-date-tag__row--time")).toBe(true);
+    expect(withTime[3].textContent).toBe("14:30");
+
+    const withoutTime = rowsOf(mountTag({ value: SHIP_DATE }));
+    expect(withoutTime).toHaveLength(3);
+    expect(withoutTime.some((r) => r.classList.contains("hk-date-tag__row--time"))).toBe(false);
+  });
+
+  it("formats the time row 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");
+  });
+});
+
+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);
+    // 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);
+  });
+
+  it("renders the empty capsule 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);
+  });
+});
+
+describe("HkDateTag module surface", () => {
+  it("exports the same component as the default and named binding", () => {
+    expect(HkDateTagDefault).toBe(HkDateTag);
+    expect((HkDateTag as unknown as { name: string }).name).toBe("HkDateTag");
+  });
+});

package/src/components/HkDateTag.tsx

@@ -0,0 +1,99 @@
+// AI-generated: developed with the DeepSeek Harness agent (model DeepSeek V4.1 Flash); human-directed.
+import { computed, defineComponent, type PropType } from "vue";
+
+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).
+ *
+ * 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.
+ *
+ * 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
+ *    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.
+ */
+export const HkDateTag = defineComponent({
+  name: "HkDateTag",
+  props: {
+    /** The date to render — Date, epoch milliseconds or a parseable
+     * string. Invalid input renders the empty capsule. */
+    value: {
+      type: [String, Number, Date] as PropType<string | number | Date>,
+      required: true,
+    },
+    /** Append the muted locale time row (hour + minute, 2-digit). */
+    time: { type: Boolean, default: false },
+  },
+  setup(props) {
+    const date = computed<Date | null>(() => {
+      const d = new Date(props.value);
+      return Number.isNaN(d.getTime()) ? null : d;
+    });
+
+    // 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
+    // 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[]>(() => {
+      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");
+    });
+
+    /** The locale time (hour + minute, 2-digit) when the capsule opts
+     * in — null without `time` or for an invalid date. */
+    const timeText = computed<string | null>(() => {
+      const d = date.value;
+      if (!props.time || d === null) return null;
+      return new Intl.DateTimeFormat(locale.value, { hour: "2-digit", minute: "2-digit" }).format(d);
+    });
+
+    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}
+          </span>
+        ))}
+        {timeText.value !== null && (
+          <span key="time" class="hk-date-tag__row hk-date-tag__row--time">{timeText.value}</span>
+        )}
+      </span>
+    );
+  },
+});
+
+export default HkDateTag;

package/src/components/HkMenu.scss

@@ -23,6 +23,25 @@
   display: block;
 }
 
+/* The FOOT band is an action band, not a run of selectable rows — the
+ * "add workspace" button under the picker's options, a context menu's
+ * custom tail. It reads as its own band only when it is SEPARATED at the
+ * divider's DESKTOP grade (6px; the divider itself widens to 10px inside
+ * sheets, but this band's separation is a layout rhythm BETWEEN bands,
+ * not row geometry, so it stays 6px in both token sets), never at the
+ * 2px row gap: consumers used to hand that separation themselves as
+ * wrapper padding, which is exactly the drift that padded the wrapper's
+ * rows to a WIDER highlight than the selection rows above (2026-10-31
+ * field report: the workspace picker's 「添加工作区」 ran ~12px wider
+ * than the 「个人空间」 row). The band owns the separation now —
+ * consumers must NOT pad the wrapper (see _menu-item.scss, the band
+ * width invariant). Head/extra stay bare DOM hooks: identity blocks own
+ * their rhythm (the .s-user-header pins), and the theme menu's extra
+ * slot rides the plain row rhythm. */
+.hk-menu-slot--foot {
+  margin-block-start: var(--hk-menu-foot-gap, var(--space-6, 6px));
+}
+
 .hk-menu-flag {
   flex-shrink: 0;
   font-size: var(--text-base);

package/src/components/HkMenu.tsx

@@ -607,7 +607,16 @@ export default defineComponent({
      *  and every consumer hand-rolled its own spacing (PlatformSwitcher
      *  shipped a drifted divider that way). The wrapper renders only
      *  when the slot has content: an empty one would cost a phantom
-     *  flex gap in headerless surfaces. */
+     *  flex gap in headerless surfaces.
+     *
+     *  Band geometry lives in HkMenu.scss, never in consumers: the foot
+     *  band carries the divider-grade top separation there (`.hk-menu-slot--foot`),
+     *  so a consumer adds rows, not padding. A custom default-slot row
+     *  run CARRIES the geometry-neutral `.hk-menu-body` band class in the
+     *  HOST's own markup (this component does not wrap the slot — the
+     *  global rule lives in admin-tokens, _menu-item.scss @mixin body —
+     *  the WIDTH invariant: wrapper padding insets only its own rows and
+     *  breaks highlight parity with the foot action band). */
     function slotWrapper(kind: "head" | "foot" | "extra", nodes: VNode[]): VNode | null {
       return nodes.length ? (
         <div class={`hk-menu-slot hk-menu-slot--${kind}`}>{nodes}</div>

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

@@ -14,7 +14,14 @@
  *     max-width block (HkModal docks via media query, not a class);
  *   - HkMenu's header/footer slots and HkThemeToggle's menu-extra ride
  *     the .hk-menu-slot wrapper instead of splicing raw vnodes into the
- *     level (PlatformSwitcher-class drift lived exactly there).
+ *     level (PlatformSwitcher-class drift lived exactly there);
+ *   - BAND wrappers (slots, .hk-menu-body, .hk-menu-section) stay
+ *     geometry-neutral — the surface's inset is the one horizontal inset
+ *     a row receives, so every row family's highlight reads the same
+ *     width in one panel (2026-10-31: the workspace picker's padded body
+ *     wrapper made 「添加工作区」 run ~12px wider than the selected row);
+ *   - the foot action band owns its divider-grade top separation
+ *     (HkMenu.scss), consumers pad nothing.
  */
 import { describe, expect, it } from "vitest";
 import { readFileSync } from "node:fs";
@@ -24,6 +31,7 @@ import { fileURLToPath } from "node:url";
 const here = dirname(fileURLToPath(import.meta.url));
 const grammar = readFileSync(join(here, "_menu-item.scss"), "utf-8");
 const menuTsx = readFileSync(join(here, "HkMenu.tsx"), "utf-8");
+const menuScss = readFileSync(join(here, "HkMenu.scss"), "utf-8");
 const themeTsx = readFileSync(join(here, "HkThemePanelContent.tsx"), "utf8");
 const adminTokens = readFileSync(join(here, "../styles/admin-tokens.scss"), "utf-8");
 const panelScss = readFileSync(join(here, "HkMenuPanel.scss"), "utf-8");
@@ -576,4 +584,131 @@ describe("menu-item grammar contract", () => {
       ".hk-menu-list must publish its 4px row rhythm for a captioned run",
     ).toMatch(/\.hk-menu-list\s*\{[^}]*--hk-menu-section-gap:\s*var\(--space-4,\s*4px\)/s);
   });
+
+  it("declares the consumer body band as exactly two neutral declarations", () => {
+    // The WIDTH invariant (2026-10-31 field report): a padded band insets
+    // only ITS rows, so their highlight stops matching the foot action
+    // band's — the workspace picker's 「添加工作区」 ran ~12px wider than
+    // the 「个人空间」 row. @mixin body is therefore pinned to EXACTLY the
+    // two neutral declarations; a padding/margin/border sneaking in fails
+    // here even though every value pin elsewhere stays green.
+    const body = mixinBody("body");
+    const decls = body
+      .split(";")
+      .map((stmt) => stmt.replace(/\s+/g, " ").trim())
+      .filter(Boolean);
+    expect(decls, "@mixin body is display:block + min-width:0, nothing else").toEqual([
+      "display: block",
+      "min-width: 0",
+    ]);
+    expect(body, "the body band never pads").not.toMatch(/\bpadding/);
+    expect(body, "the body band never margins").not.toMatch(/\bmargin/);
+    expect(body, "the body band never draws chrome").not.toMatch(/\bborder/);
+  });
+
+  it("publishes the body band globally and only binds it to the grammar", () => {
+    // Hosts render .hk-menu-body by hand beside their own class (the
+    // workspace picker does) and cannot import the scss partial — same
+    // rule shape as the section band above: the global sheet BINDS the
+    // class to @mixin body, every rule mentioning the class carries
+    // nothing but that binding.
+    const blocks = flattenBlocks(parseScss(stripScssComments(adminTokens)));
+    const bodyRules = blocks.flatMap((block) =>
+      resolvedSelectors(block)
+        .filter((selector) => selector.includes("hk-menu-body"))
+        .map((selector) => ({ selector, block })),
+    );
+    expect(
+      bodyRules.map((entry) => entry.selector),
+      "the one global body adopter",
+    ).toContain(".hk-menu-body");
+    for (const { selector, block } of bodyRules) {
+      // The binding must be TOP-LEVEL: resolvedSelectors drops at-rule
+      // preludes, so a media-scoped duplicate would resolve to the same
+      // selector string here — walk the parent chain explicitly and fail
+      // on any at-rule ancestor (the modal-sheet test sets the precedent).
+      for (let cur = block.parent; cur; cur = cur.parent) {
+        expect(
+          cur.prelude.startsWith("@"),
+          `the body binding for "${selector}" must be a top-level rule, found inside at-rule "${cur.prelude}" (a scoped binding is not the global contract)`,
+        ).toBe(false);
+      }
+      const statements = block.statements.map((stmt) => stmt.replace(/\s+/g, " ").trim());
+      expect(statements, `body rule "${selector}" binds the grammar only`).toEqual([
+        "@include mi.body",
+      ]);
+    }
+  });
+
+  it("keeps every band wrapper geometry-neutral (rows own the level width)", () => {
+    // Every rule in the sheets that style band classes today — the
+    // grammar, HkMenu.scss and admin-tokens (a repo-wide grep is the
+    // reviewer's periodic check that this list is still the whole world) —
+    // must declare NO padding for a BAND class: the slot hooks, the
+    // consumer body band, the section wrapper. The surface's inset is the
+    // one horizontal inset a row receives; a band that pads itself
+    // re-creates the field defect with its own rows reading wider than
+    // the neighbours. Comments stripped, block-parsed, resolved selectors
+    // (a context-scoped band rule fails here too).
+    const blocks = [
+      ...flattenBlocks(parseScss(stripScssComments(grammar))),
+      ...flattenBlocks(parseScss(stripScssComments(menuScss))),
+      ...flattenBlocks(parseScss(stripScssComments(adminTokens))),
+    ];
+    const isBandSelector = (selector: string) =>
+      selector.includes("hk-menu-slot") ||
+      selector.includes("hk-menu-body") ||
+      (/hk-menu-section(?!-label)/.test(selector));
+    const bandRules = blocks.flatMap((block) =>
+      resolvedSelectors(block)
+        .filter(isBandSelector)
+        .map((selector) => ({ selector, block })),
+    );
+    // Extraction sanity (never trust a 0-hit scan): the shipped bands are
+    // all found — slot hooks, the body band, the section wrapper.
+    const found = new Set(bandRules.map((entry) => entry.selector));
+    expect(found.has(".hk-menu-slot"), ".hk-menu-slot band found").toBe(true);
+    expect(found.has(".hk-menu-slot--foot"), ".hk-menu-slot--foot band found").toBe(true);
+    expect(found.has(".hk-menu-body"), ".hk-menu-body band found").toBe(true);
+    expect(found.has(".hk-menu-section"), ".hk-menu-section band found").toBe(true);
+    for (const { selector, block } of bandRules) {
+      const padding = block.statements.filter((stmt) =>
+        /(^|[\s;])padding/.test(stmt.replace(/\s+/g, " ").trim()),
+      );
+      expect(padding, `band rule "${selector}" must not pad itself`).toEqual([]);
+    }
+  });
+
+  it("separates the foot action band at the divider grade, band-owned", () => {
+    // The foot band is an ACTION band (the picker's "add workspace"), not
+    // a run of selectable rows — its separation from the list is the
+    // divider's 6px grade, owned by the band (consumers pad nothing).
+    // Pinned EXACTLY so a later restyle cannot silently retune it; head
+    // and extra stay geometry-neutral (no symmetric creep: identity
+    // blocks own their rhythm via the .s-user-header pins).
+    const blocks = flattenBlocks(parseScss(stripScssComments(menuScss)));
+    const foot = blocks.find((block) => block.prelude.trim() === ".hk-menu-slot--foot");
+    expect(foot, ".hk-menu-slot--foot rule lives in HkMenu.scss").toBeTruthy();
+    const decls = foot!.statements.map((stmt) =>
+      stmt.replace(/\s+/g, " ").trim().replace(/;$/, ""),
+    );
+    expect(decls, "the foot band carries exactly its top separation").toEqual([
+      "margin-block-start: var(--hk-menu-foot-gap, var(--space-6, 6px))",
+    ]);
+    // Head/extra stay BARE DOM hooks — no rhythm rules may exist for them
+    // at all (not merely margin-free ones): the identity blocks own their
+    // rhythm through the .s-user-header pins, and the theme menu's extra
+    // slot rides the plain row rhythm. A rule appearing here at all is
+    // the symmetric-creep attempt, so its EXISTENCE fails — a
+    // margin-free-but-present rule would still be a forked band.
+    for (const kind of ["--head", "--extra"]) {
+      const band = blocks.find((block) =>
+        resolvedSelectors(block).includes(`.hk-menu-slot${kind}`),
+      );
+      expect(
+        band,
+        `the ${kind} band must stay a bare DOM hook with no rule of its own (its rhythm is owned elsewhere by design)`,
+      ).toBeUndefined();
+    }
+  });
 });

package/src/components/_menu-item.scss

@@ -44,12 +44,34 @@
  *   section title hugging the edge rather than as an indented row. No
  *   text-transform: translators own casing (the HkTemplateField rule).
  *
+ * Band taxonomy and the WIDTH invariant (2026-10-31):
+ *   A menu level holds two kinds of children. ROWS — selectable items,
+ *   custom rich rows, action buttons — all speak @mixin item: each spans
+ *   the level's content box edge to edge, so its hover/active wash is
+ *   that full box and every highlight in one panel reads the same width.
+ *   BANDS — the wrappers around runs of rows — must stay GEOMETRY-NEUTRAL:
+ *   zero padding of their own. The surface's inset (the popout's 8px, the
+ *   sheet list's 16px, HkMenuPanel's --hk-menu-panel-inset) is the ONE
+ *   horizontal inset a row ever receives. A band that pads itself insets
+ *   only ITS rows, and they stop lining up with the rows outside it: the
+ *   foot action band's highlight then reads wider than the selection rows
+ *   above it (2026-10-31 field report: the workspace picker's
+ *   「添加工作区」 ran ~12px wider than the 「个人空间」 row because the
+ *   consumer body wrapper carried a 6px hand pad the foot slot did not).
+ *   The band homes are: .hk-menu-slot--head/--foot/--extra (HkMenu's slot
+ *   bands), .hk-menu-section (a captioned run), .hk-menu-body (a
+ *   consumer-rendered run — @mixin body). Vertical rhythm BETWEEN bands
+ *   is band-owned, never wrapper-padding-owned: the foot band carries its
+ *   divider-grade top separation in HkMenu.scss, the section grammar owns
+ *   its caption bands here.
+ *
  * Adoption: `@use "./menu-item" as mi;` then
  *   .your-row { @include mi.item; }
  *   .your-row .your-icon { @include mi.icon; }   // wrap TSX side!
  *   .your-row .your-label { @include mi.label; }
  *   .your-section { @include mi.section; }
  *   .your-section-label { @include mi.section-label; }
+ *   .your-body { @include mi.body; }             // custom row-run band
  * Keep the component's own class names — this file owns metrics and
  * states only, never selectors of the adopting rows.
  */
@@ -336,3 +358,24 @@
     margin-block-start: var(--hk-menu-section-stack, var(--space-6, 6px));
   }
 }
+
+/* ── Consumer body band ──────────────────────────────────────────────
+ * The wrapper for a consumer-rendered run of rows inside a menu level —
+ * the workspace picker's custom two-line rows, a menu body of rich rows
+ * the flat HkMenuItem model cannot express. The WIDTH invariant (see the
+ * header's band taxonomy) makes this band GEOMETRY-NEUTRAL: exactly two
+ * declarations, no padding, ever. The surface's inset is the one inset
+ * the rows inside receive, so they line up edge-for-edge with the foot
+ * action band and every other row family in the same panel (the
+ * 2026-10-31 field report shipped as a padded consumer wrapper whose
+ * rows ran ~12px wider than the foot band's highlight). A host keeps its
+ * own class beside .hk-menu-body for tokens and width floors (e.g. the
+ * picker's min-width + caption tokens) — those are content decisions;
+ * horizontal insets are not.
+ *
+ * Not a row: it carries no row tokens, so it needs NO entry in the
+ * sheet-context lists — the rows INSIDE it register themselves. */
+@mixin body {
+  display: block;
+  min-width: 0;
+}

package/src/index.ts

@@ -555,6 +555,7 @@ export { HkNavSidebar as HNavSidebar } from "./components/HkNavSidebar";
 export { HkThemeToggle as HThemeToggle, type ThemeItemScope } from "./components/HkThemeToggle";
 export { HkThemePanelContent as HThemePanelContent } from "./components/HkThemePanelContent";
 export { HkSolarLocationSetting as HSolarLocationSetting } from "./components/HkSolarLocationSetting";
+export { HkDateTag as HDateTag } from "./components/HkDateTag";
 export { HkAuthCard as HAuthCard } from "./components/HkAuthCard";
 export { default as HAuthMethodList } from "./components/HkAuthMethodList";
 export { HkSignInCard as HSignInCard } from "./components/HkSignInCard";
@@ -836,6 +837,7 @@ export { HkNavSidebar as HkNavSidebar } from "./components/HkNavSidebar";
 export { HkThemeToggle as HkThemeToggle } from "./components/HkThemeToggle";
 export { HkThemePanelContent as HkThemePanelContent } from "./components/HkThemePanelContent";
 export { HkSolarLocationSetting as HkSolarLocationSetting } from "./components/HkSolarLocationSetting";
+export { HkDateTag as HkDateTag } from "./components/HkDateTag";
 export { HkAuthCard as HkAuthCard } from "./components/HkAuthCard";
 export { HkSignInCard as HkSignInCard } from "./components/HkSignInCard";
 export { HkThirdPartySignInCard as HkThirdPartySignInCard } from "./components/HkThirdPartySignInCard";

package/src/styles/admin-tokens.scss

@@ -808,6 +808,19 @@
   @include mi.section-label;
 }
 
+/* The consumer body band (hikari _menu-item.scss @mixin body): the
+ * geometry-neutral wrapper for a host-rendered run of rows inside a menu
+ * level. Same hand-rendered-host reason as the section band above — the
+ * workspace picker wraps its custom rows in .hk-menu-body and cannot
+ * import the partial. The band is TWO neutral declarations by contract
+ * (the WIDTH invariant: the surface's inset is the only horizontal inset
+ * a row receives, so rows here line up edge-for-edge with the foot
+ * action band); a host's own class beside it carries the content
+ * decisions (min-width floors, caption tokens), never padding. */
+.hk-menu-body {
+  @include mi.body;
+}
+
 /* ── User identity header (shared) ─ */
 /* One identity block for every account surface — the admin user
    dropdown's header, a mobile drawer's user panel footer — so all