@multiplatform.one/components 7.7.6 → 7.10.0

package/src/layouts/page.tsx

@@ -17,6 +17,8 @@
 
 import {
   MIN_PRESS_TARGET,
+  Preset,
+  Surface,
   hairline,
   layoutBreakpoints,
   resolvePageTitleScale,
@@ -55,6 +57,17 @@ function negateSpaceToken(token: string): `$-${string}` {
   return `$-${token.startsWith("$") ? token.slice(1) : token}`;
 }
 
+function knobsFor(component: string, compact: boolean | undefined) {
+  // LC-76: an omitted override must leave density under the preset's control.
+  return compact === undefined ? { component } : { component, compact };
+}
+
+/** Nested surfaces step density only; hue remains inherited (LC-73 / R12). */
+function NestedScale({ density, children }: { density: string; children: ReactNode }) {
+  if (density === "compact") return children;
+  return <Preset overrides={{ density: "compact" }}>{children}</Preset>;
+}
+
 // ---------------------------------------------------------------------------
 // Screen — page outer shell (scroll, max-width, padding, theme background)
 // ---------------------------------------------------------------------------
@@ -76,6 +89,8 @@ export interface ScreenProps extends YStackProps {
   noPadding?: boolean;
   /** Props forwarded to the inner ScrollView when scroll=true. */
   scrollViewProps?: TamaguiScrollViewProps;
+  /** Density override inherited by the subtree. Omitted follows the preset. */
+  compact?: boolean;
 }
 
 /**
@@ -83,8 +98,7 @@ export interface ScreenProps extends YStackProps {
  * compose-only screens.
  *
  * SF-TRANSPARENT + SP-PAD/SP-GAP: panelPadding and gapLg restyle with the
- * density/space knobs (LC-76). Do not wrap in `<Surface density="comfortable">`
- * — that ceiling pinned page inset and made the density knob a no-op.
+ * density/space knobs (LC-76). Only an explicit compact prop overrides density.
  *
  * @example
  * <Screen>
@@ -92,16 +106,26 @@ export interface ScreenProps extends YStackProps {
  *   <FrappeImageView doctype="Pokemon" />
  * </Screen>
  */
-export function Screen({
+export function Screen({ compact, ...props }: ScreenProps) {
+  const density = compact === undefined ? undefined : compact ? "compact" : "comfortable";
+  return (
+    <Surface density={density}>
+      <ScreenInner compact={compact} {...props} />
+    </Surface>
+  );
+}
+
+function ScreenInner({
   children,
   scroll = true,
   maxWidth = CONTENT_MAX_WIDTH,
   bleed = false,
   noPadding = false,
   scrollViewProps,
+  compact,
   ...rest
 }: ScreenProps) {
-  const { knobProps } = useResolvedKnobs({ component: "Screen" });
+  const { knobProps } = useResolvedKnobs(knobsFor("Screen", compact));
 
   const inner = (
     <YStack
@@ -180,6 +204,8 @@ export interface PageHeaderProps extends YStackProps {
    * surface. Semantics (headingLevel) are unchanged either way.
    */
   titleScale?: PageTitleScale;
+  /** Density override. Omitted follows the preset or parent Surface. */
+  compact?: boolean;
 }
 
 /**
@@ -200,10 +226,11 @@ export function PageHeader({
   divider = true,
   headingLevel = 1,
   titleScale,
+  compact,
   children,
   ...rest
 }: PageHeaderProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs(knobsFor("PageHeader", compact));
   const insetToken = usePageChromeInset();
   // DG-A11Y-02: count the built-in title toward the Screen's h1 budget.
   // Custom `heading` nodes have an unknown level and are not registered.
@@ -230,9 +257,10 @@ export function PageHeader({
     (title ? (
       <TitleTag
         margin={0}
-        fontWeight={knobProps.heading.fontWeight}
         {...titleSize}
+        fontWeight={knobProps.heading.fontWeight}
         {...headingFamily}
+        data-font-weight-knob={knobProps.heading.fontWeight === "700" ? "bold" : "regular"}
       >
         {title}
       </TitleTag>
@@ -247,6 +275,7 @@ export function PageHeader({
   return (
     <YStack
       data-testid="page-header"
+      data-density={knobProps.density}
       overflow="visible"
       {...bleed}
       {...(showHairline ? { ...hairline.bottom, borderColor: componentColors.divider } : null)}
@@ -269,7 +298,7 @@ export function PageHeader({
               {titleNode}
               {subtitle ? (
                 // T-HELPER on the shared body fragment — not a local size map.
-                <Paragraph margin={0} {...knobProps.body} color={componentColors.text.muted}>
+                <Paragraph margin={0} {...knobProps.body} color={knobProps.textAccentColor}>
                   {subtitle}
                 </Paragraph>
               ) : null}
@@ -327,6 +356,8 @@ export interface PageSectionProps extends YStackProps {
    * without skips. Visuals are pinned by the shared sectionHeading scale.
    */
   headingLevel?: Exclude<PageHeadingLevel, 1>;
+  /** Density override. Omitted follows the preset or parent Surface. */
+  compact?: boolean;
 }
 
 /**
@@ -340,10 +371,11 @@ export function PageSection({
   divider = true,
   surface = false,
   headingLevel = 2,
+  compact,
   children,
   ...rest
 }: PageSectionProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs(knobsFor("PageSection", compact));
   // See PageHeader: native-only heading family from the headingFont knob.
   const headingFamily = isWeb ? null : { fontFamily: knobProps.heading.fontFamily };
   // The sectionHeading spread pins the visual scale, so stepped levels only
@@ -372,7 +404,7 @@ export function PageSection({
       <YStack gap="$2">
         {headingNode}
         {description ? (
-          <Paragraph margin={0} {...knobProps.body} color={componentColors.text.muted}>
+          <Paragraph margin={0} {...knobProps.body} color={knobProps.textAccentColor}>
             {description}
           </Paragraph>
         ) : null}
@@ -387,11 +419,16 @@ export function PageSection({
   // a sibling flips `surface` — only the section CONTENT earns the card's
   // panelPadding inset (the painted surface owns it, per LC-39's converse).
   return (
-    <YStack {...knobProps.gap} {...rest}>
+    <YStack
+      data-testid="page-section"
+      data-density={knobProps.density}
+      {...knobProps.gap}
+      {...rest}
+    >
       {headerBlock}
       {surface ? (
         <YStack {...knobProps.gap} {...surfaceProps}>
-          {children}
+          <NestedScale density={knobProps.density}>{children}</NestedScale>
         </YStack>
       ) : (
         children

package/src/layouts/sidebar.tsx

@@ -103,7 +103,7 @@ export function Sidebar({
                     fontSize="$2"
                     fontWeight="400"
                     textTransform="uppercase"
-                    color={componentColors.text.muted}
+                    color={knobProps.textAccentColor}
                     // Align with row text (LC-02): the inset rides as MARGIN so
                     // the caption's box starts at the shared row text edge —
                     // padding-based insets left the box at the panel edge, which
@@ -125,7 +125,7 @@ export function Sidebar({
                     const corners = stackRadiusProps(position, knobProps.borderRadius.borderRadius);
                     const itemKey = `${sectionIdx}:${String(item.value ?? item.label)}`;
                     const ink = item.active && onAccent ? onAccent : componentColors.text.primary;
-                    const metaInk = item.active && onAccent ? onAccent : componentColors.text.muted;
+                    const metaInk = item.active && onAccent ? onAccent : knobProps.textAccentColor;
                     const kbFocused = kbFocusKey === itemKey;
                     const pressable = Boolean(item.onPress);
                     const kbRing = kbFocused

package/src/layouts/tags-trigger.spec.tsx

@@ -10,6 +10,7 @@
 // asserts on the atomic classes (same approach as timeline-radius.spec.tsx).
 import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
 import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset } from "@multiplatform.one/theme";
 import * as React from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { Tags } from "./tags";
@@ -72,6 +73,37 @@ describe("Tags Add Tag trigger (chip-scale)", () => {
     expect(classesByPrefix(pill, borderPrefixes).length).toBeGreaterThan(0);
   });
 
+  /**
+   * DG-BOR-01 (MPO-106 D3): the RESOLVER owns the outlined hairline floor —
+   * `outlined` + `none` draws the enumerated `small` stop, 0.5 — and a
+   * component adds no second `Math.max(..., 1)` on top. A local floor made
+   * `small` measure the same as `medium` here and nowhere else, so the Tags
+   * row was the one outlined control the borderWidth knob could not thin.
+   */
+  it.each([
+    ["none", "0--5px"],
+    ["small", "0--5px"],
+    ["medium", "1px"],
+    ["large", "2px"],
+  ] as const)(
+    "outlined borderWidth %s resolves to %s, floored only by the resolver",
+    (borderWidth, px) => {
+      renderWithProviders(
+        <Preset overrides={{ borderWidth, fillStyle: "outlined" }}>
+          <Tags tags={tags} onAdd={vi.fn()} onRemove={vi.fn()} />
+        </Preset>,
+      );
+      const pill = triggerPillOf(screen.getByLabelText("Add Tag"));
+      const chip = chipFrameOf(screen.getByText("urgent"));
+      const edges = ["_btw-", "_bbw-", "_blw-", "_brw-"];
+      const expected = edges.map((edge) => `${edge}${px}`).sort();
+      expect(classesByPrefix(pill, edges)).toEqual(expected);
+      // The trigger and the chips it sits beside share one box at every stop;
+      // a floor on only one of them is what pulled their heights apart.
+      expect(classesByPrefix(chip, edges)).toEqual(expected);
+    },
+  );
+
   it("trigger wrapper carries the D-02 44px press-floor (minHeight class)", () => {
     renderTags();
     const trigger = screen.getByLabelText("Add Tag");

package/src/layouts/tags.tsx

@@ -331,7 +331,7 @@ export function Tags({
   ) : (
     <XStack alignItems="center" gap="$2" opacity={0.5}>
       <TagIcon size={compact ? 14 : 16} />
-      <Text color={componentColors.text.muted} fontSize={compact ? "$1" : "$2"} {...knobProps.body}>
+      <Text color={knobProps.textAccentColor} fontSize={compact ? "$1" : "$2"} {...knobProps.body}>
         {noTagsLabel}
       </Text>
     </XStack>
@@ -473,7 +473,7 @@ export function Tags({
         {suggestionOptions.length > 0 && (
           <Text
             fontSize="$1"
-            color={componentColors.text.muted}
+            color={knobProps.textAccentColor}
             paddingHorizontal="$3"
             paddingVertical="$1.5"
           >
@@ -484,7 +484,7 @@ export function Tags({
         {showEmptyMessage && (
           <Text
             fontSize="$2"
-            color={componentColors.text.muted}
+            color={knobProps.textAccentColor}
             textAlign="center"
             padding="$3"
             {...knobProps.body}
@@ -580,9 +580,6 @@ export function Tags({
               variant="outline"
               backgroundColor="transparent"
               {...knobProps.borderRadius}
-              // Same border width the Chip paints for every tone, so the
-              // trigger's box matches the tag chips it sits beside.
-              borderWidth={Math.max(knobProps.borderRadius.borderWidth, 1)}
               borderColor={componentColors.interactive.border}
               gap={compact ? 0 : "$1"}
               hoverStyle={{ backgroundColor: componentColors.interactive.hover }}
@@ -590,7 +587,7 @@ export function Tags({
               {...(addKbFocus ? ensureFocusVisibleRing() : { outlineWidth: 0 })}
             >
               <PlusIcon size={chipIconSize(chipSize)} />
-              <ChipText size={chipSize} color={componentColors.text.secondary}>
+              <ChipText size={chipSize} color={knobProps.textAccentColor}>
                 {compact ? "\u200B" : addTagLabel}
               </ChipText>
             </ChipFrame>
@@ -625,7 +622,7 @@ export function Tags({
           // sat off the chips' optical line.
           fontSize={chipTextSize(chipSize)}
           color={componentColors.text.primary}
-          placeholderTextColor={componentColors.text.muted}
+          placeholderTextColor={knobProps.textAccentColor as any}
           autoComplete="off"
           role="combobox"
           aria-autocomplete="list"
@@ -644,7 +641,7 @@ export function Tags({
           <Label {...knobProps.label} fontWeight="400">
             {label}
             {maxTags > 0 && (
-              <Text color={componentColors.text.muted} fontSize="$2">
+              <Text color={knobProps.textAccentColor} fontSize="$2">
                 {" "}
                 ({tags.length}/{maxTags})
               </Text>

package/src/layouts/timeline.tsx

@@ -578,7 +578,7 @@ export function Timeline({
       opacity={0.5}
     >
       <ClockIcon size={emptyIconSize} />
-      <Text color={componentColors.text.muted} fontSize={compact ? "$2" : sz} marginTop="$2">
+      <Text color={knobProps.textAccentColor} fontSize={compact ? "$2" : sz} marginTop="$2">
         {noActivityLabel}
       </Text>
     </YStack>
@@ -626,7 +626,7 @@ export function Timeline({
     <YStack gap="$1" marginTop="$1">
       {changes.slice(0, 5).map((change) => (
         <XStack key={change.field} gap="$2" flexWrap="wrap">
-          <Text fontSize="$1" color={componentColors.text.muted} fontWeight="400">
+          <Text fontSize="$1" color={knobProps.textAccentColor} fontWeight="400">
             {change.fieldLabel || change.field}:
           </Text>
           {change.old !== undefined && (
@@ -639,7 +639,7 @@ export function Timeline({
             </Text>
           )}
           {change.old !== undefined && change.new !== undefined && (
-            <Text fontSize="$1" color={componentColors.text.muted}>
+            <Text fontSize="$1" color={knobProps.textAccentColor}>
               {"→"}
             </Text>
           )}
@@ -651,7 +651,7 @@ export function Timeline({
         </XStack>
       ))}
       {changes.length > 5 && (
-        <Text fontSize="$1" color={componentColors.text.muted} fontStyle="italic">
+        <Text fontSize="$1" color={knobProps.textAccentColor} fontStyle="italic">
           +{changes.length - 5} more changes
         </Text>
       )}
@@ -996,7 +996,7 @@ export function Timeline({
           {/* Entry count hides on error so the badge can't lie (DG-ST-04).
               Bidi-isolated so RTL contexts keep "7 entries" in one run. */}
           {entries.length > 0 && !hasError && (
-            <Text fontSize="$2" color={componentColors.text.muted}>
+            <Text fontSize="$2" color={knobProps.textAccentColor}>
               {bidiIsolate(`${entries.length} ${entries.length === 1 ? entryLabel : entriesLabel}`)}
             </Text>
           )}

package/src/shared/useKeyboardInset.native.ts

@@ -0,0 +1,43 @@
+/**
+ * How many points of the native screen the software keyboard currently covers.
+ *
+ * A sheet that ignores this draws its frame UNDER the keyboard: the last row
+ * is sliced mid-glyph, the rounded top edge lands on top of the autocomplete
+ * suggestion strip, and the field being typed into can be occluded by it
+ * (MPO-64). KeyboardAvoidingView is not enough inside a `Modal` — it pads the
+ * container but the sheet keeps whatever fixed height it was given, so it
+ * simply overflows off the top instead of shrinking.
+ *
+ * The number comes from the platform, never from a constant: the suggestion
+ * strip is exactly the band that overlapped, and its height varies with the
+ * field, the language and whether QuickType is on.
+ */
+
+import { useEffect, useState } from "react";
+import { Dimensions, Keyboard, Platform } from "react-native";
+
+export function useKeyboardInset(): number {
+  const [inset, setInset] = useState(0);
+
+  useEffect(() => {
+    // iOS fires the *Will* pair one frame before the animation, so the sheet
+    // resizes with the keyboard rather than after it. Android has no *Will*.
+    const showEvent = Platform.OS === "ios" ? "keyboardWillChangeFrame" : "keyboardDidShow";
+    const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+
+    const show = Keyboard.addListener(showEvent, (event) => {
+      const screen = event?.endCoordinates;
+      if (!screen) return;
+      const windowHeight = Dimensions.get("window").height;
+      setInset(Math.max(0, Math.round(windowHeight - screen.screenY)));
+    });
+    const hide = Keyboard.addListener(hideEvent, () => setInset(0));
+
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+
+  return inset;
+}

package/src/shared/useKeyboardInset.ts

@@ -1,43 +1,4 @@
-/**
- * How many points of the screen the software keyboard currently covers.
- *
- * A sheet that ignores this draws its frame UNDER the keyboard: the last row
- * is sliced mid-glyph, the rounded top edge lands on top of the autocomplete
- * suggestion strip, and the field being typed into can be occluded by it
- * (MPO-64). KeyboardAvoidingView is not enough inside a `Modal` — it pads the
- * container but the sheet keeps whatever fixed height it was given, so it
- * simply overflows off the top instead of shrinking.
- *
- * The number comes from the platform, never from a constant: the suggestion
- * strip is exactly the band that overlapped, and its height varies with the
- * field, the language and whether QuickType is on.
- */
-
-import { useEffect, useState } from "react";
-import { Dimensions, Keyboard, Platform } from "react-native";
-
+/** Web overlays use the browser viewport; native overlays measure the keyboard band. */
 export function useKeyboardInset(): number {
-  const [inset, setInset] = useState(0);
-
-  useEffect(() => {
-    // iOS fires the *Will* pair one frame before the animation, so the sheet
-    // resizes with the keyboard rather than after it. Android has no *Will*.
-    const showEvent = Platform.OS === "ios" ? "keyboardWillChangeFrame" : "keyboardDidShow";
-    const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
-
-    const show = Keyboard.addListener(showEvent, (event) => {
-      const screen = event?.endCoordinates;
-      if (!screen) return;
-      const windowHeight = Dimensions.get("window").height;
-      setInset(Math.max(0, Math.round(windowHeight - screen.screenY)));
-    });
-    const hide = Keyboard.addListener(hideEvent, () => setInset(0));
-
-    return () => {
-      show.remove();
-      hide.remove();
-    };
-  }, []);
-
-  return inset;
+  return 0;
 }

package/src/surfaces.spec.tsx

@@ -1,10 +1,19 @@
 import { renderWithProviders } from "@multiplatform.one/test-utils";
-import { Preset } from "@multiplatform.one/theme";
-import { cleanup } from "@testing-library/react";
+import { Preset, type Knobs } from "@multiplatform.one/theme";
+import { defaultConfig } from "@tamagui/config/v5";
+import { cleanup, render } from "@testing-library/react";
 import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { Card as TamaguiCard, Dialog, Popover, Sheet } from "tamagui";
+import {
+  AlertDialog,
+  Card as TamaguiCard,
+  createTamagui,
+  Dialog,
+  Popover,
+  Sheet,
+  TamaguiProvider,
+} from "tamagui";
 import { afterEach, describe, expect, it } from "vitest";
 import { Button } from "./Button";
 import * as pkg from "./index";
@@ -183,3 +192,88 @@ describe("DialogContent paints the OVERLAY elevation stop, not the control one (
     );
   });
 });
+
+// ── Overlay child-clip cap (MPO-150) ─────────────────────────────────────
+//
+// Axiom 1 CLIP files "children positioned toward the corners (Card, Panel,
+// Dialog)" under R-SCALE + clip cap: radius rides the scale, capped by the
+// container's own padding. R-SCALE is the immunity axis, CONTAINER-CAP the
+// resolution axis (Part 2 § Radius) — the Part 3 row naming only R-SCALE is
+// not a second ruling. `elevatedSurface` carries the UNCAPPED scale token,
+// so each padded overlay must spread `containerRadius` AFTER it; four did
+// and PopoverContent did not, rendering a 50px corner on an 18px inset.
+
+const overlayCapConfig = createTamagui(defaultConfig);
+
+const overlayCapCorners = [
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomRightRadius",
+  "borderBottomLeftRadius",
+] as const;
+
+describe("overlay containers take the Axiom 1 child-clip cap (MPO-150)", () => {
+  afterEach(cleanup);
+
+  it("PopoverContent spreads containerRadius after elevatedSurface, as its four siblings do", () => {
+    const src = readFileSync(join(dirname(fileURLToPath(import.meta.url)), "surfaces.tsx"), "utf8");
+    const popover = src.slice(src.indexOf("// ── PopoverContent"), src.indexOf("// ── SheetFrame"));
+    const elevated = popover.indexOf("knobProps.elevatedSurface");
+    const capped = popover.indexOf("knobProps.containerRadius");
+    expect(elevated, "PopoverContent binds elevatedSurface").toBeGreaterThan(-1);
+    expect(capped, "PopoverContent binds containerRadius").toBeGreaterThan(-1);
+    expect(capped, "the cap must spread AFTER the uncapped scale token").toBeGreaterThan(elevated);
+  });
+
+  for (const [borderRadius, stop] of Object.entries({ medium: 9, large: 16, full: 50 })) {
+    for (const [space, inset] of Object.entries({ small: 13, medium: 18, large: 32 })) {
+      const capped = Math.min(stop, inset);
+      it(`caps every overlay frame at ${capped}px for borderRadius=${borderRadius}/space=${space}`, () => {
+        render(
+          <TamaguiProvider config={overlayCapConfig} defaultTheme="light">
+            <Preset
+              overrides={{
+                borderRadius: borderRadius as Knobs["borderRadius"],
+                space: space as Knobs["space"],
+                density: "comfortable",
+              }}
+            >
+              <Dialog modal open>
+                <Dialog.Portal>
+                  <DialogContent testID="cap-dialog">dialog</DialogContent>
+                </Dialog.Portal>
+              </Dialog>
+              <AlertDialog modal open>
+                <AlertDialog.Portal>
+                  <AlertDialogContent testID="cap-alertdialog">alert</AlertDialogContent>
+                </AlertDialog.Portal>
+              </AlertDialog>
+              <Popover open>
+                <PopoverContent testID="cap-popover">popover</PopoverContent>
+              </Popover>
+              <Sheet open>
+                <SheetFrame testID="cap-sheet">sheet</SheetFrame>
+              </Sheet>
+              <Panel testID="cap-panel">panel</Panel>
+            </Preset>
+          </TamaguiProvider>,
+        );
+
+        for (const id of [
+          "cap-dialog",
+          "cap-alertdialog",
+          "cap-popover",
+          "cap-sheet",
+          "cap-panel",
+        ]) {
+          const frame = document.querySelector(`[data-testid="${id}"]`);
+          expect(frame, `${id} frame`).toBeTruthy();
+          const style = getComputedStyle(frame as Element);
+          for (const corner of overlayCapCorners) {
+            expect(style[corner], `${id} ${corner}`).toBe(`${capped}px`);
+          }
+        }
+      });
+    }
+  }
+});

package/src/surfaces.tsx

@@ -267,8 +267,9 @@ export const AlertDialogOverlay = forwardRef<
 // content, start-aligned to their anchor with the shared gap (the caller's
 // tamagui <Popover offset={OVERLAY_ANCHOR_GAP}>), flipping/shifting at
 // viewport edges. This frame is the overlay's single surface owner —
-// border + radius come only from the elevatedSurface recipe here; children
-// must not draw their own outer border.
+// border comes from the elevatedSurface recipe and radius from the
+// containerRadius cap spread over it; children must not draw their own
+// outer border.
 
 export const PopoverContent = forwardRef<TamaguiElement, ViewProps & { children?: ReactNode }>(
   function PopoverContent({ children, ...props }, ref) {
@@ -277,6 +278,7 @@ export const PopoverContent = forwardRef<TamaguiElement, ViewProps & { children?
       <Popover.Content
         ref={ref}
         {...knobProps.elevatedSurface}
+        {...knobProps.containerRadius}
         transition={knobProps.transition}
         enterStyle={overlayEnterExit}
         exitStyle={overlayEnterExit}

package/src/tamagui.spec.ts

@@ -16,9 +16,13 @@
  *  4. House shadows (Tabs, Tooltip, Card, Toast, …) must stay the house
  *     versions, not the tamagui primitives.
  */
+import { readdirSync, readFileSync } from "node:fs";
+import { join } from "node:path";
 import * as tamagui from "tamagui";
+import * as tamaguiLinearGradient from "tamagui/linear-gradient";
 import { describe, expect, it } from "vitest";
 import * as pkg from "./index";
+import * as houseTamagui from "./tamagui";
 
 const EXCLUDED_BARE_NAMES = [
   "Checkbox",
@@ -44,12 +48,19 @@ const ALLOWLIST_VALUE_NAMES = [
   // barrel and had been red ever since. MPO-78: CI runs `turbo run build`
   // only, so nothing caught it.)
   "Circle",
+  // MPO-21 G1 / G3 / G4. Restored by MPO-148; MPO-169 locks them here so a
+  // later Adapt-style rewrite cannot drop them without this spec going red.
+  // LinearGradient (G2) is not on the main tamagui barrel — see the dedicated
+  // assertion below rather than this identity check.
+  "Collapsible",
   "Group",
   "ListItem",
   "ScrollView",
   "Spacer",
   "Square",
+  "Unspaced",
   "View",
+  "VisuallyHidden",
   "XGroup",
   "XStack",
   "YGroup",
@@ -205,8 +216,60 @@ describe("curated tamagui surface", () => {
       ).toBe((tamagui as Record<string, unknown>)[name]);
     }
   });
+
+  it("exports LinearGradient from tamagui/linear-gradient, not the main tamagui barrel", () => {
+    expect((tamagui as Record<string, unknown>).LinearGradient).toBeUndefined();
+    expect(houseTamagui.LinearGradient).toBe(tamaguiLinearGradient.LinearGradient);
+    expect(pkg.LinearGradient).toBe(tamaguiLinearGradient.LinearGradient);
+  });
+
+  it("every Components story import from ./tamagui is a live barrel export (MPO-169)", () => {
+    const exported = new Set(Object.keys(houseTamagui));
+    const missing: string[] = [];
+    for (const file of walkStoryFiles(import.meta.dirname)) {
+      for (const name of namedValueImportsFromHouseTamagui(readFileSync(file, "utf8"))) {
+        if (!exported.has(name)) {
+          missing.push(`${file.slice(import.meta.dirname.length + 1)}:${name}`);
+        }
+      }
+    }
+    expect(
+      missing,
+      `stories import names ./tamagui.ts does not export: ${missing.join(", ")}`,
+    ).toEqual([]);
+  });
 });
 
+function walkStoryFiles(dir: string): string[] {
+  const out: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) out.push(...walkStoryFiles(path));
+    else if (/\.stories\.tsx?$/.test(entry.name)) out.push(path);
+  }
+  return out;
+}
+
+function namedValueImportsFromHouseTamagui(src: string): string[] {
+  const names: string[] = [];
+  const re = /import\s+(type\s+)?\{([^}]+)\}\s+from\s+["']\.\/tamagui["']/g;
+  for (const match of src.matchAll(re)) {
+    const wholeClauseIsType = Boolean(match[1]);
+    for (const raw of match[2].split(",")) {
+      const part = raw.trim();
+      if (!part) continue;
+      if (wholeClauseIsType || /^type\s/.test(part)) continue;
+      names.push(
+        part
+          .replace(/^type\s+/, "")
+          .split(/\s+as\s+/)[0]
+          .trim(),
+      );
+    }
+  }
+  return names;
+}
+
 // ---------------------------------------------------------------------------
 // Type-level locks (checked by `tsc --noEmit`, not vitest): excluded Props
 // types must not be re-exported either, and allowlisted types must exist.