@colixsystems/widget-sdk 0.245.0 → 0.246.0

package/dist/overlay-view.js

@@ -16,7 +16,7 @@
 
 import React from "react";
 import { useHostTheme } from "./hooks.js";
-import { overlayCornerStyle, resolveOverlayTokens } from "./overlay-tokens.js";
+import { overlayFrameStyles, resolveOverlayTokens } from "./overlay-tokens.js";
 
 // Kept clickable, but out of the tab order and the accessibility tree.
 const SILENT_BACKDROP = {
@@ -32,13 +32,58 @@ const SILENT_BACKDROP = {
  *
  * `namesPanel` is for a host whose `Modal` cannot carry the accessible name
  * (React Native's): the panel carries it there, the dialog node on the web.
+ * `awaitsDismiss` is for a host whose `Modal` leaves the screen after it is
+ * told to (iOS): it stays mounted, hidden, until its `onDismiss`.
  *
  * @param {{Modal: any, View: any, Pressable: any, StyleSheet: any,
- *   namesPanel?: boolean}} rn
+ *   namesPanel?: boolean, awaitsDismiss?: boolean}} rn
  */
 export function makeOverlay(rn) {
   const { Modal, View, Pressable, StyleSheet } = rn;
   const namesPanel = Boolean(rn.namesPanel);
+  const awaitsDismiss = Boolean(rn.awaitsDismiss);
+  // Compiled, so the web host can express "box-none" as real CSS rules.
+  let passiveBackdrop = null;
+  const passiveBackdropStyle = () => {
+    passiveBackdrop =
+      passiveBackdrop || StyleSheet.create({ backdrop: { pointerEvents: "box-none" } }).backdrop;
+    return passiveBackdrop;
+  };
+
+  /**
+   * Runs `onDismiss` once a shown overlay has left the screen: after the
+   * commit that removed it (focus already returned on the web), or, where
+   * the host takes it away itself, from that host's `onDismiss`. Returns
+   * the handler to hand the host while it is still dismissing, else null.
+   */
+  function useDismissal(visible, onDismiss) {
+    const onDismissRef = React.useRef(onDismiss);
+    onDismissRef.current = onDismiss;
+    // Decided in render, so the host's Modal is never unmounted mid-dismissal.
+    const [prevVisible, setPrevVisible] = React.useState(visible);
+    const [hostDismissing, setHostDismissing] = React.useState(false);
+    if (visible !== prevVisible) {
+      setPrevVisible(visible);
+      setHostDismissing(!visible && awaitsDismiss && typeof onDismiss === "function");
+    }
+    const hostDismissed = React.useCallback(() => {
+      setHostDismissing(false);
+      if (typeof onDismissRef.current === "function") onDismissRef.current();
+    }, []);
+
+    const shown = React.useRef(false);
+    React.useEffect(() => {
+      if (visible) {
+        shown.current = true;
+        return;
+      }
+      if (!shown.current) return;
+      shown.current = false;
+      if (!awaitsDismiss && typeof onDismissRef.current === "function") onDismissRef.current();
+    }, [visible]);
+
+    return hostDismissing ? hostDismissed : null;
+  }
 
   function Overlay({
     visible = false,
@@ -53,6 +98,9 @@ export function makeOverlay(rn) {
     closeAccessibilityLabel = "Close",
     initialFocusRef,
     panelFrame: PanelFrame,
+    anchoredAt,
+    passive = false,
+    onDismiss,
     style,
     testID,
     children,
@@ -65,36 +113,28 @@ export function makeOverlay(rn) {
     const requestClose = React.useCallback(() => {
       if (typeof onRequestClose === "function") onRequestClose();
     }, [onRequestClose]);
+    const dismissing = useDismissal(visible, onDismiss);
 
+    if (dismissing) {
+      return React.createElement(Modal, {
+        visible: false,
+        transparent: true,
+        animationType: "none",
+        onDismiss: dismissing,
+      });
+    }
     // Unmounted while closed: `Modal` appends a host container the moment it
     // renders, so every widget on the page would otherwise leave one behind.
     if (!visible) return null;
 
-    const backdrop = {
-      flex: 1,
-      alignItems: "center",
-      justifyContent: tokens.verticalAlign,
-      padding: tokens.screenPadding,
-      ...(tokens.topGap ? { paddingTop: tokens.topGap } : null),
-      backgroundColor: tokens.scrim,
-    };
-    const panel = {
-      width: "100%",
-      // Capped to the padded screen box so a tall panel scrolls inside its own
-      // ScrollView instead of overflowing past the viewport unreachably.
-      maxHeight: "100%",
-      flexShrink: 1,
-      ...(tokens.maxWidth ? { maxWidth: tokens.maxWidth } : { flex: 1 }),
-      backgroundColor: tokens.surface,
-      ...overlayCornerStyle(tokens.radius, tokens.presentation),
-      padding: tokens.padding,
-      ...tokens.elevation,
-    };
+    const frame = overlayFrameStyles(tokens, anchoredAt);
+    // A passive layer lets the pointer through everywhere but its panel.
+    const backdrop = passive ? [frame.backdrop, passiveBackdropStyle()] : frame.backdrop;
 
     const panelNode = React.createElement(
       View,
       {
-        style: [panel, style],
+        style: [frame.panel, style],
         accessibilityLabel: namesPanel ? accessibilityLabel : undefined,
         testID,
       },
@@ -113,11 +153,13 @@ export function makeOverlay(rn) {
         "aria-label": accessibilityLabelledBy ? undefined : accessibilityLabel,
         "aria-labelledby": accessibilityLabelledBy,
         initialFocusRef,
+        ...(passive ? { passive } : null),
+        ...(anchoredAt ? { closesOnOutsideScroll: true } : null),
       },
       React.createElement(
         View,
         { style: backdrop },
-        dismissOnBackdropPress
+        dismissOnBackdropPress && !passive
           ? React.createElement(Pressable, {
               style: StyleSheet.absoluteFill,
               onPress: requestClose,
@@ -130,6 +172,7 @@ export function makeOverlay(rn) {
             })
           : null,
         // @internal `panelFrame`: `<Modal>` wraps its panel, never the scrim.
+        // @internal `anchoredAt` / `passive` / `onDismiss`: `<Popover>`, `<Menu>`, `<Tooltip>`.
         PanelFrame
           ? React.createElement(PanelFrame, { verticalAlign: tokens.verticalAlign }, panelNode)
           : panelNode,

package/dist/overlay.native.js

@@ -5,14 +5,16 @@
 // hardware back button to `onRequestClose`, matching what react-native-web's
 // portal does on the web (./overlay.js). Only the import differs.
 
-import { Modal, View, Pressable, StyleSheet } from "react-native";
+import { Modal, View, Pressable, StyleSheet, Platform } from "react-native";
 import { makeOverlay } from "./overlay-view.js";
 
 // RN's `Modal` forwards no ARIA props, so the panel carries the name here.
+// iOS cannot present a modal while another is still being dismissed.
 export const Overlay = makeOverlay({
   Modal,
   View,
   Pressable,
   StyleSheet,
   namesPanel: true,
+  awaitsDismiss: Platform.OS === "ios",
 });

package/dist/popover-tokens.js

@@ -0,0 +1,145 @@
+// The values `<Menu>`, `<Popover>` and `<Tooltip>` paint and place with, and
+// the `popover` scope look `<Select>`'s option sheet shares. No renderer and
+// no React here, so both hosts share it and the node suite tests it.
+
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { isNarrowWidth } from "./container-width.js";
+import { overlayCornerStyle } from "./overlay-tokens.js";
+import { normaliseThemeComponents } from "./theme-components.js";
+
+export const POPOVER_PLACEMENTS = Object.freeze(["bottom", "top"]);
+export const POPOVER_BORDER_WIDTH = 1;
+
+export const POPOVER_DEFAULTS = Object.freeze({
+  // Between the trigger and the panel.
+  gap: 4,
+  // The closest a panel comes to a screen edge.
+  screenMargin: 8,
+  menuMinWidth: 180,
+  menuMaxWidth: 320,
+  popoverMaxWidth: 360,
+  tooltipMaxWidth: 240,
+  // A pointer passing over must not flash a tooltip; leaving waits a beat so
+  // the pointer can cross the gap onto the bubble.
+  tooltipShowDelayMs: 400,
+  tooltipHideDelayMs: 150,
+});
+
+// A themed shadow replaces the overlay's, so a lower level must zero each key.
+const NO_SHADOW = Object.freeze({ shadowOpacity: 0, shadowRadius: 0, elevation: 0 });
+
+export function normalisePopoverPlacement(placement) {
+  return POPOVER_PLACEMENTS.includes(placement) ? placement : "bottom";
+}
+
+/** The theme's validated `popover` scope (Design > Components > Dropdown menus). */
+export function popoverThemeScope(theme) {
+  const components = theme && typeof theme === "object" ? theme.components : null;
+  return normaliseThemeComponents({ popover: components && components.popover }).popover || {};
+}
+
+/**
+ * Resolve the `popover` scope. `radius` and `shadow` stay null while unset,
+ * so the panel keeps the `<Overlay>` look every option sheet had before.
+ *
+ * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
+ */
+export function resolvePopoverTokens(theme) {
+  const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
+  const colors = base.colors || DEFAULT_THEME_TOKENS.colors;
+  const levels = base.elevation || DEFAULT_THEME_TOKENS.elevation;
+  const scope = popoverThemeScope(base);
+  return {
+    background: scope.background || colors.surface,
+    textColor: scope.textColor || colors.onSurface,
+    borderColor: scope.borderColor || colors.border,
+    radius: scope.radius ?? null,
+    shadow: scope.shadow ? { ...NO_SHADOW, ...levels[scope.shadow] } : null,
+    dangerColor: colors.danger || DEFAULT_THEME_TOKENS.colors.danger,
+    mutedColor: colors.onSurfaceMuted || DEFAULT_THEME_TOKENS.colors.onSurfaceMuted,
+  };
+}
+
+/**
+ * The style a `popover`-scope panel lays over the `<Overlay>` panel.
+ *
+ * @param {object} popover — `resolvePopoverTokens()`'s result.
+ * @param {"dialog"|"sheet"} presentation — a sheet rounds its top corners only.
+ */
+export function popoverPanelStyle(popover, presentation) {
+  return {
+    backgroundColor: popover.background,
+    borderWidth: POPOVER_BORDER_WIDTH,
+    borderColor: popover.borderColor,
+    ...(popover.radius === null ? null : overlayCornerStyle(popover.radius, presentation)),
+    ...popover.shadow,
+  };
+}
+
+/**
+ * Whether an anchored surface opens as a bottom sheet instead: always on a
+ * device, where a sheet is the platform's own menu, and in a narrow window.
+ *
+ * @param {string} os — `Platform.OS`.
+ * @param {number} windowWidth
+ */
+export function presentsAsSheet(os, windowWidth) {
+  return os !== "web" || isNarrowWidth(windowWidth);
+}
+
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(value, max));
+}
+
+/**
+ * Where a panel goes beside its trigger, in window coordinates. It opens on
+ * the preferred side, flips to the other when that side is short of room and
+ * the other has more, lines up with the trigger's start edge (its end edge
+ * when that would run off screen), and never leaves the screen margin.
+ *
+ * @param {{x: number, y: number, width: number, height: number}} anchor
+ * @param {{width: number, height: number}} panel
+ * @param {{width: number, height: number}} viewport
+ * @param {{placement?: string, gap?: number, margin?: number}} [options]
+ * @returns {{top: number, left: number, placement: "bottom"|"top", maxHeight: number}}
+ */
+export function placePopover(anchor, panel, viewport, options = {}) {
+  const gap = options.gap ?? POPOVER_DEFAULTS.gap;
+  const margin = options.margin ?? POPOVER_DEFAULTS.screenMargin;
+  const preferred = normalisePopoverPlacement(options.placement);
+  const below = viewport.height - margin - (anchor.y + anchor.height + gap);
+  const above = anchor.y - gap - margin;
+  const fitsPreferred = (preferred === "bottom" ? below : above) >= panel.height;
+  const flips = !fitsPreferred && (preferred === "bottom" ? above > below : below > above);
+  const placement = flips ? (preferred === "bottom" ? "top" : "bottom") : preferred;
+  const room = Math.max(0, placement === "bottom" ? below : above);
+  const height = Math.min(panel.height, room);
+  const top =
+    placement === "bottom" ? anchor.y + anchor.height + gap : anchor.y - gap - height;
+
+  const endAligned = anchor.x + anchor.width - panel.width;
+  const startFits = anchor.x + panel.width <= viewport.width - margin;
+  const left = clamp(
+    startFits ? anchor.x : endAligned,
+    margin,
+    Math.max(margin, viewport.width - margin - panel.width),
+  );
+  return { top: Math.max(margin, top), left, placement, maxHeight: room };
+}
+
+/**
+ * A `<Menu>`'s items as it draws them: falsy entries and entries with no
+ * label dropped, `disabled` a boolean, and a stable `key` on each.
+ *
+ * @param {Array<object|null|false|undefined>} items
+ */
+export function menuItemList(items) {
+  const hasLabel = (item) => typeof item.label === "string" ? item.label !== "" : typeof item.label === "number";
+  return (Array.isArray(items) ? items : [])
+    .filter((item) => item && typeof item === "object" && hasLabel(item))
+    .map((item, index) => ({
+      ...item,
+      disabled: Boolean(item.disabled),
+      key: item.key !== undefined && item.key !== null ? String(item.key) : `${index}:${item.label}`,
+    }));
+}

package/dist/popover-view.js

@@ -0,0 +1,252 @@
+// The ONE implementation behind `<Popover>`, and the anchored surface that
+// `<Menu>` and `<Tooltip>` open with. It is drawn in `<Overlay>`, so no card
+// or scroll container clips it on either host. It sits beside its trigger,
+// measured with `measureInWindow`, and flips at the screen edge. On a device
+// and in a narrow window it is a bottom sheet instead.
+//
+// Bound per host by popover.js / popover.native.js, which differ only in
+// where the primitives come from.
+
+import React from "react";
+import { ThemeScope, useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import {
+  POPOVER_BORDER_WIDTH,
+  POPOVER_DEFAULTS,
+  placePopover,
+  popoverPanelStyle,
+  popoverThemeScope,
+  presentsAsSheet,
+  resolvePopoverTokens,
+} from "./popover-tokens.js";
+import { compositeOver } from "./readable-ink.js";
+import { surfaceAwareTheme } from "./surface-theme.js";
+
+const h = React.createElement;
+const UNMEASURABLE = "unmeasurable";
+const HIDDEN = Object.freeze({ opacity: 0 });
+const useNoInsets = () => null;
+const sameSize = (a, b) => Math.abs(a.width - b.width) <= 1 && Math.abs(a.height - b.height) <= 1;
+
+/** The ref an element was created with, on React 18 and on React 19. */
+export function elementRef(element) {
+  const major = Number(String(React.version).split(".")[0]);
+  return major >= 19 ? element.props.ref : element.ref;
+}
+
+/** One callback ref that feeds every ref given, function or object. */
+export function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref && typeof ref === "object") ref.current = node;
+    }
+  };
+}
+
+/**
+ * The trigger element, cloned so a press opens the surface and the surface
+ * can measure it. Its own `onPress` still runs first.
+ */
+export function triggerWith(trigger, { anchorRef, onOpen, extraProps }) {
+  if (!React.isValidElement(trigger)) return null;
+  const own = trigger.props.onPress;
+  return React.cloneElement(trigger, {
+    ref: mergeRefs(elementRef(trigger), anchorRef),
+    onPress: (...args) => {
+      if (typeof own === "function") own(...args);
+      onOpen();
+    },
+    ...extraProps,
+  });
+}
+
+// The trigger's window rectangle, measured each time the surface opens.
+function useAnchorRect(anchorRef, open, windowWidth, windowHeight) {
+  const [rect, setRect] = React.useState(null);
+  React.useEffect(() => {
+    if (!open) {
+      setRect(null);
+      return undefined;
+    }
+    const node = anchorRef.current;
+    if (!node || typeof node.measureInWindow !== "function") {
+      setRect(UNMEASURABLE);
+      return undefined;
+    }
+    let live = true;
+    node.measureInWindow((x, y, width, height) => {
+      if (live) setRect({ x, y, width, height });
+    });
+    return () => {
+      live = false;
+    };
+  }, [anchorRef, open, windowWidth, windowHeight]);
+  return rect;
+}
+
+// A popover scope background re-inks what is drawn on it, as `<Modal>` does.
+function usePanelTheme(theme) {
+  return React.useMemo(() => {
+    const { background } = popoverThemeScope(theme);
+    if (!background) return null;
+    const surface = (theme.colors || DEFAULT_THEME_TOKENS.colors).surface;
+    return surfaceAwareTheme(theme, compositeOver(background, surface));
+  }, [theme]);
+}
+
+/**
+ * Bind the shared surface and `<Popover>` to one platform's primitives.
+ *
+ * @param {{View: any, Platform: any, useWindowDimensions: () => {width: number,
+ *   height: number}, useSafeAreaInsets?: () => ({bottom: number}|null)}} rn
+ * @param {any} Overlay — the host's bound `<Overlay>`.
+ */
+export function makePopover(rn, Overlay) {
+  const { View, Platform, useWindowDimensions } = rn;
+  const useSafeAreaInsets = rn.useSafeAreaInsets || useNoInsets;
+
+  /**
+   * @internal The panel `<Popover>`, `<Menu>` and `<Tooltip>` open. `passive`
+   * (a hovered tooltip) never takes focus or blocks the pointer. `onDismiss`
+   * runs once a closed panel has left the screen (see `<Overlay>`).
+   */
+  function AnchoredSurface({
+    visible,
+    onRequestClose,
+    onDismiss,
+    anchorRef,
+    placement,
+    passive = false,
+    padding = 0,
+    minWidth,
+    maxWidth,
+    accessibilityLabel,
+    closeAccessibilityLabel,
+    testID,
+    children,
+  }) {
+    const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
+    const { width, height } = useWindowDimensions();
+    const insets = useSafeAreaInsets();
+    const popover = React.useMemo(() => resolvePopoverTokens(theme), [theme]);
+    const panelTheme = usePanelTheme(theme);
+    const rect = useAnchorRect(anchorRef, visible, width, height);
+    const [size, setSize] = React.useState(null);
+    React.useEffect(() => setSize(null), [visible]);
+
+    // Still rendered while closed, so the overlay can report its dismissal.
+    if (!visible) return h(Overlay, { visible: false, onDismiss });
+    const body = h(ThemeScope, { theme: panelTheme }, children);
+    const shared = { visible: true, onRequestClose, onDismiss, accessibilityLabel, testID };
+    if (closeAccessibilityLabel) shared.closeAccessibilityLabel = closeAccessibilityLabel;
+
+    if (passive && rect === UNMEASURABLE) return null;
+    if (!passive && (presentsAsSheet(Platform.OS, width) || rect === UNMEASURABLE)) {
+      const bottom = (insets && insets.bottom) || 0;
+      return h(
+        Overlay,
+        {
+          ...shared,
+          presentation: "sheet",
+          style: { ...popoverPanelStyle(popover, "sheet"), padding, paddingBottom: padding + bottom },
+        },
+        body,
+      );
+    }
+
+    // Placed once the panel's natural size is known, and again when it
+    // changes (content that grows must not cover the trigger); hidden until then.
+    const place =
+      rect && rect !== UNMEASURABLE && size
+        ? placePopover(rect, size, { width, height }, { placement })
+        : null;
+    const onLayout = (event) => {
+      const { layout } = event.nativeEvent;
+      const border = 2 * POPOVER_BORDER_WIDTH;
+      const next = { width: layout.width + border, height: layout.height + border };
+      setSize((own) => (own && sameSize(own, next) ? own : next));
+    };
+    return h(
+      Overlay,
+      {
+        ...shared,
+        passive,
+        dismissOnBackdropPress: !passive,
+        backdropAccessible: false,
+        anchoredAt: place ? { top: place.top, left: place.left } : { top: 0, left: 0 },
+        style: [
+          { ...popoverPanelStyle(popover, "dialog"), padding: 0, minWidth, maxWidth },
+          place ? { maxHeight: place.maxHeight } : HIDDEN,
+        ],
+      },
+      h(View, { onLayout, style: { padding, flexShrink: 1 } }, body),
+    );
+  }
+
+  /**
+   * Free content beside a trigger: a filter form, a colour swatch picker, a
+   * detail card. A press on `trigger` opens it; the backdrop, Escape (web)
+   * and the Android back button close it.
+   *
+   * @param {object} props
+   * @param {any} props.trigger — the pressable element that opens it.
+   * @param {any|((api: {close: () => void}) => any)} props.children
+   * @param {boolean} [props.visible] — set it to control the popover.
+   * @param {(visible: boolean) => void} [props.onVisibleChange]
+   * @param {"bottom"|"top"} [props.placement] — default "bottom"; flips.
+   * @param {string} [props.accessibilityLabel] — names the panel.
+   * @param {string} [props.closeAccessibilityLabel] — the sheet backdrop's name.
+   * @param {string} [props.testID] — on the panel.
+   */
+  function Popover({
+    trigger,
+    children,
+    visible,
+    onVisibleChange,
+    placement = "bottom",
+    accessibilityLabel,
+    closeAccessibilityLabel,
+    testID,
+  }) {
+    const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
+    const anchorRef = React.useRef(null);
+    const [ownOpen, setOwnOpen] = React.useState(false);
+    const controlled = typeof visible === "boolean";
+    const open = controlled ? visible : ownOpen;
+    const setOpen = (next) => {
+      if (!controlled) setOwnOpen(next);
+      if (typeof onVisibleChange === "function") onVisibleChange(next);
+    };
+    const close = () => setOpen(false);
+    const spacing = theme.spacing || DEFAULT_THEME_TOKENS.spacing;
+
+    return h(
+      React.Fragment,
+      null,
+      triggerWith(trigger, {
+        anchorRef,
+        onOpen: () => setOpen(true),
+        extraProps: { "aria-haspopup": "dialog", "aria-expanded": open },
+      }),
+      h(
+        AnchoredSurface,
+        {
+          visible: open,
+          onRequestClose: close,
+          anchorRef,
+          placement,
+          padding: spacing.md,
+          maxWidth: POPOVER_DEFAULTS.popoverMaxWidth,
+          accessibilityLabel,
+          closeAccessibilityLabel,
+          testID,
+        },
+        typeof children === "function" ? children({ close }) : children,
+      ),
+    );
+  }
+
+  Popover.displayName = "Popover";
+  return { Popover, AnchoredSurface };
+}

package/dist/popover.js

@@ -0,0 +1,23 @@
+// `<Popover>`, `<Menu>` and `<Tooltip>` (web). Bind ./popover-view.js,
+// ./menu-view.js and ./tooltip-view.js to react-native-web and the web
+// `<Overlay>`; see ./primitives.js for why not the bare specifier.
+
+import * as ReactNative from "react-native-web";
+import { makePopover } from "./popover-view.js";
+import { makeMenu } from "./menu-view.js";
+import { makeTooltip } from "./tooltip-view.js";
+import { Overlay } from "./overlay.js";
+
+const primitives = {
+  View: ReactNative.View,
+  Text: ReactNative.Text,
+  Pressable: ReactNative.Pressable,
+  ScrollView: ReactNative.ScrollView,
+  Platform: ReactNative.Platform,
+  useWindowDimensions: ReactNative.useWindowDimensions,
+};
+
+const { Popover, AnchoredSurface } = makePopover(primitives, Overlay);
+export { Popover };
+export const Menu = makeMenu(primitives, AnchoredSurface);
+export const Tooltip = makeTooltip(primitives, AnchoredSurface);

package/dist/popover.native.js

@@ -0,0 +1,22 @@
+// `<Popover>`, `<Menu>` and `<Tooltip>` (native). Bind the shared views to
+// React Native's own primitives and the native `<Overlay>`; only the imports
+// differ from ./popover.js, plus the safe-area inset a bottom sheet pads by.
+
+import React from "react";
+import { View, Text, Pressable, ScrollView, Platform, useWindowDimensions } from "react-native";
+// Host-provided: the exported app pins it and mounts its provider at the root.
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { makePopover } from "./popover-view.js";
+import { makeMenu } from "./menu-view.js";
+import { makeTooltip } from "./tooltip-view.js";
+import { Overlay } from "./overlay.native.js";
+
+// Null with no provider above, which the view reads as "no insets".
+const useSafeAreaInsets = () => React.useContext(SafeAreaInsetsContext);
+
+const primitives = { View, Text, Pressable, ScrollView, Platform, useWindowDimensions, useSafeAreaInsets };
+
+const { Popover, AnchoredSurface } = makePopover(primitives, Overlay);
+export { Popover };
+export const Menu = makeMenu(primitives, AnchoredSurface);
+export const Tooltip = makeTooltip(primitives, AnchoredSurface);

package/dist/radio-group-logic.js

@@ -0,0 +1,61 @@
+// The `<RadioGroup>` rules that need no renderer: which option is picked,
+// which one holds the group's single tab stop, and where an arrow key moves
+// the choice. Both hosts share them, and the node suite tests them.
+
+export const RADIO_GROUP_VARIANTS = Object.freeze(["list", "card", "segmented"]);
+export const DEFAULT_RADIO_GROUP_VARIANT = "list";
+
+const ARROW_STEP = Object.freeze({ ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 });
+
+/** A requested variant, or the list when it names none we draw. */
+export function radioGroupVariant(variant) {
+  return RADIO_GROUP_VARIANTS.includes(variant) ? variant : DEFAULT_RADIO_GROUP_VARIANT;
+}
+
+function optionList(options) {
+  return Array.isArray(options) ? options.filter((option) => option && typeof option === "object") : [];
+}
+
+function pickable(option, groupDisabled) {
+  return !groupDisabled && !option.disabled;
+}
+
+/** The index of the option whose `value` is `value` (strict), or -1. */
+export function checkedIndex(options, value) {
+  return optionList(options).findIndex((option) => option.value === value);
+}
+
+/**
+ * The option a Tab key lands on: the picked one when it can be picked, else
+ * the first that can, else -1 (nothing to focus).
+ *
+ * @param {Array<{value: any, disabled?: boolean}>} options
+ * @param {any} value
+ * @param {boolean} [groupDisabled]
+ */
+export function tabStopIndex(options, value, groupDisabled = false) {
+  const list = optionList(options);
+  const picked = checkedIndex(list, value);
+  if (picked !== -1 && pickable(list[picked], groupDisabled)) return picked;
+  return list.findIndex((option) => pickable(option, groupDisabled));
+}
+
+/**
+ * The option an arrow key moves the choice to: the next pickable one in that
+ * direction, wrapping at either end. Returns -1 for any other key, or when no
+ * other option can be picked.
+ *
+ * @param {Array<{disabled?: boolean}>} options
+ * @param {number} from — the focused option's index.
+ * @param {string} key — a KeyboardEvent `key`.
+ */
+export function arrowTargetIndex(options, from, key) {
+  const step = ARROW_STEP[key];
+  const list = optionList(options);
+  if (!step || list.length < 2) return -1;
+  for (let hop = 1; hop < list.length; hop += 1) {
+    const at = (((from + step * hop) % list.length) + list.length) % list.length;
+    if (pickable(list[at], false)) return at;
+  }
+  return -1;
+}