@elabs-ai/components-ui 4.2.0 → 5.0.0

package/src/components/ambient-field/ambient-field.css

@@ -0,0 +1,98 @@
+/*
+ * AmbientField — a soft radial mesh of two or three token colours behind a page or region.
+ * Decoration policy (packages/tokens/src/decoration.css): the mesh paints on a masked `::before`
+ * LAYER, never on the host (a mask on the host would fade its children), and never inside a
+ * control. Colours are token references passed in by the component (`--ambient-a|b|c`), mixed
+ * to `--ambient-alpha` (clamped ≤ 0.18 in the component) — no literal colour lives here.
+ *
+ * Motion gate: the drift is a transform loop whose duration is divided by `--motion-factor`, and
+ * it is paused whenever the gate is at its floor — the same two selectors the tokens use for
+ * `--motion-factor` itself (OS reduce unless the reader chose "full", or an explicit "reduced").
+ */
+
+/* Registered so the tint crossfades: an unregistered custom property cannot interpolate. */
+@property --ambient-lead {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: transparent;
+}
+
+@layer base {
+  [data-slot="ambient-field"] {
+    --ambient-lead: var(--ambient-a, transparent);
+    transition: --ambient-lead var(--t-base) var(--ease-standard);
+  }
+
+  /* Tint API: `data-ambient-tint="<token>"` + `--ambient-tint` shift the first stop. */
+  [data-slot="ambient-field"][data-ambient-tint] {
+    --ambient-lead: var(--ambient-tint, var(--ambient-a, transparent));
+  }
+
+  [data-slot="ambient-field"]::before {
+    content: "";
+    position: absolute;
+    /* Headroom for the drift so the layer's edge never enters the host. */
+    inset: -40px;
+    pointer-events: none;
+    background-image:
+      radial-gradient(
+        at 18% 22%,
+        color-mix(in oklab, var(--ambient-lead) calc(var(--ambient-alpha) * 100%), transparent) 0,
+        transparent 55%
+      ),
+      radial-gradient(
+        at 82% 18%,
+        color-mix(
+            in oklab,
+            var(--ambient-b, transparent) calc(var(--ambient-alpha) * 100%),
+            transparent
+          )
+          0,
+        transparent 50%
+      ),
+      radial-gradient(
+        at 55% 88%,
+        color-mix(
+            in oklab,
+            var(--ambient-c, transparent) calc(var(--ambient-alpha) * 100%),
+            transparent
+          )
+          0,
+        transparent 55%
+      );
+    filter: blur(48px);
+    -webkit-mask-image: var(--deco-fade-edges);
+    mask-image: var(--deco-fade-edges);
+  }
+
+  [data-slot="ambient-field"][data-drift]::before {
+    will-change: transform;
+    animation: brand-ui-ambient-drift calc(20s / max(var(--motion-factor), 0.01)) linear infinite;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root:not([data-motion-pref="full"]) [data-slot="ambient-field"][data-drift]::before {
+      animation-play-state: paused;
+      will-change: auto;
+    }
+  }
+
+  [data-motion-pref="reduced"] [data-slot="ambient-field"][data-drift]::before {
+    animation-play-state: paused;
+    will-change: auto;
+  }
+
+  /* ≤ 40px from rest on either axis; starts and ends at rest so the loop has no seam. */
+  @keyframes brand-ui-ambient-drift {
+    0%,
+    100% {
+      transform: translate3d(0, 0, 0);
+    }
+    33% {
+      transform: translate3d(28px, -16px, 0);
+    }
+    66% {
+      transform: translate3d(-20px, 24px, 0);
+    }
+  }
+}

