react-cheminfo 0.46.0 → 0.48.0

package/src/periodic/ui/PeriodicTable.tsx

@@ -10,12 +10,7 @@
  * a site's own richer element record never has to cross into this component.
  */
 
-import type {
-  CSSProperties,
-  KeyboardEvent,
-  ReactElement,
-  ReactNode,
-} from 'react';
+import type { KeyboardEvent, ReactElement } from 'react';
 import { useEffect, useRef } from 'react';
 
 import type { Swatch } from '../../color/core/interpolate.ts';
@@ -23,13 +18,8 @@ import { useResizeObserver } from '../../hooks/ui/useResizeObserver.ts';
 import { useChromeT } from '../../i18n/ui/useT.ts';
 import { categorySwatch } from '../core/categories.ts';
 import type { PeriodicElement } from '../core/elements.ts';
-import type { ElementRange } from '../core/layout.ts';
-import {
-  COLUMN_COUNT,
-  EMPTY_BLOCK,
-  elementByArrowKey,
-  placedElements,
-} from '../core/layout.ts';
+import type { ElementPick } from '../core/layout.ts';
+import { elementByArrowKey, placedElements } from '../core/layout.ts';
 
 import { CategoryLegend } from './CategoryLegend.tsx';
 import { ElementCell } from './ElementCell.tsx';
@@ -38,108 +28,16 @@ import {
   InnerTransitionMarkers,
 } from './PeriodicTableChrome.tsx';
 import {
-  ROW_SHARE,
   SHELLS_RESERVED,
   detailType,
   shellFontSize,
   textWidthInEm,
 } from './cellType.ts';
-import { UNIT_PROPERTY, ofWidth, unitValue } from './unit.ts';
+import type { PeriodicTableProps } from './periodicTableProps.ts';
+import { gridStyle, insetStyle, rootStyle } from './tableLayout.ts';
+import { UNIT_PROPERTY, unitValue } from './unit.ts';
 
