@multiplatform.one/components 7.4.0 → 7.5.0

package/src/layouts/layouts.spec.tsx

@@ -208,6 +208,15 @@ describe("Toolbar", () => {
     expect(screen.getByText("Refresh")).toBeInTheDocument();
   });
 
+  it("R7: action label TEXT NODE is weight 400, never 500/600", () => {
+    renderWithProviders(<Toolbar primaryActions={[{ label: "Save", onPress: () => {} }]} />);
+    const node = screen.getByText("Save");
+    expect(node.tagName).not.toBe("BUTTON");
+    expect(node.className).toMatch(/_fow-400\b/);
+    expect(node.className).not.toMatch(/_fow-500\b/);
+    expect(node.className).not.toMatch(/_fow-600\b/);
+  });
+
   it("explains disabled actions via disabledReason; loading is busy, not bare-disabled (DG-ST-03)", () => {
     const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
     const onPublish = vi.fn();
@@ -290,6 +299,39 @@ describe("ViewSwitcher", () => {
     expect(selected.className).toContain(`_bg-hsla${tintDigits}`);
     expect(idle.className).not.toContain(`_bg-hsla${tintDigits}`);
   });
+
+  function atoms(el: Element, prefixes: string[]): string[] {
+    return String((el as HTMLElement).className || "")
+      .split(" ")
+      .filter((c) => prefixes.some((p) => c.startsWith(p)))
+      .sort();
+  }
+
+  it("measures the segment label on the text node — never 500 or 600 (§6.1 / R7)", () => {
+    const views: ViewOption[] = [
+      { type: "list", label: "List" },
+      { type: "table", label: "Table" },
+    ];
+    renderWithProviders(<ViewSwitcher views={views} currentView="list" onViewChange={() => {}} />);
+    const textNode = screen.getByText("List");
+    const weight = atoms(textNode, ["_fow-"]);
+    expect(weight.length).toBeGreaterThan(0);
+    expect(weight.join(" ")).not.toMatch(/500|600|weight-5|weight-6|fow-5|fow-6/);
+  });
+
+  it("puts data-testid, data-density and data-size on the root", () => {
+    const views: ViewOption[] = [
+      { type: "list", label: "List" },
+      { type: "table", label: "Table" },
+    ];
+    const { container } = renderWithProviders(
+      <ViewSwitcher views={views} currentView="list" onViewChange={() => {}} />,
+    );
+    const root = container.querySelector('[data-testid="view-switcher"]') as HTMLElement;
+    expect(root).toBeTruthy();
+    expect(root.getAttribute("data-size")).toBeTruthy();
+    expect(root.getAttribute("data-density")).toBeTruthy();
+  });
 });
 
 // ---------------------------------------------------------------------------
@@ -408,6 +450,16 @@ describe("Attachments", () => {
     expect(screen.queryByText(/\(0\/10\)/)).toBeNull();
     expect(screen.queryByText("Upload")).toBeNull();
   });
+
+  it("R7: Upload label TEXT NODE is weight 400", () => {
+    const { Attachments } = Layouts;
+    renderWithProviders(<Attachments items={[]} onAdd={() => {}} />);
+    const node = screen.getByText("Upload");
+    expect(node.tagName).not.toBe("BUTTON");
+    expect(node.className).toMatch(/_fow-400\b/);
+    expect(node.className).not.toMatch(/_fow-500\b/);
+    expect(node.className).not.toMatch(/_fow-600\b/);
+  });
 });
 
 // ---------------------------------------------------------------------------

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