package/src/components/ambient-field/ambient-field.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, waitFor } from "storybook/test";
+import { AmbientField } from "./ambient-field";
+
+const meta = {
+  title: "Display/AmbientField",
+  component: AmbientField,
+  parameters: { layout: "fullscreen" },
+  tags: ["autodocs"],
+  render: (args) => (
+    <div className="relative isolate flex min-h-96 items-center justify-center p-8">
+      <AmbientField {...args} />
+      <p className="text-body text-foreground">Content sits above the ambient field.</p>
+    </div>
+  ),
+} satisfies Meta<typeof AmbientField>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Names a running animation so a failing reduced-motion play says what still moves. */
+function describeAnimation(a: Animation) {
+  const effect = a.effect as KeyframeEffect | null;
+  const target = effect?.target as Element | null | undefined;
+  const name = (a as CSSAnimation).animationName ?? (a as CSSTransition).transitionProperty ?? a.id;
+  return `${name} on ${target?.getAttribute("data-slot") ?? target?.tagName ?? "?"}${effect?.pseudoElement ?? ""}`;
+}
+
+/** Default stops (primary, chart-2, surface-3) drifting on a 20 s loop. */
+export const Default: Story = {};
+
+export const Dark: Story = {
+  parameters: { themes: { themeOverride: "dark" } },
+};
+
+/** The drafting ground and the ambient field together at full decoration. */
+export const Decoration10: Story = {
+  globals: { decoration: "10" },
+};
+
+/** `tint` (or `data-ambient-tint`) shifts the first stop; the change crossfades over `--t-base`. */
+export const Tinted: Story = {
+  args: { tint: "chart-4" },
+};
+
+export const Still: Story = {
+  args: { drift: false, stops: ["chart-1", "chart-3"] },
+};
+
+/** Under reduced motion the drift is paused: no animation on the page is running. */
+export const ReducedMotion: Story = {
+  // The real gate on :root (Storybook motion toolbar) plus a subtree dial, because the toolbar
+  // writes :root after the story has mounted.
+  globals: { motionPref: "reduced" },
+  render: (args) => (
+    <div
+      data-motion-pref="reduced"
+      className="relative isolate flex min-h-96 items-center justify-center p-8"
+    >
+      <AmbientField {...args} />
+      <p className="text-body text-foreground">The field is static under reduced motion.</p>
+    </div>
+  ),
+  play: async () => {
+    // Transitions the harness started before the gate applied (theme/decoration swaps between
+    // stories) settle; a primitive that still animates under the gate never would.
+    await waitFor(() =>
+      expect(
+        document
+          .getAnimations()
+          .filter((a) => a.playState === "running")
+          .map(describeAnimation),
+      ).toEqual([]),
+    );
+  },
+};

package/src/components/ambient-field/ambient-field.test.tsx

@@ -0,0 +1,28 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { AmbientField } from "./ambient-field";
+
+describe("AmbientField", () => {
+  it("renders a decorative, token-coloured ground", () => {
+    const { container } = render(<AmbientField className="opacity-90" />);
+    const el = container.querySelector<HTMLElement>('[data-slot="ambient-field"]')!;
+    expect(el).toHaveAttribute("aria-hidden", "true");
+    expect(el).toHaveAttribute("data-drift");
+    expect(el.className).toContain("opacity-90");
+    expect(el.style.getPropertyValue("--ambient-a")).toBe("var(--primary)");
+    expect(el.style.getPropertyValue("--ambient-b")).toBe("var(--chart-2)");
+    expect(el.style.getPropertyValue("--ambient-c")).toBe("var(--surface-3)");
+  });
+
+  it("clamps alpha to 0.18 and exposes the tint API", () => {
+    const { container } = render(
+      <AmbientField alpha={0.5} stops={["chart-1", "chart-5"]} tint="warning" drift={false} />,
+    );
+    const el = container.querySelector<HTMLElement>('[data-slot="ambient-field"]')!;
+    expect(el.style.getPropertyValue("--ambient-alpha")).toBe("0.18");
+    expect(el.style.getPropertyValue("--ambient-c")).toBe("");
+    expect(el).toHaveAttribute("data-ambient-tint", "warning");
+    expect(el.style.getPropertyValue("--ambient-tint")).toBe("var(--warning)");
+    expect(el).not.toHaveAttribute("data-drift");
+  });
+});

