@multiplatform.one/components 7.81.1 → 7.82.0

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/CodeBlock/CodeBlock.copy.spec.tsx

@@ -46,6 +46,19 @@ describe("CodeBlock copy (Input.Button + notify)", () => {
     expect(style.display).not.toBe("none");
   });
 
+  it("a command is one code surface with its copy inside, top-trailing (LC-267)", () => {
+    const result = renderWithProviders(<CodeBlock language="sh">shc node join</CodeBlock>);
+    const surface = result.container.querySelector("[data-code-surface]") as HTMLElement | null;
+    if (!surface) throw new Error("code surface missing");
+    const copy = copyOf(result.container);
+    expect(copy && surface.contains(copy)).toBe(true);
+    const cell = surface.querySelector("[data-code-copy]") as HTMLElement;
+    expect(surface.lastElementChild).toBe(cell);
+    expect(getComputedStyle(cell).position).not.toBe("absolute");
+    const code = surface.querySelector("[data-register='code']") as HTMLElement;
+    expect(code.compareDocumentPosition(cell) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
   it("empty code omits the copy cap", () => {
     const result = renderWithProviders(<CodeBlock>{""}</CodeBlock>);
     expect(copyOf(result.container)).toBeNull();

package/src/code/CodeBlock/index.tsx

@@ -7,7 +7,7 @@
  */
 
 import { LinearGradient } from "@tamagui/linear-gradient";
-import { ClipboardIcon } from "@phosphor-icons/react";
+import { CopyIcon } from "@phosphor-icons/react";
 import {
   MIN_PRESS_TARGET,
   useTouchSurface,
@@ -30,6 +30,7 @@ import { Code } from "../Code";
 import { HighlightedCode } from "../HighlightedCode";
 import { useShikiTokens } from "../Highlighter";
 import { Pre } from "../Pre";
+import { componentColors } from "../../componentColors";
 
 /** Visible lines before the "show more" clamp (content constraint, LC-18). */
 const VISIBLE_LINES = 22;
@@ -131,7 +132,7 @@ export function CodeBlock({
   const capSquare = sizeRecipeForToken(String(codeSize), { touch }).height;
 
   return (
-    <YStack position="relative" marginBottom="$4">
+    <YStack position="relative">
       <ErrorBoundary>
         <YStack
           ref={clampRef}
@@ -160,9 +161,18 @@ export function CodeBlock({
               <Spacer size="$4" />
             </LinearGradient>
           )}
-          <Pre {...knobProps.borderRadius} padding={0} marginBottom={0}>
+          <Pre
+            {...knobProps.borderRadius}
+            padding={0}
+            marginBottom={0}
+            flexDirection="row"
+            backgroundColor={componentColors.code.background}
+            borderWidth={0}
+            data-code-surface=""
+          >
             <ScrollView
-              style={{ width: "100%" }}
+              flex={1}
+              minWidth={0}
               contentContainerStyle={{ minWidth: "100%" }}
               horizontal
               showsHorizontalScrollIndicator={false}
@@ -185,33 +195,39 @@ export function CodeBlock({
                 </HighlightedCode>
               </Code>
             </ScrollView>
-          </Pre>
-          {showCopy && (
-            <XStack position="absolute" top={0} insetInlineEnd={0} zIndex={zIndex.localTop}>
-              <Input.Button
-                glyphRing
-                size={codeSize}
-                type="button"
-                aria-label="Copy to clipboard"
-                data-press-min={MIN_PRESS_TARGET}
-                hitSlop={capSquare < MIN_PRESS_TARGET ? pressTargetHitSlop(capSquare) : undefined}
-                onPress={activateCopy}
-                onKeyDown={
-                  ((e: KeyboardEvent) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      activateCopy();
-                    }
-                  }) as unknown as () => void
-                }
+            {showCopy && (
+              <XStack
+                flexShrink={0}
+                alignSelf={lines > 1 ? "flex-start" : "center"}
+                zIndex={zIndex.localTop}
+                data-code-copy=""
               >
-                <Input.Icon aria-hidden>
-                  <ClipboardIcon />
-                </Input.Icon>
-              </Input.Button>
-            </XStack>
-          )}
+                <Input.Button
+                  glyphRing
+                  size={codeSize}
+                  color={componentColors.text.primary}
+                  type="button"
+                  aria-label="Copy to clipboard"
+                  data-press-min={MIN_PRESS_TARGET}
+                  hitSlop={capSquare < MIN_PRESS_TARGET ? pressTargetHitSlop(capSquare) : undefined}
+                  onPress={activateCopy}
+                  onKeyDown={
+                    ((e: KeyboardEvent) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        activateCopy();
+                      }
+                    }) as unknown as () => void
+                  }
+                >
+                  <Input.Icon aria-hidden color={componentColors.text.primary}>
+                    <CopyIcon weight="bold" />
+                  </Input.Icon>
+                </Input.Button>
+              </XStack>
+            )}
+          </Pre>
         </YStack>
       </ErrorBoundary>
       <NotifyRegion scope="field" region={region} size="$3" />

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/EmptyState.spec.tsx

@@ -102,5 +102,7 @@ describe("EmptyState state anatomy (LC-171)", () => {
     expect(command.textContent).toContain("shc tenant create <name>");
     expect(screen.getByLabelText("Copy to clipboard")).toBeTruthy();
     expect(document.querySelectorAll("[data-empty-intent] p")).toHaveLength(0);
+    const surface = command.querySelector("[data-code-surface]");
+    expect(surface?.contains(screen.getByLabelText("Copy to clipboard"))).toBe(true);
   });
 });