@cardstack/boxel-cli 0.10.0 → 0.10.1-unstable.0

package/bundled-realms/pretui/internal/motion-pointer.gts

@@ -0,0 +1,234 @@
+// Pretui — MOTION territory, wave 2: pointer behaviors. Four components
+// (CursorTrail, Magnetic, Spotlight, Tilt) transcribed — behavior, not
+// code — from the four reference kits' most-duplicated pointer effects:
+// motion-primitives cursor.tsx / magnetic.tsx / spotlight.tsx / tilt.tsx,
+// react-bits Blob-Ghost-Pixel-ImageTrail + Magnet/MagnetLines +
+// TargetCursor, fancy PixelTrail/ImageTrail.
+//
+// ── The Law 8 problem, stated up front ──────────────────────────────────
+// Law 8 (the screenshot test) names these four by name: "a treatment
+// invisible in a still frame (tilt, magnetic, glow, spotlight)
+// contributes nothing and is cut." They are here anyway because five
+// independent kits converged on them, so the demand is real. The
+// resolution is not to dodge the law — it is that every component below
+// ships a RESTING STATE that survives a still frame with the pointer
+// gone, and three of the four ENCODE something (Law 5) rather than
+// decorating:
+//   CursorTrail — resting bullseye marker on a live field; the marker is
+//                 also the FOCUS marker (keyboard parity). Encodes: where
+//                 the reader's attention point currently is.
+//   Magnetic    — the reach zone is DRAWN, not implied. Encodes: the real
+//                 (enlarged) hit area of the control, i.e. the Fitts's-law
+//                 target that upstream leaves invisible.
+//   Spotlight   — a resting wash parks at a documented origin, and the
+//                 light travels to whatever child takes focus. Encodes:
+//                 which surface is live and where focus sits inside it.
+//   Tilt        — HONEST ADMISSION: idle tilt encodes NOTHING. It is
+//                 decoration and is documented as such in its @description.
+//                 What earns its keep is (a) a real resting plate — card
+//                 radius + --pretui-shadow-card, so the still frame shows
+//                 an elevated surface — and (b) @press, where the plate
+//                 tips toward the actual press point, which does encode
+//                 "you pressed, and here".
+//
+// ── The timer law, and why every upstream engine had to go ──────────────
+// Realm law forbids setTimeout / setInterval / requestAnimationFrame /
+// Date.now / Math.random. EVERY upstream implementation of all four of
+// these is a rAF spring loop (motion's useSpring / useMotionValue). None
+// of that is transcribable. The legal substitute, used by all four:
+//   ONE shared ember-modifier (`pointerField`, exported below) attaches
+//   pointermove/pointerleave/focusin/focusout listeners — event listeners
+//   are not timers — and writes the pointer geometry onto the element as
+//   custom properties. All easing and travel is then a CSS `transition`
+//   on `translate` / `transform` / `opacity`. The browser's transition
+//   engine does the interpolation on the compositor; no JS runs between
+//   pointer events.
+// Where this differs from a spring, per component, is stated in each
+// section's delta note. In summary: a retargeted CSS transition is
+// critically damped and never overshoots, so there is no bounce/wobble
+// and no `stiffness`/`damping`/`mass` surface; in exchange it costs zero
+// frames of JS, never runs while idle, and cannot leak a loop.
+//
+// One correction to the obvious approach, worth recording: staggering a
+// trail with per-element `transition-delay` does NOT work for continuous
+// pointer tracking. Every pointermove retargets the transition, which
+// restarts the delay, so any dot whose delay exceeds the frame interval
+// never moves at all. The cascade here is built from graduated
+// transition-DURATION instead (dot i takes longer to reach the same
+// target), which is what actually produces the lag fan under continuous
+// retargeting. `transition-delay` is still correct for one-shot moves.
+//
+// Theming contract throughout: no dark-mode branches; every
+// color is var(--token, lightFallback); decorative layers are
+// aria-hidden + pointer-events: none so nothing underneath is ever
+// blocked; prefers-reduced-motion collapses each effect to its END state
+// (never a frozen midpoint).
+//
+// Pretui — pointerField, the shared pointer-to-custom-property modifier behind the pointer effects.
+// type-only gap: 'ember-modifier' resolves at realm runtime; glint can't
+// see it here (accepted parse baseline)
+import { modifier } from 'ember-modifier';
+
+// ── pointerField — the shared pointer→custom-property primitive ──────────
+// Exported because all four components below need it and a fifth
+// (anything that wants pointer-relative CSS) will too. It is the whole
+// substitute for motion's useMotionValue + useSpring stack.
+//
+// Writes onto the host element, on every pointermove:
+//   --pretui-px / --pretui-py   pointer position inside the box, in px
+//   --pretui-nx / --pretui-ny   the same, normalized to -0.5 … 0.5
+//   --pretui-dx / --pretui-dy   px offset from box centre, already scaled
+//                               by the radial falloff (the "lean" vector)
+//   --pretui-pd                 proximity/affinity 0…1 (1 at centre,
+//                               0 at `range`, or at the box's half
+//                               diagonal when range is 0/omitted)
+//   data-pretui-pointer         'idle' | 'fine' | 'coarse' | 'focus'
+//
+// Deliberate behaviors, each of which fixes something upstream:
+//   - Touch is NOT ignored. Upstream binds `mousemove`, so every one of
+//     these effects is simply dead on a touch device. Pointer Events give
+//     us finger drags for free; the pointerType lands in
+//     data-pretui-pointer so CSS can *choose* per effect (a trail follows
+//     a finger happily; a tilt under a fingertip is nonsense and is
+//     switched off declaratively, with no JS branch).
+//   - Keyboard parity. focusin inside the host moves the same geometry to
+//     the focused child's centre and reports state 'focus'. Upstream has
+//     no keyboard path at all for any of the four.
+//   - On pointerleave the *lean* vector and affinity go neutral (so
+//     Magnetic/Tilt spring home) but px/py are LEFT AT THE LAST POSITION,
+//     which is what gives CursorTrail/Spotlight a resting state instead of
+//     vanishing.
+//   - The bounding rect is cached and invalidated by a ResizeObserver plus
+//     passive scroll/resize listeners, so a pointermove is a pure write —
+//     no forced layout per frame. Upstream calls getBoundingClientRect()
+//     inside the mousemove handler.
+// Measurement-only observer, disconnected in cleanup; no timers.
+export const pointerField = modifier(
+  (
+    el: HTMLElement,
+    [range, followFocus, restX, restY]: [
+      number | undefined,
+      boolean | undefined,
+      number | undefined,
+      number | undefined,
+    ],
+  ) => {
+    let rect: DOMRect | undefined;
+    let engaged = false;
+    let box = (): DOMRect => {
+      if (!rect) rect = el.getBoundingClientRect();
+      return rect;
+    };
+    let write = (
+      x: number,
+      y: number,
+      w: number,
+      h: number,
+      state: string,
+    ) => {
+      let cx = w / 2;
+      let cy = h / 2;
+      let reach = range && range > 0 ? range : Math.hypot(cx, cy) || 1;
+      let ox = x - cx;
+      let oy = y - cy;
+      let f = Math.max(0, 1 - Math.hypot(ox, oy) / reach);
+      let s = el.style;
+      s.setProperty('--pretui-px', `${x.toFixed(1)}px`);
+      s.setProperty('--pretui-py', `${y.toFixed(1)}px`);
+      s.setProperty('--pretui-nx', (w ? x / w - 0.5 : 0).toFixed(4));
+      s.setProperty('--pretui-ny', (h ? y / h - 0.5 : 0).toFixed(4));
+      s.setProperty('--pretui-dx', `${(ox * f).toFixed(1)}px`);
+      s.setProperty('--pretui-dy', `${(oy * f).toFixed(1)}px`);
+      s.setProperty('--pretui-pd', f.toFixed(4));
+      el.dataset.pretuiPointer = state;
+    };
+    // neutral() zeroes the lean + affinity but never touches px/py — the
+    // frozen last position IS the resting state (see the Law 8 note).
+    let neutral = (state: string) => {
+      let s = el.style;
+      s.setProperty('--pretui-nx', '0');
+      s.setProperty('--pretui-ny', '0');
+      s.setProperty('--pretui-dx', '0px');
+      s.setProperty('--pretui-dy', '0px');
+      s.setProperty('--pretui-pd', '0');
+      el.dataset.pretuiPointer = state;
+    };
+    let onMove = (e: PointerEvent) => {
+      let r = box();
+      engaged = true;
+      write(
+        e.clientX - r.left,
+        e.clientY - r.top,
+        r.width,
+        r.height,
+        e.pointerType === 'touch' ? 'coarse' : 'fine',
+      );
+    };
+    let onLeave = () => neutral('idle');
+    let onFocusIn = (e: FocusEvent) => {
+      if (!followFocus) return;
+      let t = e.target;
+      if (!(t instanceof HTMLElement)) return;
+      let r = box();
+      let f = t.getBoundingClientRect();
+      engaged = true;
+      write(
+        f.left - r.left + f.width / 2,
+        f.top - r.top + f.height / 2,
+        r.width,
+        r.height,
+        'focus',
+      );
+    };
+    let onFocusOut = (e: FocusEvent) => {
+      if (!followFocus) return;
+      let next = e.relatedTarget;
+      if (next instanceof Node && el.contains(next)) return;
+      neutral('idle');
+    };
+    // Park the geometry at the documented rest origin until something
+    // engages, so a freshly rendered (never-pointed) component already
+    // reads correctly in a screenshot.
+    let seed = () => {
+      let r = box();
+      if (!r.width && !r.height) return;
+      write(
+        r.width * (restX ?? 0.5),
+        r.height * (restY ?? 0.5),
+        r.width,
+        r.height,
+        'idle',
+      );
+      neutral('idle');
+    };
+    let invalidate = () => {
+      rect = undefined;
+    };
+    let ro = new ResizeObserver(() => {
+      rect = undefined;
+      if (!engaged) seed();
+    });
+    ro.observe(el);
+    seed();
+    el.addEventListener('pointermove', onMove, { passive: true });
+    el.addEventListener('pointerleave', onLeave, { passive: true });
+    el.addEventListener('pointercancel', onLeave, { passive: true });
+    el.addEventListener('focusin', onFocusIn);
+    el.addEventListener('focusout', onFocusOut);
+    window.addEventListener('scroll', invalidate, {
+      capture: true,
+      passive: true,
+    });
+    window.addEventListener('resize', invalidate, { passive: true });
+    return () => {
+      ro.disconnect();
+      el.removeEventListener('pointermove', onMove);
+      el.removeEventListener('pointerleave', onLeave);
+      el.removeEventListener('pointercancel', onLeave);
+      el.removeEventListener('focusin', onFocusIn);
+      el.removeEventListener('focusout', onFocusOut);
+      window.removeEventListener('scroll', invalidate, true);
+      window.removeEventListener('resize', invalidate);
+    };
+  },
+);

