@multiplatform.one/theme 6.7.0 → 7.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/theme",
-  "version": "6.7.0",
+  "version": "7.1.0",
   "description": "Tamagui theme system for multiplatform.one",
   "keywords": [
     "multiplatform",
@@ -44,33 +44,33 @@
     "access": "public"
   },
   "dependencies": {
-    "@tamagui/colors": "2.0.0-rc.41",
-    "@tamagui/config": "2.0.0-rc.41",
-    "@tamagui/get-token": "2.0.0-rc.41",
-    "@tamagui/shorthands": "2.0.0-rc.41",
-    "@tamagui/theme-builder": "2.0.0-rc.41",
-    "@tamagui/themes": "2.0.0-rc.41",
-    "@tamagui/toast": "2.0.0-rc.41",
-    "@tamagui/web": "2.0.0-rc.41",
+    "@tamagui/colors": "2.7.6",
+    "@tamagui/config": "2.7.6",
+    "@tamagui/get-token": "2.7.6",
+    "@tamagui/shorthands": "2.7.6",
+    "@tamagui/theme-builder": "2.7.6",
+    "@tamagui/themes": "2.7.6",
+    "@tamagui/toast": "2.7.6",
+    "@tamagui/web": "2.7.6",
     "react-cookie": "^8.1.2",
-    "@multiplatform.one/store": "6.7.0",
-    "@multiplatform.one/platform": "6.7.0"
+    "@multiplatform.one/platform": "7.1.0",
+    "@multiplatform.one/store": "7.1.0"
   },
   "devDependencies": {
-    "@tamagui/animations-css": "2.0.0-rc.41",
-    "@tamagui/animations-reanimated": "2.0.0-rc.41",
-    "@tamagui/font-inter": "2.0.0-rc.41",
+    "@tamagui/animations-css": "2.7.6",
+    "@tamagui/animations-reanimated": "2.7.6",
+    "@tamagui/font-inter": "2.7.6",
     "@testing-library/react": "^16.3.2",
     "@types/react": "~19.2.14",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "^4.1.5",
     "react": "19.2.5",
     "react-dom": "19.2.5",
-    "tamagui": "2.0.0-rc.41",
+    "tamagui": "2.7.6",
     "typescript": "~5.9.3",
     "vitest": "^4.1.5",
-    "@multiplatform.one/test-utils": "6.7.0",
-    "@multiplatform.one/config": "6.7.0"
+    "@multiplatform.one/test-utils": "7.1.0",
+    "@multiplatform.one/config": "7.1.0"
   },
   "peerDependencies": {
     "@tamagui/animations-css": "^2.0.0-rc",

package/src/dates.spec.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from "vitest";
 import {
   formatAbsoluteDate,
   formatAbsoluteDateTime,
+  formatCalendarDate,
   formatDayLong,
   formatDayOfMonth,
   formatMonthYear,
@@ -48,7 +49,7 @@ describe("formatAbsoluteDate (LC-12 compact absolute register)", () => {
     expect(formatAbsoluteDate("not-a-date", enUS)).toBe("not-a-date");
   });
 
-  it("never emits seconds (LC-12 VERIFY)", () => {
+  it("never emits seconds unless asked (LC-12 VERIFY)", () => {
     const out = formatAbsoluteDateTime(new Date(2026, 7, 9, 15, 30, 45), { ...enUS, now });
     expect(out).not.toMatch(/:\d{2}:\d{2}/);
   });
@@ -66,6 +67,49 @@ describe("formatAbsoluteDateTime (system-event register)", () => {
       "Aug 9, 2025, 3:30 PM",
     );
   });
+
+  // The editing register: both DatetimePicker halves format through this, so
+  // the picker's timeFormat / showSeconds contract has to live here or the two
+  // halves compose their own and drift (they drifted by the Intl comma).
+  describe("editing register (datetime picker display)", () => {
+    const at = new Date(2026, 2, 5, 14, 30, 45);
+
+    it("is the same string both platform halves emit for the same value", () => {
+      const web = formatAbsoluteDateTime(at, { ...enUS, year: "always", hour12: true });
+      const native = formatAbsoluteDateTime(at, { ...enUS, year: "always" });
+      expect(web).toBe("Mar 5, 2026, 2:30 PM");
+      expect(native).toBe(web);
+    });
+
+    it("pins the 24-hour clock on request", () => {
+      expect(formatAbsoluteDateTime(at, { ...enUS, year: "always", hour12: false })).toBe(
+        "Mar 5, 2026, 14:30",
+      );
+      // Midnight reads 00, not 24 — h23, the clock a picker column shows.
+      expect(
+        formatAbsoluteDateTime(new Date(2026, 2, 5, 0, 5), {
+          ...enUS,
+          year: "always",
+          hour12: false,
+        }),
+      ).toBe("Mar 5, 2026, 00:05");
+    });
+
+    it("appends seconds on request, in both clocks", () => {
+      expect(
+        formatAbsoluteDateTime(at, { ...enUS, year: "always", hour12: true, seconds: true }),
+      ).toBe("Mar 5, 2026, 2:30:45 PM");
+      expect(
+        formatAbsoluteDateTime(at, { ...enUS, year: "always", hour12: false, seconds: true }),
+      ).toBe("Mar 5, 2026, 14:30:45");
+    });
+
+    it("ignores the time options when there is no time component", () => {
+      expect(
+        formatAbsoluteDate(at, { ...enUS, year: "always", hour12: false, seconds: true }),
+      ).toBe("Mar 5, 2026");
+    });
+  });
 });
 
 describe("formatRelativeTimestamp (feed/social register)", () => {
@@ -230,3 +274,302 @@ describe("parseCalendarDate (day-grid parse)", () => {
     expect(inZone("UTC", () => parseCalendarDate("0050-03-10")?.getFullYear())).toBe(50);
   });
 });
+
+// ---------------------------------------------------------------------------
+// formatCalendarDate — the write counterpart to parseCalendarDate
+// ---------------------------------------------------------------------------
+
+/**
+ * TWO instants, because one cannot discriminate.
+ *
+ * The span from UTC−7 to UTC+14 is 21 hours — under a day — so no single
+ * instant has UTC disagreeing with both extremes at once. `A` is the evening
+ * in Los Angeles (UTC has already rolled over); `B` is the small hours in
+ * Kiritimati (UTC has not yet). Together they catch a UTC rendering in either
+ * hemisphere.
+ */
+const INSTANT_A = "2026-08-15T05:00:00Z";
+const INSTANT_B = "2026-08-14T11:00:00Z";
+
+/** UTC day, local day, and the local wall clock the value carries per zone. */
+const LOCAL_READINGS: Record<string, Record<string, { day: string; clock: string }>> = {
+  [INSTANT_A]: {
+    UTC: { day: "2026-08-15", clock: "05:00:00" },
+    "America/Los_Angeles": { day: "2026-08-14", clock: "22:00:00" },
+    "America/New_York": { day: "2026-08-15", clock: "01:00:00" },
+    "Pacific/Kiritimati": { day: "2026-08-15", clock: "19:00:00" },
+  },
+  [INSTANT_B]: {
+    UTC: { day: "2026-08-14", clock: "11:00:00" },
+    "America/Los_Angeles": { day: "2026-08-14", clock: "04:00:00" },
+    "America/New_York": { day: "2026-08-14", clock: "07:00:00" },
+    "Pacific/Kiritimati": { day: "2026-08-15", clock: "01:00:00" },
+  },
+};
+
+describe("formatCalendarDate (local-parts wire serializer)", () => {
+  it("names the local calendar day at both instants in every timezone", () => {
+    const rows = [INSTANT_A, INSTANT_B].flatMap((instant) =>
+      ZONES.map((timeZone) => ({
+        instant,
+        timeZone,
+        wrote: inZone(timeZone, () => formatCalendarDate(new Date(instant))),
+      })),
+    );
+    expect(rows).toEqual(
+      rows.map(({ instant, timeZone }) => ({
+        instant,
+        timeZone,
+        wrote: LOCAL_READINGS[instant][timeZone].day,
+      })),
+    );
+  });
+
+  it("negative control: the toISOString() formulation fails this expectation", () => {
+    // The deleted expression, verbatim, through the identical matrix. Asserting
+    // the disagreements as a LIST proves two things at once: the old code is
+    // wrong where the fix is right, and it agrees in the other six rows — so
+    // the matrix above is not passing vacuously on instants where every zone
+    // happens to land on the same day.
+    const isoDay = (date: Date) => date.toISOString().slice(0, 10);
+    const disagreements = [INSTANT_A, INSTANT_B]
+      .flatMap((instant) =>
+        ZONES.map((timeZone) =>
+          inZone(timeZone, () => {
+            const wrote = isoDay(new Date(instant));
+            const shouldBe = LOCAL_READINGS[instant][timeZone].day;
+            return wrote === shouldBe ? null : { instant, timeZone, wrote, shouldBe };
+          }),
+        ),
+      )
+      .filter(Boolean);
+    expect(disagreements).toEqual([
+      {
+        instant: INSTANT_A,
+        timeZone: "America/Los_Angeles",
+        wrote: "2026-08-15",
+        shouldBe: "2026-08-14",
+      },
+      {
+        instant: INSTANT_B,
+        timeZone: "Pacific/Kiritimati",
+        wrote: "2026-08-14",
+        shouldBe: "2026-08-15",
+      },
+    ]);
+  });
+
+  it("host guard: process.env.TZ actually moves the local reading in-process", () => {
+    // Without this, a host ignoring TZ would collapse `inZone` to a no-op and
+    // the matrices above would stop meaning anything. The negative control
+    // alone cannot cover it — `toISOString()` is UTC on a broken host too, so
+    // it would keep "failing" correctly.
+    expect(inZone("America/Los_Angeles", () => new Date(INSTANT_A).getDate())).toBe(14);
+    expect(inZone("Pacific/Kiritimati", () => new Date(INSTANT_B).getDate())).toBe(15);
+  });
+
+  it("writes the local wall clock for datetime and time shapes", () => {
+    for (const instant of [INSTANT_A, INSTANT_B]) {
+      for (const timeZone of ZONES) {
+        const { day, clock } = LOCAL_READINGS[instant][timeZone];
+        expect({
+          instant,
+          timeZone,
+          datetime: inZone(timeZone, () => formatCalendarDate(new Date(instant), "datetime")),
+          time: inZone(timeZone, () => formatCalendarDate(new Date(instant), "time")),
+        }).toEqual({ instant, timeZone, datetime: `${day} ${clock}`, time: clock });
+      }
+    }
+  });
+
+  it("negative control: toISOString() shifts a datetime by the whole offset", () => {
+    // The other deleted branch: `.slice(0, 16).replace("T", " ")`. Reading it
+    // back as local wall clock walks the instant forward on every save.
+    const isoDatetime = (date: Date) => date.toISOString().slice(0, 16).replace("T", " ");
+    expect(inZone("America/Los_Angeles", () => isoDatetime(new Date(INSTANT_A)))).toBe(
+      "2026-08-15 05:00",
+    );
+    expect(
+      inZone("America/Los_Angeles", () => formatCalendarDate(new Date(INSTANT_A), "datetime")),
+    ).toBe("2026-08-14 22:00:00");
+  });
+
+  it("round-trips through parseCalendarDate in every timezone", () => {
+    for (const timeZone of ZONES) {
+      for (const wire of ["2026-08-15", "2026-08-15 14:30:00"]) {
+        const shape = wire.includes(":") ? "datetime" : "date";
+        expect({
+          timeZone,
+          wire,
+          back: inZone(timeZone, () => formatCalendarDate(wire, shape)),
+        }).toEqual({ timeZone, wire, back: wire });
+      }
+    }
+  });
+
+  it("serializes the input shapes the call sites hand it", () => {
+    // Built AND read inside the zone: a Date is an instant, so constructing it
+    // on the host clock and reading it at UTC+14 would name a different day.
+    const at = (make: () => DateInput, shape?: "date" | "datetime" | "time") =>
+      inZone("Pacific/Kiritimati", () => formatCalendarDate(make(), shape));
+    const picked = () => new Date(2026, 7, 15, 14, 30, 5);
+    // A Date — what every replaced copy took.
+    expect(at(picked)).toBe("2026-08-15");
+    expect(at(picked, "datetime")).toBe("2026-08-15 14:30:05");
+    expect(at(picked, "time")).toBe("14:30:05");
+    // Already on the wire — idempotent, not shifted a day by a UTC re-read.
+    expect(at(() => "2026-08-15")).toBe("2026-08-15");
+    expect(at(() => "2026-08-15 14:30:05", "datetime")).toBe("2026-08-15 14:30:05");
+    // Empty and unparseable are "", the honest passthrough the formatters use.
+    expect(at(() => null)).toBe("");
+    expect(at(() => undefined)).toBe("");
+    expect(at(() => "")).toBe("");
+    expect(at(() => "not-a-date")).toBe("");
+    expect(at(() => new Date("nonsense"))).toBe("");
+  });
+});
+
+// ---------------------------------------------------------------------------
+// The consolidation: one body where there were eight
+// ---------------------------------------------------------------------------
+
+/**
+ * Each replaced copy's string-building body, pasted VERBATIM from the tree
+ * before this change. The point is not that they look alike — it is that the
+ * canonical helper emits the same bytes for the same input, so repointing the
+ * call sites moved no behavior.
+ */
+const COPIES = {
+  // public/frappe-ui/src/fields/Date/wire.ts — toFrappeDateValue
+  "frappe-ui wire.ts": (date: Date, shape: string) => {
+    const pad2 = (n: number) => String(n).padStart(2, "0");
+    const datePart = `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
+    const timePart = `${pad2(date.getHours())}:${pad2(date.getMinutes())}:${pad2(date.getSeconds())}`;
+    if (shape === "time") return timePart;
+    if (shape === "datetime") return `${datePart} ${timePart}`;
+    return datePart;
+  },
+  // public/frappe-ui/src/FrappeCalendar.tsx — toFrappeFieldValue
+  "frappe-ui FrappeCalendar.tsx": (next: Date, shape: string) => {
+    const pad = (n: number) => String(n).padStart(2, "0");
+    const datePart = `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}`;
+    if (shape === "datetime") {
+      return `${datePart} ${pad(next.getHours())}:${pad(next.getMinutes())}:${pad(next.getSeconds())}`;
+    }
+    return datePart;
+  },
+  // public/frappe-ui/src/FrappeGantt.tsx — toFrappeFieldValue (identical body)
+  "frappe-ui FrappeGantt.tsx": (next: Date, shape: string) => {
+    const pad = (n: number) => String(n).padStart(2, "0");
+    const datePart = `${next.getFullYear()}-${pad(next.getMonth() + 1)}-${pad(next.getDate())}`;
+    if (shape === "datetime") {
+      return `${datePart} ${pad(next.getHours())}:${pad(next.getMinutes())}:${pad(next.getSeconds())}`;
+    }
+    return datePart;
+  },
+  // public/frappe-ui/src/FrappeReportView.tsx — toFrappeDate
+  "frappe-ui FrappeReportView.tsx": (date: Date) => {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+  },
+  // public/backoffice/src/views/CalendarView.tsx — toFrappeDateValue
+  "backoffice CalendarView.tsx": (date: Date, shape: string) => {
+    const pad = (n: number) => String(n).padStart(2, "0");
+    const datePart = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+    if (shape !== "datetime") return datePart;
+    return `${datePart} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+  },
+  // public/backoffice/src/views/dashboard-data.tsx — isoDate
+  "backoffice dashboard-data.tsx": (date: Date) => {
+    const pad = (n: number) => String(n).padStart(2, "0");
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+  },
+  // public/backoffice/src/form/formLayout.ts — todayISO / nowTime
+  "backoffice formLayout.ts": (now: Date, shape: string) => {
+    if (shape === "time") {
+      const hours = String(now.getHours()).padStart(2, "0");
+      const minutes = String(now.getMinutes()).padStart(2, "0");
+      const seconds = String(now.getSeconds()).padStart(2, "0");
+      return `${hours}:${minutes}:${seconds}`;
+    }
+    const month = String(now.getMonth() + 1).padStart(2, "0");
+    const day = String(now.getDate()).padStart(2, "0");
+    return `${now.getFullYear()}-${month}-${day}`;
+  },
+  // public/backoffice/src/quickEntry/quickEntryPlan.ts — todayISO
+  "backoffice quickEntryPlan.ts": (now: Date) => {
+    const month = String(now.getMonth() + 1).padStart(2, "0");
+    const day = String(now.getDate()).padStart(2, "0");
+    return `${now.getFullYear()}-${month}-${day}`;
+  },
+  // public/components/src/views/Calendar.tsx — formatDateKey
+  "components Calendar.tsx": (date: Date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  },
+} satisfies Record<string, (date: Date, shape: string) => string>;
+
+/** Which shapes each copy could emit — nothing is claimed beyond that. */
+const COPY_SHAPES: Record<keyof typeof COPIES, readonly ("date" | "datetime" | "time")[]> = {
+  "frappe-ui wire.ts": ["date", "datetime", "time"],
+  "frappe-ui FrappeCalendar.tsx": ["date", "datetime"],
+  "frappe-ui FrappeGantt.tsx": ["date", "datetime"],
+  "frappe-ui FrappeReportView.tsx": ["date"],
+  "backoffice CalendarView.tsx": ["date", "datetime"],
+  "backoffice dashboard-data.tsx": ["date"],
+  "backoffice formLayout.ts": ["date", "time"],
+  "backoffice quickEntryPlan.ts": ["date"],
+  "components Calendar.tsx": ["date"],
+};
+
+describe("formatCalendarDate is byte-identical to the copies it replaced", () => {
+  // Every Date the copies could be handed: instants either side of the UTC
+  // date boundary, a midnight, a zero-padding case, and the unpadded-year
+  // quirk all nine shared (`${getFullYear()}` never pads below 1000).
+  const SAMPLES = [
+    new Date(INSTANT_A),
+    new Date(INSTANT_B),
+    new Date(2026, 7, 15, 0, 0, 0),
+    new Date(2026, 0, 5, 9, 8, 7),
+    new Date(2026, 11, 31, 23, 59, 59),
+    (() => {
+      const early = new Date(2026, 2, 10);
+      early.setFullYear(99);
+      return early;
+    })(),
+  ];
+
+  for (const [name, copy] of Object.entries(COPIES)) {
+    it(`${name}`, () => {
+      const disagreements: unknown[] = [];
+      for (const timeZone of ZONES) {
+        for (const sample of SAMPLES) {
+          for (const shape of COPY_SHAPES[name as keyof typeof COPIES]) {
+            inZone(timeZone, () => {
+              const was = copy(sample, shape);
+              const now = formatCalendarDate(sample, shape);
+              if (was !== now) disagreements.push({ timeZone, shape, was, now });
+            });
+          }
+        }
+      }
+      expect(disagreements).toEqual([]);
+    });
+  }
+
+  it("the samples are discriminating — a UTC rendering would fail this", () => {
+    // Guards the loop above: if every sample landed on the same day in every
+    // zone, "byte-identical" would be true of a broken helper too.
+    const utcRendering = (date: Date) => date.toISOString().slice(0, 10);
+    const disagreements = ZONES.flatMap((timeZone) =>
+      SAMPLES.filter(
+        (sample) => inZone(timeZone, () => formatCalendarDate(sample)) !== utcRendering(sample),
+      ),
+    );
+    expect(disagreements.length).toBeGreaterThan(0);
+  });
+});