package/src/components/ambient-field/ambient-field.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { cn } from "../../lib/cn";
+import "./ambient-field.css";
+
+/** Colour-role tokens an ambient stop or tint may reference (always `var(--<token>)`). */
+export type AmbientToken =
+  | "primary"
+  | "accent"
+  | `chart-${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`
+  | "surface-1"
+  | "surface-2"
+  | "surface-3"
+  | "info"
+  | "success"
+  | "warning"
+  | "destructive";
+
+/** Default mesh: the brand colour, the second chart hue, and the deepest surface. */
+export const AMBIENT_DEFAULT_STOPS: readonly AmbientToken[] = ["primary", "chart-2", "surface-3"];
+
+/** The ceiling for the mesh alpha — an ambient ground stays under content, never competes. */
+export const AMBIENT_MAX_ALPHA = 0.18;
+
+export interface AmbientFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Two or three colour tokens for the mesh; extra entries are ignored. */
+  stops?: readonly AmbientToken[];
+  /** Mesh alpha, clamped to 0…{@link AMBIENT_MAX_ALPHA}. Default 0.14. */
+  alpha?: number;
+  /** Run the slow 20 s drift (paused whenever the motion gate is at its floor). Default `true`. */
+  drift?: boolean;
+  /** Shift the first stop to this token (crossfades over `--t-base`); sets `data-ambient-tint`. */
+  tint?: AmbientToken;
+}
+
+/**
+ * A decorative ambient ground: a blurred radial mesh of token colours on a masked `::before`
+ * layer, absolutely positioned under its container's content. Put it first inside a positioned,
+ * `isolate` container. Pure CSS — renders the same on the server, animates only `transform`.
+ */
+export const AmbientField = React.forwardRef<HTMLDivElement, AmbientFieldProps>(
+  (
+    { stops = AMBIENT_DEFAULT_STOPS, alpha = 0.14, drift = true, tint, className, style, ...props },
+    ref,
+  ) => {
+    const [a, b, c] = stops;
+    const fieldStyle = {
+      "--ambient-alpha": String(Math.min(AMBIENT_MAX_ALPHA, Math.max(0, alpha))),
+      "--ambient-a": a ? `var(--${a})` : undefined,
+      "--ambient-b": b ? `var(--${b})` : undefined,
+      "--ambient-c": c ? `var(--${c})` : undefined,
+      "--ambient-tint": tint ? `var(--${tint})` : undefined,
+      ...style,
+    } as React.CSSProperties;
+
+    return (
+      <div
+        ref={ref}
+        aria-hidden="true"
+        data-slot="ambient-field"
+        data-drift={drift ? "" : undefined}
+        data-ambient-tint={tint}
+        className={cn("pointer-events-none absolute inset-0 -z-10 overflow-hidden", className)}
+        style={fieldStyle}
+        {...props}
+      />
+    );
+  },
+);
+AmbientField.displayName = "AmbientField";

package/src/components/ambient-field/index.ts

@@ -0,0 +1,7 @@
+export {
+  AmbientField,
+  AMBIENT_DEFAULT_STOPS,
+  AMBIENT_MAX_ALPHA,
+  type AmbientFieldProps,
+  type AmbientToken,
+} from "./ambient-field";

package/src/components/app-shell/app-shell.stories.tsx

@@ -1,10 +1,30 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect, within } from "storybook/test";
+import { Globe, Search, Sparkles } from "lucide-react";
 import { AppShell } from "./app-shell";
 import { TopNav } from "../top-nav";
 import { PageShell } from "../page-shell";
 import { SectionHeader } from "../section-header";
 import { Button } from "../button";
