@multiplatform.one/components 7.78.0 → 7.80.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "7.78.0",
+  "version": "7.80.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.80.0",
+    "@multiplatform.one/i18n": "^7.80.0",
+    "@multiplatform.one/platform": "^7.80.0",
+    "@multiplatform.one/router": "^7.80.0",
+    "@multiplatform.one/theme": "^7.80.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.80.0",
+    "@multiplatform.one/storybook": "7.80.0",
+    "@multiplatform.one/test-utils": "7.80.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>
+  ),
+};

package/src/ElapsedProgress/index.tsx

@@ -0,0 +1,89 @@
+/**
+ * ElapsedProgress — long work shows how long (LC-185). Determinate progress
+ * draws the bar; otherwise the indeterminate spinner gets the elapsed time
+ * beside it once the wait outlasts `threshold`. Reduced motion stops the
+ * spinner (the Spinner's own CSS), never the count.
+ */
+import { Progress, Spinner } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { useEffect, useState } from "react";
+import { Text, XStack, YStack, type XStackProps } from "tamagui";
+import { useTranslation } from "../shared/i18n";
+import { withInterp } from "../shared/t";
+
+export interface ElapsedProgressProps extends Omit<XStackProps, "children"> {
+  /** When the work started (epoch ms or a Date). */
+  startedAt: number | Date;
+  /** Determinate share done, 0 to 1; omit when the work can't say. */
+  progress?: number | null;
+  /** How long the spinner stays bare before the elapsed time joins it (ms, default 3000). */
+  threshold?: number;
+  /** What is running, for the accessible name ("Build"). */
+  label?: string;
+}
+
+/** m:ss under an hour, h:mm:ss past it. */
+export function formatElapsed(ms: number): string {
+  const total = Math.max(0, Math.floor(ms / 1000));
+  const hours = Math.floor(total / 3600);
+  const minutes = Math.floor((total % 3600) / 60);
+  const seconds = String(total % 60).padStart(2, "0");
+  return hours > 0
+    ? `${hours}:${String(minutes).padStart(2, "0")}:${seconds}`
+    : `${minutes}:${seconds}`;
+}
+
+export function ElapsedProgress({
+  startedAt,
+  progress,
+  threshold = 3000,
+  label,
+  ...rowProps
+}: ElapsedProgressProps) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs({ component: "ElapsedProgress" });
+  const start = typeof startedAt === "number" ? startedAt : startedAt.getTime();
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, []);
+  const elapsed = Math.max(0, now - start);
+  const determinate = progress != null && Number.isFinite(progress);
+  const showElapsed = determinate || elapsed >= threshold;
+  const time = formatElapsed(elapsed);
+  const name = label
+    ? withInterp(t("{{label}}, running for {{time}}", { label, time }), { label, time })
+    : withInterp(t("Running for {{time}}", { time }), { time });
+  return (
+    <XStack
+      alignItems="center"
+      {...knobProps.gapSm}
+      aria-label={name}
+      accessibilityLabel={name}
+      data-elapsed-state={determinate ? "determinate" : showElapsed ? "elapsed" : "short"}
+      {...rowProps}
+    >
+      {determinate ? (
+        <YStack flex={1}>
+          <Progress
+            value={Math.round(Math.min(1, Math.max(0, progress as number)) * 100)}
+            max={100}
+          />
+        </YStack>
+      ) : (
+        <Spinner size="small" />
+      )}
+      {showElapsed ? (
+        <Text
+          {...knobProps.body}
+          {...knobProps.textRole.meta}
+          {...knobProps.typography.tabular}
+          data-elapsed=""
+        >
+          {time}
+        </Text>
+      ) : null}
+    </XStack>
+  );
+}