@multiplatform.one/components 7.78.0 → 7.79.0

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>
+  );
+}

package/src/MachineLiteral/MachineLiteral.spec.tsx

@@ -0,0 +1,86 @@
+/**
+ * LC-221 MACHINE-LITERAL: the literal renders byte for byte in $mono, never
+ * re-cased or cut; the reading shows when a formatter derives one; the copy
+ * glyph writes the literal itself.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, fireEvent, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { resetFeedback } from "../feedback/store";
+import { resetToasts } from "../Toast/store";
+import { MachineLiteral, type MachineLiteralProps } from "./index";
+import meta, { Default, Literals } from "./MachineLiteral.stories";
+
+const writeText = vi.fn();
+
+beforeEach(() => {
+  writeText.mockReset();
+  writeText.mockResolvedValue(undefined);
+  vi.stubGlobal("navigator", {
+    ...(typeof navigator !== "undefined" ? navigator : {}),
+    clipboard: { writeText },
+  });
+  resetToasts();
+  resetFeedback();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+  resetToasts();
+  resetFeedback();
+});
+
+const digest = "sha256:9F86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08";
+
+function literalOf(container: HTMLElement) {
+  return container.querySelector("[data-machine-literal]") as HTMLElement;
+}
+
+describe("MachineLiteral (LC-221)", () => {
+  it("renders the literal byte for byte in the mono voice, uncut", () => {
+    const { container } = renderWithProviders(<MachineLiteral value={digest} label="digest" />);
+    const literal = literalOf(container);
+    expect(literal.textContent).toBe(digest);
+    expect(literal.className + (literal.getAttribute("style") ?? "")).toMatch(/mono/i);
+    expect(literal.textContent).not.toContain("…");
+  });
+
+  it("the copy glyph writes the literal and is named for it", async () => {
+    const { container } = renderWithProviders(<MachineLiteral value={digest} label="digest" />);
+    const copy = container.querySelector("[aria-label='Copy digest']") as HTMLElement;
+    expect(copy).toBeTruthy();
+    expect(copy.textContent?.trim()).toBe("");
+    fireEvent.click(copy);
+    await waitFor(() => expect(writeText).toHaveBeenCalledWith(digest));
+  });
+
+  it("shows the reading beside the literal only when the formatter derives one", () => {
+    const reading = (cron: string) => (cron === "0 2 * * *" ? "daily at 02:00" : undefined);
+    const daily = renderWithProviders(<MachineLiteral value="0 2 * * *" reading={reading} />);
+    expect(daily.container.querySelector("[data-machine-reading]")?.textContent).toBe(
+      "daily at 02:00",
+    );
+    expect(literalOf(daily.container).textContent).toBe("0 2 * * *");
+    daily.unmount();
+
+    const odd = renderWithProviders(<MachineLiteral value="*/7 3 * * 1" reading={reading} />);
+    expect(odd.container.querySelector("[data-machine-reading]")).toBeNull();
+    expect(literalOf(odd.container).textContent).toBe("*/7 3 * * 1");
+  });
+
+  it("the stories mount: Main reads the cron, Literals keep each literal verbatim", () => {
+    expect(meta.title).toBe("Components/MachineLiteral");
+    const main = renderWithProviders(<MachineLiteral {...(Default.args as MachineLiteralProps)} />);
+    expect(main.container.querySelector("[data-machine-reading]")?.textContent).toBe(
+      "daily at 02:00",
+    );
+    main.unmount();
+    const all = renderWithProviders(<>{Literals.render?.({} as never, {} as never)}</>);
+    const values = [...all.container.querySelectorAll("[data-machine-literal]")].map(
+      (node) => node.textContent,
+    );
+    expect(values).toContain("ERR_TLS_CERT_ALTNAME_INVALID");
+    expect(values).toContain("SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8");
+  });
+});

