@multiplatform.one/components 7.7.4 → 7.8.0

package/src/primitives.spec.tsx

@@ -4,7 +4,7 @@
  * MPO-21 G1-G4, G6 — five primitives the house barrel could not express.
  *
  * G1 Collapsible / G2 LinearGradient / G3 VisuallyHidden / G4 Unspaced are
- * knob-immune raw re-exports (registry rows). G6 AlertDialogContent is a
+ * knob-immune primitives. Collapsible adds safe form-button defaults. G6 AlertDialogContent is a
  * house surface: `unstyled` drops Tamagui's baked elevate chrome so the
  * overlay elevation token is the only surface source.
  */
@@ -20,11 +20,11 @@ import { AlertDialogContent, AlertDialogOverlay } from "./surfaces";
 afterEach(cleanup);
 
 describe("MPO-21 G1-G4 — knob-immune primitives on the house barrel", () => {
-  it("exports Collapsible, Unspaced, VisuallyHidden as the tamagui primitives", () => {
-    expect(pkg.Collapsible).toBe(tamagui.Collapsible);
+  it("isolates the safe Collapsible adapter and preserves other primitives", () => {
+    expect(pkg.Collapsible).not.toBe(tamagui.Collapsible);
     expect(pkg.Unspaced).toBe(tamagui.Unspaced);
     expect(pkg.VisuallyHidden).toBe(tamagui.VisuallyHidden);
-    expect(pkg.Collapsible.Trigger).toBe(tamagui.Collapsible.Trigger);
+    expect(pkg.Collapsible.Trigger).not.toBe(tamagui.Collapsible.Trigger);
     expect(pkg.Collapsible.Content).toBe(tamagui.Collapsible.Content);
   });
 
@@ -33,6 +33,21 @@ describe("MPO-21 G1-G4 — knob-immune primitives on the house barrel", () => {
     expect(pkg.LinearGradient).toBe(tamaguiLinearGradient.LinearGradient);
   });
 
+  it("leaves the raw trigger untouched while giving the public trigger a safe default", () => {
+    const result = renderWithProviders(
+      <>
+        <tamagui.Collapsible>
+          <tamagui.Collapsible.Trigger>Raw</tamagui.Collapsible.Trigger>
+        </tamagui.Collapsible>
+        <pkg.Collapsible>
+          <pkg.Collapsible.Trigger>Safe</pkg.Collapsible.Trigger>
+        </pkg.Collapsible>
+      </>,
+    );
+    expect(result.getByRole("button", { name: "Raw" }).getAttribute("type")).toBeNull();
+    expect(result.getByRole("button", { name: "Safe" }).getAttribute("type")).toBe("button");
+  });
+
   it("renders Collapsible open with trigger and content", () => {
     const { getByText } = renderWithProviders(
       <pkg.Collapsible defaultOpen>

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/tamagui.ts

@@ -30,7 +30,6 @@
 // quiet = opacity 0.5). Raw stays reachable as TamaguiSeparator below.
 export {
   Circle,
-  Collapsible,
   Group,
   ListItem,
   ScrollView,
@@ -175,3 +174,6 @@ export {
   SizableText as TamaguiSizableText,
   Text as TamaguiText,
 } from "tamagui";
+
+// Safe disclosure button defaults around the unpainted compound.
+export { Collapsible } from "./Collapsible";

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: () => (

package/src/views/Dashboard.tsx

@@ -1,4 +1,5 @@
 import { Meter } from "../Meter";
+import { ChartDataView } from "../charts/ChartDataView";
 import { BarChart } from "../charts/BarChart";
 import { LineChart } from "../charts/LineChart";
 import { PieChart } from "../charts/PieChart";
@@ -12,7 +13,7 @@ import {
   formatPercent,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
-import React, { useCallback, useMemo, type ReactNode } from "react";
+import React, { useCallback, useMemo, useState, type ReactNode } from "react";
 import { useTranslation } from "../shared/i18n";
 import {
   ScrollView,
@@ -56,6 +57,13 @@ function trendFill(color: string): string {
   return "$color4";
 }
 
+function trendInk(color: string): string {
+  // Step 11 clears the page, but falls below AA on the status pill's step 4 wash.
+  if (color === componentColors.semantic.success) return "$green12";
+  if (color === componentColors.semantic.error) return "$red12";
+  return color;
+}
+
 // ============================================================================
 // Types
 // ============================================================================
@@ -222,7 +230,7 @@ export interface DashboardProps extends Omit<YStackProps, "children"> {
 // Shared card chrome
 // ============================================================================
 
-function useWidgetChrome(onPress?: () => void) {
+function useWidgetChrome(onPress?: YStackProps["onPress"]) {
   const resolved = useResolvedKnobs();
   const { knobProps, control } = resolved;
   const nested = splitNestedControl(knobProps.nestedControl);
@@ -294,11 +302,11 @@ function TrendPill({
       {...radius}
       data-nested-px={px}
     >
-      <Text {...label} color={color}>
+      <Text {...label} color={trendInk(color)}>
         {symbol}
       </Text>
       {value != null && value !== "" && (
-        <Text {...label} color={color}>
+        <Text {...label} color={trendInk(color)}>
           {value}
         </Text>
       )}
@@ -339,8 +347,13 @@ export function resolveTrendColor(
  */
 export function KPICard({ config, ...stackProps }: KPICardProps) {
   const { t } = useTranslation();
-  const { knobProps, nested, interactive } = useWidgetChrome(config.onClick);
+  const { onPress: consumerOnPress, ...cardProps } = stackProps;
+  const onPress = Object.hasOwn(stackProps, "onPress") ? consumerOnPress : config.onClick;
+  const { knobProps, nested, interactive } = useWidgetChrome(onPress);
   const { px, box } = nested;
+  const [dataActionSize, setDataActionSize] = useState({ width: 0, height: 44 });
+  const [dataHeaderHeight, setDataHeaderHeight] = useState(44);
+  const hasDataView = Boolean(config.sparkline?.length);
   const formatMetric = useCallback(
     (num: number) => {
       if (config.format === "currency") {
@@ -370,15 +383,16 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
     return "—";
   }, [config.trend]);
 
-  return (
-    <Card
-      width="100%"
-      elevation={knobProps.elevation}
-      {...knobProps.surface}
-      {...interactive}
-      {...stackProps}
-    >
-      <XStack justifyContent="space-between" alignItems="flex-start">
+  const content = (
+    <>
+      <XStack
+        justifyContent="space-between"
+        alignItems="center"
+        {...knobProps.gap}
+        onLayout={
+          hasDataView ? (event) => setDataHeaderHeight(event.nativeEvent.layout.height) : undefined
+        }
+      >
         <Text {...knobProps.label} color={knobProps.textAccentColor} flex={1}>
           {config.title}
         </Text>
@@ -387,6 +401,13 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
             {config.icon}
           </NestedIconWell>
         ) : null}
+        {hasDataView ? (
+          <YStack
+            width={dataActionSize.width}
+            height={dataActionSize.height}
+            pointerEvents="none"
+          />
+        ) : null}
       </XStack>
 
       <Text fontSize="$8" color="$color" {...knobProps.heading}>
@@ -394,7 +415,12 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
       </Text>
 
       {config.sparkline && config.sparkline.length > 0 ? (
-        <Sparkline data={config.sparkline} height={px} title={config.title} />
+        <Sparkline
+          data={config.sparkline}
+          height={px}
+          title={config.title}
+          valueFormatter={formatMetric}
+        />
       ) : null}
 
       {(config.trend || config.trendValue) && (
@@ -414,10 +440,70 @@ export function KPICard({ config, ...stackProps }: KPICardProps) {
           )}
         </XStack>
       )}
-    </Card>
+    </>
+  );
+  if (!hasDataView)
+    return (
+      <Card
+        width="100%"
+        elevation={knobProps.elevation}
+        {...knobProps.surface}
+        {...interactive}
+        {...stackProps}
+      >
+        {content}
+      </Card>
+    );
+  return (
+    <ChartDataView data={config.sparkline!} title={config.title} valueFormatter={formatMetric}>
+      {({ action }) => (
+        <Card width="100%" elevation={knobProps.elevation} {...knobProps.surface} {...cardProps}>
+          <YStack position="relative">
+            <YStack
+              {...knobProps.gap}
+              {...knobProps.containerRadius}
+              {...interactive}
+              focusable={Boolean(onPress)}
+              {...(isWeb
+                ? {
+                    "data-mpo-kpi-navigation": config.id,
+                    tabIndex: onPress ? 0 : undefined,
+                    onKeyDown: onPress
+                      ? (event: React.KeyboardEvent<HTMLElement>) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            if (!event.repeat) event.currentTarget.click();
+                          }
+                        }
+                      : undefined,
+                  }
+                : {})}
+            >
+              {content}
+            </YStack>
+            <YStack
+              position="absolute"
+              top={Math.max(0, (dataHeaderHeight - dataActionSize.height) / 2)}
+              right={0}
+              minHeight={44}
+              justifyContent="center"
+              onLayout={(event) => {
+                const { width, height } = event.nativeEvent.layout;
+                setDataActionSize((previous) =>
+                  previous.width === width && previous.height === height
+                    ? previous
+                    : { width, height },
+                );
+              }}
+            >
+              {action}
+            </YStack>
+          </YStack>
+        </Card>
+      )}
+    </ChartDataView>
   );
 }
-
 // ============================================================================
 // Chart Card Component
 // ============================================================================
@@ -455,11 +541,14 @@ export function ChartCard({ config, colors, headingLevel = 2, ...stackProps }: C
   const dataColors = config.colors ?? colors;
   const showXAxis = config.showLabels !== false;
 
-  return (
+  const renderCard = (action?: ReactNode) => (
     <YStack {...knobProps.gap} width="100%" {...stackProps}>
-      <HeadingTag margin={0} {...knobProps.heading} {...sectionHeading}>
-        {config.title}
-      </HeadingTag>
+      <XStack alignItems="center" justifyContent="space-between" {...knobProps.gap}>
+        <HeadingTag flex={1} minWidth={0} margin={0} {...knobProps.heading} {...sectionHeading}>
+          {config.title}
+        </HeadingTag>
+        {action}
+      </XStack>
       <Card elevation={knobProps.elevation} {...knobProps.surface}>
         {config.type === "pie" ? (
           <PieChart
@@ -473,6 +562,7 @@ export function ChartCard({ config, colors, headingLevel = 2, ...stackProps }: C
         ) : config.type === "line" ? (
           <LineChart
             data={config.data}
+            title={config.title}
             height={config.height}
             color={dataColors?.[0]}
             showPoints
@@ -482,6 +572,7 @@ export function ChartCard({ config, colors, headingLevel = 2, ...stackProps }: C
         ) : (
           <BarChart
             data={config.data}
+            title={config.title}
             height={config.height}
             colors={dataColors}
             showXAxis={showXAxis}
@@ -491,6 +582,13 @@ export function ChartCard({ config, colors, headingLevel = 2, ...stackProps }: C
       </Card>
     </YStack>
   );
+  return config.type === "pie" && config.showLegend !== false ? (
+    renderCard()
+  ) : (
+    <ChartDataView data={config.data} title={config.title}>
+      {({ action }) => renderCard(action)}
+    </ChartDataView>
+  );
 }
 
 // ============================================================================

package/src/views/Gantt.scroll.spec.tsx

@@ -0,0 +1,120 @@
+import { act, cleanup, fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { GanttView, type GanttTask } from "./Gantt";
+import { addDays, computeGanttRange, dateToX, rangeDays, startOfDay } from "./ganttMath";
+
+// Match the Carousel layout harness: RNW measures through ResizeObserver and
+// a deferred offsetWidth read. Keep prototype patches isolated to this file.
+let viewportWidth = 178;
+const resizeCallbacks = new Map<Element, () => void>();
+vi.stubGlobal(
+  "ResizeObserver",
+  class {
+    constructor(private callback: ResizeObserverCallback) {}
+    observe(target: Element) {
+      const notify = () =>
+        this.callback([{ target } as ResizeObserverEntry], this as unknown as ResizeObserver);
+      resizeCallbacks.set(target, notify);
+      notify();
+    }
+    unobserve(target: Element) {
+      resizeCallbacks.delete(target);
+    }
+    disconnect() {}
+  },
+);
+Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
+  configurable: true,
+  get: () => viewportWidth,
+});
+Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+  configurable: true,
+  get: () => 240,
+});
+const scrollCalls: number[] = [];
+Object.defineProperty(HTMLElement.prototype, "scroll", {
+  configurable: true,
+  writable: true,
+  value(options: { left?: number }) {
+    if (typeof options.left === "number") scrollCalls.push(options.left);
+  },
+});
+
+const today = startOfDay(new Date());
+const tasks: GanttTask[] = [
+  { id: "track", title: "Track", start: addDays(today, -44), end: addDays(today, 19) },
+];
+const range = computeGanttRange([{ start: tasks[0].start!, end: tasks[0].end! }], "week", today);
+const chartWidth = rangeDays(range) * 24;
+const anchorX = dateToX(today, range.start, 24);
+
+async function flushLayout() {
+  await act(async () => new Promise((resolve) => setTimeout(resolve, 0)));
+}
+
+beforeEach(() => {
+  viewportWidth = 178;
+  scrollCalls.length = 0;
+});
+afterEach(() => {
+  cleanup();
+  document.documentElement.removeAttribute("dir");
+});
+
+describe("Gantt measured viewport anchoring", () => {
+  it("reanchors a narrow LTR mount after layout so the marker is inside the viewport", async () => {
+    renderWithProviders(<GanttView tasks={tasks} initialDate={today} markerDate={today} />);
+    await flushLayout();
+    const left = scrollCalls.at(-1)!;
+    expect(left).toBeGreaterThanOrEqual(0);
+    expect(left).toBeLessThanOrEqual(chartWidth - viewportWidth);
+    expect(anchorX + 12 - left).toBeGreaterThanOrEqual(0);
+    expect(anchorX + 12 - left).toBeLessThan(viewportWidth);
+  });
+
+  it("keeps the narrow RTL marker inside the mirrored viewport", async () => {
+    document.documentElement.setAttribute("dir", "rtl");
+    renderWithProviders(<GanttView tasks={tasks} initialDate={today} markerDate={today} />);
+    await flushLayout();
+    const markerLeft = chartWidth - anchorX - 12 - scrollCalls.at(-1)!;
+    expect(markerLeft).toBeGreaterThanOrEqual(0);
+    expect(markerLeft).toBeLessThan(viewportWidth);
+  });
+
+  it("retains its pending anchor through a hidden zero-width first layout", async () => {
+    viewportWidth = 0;
+    renderWithProviders(<GanttView tasks={tasks} initialDate={today} markerDate={today} />);
+    await flushLayout();
+    viewportWidth = 178;
+    for (const notify of resizeCallbacks.values()) notify();
+    await flushLayout();
+    const markerLeft = anchorX + 12 - scrollCalls.at(-1)!;
+    expect(markerLeft).toBeGreaterThanOrEqual(0);
+    expect(markerLeft).toBeLessThan(viewportWidth);
+  });
+
+  it("preserves the desktop anchor inset", async () => {
+    viewportWidth = 820;
+    renderWithProviders(<GanttView tasks={tasks} initialDate={today} />);
+    await flushLayout();
+    expect(scrollCalls.at(-1)).toBe(anchorX - 180);
+  });
+
+  it("clamps a range-end anchor to the measured scroll extent", async () => {
+    viewportWidth = 820;
+    renderWithProviders(<GanttView tasks={tasks} initialDate={addDays(range.end, -1)} />);
+    await flushLayout();
+    expect(scrollCalls.at(-1)).toBeLessThanOrEqual(chartWidth - viewportWidth);
+  });
+
+  it("uses the measured viewport for the Today action", async () => {
+    const result = renderWithProviders(<GanttView tasks={tasks} initialDate={range.start} />);
+    await flushLayout();
+    scrollCalls.length = 0;
+    fireEvent.click(result.getByRole("button", { name: "Today" }));
+    const markerLeft = anchorX + 12 - scrollCalls.at(-1)!;
+    expect(markerLeft).toBeGreaterThanOrEqual(0);
+    expect(markerLeft).toBeLessThan(viewportWidth);
+  });
+});