@multiplatform.one/components 7.4.1 → 7.5.0

package/src/TreeSelect/treeSelectModel.spec.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from "vitest";
+import type { TreeNode } from "../views/TreeView";
+import {
+  descendantCount,
+  filterForest,
+  findNode,
+  findNodePath,
+  flattenVisible,
+} from "./treeSelectModel";
+
+const accounts: TreeNode[] = [
+  {
+    id: "assets",
+    label: "Assets",
+    children: [
+      {
+        id: "current",
+        label: "Current Assets",
+        children: [
+          {
+            id: "bank",
+            label: "Bank Accounts",
+            children: [
+              { id: "hdfc", label: "HDFC Current" },
+              { id: "cash", label: "Cash" },
+            ],
+          },
+        ],
+      },
+      { id: "fixed", label: "Fixed Assets" },
+    ],
+  },
+  { id: "liabilities", label: "Liabilities" },
+];
+
+describe("treeSelectModel", () => {
+  it("flattenVisible indexes only rendered rows in walk order", () => {
+    const rows = flattenVisible(accounts, new Set(["assets", "current", "bank"]));
+    expect(rows.map((r) => r.node.id)).toEqual([
+      "assets",
+      "current",
+      "bank",
+      "hdfc",
+      "cash",
+      "fixed",
+      "liabilities",
+    ]);
+    expect(rows.map((r) => r.index)).toEqual([0, 1, 2, 3, 4, 5, 6]);
+    expect(rows.find((r) => r.node.id === "hdfc")?.depth).toBe(3);
+  });
+
+  it("does not invent a second index — collapsed children are not navigable", () => {
+    const rows = flattenVisible(accounts, new Set());
+    expect(rows.map((r) => r.node.id)).toEqual(["assets", "liabilities"]);
+    expect(rows[0]?.index).toBe(0);
+    expect(rows[1]?.index).toBe(1);
+  });
+
+  it("filterForest keeps ancestors and expands them; matching parent keeps children", () => {
+    const { nodes, expandIds } = filterForest(accounts, "hdfc");
+    expect(nodes.map((n) => n.id)).toEqual(["assets"]);
+    expect(expandIds.has("assets")).toBe(true);
+    expect(expandIds.has("current")).toBe(true);
+    expect(expandIds.has("bank")).toBe(true);
+    const visible = flattenVisible(nodes, expandIds);
+    expect(visible.map((r) => r.node.id)).toEqual(["assets", "current", "bank", "hdfc"]);
+    expect(visible.map((r) => r.index)).toEqual([0, 1, 2, 3]);
+  });
+
+  it("findNode / path / descendantCount", () => {
+    expect(findNode(accounts, "hdfc")?.label).toBe("HDFC Current");
+    expect(findNodePath(accounts, "hdfc")).toEqual(["assets", "current", "bank"]);
+    expect(descendantCount(accounts[0]!)).toBe(5);
+  });
+});

package/src/TreeSelect/treeSelectModel.ts