package/bundled-realms/pretui/internal/overlay-confirm.gts

@@ -0,0 +1,35 @@
+// Pretui — shared by the confirmation and preview layer: AlertDialog, Popconfirm,
+// HoverCard.
+//
+// All three are compositions, not new overlays. `overlay.gts` already owns the
+// two hard parts — the native `<dialog>` top layer (focus trap, Escape,
+// ::backdrop, stacking) and `anchorTo`, the measuring flip/shift primitive
+// that replaced floating-ui. Nothing here re-implements either; what it adds
+// is the *contract* each pattern needs on top.
+//
+// ── The overlay contract, applied verbatim ───────────────────────────────
+//
+//   @open?  @onOpenChange?  @defaultOpen?   @placement?   @modal?
+//   <:trigger>  <:header>  <:default>  <:footer>
+//
+// The rule the gap doc is emphatic about, and which `Dialog` itself still
+// breaks: **`@onClose` is never the only knob.** A parent that can be told the
+// thing closed but cannot open it has not been given control of it. Every
+// component here takes the controlled/uncontrolled triple, keeps internal
+// state only while `@open` is `undefined`, and fires `@onOpenChange` on every
+// transition either way.
+//
+// React argument aliases are accepted where the corpus is consistent about
+// them: Ant's `okText` / `cancelText` / `showCancel`, Radix's `openDelay` /
+// `closeDelay`, `side`+`align` collapsed into `@placement`.
+
+/** Anything inside a trigger block that can hold focus. Used to find the one
+ * control the caller actually rendered, so the component can put ARIA on it
+ * and hand focus back to it — the trigger is a block, so the component can
+ * never capture the button directly. */
+const TRIGGER_CONTROL =
+  'button, [role="button"], a[href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])';
+
+export function controlIn(el: HTMLElement): HTMLElement {
+  return (el.querySelector(TRIGGER_CONTROL) as HTMLElement | null) ?? el;
+}

