@multiplatform.one/theme 6.7.0 → 7.1.0

package/src/theme/groupGeometry.spec.ts

@@ -0,0 +1,108 @@
+import { describe, expect, it } from "vitest";
+import { getGroupPosition, stackEdgeRadius, stackRadiusProps } from "./groupGeometry";
+
+describe("getGroupPosition", () => {
+  it("returns only for singleton or empty groups", () => {
+    expect(getGroupPosition(0, 1)).toBe("only");
+    expect(getGroupPosition(0, 0)).toBe("only");
+  });
+
+  it("maps first/middle/last by index", () => {
+    expect(getGroupPosition(0, 3)).toBe("first");
+    expect(getGroupPosition(1, 3)).toBe("middle");
+    expect(getGroupPosition(2, 3)).toBe("last");
+  });
+
+  it("a two-item group has no middle", () => {
+    expect(getGroupPosition(0, 2)).toBe("first");
+    expect(getGroupPosition(1, 2)).toBe("last");
+  });
+});
+
+describe("stackRadiusProps (vertical)", () => {
+  const r = "$4";
+
+  it("first rounds only the top corners", () => {
+    expect(stackRadiusProps("first", r)).toEqual({
+      borderStartStartRadius: r,
+      borderStartEndRadius: r,
+      borderEndStartRadius: 0,
+      borderEndEndRadius: 0,
+    });
+  });
+
+  it("last rounds only the bottom corners", () => {
+    expect(stackRadiusProps("last", r)).toEqual({
+      borderStartStartRadius: 0,
+      borderStartEndRadius: 0,
+      borderEndStartRadius: r,
+      borderEndEndRadius: r,
+    });
+  });
+
+  it("middle is square on every corner", () => {
+    expect(stackRadiusProps("middle", r)).toEqual({
+      borderStartStartRadius: 0,
+      borderStartEndRadius: 0,
+      borderEndStartRadius: 0,
+      borderEndEndRadius: 0,
+    });
+  });
+
+  it("only rounds all four corners", () => {
+    expect(stackRadiusProps("only", r)).toEqual({
+      borderStartStartRadius: r,
+      borderStartEndRadius: r,
+      borderEndStartRadius: r,
+      borderEndEndRadius: r,
+    });
+  });
+});
+
+describe("stackRadiusProps (horizontal)", () => {
+  const r = "$4";
+
+  it("first rounds only the inline-start corners", () => {
+    expect(stackRadiusProps("first", r, "horizontal")).toEqual({
+      borderStartStartRadius: r,
+      borderEndStartRadius: r,
+      borderStartEndRadius: 0,
+      borderEndEndRadius: 0,
+    });
+  });
+
+  it("last rounds only the inline-end corners", () => {
+    expect(stackRadiusProps("last", r, "horizontal")).toEqual({
+      borderStartStartRadius: 0,
+      borderEndStartRadius: 0,
+      borderStartEndRadius: r,
+      borderEndEndRadius: r,
+    });
+  });
+});
+
+describe("stackEdgeRadius", () => {
+  it("supports conditional edges (open accordion trigger: last item, bottom square)", () => {
+    expect(stackEdgeRadius("$4", { start: false, end: false })).toEqual({
+      borderStartStartRadius: 0,
+      borderStartEndRadius: 0,
+      borderEndStartRadius: 0,
+      borderEndEndRadius: 0,
+    });
+    expect(stackEdgeRadius("$4", { start: true })).toEqual({
+      borderStartStartRadius: "$4",
+      borderStartEndRadius: "$4",
+      borderEndStartRadius: 0,
+      borderEndEndRadius: 0,
+    });
+  });
+
+  it("treats undefined radius as 0 (radius:none world stays square)", () => {
+    expect(stackEdgeRadius(undefined, { start: true, end: true })).toEqual({
+      borderStartStartRadius: 0,
+      borderStartEndRadius: 0,
+      borderEndStartRadius: 0,
+      borderEndEndRadius: 0,
+    });
+  });
+});

package/src/theme/groupGeometry.ts