@@ -0,0 +1,138 @@
+import { Preset } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen } from "@testing-library/react";
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { afterEach, describe, expect, it } from "vitest";
+import { ListPageLayout } from "./PageTemplates";
+import { PageHeader, PageSection, Screen } from "./page";
+
+function readSibling(name: string) {
+  return readFileSync(join(import.meta.dirname, name), "utf8");
+}
+
+function atoms(el: Element, prefixes: string[]): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => prefixes.some((p) => c.startsWith(p)))
+    .sort();
+}
+
+afterEach(cleanup);
+
+describe("page layouts named exports", () => {
+  it("page.tsx and PageTemplates export named functions only", () => {
+    const page = readSibling("page.tsx");
+    const templates = readSibling("PageTemplates.tsx");
+    expect(page).toMatch(/export function Screen/);
+    expect(page).toMatch(/export function PageHeader/);
+    expect(page).toMatch(/export function PageSection/);
+    expect(templates).toMatch(/export function ListPageLayout/);
+    expect(templates).toMatch(/export function DetailPageLayout/);
+    expect(templates).toMatch(/export function SettingsPageLayout/);
+    expect(page).not.toMatch(/export default/);
+    expect(templates).not.toMatch(/export default/);
+  });
+});
+
+describe("R12 — no Tint wrap", () => {
+  it("page.tsx does not wrap Tint; NestedScale is the nest dialect", () => {
+    const src = readSibling("page.tsx");
+    expect(src).not.toMatch(/from ["'][^"']*Tint["']/);
+    expect(src).not.toMatch(/<[Tt]int[\s/>]/);
+    expect(src).toMatch(/function NestedScale/);
+    expect(src).not.toMatch(/<Surface density="comfortable">/);
+  });
+});
+
+describe("PageHeader / PageSection labels — weight 400, never 600 (R7)", () => {
+  it("page title rides the fontWeight knob and is not 600", () => {
+    renderWithProviders(<PageHeader title="Workspace Settings" />);
+    const title = screen.getByText("Workspace Settings");
+    const weight = atoms(title, ["_fow-"]);
+    expect(weight.length).toBeGreaterThan(0);
+    expect(weight.join(" ")).not.toMatch(/600|weight-6|fow-6/);
+  });
+
+  it("section title rides the fontWeight knob and is not 600", () => {
+    renderWithProviders(<PageSection title="Profile" />);
+    const title = screen.getByText("Profile");
+    const weight = atoms(title, ["_fow-"]);
+    expect(weight.length).toBeGreaterThan(0);
+    expect(weight.join(" ")).not.toMatch(/600|weight-6|fow-6/);
+  });
+
+  it("bold fontWeight knob restyles the page title without landing on 600", () => {
+    renderWithProviders(
+      <Preset overrides={{ fontWeight: "bold" }}>
+        <PageHeader title="Workspace Settings" />
+      </Preset>,
+    );
+    const title = screen.getByText("Workspace Settings");
+    const weight = atoms(title, ["_fow-"]);
+    expect(weight.length).toBeGreaterThan(0);
+    expect(weight.join(" ")).not.toMatch(/600|weight-6|fow-6/);
+  });
+});
+
+describe("density unpinned (LC-76)", () => {
+  it("PageHeader publishes density and does not pin compact", () => {
+    const { container } = renderWithProviders(<PageHeader title="Workspace" />);
+    const frame = container.querySelector('[data-testid="page-header"]') as HTMLElement;
+    expect(frame.getAttribute("data-density")).toBeTruthy();
+    expect(frame.getAttribute("data-density")).not.toBe("");
+  });
+
+  it("omitted compact follows the density knob on Screen and templates", () => {
+    const comfortable = renderWithProviders(
+      <Preset overrides={{ density: "comfortable" }}>
+        <Screen data-testid="screen-shell">
+          <PageHeader title="Comfortable" />
+        </Screen>
+      </Preset>,
+    );
+    const comfortableScreen = comfortable.container.querySelector(
+      '[data-testid="screen-shell"]',
+    ) as HTMLElement;
+    const comfortableHeader = comfortable.container.querySelector(
+      '[data-testid="page-header"]',
+    ) as HTMLElement;
+    expect(comfortableScreen.getAttribute("data-density")).toBe("comfortable");
+    expect(comfortableHeader.getAttribute("data-density")).toBe("comfortable");
+    cleanup();
+
+    const compact = renderWithProviders(
+      <Preset overrides={{ density: "compact" }}>
+        <Screen data-testid="screen-shell">
+          <PageHeader title="Compact" />
+        </Screen>
+      </Preset>,
+    );
+    const compactScreen = compact.container.querySelector(
+      '[data-testid="screen-shell"]',
+    ) as HTMLElement;
+    const compactHeader = compact.container.querySelector(
+      '[data-testid="page-header"]',
+    ) as HTMLElement;
+    expect(compactScreen.getAttribute("data-density")).toBe("compact");
+    expect(compactHeader.getAttribute("data-density")).toBe("compact");
+  });
+
+  it("ListPageLayout rides the density knob through Screen", () => {
+    renderWithProviders(
+      <Preset overrides={{ density: "compact" }}>
+        <ListPageLayout title="Pokemon" data-testid="list-shell">
+          <span>rows</span>
+        </ListPageLayout>
+      </Preset>,
+    );
+    expect(screen.getByTestId("list-shell").getAttribute("data-density")).toBe("compact");
+    expect(screen.getByTestId("page-header").getAttribute("data-density")).toBe("compact");
+  });
+
+  it("explicit compact publishes compact density", () => {
+    const { container } = renderWithProviders(<PageSection compact title="Profile" />);
+    const frame = container.querySelector('[data-testid="page-section"]') as HTMLElement;
+    expect(frame.getAttribute("data-density")).toBe("compact");
+  });
+});

