@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/CommandMenu/CommandMenu.tsx

@@ -0,0 +1,179 @@
+import { useState, type ReactElement, type ReactNode } from "react";
+import { Command } from "cmdk";
+import { Dialog as RDialog } from "radix-ui";
+import type {
+  CommandMenuProps as ReferenceCommandMenuProps,
+  IconName,
+  RecordState,
+} from "../types/reference";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { useControllable, useHotkey, useReturnFocus } from "../lib/hooks.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { Kbd, Keys } from "../Kbd/Kbd.tsx";
+import { StateIcon } from "../StateIcon/StateIcon.tsx";
+import { panelClass } from "../Overlays/Overlays.tsx";
+
+export interface CommandItem {
+  label: string;
+  code?: string;
+  icon?: IconName;
+  state?: RecordState;
+  shortcut?: string;
+  selected?: boolean;
+  onSelect?: () => void;
+  /** Keeps the menu open after the item runs, for an item that edits the search (an operator hint). */
+  keepOpen?: boolean;
+}
+
+export type CommandMenuProps = Omit<ReferenceCommandMenuProps, "groups"> & {
+  groups: { label: string; items: CommandItem[] }[];
+  /** Called as the search text changes, for server-side results. With `query`, the text is controlled. */
+  onQueryChange?: (query: string) => void;
+  /** Shown between the search field and the results, for example the filters a query recognized. */
+  header?: ReactNode;
+  /** Dialog mode: the menu opens over the page. Omit `open` to render the palette inline. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** In dialog mode, Cmd or Ctrl+K toggles the menu (on by default). */
+  hotkey?: boolean;
+  /** Turn off client filtering when the results come from a server search. */
+  filter?: boolean;
+  /** Names the menu for assistive technology; the command menu's own name by default. */
+  label?: string;
+};
+
+function itemValue(group: string, item: CommandItem): string {
+  return `${group} ${item.label} ${item.code ?? ""}`.trim();
+}
+
+function Palette({
+  query,
+  placeholder: hint,
+  groups,
+  onQueryChange,
+  filter = true,
+  header,
+  label,
+  onClose,
+}: CommandMenuProps & { onClose?: () => void }) {
+  const t = useT();
+  const [search, setSearch] = useControllable<string>(query, "", onQueryChange);
+  const selected = groups.flatMap((g) =>
+    g.items.filter((i) => i.selected).map((i) => itemValue(g.label, i)),
+  )[0];
+  // With server results (filter off) nothing re-ranks the list, so a new search, or new results for it,
+  // move the highlight to the first item, and Enter runs what the person sees first.
+  const lead =
+    selected ?? groups.flatMap((g) => g.items.map((i) => itemValue(g.label, i)))[0] ?? "";
+  const [highlight, setHighlight] = useState(lead);
+  const [highlightFor, setHighlightFor] = useState(`${search}\u0000${lead}`);
+  if (!filter && highlightFor !== `${search}\u0000${lead}`) {
+    setHighlightFor(`${search}\u0000${lead}`);
+    setHighlight(lead);
+  }
+  return (
+    <Command
+      label={label ?? t("command.label")}
+      shouldFilter={filter}
+      loop
+      {...(filter
+        ? selected
+          ? { defaultValue: selected }
+          : {}
+        : { value: highlight, onValueChange: setHighlight })}
+      className={cx(panelClass, "xos-anim-dialog w-(--ui-command) overflow-hidden")}
+    >
+      <div className="flex items-center gap-8 h-(--ui-cmd-input) px-16 border-b border-border-subtle text-text-14">
+        <Icon name="search" color="var(--color-text-secondary)" />
+        <Command.Input
+          value={search}
+          onValueChange={setSearch}
+          placeholder={hint}
+          className="flex-1 min-w-0 bg-transparent border-0 outline-none text-text-primary placeholder:text-text-tertiary"
+        />
+        <Kbd>{t("key.esc")}</Kbd>
+      </div>
+      {header}
+      <Command.Empty className="px-16 py-12 text-text-secondary">{t("list.noMatch")}</Command.Empty>
+      <Command.List
+        label={t("command.results")}
+        className="max-h-(--ui-listbox-max) overflow-y-auto p-8 pt-4"
+      >
+        {groups.map((g, groupIndex) => (
+          <Command.Group
+            // Two groups may share a label (a caller's own results and pages); the index keeps them apart.
+            key={`${groupIndex}:${g.label}`}
+            heading={g.label}
+            className="[&_[cmdk-group-heading]]:mx-8 [&_[cmdk-group-heading]]:mt-8 [&_[cmdk-group-heading]]:mb-4 [&_[cmdk-group-heading]]:text-text-11 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-text-secondary"
+          >
+            {g.items.map((item) => (
+              <Command.Item
+                key={itemValue(g.label, item)}
+                value={itemValue(g.label, item)}
+                onSelect={() => {
+                  item.onSelect?.();
+                  if (!item.keepOpen) onClose?.();
+                }}
+                className={cx(
+                  "flex items-center gap-8 h-row-default px-8 rounded-control text-text-primary cursor-pointer",
+                  "data-[selected=true]:bg-bg-hover pointer-coarse:min-h-target-coarse [&_svg]:text-text-secondary",
+                )}
+              >
+                {item.state ? (
+                  <StateIcon state={item.state} />
+                ) : (
+                  <Icon name={item.icon ?? "chevron-right"} />
+                )}
+                <span>{item.label}</span>
+                {item.code ? (
+                  <span className="font-mono text-text-12 text-text-secondary">{item.code}</span>
+                ) : null}
+                {item.shortcut ? (
+                  <span className="ms-auto">
+                    <Keys keys={item.shortcut} />
+                  </span>
+                ) : null}
+              </Command.Item>
+            ))}
+          </Command.Group>
+        ))}
+      </Command.List>
+    </Command>
+  );
+}
+
+/**
+ * Finds records, people, pages, settings and actions. Inline by default; with `open` it is a dialog
+ * that Cmd or Ctrl+K toggles. Arrow keys move, Enter runs, Esc closes.
+ */
+export function CommandMenu({
+  open,
+  onOpenChange,
+  hotkey = true,
+  ...props
+}: CommandMenuProps): ReactElement {
+  const t = useT();
+  const dialog = open !== undefined;
+  const [isOpen, setOpen] = useControllable(open, false, onOpenChange);
+  useHotkey("k", () => setOpen(!isOpen), { mod: true, enabled: dialog && hotkey });
+  const returnFocus = useReturnFocus(dialog && isOpen);
+  if (!dialog) return <Palette {...props} />;
+  return (
+    <RDialog.Root open={isOpen} onOpenChange={setOpen}>
+      <RDialog.Portal>
+        <RDialog.Overlay className="xos-anim-fade fixed inset-0 z-command bg-scrim opacity-scrim-dark in-data-[theme=light]:opacity-scrim-light in-data-[theme=sunlight]:opacity-scrim-light" />
+        <div className="pointer-events-none fixed inset-0 z-command flex justify-center px-16 pt-64">
+          <RDialog.Content
+            aria-describedby={undefined}
+            onCloseAutoFocus={returnFocus}
+            className="pointer-events-auto h-fit max-w-full"
+          >
+            <RDialog.Title className="sr-only">{props.label ?? t("command.label")}</RDialog.Title>
+            <Palette {...props} onClose={() => setOpen(false)} />
+          </RDialog.Content>
+        </div>
+      </RDialog.Portal>
+    </RDialog.Root>
+  );
+}

