@multiplatform.one/components 7.81.1 → 7.81.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/components",
-  "version": "7.81.1",
+  "version": "7.81.2",
   "description": "multiplatform.one ui components",
   "keywords": [
     "components",
@@ -58,11 +58,11 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@multiplatform.one/forms": "^7.81.1",
-    "@multiplatform.one/i18n": "^7.81.1",
-    "@multiplatform.one/platform": "^7.81.1",
-    "@multiplatform.one/router": "^7.81.1",
-    "@multiplatform.one/theme": "^7.81.1",
+    "@multiplatform.one/forms": "^7.81.2",
+    "@multiplatform.one/i18n": "^7.81.2",
+    "@multiplatform.one/platform": "^7.81.2",
+    "@multiplatform.one/router": "^7.81.2",
+    "@multiplatform.one/theme": "^7.81.2",
     "@phosphor-icons/react": "^2.1.10",
     "@shopify/flash-list": "^2.3.1",
     "@tamagui/colors": "2.7.6",
@@ -89,9 +89,9 @@
     "tamagui": "2.7.6"
   },
   "devDependencies": {
-    "@multiplatform.one/config": "7.81.1",
-    "@multiplatform.one/storybook": "7.81.1",
-    "@multiplatform.one/test-utils": "7.81.1",
+    "@multiplatform.one/config": "7.81.2",
+    "@multiplatform.one/storybook": "7.81.2",
+    "@multiplatform.one/test-utils": "7.81.2",
     "@tamagui/build": "2.7.6",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",

package/src/charts/BarChart.tsx

@@ -20,7 +20,7 @@ import { useChartTheme } from "./useChartTheme";
 export interface BarChartProps
   extends ChartDatumEvents, Omit<YStackProps, "children" | "width" | "height"> {
   data: ChartDatum[];
-  /** Drawing height as a theme size token or pixels (default 200). */
+  /** Drawing height as a theme size token, pixels, or "fill" (default 200). */
   height?: ChartHeight;
   /** Explicit width bypasses responsive measurement. */
   width?: number;
@@ -85,7 +85,13 @@ export function BarChart({
   const interactive = Boolean(onDatumPress || onDatumHoverIn || onDatumHoverOut);
 
   return (
-    <ChartDataFrame data={data} title={title} valueFormatter={valueFormatter} width={width}>
+    <ChartDataFrame
+      data={data}
+      title={title}
+      valueFormatter={valueFormatter}
+      width={width}
+      fill={height === "fill"}
+    >
       <ChartSurface
         label={ariaLabel}
         proof={{

package/src/charts/ChartDataView.spec.tsx

@@ -2,6 +2,7 @@ import { renderWithProviders } from "@multiplatform.one/test-utils";
 import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
 import { afterEach, expect, it, vi } from "vitest";
 import { XStack, YStack } from "tamagui";
+import { BarChart } from "./BarChart";
 import { ChartDataView } from "./ChartDataView";
 import { Sparkline } from "./Sparkline";
 import { PieChart } from "./PieChart";
@@ -29,7 +30,7 @@ it("opens the complete formatted dataset without expanding the concise chart nam
       )}
     </ChartDataView>,
   );
-  const image = document.querySelector("svg")!;
+  const image = document.querySelector("svg[data-mpo-chart]")!;
   expect(image.getAttribute("aria-label")).toBe("Revenue trend");
   expect(image.getAttribute("height")).toBe("36");
   expect(image.querySelector("button")).toBeNull();
@@ -71,7 +72,9 @@ it("keeps a visible pie legend complete without a dangling data-action associati
   );
   expect(screen.getByText("Region 13")).toBeInTheDocument();
   expect(screen.queryByRole("button", { name: "View data for Revenue" })).toBeNull();
-  expect(document.querySelector("svg")!.getAttribute("aria-describedby")).toBeNull();
+  expect(
+    document.querySelector("svg[data-mpo-chart]")!.getAttribute("aria-describedby"),
+  ).toBeNull();
 });
 
 it("keeps a consumer metric press override separate from the data action", async () => {
@@ -102,3 +105,21 @@ it("keeps a consumer metric press override separate from the data action", async
   expect(consumer).toHaveBeenCalledTimes(2);
   expect(configured).not.toHaveBeenCalled();
 });
+
+it("gives a filled chart's remaining height to its values instead of a data action (LC-215, LC-173)", () => {
+  renderWithProviders(
+    <YStack height={800}>
+      <BarChart
+        data={data}
+        height="fill"
+        title="Revenue"
+        valueFormatter={(value) => `USD ${value}`}
+      />
+    </YStack>,
+  );
+  const inline = document.querySelector("[data-mpo-chart-data-inline]");
+  expect(inline).not.toBeNull();
+  expect(inline!.querySelectorAll("[data-mpo-chart-data-row]")).toHaveLength(13);
+  expect(screen.getByText("USD 13")).toBeInTheDocument();
+  expect(document.querySelector("[data-mpo-chart-data-trigger]")).toBeNull();
+});

package/src/charts/ChartDataView.tsx

@@ -1,4 +1,5 @@
 import { Button } from "@multiplatform.one/forms";
+import { TableIcon } from "@phosphor-icons/react";
 import { isWeb } from "@multiplatform.one/platform";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { createContext, useContext, useId, useState, type ReactNode } from "react";
@@ -6,6 +7,8 @@ import { Paragraph, XStack, YStack } from "tamagui";
 import { OverlayHeader } from "../actions/StandardAction";
 import { Dialog } from "../Dialog";
 import { ScrollView } from "../ScrollView";
+import { Separator } from "../Separator";
+import { Text } from "../Text";
 import { sectionHeading } from "../componentColors";
 import { useTranslation } from "../shared/i18n";
 import { DialogContent, DialogOverlay } from "../surfaces";
@@ -44,13 +47,13 @@ export function ChartDataView({ data, title, valueFormatter, children }: ChartDa
   const action = (
     <Dialog.Trigger asChild>
       <Button
-        size="$3"
+        circular
+        chromeless
+        icon={TableIcon}
         id={triggerId}
         {...(isWeb ? { "aria-label": actionLabel } : { accessibilityLabel: actionLabel })}
         {...chartWebProps({ "data-mpo-chart-data-trigger": id })}
-      >
-        {t("View data")}
-      </Button>
+      />
     </Dialog.Trigger>
   );
   return (
@@ -128,15 +131,41 @@ export function ChartDataFrame({
   title,
   valueFormatter,
   width,
+  fill,
   children,
-}: Omit<ChartDataViewProps, "children"> & { children: ReactNode; width?: number }) {
+}: Omit<ChartDataViewProps, "children"> & {
+  children: ReactNode;
+  width?: number;
+  /** The chart flexes to its region's height (LC-215). */
+  fill?: boolean;
+}) {
   const inherited = useContext(ChartDataContext);
   const { knobProps } = useResolvedKnobs();
   if (inherited) return children;
+  if (fill)
+    return (
+      <YStack
+        minWidth={0}
+        width={width ?? "100%"}
+        maxWidth="100%"
+        flex={1}
+        minHeight={0}
+        {...knobProps.gap}
+      >
+        {children}
+        <ChartDataList data={data} title={title} valueFormatter={valueFormatter} />
+      </YStack>
+    );
   return (
     <ChartDataView data={data} title={title} valueFormatter={valueFormatter}>
       {({ action }) => (
-        <YStack minWidth={0} width={width ?? "100%"} maxWidth="100%" {...knobProps.gap}>
+        <YStack
+          minWidth={0}
+          width={width ?? "100%"}
+          maxWidth="100%"
+          {...(fill ? { flex: 1, minHeight: 0 } : null)}
+          {...knobProps.gap}
+        >
           {children}
           <XStack justifyContent="flex-end">{action}</XStack>
         </YStack>
@@ -145,6 +174,58 @@ export function ChartDataFrame({
   );
 }
 
+/**
+ * LC-215: a chart that fills its region stops at its aspect and gives the
+ * rest of the height to its own values, one row per datum, so the page never
+ * ends in an empty band (LC-173) and the data needs no separate action.
+ */
+function ChartDataList({
+  data,
+  title,
+  valueFormatter,
+}: Pick<ChartDataViewProps, "data" | "title" | "valueFormatter">) {
+  const { t } = useTranslation();
+  const { knobProps } = useResolvedKnobs();
+  const format = valueFormatter ?? formatChartValue;
+  const rows = data.map((datum, index) =>
+    typeof datum === "number" ? { label: String(index + 1), value: datum } : datum,
+  );
+  const label = title ? `${title}: ${t("data")}` : t("Chart data");
+  return (
+    <ScrollView
+      flex={1}
+      minHeight={0}
+      {...(isWeb ? { "aria-label": label } : { accessibilityLabel: label })}
+      {...chartWebProps({ "data-mpo-chart-data-inline": "true" })}
+    >
+      {rows.map((datum, index) => (
+        <YStack key={index}>
+          {index > 0 ? <Separator /> : null}
+          <XStack
+            minHeight={44}
+            alignItems="center"
+            {...knobProps.gap}
+            {...chartWebProps({ "data-mpo-chart-data-row": String(index) })}
+            {...(!isWeb
+              ? {
+                  accessible: true,
+                  accessibilityLabel: describeDatum({ datum, formatValue: format }),
+                }
+              : {})}
+          >
+            <Text flex={1} minWidth={0} {...knobProps.body}>
+              {datum.label}
+            </Text>
+            <Text tabular {...knobProps.body} color={knobProps.textRole.meta.color}>
+              {format(datum.value)}
+            </Text>
+          </XStack>
+        </YStack>
+      ))}
+    </ScrollView>
+  );
+}
+
 export function useChartDataViewProps(): Record<string, unknown> {
   const context = useContext(ChartDataContext);
   if (!context) return {};

package/src/charts/ChartSurface.tsx

@@ -47,28 +47,37 @@ export function ChartSurface({
   children,
   ...stackProps
 }: ChartSurfaceProps) {
-  const height = useChartHeight(heightProp, 200);
+  const fill = heightProp === "fill";
+  const fixedHeight = useChartHeight(heightProp, 200);
   const dataViewProps = useChartDataViewProps();
   const { motion, animationEnabled } = useChartTheme();
-  const [measuredWidth, setMeasuredWidth] = useState(0);
-  const width = widthProp ?? measuredWidth;
+  const [measured, setMeasured] = useState({ width: 0, height: 0 });
+  const width = widthProp ?? measured.width;
+  const height = fill ? measured.height : fixedHeight;
+  // LC-215: a filled chart takes its region's height only up to its aspect,
+  // so a dozen bars never stand a phone screen tall or a desktop wide.
+  const fillCap = width > 0 ? Math.round(width * (width < 600 ? 0.9 : 0.5)) : undefined;
 
   const handleLayout = useCallback((event: LayoutChangeEvent) => {
-    const next = event.nativeEvent.layout.width;
-    setMeasuredWidth((prev) => (Math.abs(prev - next) >= 0.5 ? next : prev));
+    const { width: nextWidth, height: nextHeight } = event.nativeEvent.layout;
+    setMeasured((prev) =>
+      Math.abs(prev.width - nextWidth) >= 0.5 || Math.abs(prev.height - nextHeight) >= 0.5
+        ? { width: nextWidth, height: nextHeight }
+        : prev,
+    );
   }, []);
 
   return (
     <YStack
       width="100%"
-      height={height}
+      {...(fill ? { flex: 1, minHeight: 0, maxHeight: fillCap } : { height })}
       overflow="hidden"
-      onLayout={widthProp === undefined ? handleLayout : undefined}
+      onLayout={widthProp === undefined || fill ? handleLayout : undefined}
       {...transitionProps(motion)}
       {...(animationEnabled ? { enterStyle: { opacity: 0, y: 6 } } : {})}
       {...stackProps}
     >
-      {width > 0 ? (
+      {width > 0 && height > 0 ? (
         <Svg width={width} height={height} {...chartRootA11yProps(label, proof)} {...dataViewProps}>
           {children({ width, height })}
         </Svg>

package/src/charts/chartHeight.ts

@@ -1,9 +1,15 @@
 import { getActiveScaleTokens, usePresetContext, type SizeKey } from "@multiplatform.one/theme";
 
-export type ChartHeight = number | SizeKey;
+/** `"fill"` flexes the chart to the height its region hands it (LC-215). */
+export type ChartHeight = number | SizeKey | "fill";
 
 export function useChartHeight(height: ChartHeight | undefined, fallback: number): number {
   usePresetContext();
-  const value = typeof height === "string" ? getActiveScaleTokens().size[height] : height;
+  const value =
+    height === "fill"
+      ? undefined
+      : typeof height === "string"
+        ? getActiveScaleTokens().size[height]
+        : height;
   return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : fallback;
 }

package/src/charts/composeChart.ts

@@ -76,7 +76,8 @@ const X_LABEL_SLOT_GAP = 8;
 /**
  * Pick an evenly-strided subset of category labels that fits the plot width
  * without overlap (LC-10 at phone widths): every label gets a slot sized by
- * the widest label (capped), and the stride skips the rest.
+ * the widest label (capped), and the stride counts back from the last label
+ * so the latest category always keeps its label.
  */
 export function thinCategories(labels: string[], plotWidth: number, fontSize: number): string[] {
   if (labels.length <= 1 || plotWidth <= 0) return labels;
@@ -85,5 +86,5 @@ export function thinCategories(labels: string[], plotWidth: number, fontSize: nu
   const capacity = Math.max(1, Math.floor(plotWidth / slot));
   if (labels.length <= capacity) return labels;
   const stride = Math.ceil(labels.length / capacity);
-  return labels.filter((_, index) => index % stride === 0);
+  return labels.filter((_, index) => (labels.length - 1 - index) % stride === 0);
 }

package/src/code/LogView.tsx

@@ -0,0 +1,127 @@
+import { useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
+import { useEffect, useRef } from "react";
+import { ScrollView, Text, View, XStack, YStack, useTheme, type YStackProps } from "tamagui";
+import { WarningIcon, XCircleIcon } from "@phosphor-icons/react";
+
+export type LogLevel = "debug" | "info" | "warn" | "error";
+
+export interface LogEntry {
+  /** Stable key; defaults to the entry's index. */
+  id?: string;
+  /** When it happened: an ISO string or a Date. Shown as HH:MM:SS. */
+  time: string | Date;
+  level?: LogLevel;
+  /** Who wrote it ("worker-2"), a short muted column. */
+  source?: string;
+  message: string;
+}
+
+export interface LogViewProps extends Omit<YStackProps, "children"> {
+  entries: readonly LogEntry[];
+  /** Names the log for assistive tech ("Sync worker log"). */
+  label: string;
+  /** Keep the newest entry in view as entries arrive. Default: true. */
+  follow?: boolean;
+}
+
+const levelInk = { warn: "yellow11", error: "red11" } as const;
+const levelGlyph = { warn: WarningIcon, error: XCircleIcon } as const;
+
+function clockTime(time: string | Date): string {
+  const iso = typeof time === "string" ? time : time.toISOString();
+  return iso.match(/T(\d{2}:\d{2}:\d{2})/)?.[1] ?? iso;
+}
+
+/**
+ * A log or terminal stream (LC-215): one row per entry, the time and source
+ * in fixed muted columns and the message wrapping under itself, so the
+ * columns stay aligned at any width. At compact width the time, level and
+ * source sit on a line above the message, which then takes the full width.
+ * Only a warning or an error carries a mark: a glyph leading its message in
+ * the level's ink, never a word and never a dot between two values (LC-261).
+ * The log sits on the page ground and fills whatever
+ * region it is given; its first glyph sits on the page line.
+ */
+export function LogView({ entries, label, follow = true, ...rest }: LogViewProps) {
+  const { knobProps } = useResolvedKnobs({ component: "Screen" });
+  const compact = useLayoutSizeClass() === "compact";
+  const theme = useTheme();
+  const scroller = useRef<{ scrollToEnd?: (options?: { animated?: boolean }) => void } | null>(
+    null,
+  );
+  useEffect(() => {
+    if (follow) scroller.current?.scrollToEnd?.({ animated: false });
+  }, [entries, follow]);
+
+  return (
+    <YStack flex={1} minHeight={0} data-log-view="" role="log" aria-label={label} {...rest}>
+      <ScrollView ref={scroller as never} flex={1} keyboardShouldPersistTaps="handled">
+        <YStack
+          {...knobProps.panelPadding}
+          {...(compact ? null : { paddingHorizontal: 0 })}
+          gap={compact ? "$3" : "$1"}
+        >
+          {entries.map((entry, index) => {
+            const level = entry.level === "warn" || entry.level === "error" ? entry.level : null;
+            const ink = level ? (`$${levelInk[level]}` as const) : "$color12";
+            const Glyph = level ? levelGlyph[level] : null;
+            const meta = (
+              <>
+                <Text fontFamily="$mono" fontSize="$3" color="$color10" flexShrink={0}>
+                  {clockTime(entry.time)}
+                </Text>
+                {entry.source ? (
+                  <Text
+                    fontFamily="$mono"
+                    fontSize="$3"
+                    color="$color10"
+                    flexShrink={0}
+                    numberOfLines={1}
+                  >
+                    {entry.source}
+                  </Text>
+                ) : null}
+              </>
+            );
+            const message = (
+              <XStack
+                gap="$1.5"
+                alignItems="flex-start"
+                flex={compact ? undefined : 1}
+                minWidth={0}
+              >
+                {Glyph ? (
+                  <View height="$1" justifyContent="center" flexShrink={0} aria-hidden>
+                    <Glyph
+                      size={14}
+                      weight="bold"
+                      color={
+                        level ? (theme[levelInk[level]]?.get() as string | undefined) : undefined
+                      }
+                    />
+                  </View>
+                ) : null}
+                <Text fontFamily="$mono" fontSize="$3" color={ink} flex={1} minWidth={0}>
+                  {entry.message}
+                </Text>
+              </XStack>
+            );
+            return compact ? (
+              <YStack key={entry.id ?? index} data-log-entry="">
+                <XStack gap="$2" alignItems="center">
+                  {meta}
+                </XStack>
+                {message}
+              </YStack>
+            ) : (
+              <XStack key={entry.id ?? index} gap="$3" alignItems="flex-start" data-log-entry="">
+                {meta}
+                {message}
+              </XStack>
+            );
+          })}
+        </YStack>
+      </ScrollView>
+    </YStack>
+  );
+}

package/src/code/index.ts

@@ -3,3 +3,4 @@ export * from "./CodeBlock";
 export * from "./HighlightedCode";
 export * from "./Highlighter";
 export * from "./Pre";
+export * from "./LogView";

package/src/layouts/DenseContent.stories.tsx

@@ -0,0 +1,93 @@
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { DownloadSimpleIcon, PauseIcon, type IconProps } from "@phosphor-icons/react";
+import { Button } from "@multiplatform.one/forms";
+import { BarChart } from "../charts/BarChart";
+import { LogView, type LogEntry } from "../code/LogView";
+import { DensePageLayout } from "./PageTemplates";
+import { StatusDot } from "./StatusDot";
+
+const PauseFillIcon = (props: IconProps) => <PauseIcon weight="fill" {...props} />;
+
+const tables = ["customers", "orders", "invoices", "payments", "shipments", "returns"];
+
+const logEntries: LogEntry[] = Array.from({ length: 64 }, (_, index) => {
+  const second = 7 + index * 13;
+  const time = `2026-10-29T14:${String(Math.floor(second / 60) % 60).padStart(2, "0")}:${String(second % 60).padStart(2, "0")}Z`;
+  const table = tables[index % tables.length];
+  if (index % 17 === 11)
+    return {
+      time,
+      level: "error",
+      source: `worker-${index % 4}`,
+      message: `push ${table} failed: 409 conflict on row ${1200 + index}, retrying in 4s`,
+    };
+  if (index % 9 === 4)
+    return {
+      time,
+      level: "warn",
+      source: `worker-${index % 4}`,
+      message: `${table} lagging 38s behind the primary`,
+    };
+  return {
+    time,
+    level: "info",
+    source: `worker-${index % 4}`,
+    message: `synced ${table}: ${(index * 37) % 400} rows in ${120 + ((index * 53) % 900)} ms`,
+  };
+});
+
+const weeks = [42, 57, 49, 63, 71, 66, 80, 74, 88, 92, 85, 97];
+const deploys = weeks.map((value, index) => ({ label: `W${index + 31}`, value }));
+
+const meta: Meta<typeof DensePageLayout> = {
+  title: "Components/DenseContent",
+  component: DensePageLayout,
+  parameters: {
+    status: { type: "beta" },
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component:
+          "LC-215 DENSE-CONTENT-BLEEDS: a page whose content is a log, terminal or chart keeps its head (title, live status, icon actions) and gives the rest of the height to the surface. On a phone the surface bleeds to both screen edges; from `medium` up it stays in the page column at the measure its content reads at: the page column for a log, the readable `expanded` measure for a chart.",
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof DensePageLayout>;
+
+export const Log: Story = {
+  render: () => (
+    <DensePageLayout
+      kind="log"
+      title="Sync worker"
+      status={<StatusDot tone="positive">Running</StatusDot>}
+      actions={
+        <>
+          <Button circular chromeless icon={PauseFillIcon} aria-label="Pause the stream" />
+          <Button circular chromeless icon={DownloadSimpleIcon} aria-label="Download the log" />
+        </>
+      }
+    >
+      <LogView label="Sync worker log" entries={logEntries} />
+    </DensePageLayout>
+  ),
+};
+
+export const Chart: Story = {
+  render: () => (
+    <DensePageLayout
+      kind="chart"
+      measure="readable"
+      gutter
+      title="Deploys"
+      subtitle="Last 12 weeks"
+      actions={
+        <Button circular chromeless icon={DownloadSimpleIcon} aria-label="Download the data" />
+      }
+    >
+      <BarChart data={deploys} height="fill" title="Deploys per week" />
+    </DensePageLayout>
+  ),
+};

package/src/layouts/PageTemplates.tsx

@@ -315,3 +315,93 @@ export function SettingsPageLayout({
     </Screen>
   );
 }
+
+// ── DensePageLayout ────────────────────────────────────────────────────────
+
+export interface DensePageLayoutProps
+  extends Omit<ScreenProps, "scroll" | "bleed" | "noPadding">, TemplateHeaderProps {
+  /** The live state beside the title (a `StatusDot`). */
+  status?: ReactNode;
+  /**
+   * The column the dense region keeps at regular width: `"wide"` (a log or
+   * terminal, the page column) or `"readable"` (a chart, the `expanded`
+   * measure, so a dozen bars never stretch across a desktop).
+   */
+  measure?: "wide" | "readable";
+  /** Names the dense region (`data-dense-surface`), e.g. "log" or "chart". */
+  kind?: string;
+  /**
+   * Keep the page gutter inside the region on a phone. A chart takes it so its
+   * axis labels sit on the page line; a `LogView` pads its own text.
+   */
+  gutter?: boolean;
+  children: ReactNode;
+}
+
+/**
+ * A page whose content is one dense surface: a log, a terminal or a chart
+ * (LC-215). The page keeps its head (title, live status, icon actions) and
+ * the surface takes the rest of the height. On a phone the surface bleeds to
+ * both screen edges; from `medium` up it stays in the page column, rounded
+ * as the page's one surface, at the measure its content reads at.
+ */
+export function DensePageLayout({
+  title,
+  subtitle,
+  status,
+  actions,
+  header,
+  nav,
+  measure = "wide",
+  kind,
+  gutter = false,
+  maxWidth,
+  children,
+  ...rest
+}: DensePageLayoutProps) {
+  const compact = useLayoutSizeClass() === "compact";
+  const { knobProps } = useResolvedKnobs({ component: "Screen" });
+  const head =
+    header !== undefined ? (
+      header
+    ) : title || subtitle || actions || nav || status ? (
+      <PageHeader title={title} subtitle={subtitle} status={status} actions={actions} nav={nav} />
+    ) : null;
+  const region = (
+    <YStack
+      flex={1}
+      minHeight={0}
+      minWidth={0}
+      data-dense-surface={kind}
+      {...(compact
+        ? gutter
+          ? { paddingHorizontal: knobProps.panelPadding.padding as "$4" }
+          : null
+        : { ...knobProps.containerRadius, overflow: "hidden" })}
+    >
+      {children}
+    </YStack>
+  );
+  if (compact)
+    return (
+      <Screen data-canonical="dense-page" scroll={false} bleed noPadding {...rest}>
+        {head ? (
+          <YStack {...knobProps.panelPadding} paddingBottom={0}>
+            {head}
+          </YStack>
+        ) : null}
+        {region}
+      </Screen>
+    );
+  return (
+    <Screen
+      data-canonical="dense-page"
+      scroll={false}
+      maxWidth={maxWidth ?? (measure === "readable" ? layoutBreakpoints.expanded : undefined)}
+      {...rest}
+    >
+      {head}
+      {region}
+    </Screen>
+  );
+}