package/src/MachineLiteral/MachineLiteral.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { YStack } from "tamagui";
+import { MachineLiteral } from "./index";
+
+const meta: Meta<typeof MachineLiteral> = {
+  title: "Components/MachineLiteral",
+  component: MachineLiteral,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "A machine literal in display (LC-221): verbatim in $mono, its human reading beside it, and a bare copy glyph that writes the literal byte for byte. In a field, use CopyField.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof MachineLiteral>;
+
+const cronReading = (cron: string) => (cron === "0 2 * * *" ? "daily at 02:00" : undefined);
+
+export const Default: Story = {
+  name: "Main",
+  args: { value: "0 2 * * *", reading: cronReading, label: "cron expression" },
+};
+
+export const Literals: Story = {
+  render: () => (
+    <YStack gap="$3">
+      <MachineLiteral value="0 2 * * *" reading={cronReading} label="cron expression" />
+      <MachineLiteral
+        value="sha256:9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08"
+        label="digest"
+      />
+      <MachineLiteral
+        value="SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8"
+        label="fingerprint"
+      />
+      <MachineLiteral value="ERR_TLS_CERT_ALTNAME_INVALID" label="error code" />
+    </YStack>
+  ),
+};

package/src/MachineLiteral/index.tsx

@@ -0,0 +1,75 @@
+/**
+ * MachineLiteral — a cron expression, digest, fingerprint, error code or key
+ * id in display (LC-221). The literal renders verbatim in `$mono`, never
+ * re-cased or cut; its human reading sits beside it when one is given or
+ * derived; a bare copy glyph (LC-176) writes the literal byte for byte. In a
+ * field, the same literal is a CopyField.
+ */
+import { CopyIcon } from "@phosphor-icons/react";
+import { Button } from "@multiplatform.one/forms";
+import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { Text, XStack, YStack, type XStackProps } from "tamagui";
+import { NotifyRegion } from "../feedback/NotifyHost";
+import { useCopyFeedback } from "../feedback/copy";
+import { useTranslation } from "../shared/i18n";
+import { withInterp } from "../shared/t";
+
+export interface MachineLiteralProps extends Omit<XStackProps, "children"> {
+  /** The literal, shown and copied exactly as given. */
+  value: string;
+  /** Its human reading, or a formatter that derives one ("daily at 02:00"). */
+  reading?: string | ((value: string) => string | null | undefined);
+  /** What the literal is, for the copy action's name ("cron expression"). */
+  label?: string;
+  /** False drops the copy action (default true). */
+  copyable?: boolean;
+}
+
+export function MachineLiteral({
+  value,
+  reading,
+  label,
+  copyable = true,
+  ...rowProps
+}: MachineLiteralProps) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs({ component: "MachineLiteral" });
+  const { region, copy } = useCopyFeedback();
+  const readingText = typeof reading === "function" ? reading(value) : reading;
+  const copyLabel = label ? withInterp(t("Copy {{label}}", { label }), { label }) : t("Copy");
+  return (
+    <YStack>
+      <XStack alignItems="center" {...knobProps.gapSm} flexWrap="wrap" {...rowProps}>
+        <Text
+          {...knobProps.body}
+          fontFamily="$mono"
+          letterSpacing={0}
+          color="$color12"
+          selectable
+          userSelect="text"
+          data-machine-literal=""
+        >
+          {value}
+        </Text>
+        {readingText ? (
+          <Text {...knobProps.body} {...knobProps.textRole.meta} data-machine-reading="">
+            {readingText}
+          </Text>
+        ) : null}
+        {copyable ? (
+          <Button
+            chromeless
+            size={knobProps.sizeToken}
+            icon={CopyIcon}
+            aria-label={copyLabel}
+            onPress={() => {
+              void copy(value);
+            }}
+            data-machine-copy=""
+          />
+        ) : null}
+      </XStack>
+      {copyable ? <NotifyRegion scope="field" region={region} size="$3" /> : null}
+    </YStack>
+  );
+}

package/src/Material/blur.native.spec.tsx