+import { NavUser } from "../nav-user";
+import { TeamSwitcher } from "../team-switcher";
+import { AppSidebar } from "../app-sidebar";
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarProvider,
+} from "../sidebar";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "../input-group";
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  navigationMenuTriggerStyle,
+} from "../navigation-menu";
 
 const meta = {
   title: "Layout/App Shell/Minimal",
@@ -14,7 +34,30 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const nav = ["Dashboard", "Projects", "Reports", "Settings"];
+// Settings is not a nav row — it lives in the user menu at the foot of the rail.
+const nav = ["Dashboard", "Projects", "Reports"];
+
+// Neutral placeholder identity, reused verbatim from `Layout/AppSidebar`'s own
+// stories — never a real product name.
+const sampleTeams = [
+  { name: "Acme Inc.", logo: Sparkles, plan: "Enterprise" },
+  { name: "Beta Corp.", logo: Globe, plan: "Free" },
+];
+const sampleUser = { name: "Jane Doe", email: "jane@example.com" };
+
+const navMenu = (
+  <SidebarGroup>
+    <SidebarGroupContent>
+      <SidebarMenu>
+        {nav.map((n, i) => (
+          <SidebarMenuItem key={n}>
+            <SidebarMenuButton isActive={i === 0}>{n}</SidebarMenuButton>
+          </SidebarMenuItem>
+        ))}
+      </SidebarMenu>
+    </SidebarGroupContent>
+  </SidebarGroup>
+);
 
 export const Default: Story = {
   render: () => (
@@ -36,6 +79,17 @@ export const Default: Story = {
                 {n}
               </button>
             ))}
+            {/* The standard footer every shell ends with. NavUser reads the
+                sidebar context, so a nested (context-only) provider carries it
+                without turning this plain nav into a Sidebar frame. */}
+            <div className="mt-auto">
+              <SidebarProvider frame="nested">
+                <NavUser
+                  user={{ name: "Avery Rao", email: "avery@acme.co" }}
+                  settingsHref="/settings"
+                />
+              </SidebarProvider>
+            </div>
           </nav>
         }
         topNav={
@@ -101,3 +155,292 @@ export const Default: Story = {
     await expect(canvas.getByRole("heading", { level: 1 })).toHaveTextContent("Overview");
   },
 };