package/src/CommandMenu/README.md

@@ -0,0 +1,5 @@
+# CommandMenu
+
+CommandMenu opens with Cmd or Ctrl+K everywhere and finds records, people, pages, settings and actions.
+
+- Results group by type; the last 50 viewed records show before typing.

package/src/ComparisonTable/README.md

@@ -0,0 +1,9 @@
+# ComparisonTable
+
+ComparisonTable compares one product with others, feature by feature, in a real table.
+
+Every cell carries a word beside its icon: Yes, Partial, No or Unpublished. Unpublished means the other product's public pages do not state the feature; it never means the feature is absent. The caption states when the cells were last verified, and a cell may link to its source. The own-product column is marked with `highlight`.
+
+From bp-md the table scrolls inside a labeled region with sticky row headers. Below bp-md it stacks into one card per feature with each product on its own labeled line, and explicit table roles keep it a table for screen readers. Sorting is off by design.
+
+The consumer provides only rows where its own product is shipped and each other cell has a dated source. Other products' names appear in plain text, never as logos. The preview uses neutral product names.

package/src/Compass/ChecklistRunner.tsx

@@ -0,0 +1,128 @@
+import { useEffect, useState, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { Textarea } from "../Forms/Forms.tsx";
+import { Phone } from "./Compass.shared.tsx";
+import { type ChecklistRunnerProps } from "./Compass.types.ts";
+
+function BigChoice({
+  pass,
+  on,
+  label,
+  onClick,
+}: {
+  pass: boolean;
+  on: boolean;
+  label: string;
+  onClick: () => void;
+}): ReactElement {
+  return (
+    <button
+      type="button"
+      aria-pressed={on}
+      onClick={onClick}
+      className={cx(
+        "flex flex-col items-center justify-center gap-4 h-(--ui-compass-thumb) border-0 rounded-dialog",
+        "text-heading-20 font-semibold cursor-pointer text-text-primary forced-colors:border forced-colors:border-[CanvasText]",
+        "focus-visible:outline-stroke-focus focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+        on
+          ? cx(
+              "bg-bg-hover ring-(length:--stroke-width-focus) ring-inset",
+              pass ? "ring-success" : "ring-danger",
+            )
+          : "bg-bg-surface ring-(length:--ui-hairline-half) ring-inset ring-border-control",
+      )}
+    >
+      <Icon
+        name={pass ? "Check" : "X"}
+        size={28}
+        className={pass ? "text-success" : "text-danger"}
+      />
+      {label}
+    </button>
+  );
+}
+
+/** Inspection runner: one item per card, large Pass and Fail; a Fail asks for a photo and a note. */
+export function ChecklistRunner({
+  frame,
+  title,
+  index,
+  items,
+  onResult,
+  onAddPhoto,
+  onNoteChange,
+}: ChecklistRunnerProps): ReactElement {
+  const t = useT();
+  const [results, setResults] = useState(() => items.map((i) => i.result));
+  useEffect(() => setResults(items.map((i) => i.result)), [items]);
+  const item = items[index];
+  const done = results.filter(Boolean).length;
+  const percent = items.length ? Math.round((done / items.length) * 100) : 0;
+  const result = results[index] ?? null;
+  const choose = (next: "pass" | "fail") => {
+    if (!item) return;
+    setResults((prev) => prev.map((r, i) => (i === index ? next : r)));
+    onResult?.(item.code, next);
+  };
+  return (
+    <Phone frame={frame}>
+      <div className="flex flex-col gap-12 p-16">
+        <div className="flex justify-between text-text-12 text-text-secondary">
+          <strong className="text-text-primary">{title}</strong>
+          <span className="tabular-nums">
+            {t("count.of", { n: index + 1, total: items.length })}
+          </span>
+        </div>
+        <div
+          role="progressbar"
+          aria-label={title}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={percent}
+          className="h-4 rounded-pill bg-bg-hover overflow-hidden"
+        >
+          <div
+            className="h-full rounded-pill bg-accent forced-colors:bg-[CanvasText]"
+            style={{ inlineSize: `${percent}%` }}
+          />
+        </div>
+        {item ? (
+          <article className="flex flex-col gap-8 p-20 min-h-(--ui-compass-card-min) bg-bg-raised border border-border-subtle rounded-dialog">
+            <span className="font-mono text-mono-12 text-text-secondary">{item.code}</span>
+            <strong className="text-heading-20 font-semibold">{item.label}</strong>
+            {item.help ? <span className="text-text-secondary">{item.help}</span> : null}
+            {result === "fail" ? (
+              <div className="flex flex-col gap-8">
+                <Button icon="Camera" size="lg" onClick={() => onAddPhoto?.(item.code)}>
+                  {t("inspection.addPhoto")}
+                </Button>
+                <Textarea
+                  label={t("inspection.whatFailed")}
+                  width="100%"
+                  onChange={(e) => onNoteChange?.(item.code, e.target.value)}
+                />
+              </div>
+            ) : null}
+          </article>
+        ) : null}
+        <div className="grid grid-cols-2 gap-12">
+          <BigChoice
+            pass={false}
+            on={result === "fail"}
+            label={t("inspection.fail")}
+            onClick={() => choose("fail")}
+          />
+          <BigChoice
+            pass
+            on={result === "pass"}
+            label={t("inspection.pass")}
+            onClick={() => choose("pass")}
+          />
+        </div>
+      </div>
+    </Phone>
+  );
+}

package/src/Compass/ClockButton.tsx

@@ -0,0 +1,57 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { compassText } from "./Compass.shared.tsx";
+import { type ClockButtonProps } from "./Compass.types.ts";
+
+const CLOCK_STATE: Record<NonNullable<ClockButtonProps["state"]>, string> = {
+  out: "bg-accent text-accent-text-on",
+  on: "bg-bg-raised text-text-primary ring-(length:--stroke-width-focus) ring-inset ring-success",
+  break:
+    "bg-bg-raised text-text-primary ring-(length:--stroke-width-focus) ring-inset ring-warning",
+  blocked:
+    "bg-bg-surface text-text-secondary ring-(length:--stroke-width-hairline) ring-inset ring-border-strong cursor-not-allowed",
+};
+
+/** The Today screen's one primary control; it changes with the person's state. */
+export function ClockButton({
+  state = "out",
+  label,
+  detail,
+  timer,
+  geofence,
+  geofenceOk,
+  onClick,
+}: ClockButtonProps): ReactElement {
+  const blocked = state === "blocked";
+  return (
+    <div
+      className={cx(
+        "xos-compass flex flex-col items-stretch gap-8 w-(--ui-compass-card) max-w-full",
+        compassText,
+      )}
+    >
+      {geofence ? (
+        <span className="inline-flex items-center gap-6 text-text-14 text-text-secondary">
+          <Icon name="MapPin" size={16} className={geofenceOk ? "text-success" : "text-warning"} />
+          {geofence}
+        </span>
+      ) : null}
+      <button
+        type="button"
+        aria-disabled={blocked ? true : undefined}
+        onClick={blocked ? undefined : onClick}
+        className={cx(
+          "flex flex-col items-center justify-center gap-4 w-full min-h-(--ui-compass-thumb) p-16 border-0 rounded-dialog",
+          "text-heading-20 font-semibold cursor-pointer",
+          "focus-visible:outline-stroke-focus focus-visible:outline-offset-2 focus-visible:outline-focus-ring",
+          CLOCK_STATE[state],
+        )}
+      >
+        {timer ? <span className="text-heading-32 tabular-nums">{timer}</span> : null}
+        <span>{label}</span>
+        {detail ? <small className="text-text-14 font-regular">{detail}</small> : null}
+      </button>
+    </div>
+  );
+}

package/src/Compass/Compass.shared.tsx

@@ -0,0 +1,58 @@
+import { type ReactElement, type ReactNode } from "react";
+import { cx } from "../lib/cx.ts";
+
+export const compassText = "font-sans text-text-16 text-text-primary";
+
+export const blockClass = "w-full justify-center";
+
+export function Phone({
+  frame,
+  tall,
+  children,
+}: {
+  frame?: boolean | undefined;
+  tall?: boolean;
+  children: ReactNode;
+}): ReactElement {
+  return (
+    <div
+      className={cx(
+        "xos-compass",
+        compassText,
+        frame &&
+          "flex flex-col justify-end w-(--ui-tabbar) max-w-full box-border overflow-hidden bg-bg-canvas border border-border-subtle rounded-device",
+        frame && tall && "min-h-(--ui-photo-view)",
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function SheetFrame({
+  title,
+  step,
+  children,
+}: {
+  title: string;
+  step?: string;
+  children: ReactNode;
+}): ReactElement {
+  return (
+    <div
+      role="dialog"
+      aria-label={title}
+      className="flex flex-col gap-16 px-16 pt-8 pb-24 bg-bg-raised rounded-t-dialog shadow-dialog"
+    >
+      <span
+        aria-hidden="true"
+        className="self-center w-(--ui-grabber-inline) h-(--ui-grabber-block) rounded-pill bg-border-strong"
+      />
+      <header className="flex items-baseline justify-between">
+        <strong className="text-heading-20 font-semibold">{title}</strong>
+        {step ? <span className="text-text-secondary tabular-nums">{step}</span> : null}
+      </header>
+      {children}
+    </div>
+  );
+}

package/src/Compass/Compass.tsx

@@ -0,0 +1,26 @@
+export {
+  type ClockButtonProps,
+  type ScanSheetProps,
+  type OfflineBannerProps,
+  type QuickIncidentSheetProps,
+  type ChecklistRunnerProps,
+  type ShiftCardProps,
+  type DaySheetViewProps,
+  type SignaturePadProps,
+  type PhotoCaptureProps,
+  type LiveActivityProps,
+  type ForceUpdateScreenProps,
+  type SyncConflictSheetProps,
+} from "./Compass.types.ts";
+export { ClockButton } from "./ClockButton.tsx";
+export { ScanSheet } from "./ScanSheet.tsx";
+export { OfflineBanner } from "./OfflineBanner.tsx";
+export { QuickIncidentSheet } from "./QuickIncidentSheet.tsx";
+export { ChecklistRunner } from "./ChecklistRunner.tsx";
+export { ShiftCard } from "./ShiftCard.tsx";
+export { DaySheetView } from "./DaySheetView.tsx";
+export { SignaturePad } from "./SignaturePad.tsx";
+export { PhotoCapture } from "./PhotoCapture.tsx";
+export { LiveActivity } from "./LiveActivity.tsx";
+export { ForceUpdateScreen } from "./ForceUpdateScreen.tsx";
+export { SyncConflictSheet } from "./SyncConflictSheet.tsx";

package/src/Compass/Compass.types.ts

@@ -0,0 +1,79 @@
+import { type ReactNode } from "react";
+import type {
+  ChecklistRunnerProps as ReferenceChecklistRunnerProps,
+  ClockButtonProps as ReferenceClockButtonProps,
+  DaySheetViewProps as ReferenceDaySheetViewProps,
+  ForceUpdateScreenProps as ReferenceForceUpdateScreenProps,
+  LiveActivityProps as ReferenceLiveActivityProps,
+  OfflineBannerProps as ReferenceOfflineBannerProps,
+  PhotoCaptureProps as ReferencePhotoCaptureProps,
+  QuickIncidentSheetProps as ReferenceQuickIncidentSheetProps,
+  ScanSheetProps as ReferenceScanSheetProps,
+  ShiftCardProps as ReferenceShiftCardProps,
+  SignaturePadProps as ReferenceSignaturePadProps,
+  SyncConflictSheetProps as ReferenceSyncConflictSheetProps,
+} from "../types/reference";
+
+/**
+ * Compass components on the web (RRR-75): the same surfaces Compass draws natively in
+ * @xos/ui-native, for Atlas previews, the Gateway crew view and Storybook. Each one marks its root
+ * `xos-compass`, which raises every target to touch-min (48 pt). Props are the reference contracts
+ * plus the callbacks a product screen needs; `frame` draws the documentation phone frame and is for
+ * previews only.
+ */
+
+export type ClockButtonProps = ReferenceClockButtonProps;
+
+export type ScanSheetProps = ReferenceScanSheetProps & {
+  onModeChange?: (mode: ReferenceScanSheetProps["mode"]) => void;
+  onDone?: () => void;
+  onNfc?: () => void;
+  onTorch?: () => void;
+  /** The live camera feed, drawn inside the viewfinder under the reticle. */
+  camera?: ReactNode;
+};
+
+export type OfflineBannerProps = ReferenceOfflineBannerProps;
+
+export type QuickIncidentSheetProps = ReferenceQuickIncidentSheetProps & {
+  onSelect?: (label: string) => void;
+};
+
+export type ChecklistRunnerProps = ReferenceChecklistRunnerProps & {
+  onResult?: (code: string, result: "pass" | "fail") => void;
+  onAddPhoto?: (code: string) => void;
+  onNoteChange?: (code: string, note: string) => void;
+};
+
+export type ShiftCardProps = ReferenceShiftCardProps;
+
+export type DaySheetViewProps = ReferenceDaySheetViewProps & {
+  onCall?: (name: string) => void;
+  onMessage?: (name: string) => void;
+};
+
+export type SignaturePadProps = ReferenceSignaturePadProps & {
+  /** A PNG data URL of the signature, or null after Clear. */
+  onChange?: (signature: string | null) => void;
+};
+
+export type PhotoCaptureProps = ReferencePhotoCaptureProps & {
+  onCapture?: () => void;
+  onAnnotate?: () => void;
+  onDone?: () => void;
+  camera?: ReactNode;
+};
+
+export type LiveActivityProps = ReferenceLiveActivityProps & {
+  /** Break, or End Break while on break. */
+  onToggleBreak?: () => void;
+  onClockOut?: () => void;
+};
+
+export type ForceUpdateScreenProps = ReferenceForceUpdateScreenProps & {
+  onUpdate?: () => void;
+};
+
+export type SyncConflictSheetProps = ReferenceSyncConflictSheetProps & {
+  onKeep?: (choice: "mine" | "theirs") => void;
+};

package/src/Compass/DaySheetView.tsx

@@ -0,0 +1,104 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { IconButton } from "../Button/Button.tsx";
+import { Tag } from "../Chips/Chips.tsx";
+import { Avatar } from "../Avatar/Avatar.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { TL_CATEGORY } from "../Charts/categories.ts";
+import { Phone } from "./Compass.shared.tsx";
+import { type DaySheetViewProps } from "./Compass.types.ts";
+
+/**
+ * The day sheet: schedule with the current entry marked, and contacts with call and message. `dayTypes` names what
+ * the day is (B4), as text with an icon and a categorical swatch.
+ */
+export function DaySheetView({
+  frame,
+  date,
+  title,
+  venue,
+  entries,
+  contacts,
+  dayTypes = [],
+  onCall,
+  onMessage,
+}: DaySheetViewProps): ReactElement {
+  const t = useT();
+  return (
+    <Phone frame={frame}>
+      <div className="flex flex-col gap-16 p-16">
+        <header className="flex flex-col gap-2">
+          <span className="text-text-secondary">{date}</span>
+          <strong className="text-heading-20 font-semibold">{title}</strong>
+          <span className="text-text-secondary">{venue}</span>
+          {dayTypes.length > 0 ? (
+            <ul
+              className="m-0 flex list-none flex-wrap gap-4 p-0"
+              aria-label={t("daysheet.dayTypes")}
+            >
+              {dayTypes.map((d) => (
+                <li
+                  key={d.label}
+                  className="inline-flex items-center gap-4 rounded-chip bg-bg-surface px-6 text-text-12"
+                >
+                  <span
+                    aria-hidden="true"
+                    className={cx(
+                      "inline-block size-(--space-8) rounded-mark",
+                      TL_CATEGORY[d.category],
+                    )}
+                  />
+                  {d.icon ? <Icon name={d.icon} size={12} /> : null}
+                  {d.label}
+                </li>
+              ))}
+            </ul>
+          ) : null}
+        </header>
+        <ol className="m-0 p-0 list-none">
+          {entries.map((e, i) => (
+            <li
+              key={i}
+              aria-current={e.now ? "time" : undefined}
+              className={cx(
+                "grid grid-cols-[var(--ui-daysheet-time)_1fr_auto] items-center min-h-touch-min border-b border-border-subtle",
+                e.now && "font-semibold",
+              )}
+            >
+              <span className="text-text-secondary tabular-nums">{e.time}</span>
+              <span>{e.label}</span>
+              {e.now ? <Tag tone="accent">{t("daysheet.now")}</Tag> : null}
+            </li>
+          ))}
+        </ol>
+        <section className="flex flex-col">
+          <h4 className="m-0 text-text-12 font-medium text-text-secondary">
+            {t("daysheet.contacts")}
+          </h4>
+          {contacts.map((c) => (
+            <div key={c.name} className="flex items-center gap-8 py-6">
+              <Avatar name={c.name} />
+              <div className="flex flex-col flex-1">
+                <strong>{c.name}</strong>
+                <span className="text-text-secondary">{c.role}</span>
+              </div>
+              <IconButton
+                icon="Phone"
+                variant="secondary"
+                label={t("contact.call", { name: c.name })}
+                onClick={() => onCall?.(c.name)}
+              />
+              <IconButton
+                icon="MessageSquare"
+                variant="secondary"
+                label={t("contact.message", { name: c.name })}
+                onClick={() => onMessage?.(c.name)}
+              />
+            </div>
+          ))}
+        </section>
+      </div>
+    </Phone>
+  );
+}

package/src/Compass/ForceUpdateScreen.tsx

@@ -0,0 +1,29 @@
+import { type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { Phone, blockClass } from "./Compass.shared.tsx";
+import { type ForceUpdateScreenProps } from "./Compass.types.ts";
+
+/** Blocks the app below the forced minimum version (Section 5.1) until the person updates. */
+export function ForceUpdateScreen({
+  frame,
+  message,
+  version,
+  onUpdate,
+}: ForceUpdateScreenProps): ReactElement {
+  const t = useT();
+  return (
+    <Phone frame={frame} tall>
+      <div className="flex flex-1 flex-col items-center justify-center gap-12 px-24 py-32 text-center">
+        <Icon name="Smartphone" size={28} className="text-text-secondary" />
+        <strong className="text-heading-20 font-semibold">{t("update.title")}</strong>
+        <p className="m-0 text-text-secondary">{message}</p>
+        <span className="font-mono text-mono-12 text-text-secondary">{version}</span>
+        <Button variant="primary" size="lg" className={blockClass} onClick={onUpdate}>
+          {t("update.action")}
+        </Button>
+      </div>
+    </Phone>
+  );
+}