@@ -0,0 +1,135 @@
+/**
+ * The material's native blur (FZ-8099): expo-blur when the binary carries it,
+ * the theme fill when it does not, so an OTA never crashes an older build.
+ */
+import { TestProviders, renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, renderHook, screen } from "@testing-library/react";
+import { readFileSync, readdirSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  type BlurSources,
+  type MaterialBlurView,
+  blurNativeModule,
+  blurTintFor,
+  materialBlurTint,
+  resolveBlurView,
+} from "./blur.native";
+import { Material, useMaterial } from "./index";
+
+const blurState = vi.hoisted(() => ({ present: false }));
+
+vi.mock("@multiplatform.one/platform", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@multiplatform.one/platform")>()),
+  isWeb: false,
+  isNative: true,
+}));
+
+vi.mock("./blur", () => ({
+  useMaterialBlur: () =>
+    blurState.present ? { BlurView: () => null, tint: "systemChromeMaterialLight" } : null,
+  MaterialBlurFill: ({ radius }: { radius?: number }) =>
+    blurState.present ? <span data-testid="material-blur" data-radius={radius} /> : null,
+}));
+
+afterEach(() => {
+  cleanup();
+  blurState.present = false;
+});
+
+const FakeBlurView: MaterialBlurView = () => null;
+
+function sources(nativeModule: unknown, blur: () => { BlurView?: MaterialBlurView }): BlurSources {
+  return { core: () => ({ requireOptionalNativeModule: () => nativeModule }), blur };
+}
+
+describe("native blur detection", () => {
+  it("draws expo-blur's view on iOS when the binary registers ExpoBlur", () => {
+    const probe = vi.fn((name: string) => (name === blurNativeModule ? {} : null));
+    const view = resolveBlurView(
+      {
+        core: () => ({ requireOptionalNativeModule: probe }),
+        blur: () => ({ BlurView: FakeBlurView }),
+      },
+      "ios",
+    );
+    expect(view).toBe(FakeBlurView);
+    expect(probe).toHaveBeenCalledWith("ExpoBlur");
+  });
+
+  it("never requires expo-blur on a binary without its native module", () => {
+    const blur = vi.fn(() => ({ BlurView: FakeBlurView }));
+    expect(resolveBlurView(sources(null, blur), "ios")).toBeNull();
+    expect(blur).not.toHaveBeenCalled();
+  });
+
+  it("falls back when expo-modules-core or expo-blur cannot load", () => {
+    const throws = () => {
+      throw new Error("Cannot find module");
+    };
+    expect(
+      resolveBlurView({ core: throws, blur: () => ({ BlurView: FakeBlurView }) }, "ios"),
+    ).toBeNull();
+    expect(resolveBlurView(sources({}, throws), "ios")).toBeNull();
+  });
+
+  it("keeps the fill on Android, where expo-blur needs a BlurTargetView to blur", () => {
+    const blur = vi.fn(() => ({ BlurView: FakeBlurView }));
+    expect(resolveBlurView(sources({}, blur), "android")).toBeNull();
+    expect(blur).not.toHaveBeenCalled();
+  });
+
+  it("picks the HIG chrome material per colour scheme", () => {
+    expect(blurTintFor("light")).toBe(materialBlurTint.light);
+    expect(blurTintFor("light_accent")).toBe("systemChromeMaterialLight");
+    expect(blurTintFor("dark")).toBe(materialBlurTint.dark);
+    expect(blurTintFor("dark_accent")).toBe("systemChromeMaterialDark");
+  });
+
+  it("probes the name expo-blur registers its view under", () => {
+    const require = createRequire(import.meta.url);
+    const build = join(dirname(require.resolve("expo-blur/package.json")), "build");
+    const names = new Set<string>();
+    for (const file of readdirSync(build).filter((name) => name.endsWith(".js"))) {
+      const source = readFileSync(join(build, file), "utf8");
+      for (const match of source.matchAll(/requireNativeViewManager\(\s*['"]([^'"]+)['"]/g)) {
+        names.add(match[1]!);
+      }
+    }
+    expect([...names]).toEqual([blurNativeModule]);
+  });
+});
+
+describe("Material on native", () => {
+  it("lets the system material paint when the binary has expo-blur", () => {
+    blurState.present = true;
+    const { result } = renderHook(() => useMaterial(), { wrapper: TestProviders });
+    expect(result.current.backgroundColor).toBe("transparent");
+    expect(result.current).toMatchObject({ borderColor: "$borderColor", shadowColor: "$shadow3" });
+    expect(result.current).not.toHaveProperty("backdropFilter");
+  });
+
+  it("keeps the 94% chrome fill when the binary has no expo-blur", () => {
+    const { result } = renderHook(() => useMaterial(), { wrapper: TestProviders });
+    expect(result.current.backgroundColor).toMatch(/^rgba\(\d+, \d+, \d+, 0\.94\)$/);
+  });
+
+  it("puts the blur behind its content, clipped to its radius", () => {
+    blurState.present = true;
+    renderWithProviders(
+      <Material testID="material" borderRadius={20}>
+        <span>inside</span>
+      </Material>,
+    );
+    const material = screen.getByTestId("material");
+    expect(material.firstElementChild?.getAttribute("data-testid")).toBe("material-blur");
+    expect(screen.getByTestId("material-blur").getAttribute("data-radius")).toBe("20");
+    expect(material.textContent).toBe("inside");
+  });
+
+  it("draws no blur view without expo-blur", () => {
+    renderWithProviders(<Material testID="material">inside</Material>);
+    expect(screen.queryByTestId("material-blur")).toBeNull();
+  });
+});

package/src/Material/blur.native.tsx

@@ -0,0 +1,93 @@
+/**
+ * The material's native blur (FZ-8099): expo-blur's BlurView drawing the iOS
+ * system chrome material, when the app binary carries it.
+ *
+ * expo-blur is native code, so it reaches a phone only through a new binary.
+ * An OTA carries this JS to every binary at the same runtimeVersion, including
+ * the ones built before expo-blur was added, so the view is feature-detected
+ * at runtime: `requireOptionalNativeModule("ExpoBlur")` answers null on those
+ * binaries and the material keeps its theme fill. The probe runs before the
+ * `require`, the same order as the picker and maps loaders, because a module
+ * factory that throws is a fatal LogBox in dev even when the caller catches.
+ *
+ * iOS only. On Android expo-blur blurs only content wrapped in a
+ * BlurTargetView it is given a ref to; without one it draws a flat
+ * translucent view, which is what the theme fill already is.
+ */
+import { isDarkThemeName } from "@multiplatform.one/theme";
+import type { ComponentType } from "react";
+import { Platform, StyleSheet, type ViewStyle } from "react-native";
+import { useThemeName } from "tamagui";
+
+/** The name expo-blur registers its native module and view under. */
+export const blurNativeModule = "ExpoBlur";
+
+/** The HIG material a tab bar or toolbar uses, per colour scheme. */
+export const materialBlurTint = {
+  light: "systemChromeMaterialLight",
+  dark: "systemChromeMaterialDark",
+} as const;
+
+export function blurTintFor(themeName: string | undefined): string {
+  return isDarkThemeName(themeName) ? materialBlurTint.dark : materialBlurTint.light;
+}
+
+export type MaterialBlurView = ComponentType<{
+  tint?: string;
+  intensity?: number;
+  pointerEvents?: "none";
+  style?: ViewStyle | ViewStyle[];
+}>;
+
+export interface BlurSources {
+  core: () => { requireOptionalNativeModule?: (name: string) => unknown };
+  blur: () => { BlurView?: MaterialBlurView };
+}
+
+const appSources: BlurSources = {
+  core: () => require("expo-modules-core"),
+  blur: () => require("expo-blur"),
+};
+
+/** The BlurView, or null when this platform or binary cannot draw it. */
+export function resolveBlurView(sources: BlurSources, os: string): MaterialBlurView | null {
+  if (os !== "ios") return null;
+  try {
+    if (sources.core().requireOptionalNativeModule?.(blurNativeModule) == null) return null;
+    return sources.blur().BlurView ?? null;
+  } catch {
+    return null;
+  }
+}
+
+let cached: MaterialBlurView | null | undefined;
+
+function loadBlurView(): MaterialBlurView | null {
+  if (cached === undefined) cached = resolveBlurView(appSources, Platform.OS);
+  return cached;
+}
+
+export function useMaterialBlur(): { BlurView: MaterialBlurView; tint: string } | null {
+  const themeName = useThemeName() as string | undefined;
+  const BlurView = loadBlurView();
+  if (!BlurView) return null;
+  return { BlurView, tint: blurTintFor(themeName) };
+}
+
+/**
+ * The blur behind a material's content: fills its parent inside the hairline
+ * and clips to the parent's corner radius, so the parent keeps its shadow.
+ */
+export function MaterialBlurFill({ radius = 0 }: { radius?: number }) {
+  const blur = useMaterialBlur();
+  if (!blur) return null;
+  const { BlurView, tint } = blur;
+  return (
+    <BlurView
+      tint={tint}
+      intensity={100}
+      pointerEvents="none"
+      style={[StyleSheet.absoluteFill, { borderRadius: radius, overflow: "hidden" }]}
+    />
+  );
+}

package/src/Material/blur.ts

@@ -0,0 +1,11 @@
+/**
+ * The material's native blur, web arm: the browser blurs through
+ * `backdropFilter`, so there is no blur view to draw.
+ */
+export function useMaterialBlur(): null {
+  return null;
+}
+
+export function MaterialBlurFill(_props: { radius?: number }): null {
+  return null;
+}

package/src/Material/index.tsx

@@ -8,13 +8,15 @@
  * The material is one theme token on every platform: the chrome surface
  * step one off the page (`$color2`, as the SystemBar paints it), shown
  * through at the material's opacity, with the hairline and the floating
- * shadow. Web blurs and saturates what is behind it. Native draws the same
- * token at a higher opacity, because React Native has no backdrop blur
- * without a native view in the app binary.
+ * shadow. Web blurs and saturates what is behind it. On iOS, a binary that
+ * carries expo-blur draws the system chrome material instead (FZ-8099,
+ * `blur.native.tsx`); any other native binary draws the token at a higher
+ * opacity, because React Native has no backdrop blur without that view.
  */
 import { hairlineWidth, normalizeToHex } from "@multiplatform.one/theme";
 import { isWeb } from "@multiplatform.one/platform";
 import { forwardRef } from "react";
+import { MaterialBlurFill, useMaterialBlur } from "./blur";
 import { type TamaguiElement, YStack, type YStackProps, useTheme } from "tamagui";
 
 export type MaterialThickness = "chrome";
@@ -45,10 +47,13 @@ export function translucent(color: string | undefined, opacity: number): string
 export function useMaterial(thickness: MaterialThickness = "chrome") {
   const theme = useTheme() as unknown as Record<string, { val?: unknown } | undefined>;
   const { base, blur } = materials[thickness];
+  const nativeBlur = useMaterialBlur();
   const resolved = theme[base.slice(1)]?.val;
   const color = typeof resolved === "string" ? resolved : undefined;
   return {
-    backgroundColor: translucent(color, materialOpacity(thickness)) ?? base,
+    backgroundColor: nativeBlur
+      ? "transparent"
+      : (translucent(color, materialOpacity(thickness)) ?? base),
     borderWidth: hairlineWidth,
     borderColor: "$borderColor",
     shadowColor: "$shadow3",
@@ -64,9 +69,16 @@ export interface MaterialProps extends YStackProps {
 }
 
 export const Material = forwardRef<TamaguiElement, MaterialProps>(function Material(
-  { thickness = "chrome", ...props },
+  { thickness = "chrome", children, ...props },
   ref,
 ) {
   const material = useMaterial(thickness);
-  return <YStack ref={ref} {...material} {...props} />;
+  return (
+    <YStack ref={ref} {...material} {...props}>
+      <MaterialBlurFill
+        radius={typeof props.borderRadius === "number" ? props.borderRadius : undefined}
+      />
+      {children}
+    </YStack>
+  );
 });

package/src/Meter/index.tsx

@@ -23,7 +23,6 @@ import {
   METER_TICK,
   METER_TRACK,
   METER_ZONE_PAINT,
-  UNKNOWN_VALUE,
   formatMeterValue,
   meterFillRatio,
   meterTrackHeightPx,
@@ -114,13 +113,16 @@ function tickLeftPercent(cut: number, min: number, max: number): number | null {
   return ((cut - min) / (max - min)) * 100;
 }
 
+/** LC-220: an unknown level is spoken as no reading, never as a zero or a bare dash. */
+export const NO_READING = "No reading";
+
 function defaultValueText(opts: {
   value?: number | null;
   visible: string;
   unit?: string;
   format?: MeterFormat;
 }): string {
-  if (opts.value == null || !Number.isFinite(opts.value)) return UNKNOWN_VALUE;
+  if (opts.value == null || !Number.isFinite(opts.value)) return NO_READING;
   if (opts.format === "percent") return opts.visible;
   if (opts.unit) return `${opts.visible} used`;
   return opts.visible;

package/src/SortableList/index.tsx

@@ -23,6 +23,8 @@ import { Text } from "../Text";
 export { SortableHandle, SortableHandleWell } from "./SortableHandle";
 export { SortableSessionProvider, useSortableRows } from "./useSortableRows";
 export type { SortableSession, UseSortableRowsOptions } from "./useSortableRows";
+export { applyUserOrder, useUserOrder } from "./useUserOrder";
+export type { UseUserOrderOptions, UserOrderStorage } from "./useUserOrder";
 
 export type SortableDisabledStyle = "keepLabel" | "dimWhole";