package/bundled-realms/pretui/internal/overlay.gts

@@ -0,0 +1,291 @@
+// Pretui — overlay territory (foundation pass, merge-sequence step 3).
+// Ported from Web Awesome's overlay layer (MIT, (c) Fonticons), re-cut for
+// realm constraints: wa-popup's floating-ui positioning becomes a ~50-line
+// measuring modifier (flip + shift + align) that only ever runs while an
+// overlay is open — so it never executes during prerender; wa-dialog/
+// wa-drawer ride the native <dialog> top layer (focus trap, Escape via
+// 'cancel', stacking — no JS dismissible-stack needed); Popover generalizes
+// the Select backdrop-close pattern. Entry/exit motion is pure CSS via
+// @starting-style (Motion Rule: encodes open state; reduced-motion gets the
+// end state).
+//
+// Pretui — overlay plumbing shared by Popup, Dialog, Drawer and Popover:
+// placement aliases, the measuring anchor modifier, the open-arg aliases and
+// the native <dialog> modal behaviour. Not a component.
+import { modifier } from 'ember-modifier';
+import { firstDefined } from '../pretui-primitives';
+
+export type PopupPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end';
+
+const GUTTER = 8;
+
+// ── Placement alias layer (react-ecosystem-gap.md, step 1) ───────────────
+// Four kits spell one idea four ways. Radix splits it into `side` + `align`;
+// Mantine calls the composite `position`; Vaul/shadcn's Drawer calls it
+// `direction`; everyone else writes `placement`. Pretui's canonical arg
+// stays `@placement`, and every other spelling resolves into it here.
+//
+// Logical `start`/`end` are accepted and mapped to physical left/right for
+// LTR — the direction the whole kit is travelling. When the popup placement
+// enum itself goes logical, only this table changes.
+export type PlacementArgs = {
+  placement?: string;
+  side?: string;
+  align?: string;
+  position?: string;
+  direction?: string;
+};
+
+const SIDE_ALIASES: Record<string, Side> = {
+  top: 'top',
+  bottom: 'bottom',
+  left: 'left',
+  right: 'right',
+  start: 'left',
+  end: 'right',
+  'inline-start': 'left',
+  'inline-end': 'right',
+  'block-start': 'top',
+  'block-end': 'bottom',
+  before: 'left',
+  after: 'right',
+  up: 'top',
+  down: 'bottom',
+};
+const ALIGN_ALIASES: Record<string, string> = {
+  center: '',
+  centre: '',
+  middle: '',
+  start: '-start',
+  end: '-end',
+  top: '-start',
+  bottom: '-end',
+  left: '-start',
+  right: '-end',
+};
+
+/** Split a composite placement without shredding `inline-start`. */
+function splitPlacement(p: string): [string, string | undefined] {
+  if (SIDE_ALIASES[p]) {
+    return [p, undefined];
+  }
+  let i = p.lastIndexOf('-');
+  return i === -1 ? [p, undefined] : [p.slice(0, i), p.slice(i + 1)];
+}
+
+export function resolvePlacement(
+  args: PlacementArgs,
+  fallback: PopupPlacement,
+): PopupPlacement {
+  let composite = firstDefined(
+    args.placement,
+    args.position,
+    args.direction,
+    args.side,
+  );
+  let [sideToken, alignToken] = composite
+    ? splitPlacement(composite)
+    : [undefined, undefined];
+  let side = SIDE_ALIASES[sideToken ?? ''];
+  if (!side) {
+    return fallback;
+  }
+  let align = ALIGN_ALIASES[alignToken ?? args.align ?? 'center'] ?? '';
+  return (side + align) as PopupPlacement;
+}
+
+/** Drawer's placement is already logical, and has no `top` edge. */
+export type DrawerPlacement = 'start' | 'end' | 'bottom';
+const DRAWER_PLACEMENTS: Record<string, DrawerPlacement> = {
+  start: 'start',
+  end: 'end',
+  bottom: 'bottom',
+  left: 'start',
+  right: 'end',
+  'inline-start': 'start',
+  'inline-end': 'end',
+  'block-end': 'bottom',
+  down: 'bottom',
+};
+
+export function resolveDrawerPlacement(
+  args: PlacementArgs,
+  fallback: DrawerPlacement = 'end',
+): DrawerPlacement {
+  let raw = firstDefined(
+    args.placement,
+    args.position,
+    args.direction,
+    args.side,
+  );
+  return (raw ? DRAWER_PLACEMENTS[raw] : undefined) ?? fallback;
+}
+
+/** Every spelling of "is this layer showing". */
+export type OpenArgs = {
+  open?: boolean;
+  isOpen?: boolean;
+  opened?: boolean;
+};
+export function resolveOpen(args: OpenArgs): boolean | undefined {
+  return firstDefined(args.open, args.isOpen, args.opened);
+}
+
+type Side = 'top' | 'bottom' | 'left' | 'right';
+const OPPOSITE: Record<Side, Side> = {
+  top: 'bottom',
+  bottom: 'top',
+  left: 'right',
+  right: 'left',
+};
+
+function positionPopup(
+  a: DOMRect,
+  w: number,
+  h: number,
+  placement: PopupPlacement,
+  distance: number,
+) {
+  let [side, align] = placement.split('-') as [Side, string | undefined];
+  let vw = window.innerWidth;
+  let vh = window.innerHeight;
+  let space: Record<Side, number> = {
+    top: a.top - distance,
+    bottom: vh - a.bottom - distance,
+    left: a.left - distance,
+    right: vw - a.right - distance,
+  };
+  let need = side === 'top' || side === 'bottom' ? h : w;
+  if (space[side] < need && space[OPPOSITE[side]] >= need) {
+    side = OPPOSITE[side];
+  }
+  let top = 0;
+  let left = 0;
+  if (side === 'top') top = a.top - h - distance;
+  if (side === 'bottom') top = a.bottom + distance;
+  if (side === 'left') left = a.left - w - distance;
+  if (side === 'right') left = a.right + distance;
+  if (side === 'top' || side === 'bottom') {
+    left =
+      align === 'start'
+        ? a.left
+        : align === 'end'
+          ? a.right - w
+          : a.left + a.width / 2 - w / 2;
+    left = Math.min(Math.max(left, GUTTER), Math.max(vw - w - GUTTER, GUTTER));
+  } else {
+    top =
+      align === 'start'
+        ? a.top
+        : align === 'end'
+          ? a.bottom - h
+          : a.top + a.height / 2 - h / 2;
+    top = Math.min(Math.max(top, GUTTER), Math.max(vh - h - GUTTER, GUTTER));
+  }
+  return { top, left };
+}
+
+// Positions the popup against its anchor and keeps it placed across scroll/
+// resize (listeners live only while the popup is rendered — the modifier's
+// cleanup removes them on close). Exported as the kit's shared anchored-
+// positioning primitive: the same offset/flip/shift behavior floating-ui's
+// middleware provides, measured against the REAL panel box — floating-ui
+// itself is not realm-importable, and boxel-ui's Velcro path portals to the
+// app root, outside the theme island.
+export const anchorTo = modifier(
+  (
+    el: HTMLElement,
+    [anchor, placement, distance, matchWidth, scale]: [
+      HTMLElement | undefined,
+      PopupPlacement,
+      number,
+      boolean,
+      (number | undefined)?,
+    ],
+  ) => {
+    if (!anchor) return;
+    let apply = () => {
+      // `relativeScale` — a panel anchored inside a zoomable surface
+      // (NodeCanvas, Board) has to scale WITH the surface. It is applied as a
+      // `transform`, never CSS `zoom`: `zoom` also scales the positional
+      // top/left this modifier writes, so a panel at `top: 200px; zoom: .8`
+      // paints at 160px and slides off its anchor. `transform` leaves the
+      // used position alone, and getBoundingClientRect reports post-transform
+      // boxes, so the flip/shift maths below measures the box the reader
+      // actually sees. Clamped 0.4–2.5 (the fork's range).
+      if (scale !== undefined && scale !== 1) {
+        let s = Math.min(2.5, Math.max(0.4, scale));
+        el.style.transformOrigin = 'top left';
+        el.style.transform = `scale(${s})`;
+      }
+      if (matchWidth) {
+        el.style.minWidth = `${anchor.getBoundingClientRect().width}px`;
+      }
+      let r = el.getBoundingClientRect();
+      let p = positionPopup(
+        anchor.getBoundingClientRect(),
+        r.width,
+        r.height,
+        placement,
+        distance,
+      );
+      el.style.top = `${p.top}px`;
+      el.style.left = `${p.left}px`;
+    };
+    apply();
+    window.addEventListener('scroll', apply, { capture: true, passive: true });
+    window.addEventListener('resize', apply);
+    return () => {
+      window.removeEventListener('scroll', apply, true);
+      window.removeEventListener('resize', apply);
+    };
+  },
+);
+
+// Provided by a surface whose rules a wormholed popup would break: a modal
+// <dialog> makes everything outside it inert, and an editor that commits on
+// blur reads focus moving into the wormhole as leaving. Select renders its
+// list in place under it. Consumed at creation, which is the only time
+// ember-basic-dropdown reads @renderInPlace.
+export const POPUPS_IN_PLACE = 'pretui-popups-in-place';
+
+// Keeps the native <dialog>'s modal state in sync with the controlled @open
+// arg, and owns its 'cancel' (Escape) and 'click' (backdrop) listeners —
+// attached here rather than with {{on}} because the lint rule
+// no-invalid-interactive rejects template listeners on <dialog>. showModal()
+// promotes to the top layer: focus trap, Escape, ::backdrop, and stacking
+// all come from the platform.
+export const modalBehavior = modifier(
+  (
+    el: HTMLDialogElement,
+    [open, onCancel, onClick]: [
+      boolean | undefined,
+      (e: Event) => void,
+      (e: Event) => void,
+    ],
+  ) => {
+    if (open && !el.open) {
+      el.showModal();
+    } else if (!open && el.open) {
+      el.close();
+    }
+    el.addEventListener('cancel', onCancel);
+    el.addEventListener('click', onClick);
+    return () => {
+      el.removeEventListener('cancel', onCancel);
+      el.removeEventListener('click', onClick);
+    };
+  },
+);

