@ultimat3/admin 1.2.0 → 3.0.0

package/src/widgets.tsx

@@ -2,6 +2,7 @@
 // switch, so money is a Money widget and a timestamp is a DateTime widget with a zone in
 // every one of those places — there is no second place to get it wrong.
 
+import { safeUrl } from '@ultimat3/core';
 import { t } from '@ultimat3/i18n';
 import {
   Checkbox,
@@ -53,10 +54,17 @@ const wiring = (control: FieldControl | undefined): ControlWiring =>
 /**
  * A `date` column has no time of day, and ui's default formatter always renders one. A
  * rendered midnight is wrong in every zone but the one the value was stored in.
+ *
+ * `'UTC'`, never `options.zone`: a calendar date is zone-INDEPENDENT by construction — the value
+ * is `YYYY-MM-DD` and the spec parses it as UTC midnight (`date-time-view.ts` says so where it
+ * refuses an offsetless date-TIME). Formatting that instant in the viewer's zone moves it: an
+ * `effective_on` of `2026-08-18` read as `Aug 17, 2026` for every operator west of Greenwich,
+ * which is the exact bug `date()` exists to prevent — measured under `TZ=America/Los_Angeles`.
+ * The instant branch keeps `options.zone`, because an instant genuinely has one.
  */
-const dateOnly: DateTimeFormatter = (at, options) =>
+export const formatCalendarDate: DateTimeFormatter = (at, options) =>
   new Intl.DateTimeFormat(options.locale, {
-    timeZone: options.zone,
+    timeZone: 'UTC',
     dateStyle: 'medium',
   }).format(at);
 
@@ -65,7 +73,7 @@ const inputValueFor = (iso: string, precision: 'date' | 'instant'): string =>
   iso.slice(0, precision === 'date' ? 10 : 16);
 
 /** Read-mode rendering of already-guarded props. Never formats; the widgets do that. */
-function readView(props: WidgetProps, field: AdminField): JSX.Element {
+function readView(props: WidgetProps, field: AdminField, ctx: WidgetContext): JSX.Element {
   switch (props.widget) {
     case 'money':
       return props.value === null ? (
@@ -80,7 +88,7 @@ function readView(props: WidgetProps, field: AdminField): JSX.Element {
         <DateTime
           value={props.value}
           timeZone={props.timeZone}
-          format={props.precision === 'date' ? dateOnly : undefined}
+          format={props.precision === 'date' ? formatCalendarDate : undefined}
         />
       );
     case 'checkbox':
@@ -95,17 +103,18 @@ function readView(props: WidgetProps, field: AdminField): JSX.Element {
       );
     case 'json-editor':
       return <pre class="x-admin-json">{props.value}</pre>;
-    case 'reference':
-      return props.value === null ? (
-        <span>{t('admin.value.empty')}</span>
-      ) : (
-        <a href={`/${props.entity}s/${props.value}`}>{props.value}</a>
-      );
+    case 'reference': {
+      if (props.value === null) return <span>{t('admin.value.empty')}</span>;
+      // `ctx.hrefFor` or nothing. The route table lives on `AdminApp`; this file only ever knew
+      // the target entity's NAME, and turning that into a URL by appending an `s` is a guess.
+      const href = ctx.hrefFor?.(props.entity, props.value) ?? null;
+      return href === null ? <span>{props.value}</span> : <a href={href}>{props.value}</a>;
+    }
     case 'upload':
       return props.value === null ? (
         <span>{t('admin.value.empty')}</span>
       ) : (
-        <a href={props.value.url}>{props.value.name}</a>
+        <a href={safeUrl(props.value.url, 'href') ?? undefined}>{props.value.name}</a>
       );
     default:
       return <span>{String(props.value ?? '')}</span>;
@@ -258,5 +267,5 @@ function locales(): readonly string[] {
 
 export function Widget(input: WidgetInput): JSX.Element {
   const props = widgetProps(input.field, input.value, input.ctx);
-  return input.mode === 'read' ? readView(props, input.field) : editView(props, input);
+  return input.mode === 'read' ? readView(props, input.field, input.ctx) : editView(props, input);
 }