@@ -0,0 +1,107 @@
+import type { TreeNode } from "../views/TreeView";
+
+/**
+ * Flattened visible row. `index` is the navigable index in render order —
+ * the same model Combobox uses for group headers (`flatIndex` on selectable
+ * rows). Guides and the caret are not rows; ArrowUp/ArrowDown walk this list.
+ */
+export interface FlatTreeRow<T = unknown> {
+  node: TreeNode<T>;
+  depth: number;
+  hasChildren: boolean;
+  isExpanded: boolean;
+  childCount: number;
+  index: number;
+}
+
+export function descendantCount<T>(node: TreeNode<T>): number {
+  let n = 0;
+  const walk = (items?: TreeNode<T>[]) => {
+    if (!items) return;
+    for (const child of items) {
+      n += 1;
+      walk(child.children);
+    }
+  };
+  walk(node.children);
+  return n;
+}
+
+export function flattenVisible<T>(
+  nodes: TreeNode<T>[],
+  expandedIds: Set<string>,
+): FlatTreeRow<T>[] {
+  const result: FlatTreeRow<T>[] = [];
+  const walk = (items: TreeNode<T>[], depth: number) => {
+    for (const node of items) {
+      const hasChildren = (node.children?.length ?? 0) > 0;
+      const isExpanded = expandedIds.has(node.id);
+      result.push({
+        node,
+        depth,
+        hasChildren,
+        isExpanded,
+        childCount: descendantCount(node),
+        index: result.length,
+      });
+      if (isExpanded && node.children) walk(node.children, depth + 1);
+    }
+  };
+  walk(nodes, 0);
+  return result;
+}
+
+/** Keep matching nodes and their ancestors. Matching parents keep full children. */
+export function filterForest<T>(
+  nodes: TreeNode<T>[],
+  query: string,
+): { nodes: TreeNode<T>[]; expandIds: Set<string> } {
+  const q = query.trim().toLowerCase();
+  if (!q) return { nodes, expandIds: new Set() };
+  const expandIds = new Set<string>();
+
+  const walk = (items: TreeNode<T>[]): TreeNode<T>[] => {
+    const out: TreeNode<T>[] = [];
+    for (const node of items) {
+      const selfHit = node.label.toLowerCase().includes(q);
+      const childHits = node.children ? walk(node.children) : [];
+      if (selfHit) {
+        if ((node.children?.length ?? 0) > 0) expandIds.add(node.id);
+        out.push(node);
+      } else if (childHits.length > 0) {
+        expandIds.add(node.id);
+        out.push({ ...node, children: childHits });
+      }
+    }
+    return out;
+  };
+
+  return { nodes: walk(nodes), expandIds };
+}
+
+export function findNode<T>(nodes: TreeNode<T>[], id: string): TreeNode<T> | undefined {
+  for (const node of nodes) {
+    if (node.id === id) return node;
+    if (node.children?.length) {
+      const found = findNode(node.children, id);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+
+/** Ancestor ids of `id` (root → parent), or null when the node is absent. */
+export function findNodePath<T>(
+  items: TreeNode<T>[],
+  id: string,
+  trail: string[] = [],
+): string[] | null {
+  for (const node of items) {
+    if (node.id === id) return trail;
+    if (node.children?.length) {
+      const found = findNodePath(node.children, id, [...trail, node.id]);
+      if (found) return found;
+    }
+  }
+  return null;
+}

package/src/Unspaced.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Text, YStack } from "tamagui";
+import { Unspaced } from "./tamagui";
+
+const meta: Meta<typeof Unspaced> = {
+  title: "Components/Unspaced",
+  component: Unspaced,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "Spacing opt-out marker (MPO-21 G4). Paints nothing. Tells the parent stack to " +
+          "skip gap on its children. AdaptivePopup already imported this from tamagui; " +
+          "the house barrel now owns the bare name. Knob-immune.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Unspaced>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => (
+    <YStack maxWidth={420} gap="$4">
+      <Text>First row — takes the stack gap.</Text>
+      <Unspaced>
+        <Text>Unspaced row — the parent gap does not apply here.</Text>
+      </Unspaced>
+      <Text>Third row — takes the stack gap again.</Text>
+    </YStack>
+  ),
+};

package/src/Video/Video.spec.tsx

@@ -1,9 +1,14 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
 import React from "react";
 import { describe, expect, it, vi } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 import { formatPlayerTime } from "./PlayerChrome";
 import { Video } from "./index";
 
+const here = dirname(fileURLToPath(import.meta.url));
+
 vi.mock("expo-video", () => ({
   useVideoPlayer: () => ({
     loop: false,
@@ -75,6 +80,26 @@ describe("Video", () => {
     expect(el?.getAttribute("poster")).toBe("https://example.com/poster.jpg");
     expect(el?.getAttribute("aria-label")).toBe("Props");
   });
+
+  it("does not paint a status pip; tile radius stays UNCLAMPED (R11 / media-19)", () => {
+    const src = [
+      readFileSync(join(here, "index.tsx"), "utf8"),
+      readFileSync(join(here, "index.native.tsx"), "utf8"),
+      readFileSync(join(here, "VideoFrame.tsx"), "utf8"),
+    ].join("\n");
+    expect(src).not.toMatch(
+      /knobProps\.cardSurface|knobProps\.containerRadius|capContainerRadius\(/,
+    );
+    expect(src).not.toMatch(/data-status-pip|StatusPip|statusPip/);
+    expect(src).toContain("mediaTileFrameProps");
+
+    const { container } = renderWithProviders(
+      <Video src="https://example.com/clip.mp4" title="Demo" controls />,
+    );
+    expect(container.querySelector("[data-status-pip]")).toBeNull();
+    expect(container.querySelector("[data-media-tile='video']")).toBeTruthy();
+    expect(container.querySelector("[data-testid='video-chrome']")).toBeTruthy();
+  });
 });
 
 describe("formatPlayerTime", () => {

package/src/Video/VideoFrame.tsx

@@ -8,6 +8,24 @@ export const VideoFrame = styled(YStack, {
   width: "100%",
 });
 
+/**
+ * Live-media tile frame (R11 / media-19): unclamped scale radius, no
+ * CONTAINER-CAP, no status pip. The capped card-surface fragment is the
+ * wrong recipe — it carries the Axiom 1 cap and padding a tile does not have.
+ */
+export function mediaTileFrameProps(knobProps: {
+  surface: { backgroundColor?: unknown };
+  borderRadius: { borderRadius?: unknown; className?: string };
+}): Record<string, unknown> {
+  return {
+    backgroundColor: knobProps.surface.backgroundColor,
+    borderRadius: knobProps.borderRadius.borderRadius,
+    padding: 0,
+    ...(knobProps.borderRadius.className ? { className: knobProps.borderRadius.className } : {}),
+    "data-media-tile": "video",
+  };
+}
+
 export function VideoCaption({ children }: { children: ReactNode }) {
   const { knobProps } = useResolvedKnobs({ component: "Video" });
   return (

package/src/Video/index.native.tsx

@@ -2,7 +2,7 @@ import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { useEffect, useState } from "react";
 import { Image, StyleSheet } from "react-native";
 import { YStack } from "tamagui";
-import { VideoCaption, VideoFrame } from "./VideoFrame";
+import { VideoCaption, VideoFrame, mediaTileFrameProps } from "./VideoFrame";
 import type { VideoProps } from "./types";
 
 export type { VideoProps } from "./types";
@@ -88,8 +88,7 @@ function ExpoVideoSurface({
       width="100%"
       aspectRatio={16 / 9}
       overflow="hidden"
-      {...knobProps.cardSurface}
-      padding={0}
+      {...mediaTileFrameProps(knobProps)}
       position="relative"
     >
       <VideoView
@@ -120,8 +119,7 @@ function PosterOnlySurface({ poster, title }: NativeSurfaceProps) {
       width="100%"
       aspectRatio={16 / 9}
       overflow="hidden"
-      {...knobProps.cardSurface}
-      padding={0}
+      {...mediaTileFrameProps(knobProps)}
       position="relative"
       accessibilityLabel={title}
     >
@@ -168,7 +166,12 @@ export function Video({
   };
 
   return (
-    <VideoFrame marginHorizontal={0} marginVertical={knobProps.gapLg.gap} {...knobProps.gap} {...props}>
+    <VideoFrame
+      marginHorizontal={0}
+      marginVertical={knobProps.gapLg.gap}
+      {...knobProps.gap}
+      {...props}
+    >
       {src ? (
         expoVideo ? (
           <ExpoVideoSurface key={src} expoVideo={expoVideo} {...surfaceProps} />
@@ -180,7 +183,7 @@ export function Video({
           width="100%"
           aspectRatio={16 / 9}
           overflow="hidden"
-          {...knobProps.cardSurface}
+          {...mediaTileFrameProps(knobProps)}
         />
       )}
       {children != null ? <VideoCaption>{children}</VideoCaption> : null}

package/src/Video/index.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { YStack } from "tamagui";
 import { PlayerChrome } from "./PlayerChrome";
-import { VideoCaption, VideoFrame } from "./VideoFrame";
+import { VideoCaption, VideoFrame, mediaTileFrameProps } from "./VideoFrame";
 import type { VideoProps } from "./types";
 
 export type { VideoProps } from "./types";
@@ -112,9 +112,7 @@ export function Video({
   useEffect(() => {
     const stage = stageRef.current as { querySelector?: (s: string) => Element | null } | null;
     const el =
-      videoRef.current ??
-      asVideoElement(stage) ??
-      asVideoElement(stage?.querySelector?.("video"));
+      videoRef.current ?? asVideoElement(stage) ?? asVideoElement(stage?.querySelector?.("video"));
     videoRef.current = el;
     if (!el) return;
 
@@ -150,9 +148,9 @@ export function Video({
   useEffect(() => {
     const stage = asVideoElement(stageRef.current) ? (stageRef.current as HTMLElement) : null;
     const host =
-      (stageRef.current as { querySelector?: (s: string) => Element | null } | null)
-        ?.querySelector?.("video")
-        ?.parentElement ?? stage;
+      (
+        stageRef.current as { querySelector?: (s: string) => Element | null } | null
+      )?.querySelector?.("video")?.parentElement ?? stage;
     const onFs = () => setFullscreen(isStageFullscreen(host));
     document.addEventListener("fullscreenchange", onFs);
     document.addEventListener("webkitfullscreenchange", onFs);
@@ -193,10 +191,19 @@ export function Video({
   }, []);
 
   const onStageKeyDown = useCallback(
-    (e: { key?: string; preventDefault?: () => void; target?: EventTarget | null; currentTarget?: EventTarget | null }) => {
+    (e: {
+      key?: string;
+      preventDefault?: () => void;
+      target?: EventTarget | null;
+      currentTarget?: EventTarget | null;
+    }) => {
       if (!controls) return;
       const target = e.target as HTMLElement | null;
-      if (target && target !== e.currentTarget && target.closest?.("[role='slider'], [role='button'], button")) {
+      if (
+        target &&
+        target !== e.currentTarget &&
+        target.closest?.("[role='slider'], [role='button'], button")
+      ) {
         return;
       }
       const el = videoRef.current;
@@ -235,8 +242,7 @@ export function Video({
       overflow="hidden"
       width="100%"
       aspectRatio={16 / 9}
-      {...knobProps.cardSurface}
-      padding={0}
+      {...mediaTileFrameProps(knobProps)}
       cursor={controls ? "pointer" : undefined}
       role={controls ? "region" : undefined}
       aria-label={title ?? t("Video player")}
@@ -293,7 +299,7 @@ export function Video({
       overflow="hidden"
       width="100%"
       aspectRatio={16 / 9}
-      {...knobProps.cardSurface}
+      {...mediaTileFrameProps(knobProps)}
       justifyContent="center"
       alignItems="center"
     />

package/src/VisuallyHidden.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { Text, YStack } from "tamagui";
+import { VisuallyHidden } from "./tamagui";
+
+const meta: Meta<typeof VisuallyHidden> = {
+  title: "Components/VisuallyHidden",
+  component: VisuallyHidden,
+  parameters: {
+    status: { type: "beta" },
+    docs: {
+      description: {
+        component:
+          "A11y hide utility (MPO-21 G3). Paints nothing visible. AdaptivePopup used a " +
+          "private YStack copy; the house barrel now exports the tamagui primitive so " +
+          "that copy is gone. Knob-immune.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof VisuallyHidden>;
+
+export const Default: Story = {
+  name: "Main",
+  render: () => (
+    <YStack maxWidth={420} gap="$3">
+      <Text>Visible caption. The next node is in the tree and hidden from sight.</Text>
+      <VisuallyHidden>Hidden label for assistive technology</VisuallyHidden>
+    </YStack>
+  ),
+};

package/src/Wheel/Wheel.spec.tsx

@@ -242,4 +242,75 @@ describe("Wheel iOS picker contract", () => {
     expect(onChange).toHaveBeenCalledWith(20);
     vi.useRealTimers();
   });
+
+  it("loops from the last item to the first (hours/minutes wrap)", () => {
+    vi.useFakeTimers({
+      toFake: [
+        "setTimeout",
+        "clearTimeout",
+        "requestAnimationFrame",
+        "cancelAnimationFrame",
+        "performance",
+      ],
+    });
+    const onChange = vi.fn();
+    const minutes = Array.from({ length: 60 }, (_, i) => i);
+    renderWithProviders(
+      <Wheel items={minutes} value={59} onChange={onChange} loop visibleItems={5} />,
+    );
+    const wrapper = screen.getByTestId("wheel-wrapper");
+    fireEvent.keyDown(wrapper, { key: "ArrowDown" });
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(onChange).toHaveBeenCalledWith(0);
+    vi.useRealTimers();
+  });
+});
+
+describe("Wheel design-law (MPO-60)", () => {
+  it("exposes named exports and no default", async () => {
+    const mod = await import("./index");
+    expect(mod.Wheel).toBe(Wheel);
+    expect(mod.default).toBeUndefined();
+  });
+
+  it("selected row type stays on body weight 400, never 600 (R7 / design-audit)", () => {
+    renderWithProviders(
+      <Wheel items={[1, 2, 3, 4, 5]} value={3} onChange={() => {}} visibleItems={5} />,
+    );
+    const selected = screen
+      .getByTestId("wheel")
+      .querySelector('[data-testid="wheel-item"][data-selected="true"]') as HTMLElement;
+    expect(selected).toBeTruthy();
+    const text = selected.querySelector("[class]") as HTMLElement;
+    expect(text.className).toMatch(/_fow-400\b/);
+    expect(text.className).not.toMatch(/_fow-600\b/);
+    expect(text.className).not.toMatch(/_fow-500\b/);
+  });
+
+  it("viewport is R-NONE — no knob radius atom on the clip frame", () => {
+    const none = renderWithProviders(
+      <Preset overrides={{ borderRadius: "none" }}>
+        <Wheel items={[1, 2, 3]} value={2} onChange={() => {}} visibleItems={3} />
+      </Preset>,
+    );
+    const noneFrame = none.container.querySelector('[data-testid="wheel"]') as HTMLElement;
+    const noneAtoms = String(noneFrame.className)
+      .split(" ")
+      .filter((c) => c.startsWith("_btlr-"));
+    none.unmount();
+
+    const full = renderWithProviders(
+      <Preset overrides={{ borderRadius: "full" }}>
+        <Wheel items={[1, 2, 3]} value={2} onChange={() => {}} visibleItems={3} />
+      </Preset>,
+    );
+    const fullFrame = full.container.querySelector('[data-testid="wheel"]') as HTMLElement;
+    const fullAtoms = String(fullFrame.className)
+      .split(" ")
+      .filter((c) => c.startsWith("_btlr-"));
+    expect(noneAtoms).toEqual([]);
+    expect(fullAtoms).toEqual([]);
+  });
 });

package/src/Wheel/Wheel.stories.tsx

@@ -41,7 +41,7 @@ export const Main: Story = {
       const [value, setValue] = useState(5);
       return (
         <YStack gap="$4" alignItems="center">
-          <Text fontSize="$5" fontWeight="600">
+          <Text fontSize="$5" fontWeight="400">
             Selected: {value}
           </Text>
           <Wheel items={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} value={value} onChange={setValue} />
@@ -61,7 +61,7 @@ export const TimePicker: Story = {
 
       return (
         <YStack gap="$4" alignItems="center">
-          <Text fontSize="$5" fontWeight="600">
+          <Text fontSize="$5" fontWeight="400">
             {pad(hour)}:{pad(minute)}:{pad(second)}
           </Text>
           <XStack
@@ -79,7 +79,7 @@ export const TimePicker: Story = {
               width={72}
               highlightEdges="start"
             />
-            <Text fontSize="$8" fontWeight="600" color="$color11" px="$1">
+            <Text fontSize="$8" fontWeight="400" color="$color11" px="$1">
               :
             </Text>
             <Wheel
@@ -91,7 +91,7 @@ export const TimePicker: Story = {
               width={72}
               highlightEdges="none"
             />
-            <Text fontSize="$8" fontWeight="600" color="$color11" px="$1">
+            <Text fontSize="$8" fontWeight="400" color="$color11" px="$1">
               :
             </Text>
             <Wheel
@@ -119,7 +119,7 @@ export const Hour12Picker: Story = {
 
       return (
         <YStack gap="$4" alignItems="center">
-          <Text fontSize="$5" fontWeight="600">
+          <Text fontSize="$5" fontWeight="400">
             {hour}:00 {ampm}
           </Text>
           <XStack
@@ -187,7 +187,7 @@ export const CustomRenderItem: Story = {
 
       return (
         <YStack gap="$4" alignItems="center">
-          <Text fontSize="$5" fontWeight="600">
+          <Text fontSize="$5" fontWeight="400">
             Selected: {value}
           </Text>
           <Wheel
@@ -201,11 +201,7 @@ export const CustomRenderItem: Story = {
               return (
                 <XStack gap="$2" alignItems="center">
                   <YStack width={20} height={20} borderRadius="$2" backgroundColor={color.hex} />
-                  <Text
-                    fontSize="$4"
-                    fontWeight={isSelected ? "600" : "400"}
-                    color={isSelected ? "$color12" : "$color11"}
-                  >
+                  <Text fontSize="$4" fontWeight="400" color={isSelected ? "$color12" : "$color11"}>
                     {color.label}
                   </Text>
                 </XStack>
@@ -263,7 +259,7 @@ export const DatePicker: Story = {
 
       return (
         <YStack gap="$4" alignItems="center">
-          <Text fontSize="$5" fontWeight="600">
+          <Text fontSize="$5" fontWeight="400">
             {months[month - 1]} {day}, {year}
           </Text>
           <XStack