+
+/**
+ * `brandPlacement="topbar"` moves the brand mark out of the sidebar header and
+ * into the top bar, and `topBar.center` gives it a genuinely centred search
+ * field — a 3-column grid, not `flex-1` filler that only happens to centre
+ * when the flanking content is symmetric (here it is not: the brand is a
+ * short mark, the trailing slot a wider action button).
+ */
+export const BrandInTopBar: Story = {
+  name: "Brand in the top bar, with a centred search field",
+  render: () => (
+    <div className="h-[600px]">
+      <SidebarProvider>
+        <AppShell
+          brandPlacement="topbar"
+          brand={
+            <span className="flex items-center gap-2 font-semibold">
+              <Sparkles className="size-4" aria-hidden="true" />
+              Acme Inc.
+            </span>
+          }
+          topBar={{
+            center: (
+              <InputGroup className="w-72">
+                <InputGroupAddon>
+                  <Search aria-hidden="true" />
+                </InputGroupAddon>
+                <InputGroupInput placeholder="Search…" aria-label="Search" />
+              </InputGroup>
+            ),
+            end: <Button size="sm">Invite</Button>,
+          }}
+          sidebar={<AppSidebar>{navMenu}</AppSidebar>}
+        >
+          <PageShell
+            header={
+              <SectionHeader
+                as="h1"
+                title="Overview"
+                description="The sidebar renders navigation only — no header of its own — because the brand now lives in the top bar."
+              />
+            }
+          >
+            <div className="rounded-xl border bg-card p-6 text-body text-muted-foreground">
+              Main content area.
+            </div>
+          </PageShell>
+        </AppShell>
+      </SidebarProvider>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const header = canvasElement.querySelector("header") as HTMLElement;
+    await expect(header).toBeVisible();
+    const brand = canvasElement.querySelector('[data-slot="app-shell-brand"]');
+    await expect(brand).toBeVisible();
+    await expect(brand).toHaveTextContent("Acme Inc.");
+    await expect(header.contains(brand)).toBe(true);
+
+    // The search field renders through the CENTRE column, not `start`/`end`.
+    const centerSlot = canvasElement.querySelector('[data-slot="top-nav-center"]') as HTMLElement;
+    const search = canvas.getByPlaceholderText("Search…");
+    await expect(search).toBeVisible();
+    await expect(centerSlot.contains(search)).toBe(true);
+
+    // True centring: with an asymmetric brand (narrow) and action button
+    // (wider) on either side, the centre column's midpoint still lands on
+    // the bar's own midpoint — a `flex-1` row would not manage this.
+    const barBox = header.getBoundingClientRect();
+    const centerBox = centerSlot.getBoundingClientRect();
+    const barMid = barBox.left + barBox.width / 2;
+    const centerMid = centerBox.left + centerBox.width / 2;
+    await expect(Math.round(Math.abs(barMid - centerMid))).toBeLessThanOrEqual(2);
+
+    // The sidebar renders the nav rows and nothing that duplicates the brand.
+    const sidebar = canvasElement.querySelector('[data-slot="sidebar"]') as HTMLElement;
+    await expect(sidebar).toBeVisible();
+    await expect(within(sidebar).queryByText("Acme Inc.")).not.toBeInTheDocument();
+  },
+};
+
+/**
+ * No `topNav`/`topBar` at all — the layout this shell has always supported.
+ * The sidebar keeps today's behavior in full: it owns the brand (via
+ * `TeamSwitcher`) and the account menu (via `NavUser`) with no shell code
+ * change required to reach it.
+ */
+export const NoTopBar: Story = {
+  name: "No top bar",
+  render: () => (
+    <div className="h-[600px]">
+      <SidebarProvider>
+        <AppShell
+          sidebar={
+            <AppSidebar
+              header={<TeamSwitcher teams={sampleTeams} />}
+              footer={<NavUser user={sampleUser} settingsHref="/settings" />}
+            >
+              {navMenu}
+            </AppSidebar>
+          }
+        >
+          <PageShell
+            header={
+              <SectionHeader
+                as="h1"
+                title="Overview"
+                description="No top bar at all — the sidebar’s own header and footer are this screen’s only chrome."
+              />
+            }
+          >
+            <div className="rounded-xl border bg-card p-6 text-body text-muted-foreground">
+              Main content area.
+            </div>
+          </PageShell>
+        </AppShell>
+      </SidebarProvider>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvasElement.querySelector("header")).toBeNull();
+
+    const sidebar = canvasElement.querySelector('[data-slot="sidebar"]') as HTMLElement;
+    await expect(sidebar).toBeVisible();
+    // The brand lives in the sidebar's own header (TeamSwitcher), unchanged.
+    await expect(within(sidebar).getByText("Acme Inc.")).toBeVisible();
+    // …and the account menu is NavUser, the standard footer — never a loose
+    // Settings row.
+    await expect(
+      within(sidebar).getByRole("button", { name: `${sampleUser.name} ${sampleUser.email}` }),
+    ).toBeVisible();
+
+    await expect(canvas.getByRole("heading", { level: 1 })).toHaveTextContent("Overview");
+  },
+};
+
+/**
+ * `navigation="topbar"` renders no sidebar column at all — the primary
+ * navigation moves into `topBar.center` as a horizontal `NavigationMenu`
+ * instead, with the brand leading it in `topBar.start`.
+ */
+export const TopBarNavigation: Story = {
+  name: "Horizontal primary navigation in the top bar",
+  render: () => (
+    <div className="h-[600px]">
+      <AppShell
+        navigation="topbar"
+        topBar={{
+          start: (
+            <span className="flex items-center gap-2 font-semibold">
+              <Sparkles className="size-4" aria-hidden="true" />
+              Acme Inc.
+            </span>
+          ),
+          center: (
+            <NavigationMenu aria-label="Primary">
+              <NavigationMenuList>
+                {nav.map((n, i) => (
+                  <NavigationMenuItem key={n}>
+                    <NavigationMenuLink
+                      asChild
+                      active={i === 0}
+                      className={navigationMenuTriggerStyle()}
+                    >
+                      <a href="#">{n}</a>
+                    </NavigationMenuLink>
+                  </NavigationMenuItem>
+                ))}
+              </NavigationMenuList>
+            </NavigationMenu>
+          ),
+          end: <Button size="sm">Invite</Button>,
+        }}
+      >
+        <PageShell
+          header={
+            <SectionHeader
+              as="h1"
+              title="Overview"
+              description="No sidebar column — the primary navigation runs horizontally in the top bar instead."
+            />
+          }
+        >
+          <div className="rounded-xl border bg-card p-6 text-body text-muted-foreground">
+            Main content area.
+          </div>
+        </PageShell>
+      </AppShell>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // No sidebar column, in any form.
+    await expect(canvasElement.querySelector('[data-slot="sidebar"]')).toBeNull();
+
+    const primaryNav = canvas.getByRole("navigation", { name: "Primary" });
+    await expect(primaryNav).toBeVisible();
+    for (const n of nav) {
+      await expect(within(primaryNav).getByRole("link", { name: n })).toBeVisible();
+    }
+
+    const header = canvasElement.querySelector("header") as HTMLElement;
+    await expect(header.contains(primaryNav)).toBe(true);
+    await expect(header).toHaveTextContent("Acme Inc.");
+
+    await expect(canvas.getByRole("heading", { level: 1 })).toHaveTextContent("Overview");
+  },
+};
+
+/**
+ * `secondaryPanel` adds a second column beside the sidebar — sized from
+ * `--shell-secondary-width` (16rem by default) and hidden below `md` exactly
+ * like `sidebar`, for a resource/filter panel that is not itself navigation.
+ */
+export const SecondaryPanel: Story = {
+  name: "A second resource panel beside the sidebar",
+  render: () => (
+    <div className="h-[600px]">
+      <SidebarProvider>
+        <AppShell
+          sidebar={
+            <AppSidebar footer={<NavUser user={sampleUser} settingsHref="/settings" />}>
+              {navMenu}
+            </AppSidebar>
+          }
+          secondaryPanel={
+            <div className="flex h-full w-full flex-col gap-1 border-e bg-sidebar p-3 text-sidebar-foreground">
+              <div className="px-2 pb-2 text-eyebrow text-sidebar-muted-foreground">
+                Saved views
+              </div>
+              {["Overview", "In progress", "Archived"].map((label) => (
+                <button
+                  key={label}
+                  className="rounded-md px-3 py-2 text-start text-body text-sidebar-foreground/80 hover:bg-sidebar-accent/60"
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+          }
+          topNav={<TopNav start={<span className="text-body font-medium">Dashboard</span>} />}
+        >
+          <PageShell
+            header={
+              <SectionHeader
+                as="h1"
+                title="Overview"
+                description="A second column between the primary navigation and the content — its own scroll region, its own chrome."
+              />
+            }
+          >
+            <div className="rounded-xl border bg-card p-6 text-body text-muted-foreground">
+              Main content area.
+            </div>
+          </PageShell>
+        </AppShell>
+      </SidebarProvider>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const panel = canvasElement.querySelector(
+      '[data-slot="app-shell-secondary-panel"]',
+    ) as HTMLElement;
+    await expect(panel).toBeVisible();
+    await expect(panel).toHaveTextContent("Saved views");
+
+    const sidebar = canvasElement.querySelector('[data-slot="sidebar"]') as HTMLElement;
+    const main = canvasElement.querySelector("main") as HTMLElement;
+    await expect(sidebar).toBeVisible();
+    await expect(main).toBeVisible();
+
+    // DOM order: sidebar, then the secondary panel, then the main column —
+    // reading order matches the visual left-to-right layout.
+    await expect(
+      !!(sidebar.compareDocumentPosition(panel) & Node.DOCUMENT_POSITION_FOLLOWING),
+    ).toBe(true);
+    await expect(!!(panel.compareDocumentPosition(main) & Node.DOCUMENT_POSITION_FOLLOWING)).toBe(
+      true,
+    );
+
+    // The real width the token contract promises, measured in the browser.
+    const width = Math.round(panel.getBoundingClientRect().width);
+    await expect(`secondary panel width=${width}px`).toBe("secondary panel width=256px");
+  },
+};