package/bundled-realms/pretui/internal/reading-extras.gts

@@ -0,0 +1,56 @@
+// Pretui — reading extras: entity + date display components.
+// Foundation decisions (per 2026-08-12 standing rules, revised 2026-08-12
+// "one calendar" pass):
+// - EntityDisplay: FRESH, merging boxel-ui's entity-icon-display and
+//   entity-thumbnail-display into one component with @variant='icon'|
+//   'thumbnail'; the tag row reuses Pretui Chip.
+// - Calendar: FRESH — THE Pretui date surface. One month-grid implementation
+//   (pure date math, roving-tabindex arrow keys) shared by every date control
+//   in the kit. @mode='single'|'range'; @months panels side by side that
+//   collapse to the first month in a narrow container.
+// - DatePicker: Pretui Input trigger + Popover around a single-mode Calendar.
+// - DateRangePicker: Calendar in range mode, so both date controls share the
+//   same Pretui calendar. Popover
+//   trigger consistent with DatePicker's; two months by default.
+// - RelativeTime: FRESH (webawesome relative-time semantics) — computes the
+//   phrase ONCE from @date vs @now; @now is caller-supplied (LoadingState
+//   precedent). It does NOT auto-tick: the realm forbids timers.
+// Visual values flow through theme tokens only; fallbacks declared per root.
+//
+// Pretui — shared date math for the date components (pure: no deps, no timers).
+
+// ── shared date math (pure — no deps, no timers) ─────────────────────────
+export const DISPLAY_FMT = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+});
+export const LABEL_FMT = new Intl.DateTimeFormat('en-US', {
+  weekday: 'long',
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
+export const MONTH_FMT = new Intl.DateTimeFormat('en-US', {
+  month: 'long',
+  year: 'numeric',
+});
+export const ABS_FMT = new Intl.DateTimeFormat('en-US', {
+  dateStyle: 'medium',
+  timeStyle: 'short',
+});
+
+export function toIso(d: Date): string {
+  let mm = String(d.getMonth() + 1).padStart(2, '0');
+  let dd = String(d.getDate()).padStart(2, '0');
+  return `${d.getFullYear()}-${mm}-${dd}`;
+}
+
+export function fromIso(iso: string): Date | undefined {
+  let m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+  if (!m) {
+    return undefined;
+  }
+  let [, y, mo, da] = m;
+  return new Date(Number(y), Number(mo) - 1, Number(da));
+}