@recursica/adapter-mui-v7 1.1.0 → 1.3.0

package/src/components/LayoutGrid/LayoutGrid.stories.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useRecursicaManifest } from "@recursica/adapter-common";
+import { LayoutGrid } from "./LayoutGrid";
+
+type LayoutGridStoryProps = React.ComponentProps<typeof LayoutGrid>;
+
+const meta: Meta<LayoutGridStoryProps> = {
+  title: "UI-Kit/LayoutGrid",
+  component: LayoutGrid,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "LayoutGrid is the Recursica layout grid. Its column count, column-gutter, row-gutter and margin come from the design system's layout-grid tokens, which Forge defines per breakpoint, so they respond to the viewport and are not integrator-configurable.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<LayoutGridStoryProps>;
+
+// Plain bordered cell: Card has a token min-width wider than one column, which would overflow it.
+const Swatch = ({ children }: { children: React.ReactNode }) => (
+  <div
+    style={{
+      border: "1px dashed currentColor",
+      padding: "8px",
+      textAlign: "center",
+    }}
+  >
+    {children}
+  </div>
+);
+
+// Reads the default layout grid from the manifest (brand.layout-grids.default) and fills two full
+// rows of single-column cells, so the story shows exactly the design system's column count.
+const DefaultGrid = () => {
+  const manifest = useRecursicaManifest() as {
+    brand: {
+      "layout-grids": { default: { columns: { $value: number } } };
+    };
+  };
+  const columns = manifest.brand["layout-grids"].default.columns.$value;
+  return (
+    <LayoutGrid>
+      {Array.from({ length: columns * 2 }, (_, i) => (
+        <LayoutGrid.Col key={i} size={1}>
+          <Swatch>{(i % columns) + 1}</Swatch>
+        </LayoutGrid.Col>
+      ))}
+    </LayoutGrid>
+  );
+};
+
+export const Default: Story = {
+  render: () => <DefaultGrid />,
+};

package/src/components/LayoutGrid/LayoutGrid.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future LayoutGrid component tests. Add tests here if/when needed.

package/src/components/LayoutGrid/LayoutGrid.tsx

@@ -0,0 +1,181 @@
+/**
+ * LayoutGrid: the Recursica layout grid.
+ *
+ * MUI merges "container" and "item" into a single `Grid` component (no separate Grid.Col,
+ * unlike Mantine). To keep the LayoutGrid/LayoutGrid.Col dot-notation shape across adapters,
+ * LayoutGrid always renders MUI's `<Grid container>` and LayoutGrid.Col a plain MUI `<Grid>`.
+ *
+ * Recursica's `layout-grids` tokens (columns, column-gutter, row-gutter, margin) are
+ * design-system-managed and breakpoint-aware (Forge redefines them inside `@media` blocks), so
+ * LayoutGrid applies them itself through the responsive CSS variables, which MUI's own
+ * `columns`/`columnSpacing`/`rowSpacing` accept as strings. None of them are props. For a fixed
+ * N-column grid use MUI's Grid directly. See `LAYOUT_GRID_IMPLEMENTATION_NOTES.md`.
+ *
+ * MUI has no per-item "grow to fill remaining space" container flag like Mantine's `grow`;
+ * use MUI's own `size="grow"` on individual columns instead. `visibleFrom`/`hiddenFrom`
+ * don't exist in MUI at all, so they're added here via CSS classes keyed on MUI's default
+ * breakpoint scale (`xs`/`sm`/`md`/`lg`/`xl`).
+ *
+ * `justifyContent`/`alignItems` (container) and `order` (item) are typed on `MuiGridProps`
+ * but MUI's Grid style generator never reads them, so they're applied via inline `style`.
+ *
+ * Like Flex, Stack, Group, and Container, this is a primitive layout component and
+ * does not use the `RecursicaOverStyled` gatekeeper; only the `sx` prop is stripped.
+ */
+import { forwardRef, type CSSProperties } from "react";
+import { Grid as MuiGrid, type GridProps as MuiGridProps } from "@mui/material";
+import {
+  type OmitSx,
+  filterSxProp,
+  type WithRecursicaSpacing,
+} from "../../utils/filterStylingProps";
+import {
+  type RecursicaLayoutGridColProps,
+  type RecursicaLayoutGridProps,
+} from "@recursica/adapter-common";
+import styles from "./LayoutGrid.module.css";
+
+type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+
+const HIDDEN_FROM_CLASS: Record<Breakpoint, string> = {
+  xs: styles.hiddenFromXs,
+  sm: styles.hiddenFromSm,
+  md: styles.hiddenFromMd,
+  lg: styles.hiddenFromLg,
+  xl: styles.hiddenFromXl,
+};
+
+// "xs" intentionally absent: visible from the smallest breakpoint means never hidden.
+const VISIBLE_FROM_CLASS: Partial<Record<Breakpoint, string>> = {
+  sm: styles.visibleFromSm,
+  md: styles.visibleFromMd,
+  lg: styles.visibleFromLg,
+  xl: styles.visibleFromXl,
+};
+
+// ============================================================
+// LAYOUT GRID
+// ============================================================
+
+export type LayoutGridProps = WithRecursicaSpacing<
+  OmitSx<
+    Omit<
+      MuiGridProps,
+      | "container"
+      | "justifyContent"
+      | "alignItems"
+      | "spacing"
+      | "columnSpacing"
+      | "rowSpacing"
+      | "columns"
+    >
+  >
+> &
+  RecursicaLayoutGridProps & {
+    /** Sets `justify-content` on the container. Applied via inline style. */
+    justifyContent?: CSSProperties["justifyContent"];
+    /** Sets `align-items` on the container. Applied via inline style. */
+    alignItems?: CSSProperties["alignItems"];
+  };
+
+// MUI types these as numbers, but its generator writes strings straight into CSS custom
+// properties (verified in @mui/system gridGenerator), so the responsive var aliases work.
+const COLUMNS =
+  "var(--recursica_brand_layout-grids_columns)" as unknown as number;
+const COLUMN_GUTTER = "var(--recursica_brand_layout-grids_column-gutter)";
+const ROW_GUTTER = "var(--recursica_brand_layout-grids_row-gutter)";
+
+const LayoutGridBase = forwardRef<HTMLDivElement, LayoutGridProps>(
+  function LayoutGrid(
+    { children, justifyContent, alignItems, style, className, ...rest },
+    ref,
+  ) {
+    // Spacing/columns props are not supported; dropped so a caller still passing one at runtime
+    // can't shadow the token-driven values below.
+    const restWithoutLayout = { ...rest } as Record<string, unknown>;
+    delete restWithoutLayout.spacing;
+    delete restWithoutLayout.columnSpacing;
+    delete restWithoutLayout.rowSpacing;
+    delete restWithoutLayout.columns;
+
+    const safeProps = filterSxProp(restWithoutLayout);
+
+    return (
+      <MuiGrid
+        ref={ref}
+        {...(safeProps as unknown as MuiGridProps)}
+        container
+        columns={COLUMNS}
+        columnSpacing={COLUMN_GUTTER}
+        rowSpacing={ROW_GUTTER}
+        className={className ? `${styles.root} ${className}` : styles.root}
+        style={{ justifyContent, alignItems, ...(style as CSSProperties) }}
+      >
+        {children}
+      </MuiGrid>
+    );
+  },
+);
+LayoutGridBase.displayName = "LayoutGrid";
+
+// ============================================================
+// LAYOUT GRID.COL
+// ============================================================
+
+// TODO(grid-col-contract): `RecursicaLayoutGridColProps` currently only contributes `children`;
+// `span`, `order`, `visibleFrom` and `hiddenFrom` are drafted but commented out in adapter-common.
+// This component's own fields stay MUI-native until that lands, when `size` renames to `span`.
+// See LAYOUT_GRID_IMPLEMENTATION_NOTES.md.
+export type LayoutGridColProps = WithRecursicaSpacing<
+  OmitSx<Omit<MuiGridProps, "container" | "order">>
+> &
+  RecursicaLayoutGridColProps & {
+    /** Sets the CSS `order` property. Applied via inline style. */
+    order?: number;
+    /** Hides the column below the given breakpoint. MUI has no native equivalent. */
+    visibleFrom?: Breakpoint;
+    /** Hides the column above the given breakpoint. MUI has no native equivalent. */
+    hiddenFrom?: Breakpoint;
+  };
+
+export const LayoutGridCol = forwardRef<HTMLDivElement, LayoutGridColProps>(
+  function LayoutGridCol(
+    { children, order, visibleFrom, hiddenFrom, style, className, ...rest },
+    ref,
+  ) {
+    const safeProps = filterSxProp(rest as Record<string, unknown>);
+
+    const visibilityClass = visibleFrom
+      ? VISIBLE_FROM_CLASS[visibleFrom]
+      : hiddenFrom
+        ? HIDDEN_FROM_CLASS[hiddenFrom]
+        : undefined;
+
+    const finalClassName = [styles.col, visibilityClass, className]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <MuiGrid
+        ref={ref}
+        className={finalClassName}
+        {...(safeProps as unknown as MuiGridProps)}
+        style={{ order, ...(style as CSSProperties) }}
+      >
+        {children}
+      </MuiGrid>
+    );
+  },
+);
+LayoutGridCol.displayName = "LayoutGridCol";
+
+// ============================================================
+// DOT NOTATION EXPORT
+// ============================================================
+
+type LayoutGridComponent = typeof LayoutGridBase & {
+  Col: typeof LayoutGridCol;
+};
+
+export const LayoutGrid = LayoutGridBase as LayoutGridComponent;
+LayoutGrid.Col = LayoutGridCol;