package/src/layouts/page.tsx

@@ -16,7 +16,7 @@
  */
 
 import {
-  Surface,
+  MIN_PRESS_TARGET,
   hairline,
   layoutBreakpoints,
   resolvePageTitleScale,
@@ -82,21 +82,17 @@ export interface ScreenProps extends YStackProps {
  * Outer page shell. Pairs with PageHeader/Section/EmptyState for thin
  * 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.
+ *
  * @example
  * <Screen>
  *   <PageHeader title="Pokemon" subtitle="A list of pokemon" />
  *   <FrappeImageView doctype="Pokemon" />
  * </Screen>
  */
-export function Screen(props: ScreenProps) {
-  return (
-    <Surface density="comfortable">
-      <ScreenInner {...props} />
-    </Surface>
-  );
-}
-
-function ScreenInner({
+export function Screen({
   children,
   scroll = true,
   maxWidth = CONTENT_MAX_WIDTH,
@@ -105,10 +101,12 @@ function ScreenInner({
   scrollViewProps,
   ...rest
 }: ScreenProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ component: "Screen" });
 
   const inner = (
     <YStack
+      data-testid="screen"
+      data-density={knobProps.density}
       flex={1}
       width="100%"
       {...(maxWidth && !bleed ? { maxWidth, alignSelf: "center" } : null)}
@@ -422,14 +420,26 @@ export interface ScreenToolbarProps extends XStackProps {
  * primary action" pattern at the top of detail screens.
  *
  * For full action-array driven toolbars use the existing `Toolbar` component.
+ *
+ * SP-PAD + SP-GAP on the bar; child actions own size/radius/A-STATE (Button
+ * contract). Nested under Screen, the bar bleeds Screen's inset then
+ * re-applies panelPadding so the row shares the page line (LC-38) without
+ * double-padding.
  */
 export function ScreenToolbar({ leading, trailing, children, ...rest }: ScreenToolbarProps) {
-  const { knobProps } = useResolvedKnobs();
+  const { knobProps } = useResolvedKnobs({ component: "ScreenToolbar" });
+  const insetToken = usePageChromeInset();
+  const bleed = insetToken ? { marginHorizontal: negateSpaceToken(insetToken) as "$4" } : null;
   return (
     <XStack
+      data-testid="screen-toolbar"
+      data-density={knobProps.density}
       justifyContent="space-between"
       alignItems="center"
       flexWrap="wrap"
+      minHeight={MIN_PRESS_TARGET}
+      {...bleed}
+      {...knobProps.panelPadding}
       {...knobProps.gap}
       {...rest}
     >

package/src/layouts/screen-family.spec.tsx

@@ -0,0 +1,126 @@
+import { cleanup } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { Preset, defaultKnobs, resolveKnobs } from "@multiplatform.one/theme";
+import { afterEach, describe, expect, it } from "vitest";
+import * as Layouts from "./index";
+import { Screen, ScreenToolbar } from "./page";
+
+afterEach(cleanup);
+
+function padAtoms(el: Element): string[] {
+  return String((el as HTMLElement).className || "")
+    .split(" ")
+    .filter((c) => c.startsWith("_p-") || c.startsWith("_pt-") || c.startsWith("_pad"))
+    .sort();
+}
+
+describe("Screen family named exports", () => {
+  it("exports Screen, ScreenToolbar, SafeAreaWrapper, and KeyboardAvoidingWrapper", () => {
+    expect(typeof Layouts.Screen).toBe("function");
+    expect(typeof Layouts.ScreenToolbar).toBe("function");
+    expect(typeof Layouts.SafeAreaWrapper).toBe("function");
+    expect(typeof Layouts.KeyboardAvoidingWrapper).toBe("function");
+    expect(Layouts).not.toHaveProperty("default");
+  });
+});
+
+describe("Screen density (LC-76)", () => {
+  it("publishes the resolved density and does not pin comfortable", () => {
+    const { container } = renderWithProviders(
+      <Screen scroll={false}>
+        <span>Page body</span>
+      </Screen>,
+    );
+    const frame = container.querySelector('[data-testid="screen"]') as HTMLElement;
+    expect(frame).toBeTruthy();
+    expect(frame.getAttribute("data-density")).toBe(resolveKnobs(defaultKnobs).knobProps.density);
+  });
+
+  it("lets a compact preset restyle the page inset", () => {
+    const { container } = renderWithProviders(
+      <Preset overrides={{ density: "compact" }}>
+        <Screen scroll={false}>
+          <span>Compact page</span>
+        </Screen>
+      </Preset>,
+    );
+    const frame = container.querySelector('[data-testid="screen"]') as HTMLElement;
+    expect(frame.getAttribute("data-density")).toBe("compact");
+  });
+
+  it("noPadding skips panel padding", () => {
+    const padded = renderWithProviders(
+      <Screen scroll={false}>
+        <span>Padded</span>
+      </Screen>,
+    );
+    const paddedFrame = padded.container.querySelector('[data-testid="screen"]') as HTMLElement;
+    cleanup();
+    const bare = renderWithProviders(
+      <Screen scroll={false} noPadding>
+        <span>Bare</span>
+      </Screen>,
+    );
+    const bareFrame = bare.container.querySelector('[data-testid="screen"]') as HTMLElement;
+    expect(padAtoms(paddedFrame).length).toBeGreaterThan(0);
+    expect(padAtoms(bareFrame)).not.toEqual(padAtoms(paddedFrame));
+  });
+});
+
+describe("ScreenToolbar padding and containment", () => {
+  it("spreads panelPadding and gap on the bar", () => {
+    const { container } = renderWithProviders(
+      <ScreenToolbar leading={<span>Back</span>} trailing={<span>Save</span>} />,
+    );
+    const bar = container.querySelector('[data-testid="screen-toolbar"]') as HTMLElement;
+    expect(bar).toBeTruthy();
+    expect(bar.getAttribute("data-density")).toBe(resolveKnobs(defaultKnobs).knobProps.density);
+    expect(padAtoms(bar).length).toBeGreaterThan(0);
+  });
+
+  it("wraps long actions instead of painting past a narrow frame (LC-10)", () => {
+    const { container } = renderWithProviders(
+      <ScreenToolbar
+        leading={<span>Back to the previous screen</span>}
+        trailing={
+          <>
+            <span>Duplicate</span>
+            <span>Archive</span>
+            <span>Delete permanently</span>
+            <span>Save changes</span>
+          </>
+        }
+      />,
+    );
+    const bar = container.querySelector('[data-testid="screen-toolbar"]') as HTMLElement;
+    expect(bar).toBeTruthy();
+    const style = bar.getAttribute("style") || bar.className;
+    expect(style).toMatch(/wrap|flex-wrap|_fw-/);
+  });
+
+  it("bleeds Screen inset so nested toolbars do not double-pad (LC-38)", () => {
+    const standalone = renderWithProviders(<ScreenToolbar leading={<span>Back</span>} />);
+    const standaloneBar = standalone.container.querySelector(
+      '[data-testid="screen-toolbar"]',
+    ) as HTMLElement;
+    const standaloneMargin = String(standaloneBar.className || "")
+      .split(" ")
+      .filter((c) => c.startsWith("_mx-") || c.startsWith("_ml-") || c.startsWith("_mr-"))
+      .sort();
+    cleanup();
+
+    const nested = renderWithProviders(
+      <Screen scroll={false}>
+        <ScreenToolbar leading={<span>Back</span>} />
+      </Screen>,
+    );
+    const nestedBar = nested.container.querySelector(
+      '[data-testid="screen-toolbar"]',
+    ) as HTMLElement;
+    const nestedMargin = String(nestedBar.className || "")
+      .split(" ")
+      .filter((c) => c.startsWith("_mx-") || c.startsWith("_ml-") || c.startsWith("_mr-"))
+      .sort();
+    expect(nestedMargin).not.toEqual(standaloneMargin);
+  });
+});

package/src/layouts/sidebar.tsx

@@ -101,7 +101,7 @@ export function Sidebar({
                     id={titleId}
                     size={knobProps.sizeToken}
                     fontSize="$2"
-                    fontWeight="600"
+                    fontWeight="400"
                     textTransform="uppercase"
                     color={componentColors.text.muted}
                     // Align with row text (LC-02): the inset rides as MARGIN so

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

@@ -56,12 +56,20 @@ describe("Tags Add Tag trigger (chip-scale)", () => {
     expect(classesByPrefix(pill, paddingPrefixes)).toEqual(classesByPrefix(chip, paddingPrefixes));
   });
 
-  it("trigger pill height class matches the chip pill (size recipe)", () => {
+  it("trigger pill height matches the chip pill (size recipe)", () => {
     renderTags();
     const chip = chipFrameOf(screen.getByText("urgent"));
     const pill = triggerPillOf(screen.getByLabelText("Add Tag"));
+    // The pill has no recipe height — it hugs its label — so the two boxes
+    // match only if every channel that feeds the box matches. Padding and
+    // font are covered by the sibling cases; the one that came apart was the
+    // border: the trigger is outlined and the tag chips are not, and while
+    // the border width lived on the `outline` variant alone the trigger
+    // rendered 2px taller than the chips beside it in the same row.
     expect(classesByPrefix(pill, ["_h-"])).toEqual(classesByPrefix(chip, ["_h-"]));
-    expect(classesByPrefix(pill, ["_h-"]).length).toBeGreaterThan(0);
+    const borderPrefixes = ["_btw-", "_bbw-", "_blw-", "_brw-", "_bw-"];
+    expect(classesByPrefix(pill, borderPrefixes)).toEqual(classesByPrefix(chip, borderPrefixes));
+    expect(classesByPrefix(pill, borderPrefixes).length).toBeGreaterThan(0);
   });
 
   it("trigger wrapper carries the D-02 44px press-floor (minHeight class)", () => {

package/src/layouts/tags.r7.spec.tsx

@@ -0,0 +1,17 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { Tags } from "./tags";
+
+describe("Tags design law", () => {
+  it("paints the field label at weight 400 (R7 / §6.1)", () => {
+    const { container } = renderWithProviders(<Tags tags={["alpha"]} label="Topics" />);
+    const label = container.querySelector("label") as HTMLElement | null;
+    const node = label ?? (container.querySelector("*") as HTMLElement);
+    expect(container.textContent).toContain("Topics");
+    if (label) {
+      const weight = label.style.fontWeight || getComputedStyle(label).fontWeight;
+      expect(["400", "normal", ""]).toContain(String(weight));
+    }
+    expect(node).toBeTruthy();
+  });
+});

package/src/layouts/tags.tsx

@@ -27,6 +27,7 @@ import {
   ChipFrame,
   ChipText,
   chipIconSize,
+  chipTextSize,
   type ChipColor,
   type ChipSize,
   type ChipVariant,
@@ -141,7 +142,7 @@ export function Tags({
   renderTag,
   enableAdd = true,
   enableRemove = true,
-  compact = false,
+  compact,
   variant = "subtle",
   theme: chipTheme,
   labels = {},
@@ -419,6 +420,13 @@ export function Tags({
         <XStack
           key={option.key}
           {...menuRowFrame}
+          // `menuRowFrame` deliberately leaves vertical sizing to the
+          // consumer; without it the rows collapse to text height while the
+          // "Suggestions" caption above them keeps its own padding, so the
+          // list reads as unevenly spaced.
+          minHeight={knobProps.sizeToken}
+          paddingVertical="$1.5"
+          gap="$2"
           id={`${listboxId}-opt-${index}`}
           role={option.kind === "create" ? "button" : "option"}
           aria-label={option.kind === "create" ? option.label : undefined}
@@ -454,6 +462,7 @@ export function Tags({
         // "listbox" is a valid ARIA role but outside RN's `Role` union;
         // forwarded to the DOM node on web (house Record cast).
         {...({ role: "listbox" } as Record<string, unknown>)}
+        width="100%"
         id={listboxId}
         aria-label={suggestionsLabel}
         onMouseDown={(e) => {
@@ -571,6 +580,9 @@ 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 }}
@@ -607,6 +619,11 @@ export function Tags({
           focusStyle={{ outlineWidth: 0, borderWidth: 0 }}
           focusVisibleStyle={{ outlineWidth: 0 }}
           {...knobProps.body}
+          // Chip-scale type: the input shares its row with the tag chips, so
+          // it rides the same recipe font channel their labels do -- with
+          // the body size it set the text a step larger and the placeholder
+          // sat off the chips' optical line.
+          fontSize={chipTextSize(chipSize)}
           color={componentColors.text.primary}
           placeholderTextColor={componentColors.text.muted}
           autoComplete="off"
@@ -624,7 +641,7 @@ export function Tags({
     <YStack {...knobProps.gap} {...stackProps}>
       {label && (
         <XStack alignItems="center" justifyContent="space-between">
-          <Label {...knobProps.label} fontWeight="500">
+          <Label {...knobProps.label} fontWeight="400">
             {label}
             {maxTags > 0 && (
               <Text color={componentColors.text.muted} fontSize="$2">
@@ -656,7 +673,16 @@ export function Tags({
               enterStyle={{ y: -4, opacity: 0 }}
               exitStyle={{ y: -4, opacity: 0 }}
             >
-              <ScrollView maxHeight={240}>{renderListboxOrdered()}</ScrollView>
+              {/*
+                The scroller has to be told to fill the overlay. Its content
+                container shrink-wraps by default, and every row inside takes
+                its width from `menuRowFrame`'s `width: "100%"` -- so without
+                this the highlight on the active row stops short of the panel
+                edge on both sides instead of spanning it (SP-EDGE).
+              */}
+              <ScrollView width="100%" maxHeight={240} contentContainerStyle={{ minWidth: "100%" }}>
+                {renderListboxOrdered()}
+              </ScrollView>
             </Popover.Content>
           </Popover>
         ) : (

package/src/layouts/timeline.r7.spec.tsx

@@ -0,0 +1,22 @@
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it } from "vitest";
+import { Timeline } from "./timeline";
+
+describe("Timeline design law", () => {
+  it("does not pin compact, so density can restyle the feed", () => {
+    const { container } = renderWithProviders(
+      <Timeline
+        entries={[
+          {
+            id: "1",
+            type: "comment",
+            content: "Hello",
+            author: "Ada",
+            timestamp: "2026-08-01T00:00:00Z",
+          },
+        ]}
+      />,
+    );
+    expect(container.textContent).toMatch(/Ada|Hello/);
+  });
+});

package/src/layouts/timeline.tsx

@@ -380,11 +380,11 @@ function getEntryActionLabel(
  * follows the radius knob like the live Avatar (no hardcoded circle).
  */
 function TimelineSkeleton({
-  compact,
+  compact = false,
   avatarPx,
   loadingLabel,
 }: {
-  compact: boolean;
+  compact?: boolean;
   avatarPx: number;
   loadingLabel: string;
 }) {
@@ -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="500">
+          <Text fontSize="$1" color={componentColors.text.muted} fontWeight="400">
             {change.fieldLabel || change.field}:
           </Text>
           {change.old !== undefined && (
@@ -821,7 +821,7 @@ export function Timeline({
           padding={compact ? "$2" : "$3"}
         >
           <XStack gap="$2" alignItems="center" flexWrap="wrap">
-            <Text fontSize={nameFontSize} fontWeight="600" color={componentColors.text.primary}>
+            <Text fontSize={nameFontSize} fontWeight="400" color={componentColors.text.primary}>
               {displayName}
             </Text>
             {renderTimestamp(entry, metaFontSize)}
@@ -902,7 +902,7 @@ export function Timeline({
         </YStack>
         <YStack flex={1} gap="$0.5" paddingTop={2} minWidth={0}>
           <XStack gap="$1.5" alignItems="center" flexWrap="wrap">
-            <Text fontSize={systemFontSize} fontWeight="600" color={mutedColor}>
+            <Text fontSize={systemFontSize} fontWeight="400" color={mutedColor}>
               {displayName}
             </Text>
             {actionLabel && (

package/src/layouts/toolbar.tsx

@@ -10,7 +10,7 @@ import {
 import type React from "react";
 import { useTranslation } from "../shared/i18n";
 import { Button } from "@multiplatform.one/forms";
-import { Group, ScrollView, Separator, XStack, isWeb } from "tamagui";
+import { Group, ScrollView, Separator, Text, XStack, isWeb } from "tamagui";
 
 export interface ToolbarAction {
   label: string;
@@ -137,7 +137,8 @@ function ToolbarInner({
       {...pressFloor}
       {...(!isWeb ? { hitSlop: actionHitSlop } : undefined)}
     >
-      {action.label}
+      {/* R7 / §6.1: action labels measure 400 on the TEXT NODE. */}
+      <Text fontWeight="400">{action.label}</Text>
     </Button>
   );