@multiplatform.one/components 7.7.6 → 7.8.0

package/src/layouts/layouts.spec.tsx

@@ -13,6 +13,7 @@ import * as React from "react";
 import { TamaguiProvider, createTamagui } from "tamagui";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import * as Debug from "./Debug";
+import * as EmptyStateModule from "./EmptyState";
 import * as Layouts from "./index";
 import { Sidebar, type SidebarSection } from "./sidebar";
 import { Toolbar, type ToolbarAction } from "./toolbar";
@@ -72,6 +73,56 @@ describe("Layouts Index", () => {
   it("should export Timeline", () => {
     expect(Layouts).toHaveProperty("Timeline");
   });
+
+  // MPO-223. The per-component `it`s above are a hand-kept list, and a hand-kept
+  // list is how ProgressCard fell off the catalog twice (MPO-53, then 5c7af7134):
+  // nobody adds a line for the module they forgot. This walks the directory
+  // instead, so a new module in src/layouts that nothing re-exports fails here
+  // rather than in a consumer's app.
+  //
+  // Scope is this directory's own modules: the top-level files, plus each
+  // subdirectory's index. A subdirectory's internals stay internal on purpose
+  // (SafeAreaWrapper/insets, KeyboardAvoidingWrapper/behavior), and `.native`
+  // variants are the same module on a platform this runner is not.
+  //
+  // Runtime names only — `import * as` cannot see type-only exports, so the
+  // interfaces ride the typecheck. That is enough for the failure this guards:
+  // a missing VALUE is what breaks a build.
+  it("reaches every module under src/layouts from the barrel", () => {
+    // Negations live in the GLOB, not in a filter below it: `eager: true`
+    // imports every match up front, so a `.stories.tsx` skipped afterwards has
+    // already been loaded — and loading one drags the storybook runtime into a
+    // vitest environment that has no preview API (measured: "does not provide
+    // an export named 'definePreview'", whole suite fails to collect).
+    const modules = import.meta.glob<Record<string, unknown>>(
+      [
+        "./*.tsx",
+        "./*/index.tsx",
+        "!./index.tsx",
+        "!./*.spec.tsx",
+        "!./*.stories.tsx",
+        "!./**/*.spec.tsx",
+        "!./**/*.stories.tsx",
+      ],
+      { eager: true },
+    );
+    const unreachable: string[] = [];
+    for (const [file, mod] of Object.entries(modules)) {
+      for (const name of Object.keys(mod)) {
+        if (name === "default") continue;
+        if (!(name in Layouts)) unreachable.push(`${file} -> ${name}`);
+      }
+    }
+    expect(unreachable).toEqual([]);
+  });
+
+  // The import a consumer actually writes. It passed before EmptyState was
+  // named in index.tsx too — page.tsx re-exported it — and this locks the
+  // identity, not just the presence, so a future shadow cannot quietly swap it.
+  it("exports the same EmptyState from the barrel and from its module", () => {
+    expect(Layouts).toHaveProperty("EmptyState");
+    expect(Layouts.EmptyState).toBe(EmptyStateModule.EmptyState);
+  });
 });
 
 // ---------------------------------------------------------------------------

package/src/layouts/page.designLaw.spec.tsx

@@ -135,4 +135,29 @@ describe("density unpinned (LC-76)", () => {
     const frame = container.querySelector('[data-testid="page-section"]') as HTMLElement;
     expect(frame.getAttribute("data-density")).toBe("compact");
   });
+
+  it("Screen's explicit density override reaches nested page primitives", () => {
+    renderWithProviders(
+      <Preset overrides={{ density: "comfortable" }}>
+        <Screen compact scroll={false}>
+          <PageHeader title="Compact screen" />
+          <PageSection title="Inherited section" />
+        </Screen>
+      </Preset>,
+    );
+    expect(screen.getByTestId("page-header").getAttribute("data-density")).toBe("compact");
+    expect(screen.getByTestId("page-section").getAttribute("data-density")).toBe("compact");
+  });
+
+  it("a painted section steps its interior density without shrinking its heading", () => {
+    renderWithProviders(
+      <Preset overrides={{ density: "comfortable" }}>
+        <PageSection surface title="Outer" data-testid="outer-section">
+          <PageSection title="Inner" data-testid="inner-section" />
+        </PageSection>
+      </Preset>,
+    );
+    expect(screen.getByTestId("outer-section").getAttribute("data-density")).toBe("comfortable");
+    expect(screen.getByTestId("inner-section").getAttribute("data-density")).toBe("compact");
+  });
 });

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)}
@@ -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
@@ -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/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/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.

package/src/views/Dashboard.stories.tsx

@@ -8,7 +8,8 @@ import {
   UsersIcon,
 } from "@phosphor-icons/react";
 import type { Meta } from "@storybook/react-native-web-vite";
-import { Dashboard, type DashboardWidget } from "./Dashboard";
+import { YStack } from "tamagui";
+import { Dashboard, KPICard, type DashboardWidget } from "./Dashboard";
 
 const iconSize = 16;
 
@@ -165,6 +166,42 @@ const meta: Meta = {
 
 export default meta;
 
+export const TrendSentiment = {
+  render: () => (
+    <YStack width="100%" maxWidth={360} gap="$3">
+      <KPICard
+        config={{
+          id: "improving",
+          title: "Improving revenue",
+          value: 120,
+          trend: "up",
+          trendValue: "+12%",
+          goodDirection: "up",
+        }}
+      />
+      <KPICard
+        config={{
+          id: "worsening",
+          title: "Worsening revenue",
+          value: 96,
+          trend: "down",
+          trendValue: "-4%",
+          goodDirection: "up",
+        }}
+      />
+      <KPICard
+        config={{
+          id: "undeclared",
+          title: "Undeclared sentiment",
+          value: 102,
+          trend: "up",
+          trendValue: "2%",
+        }}
+      />
+    </YStack>
+  ),
+};
+
 export const Default = {
   name: "Main",
   render: () => (