package/src/components/LayoutGrid/USAGE.md

@@ -0,0 +1,79 @@
+# LayoutGrid - Usage Guide
+
+This document describes how to integrate and use the `LayoutGrid` component in your projects using `@recursica/adapter-mui-v7`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { LayoutGrid } from "@recursica/adapter-mui-v7";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { LayoutGrid } from "@recursica/adapter-mui-v7";
+
+export default function Demo() {
+  return (
+    // No layout props needed: columns, column-gutter, row-gutter and margin come from the design
+    // system's layout-grids tokens and change per breakpoint.
+    <LayoutGrid>
+      <LayoutGrid.Col size={3}>Half width at 6 columns</LayoutGrid.Col>
+      <LayoutGrid.Col size={{ xs: 6, sm: 3, md: 2 }}>
+        Responsive width
+      </LayoutGrid.Col>
+    </LayoutGrid>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/adapter-mui-v7` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Variables and Theming**: LayoutGrid follows the design system's own `layout-grids` tokens (columns, column-gutter, row-gutter and margin), applied automatically. Forge can define these per breakpoint, and the grid follows. None of them are configurable via props.
+> - **Primitive layout component**: see [OVERSTYLING.md](../../../OVERSTYLING.md); only the `sx` prop is stripped, everything else passes through without `overStyled`.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+
+> [!NOTE] > **Recommended: build your MUI theme's breakpoints from the Forge manifest with `breakpointsFromRecManifest`.** Responsive keys such as `{ xs, sm, md }` on `LayoutGrid.Col` (and on Flex, Stack, Group) come from `theme.breakpoints`, while Forge's layout grids switch via plain CSS `@media`. If the two differ, tokens flip at Forge's width and props at the theme's. See [SETUP.md](../../../SETUP.md):
+>
+> ```tsx
+> import { createTheme } from "@mui/material/styles";
+> import { breakpointsFromRecManifest } from "@recursica/adapter-mui-v7";
+> import manifest from "./recursica_manifest.json";
+>
+> const theme = createTheme({
+>   breakpoints: {
+>     values: {
+>       ...createTheme().breakpoints.values,
+>       ...breakpointsFromRecManifest(manifest),
+>     },
+>   },
+> });
+> ```
+
+---
+
+## 4. Key Integration Features & Constraints
+
+`LayoutGrid.Col` uses MUI's own prop vocabulary (see [LAYOUT_GRID_IMPLEMENTATION_NOTES.md](./LAYOUT_GRID_IMPLEMENTATION_NOTES.md)), not name-for-name identical to the Mantine adapter's.
+
+- `LayoutGrid` does not accept `columns`, `spacing`, `columnSpacing` or `rowSpacing`: column count, column-gutter, row-gutter and margin are design-system-managed (Forge-controlled, breakpoint-aware, applied via CSS variables). For a fixed N-column grid unrelated to page layout, use MUI's `Grid` directly.
+- `size` (on `LayoutGrid.Col`) accepts a column count, `"auto"`, `"grow"`, or a responsive object (`{ xs, sm, md, ... }`). A numeric size is relative to Forge's current column count and a column never grows wider than the row.
+- `offset` shifts a column by a number of columns.
+- `order` accepts a fixed number to control a column's visual order (single value only, no responsive object).
+- `visibleFrom`/`hiddenFrom` show or hide a column at MUI's default breakpoints (600/900/1200/1536px).
+- `justifyContent`/`alignItems` on `LayoutGrid` set the container's flex alignment.
+
+> [!WARNING]
+>
+> **Breaking change:** `Grid` is now `LayoutGrid` (`Grid.Col` is `LayoutGrid.Col`), and its `columns` prop was removed.

package/src/components/LayoutGrid/index.ts

@@ -0,0 +1 @@
+export * from "./LayoutGrid";

package/src/components/Menu/Menu.stories.tsx

@@ -294,9 +294,6 @@ export const WithSubmenus: Story = {
   ),
   args: {
     opened: true,
-    // Match mantine's explicit `width: 200` for this story so the row has room for the
-    // "Products"/"Orders" label plus the submenu chevron without clipping it.
-    slotProps: { paper: { style: { minWidth: 200 } } },
   },
 };
 

package/src/components/Pagination/IMPLEMENTATION_NOTES.md

@@ -1,40 +1,44 @@
 # Pagination Implementation Notes
 
-- **Compositional API Dropped:** Mantine's original `Pagination` component relies heavily on dot-notation sub-components (`Pagination.Root`, `Pagination.Items`, `Pagination.Control`, etc.). MUI's `<Pagination>` is fundamentally monolithic. Following architectural review, we have decided to drop the dot-notation wrappers for `adapter-mui-v7` and rely strictly on MUI's monolithic API. Storybook and visual regression tests have been updated to reflect this divergence while retaining core property mapping compatibility.
-
-## `renderItem` was never wired up (source-of-truth audit, 2026-08-30)
-
-`Pagination.module.css` already had complete, correctly-tokenized rules for `.control` (the
-circle/pill for every page/nav item), `.dots` (the ellipsis), `.iconWithLabel`, and `.baseIcon` —
-and `Pagination.icons.tsx` already had `PaginationIcon` plus `NextWithLabel`/`PrevWithLabel`/
-`FirstWithLabel`/`LastWithLabel` fully built. None of it was ever applied: `Pagination.tsx` only
-mapped MUI `Pagination`'s top-level `classes` prop (`root`/`ul` — the _only_ two slots MUI's own
-`Pagination` component exposes) and silently discarded the `withLabels` prop entirely. Every
-page/nav button rendered as MUI's own completely unstyled default `PaginationItem` — explaining
-the whole cluster of reported issues at once: undersized circles (no `.control` height/width),
-grey selected state and missing outline (no `.control`/`[data-active]` colors), wrong font color,
-default MUI arrow icons in the wrong color (no `PaginationIcon`), default ripple (MUI's
-`PaginationItem` uses `ButtonBase` with ripple enabled by default), and no text labels ever
-possible (`withLabels` was read and thrown away).
-
-**Fix:** `Pagination.tsx` now passes a `renderItem` to `MuiPagination` that renders every item as
-`<PaginationItem className={styles.control} data-active={item.selected} data-variant={isNavigation
-? "text" : undefined} disableRipple slots={...} />` (ellipsis items get `styles.dots` instead).
-`slots.first/last/next/previous` point at `PaginationIcon` (plain) or the `*WithLabel` components
-(when `withLabels` is true) — both were already correctly built to work as MUI `PaginationItem`
-icon slots (only the icon itself receives MUI's forwarded className/props via `{...props}` spread
-onto the inner `PaginationIcon`, not the outer label-wrapping `<div>`, so the label text isn't
-constrained by MUI's icon-sized styled wrapper).
-
-Also added a local `--pagination-control-size` bridge variable (bound to the Button height token
-`.control` is already sized from) — `.baseIcon`'s `calc(var(--pagination-control-size) / 1.8)`
-was copied verbatim from mantine-adapter, where `--pagination-control-size` is a _native_ Mantine
-CSS variable Mantine's own `Pagination` stamps onto the DOM already; MUI has no equivalent, so
-the calc silently resolved to `NaN`/`0` here until this bridge was added.
-
-**Residual, not fixed:** the previous/next chevron control renders ~3.8px wider in mantine
-(51.8px vs. mui's exact 48px square) — mantine's own icon-only nav button apparently doesn't
-collapse fully to `min-width` the way mui's `PaginationItem` does. Pixel-matched everywhere else
-(page-number circle size/color/border, selected state, ellipsis centering, chevron colors, hover
-treatment, ripple removal, text labels) — not investigated further given the small, cosmetic
-scope of this one remaining gap.
+## Architecture: Recursica Buttons driven by the manifest
+
+Forge's `ui-kit.components.pagination` defines its page and navigation controls as `Button`
+variants (`active-pages`, `inactive-pages`, `navigation-controls`, each with a `selected-variants`
+style and size). Pagination therefore renders Recursica `Button`s with those props and does no
+button styling of its own: radius, padding, colors, hover and disabled all come from `Button`.
+(Before 2026-10-05 it restyled MUI's `PaginationItem` by hand with copies of the Button tokens.)
+
+- `Pagination` reads the selected `style` and `size` per role from the manifest with
+  `useRecursicaManifest()` (`adapter-common`), provided by `RecursicaThemeProvider`'s `manifest`
+  prop. It throws if there is no manifest or if a role has no `selected-variants`. The values are
+  passed to `Button` as is, with no validation and no fallbacks.
+- `content` (`label`, `icon-label`, `icon-only`) is not read: `Button` derives it from its own
+  children and icon, so page numbers are `label` and the navigation buttons are `icon-only`
+  (`icon-label` with `withLabels`).
+
+## Why `usePagination`, not MUI's `Pagination`
+
+MUI's `Pagination`/`PaginationItem` render their own `ButtonBase`, which can't be swapped for our
+`Button`. The component is built on MUI's `usePagination` hook instead (page state, ranges,
+siblings/boundaries, first/previous/next/last items and their disabled state) and maps each item to
+a `Button`. The MUI-vocabulary props `page`, `defaultPage`, `onChange(event, page)`, `siblingCount`,
+`boundaryCount` and `disabled` are kept; other `PaginationProps` (`shape`, `variant`, `color`,
+`size`, `renderItem`, ...) are no longer accepted.
+
+There are no dot-notation parts (`Pagination.Root`, `Items`, ...); the Mantine adapter has them.
+`getItemProps(page)` and `getControlProps(control)` are the override hooks for page and
+navigation buttons, and `dotsIcon` replaces the ellipsis.
+
+## Labels
+
+`withLabels` adds a text label to each navigation button. `First`/`Previous` put the icon first
+(`Button`'s `icon`); `Next`/`Last` put it after the label (`endIcon`, wrapped in `.rightIcon` and
+sized to the Button's icon token via `[data-size]` in `Pagination.module.css`).
+
+## Styling
+
+`Pagination.module.css` only lays out the row (`item-gap`) and styles the dots (`dots-color`).
+
+- The root is a `<nav aria-label="Pagination">` landmark, and each page button has `aria-label="Page N"`
+  (`Previous page`, `Next page`, etc. for the navigation buttons). Both can be overridden by props.
+- The ref is an `HTMLElement` (the `<nav>`).

package/src/components/Pagination/Pagination.icons.tsx

@@ -32,35 +32,3 @@ export const PaginationIcon = ({
     <path d={paths[type as PaginationIconType]} fill="currentColor" />
   </svg>
 );
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const NextWithLabel = (props: any) => (
-  <div className={styles.iconWithLabel}>
-    <span>Next</span>
-    <PaginationIcon type="next" {...props} />
-  </div>
-);
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const PrevWithLabel = (props: any) => (
-  <div className={styles.iconWithLabel}>
-    <PaginationIcon type="prev" {...props} />
-    <span>Prev</span>
-  </div>
-);
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const FirstWithLabel = (props: any) => (
-  <div className={styles.iconWithLabel}>
-    <PaginationIcon type="first" {...props} />
-    <span>First</span>
-  </div>
-);
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const LastWithLabel = (props: any) => (
-  <div className={styles.iconWithLabel}>
-    <span>Last</span>
-    <PaginationIcon type="last" {...props} />
-  </div>
-);

package/src/components/Pagination/Pagination.manifest.dom.test.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { RecursicaManifestContext } from "@recursica/adapter-common";
+import { Pagination } from "./Pagination";
+
+const role = (style: string, size: string) => ({
+  $extensions: {
+    "recursica.component": { "selected-variants": { style, size } },
+  },
+});
+const manifest = (props: Record<string, unknown>) => ({
+  "ui-kit": { components: { pagination: { properties: props } } },
+});
+const full = manifest({
+  "active-pages": role("solid", "small"),
+  "inactive-pages": role("outline", "small"),
+  "navigation-controls": role("text", "small"),
+});
+
+class Catch extends React.Component<
+  { children: React.ReactNode },
+  { error?: Error }
+> {
+  state: { error?: Error } = {};
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+  render() {
+    return this.state.error ? (
+      <span data-error>{this.state.error.message}</span>
+    ) : (
+      this.props.children
+    );
+  }
+}
+
+function mount(m: Record<string, unknown> | undefined) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  flushSync(() =>
+    root.render(
+      <Catch>
+        <RecursicaManifestContext.Provider value={m}>
+          <Pagination total={5} defaultPage={2} />
+        </RecursicaManifestContext.Provider>
+      </Catch>,
+    ),
+  );
+  return {
+    container,
+    error: container.querySelector("[data-error]")?.textContent,
+    done: () => {
+      root.unmount();
+      container.remove();
+    },
+  };
+}
+
+describe("Pagination manifest variants", () => {
+  it("renders Buttons with the style and size the manifest selects per role", () => {
+    const { container, error, done } = mount(full);
+    expect(error).toBeUndefined();
+    const active = container.querySelector('[aria-current="page"]');
+    expect(active?.getAttribute("data-variant")).toBe("solid");
+    expect(active?.getAttribute("data-size")).toBe("small");
+    const inactive = [...container.querySelectorAll("button")].find(
+      (b) => b.textContent === "3",
+    );
+    expect(inactive?.getAttribute("data-variant")).toBe("outline");
+    const next = container.querySelector('[aria-label="Next page"]');
+    expect(next?.getAttribute("data-variant")).toBe("text");
+    expect(next?.getAttribute("data-content")).toBe("icon-only");
+    done();
+  });
+
+  it("renders a labelled nav with a labelled button per page", () => {
+    const { container, error, done } = mount(full);
+    expect(error).toBeUndefined();
+    expect(container.querySelector("nav")?.getAttribute("aria-label")).toBe(
+      "Pagination",
+    );
+    const three = [...container.querySelectorAll("button")].find(
+      (b) => b.textContent === "3",
+    );
+    expect(three?.getAttribute("aria-label")).toBe("Page 3");
+    done();
+  });
+
+  it("throws without a manifest", () => {
+    const { error, done } = mount(undefined);
+    expect(error).toMatch(/Recursica manifest/);
+    done();
+  });
+
+  it("throws when a role has no selected variants", () => {
+    const { error, done } = mount(
+      manifest({ "active-pages": role("solid", "small") }),
+    );
+    expect(error).toMatch(/selected-variants/);
+    done();
+  });
+});