package/src/dates.ts

@@ -33,6 +33,19 @@ export interface AbsoluteDateFormatOptions {
   year?: "auto" | "always" | "never";
   /** Include the time component ("Aug 9, 3:30 PM"). Default false. */
   withTime?: boolean;
+  /**
+   * Append seconds to the time component ("Aug 9, 3:30:45 PM"). Off by
+   * default — no register emits seconds unless a surface asks. Only the
+   * editing register does: a `showSeconds` picker has to display the second
+   * it lets you set. Ignored without `withTime`.
+   */
+  seconds?: boolean;
+  /**
+   * Pin the 12/24-hour clock instead of following the locale — the
+   * `timeFormat` contract a datetime picker exposes to its consumers.
+   * Ignored without `withTime`.
+   */
+  hour12?: boolean;
   /** BCP-47 locale forwarded to Intl. Default: system locale. */
   locale?: string;
   /** Reference date for current-year elision (injectable for tests). */
@@ -102,6 +115,36 @@ export function parseCalendarDate(value: DateInput): Date | null {
   return Number.isNaN(parsed.getTime()) ? null : parsed;
 }
 
+/** Timezone-naive wire shapes: Frappe's `Date`, `Datetime` and `Time`. */
+export type CalendarDateShape = "date" | "datetime" | "time";
+
+const pad2 = (n: number) => String(n).padStart(2, "0");
+
+/**
+ * Serialize a date onto the LOCAL calendar parts it names — the write
+ * counterpart to `parseCalendarDate`, and the only place the repo builds a
+ * timezone-naive wire string.
+ *
+ * `"date"` emits `YYYY-MM-DD`, `"datetime"` emits `YYYY-MM-DD HH:mm:ss`, and
+ * `"time"` emits `HH:mm:ss` — the shapes Frappe stores, none of which carries
+ * an offset. `toISOString()` renders the UTC instant instead, so it names the
+ * wrong day whenever the value's local time of day sits across the UTC date
+ * boundary, and shifts a wall clock by the whole offset. Reading such a string
+ * back through `parseCalendarDate` then compounds the error, because the read
+ * side treats it as local.
+ *
+ * Accepts anything `parseCalendarDate` does, so a value already on the wire
+ * round-trips unchanged; empty and unparseable input serialize to "".
+ */
+export function formatCalendarDate(value: DateInput, shape: CalendarDateShape = "date"): string {
+  const date = parseCalendarDate(value);
+  if (!date) return "";
+  const timePart = `${pad2(date.getHours())}:${pad2(date.getMinutes())}:${pad2(date.getSeconds())}`;
+  if (shape === "time") return timePart;
+  const datePart = `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
+  return shape === "datetime" ? `${datePart} ${timePart}` : datePart;
+}
+
 /**
  * Compact absolute date — the house register for every absolute date.
  * "Jul 1" / "Jul 1, 2025" (year auto-elided when current), or with
@@ -115,7 +158,7 @@ export function formatAbsoluteDate(
   const coerced = coerceDateInput(value);
   if (!coerced) return typeof value === "string" ? value : "";
   const { date, dateOnly } = coerced;
-  const { year = "auto", withTime = false, locale, now } = options;
+  const { year = "auto", withTime = false, seconds = false, hour12, locale, now } = options;
   const referenceYear = (now ?? new Date()).getFullYear();
   const displayYear = dateOnly ? date.getUTCFullYear() : date.getFullYear();
   const intlOptions: Intl.DateTimeFormatOptions = {
@@ -128,6 +171,8 @@ export function formatAbsoluteDate(
   if (withTime) {
     intlOptions.hour = "numeric";
     intlOptions.minute = "2-digit";
+    if (seconds) intlOptions.second = "2-digit";
+    if (hour12 !== undefined) intlOptions.hour12 = hour12;
   }
   if (dateOnly) {
     intlOptions.timeZone = "UTC";
@@ -141,8 +186,10 @@ export function formatAbsoluteDate(
 
 /**
  * Compact absolute date-time ("Aug 9, 3:30 PM"; year added when not
- * current). The system-event register (LC-12) and the tooltip form for
- * relative timestamps.
+ * current). The system-event register (LC-12), the tooltip form for relative
+ * timestamps, and — with `year: "always"` — the datetime picker display on
+ * BOTH platform halves, which is why it takes `hour12` / `seconds`: the two
+ * halves used to compose their own and drifted by a comma.
  */
 export function formatAbsoluteDateTime(
   value: DateInput,

package/src/devWarn.ts

@@ -19,7 +19,14 @@ export type DevWarnCode =
   | "outline-none"
   // DG-A11Y-02 — a second level-1 heading mounted under one page scope.
   // Emitted by PageHeadingScope in @multiplatform.one/components.
-  | "multiple-h1";
+  | "multiple-h1"
+  // Stacked-group geometry (theme groupGeometry): a group container could
+  // not resolve its items' first/middle/last positions because an item is
+  // hidden behind a component boundary — corners fall back to "only"
+  // (uniformly rounded), which is the defect the geometry rule bans.
+  | "opaque-stack-group"
+  /** Numeric height/paddingHorizontal on a recipe control without sizeRecipeEscape. */
+  | "size-recipe-escape";
 
 export type DevWarnDetail = {
   component?: string;
@@ -164,6 +171,27 @@ export function warnBareDisabled(args: {
   devWarn("bare-disabled", { component: args.component, id: args.id });
 }
 
+/**
+ * LC-65 — numeric `height` / `paddingHorizontal` on a size-recipe control
+ * (Button, Input.Box) must opt in with `sizeRecipeEscape="reason"`. Warns
+ * once per component+id like `warnBareDisabled`; does not invent a general
+ * style escape.
+ */
+export function warnSizeRecipeEscape(args: {
+  height?: unknown;
+  paddingHorizontal?: unknown;
+  sizeRecipeEscape?: string | null;
+  component?: string;
+  id?: string;
+}): void {
+  if (!isDev()) return;
+  const numericHeight = typeof args.height === "number";
+  const numericPad = typeof args.paddingHorizontal === "number";
+  if (!numericHeight && !numericPad) return;
+  if (typeof args.sizeRecipeEscape === "string" && args.sizeRecipeEscape.trim()) return;
+  devWarn("size-recipe-escape", { component: args.component, id: args.id });
+}
+
 /**
  * DG-ACT-05 — the cancel/dismiss action never renders disabled (while confirm
  * may be). Enforcing callers strip the prop and report the attempt here.

package/src/figma/figmaTokens.spec.ts

@@ -199,12 +199,12 @@ describe("buildFigmaTokens", () => {
       expect(result.knobs.cornerSmoothing.modes).toEqual({ round: 0, smooth: 0.6 });
     });
 
-    it("exports density compact stepping", () => {
+    it("exports density compact stepping for space only (size is uncoupled)", () => {
       expect(result.knobs.density.default).toBe("comfortable");
       expect(result.knobs.density.compact.size).toEqual({
         small: "small",
-        medium: "small",
-        large: "medium",
+        medium: "medium",
+        large: "large",
       });
       expect(result.knobs.density.compact.space).toEqual({
         small: "small",

package/src/figma/figmaTokens.ts

@@ -32,7 +32,7 @@ import { defaultBaseTheme } from "../theme/defaults/base";
 import { defaultBuilderOptions } from "../theme/defaults/builderOptions";
 import { defaultBodyFont, defaultHeadingFont } from "../theme/defaults/fonts";
 import { type Knobs, defaultKnobs } from "../theme/knobs";
-import { compactSizeMap, compactSpaceMap, resolveKnobs } from "../theme/resolveKnobs";
+import { compactSpaceMap, resolveKnobs } from "../theme/resolveKnobs";
 
 // ── Names / constants ─────────────────────────────────────────
 
@@ -124,7 +124,7 @@ export interface FigmaKnobsExport {
   cornerSmoothing: { default: string; modes: Record<string, number> };
   density: {
     default: Knobs["density"];
-    /** compact steps size/space down one level (applyDensity). */
+    /** compact steps space only (applyDensity); size is an independent axis. */
     compact: { size: Record<string, string>; space: Record<string, string> };
   };
 }
@@ -409,7 +409,10 @@ function buildKnobs(): FigmaKnobsExport {
     },
     density: {
       default: defaultKnobs.density,
-      compact: { size: { ...compactSizeMap }, space: { ...compactSpaceMap } },
+      compact: {
+        size: { small: "small", medium: "medium", large: "large" },
+        space: { ...compactSpaceMap },
+      },
     },
   };
 }

package/src/keyboardFocusRing.ts

@@ -36,10 +36,66 @@ export function wasKeyboardFocus(): boolean {
   return lastInputWasKeyboard;
 }
 
-/** Standard manual ring props (mirrors the focusVisibleStyle contract). */
+import { FOCUS_VISIBLE_RING } from "./theme/focusState";
+
+/**
+ * Standard manual ring props — the SAME geometry as `FOCUS_VISIBLE_RING`
+ * (2px solid `$outlineColor`, inset −2), spread here so manually-painted
+ * rings and `focusVisibleStyle` rings can never drift apart.
+ */
 export const keyboardFocusRingProps = {
-  outlineColor: "$outlineColor",
-  outlineWidth: 2,
-  outlineStyle: "solid",
-  outlineOffset: -2,
+  ...FOCUS_VISIBLE_RING,
 } as const;
+
+/**
+ * LC-71 RING-ANATOMY — CSS-synchronous ring on a composite's outer boundary.
+ *
+ * `:has(:focus-visible)` paints the same frame the keyboard heuristic would,
+ * with zero React latency (the prior `focused` JS path lagged one frame and
+ * spawned the inner-Area ring cascade). Inner targets suppress their own
+ * outline so the box carries exactly one ring. Class: `mp-composite-ring`.
+ */
+export const compositeFocusRingCss = `/* LC-71: ring on the composite outer box; never on the inner field.
+   Inset (−2px): these frames use overflow:hidden to clip children to radius,
+   which severs an outer ring. Do NOT use :has(:focus-visible) on every
+   descendant — that would ring the whole SearchInput when the clear ✕ is
+   focused (two focusables → two rings, chip-dismiss rule). */
+.mp-composite-ring:focus-visible,
+.mp-composite-ring:has(input:focus),
+.mp-composite-ring:has(textarea:focus),
+.mp-composite-ring:has(.mp-input-area:focus) {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText));
+  outline-offset: -2px;
+}
+.mp-composite-ring-deep:has(:focus-visible) {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText));
+  outline-offset: -2px;
+}
+.mp-composite-ring input,
+.mp-composite-ring textarea,
+.mp-composite-ring [contenteditable],
+.mp-input-area,
+.mp-input-area:focus,
+.mp-input-area:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+}
+.mp-chip-dismiss:focus-visible {
+  outline: none !important;
+}
+.mp-chip-dismiss:focus-visible .mp-chip-dismiss-ring {
+  outline: 2px solid var(--outlineColor, var(--c-outlineColor, CanvasText));
+  outline-offset: 2px;
+}`;
+
+const COMPOSITE_RING_STYLE_ID = "mp-composite-focus-ring";
+
+/** Idempotently mount the composite-boundary focus-ring stylesheet. */
+export function ensureCompositeFocusRing(): void {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(COMPOSITE_RING_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = COMPOSITE_RING_STYLE_ID;
+  tag.textContent = compositeFocusRingCss;
+  document.head.appendChild(tag);
+}