@multiplatform.one/components 7.78.0 → 7.79.0

package/dist/jsx/views/sameNameScope.native.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var sameNameScope_exports = {};
+__export(sameNameScope_exports, {
+  scopedNames: () => scopedNames
+});
+module.exports = __toCommonJS(sameNameScope_exports);
+function scopedNames(items, nameOf, scopeOf) {
+  var counts = /* @__PURE__ */new Map();
+  var _iteratorNormalCompletion = true,
+    _didIteratorError = false,
+    _iteratorError = void 0;
+  try {
+    for (var _iterator = items[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var item = _step.value;
+      var _counts_get;
+      var name = nameOf(item);
+      counts.set(name, ((_counts_get = counts.get(name)) !== null && _counts_get !== void 0 ? _counts_get : 0) + 1);
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return != null) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+  return items.map(function (item2) {
+    var _counts_get2;
+    var name2 = nameOf(item2);
+    var scope = scopeOf(item2);
+    return ((_counts_get2 = counts.get(name2)) !== null && _counts_get2 !== void 0 ? _counts_get2 : 0) > 1 && scope ? `${name2} (${scope})` : name2;
+  });
+}
+//# sourceMappingURL=sameNameScope.native.js.map

package/dist/jsx/views/sameNameScope.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key"],"sources":["../../../src/views/sameNameScope.ts"],"sourcesContent":[null],"mappings":"AAMO,YAAS;;AAKd,IAAAA,SAAM,GAAAC,MAAS,CAAAC,cAAI;AACnB,IAAAC,gBAAW,GAAQF,MAAO,CAAAG,wBAAA;AACxB,IAAAC,iBAAa,GAAOJ,MAAI,CAAAK,mBAAA;AACxB,IAAAC,YAAW,GAAAN,MAAO,CAAAO,SAAW,CAAAC,cAAe;AAAA,IAC9CC,QAAA,GAAAA,CAAAC,MAAA,EAAAC,GAAA;EACA,SAAOC,IAAM,IAAID,GAAC,EAChBZ,SAAM,CAAAW,MAAO,EAAAE,IAAO,EAAI;IAAAC,GAAA,EAAAF,GAAA,CAAAC,IAAA;IAAAE,UAAA;EAAA;AACxB;AACA,IAAAC,WAAQ,GAAAA,CAAOC,EAAA,EAAIC,IAAI,EAAAC,MAAK,EAAKC,IAAA,KAAK;EACxC,IAACF,IAAA,WAAAA,IAAA,wBAAAA,IAAA;IACH,SAAAG,GAAA,IAAAhB,iBAAA,CAAAa,IAAA,G","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "7.78.0",
+  "version": "7.79.0",
   "description": "multiplatform.one ui components",
   "keywords": [
     "components",
@@ -58,11 +58,11 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/forms": "^7.78.0",
-    "@multiplatform.one/i18n": "^7.78.0",
-    "@multiplatform.one/platform": "^7.78.0",
-    "@multiplatform.one/router": "^7.78.0",
-    "@multiplatform.one/theme": "^7.78.0",
+    "@multiplatform.one/forms": "^7.79.0",
+    "@multiplatform.one/i18n": "^7.79.0",
+    "@multiplatform.one/platform": "^7.79.0",
+    "@multiplatform.one/router": "^7.79.0",
+    "@multiplatform.one/theme": "^7.79.0",
     "@phosphor-icons/react": "^2.1.10",
     "@shopify/flash-list": "^2.3.1",
     "@tamagui/colors": "2.7.6",
@@ -89,9 +89,9 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.78.0",
-    "@multiplatform.one/storybook": "7.78.0",
-    "@multiplatform.one/test-utils": "7.78.0",
+    "@multiplatform.one/config": "7.79.0",
+    "@multiplatform.one/storybook": "7.79.0",
+    "@multiplatform.one/test-utils": "7.79.0",
     "@tamagui/build": "2.7.6",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
@@ -99,6 +99,7 @@
     "@types/d3-shape": "^3.2.0",
     "@vitejs/plugin-react": "^6.1.2",
     "@vitest/coverage-v8": "^4.1.5",
+    "expo-blur": "~55.0.18",
     "expo-video": "~55.0.19",
     "matchmedia-polyfill": "^0.3.2",
     "moti": "^0.30.0",
@@ -115,6 +116,8 @@
     "@mdx-js/react": "^3.1.1",
     "@vxrn/color-scheme": "^1.0.0",
     "expo-asset": "*",
+    "expo-blur": "*",
+    "expo-modules-core": "*",
     "expo-video": "*",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "8.0.4",
@@ -149,6 +152,12 @@
     "expo-asset": {
       "optional": true
     },
+    "expo-blur": {
+      "optional": true
+    },
+    "expo-modules-core": {
+      "optional": true
+    },
     "expo-video": {
       "optional": true
     },

package/src/Diff/Diff.spec.tsx

@@ -0,0 +1,105 @@
+/**
+ * LC-190 CHANGE-POLARITY: a change view speaks insert and delete. The Main
+ * story marks added content <ins> and removed content <del>, says "added" and
+ * "removed" to assistive tech, puts the counts in the region's name, keeps the
+ * +/− gutter out of selection and out of the accessibility tree, and paints
+ * the success and error washes with neutral ink, never a border or solid.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import meta, { Default, NoChanges, NoReading } from "./Diff.stories";
+import { Diff, countDiff, diffLines, type DiffProps } from "./index";
+
+afterEach(cleanup);
+
+function mount(args: unknown) {
+  return renderWithProviders(<Diff {...(args as DiffProps)} />);
+}
+
+describe("diffLines", () => {
+  it("keeps common lines and orders a hunk removed before added", () => {
+    const lines = diffLines("a\nb\nc", "a\nB\nc\nd");
+    expect(lines.map((line) => `${line.kind}:${line.text}`)).toEqual([
+      "same:a",
+      "removed:b",
+      "added:B",
+      "same:c",
+      "added:d",
+    ]);
+    expect(countDiff(lines)).toEqual({ added: 2, removed: 1 });
+    expect(lines[2]).toMatchObject({ after: 2 });
+    expect(lines[1]).toMatchObject({ before: 2 });
+  });
+});
+
+describe("Diff (LC-190)", () => {
+  it("declares the Components/Diff title", () => {
+    expect(meta.title).toBe("Components/Diff");
+  });
+
+  it("marks content with ins and del and the hidden polarity words", () => {
+    const { container } = mount(Default.args);
+    const ins = [...container.querySelectorAll("ins")];
+    const del = [...container.querySelectorAll("del")];
+    expect(ins.map((node) => node.textContent)).toEqual([
+      "added:   listen 443 ssl;",
+      "added:   http2 on;",
+    ]);
+    expect(del.map((node) => node.textContent)).toEqual(["removed:   listen 80;"]);
+  });
+
+  it("names the region with the counts", () => {
+    const { container } = mount(Default.args);
+    const region = container.querySelector("[role='region']");
+    expect(region?.getAttribute("aria-label")).toBe("nginx.conf: 2 added, 1 removed");
+  });
+
+  it("keeps the gutter out of selection and out of the accessibility tree", () => {
+    const { container } = mount(Default.args);
+    const gutters = [...container.querySelectorAll("[data-diff-gutter]")] as HTMLElement[];
+    expect(gutters.length).toBe(6);
+    for (const gutter of gutters) {
+      expect(gutter.getAttribute("aria-hidden")).toBe("true");
+      const inline = gutter.getAttribute("style") ?? "";
+      const unselectable =
+        /(?:^|\s)_(?:userSelect|ussl|ussel)-none(?:\s|$)/.test(gutter.className) ||
+        /user-select:\s*none/.test(inline) ||
+        getComputedStyle(gutter).userSelect === "none";
+      expect(unselectable, `${gutter.className} | ${inline}`).toBe(true);
+    }
+    const glyphs = gutters.map((gutter) => gutter.textContent?.slice(-1));
+    expect(glyphs.filter((glyph) => glyph === "+")).toHaveLength(2);
+    expect(glyphs.filter((glyph) => glyph === "−")).toHaveLength(1);
+  });
+
+  it("washes added and removed rows, neutral ink, no border or solid fill", () => {
+    const { container } = mount(Default.args);
+    for (const kind of ["added", "removed"] as const) {
+      for (const row of container.querySelectorAll(`[data-diff-line='${kind}']`)) {
+        const style = getComputedStyle(row as HTMLElement);
+        expect(style.borderTopWidth || "0px").toMatch(/^0/);
+        expect(row.className).not.toMatch(/_bw-|_btw-/);
+      }
+    }
+    expect(container.querySelectorAll("[data-diff-line='same']")).toHaveLength(3);
+  });
+
+  it("identical sides draw No changes, not a zero count", () => {
+    const { container } = mount(NoChanges.args);
+    expect(container.textContent).toContain("No changes");
+    expect(container.textContent).not.toMatch(/\b0\b/);
+    expect(container.querySelector("[role='region']")?.getAttribute("aria-label")).toBe(
+      "nginx.conf: no changes",
+    );
+  });
+
+  it("no reading draws the em dash and says so", () => {
+    const { container } = mount(NoReading.args);
+    expect(container.querySelector("[data-diff-empty='unknown']")?.textContent).toBe("—");
+    expect(container.textContent).not.toMatch(/\b0\b/);
+    expect(container.querySelector("[role='region']")?.getAttribute("aria-label")).toBe(
+      "nginx.conf: no reading",
+    );
+  });
+});

package/src/Diff/Diff.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Diff } from "./index";
+
+const meta: Meta<typeof Diff> = {
+  title: "Components/Diff",
+  component: Diff,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "A change view (LC-190): added lines on the success wash, removed lines on the error wash, neutral ink, a +/− gutter that is never selected or read, <ins>/<del> with hidden polarity words on web, and the counts in the region's accessible name. No reading draws an em dash; identical sides draw No changes (LC-220).",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Diff>;
+
+export const Default: Story = {
+  name: "Main",
+  args: {
+    label: "nginx.conf",
+    before: "server {\n  listen 80;\n  root /srv/www;\n}",
+    after: "server {\n  listen 443 ssl;\n  root /srv/www;\n  http2 on;\n}",
+  },
+};
+
+export const NoChanges: Story = {
+  args: {
+    label: "nginx.conf",
+    before: "server {\n  listen 80;\n}",
+    after: "server {\n  listen 80;\n}",
+  },
+};
+
+export const NoReading: Story = {
+  args: {
+    label: "nginx.conf",
+    before: null,
+    after: null,
+  },
+};

package/src/Diff/diff.ts

@@ -0,0 +1,61 @@
+export type DiffLineKind = "added" | "removed" | "same";
+
+export interface DiffLine {
+  kind: DiffLineKind;
+  text: string;
+  /** 1-based line in the before text; absent on an added line. */
+  before?: number;
+  /** 1-based line in the after text; absent on a removed line. */
+  after?: number;
+}
+
+export interface DiffCounts {
+  added: number;
+  removed: number;
+}
+
+function splitLines(text: string): string[] {
+  return text === "" ? [] : text.replace(/\r\n/g, "\n").split("\n");
+}
+
+/** Line diff by longest common subsequence, removals before additions in a hunk. */
+export function diffLines(before: string, after: string): DiffLine[] {
+  const a = splitLines(before);
+  const b = splitLines(after);
+  const lcs: number[][] = Array.from({ length: a.length + 1 }, () =>
+    new Array<number>(b.length + 1).fill(0),
+  );
+  for (let i = a.length - 1; i >= 0; i -= 1) {
+    for (let j = b.length - 1; j >= 0; j -= 1) {
+      lcs[i]![j] =
+        a[i] === b[j] ? lcs[i + 1]![j + 1]! + 1 : Math.max(lcs[i + 1]![j]!, lcs[i]![j + 1]!);
+    }
+  }
+  const lines: DiffLine[] = [];
+  let i = 0;
+  let j = 0;
+  while (i < a.length || j < b.length) {
+    if (i < a.length && j < b.length && a[i] === b[j]) {
+      lines.push({ kind: "same", text: a[i]!, before: i + 1, after: j + 1 });
+      i += 1;
+      j += 1;
+    } else if (j >= b.length || (i < a.length && lcs[i + 1]![j]! >= lcs[i]![j + 1]!)) {
+      lines.push({ kind: "removed", text: a[i]!, before: i + 1 });
+      i += 1;
+    } else {
+      lines.push({ kind: "added", text: b[j]!, after: j + 1 });
+      j += 1;
+    }
+  }
+  return lines;
+}
+
+export function countDiff(lines: readonly DiffLine[]): DiffCounts {
+  let added = 0;
+  let removed = 0;
+  for (const line of lines) {
+    if (line.kind === "added") added += 1;
+    else if (line.kind === "removed") removed += 1;
+  }
+  return { added, removed };
+}

package/src/Diff/index.tsx

@@ -0,0 +1,145 @@
+/**
+ * Diff — a change view that speaks insert and delete (LC-190).
+ *
+ * Added lines sit on the success wash, removed lines on the error wash, both
+ * in neutral ink, with a +/− gutter glyph that is never selected or read.
+ * Web marks the content `<ins>`/`<del>` and prefixes the hidden words
+ * "added"/"removed"; native puts the same words in each row's label. The
+ * region's accessible name carries the counts.
+ *
+ * LC-220: no reading (either side missing) draws the em dash and says so;
+ * identical sides draw "No changes". Neither is a zero.
+ */
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useMemo } from "react";
+import { Text, XStack, YStack, isWeb, type YStackProps } from "tamagui";
+import { useTranslation } from "../shared/i18n";
+import { withInterp } from "../shared/t";
+import { countDiff, diffLines, type DiffLine } from "./diff";
+
+export { countDiff, diffLines } from "./diff";
+export type { DiffCounts, DiffLine, DiffLineKind } from "./diff";
+
+export interface DiffProps extends Omit<YStackProps, "children"> {
+  /** The text before the change; null or undefined is no reading. */
+  before?: string | null;
+  /** The text after the change; null or undefined is no reading. */
+  after?: string | null;
+  /** What changed, the head of the region's accessible name ("nginx.conf"). */
+  label: string;
+  /** Show before/after line numbers in the gutter (default true). */
+  lineNumbers?: boolean;
+}
+
+const unknownMark = "—";
+const glyphs = { added: "+", removed: "−", same: " " } as const;
+const washes = { added: "$green3", removed: "$red3", same: undefined } as const;
+const elements = { added: "ins", removed: "del", same: "span" } as const;
+
+const hiddenWord = isWeb
+  ? ({
+      position: "absolute",
+      width: 1,
+      height: 1,
+      overflow: "hidden",
+      whiteSpace: "nowrap",
+      opacity: 0,
+    } as const)
+  : undefined;
+
+export function Diff({ before, after, label, lineNumbers = true, ...frameProps }: DiffProps) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs({ component: "Diff" });
+  const known = before != null && after != null;
+  const lines = useMemo(
+    () => (known ? diffLines(before as string, after as string) : []),
+    [known, before, after],
+  );
+  const counts = countDiff(lines);
+  const changed = counts.added + counts.removed > 0;
+  const state = !known ? "unknown" : changed ? "changed" : "same";
+  const summary =
+    state === "unknown"
+      ? withInterp(t("{{label}}: no reading", { label }), { label })
+      : state === "same"
+        ? withInterp(t("{{label}}: no changes", { label }), { label })
+        : withInterp(t("{{label}}: {{added}} added, {{removed}} removed", { label, ...counts }), {
+            label,
+            ...counts,
+          });
+  const words = { added: t("added"), removed: t("removed") };
+
+  const mono = {
+    ...knobProps.body,
+    fontFamily: "$mono",
+    letterSpacing: 0,
+    color: "$color12",
+  } as const;
+
+  const row = (line: DiffLine, index: number) => {
+    const marked = line.kind !== "same";
+    return (
+      <XStack
+        key={index}
+        backgroundColor={washes[line.kind]}
+        data-diff-line={line.kind}
+        {...(!isWeb && marked
+          ? { accessible: true, accessibilityLabel: `${words[line.kind]}: ${line.text}` }
+          : null)}
+      >
+        <XStack
+          aria-hidden
+          userSelect="none"
+          flexShrink={0}
+          gap="$2"
+          paddingHorizontal="$2"
+          data-diff-gutter=""
+        >
+          {lineNumbers ? (
+            <>
+              <Text {...mono} color="$color11" minWidth="$2" textAlign="right">
+                {line.before ?? ""}
+              </Text>
+              <Text {...mono} color="$color11" minWidth="$2" textAlign="right">
+                {line.after ?? ""}
+              </Text>
+            </>
+          ) : null}
+          <Text {...mono}>{glyphs[line.kind]}</Text>
+        </XStack>
+        <Text
+          {...mono}
+          flex={1}
+          render={isWeb ? elements[line.kind] : undefined}
+          textDecorationLine="none"
+          {...(isWeb ? { whiteSpace: "pre-wrap" } : null)}
+        >
+          {marked && isWeb ? <Text style={hiddenWord}>{`${words[line.kind]}: `}</Text> : null}
+          {line.text}
+        </Text>
+      </XStack>
+    );
+  };
+
+  return (
+    <YStack
+      role="region"
+      aria-label={summary}
+      accessibilityLabel={summary}
+      overflow="hidden"
+      {...knobProps.borderRadius}
+      data-diff-state={state}
+      {...frameProps}
+    >
+      {state === "changed" ? (
+        lines.map(row)
+      ) : (
+        <XStack paddingHorizontal="$2" data-diff-empty={state}>
+          <Text {...mono} color="$color11">
+            {state === "unknown" ? unknownMark : t("No changes")}
+          </Text>
+        </XStack>
+      )}
+    </YStack>
+  );
+}