-/** What {@link PeriodicTable} needs. */
-export interface PeriodicTableProps {
-  /**
-   * Symbol of the element the tools are pointed at.
-   * @default undefined — none is
-   */
-  selected?: string;
-  /**
-   * Called with the symbol of the element that was clicked, and by the arrow
-   * keys.
-   * @default undefined — the table is a figure rather than a control
-   */
-  onSelect?: (symbol: string) => void;
-  /**
-   * The colour each cell takes.
-   * @default the family colour
-   */
-  swatchOf?: (element: PeriodicElement) => Swatch;
-  /**
-   * What is written under the symbol; an empty string writes nothing.
-   * @default nothing is written
-   */
-  detailOf?: (element: PeriodicElement) => string;
-  /**
-   * How an element is named, for the label a screen reader reads. The hook a
-   * site translating the table writes its own names through.
-   * @default the English name
-   */
-  nameOf?: (element: PeriodicElement) => string;
-  /**
-   * Electrons in each shell of an element, innermost first, written down the
-   * right-hand edge of its cell. The energy levels, which a table is also read
-   * for: none of ours knows them, so the tool that does says so here.
-   * @default undefined — no cell writes any
-   */
-  shellsOf?: (element: PeriodicElement) => readonly number[] | undefined;
-  /**
-   * Whether an element is inside the set the tool is showing. Everything
-   * outside it is dimmed rather than removed, so the table keeps its shape.
-   * @default every element is
-   */
-  isIncluded?: (element: PeriodicElement) => boolean;
-  /**
-   * What is written in the block the table leaves empty — columns 3 to 12 of
-   * the first three periods, in the middle of the top edge. A tool that reads
-   * one element off the table puts what it says about it there, where the eye
-   * already is, rather than under the grid.
-   *
-   * It is sized against the table, like everything else in the grid, so give
-   * it type in `em` and it scales with the drawing.
-   * @default undefined — the block stays empty
-   */
-  inset?: ReactNode;
-  /**
-   * Whether to draw the group and period strips.
-   * @default false
-   */
-  headers?: boolean;
-  /**
-   * Called when a whole group or period header is clicked. The run says
-   * whether the click was additive — Cmd or Ctrl held — so a tool can let a
-   * reader put two periods on one chart. Without it the strips are labels
-   * rather than buttons.
-   * @default undefined
-   */
-  onSelectRange?: (range: ElementRange) => void;
-  /**
-   * Whether to draw the family legend under the grid.
-   * @default false
-   */
-  legend?: boolean;
-  /**
-   * Whether the dashed markers stand where the two inner-transition series were
-   * lifted out of the main block.
-   * @default true
-   */
-  markers?: boolean;
-  /**
-   * Whether the arrow keys walk the grid: down from carbon is silicon, and
-   * right from the end of a period is the start of the next.
-   * @default true
-   */
-  keyboard?: boolean;
-  /**
-   * Called on pointer enter with the symbol, and on leave with `null`.
-   * @default undefined
-   */
-  onHover?: (symbol: string | null) => void;
-  /**
-   * Class of the outermost element.
-   * @default undefined
-   */
-  className?: string;
-}
+export type { PeriodicTableProps } from './periodicTableProps.ts';
 
 /**
  * The 118 elements, laid out as the table.
@@ -158,6 +56,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
     inset,
     headers = false,
     onSelectRange,
+    onSelectAll,
     legend = false,
     markers = true,
     keyboard = true,
@@ -198,7 +97,7 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
     if (next === null) return;
     event.preventDefault();
     cameFromKeyRef.current = true;
-    onSelect(next.symbol);
+    onSelect(next.symbol, PLAIN_PICK);
   }
 
   // One size for the whole table rather than one per cell: a column of values
@@ -219,7 +118,15 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
   const shellSize = shellFontSize(deepest);
 
   return (
-    <div ref={rootRef} className={className} style={rootStyle}>
+    <div
+      ref={rootRef}
+      className={className}
+      // Drawn in HTML so every cell is a button, and saved by being painted
+      // from where the browser put it: a site saves the table by pointing
+      // `FigureDownload` at any box around it.
+      data-figure="html"
+      style={rootStyle}
+    >
       <div
         ref={gridRef}
         role="grid"
@@ -228,7 +135,12 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
         style={gridStyle(headers)}
         onKeyDown={handleKeyDown}
       >
-        {headers ? <HeaderStrips onSelectRange={onSelectRange} /> : null}
+        {headers ? (
+          <HeaderStrips
+            onSelectRange={onSelectRange}
+            onSelectAll={onSelectAll}
+          />
+        ) : null}
         {inset === undefined ? null : (
           <div style={insetStyle(offset)}>{inset}</div>
         )}
@@ -258,30 +170,6 @@ export function PeriodicTable(props: PeriodicTableProps): ReactElement {
   );
 }
 
-/**
- * Where what the caller writes in the empty block is placed.
- * @param offset - 1 when the table draws its header strips, 0 otherwise.
- * @returns The style of the slot.
- */
-function insetStyle(offset: number): CSSProperties {
-  return {
-    alignItems: 'center',
-    display: 'flex',
-    // A column of air on each side, so the writing reads as sitting in the
-    // block rather than as running into the cells beside it.
-    padding: `0 ${ofWidth(2.4)}`,
-    gridColumn: `${String(EMPTY_BLOCK.column + offset)} / span ${String(EMPTY_BLOCK.columnSpan)}`,
-    gridRow: `${String(EMPTY_BLOCK.row + offset)} / span ${String(EMPTY_BLOCK.rowSpan)}`,
-    // A share of the table, with a floor, exactly as a cell sizes its symbol:
-    // the block holds the same three rows at every width, so what is written
-    // in it has to shrink with them.
-    fontSize: `max(0.6rem, ${ofWidth(1.8)})`,
-    lineHeight: 1.35,
-    minWidth: 0,
-    overflow: 'hidden',
-  };
-}
-
 function defaultSwatchOf(element: PeriodicElement): Swatch {
   return categorySwatch(element.category);
 }
@@ -290,68 +178,10 @@ function defaultNameOf(element: PeriodicElement): string {
   return element.name;
 }
 