@@ -0,0 +1,119 @@
+/**
+ * Stacked-group corner geometry — the one canonical mapping from a row's
+ * position in a flush stack to its corner radii (Axiom 1 R-OUTER: a nested
+ * rounded child directly against the frame rounds only the outer corners;
+ * inner boundaries stay square).
+ *
+ * A "stacked group" is any run of flush siblings composing one visual unit —
+ * segmented buttons, grouped inputs, accordion/sidebar rows, list rows. The
+ * FIRST item rounds only its leading corners, the LAST only its trailing
+ * corners, everything between is square, and a lone item keeps the plain
+ * radius. State highlights (hover/press/selection) paint on the row surface
+ * itself, so they inherit exactly this geometry — a uniformly rounded
+ * highlight against a straight interior seam is the defect this module
+ * exists to prevent. Web focus outlines follow the element's border-radius,
+ * so the focus ring inherits the same geometry for free.
+ *
+ * It lives in `@multiplatform.one/theme` because both `components`
+ * (Accordion, List) and `forms` (ToggleGroup, ControlGroup) consume it and
+ * the dependency direction is components → forms → theme (same reasoning as
+ * menuRow.ts). Corners are LOGICAL (start/end) so RTL flips the rounding
+ * with the items — physical corners would land rounded edges on interior
+ * seams (the ControlGroup/ToggleGroup precedent).
+ *
+ * Overlay-clipped stacks (DropdownMenu/Select rows via `menuRowFrame`,
+ * table frames) are the CONTAINER-CLIP arm of the same rule: rows stay flat
+ * and the rounded overflow-hidden container cuts the outer corners. Use that
+ * arm when a rounded clipping container already exists; use this arm when
+ * the rows themselves are the outermost painted surface.
+ */
+
+import { createContext, useContext } from "react";
+
+/** A row's position within its stacked group. */
+export type GroupPosition = "only" | "first" | "middle" | "last";
+
+/** Stacking direction: vertical stacks round top/bottom, horizontal start/end. */
+export type GroupOrientation = "horizontal" | "vertical";
+
+/** Resolve a row index to its group position (count <= 1 is "only"). */
+export function getGroupPosition(index: number, count: number): GroupPosition {
+  if (count <= 1) return "only";
+  if (index <= 0) return "first";
+  if (index >= count - 1) return "last";
+  return "middle";
+}
+
+// A type alias (not interface) so the fragment stays assignable to
+// Record<string, unknown>-typed style bags.
+export type StackRadiusFragment = {
+  borderStartStartRadius: string | number;
+  borderStartEndRadius: string | number;
+  borderEndStartRadius: string | number;
+  borderEndEndRadius: string | number;
+};
+
+/**
+ * Corner fragment for a row whose leading/trailing edge may or may not be
+ * the group's outer edge. `start` is the top edge (vertical) or inline-start
+ * edge (horizontal); `end` the opposite. This is the low-level arm for rows
+ * whose outer-edge status is conditional — an open accordion trigger's
+ * bottom edge abuts its own content, so its bottom corners go square even on
+ * the last item.
+ */
+export function stackEdgeRadius(
+  radius: string | number | undefined,
+  edges: { start?: boolean; end?: boolean },
+  orientation: GroupOrientation = "vertical",
+): StackRadiusFragment {
+  const r = radius ?? 0;
+  const start = edges.start ? r : 0;
+  const end = edges.end ? r : 0;
+  if (orientation === "horizontal") {
+    return {
+      borderStartStartRadius: start,
+      borderEndStartRadius: start,
+      borderStartEndRadius: end,
+      borderEndEndRadius: end,
+    };
+  }
+  return {
+    borderStartStartRadius: start,
+    borderStartEndRadius: start,
+    borderEndStartRadius: end,
+    borderEndEndRadius: end,
+  };
+}
+
+/**
+ * The complete corner fragment for a row at `position` in a stacked group.
+ * Spread it onto the row surface (the element that paints hover/press/
+ * selection) — never cherry-pick single corners out of it.
+ */
+export function stackRadiusProps(
+  position: GroupPosition,
+  radius: string | number | undefined,
+  orientation: GroupOrientation = "vertical",
+): StackRadiusFragment {
+  return stackEdgeRadius(
+    radius,
+    {
+      start: position === "first" || position === "only",
+      end: position === "last" || position === "only",
+    },
+    orientation,
+  );
+}
+
+/**
+ * Group containers provide each item's position so nested compound parts
+ * (an Accordion.Trigger inside an Accordion.Item) resolve their geometry
+ * without prop drilling. `undefined` means "not inside a stacked group" —
+ * consumers treat that as "only".
+ */
+export const GroupPositionContext = createContext<GroupPosition | undefined>(undefined);
+
+/** The current row's position within its stacked group, if any. */
+export function useGroupPosition(): GroupPosition | undefined {
+  return useContext(GroupPositionContext);
+}

package/src/theme/index.ts

@@ -9,6 +9,7 @@ export * from "./defaults/index";
 export * from "./devtools/ThemeDevtoolsPanel";
 export * from "./focusState";
 export * from "./FontKnobStyles";
+export * from "./groupGeometry";
 export * from "./hairline";
 export * from "./Intent";
 export * from "./intents";
@@ -23,6 +24,8 @@ export * from "./readableColor";
 export * from "./recipes";
 export * from "./resolveKnobs";
 export * from "./shared";
+export * from "./sizeRecipes";
+export * from "./Surface";
 
 export * from "./theme";
 export * from "./Tint";

package/src/theme/intent.spec.tsx

@@ -7,6 +7,23 @@ import { describe, expect, it, vi } from "vitest";
 vi.mock("tamagui", () => ({
   Theme: ({ name, children }: { name: string; children: ReactNode }) =>
     createElement("div", { "data-tamagui-theme": name }, children),
+  createStyledContext: (defaults: { size: string; density: string }) => ({
+    Provider: ({
+      children,
+      size,
+      density,
+    }: {
+      children?: ReactNode;
+      size?: string;
+      density?: string;
+    }) =>
+      createElement("div", {
+        "data-surface-size": size ?? defaults.size,
+        "data-surface-density": density ?? defaults.density,
+        children,
+      }),
+    useStyledContext: () => defaults,
+  }),
 }));
 
 import type { ThemeName } from "@tamagui/web";