package/src/ElapsedProgress/ElapsedProgress.spec.tsx

@@ -0,0 +1,66 @@
+/**
+ * LC-185 ELAPSED-NOT-SPINNER: under a fake clock, a short wait is a bare
+ * spinner; past the threshold the elapsed time joins it and keeps counting;
+ * determinate work draws the bar.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { Default } from "./ElapsedProgress.stories";
+import { ElapsedProgress, formatElapsed } from "./index";
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date("2026-10-29T12:00:00Z"));
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+});
+
+function elapsedOf(container: HTMLElement) {
+  return container.querySelector("[data-elapsed]")?.textContent ?? null;
+}
+
+describe("ElapsedProgress (LC-185)", () => {
+  it("formats the length as m:ss, then h:mm:ss", () => {
+    expect(formatElapsed(4_000)).toBe("0:04");
+    expect(formatElapsed(65_000)).toBe("1:05");
+    expect(formatElapsed(2 * 3_600_000 + 4 * 60_000 + 9_000)).toBe("2:04:09");
+  });
+
+  it("a short wait is a bare spinner; past the threshold the time joins and counts", () => {
+    const { container } = renderWithProviders(
+      <ElapsedProgress startedAt={Date.now()} label="Sync" />,
+    );
+    expect(container.querySelector("[role='status']")).toBeTruthy();
+    expect(elapsedOf(container)).toBeNull();
+
+    act(() => {
+      vi.advanceTimersByTime(4_000);
+    });
+    expect(elapsedOf(container)).toBe("0:04");
+    act(() => {
+      vi.advanceTimersByTime(61_000);
+    });
+    expect(elapsedOf(container)).toBe("1:05");
+    expect(container.querySelector("[aria-label='Sync, running for 1:05']")).toBeTruthy();
+  });
+
+  it("the Main story, a minute in, shows the length beside the spinner", () => {
+    const { container } = renderWithProviders(<>{Default.render?.({} as never, {} as never)}</>);
+    expect(elapsedOf(container)).toBe("1:05");
+    expect(container.querySelector("[role='status']")).toBeTruthy();
+  });
+
+  it("determinate work draws the bar and the length, no spinner", () => {
+    const { container } = renderWithProviders(
+      <ElapsedProgress startedAt={Date.now() - 95_000} progress={0.42} label="Upload" />,
+    );
+    expect(container.querySelector("[data-elapsed-state='determinate']")).toBeTruthy();
+    expect(container.querySelector("[role='progressbar']")).toBeTruthy();
+    expect(container.querySelector(".mp1-spinner")).toBeNull();
+    expect(elapsedOf(container)).toBe("1:35");
+  });
+});

package/src/ElapsedProgress/ElapsedProgress.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { useState } from "react";
+import { YStack } from "tamagui";
+import { ElapsedProgress } from "./index";
+
+const meta: Meta<typeof ElapsedProgress> = {
+  title: "Components/ElapsedProgress",
+  component: ElapsedProgress,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Long work shows how long (LC-185). Determinate progress draws the bar beside the elapsed time; otherwise the spinner stands alone for the first few seconds and then the elapsed time joins it. Reduced motion stops the spinner, never the count.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof ElapsedProgress>;
+
+function Started({ agoMs, progress, label }: { agoMs: number; progress?: number; label?: string }) {
+  const [startedAt] = useState(() => Date.now() - agoMs);
+  return <ElapsedProgress startedAt={startedAt} progress={progress} label={label} />;
+}
+
+/** A sync that has run a minute and five seconds: spinner plus its length. */
+export const Default: Story = {
+  name: "Main",
+  render: () => <Started agoMs={65_000} label="Sync" />,
+};
+
+export const States: Story = {
+  render: () => (
+    <YStack gap="$4" maxWidth={360}>
+      <Started agoMs={0} label="Short wait" />
+      <Started agoMs={65_000} label="Sync" />
+      <Started agoMs={2 * 3_600_000 + 4 * 60_000} label="Build" />
+      <Started agoMs={95_000} progress={0.42} label="Upload" />
+    </YStack>
+  ),
+};