+/** The arrow keys walk the table to read it; they never add to a set. */
+const PLAIN_PICK: ElementPick = { additive: false };
+
 function noop(): void {
   // A table with no `onSelect` is a figure; its cells stay buttons so the
   // keyboard and a screen reader still reach every element.
 }
-
-/** Narrowest the table is ever drawn; under it the type stops being readable. */
-const MIN_WIDTH = 280;
-
-/**
- * How tall one row of elements is, as a share of the table's width.
- *
- * A column is about 5.2% of that width, so a cell is a third taller than it is
- * wide — the proportion of a wall chart, and the room the three bands of a
- * cell need to be read from the back of a room. It is the same height in every
- * table: a cell keeps the band it writes a value in whether or not that table
- * writes one.
- */
-const ROW_HEIGHT = ofWidth(ROW_SHARE);
-
-/** The band the two inner-transition series were lifted out across. */
-const SERIES_GAP = `max(6px, ${ofWidth(1.1)})`;
-
-const rootStyle = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 8,
-  minWidth: MIN_WIDTH,
-  // Everything inside — the height of a row as much as the type in a cell — is
-  // a share of this box rather than of the page, so the same table reads at
-  // 280px beside a chart and fills a lecture-hall screen at twice that. The
-  // share is measured (see `unit.ts`); the container is what the `1cqw`
-  // fallback and a site's own `@container` rules are answered by, and it keeps
-  // this box's width independent of what is written inside it.
-  containerType: 'inline-size',
-} as const satisfies CSSProperties;
-
-const baseGridStyle = {
-  display: 'grid',
-  gap: 2,
-  minWidth: MIN_WIDTH,
-  width: '100%',
-} as const satisfies CSSProperties;
-
-/**
- * The grid the cells are placed on.
- * @param headers - Whether a leading column and row hold the period and group
- * numbers.
- * @returns The style of the grid.
- */
-function gridStyle(headers: boolean): CSSProperties {
-  // The eighth row is the gap the inner-transition series are lifted out into.
-  const rows = `repeat(7, ${ROW_HEIGHT}) ${SERIES_GAP} repeat(2, ${ROW_HEIGHT})`;
-  if (!headers) {
-    return {
-      ...baseGridStyle,
-      gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-      gridTemplateRows: rows,
-    };
-  }
-  return {
-    ...baseGridStyle,
-    gridTemplateColumns: `max(14px, ${ofWidth(2.4)}) repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
-    gridTemplateRows: `max(12px, ${ofWidth(2)}) ${rows}`,
-  };
-}

package/src/periodic/ui/PeriodicTableChrome.tsx

@@ -14,6 +14,8 @@ import {
   INNER_TRANSITION_ROWS,
 } from '../core/layout.ts';
 
+import { SelectAllCorner } from './SelectAllCorner.tsx';
+import { headerButtonStyle, headerStyle } from './headerStyles.ts';
 import { ofWidth } from './unit.ts';
 
 /** What {@link HeaderStrips} needs. */
@@ -24,18 +26,28 @@ interface HeaderStripsProps {
    * @default undefined
    */
   onSelectRange?: (range: ElementRange) => void;
+  /**
+   * Called when the corner where the two strips meet is clicked. The corner of
+   * a spreadsheet takes everything, and a table whose rows and columns are one
+   * click each owes the same for the whole of it. Without it the corner stays
+   * empty.
+   * @default undefined
+   */
+  onSelectAll?: () => void;
 }
 
 /**
- * The 1–18 strip along the top and the 1–7 strip down the left.
+ * The 1–18 strip along the top, the 1–7 strip down the left, and the corner
+ * where they meet.
  *
  * They are buttons when the table takes a range: "plot period 3" is one click
- * there and eight on the cells.
+ * there and eight on the cells. The corner takes the whole table, which is the
+ * gesture a spreadsheet has taught everybody.
  * @param props - See {@link HeaderStripsProps}.
- * @returns The two strips, placed on the grid.
+ * @returns The two strips, the corner, and the inner-transition period numbers.
  */
 export function HeaderStrips(props: HeaderStripsProps): ReactElement {
-  const { onSelectRange } = props;
+  const { onSelectRange, onSelectAll } = props;
   const t = useChromeT();
   const groups: ReactElement[] = [];
   for (let group = 1; group <= COLUMN_COUNT; group++) {
@@ -84,6 +96,12 @@ export function HeaderStrips(props: HeaderStripsProps): ReactElement {
 
   return (
     <>
+      {onSelectAll === undefined ? null : (
+        <SelectAllCorner
+          title={t('periodic.allElements')}
+          onClick={onSelectAll}
+        />
+      )}
       {groups}
       {periods}
       {INNER_TRANSITION_ROWS.map(({ row, period }) => (
@@ -159,6 +177,7 @@ function HeaderCell(props: HeaderCellProps): ReactElement {
     <button
       type="button"
       aria-label={title}
+      title={title}
       onClick={onClick}
       style={{ ...style, ...headerButtonStyle }}
     >
@@ -167,22 +186,6 @@ function HeaderCell(props: HeaderCellProps): ReactElement {
   );
 }
 
-const headerStyle = {
-  alignItems: 'center',
-  color: TOKEN.textMuted,
-  display: 'flex',
-  fontSize: `max(0.45rem, ${ofWidth(1.35)})`,
-  justifyContent: 'center',
-  padding: 0,
-} as const satisfies CSSProperties;
-
-const headerButtonStyle = {
-  background: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  font: 'inherit',
-} as const satisfies CSSProperties;
-
 const markerStyle = {
   alignItems: 'center',
   border: `1px dashed ${TOKEN.borderStrong}`,

package/src/periodic/ui/SelectAllCorner.tsx

@@ -0,0 +1,65 @@
+import type { FocusEvent, ReactElement } from 'react';
+import { useState } from 'react';
+
+import { headerButtonStyle, headerStyle } from './headerStyles.ts';
+
+/** What {@link SelectAllCorner} needs. */
+interface SelectAllCornerProps {
+  /** What it does, for the pointer and for a screen reader. */
+  title: string;
+  /** Called when it is clicked. */
+  onClick: () => void;
+}
+
+/**
+ * The corner where the two header strips meet, which takes the whole table.
+ *
+ * It is a control and nothing else, so it stays out of sight until it is
+ * pointed at or reached from the keyboard, and it is left off a print and out
+ * of a saved figure. The glyph points into the grid it takes, as a
+ * spreadsheet's does; it is a mark rather than a word because the corner is a
+ * seventeenth of the table's width, and the word differs in every language the
+ * chrome speaks.
+ * @param props - See {@link SelectAllCornerProps}.
+ * @returns The corner.
+ */
+export function SelectAllCorner(props: SelectAllCornerProps): ReactElement {
+  const { title, onClick } = props;
+  const [pointed, setPointed] = useState(false);
+  const [focused, setFocused] = useState(false);
+
+  return (
+    <button
+      type="button"
+      aria-label={title}
+      title={title}
+      onClick={onClick}
+      style={{
+        ...headerStyle,
+        gridColumn: 1,
+        gridRow: 1,
+        ...headerButtonStyle,
+        opacity: pointed || focused ? 1 : 0,
+        transition: 'opacity 120ms ease',
+      }}
+      className="no-print"
+      data-figure="chrome"
+      onPointerEnter={() => {
+        setPointed(true);
+      }}
+      onPointerLeave={() => {
+        setPointed(false);
+      }}
+      // Only a focus the keyboard gave it: a click focuses it too, and the
+      // glyph would otherwise stay up after the pointer has gone.
+      onFocus={(event: FocusEvent<HTMLButtonElement>) => {
+        setFocused(event.currentTarget.matches(':focus-visible'));
+      }}
+      onBlur={() => {
+        setFocused(false);
+      }}
+    >
+      ◢
+    </button>
+  );
+}

package/src/periodic/ui/headerStyles.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties } from 'react';
+
+import { TOKEN } from '../../tokens/core/familyTokens.ts';
+
+import { ofWidth } from './unit.ts';
+
+/** A group or period number, and the corner where the two strips meet. */
+export const headerStyle = {
+  alignItems: 'center',
+  color: TOKEN.textMuted,
+  display: 'flex',
+  fontSize: `max(0.45rem, ${ofWidth(1.35)})`,
+  justifyContent: 'center',
+  padding: 0,
+} as const satisfies CSSProperties;
+
+/** The same, when it is a button: the type and the ground stay the strip's. */
+export const headerButtonStyle = {
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  font: 'inherit',
+} as const satisfies CSSProperties;

package/src/periodic/ui/periodicTableProps.ts

@@ -0,0 +1,117 @@
+/**
+ * What a caller hands a `PeriodicTable`.
+ *
+ * The props live beside the component rather than inside it, so a reader
+ * looking for what the table does does not scroll past a page of options.
+ */
+
+import type { ReactNode } from 'react';
+
+import type { Swatch } from '../../color/core/interpolate.ts';
+import type { PeriodicElement } from '../core/elements.ts';
+import type { ElementPick, ElementRange } from '../core/layout.ts';
+
+/** What `PeriodicTable` needs. */
+export interface PeriodicTableProps {
+  /**
+   * Symbol of the element the tools are pointed at.
+   * @default undefined — none is
+   */
+  selected?: string;
+  /**
+   * Called with the symbol of the element that was clicked, and by the arrow
+   * keys. The pick says whether the click was additive — Cmd or Ctrl held — so
+   * a tool whose plain click already reads one element into a card can let the
+   * same table build a set of them.
+   * @default undefined — the table is a figure rather than a control
+   */
+  onSelect?: (symbol: string, pick: ElementPick) => void;
+  /**
+   * The colour each cell takes.
+   * @default the family colour
+   */
+  swatchOf?: (element: PeriodicElement) => Swatch;
+  /**
+   * What is written under the symbol; an empty string writes nothing.
+   * @default nothing is written
+   */
+  detailOf?: (element: PeriodicElement) => string;
+  /**
+   * How an element is named, for the label a screen reader reads. The hook a
+   * site translating the table writes its own names through.
+   * @default the English name
+   */
+  nameOf?: (element: PeriodicElement) => string;
+  /**
+   * Electrons in each shell of an element, innermost first, written down the
+   * right-hand edge of its cell. The energy levels, which a table is also read
+   * for: none of ours knows them, so the tool that does says so here.
+   * @default undefined — no cell writes any
+   */
+  shellsOf?: (element: PeriodicElement) => readonly number[] | undefined;
+  /**
+   * Whether an element is inside the set the tool is showing. Everything
+   * outside it is dimmed rather than removed, so the table keeps its shape.
+   * @default every element is
+   */
+  isIncluded?: (element: PeriodicElement) => boolean;
+  /**
+   * What is written in the block the table leaves empty — columns 3 to 12 of
+   * the first three periods, in the middle of the top edge. A tool that reads
+   * one element off the table puts what it says about it there, where the eye
+   * already is, rather than under the grid.
+   *
+   * It is sized against the table, like everything else in the grid, so give
+   * it type in `em` and it scales with the drawing.
+   * @default undefined — the block stays empty
+   */
+  inset?: ReactNode;
+  /**
+   * Whether to draw the group and period strips.
+   * @default false
+   */
+  headers?: boolean;
+  /**
+   * Called when a whole group or period header is clicked. The run says
+   * whether the click was additive — Cmd or Ctrl held — so a tool can let a
+   * reader put two periods on one chart. Without it the strips are labels
+   * rather than buttons.
+   * @default undefined
+   */
+  onSelectRange?: (range: ElementRange) => void;
+  /**
+   * Called when the corner where the two header strips meet is clicked, which
+   * is how a reader takes the whole table back. The corner shows its glyph only
+   * while it is pointed at or reached from the keyboard. Without it the corner
+   * stays empty.
+   * @default undefined
+   */
+  onSelectAll?: () => void;
+  /**
+   * Whether to draw the family legend under the grid.
+   * @default false
+   */
+  legend?: boolean;
+  /**
+   * Whether the dashed markers stand where the two inner-transition series were
+   * lifted out of the main block.
+   * @default true
+   */
+  markers?: boolean;
+  /**
+   * Whether the arrow keys walk the grid: down from carbon is silicon, and
+   * right from the end of a period is the start of the next.
+   * @default true
+   */
+  keyboard?: boolean;
+  /**
+   * Called on pointer enter with the symbol, and on leave with `null`.
+   * @default undefined
+   */
+  onHover?: (symbol: string | null) => void;
+  /**
+   * Class of the outermost element.
+   * @default undefined
+   */
+  className?: string;
+}

package/src/periodic/ui/tableLayout.ts

@@ -0,0 +1,96 @@
+/**
+ * How the table is laid out: the box it measures, the grid its cells sit on,
+ * and the block a caller may write in.
+ */
+
+import type { CSSProperties } from 'react';
+
+import { COLUMN_COUNT, EMPTY_BLOCK } from '../core/layout.ts';
+
+import { ROW_SHARE } from './cellType.ts';
+import { ofWidth } from './unit.ts';
+
+/**
+ * Where what the caller writes in the empty block is placed.
+ * @param offset - 1 when the table draws its header strips, 0 otherwise.
+ * @returns The style of the slot.
+ */
+export function insetStyle(offset: number): CSSProperties {
+  return {
+    alignItems: 'center',
+    display: 'flex',
+    // A column of air on each side, so the writing reads as sitting in the
+    // block rather than as running into the cells beside it.
+    padding: `0 ${ofWidth(2.4)}`,
+    gridColumn: `${String(EMPTY_BLOCK.column + offset)} / span ${String(EMPTY_BLOCK.columnSpan)}`,
+    gridRow: `${String(EMPTY_BLOCK.row + offset)} / span ${String(EMPTY_BLOCK.rowSpan)}`,
+    // A share of the table, with a floor, exactly as a cell sizes its symbol:
+    // the block holds the same three rows at every width, so what is written
+    // in it has to shrink with them.
+    fontSize: `max(0.6rem, ${ofWidth(1.8)})`,
+    lineHeight: 1.35,
+    minWidth: 0,
+    overflow: 'hidden',
+  };
+}
+
+/** Narrowest the table is ever drawn; under it the type stops being readable. */
+const MIN_WIDTH = 280;
+
+/**
+ * How tall one row of elements is, as a share of the table's width.
+ *
+ * A column is about 5.2% of that width, so a cell is a third taller than it is
+ * wide — the proportion of a wall chart, and the room the three bands of a
+ * cell need to be read from the back of a room. It is the same height in every
+ * table: a cell keeps the band it writes a value in whether or not that table
+ * writes one.
+ */
+const ROW_HEIGHT = ofWidth(ROW_SHARE);
+
+/** The band the two inner-transition series were lifted out across. */
+const SERIES_GAP = `max(6px, ${ofWidth(1.1)})`;
+
+export const rootStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 8,
+  minWidth: MIN_WIDTH,
+  // Everything inside — the height of a row as much as the type in a cell — is
+  // a share of this box rather than of the page, so the same table reads at
+  // 280px beside a chart and fills a lecture-hall screen at twice that. The
+  // share is measured (see `unit.ts`); the container is what the `1cqw`
+  // fallback and a site's own `@container` rules are answered by, and it keeps
+  // this box's width independent of what is written inside it.
+  containerType: 'inline-size',
+} as const satisfies CSSProperties;
+
+const baseGridStyle = {
+  display: 'grid',
+  gap: 2,
+  minWidth: MIN_WIDTH,
+  width: '100%',
+} as const satisfies CSSProperties;
+
+/**
+ * The grid the cells are placed on.
+ * @param headers - Whether a leading column and row hold the period and group
+ * numbers.
+ * @returns The style of the grid.
+ */
+export function gridStyle(headers: boolean): CSSProperties {
+  // The eighth row is the gap the inner-transition series are lifted out into.
+  const rows = `repeat(7, ${ROW_HEIGHT}) ${SERIES_GAP} repeat(2, ${ROW_HEIGHT})`;
+  if (!headers) {
+    return {
+      ...baseGridStyle,
+      gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+      gridTemplateRows: rows,
+    };
+  }
+  return {
+    ...baseGridStyle,
+    gridTemplateColumns: `max(14px, ${ofWidth(2.4)}) repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+    gridTemplateRows: `max(12px, ${ofWidth(2)}) ${rows}`,
+  };
+}