package/src/theme/knobs.ts

@@ -58,7 +58,7 @@ export const Size = {
 } as const;
 export type Size = (typeof Size)[keyof typeof Size];
 
-/** Global density mode — compact steps size+space down one level. */
+/** Global density mode — compact steps space down one level; size is independent. */
 export const Density = {
   Comfortable: "comfortable",
   Compact: "compact",
@@ -236,7 +236,7 @@ export interface Knobs {
   elevation: Elevation;
   space: Space;
   size: Size;
-  /** Propagating density mode. Default comfortable; compact steps size+space. */
+  /** Propagating density mode. Default comfortable; compact steps space only. */
   density: Density;
   textAccent: TextAccent;
   headingFont: HeadingFont;

package/src/theme/layoutTokens.spec.ts

@@ -2,12 +2,14 @@ import { describe, expect, it } from "vitest";
 import {
   MIN_PRESS_TARGET,
   NARROW_BREAKPOINT,
+  OVERLAY_ANCHOR_GAP,
   OVERLAY_BREAKPOINT,
   READING_WIDTH_CH,
   READING_WIDTH_MAX_CH,
   READING_WIDTH_MIN_CH,
   defaultMaxPanes,
   getLayoutSizeClass,
+  isTouchSurface,
   layoutBreakpoints,
   layoutSizeClassAtLeast,
   pressTargetHitSlop,
@@ -65,6 +67,12 @@ describe("readingWidthStyle (DG-LAY-05)", () => {
   });
 });
 
+describe("overlay anchoring", () => {
+  it("pins the shared trigger↔overlay gap at 4px", () => {
+    expect(OVERLAY_ANCHOR_GAP).toBe(4);
+  });
+});
+
 describe("press target (DG-LAY-04)", () => {
   it("exports 44px floor + hitSlop expansion", () => {
     expect(MIN_PRESS_TARGET).toBe(44);
@@ -73,3 +81,9 @@ describe("press target (DG-LAY-04)", () => {
     expect(pressTargetHitSlop(44)).toEqual({ top: 0, bottom: 0, left: 0, right: 0 });
   });
 });
+
+describe("isTouchSurface (LC-66)", () => {
+  it("is false in the default test environment", () => {
+    expect(isTouchSurface()).toBe(false);
+  });
+});

package/src/theme/layoutTokens.ts

@@ -29,6 +29,7 @@
  * (840→860). Fluent sm=640 matches medium; Fluent lg=1024 matches large.
  */
 
+import { isTouchable, isWebTouchable } from "@multiplatform.one/platform";
 import { useEffect, useState } from "react";
 import { isWeb, useWindowDimensions } from "tamagui";
 import { useResolvedKnobs } from "./useResolvedKnobs";
@@ -170,6 +171,11 @@ export function readingWidthStyle(
 /** Platform floor for interactive targets (Fluent/HIG web+iOS 44; M3 48 on Android). */
 export const MIN_PRESS_TARGET = 44;
 
+/** Touch surfaces — native touchable or web touchable (LC-67). */
+export function isTouchSurface(): boolean {
+  return isTouchable || isWebTouchable;
+}
+
 export type PressTargetStyle = {
   minWidth: number;
   minHeight: number;
@@ -195,6 +201,29 @@ export function pressTargetHitSlop(
   return { top: pad, bottom: pad, left: pad, right: pad };
 }
 
+// ── Overlay anchoring (house rule) ────────────────────────────────────────
+
+/**
+ * House convention for every anchored overlay (Select/Combobox listboxes,
+ * DropdownMenu, Popover, Tooltip, FloatingPanel):
+ *
+ * - Anchored MENUS and SELECT LISTBOXES match the trigger width EXACTLY
+ *   (min-width = trigger width — no oversize fudge). They may grow only
+ *   wider when option content genuinely overflows, never narrower, and
+ *   stay start-aligned (flush with the trigger's leading edge).
+ * - Pointer-positioned CONTEXT MENUS and free POPOVERS/TOOLTIPS size to
+ *   content, start-aligned to their anchor.
+ * - All of them keep `OVERLAY_ANCHOR_GAP` px between trigger edge and
+ *   overlay (floating-ui `offset` / tamagui Popover `offset`), and
+ *   shift/flip at viewport edges instead of overflowing.
+ * - ONE SURFACE OWNER per overlay: the overlay frame draws the single
+ *   border + radius. When a panel intentionally covers its trigger
+ *   (Select's macOS-style aligned listbox), the covered trigger must not
+ *   paint focus decorations — a focus ring outside the trigger's border
+ *   box would ghost around the overlay's corners as a doubled edge.
+ */
+export const OVERLAY_ANCHOR_GAP = 4;
+
 // ── Semantic gaps (DG-LAY-03) ─────────────────────────────────────────────
 
 /**