@multiplatform.one/components 7.78.0 → 7.79.0

package/src/SortableList/useUserOrder.spec.tsx

@@ -0,0 +1,110 @@
+/**
+ * LC-209 USER-ORDER: a hand-arranged collection keeps the user's order. A new
+ * item lands last with every other index unchanged, a data refresh that
+ * returns the source's own order changes nothing, and a reload reads the same
+ * arrangement back.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import { useState } from "react";
+import { afterEach, describe, expect, it } from "vitest";
+import { SortableList } from "./index";
+import { applyUserOrder, useUserOrder, type UserOrderStorage } from "./useUserOrder";
+
+afterEach(cleanup);
+
+interface Pin {
+  id: string;
+  label: string;
+}
+
+const source: Pin[] = [
+  { id: "mail", label: "Mail" },
+  { id: "files", label: "Files" },
+  { id: "chat", label: "Chat" },
+];
+const idOf = (pin: Pin) => pin.id;
+
+function memoryStorage(): UserOrderStorage & { data: Map<string, string> } {
+  const data = new Map<string, string>();
+  return {
+    data,
+    getItem: (key) => data.get(key) ?? null,
+    setItem: (key, value) => {
+      data.set(key, value);
+    },
+  };
+}
+
+let refresh: (pins: Pin[]) => void = () => {};
+
+function Dock({ storage }: { storage: UserOrderStorage }) {
+  const [pins, setPins] = useState(source);
+  refresh = setPins;
+  const ordered = useUserOrder("dock", pins, idOf, { storage });
+  return (
+    <SortableList
+      items={ordered.items}
+      getId={idOf}
+      getLabel={(pin) => pin.label}
+      onChange={ordered.onChange}
+    />
+  );
+}
+
+function shown(container: HTMLElement) {
+  return [...container.querySelectorAll("[data-sortable-row]")].map((row) =>
+    row.getAttribute("data-sortable-row"),
+  );
+}
+
+function moveDown(container: HTMLElement, id: string) {
+  const row = container.querySelector(`[data-sortable-row="${id}"]`) as HTMLElement;
+  row.focus();
+  fireEvent.keyDown(row, { key: " " });
+  fireEvent.keyDown(row, { key: "ArrowDown" });
+  fireEvent.keyDown(row, { key: " " });
+}
+
+describe("applyUserOrder (LC-209)", () => {
+  it("keeps saved places and appends new ids at the end", () => {
+    const result = applyUserOrder(
+      [...source, { id: "maps", label: "Maps" }],
+      ["chat", "mail", "files"],
+      idOf,
+    );
+    expect(result.items.map(idOf)).toEqual(["chat", "mail", "files", "maps"]);
+    expect(result.order).toEqual(["chat", "mail", "files", "maps"]);
+  });
+
+  it("an id missing from a partial read keeps its slot", () => {
+    const result = applyUserOrder([source[0]!, source[2]!], ["files", "chat", "mail"], idOf);
+    expect(result.items.map(idOf)).toEqual(["chat", "mail"]);
+    expect(result.order).toEqual(["files", "chat", "mail"]);
+  });
+});
+
+describe("a reorderable dock keeps the user's order (LC-209)", () => {
+  it("a new item lands last and the others keep their index", () => {
+    const storage = memoryStorage();
+    const { container } = renderWithProviders(<Dock storage={storage} />);
+    moveDown(container, "mail");
+    expect(shown(container)).toEqual(["files", "mail", "chat"]);
+
+    act(() => refresh([...source, { id: "maps", label: "Maps" }]));
+    expect(shown(container)).toEqual(["files", "mail", "chat", "maps"]);
+  });
+
+  it("a refresh in the source's order and a reload both keep the arrangement", () => {
+    const storage = memoryStorage();
+    const first = renderWithProviders(<Dock storage={storage} />);
+    moveDown(first.container, "mail");
+    act(() => refresh([...source]));
+    expect(shown(first.container)).toEqual(["files", "mail", "chat"]);
+    first.unmount();
+
+    const reloaded = renderWithProviders(<Dock storage={storage} />);
+    expect(shown(reloaded.container)).toEqual(["files", "mail", "chat"]);
+    expect(JSON.parse(storage.data.get("dock") ?? "[]")).toEqual(["files", "mail", "chat"]);
+  });
+});

package/src/SortableList/useUserOrder.ts

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+/** Where a user's arrangement lives; defaults to the browser's localStorage. */
+export interface UserOrderStorage {
+  getItem: (key: string) => string | null;
+  setItem: (key: string, value: string) => void;
+}
+
+const memory = new Map<string, string>();
+const memoryStorage: UserOrderStorage = {
+  getItem: (key) => memory.get(key) ?? null,
+  setItem: (key, value) => {
+    memory.set(key, value);
+  },
+};
+
+function defaultStorage(): UserOrderStorage {
+  try {
+    const local = (globalThis as { localStorage?: UserOrderStorage }).localStorage;
+    if (local && typeof local.getItem === "function") return local;
+  } catch {
+    // storage blocked
+  }
+  return memoryStorage;
+}
+
+function readOrder(storage: UserOrderStorage, key: string): string[] {
+  try {
+    const parsed = JSON.parse(storage.getItem(key) ?? "[]") as unknown;
+    return Array.isArray(parsed) ? parsed.filter((id): id is string => typeof id === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * The items in the user's order (LC-209): known ids keep their saved place,
+ * new ids land at the end in the order the source gave them. Ids missing
+ * from this read keep their slot in `order`, so a partial refresh never
+ * reshuffles them.
+ */
+export function applyUserOrder<T>(
+  items: readonly T[],
+  order: readonly string[],
+  getId: (item: T) => string,
+): { items: T[]; order: string[] } {
+  const byId = new Map(items.map((item) => [getId(item), item] as const));
+  const known = new Set(order);
+  const placed = order.flatMap((id) => {
+    const item = byId.get(id);
+    return item === undefined ? [] : [item];
+  });
+  const added = items.filter((item) => !known.has(getId(item)));
+  return {
+    items: [...placed, ...added],
+    order: [...order, ...added.map(getId)],
+  };
+}
+
+export interface UseUserOrderOptions {
+  storage?: UserOrderStorage;
+}
+
+/**
+ * Keeps a hand-arranged collection in the user's order across data refreshes
+ * and reloads. Feed `items` from any source order; render the returned
+ * `items`; pass `onChange` to SortableList.
+ */
+export function useUserOrder<T>(
+  key: string,
+  items: readonly T[],
+  getId: (item: T) => string,
+  options: UseUserOrderOptions = {},
+) {
+  const storage = useMemo(() => options.storage ?? defaultStorage(), [options.storage]);
+  const [order, setOrder] = useState(() => readOrder(storage, key));
+  const arranged = useMemo(() => applyUserOrder(items, order, getId), [items, order, getId]);
+
+  useEffect(() => {
+    if (arranged.order.length === order.length) return;
+    storage.setItem(key, JSON.stringify(arranged.order));
+    setOrder(arranged.order);
+  }, [arranged.order, order.length, storage, key]);
+
+  const onChange = useCallback(
+    (next: T[]) => {
+      const shown = new Set(next.map(getId));
+      const ids = [...next.map(getId), ...order.filter((id) => !shown.has(id))];
+      storage.setItem(key, JSON.stringify(ids));
+      setOrder(ids);
+    },
+    [getId, order, storage, key],
+  );
+
+  return { items: arranged.items, onChange };
+}

package/src/TreeSelect/TreeSelect.rows.spec.tsx

@@ -0,0 +1,44 @@
+/**
+ * LC-222 LIST-HEIGHT-IN-ROWS: the desktop tree panel caps its scroller at a
+ * visible-row count times its row pitch, not a pixel literal.
+ */
+import { listHeightForRows } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import type { TreeNode } from "../views/TreeView";
+import { TreeSelect } from "./index";
+
+afterEach(cleanup);
+
+const nodes: TreeNode[] = Array.from({ length: 12 }, (_, index) => ({
+  id: `n${index}`,
+  label: `Account ${index + 1}`,
+}));
+
+describe("TreeSelect panel height (LC-222)", () => {
+  it("states its cap as eight rows at the row pitch", async () => {
+    Object.defineProperty(window, "innerWidth", {
+      configurable: true,
+      writable: true,
+      value: 1200,
+    });
+    window.dispatchEvent(new Event("resize"));
+    const { baseElement } = renderWithProviders(<TreeSelect label="Account" nodes={nodes} open />);
+    const scroller = await waitFor(() => {
+      const found = baseElement.querySelector("[data-visible-rows]") as HTMLElement | null;
+      expect(found).toBeTruthy();
+      return found as HTMLElement;
+    });
+    const rows = Number(scroller.getAttribute("data-visible-rows"));
+    const pitch = Number(scroller.getAttribute("data-row-pitch"));
+    expect(rows).toBe(8);
+    expect(pitch).toBeGreaterThan(0);
+    const rowHeights = [...baseElement.querySelectorAll("[data-row-height]")].map((row) =>
+      Number(row.getAttribute("data-row-height")),
+    );
+    expect(new Set(rowHeights)).toEqual(new Set([pitch]));
+    const style = `${scroller.getAttribute("style") ?? ""} ${scroller.className}`;
+    expect(style).toContain(String(listHeightForRows(rows, pitch)));
+  });
+});

package/src/TreeSelect/index.tsx

@@ -26,6 +26,7 @@ import {
   ensureFocusVisibleRing,
   ensureKeyboardModalityTracking,
   keyboardFocusRingProps,
+  listHeightForRows,
   useMenuRowCheckInk,
   menuRowChecked,
   useResolvedKnobs,
@@ -617,6 +618,9 @@ function handleTreeKeys(args: {
   }
 }
 
+/** Rows the desktop tree panel shows before it scrolls (LC-222). */
+const TREE_SELECT_VISIBLE_ROWS = 8;
+
 function FloatingTreeSelect({
   nodes,
   value,
@@ -653,6 +657,7 @@ function FloatingTreeSelect({
   accessibilityLabel?: string;
 }) {
   const overlayZIndex = useOverlayZIndex("dropdown");
+  const { knobProps } = useResolvedKnobs();
   const treeId = useId();
   const searchRef = useRef<HTMLInputElement | null>(null);
   const state = useTreeSelectState({ nodes, value, open, defaultExpandedIds });
@@ -790,7 +795,13 @@ function FloatingTreeSelect({
                 activeDescendant={activeDescendant}
                 sizeToken={sizeToken}
               />
-              <YStack overflow="scroll" maxHeight={320} id={treeId}>
+              <YStack
+                overflow="scroll"
+                maxHeight={listHeightForRows(TREE_SELECT_VISIBLE_ROWS, knobProps.nestedControl.px)}
+                data-visible-rows={TREE_SELECT_VISIBLE_ROWS}
+                data-row-pitch={knobProps.nestedControl.px}
+                id={treeId}
+              >
                 <TreeSelectPanelBody
                   rows={state.rows}
                   selectedId={value}

package/src/appShell/TabBar.tsx

@@ -23,6 +23,7 @@ import { isWeb } from "@multiplatform.one/platform";
 import { type ComponentType, type ReactNode, useEffect, useState } from "react";
 import { XStack, YStack } from "tamagui";
 import { materials, useMaterial } from "../Material";
+import { MaterialBlurFill } from "../Material/blur";
 import { Text } from "../Text";
 import { setBottomChromeInset, setFloatingBarMounted, useBottomAccessory } from "./bottomChrome";
 import { useBottomInset } from "./bottomInset";
@@ -248,6 +249,7 @@ export function TabBar({
           onLayout={(event) => setAccessoryHeight(Math.round(event.nativeEvent.layout.height))}
           data-testid={`${testID}-accessory`}
         >
+          <MaterialBlurFill radius={1000} />
           {accessory}
         </XStack>
       ) : null}
@@ -261,6 +263,7 @@ export function TabBar({
         {...material}
         data-testid={`${testID}-capsule`}
       >
+        <MaterialBlurFill radius={1000} />
         {items.map((item) => (
           <TabBarButton
             key={item.key}

package/src/charts/Sparkline.tsx

@@ -9,8 +9,8 @@ import type { ChartCurve, ChartDatum } from "./types";
 import { useChartTheme } from "./useChartTheme";
 
 export interface SparklineProps extends Omit<YStackProps, "children" | "width" | "height"> {
-  /** Series values — bare numbers or full data points. */
-  data: Array<number | ChartDatum>;
+  /** Series values — bare numbers or full data points. Null is no reading (LC-220). */
+  data: Array<number | ChartDatum> | null | undefined;
   /** Drawing height as a theme size token or pixels (default 36). */
   height?: ChartHeight;
   /** Fixed width; omit to track the parent responsively. */
@@ -50,7 +50,7 @@ export function Sparkline({
   const { t } = useTranslation();
   const { palette } = useChartTheme();
   const stroke = color ?? palette.single;
-  const normalized: ChartDatum[] = data.map((entry, index) =>
+  const normalized: ChartDatum[] = (data ?? []).map((entry, index) =>
     typeof entry === "number" ? { label: String(index + 1), value: entry } : entry,
   );
   const ariaLabel =

package/src/index.ts

@@ -5,22 +5,29 @@ export {
   SortableHandle,
   SortableHandleWell,
   SortableSessionProvider,
+  applyUserOrder,
   useSortableRows,
+  useUserOrder,
 } from "./SortableList";
 export type {
   SortableListProps,
   SortableDisabledStyle,
   SortableSession,
   UseSortableRowsOptions,
+  UseUserOrderOptions,
+  UserOrderStorage,
 } from "./SortableList";
 export * from "./Badge";
 export * from "./Carousel";
 export * from "./Chip";
 export * from "./Kbd";
 export * from "./CopyField";
+export * from "./Diff";
+export * from "./ElapsedProgress";
 export * from "./DotIndicator";
 export * from "./DropdownMenu";
 export * from "./ContextMenu";
+export * from "./MachineLiteral";
 export * from "./Material";
 export * from "./Meter";
 export { Lightbox, useLightbox } from "./Lightbox";

package/src/presentationEmpty.spec.tsx

@@ -0,0 +1,71 @@
+/**
+ * LC-220 EMPTY-IS-DRAWN: a presentation component given no reading draws its
+ * own empty form at the populated box (the bare track, the em dash, the empty
+ * surface), shows no "0", and its accessible name says there is no reading.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Sparkline } from "./charts/Sparkline";
+import { Default as DiffMain, NoReading } from "./Diff/Diff.stories";
+import { Diff, type DiffProps } from "./Diff";
+import { Meter, type MeterProps } from "./Meter";
+import { Default as MeterMain, Unknown } from "./Meter/Meter.stories";
+
+afterEach(cleanup);
+
+const noZero = /(^|[^\d.])0([^\d.]|$)/;
+
+describe("presentation components draw their empty form (LC-220)", () => {
+  it("Meter: the bare track at the populated height, an em dash, no fill, no reading spoken", () => {
+    const full = renderWithProviders(<Meter {...(MeterMain.args as MeterProps)} />);
+    const fullRail = full.container.querySelector("[role='meter']") as HTMLElement;
+    const height = fullRail.getAttribute("data-meter-track-height");
+    full.unmount();
+
+    const { container } = renderWithProviders(
+      <Meter {...(Unknown.args as MeterProps)} value={null} />,
+    );
+    const rail = container.querySelector("[role='meter']") as HTMLElement;
+    expect(rail).toBeTruthy();
+    expect(rail.getAttribute("data-meter-track-height")).toBe(height);
+    expect(rail.getAttribute("data-meter-fill")).toBeNull();
+    expect(rail.getAttribute("aria-valuenow")).toBeNull();
+    expect(rail.getAttribute("aria-valuetext")).toBe("No reading");
+    expect(container.textContent).toContain("—");
+    expect(container.textContent).not.toMatch(noZero);
+  });
+
+  it("Diff: the same frame with an em dash and a no-reading name, never 0 added", () => {
+    const full = renderWithProviders(<Diff {...(DiffMain.args as DiffProps)} />);
+    const fullFrame = full.container.querySelector("[role='region']") as HTMLElement;
+    const fullClass = fullFrame.className;
+    full.unmount();
+
+    const { container } = renderWithProviders(<Diff {...(NoReading.args as DiffProps)} />);
+    const frame = container.querySelector("[role='region']") as HTMLElement;
+    expect(frame.className).toBe(fullClass);
+    expect(frame.getAttribute("aria-label")).toMatch(/no reading$/);
+    expect(container.textContent).toBe("—");
+    expect(container.textContent).not.toMatch(noZero);
+  });
+
+  it("Sparkline: the surface keeps its box and says no data, with no point drawn", () => {
+    const full = renderWithProviders(
+      <Sparkline width={160} data={[3, 5, 4, 8]} title="Sessions" />,
+    );
+    const fullSvg = full.container.querySelector("svg") as SVGElement;
+    const height = fullSvg.getAttribute("height");
+    full.unmount();
+
+    const { container } = renderWithProviders(
+      <Sparkline width={160} data={null} title="Sessions" />,
+    );
+    const svg = container.querySelector("svg") as SVGElement;
+    expect(svg.getAttribute("height")).toBe(height);
+    expect(svg.getAttribute("width")).toBe("160");
+    expect(screen.getByRole("img").getAttribute("aria-label")).toMatch(/no data$/);
+    expect(container.querySelectorAll("path")).toHaveLength(0);
+    expect(container.textContent).not.toMatch(noZero);
+  });
+});

package/src/views/ReportBuilder.tsx

@@ -13,6 +13,7 @@ import {
   formatTimeOfDay,
   hairline,
   keyboardFocusRingProps,
+  listHeightForRows,
   pressTargetStyle,
   useResolvedKnobs,
   ensureKeyboardModalityTracking,
@@ -733,7 +734,7 @@ export function ReportBuilder({
               })}
             </Button>
           </DropdownMenu.Trigger>
-          <DropdownMenu.Content maxHeight={360}>
+          <DropdownMenu.Content maxHeight={listHeightForRows(10, knobProps.menuRow.minHeight)}>
             <DropdownMenu.Label>{t("Report columns")}</DropdownMenu.Label>
             {columns.map((column) => {
               const checked = enabledColumnSet.has(column.fieldname);
@@ -759,7 +760,7 @@ export function ReportBuilder({
               {groupByCol ? t("Group by: {{field}}", { field: groupByCol.label }) : t("Group by")}
             </Button>
           </DropdownMenu.Trigger>
-          <DropdownMenu.Content maxHeight={360}>
+          <DropdownMenu.Content maxHeight={listHeightForRows(10, knobProps.menuRow.minHeight)}>
             <DropdownMenu.CheckboxItem
               checked={!groupBy}
               closeOnSelect
@@ -817,7 +818,7 @@ export function ReportBuilder({
                 })}
               </Button>
             </DropdownMenu.Trigger>
-            <DropdownMenu.Content maxHeight={360}>
+            <DropdownMenu.Content maxHeight={listHeightForRows(10, knobProps.menuRow.minHeight)}>
               {numericColumns.map((column) => (
                 <DropdownMenu.CheckboxItem
                   key={column.fieldname}

package/src/views/index.ts

@@ -219,3 +219,4 @@ export {
 export * from "../charts";
 
 export type { GanttSnapUnit } from "./ganttIntervals";
+export { scopedNames } from "./sameNameScope";

package/src/views/sameNameScope.spec.tsx

@@ -0,0 +1,55 @@
+/**
+ * LC-213 SAME-NAME-SCOPE: two items with one name show the scope that tells
+ * them apart, in the visible title and so in the row's accessible name; items
+ * without a collision carry no suffix.
+ */
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { List, ListRow } from "./List";
+import { scopedNames } from "./sameNameScope";
+
+afterEach(cleanup);
+
+const apps = [
+  { id: "a", name: "postgres", tenant: "corp" },
+  { id: "b", name: "redis", tenant: "corp" },
+  { id: "c", name: "postgres", tenant: "master" },
+  { id: "d", name: "nginx", tenant: "master" },
+];
+
+describe("scopedNames (LC-213)", () => {
+  it("suffixes exactly the colliding items with their scope", () => {
+    expect(
+      scopedNames(
+        apps,
+        (app) => app.name,
+        (app) => app.tenant,
+      ),
+    ).toEqual(["postgres (corp)", "redis", "postgres (master)", "nginx"]);
+  });
+
+  it("a list of the fixture gives every row a unique accessible name", () => {
+    const labels = scopedNames(
+      apps,
+      (app) => app.name,
+      (app) => app.tenant,
+    );
+    renderWithProviders(
+      <List
+        items={apps}
+        aria-label="Apps"
+        height={300}
+        estimateSize={50}
+        renderItem={(_app, index) => <ListRow title={labels[index]} />}
+      />,
+    );
+    const names = screen.getAllByRole("listitem").map((row) => row.textContent);
+    expect(names).toHaveLength(4);
+    expect(new Set(names).size).toBe(4);
+    expect(names.filter((name) => /\(.+\)$/.test(name ?? ""))).toEqual([
+      "postgres (corp)",
+      "postgres (master)",
+    ]);
+  });
+});

package/src/views/sameNameScope.ts

@@ -0,0 +1,22 @@
+/**
+ * LC-213 SAME-NAME-SCOPE: when two items in one collection share a display
+ * name, each colliding item's label carries the scope that tells them apart
+ * ("postgres (corp)", "postgres (master)"). Items without a collision keep
+ * their bare name. The label is the visible title and the accessible name.
+ */
+export function scopedNames<T>(
+  items: readonly T[],
+  nameOf: (item: T) => string,
+  scopeOf: (item: T) => string | null | undefined,
+): string[] {
+  const counts = new Map<string, number>();
+  for (const item of items) {
+    const name = nameOf(item);
+    counts.set(name, (counts.get(name) ?? 0) + 1);
+  }
+  return items.map((item) => {
+    const name = nameOf(item);
+    const scope = scopeOf(item);
+    return (counts.get(name) ?? 0) > 1 && scope ? `${name} (${scope})` : name;
+  });
+}

package/types/Diff/diff.d.ts

@@ -0,0 +1,17 @@
+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;
+}
+/** Line diff by longest common subsequence, removals before additions in a hunk. */
+export declare function diffLines(before: string, after: string): DiffLine[];
+export declare function countDiff(lines: readonly DiffLine[]): DiffCounts;
+//# sourceMappingURL=diff.d.ts.map

package/types/Diff/diff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../../src/Diff/diff.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAExD,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAMD,oFAAoF;AACpF,wBAAgB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,QAAQ,EAAE,CA6BnE;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,QAAQ,EAAE,GAAG,UAAU,CAQhE"}

package/types/Diff/index.d.ts

@@ -0,0 +1,15 @@
+import { type YStackProps } from "tamagui";
+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;
+}
+export declare function Diff({ before, after, label, lineNumbers, ...frameProps }: DiffProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/types/Diff/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Diff/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAA+B,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAKxE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEjE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IAC9D,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkBD,wBAAgB,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,WAAkB,EAAE,GAAG,UAAU,EAAE,EAAE,SAAS,2CA+F1F"}

package/types/ElapsedProgress/index.d.ts

@@ -0,0 +1,15 @@
+import { type XStackProps } from "tamagui";
+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 declare function formatElapsed(ms: number): string;
+export declare function ElapsedProgress({ startedAt, progress, threshold, label, ...rowProps }: ElapsedProgressProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/types/ElapsedProgress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ElapsedProgress/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAIjE,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IACzE,kDAAkD;IAClD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,2FAA2F;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,2CAA2C;AAC3C,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAQhD;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,QAAQ,EACR,SAAgB,EAChB,KAAK,EACL,GAAG,QAAQ,EACZ,EAAE,oBAAoB,2CA+CtB"}

package/types/MachineLiteral/index.d.ts

@@ -0,0 +1,13 @@
+import { type XStackProps } from "tamagui";
+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 declare function MachineLiteral({ value, reading, label, copyable, ...rowProps }: MachineLiteralProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/types/MachineLiteral/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/MachineLiteral/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAwB,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAMjE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IACxE,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IAClE,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAe,EACf,GAAG,QAAQ,EACZ,EAAE,mBAAmB,2CAyCrB"}

package/types/Material/blur.d.ts

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

package/types/Material/blur.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blur.d.ts","sourceRoot":"","sources":["../../src/Material/blur.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,eAAe,IAAI,IAAI,CAEtC;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAElE"}