react-cheminfo 0.6.0 → 0.7.0

package/lib/periodic/core/layout.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Where every element is drawn.
+ *
+ * The group and the period place the main block, but not the lanthanoids and
+ * the actinoids: those have no group, and are drawn on the two rows underneath.
+ * The grid is therefore 18 columns by 10 rows — seven periods, a blank spacer,
+ * and the two inner-transition rows.
+ *
+ * The cells here are the *logical* ones, so column 1 is group 1 and row 1 is
+ * period 1. A table drawn with the group and period header strips offsets them
+ * by one; nothing in this module needs to know that.
+ */
+import type { ElementCategory, PeriodicElement } from './elements.ts';
+/** A whole run of the table: one group, or one period. */
+export interface ElementRange {
+    kind: 'group' | 'period';
+    value: number;
+}
+/** A cell of the grid, one-based as CSS grid lines are. */
+export interface Cell {
+    column: number;
+    row: number;
+}
+/** Columns of the table. */
+export declare const COLUMN_COUNT = 18;
+/** Rows of the table, the blank spacer between the blocks included. */
+export declare const ROW_COUNT = 10;
+/**
+ * The cell an element occupies.
+ * @param element - Element to place.
+ * @returns Its column and row, both one-based.
+ */
+export declare function cellOf(element: PeriodicElement): Cell;
+/**
+ * Every element with the cell it occupies, in reading order.
+ * @returns One entry per element, ordered by row then column, so a keyboard
+ * walk over the list moves the way the eye does.
+ */
+export declare function placedElements(): ReadonlyArray<{
+    element: PeriodicElement;
+    cell: Cell;
+}>;
+/**
+ * The two cells the lanthanoids and the actinoids were lifted out of.
+ *
+ * Without them the main block has a hole in it and the two rows underneath
+ * belong nowhere; with them the reader can see where each series was taken
+ * from.
+ */
+export declare const INNER_TRANSITION_MARKERS: ReadonlyArray<{
+    cell: Cell;
+    label: string;
+    category: ElementCategory;
+}>;
+/** The period each inner-transition row belongs to, for its row label. */
+export declare const INNER_TRANSITION_ROWS: ReadonlyArray<{
+    row: number;
+    period: number;
+}>;
+/**
+ * The element an arrow key walks to.
+ *
+ * The walk follows the grid, not the atomic number: down from carbon is
+ * silicon, the cell underneath it, and a step of 18 protons would instead be
+ * chromium because period 2 holds only eight elements. Left and right follow
+ * reading order, so the end of a period continues at the start of the next one
+ * and the two inner-transition rows come after the main block.
+ * @param key - The pressed key, as `KeyboardEvent.key` reports it.
+ * @param from - Symbol the walk starts at; any arrow lands on hydrogen when it names no element.
+ * @returns The element to move to, or `null` when the key is not an arrow or the table has no cell that way.
+ */
+export declare function elementByArrowKey(key: string, from: string | undefined): PeriodicElement | null;
+//# sourceMappingURL=layout.d.ts.map

package/lib/periodic/core/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../../src/periodic/core/layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAGtE,0DAA0D;AAC1D,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,2DAA2D;AAC3D,MAAM,WAAW,IAAI;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;CACb;AAED,4BAA4B;AAC5B,eAAO,MAAM,YAAY,KAAK,CAAC;AAE/B,uEAAuE;AACvE,eAAO,MAAM,SAAS,KAAK,CAAC;AAc5B;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,eAAe,GAAG,IAAI,CAIrD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,IAAI,aAAa,CAAC;IAC9C,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE,IAAI,CAAC;CACZ,CAAC,CAUD;AAKD;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,EAAE,aAAa,CAAC;IACnD,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,eAAe,CAAC;CAC3B,CAGA,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAAC;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;CAChB,CAGA,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,GAAG,SAAS,GACvB,eAAe,GAAG,IAAI,CAgBxB"}

package/lib/periodic/core/layout.js

@@ -0,0 +1,132 @@
+/**
+ * Where every element is drawn.
+ *
+ * The group and the period place the main block, but not the lanthanoids and
+ * the actinoids: those have no group, and are drawn on the two rows underneath.
+ * The grid is therefore 18 columns by 10 rows — seven periods, a blank spacer,
+ * and the two inner-transition rows.
+ *
+ * The cells here are the *logical* ones, so column 1 is group 1 and row 1 is
+ * period 1. A table drawn with the group and period header strips offsets them
+ * by one; nothing in this module needs to know that.
+ */
+import { PERIODIC_ELEMENTS, elementBySymbol } from "./elements.js";
+/** Columns of the table. */
+export const COLUMN_COUNT = 18;
+/** Rows of the table, the blank spacer between the blocks included. */
+export const ROW_COUNT = 10;
+/** Row the lanthanoids are drawn on, and the actinoids on the one below. */
+const INNER_TRANSITION_ROW = 9;
+/** Atomic number the lanthanoids and the actinoids start at. */
+const INNER_TRANSITION_STARTS = [57, 89];
+/** How many elements each inner-transition series holds. */
+const INNER_TRANSITION_LENGTH = 15;
+/** Column the inner-transition rows start at, under the d block. */
+const INNER_TRANSITION_COLUMN = 3;
+/**
+ * The cell an element occupies.
+ * @param element - Element to place.
+ * @returns Its column and row, both one-based.
+ */
+export function cellOf(element) {
+    const inner = innerTransitionCell(element);
+    if (inner !== null)
+        return inner;
+    return { column: element.group ?? 1, row: element.period };
+}
+/**
+ * Every element with the cell it occupies, in reading order.
+ * @returns One entry per element, ordered by row then column, so a keyboard
+ * walk over the list moves the way the eye does.
+ */
+export function placedElements() {
+    PLACED ??= PERIODIC_ELEMENTS.map((element) => ({
+        element,
+        cell: cellOf(element),
+    })).toSorted((first, second) => first.cell.row === second.cell.row
+        ? first.cell.column - second.cell.column
+        : first.cell.row - second.cell.row);
+    return PLACED;
+}
+let PLACED = null;
+/**
+ * The two cells the lanthanoids and the actinoids were lifted out of.
+ *
+ * Without them the main block has a hole in it and the two rows underneath
+ * belong nowhere; with them the reader can see where each series was taken
+ * from.
+ */
+export const INNER_TRANSITION_MARKERS = [
+    { cell: { column: 3, row: 6 }, label: '57–71', category: 'lanthanoid' },
+    { cell: { column: 3, row: 7 }, label: '89–103', category: 'actinoid' },
+];
+/** The period each inner-transition row belongs to, for its row label. */
+export const INNER_TRANSITION_ROWS = [
+    { row: INNER_TRANSITION_ROW, period: 6 },
+    { row: INNER_TRANSITION_ROW + 1, period: 7 },
+];
+/**
+ * The element an arrow key walks to.
+ *
+ * The walk follows the grid, not the atomic number: down from carbon is
+ * silicon, the cell underneath it, and a step of 18 protons would instead be
+ * chromium because period 2 holds only eight elements. Left and right follow
+ * reading order, so the end of a period continues at the start of the next one
+ * and the two inner-transition rows come after the main block.
+ * @param key - The pressed key, as `KeyboardEvent.key` reports it.
+ * @param from - Symbol the walk starts at; any arrow lands on hydrogen when it names no element.
+ * @returns The element to move to, or `null` when the key is not an arrow or the table has no cell that way.
+ */
+export function elementByArrowKey(key, from) {
+    const direction = ARROW_DIRECTIONS[key];
+    if (direction === undefined)
+        return null;
+    const placed = placedElements();
+    const start = from === undefined ? undefined : elementBySymbol(from);
+    if (start === undefined)
+        return placed[0]?.element ?? null;
+    if (direction.column !== 0) {
+        const index = readingOrderIndex().get(start.symbol);
+        if (index === undefined)
+            return null;
+        return placed[index + direction.column]?.element ?? null;
+    }
+    const cell = cellOf(start);
+    return byCell().get(cellKey(cell.column, cell.row + direction.row)) ?? null;
+}
+/** Which way each arrow key moves, in grid cells. */
+const ARROW_DIRECTIONS = {
+    ArrowRight: { column: 1, row: 0 },
+    ArrowLeft: { column: -1, row: 0 },
+    ArrowDown: { column: 0, row: 1 },
+    ArrowUp: { column: 0, row: -1 },
+};
+function readingOrderIndex() {
+    READING_ORDER ??= new Map(placedElements().map(({ element }, index) => [element.symbol, index]));
+    return READING_ORDER;
+}
+let READING_ORDER = null;
+function byCell() {
+    BY_CELL ??= new Map(placedElements().map(({ element, cell }) => [
+        cellKey(cell.column, cell.row),
+        element,
+    ]));
+    return BY_CELL;
+}
+let BY_CELL = null;
+function cellKey(column, row) {
+    return `${String(column)}:${String(row)}`;
+}
+function innerTransitionCell(element) {
+    for (const [index, start] of INNER_TRANSITION_STARTS.entries()) {
+        const offset = element.atomicNumber - start;
+        if (offset >= 0 && offset < INNER_TRANSITION_LENGTH) {
+            return {
+                column: INNER_TRANSITION_COLUMN + offset,
+                row: INNER_TRANSITION_ROW + index,
+            };
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=layout.js.map

package/lib/periodic/core/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/periodic/core/layout.ts"],"names":[],"mappings":"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"}

package/lib/periodic/ui/CategoryLegend.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The key to the family colours, under the table.
+ */
+import type { ReactElement } from 'react';
+import type { ElementCategory } from '../core/elements.ts';
+/** What {@link CategoryLegend} needs. */
+export interface CategoryLegendProps {
+    /**
+     * Called with the family whose swatch was clicked. Without it the legend is
+     * a key rather than a control, and nothing in it is focusable.
+     * @default undefined
+     */
+    onSelect?: (category: ElementCategory) => void;
+    /**
+     * The family drawn as the active one.
+     * @default undefined — none is
+     */
+    selected?: ElementCategory;
+}
+/**
+ * The ten families, each with its colour.
+ * @param props - See {@link CategoryLegendProps}.
+ * @returns The legend.
+ */
+export declare function CategoryLegend(props: CategoryLegendProps): ReactElement;
+//# sourceMappingURL=CategoryLegend.d.ts.map

package/lib/periodic/ui/CategoryLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryLegend.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/CategoryLegend.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAOzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,yCAAyC;AACzC,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAwCvE"}

package/lib/periodic/ui/CategoryLegend.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CATEGORY_LABELS, CATEGORY_ORDER, categorySwatch, } from "../core/categories.js";
+/**
+ * The ten families, each with its colour.
+ * @param props - See {@link CategoryLegendProps}.
+ * @returns The legend.
+ */
+export function CategoryLegend(props) {
+    const { onSelect, selected } = props;
+    return (_jsx("div", { style: legendStyle, children: CATEGORY_ORDER.map((category) => {
+            const swatch = categorySwatch(category);
+            const label = CATEGORY_LABELS[category];
+            const mark = (_jsx("span", { style: { ...swatchStyle, background: swatch.background } }));
+            if (onSelect === undefined) {
+                return (_jsxs("span", { style: itemStyle, children: [mark, label] }, category));
+            }
+            return (_jsxs("button", { type: "button", "aria-pressed": category === selected, onClick: () => {
+                    onSelect(category);
+                }, style: {
+                    ...itemStyle,
+                    ...buttonStyle,
+                    fontWeight: category === selected ? 700 : 400,
+                }, children: [mark, label] }, category));
+        }) }));
+}
+const legendStyle = {
+    color: 'rgb(95 107 124)',
+    display: 'flex',
+    flexWrap: 'wrap',
+    fontSize: 11,
+    gap: '2px 10px',
+};
+const itemStyle = {
+    alignItems: 'center',
+    display: 'inline-flex',
+    gap: 4,
+};
+const buttonStyle = {
+    background: 'none',
+    border: 'none',
+    color: 'inherit',
+    cursor: 'pointer',
+    font: 'inherit',
+    padding: 0,
+};
+const swatchStyle = {
+    border: '1px solid rgb(255 255 255 / 0.55)',
+    borderRadius: 2,
+    display: 'inline-block',
+    height: 10,
+    width: 10,
+};
+//# sourceMappingURL=CategoryLegend.js.map

package/lib/periodic/ui/CategoryLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryLegend.js","sourceRoot":"","sources":["../../../src/periodic/ui/CategoryLegend.tsx"],"names":[],"mappings":";AAMA,OAAO,EACL,eAAe,EACf,cAAc,EACd,cAAc,GACf,MAAM,uBAAuB,CAAC;AAkB/B;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACvD,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAErC,OAAO,CACL,cAAK,KAAK,EAAE,WAAW,YACpB,cAAc,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;YAC/B,MAAM,MAAM,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;YACxC,MAAM,KAAK,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;YACxC,MAAM,IAAI,GAAG,CACX,eAAM,KAAK,EAAE,EAAE,GAAG,WAAW,EAAE,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE,GAAI,CACnE,CAAC;YACF,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;gBAC3B,OAAO,CACL,gBAAqB,KAAK,EAAE,SAAS,aAClC,IAAI,EACJ,KAAK,KAFG,QAAQ,CAGZ,CACR,CAAC;YACJ,CAAC;YACD,OAAO,CACL,kBAEE,IAAI,EAAC,QAAQ,kBACC,QAAQ,KAAK,QAAQ,EACnC,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,QAAQ,CAAC,CAAC;gBACrB,CAAC,EACD,KAAK,EAAE;oBACL,GAAG,SAAS;oBACZ,GAAG,WAAW;oBACd,UAAU,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;iBAC9C,aAEA,IAAI,EACJ,KAAK,KAbD,QAAQ,CAcN,CACV,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE,iBAAiB;IACxB,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,EAAE;IACZ,GAAG,EAAE,UAAU;CACiB,CAAC;AAEnC,MAAM,SAAS,GAAG;IAChB,UAAU,EAAE,QAAQ;IACpB,OAAO,EAAE,aAAa;IACtB,GAAG,EAAE,CAAC;CAC0B,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,SAAS;IACf,OAAO,EAAE,CAAC;CACsB,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,MAAM,EAAE,mCAAmC;IAC3C,YAAY,EAAE,CAAC;IACf,OAAO,EAAE,cAAc;IACvB,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACuB,CAAC"}

package/lib/periodic/ui/ElementCell.d.ts

@@ -0,0 +1,53 @@
+/**
+ * One cell of the periodic table: the atomic number, the symbol, and whatever
+ * the tool asked to be written under it.
+ *
+ * A cell is a real `<button>`, so Tab reaches it, Enter and Space activate it,
+ * and a screen reader reads the element's name rather than its symbol.
+ */
+import type { ReactElement } from 'react';
+import type { Swatch } from '../../color/core/scale.ts';
+/** What {@link ElementCell} needs to draw one element. */
+export interface ElementCellProps {
+    /** Atomic number, written small in the corner. */
+    atomicNumber: number;
+    /** Chemical symbol, the largest thing in the cell. */
+    symbol: string;
+    /** Full name, which is what the cell is announced as. */
+    name: string;
+    /** Background, and the ink that stays readable on it. */
+    swatch: Swatch;
+    /** Column of the grid, one-based. */
+    column: number;
+    /** Row of the grid, one-based. */
+    row: number;
+    onSelect: (symbol: string) => void;
+    /**
+     * Third line, under the symbol: the value the tool is showing.
+     * @default '' — nothing is written
+     */
+    detail?: string;
+    /**
+     * Whether the cell is the one the tools are pointed at.
+     * @default false
+     */
+    isSelected?: boolean;
+    /**
+     * Whether the cell is inside the set the tool is showing. Everything outside
+     * it is dimmed rather than removed, so the table keeps its shape.
+     * @default true
+     */
+    isIncluded?: boolean;
+    /**
+     * Called on pointer enter with the symbol, and on leave with `null`.
+     * @default undefined
+     */
+    onHover?: (symbol: string | null) => void;
+}
+/**
+ * A single element of the table.
+ * @param props - See {@link ElementCellProps}.
+ * @returns The cell.
+ */
+export declare function ElementCell(props: ElementCellProps): ReactElement;
+//# sourceMappingURL=ElementCell.d.ts.map

package/lib/periodic/ui/ElementCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementCell.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAExD,0DAA0D;AAC1D,MAAM,WAAW,gBAAgB;IAC/B,kDAAkD;IAClD,YAAY,EAAE,MAAM,CAAC;IACrB,sDAAsD;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,yDAAyD;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,YAAY,CA6CjE"}

package/lib/periodic/ui/ElementCell.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A single element of the table.
+ * @param props - See {@link ElementCellProps}.
+ * @returns The cell.
+ */
+export function ElementCell(props) {
+    const { atomicNumber, symbol, name, swatch, column, row, onSelect, detail = '', isSelected = false, isIncluded = true, onHover, } = props;
+    return (_jsxs("button", { type: "button", "data-testid": `element-${symbol}`, "data-symbol": symbol, "aria-label": `${name} (${symbol}, Z = ${String(atomicNumber)})`, "aria-pressed": isSelected, onClick: () => {
+            onSelect(symbol);
+        }, onPointerEnter: () => onHover?.(symbol), onPointerLeave: () => onHover?.(null), style: {
+            ...cellStyle,
+            gridColumn: column,
+            gridRow: row,
+            background: swatch.background,
+            color: swatch.foreground,
+            opacity: isIncluded ? 1 : 0.28,
+            // An outline rather than a fill: a table coloured by a property must
+            // keep saying what the value is while a cell is selected.
+            outline: isSelected ? `2px solid ${swatch.foreground}` : 'none',
+            outlineOffset: -3,
+        }, children: [_jsx("span", { style: numberStyle, children: atomicNumber }), _jsx("span", { style: symbolStyle, children: symbol }), detail === '' ? null : _jsx("span", { style: detailStyle, children: detail })] }));
+}
+const cellStyle = {
+    alignItems: 'center',
+    border: '1px solid rgb(255 255 255 / 0.55)',
+    borderRadius: 3,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'column',
+    font: 'inherit',
+    justifyContent: 'center',
+    lineHeight: 1.05,
+    minWidth: 0,
+    overflow: 'hidden',
+    padding: 1,
+    transition: 'opacity 120ms ease',
+};
+const numberStyle = {
+    alignSelf: 'flex-start',
+    fontSize: 'clamp(0.34rem, 1.6cqw, 0.5rem)',
+    opacity: 0.8,
+    paddingLeft: 2,
+};
+const symbolStyle = {
+    fontSize: 'clamp(0.55rem, 3.3cqw, 1.05rem)',
+    fontWeight: 700,
+};
+const detailStyle = {
+    fontSize: 'clamp(0.34rem, 1.6cqw, 0.5rem)',
+    maxWidth: '100%',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+//# sourceMappingURL=ElementCell.js.map

package/lib/periodic/ui/ElementCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementCell.js","sourceRoot":"","sources":["../../../src/periodic/ui/ElementCell.tsx"],"names":[],"mappings":";AAkDA;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,MAAM,EACJ,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,MAAM,EACN,MAAM,EACN,GAAG,EACH,QAAQ,EACR,MAAM,GAAG,EAAE,EACX,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,IAAI,EACjB,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,kBACE,IAAI,EAAC,QAAQ,iBACA,WAAW,MAAM,EAAE,iBACnB,MAAM,gBACP,GAAG,IAAI,KAAK,MAAM,SAAS,MAAM,CAAC,YAAY,CAAC,GAAG,kBAChD,UAAU,EACxB,OAAO,EAAE,GAAG,EAAE;YACZ,QAAQ,CAAC,MAAM,CAAC,CAAC;QACnB,CAAC,EACD,cAAc,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,EACvC,cAAc,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EACrC,KAAK,EAAE;YACL,GAAG,SAAS;YACZ,UAAU,EAAE,MAAM;YAClB,OAAO,EAAE,GAAG;YACZ,UAAU,EAAE,MAAM,CAAC,UAAU;YAC7B,KAAK,EAAE,MAAM,CAAC,UAAU;YACxB,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;YAC9B,qEAAqE;YACrE,0DAA0D;YAC1D,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,aAAa,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,MAAM;YAC/D,aAAa,EAAE,CAAC,CAAC;SAClB,aAED,eAAM,KAAK,EAAE,WAAW,YAAG,YAAY,GAAQ,EAC/C,eAAM,KAAK,EAAE,WAAW,YAAG,MAAM,GAAQ,EACxC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAM,KAAK,EAAE,WAAW,YAAG,MAAM,GAAQ,IAC1D,CACV,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG;IAChB,UAAU,EAAE,QAAQ;IACpB,MAAM,EAAE,mCAAmC;IAC3C,YAAY,EAAE,CAAC;IACf,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,IAAI,EAAE,SAAS;IACf,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,IAAI;IAChB,QAAQ,EAAE,CAAC;IACX,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,oBAAoB;CACA,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,SAAS,EAAE,YAAY;IACvB,QAAQ,EAAE,gCAAgC;IAC1C,OAAO,EAAE,GAAG;IACZ,WAAW,EAAE,CAAC;CACkB,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,QAAQ,EAAE,iCAAiC;IAC3C,UAAU,EAAE,GAAG;CACiB,CAAC;AAEnC,MAAM,WAAW,GAAG;IAClB,QAAQ,EAAE,gCAAgC;IAC1C,QAAQ,EAAE,MAAM;IAChB,QAAQ,EAAE,QAAQ;IAClB,YAAY,EAAE,UAAU;IACxB,UAAU,EAAE,QAAQ;CACY,CAAC"}

package/lib/periodic/ui/PeriodicTable.d.ts

@@ -0,0 +1,90 @@
+/**
+ * The periodic table.
+ *
+ * It knows nothing about what it is showing: the caller says what colour each
+ * cell takes and what is written in it, and gets back which element was
+ * clicked. That is what lets the same grid be an element picker, a property
+ * map, and a chart's selection control.
+ *
+ * Everything site-specific arrives through a callback keyed on the element, so
+ * a site's own richer element record never has to cross into this component.
+ */
+import type { ReactElement } from 'react';
+import type { Swatch } from '../../color/core/scale.ts';
+import type { PeriodicElement } from '../core/elements.ts';
+import type { ElementRange } from '../core/layout.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;
+    /**
+     * 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;
+    /**
+     * Whether to draw the group and period strips.
+     * @default false
+     */
+    headers?: boolean;
+    /**
+     * Called when a whole group or period header is clicked. 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 table by atomic number.
+     * @default true
+     */
+    keyboard?: boolean;
+    /**
+     * Called on pointer enter with the symbol, and on leave with `null`.
+     * @default undefined
+     */
+    onHover?: (symbol: string | null) => void;
+}
+/**
+ * The 118 elements, laid out as the table.
+ * @param props - See {@link PeriodicTableProps}.
+ * @returns The grid, its optional chrome, and its optional legend.
+ */
+export declare function PeriodicTable(props: PeriodicTableProps): ReactElement;
+//# sourceMappingURL=PeriodicTable.d.ts.map

package/lib/periodic/ui/PeriodicTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodicTable.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,KAAK,EAAgC,YAAY,EAAE,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAExD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AActD,wCAAwC;AACxC,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAChD;;;;OAIG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,MAAM,CAAC;IAC9C;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CAC3C;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,CAuErE"}

package/lib/periodic/ui/PeriodicTable.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { categorySwatch } from "../core/categories.js";
+import { COLUMN_COUNT, elementByArrowKey, placedElements, } from "../core/layout.js";
+import { CategoryLegend } from "./CategoryLegend.js";
+import { ElementCell } from "./ElementCell.js";
+import { HeaderStrips, InnerTransitionMarkers, } from "./PeriodicTableChrome.js";
+/**
+ * The 118 elements, laid out as the table.
+ * @param props - See {@link PeriodicTableProps}.
+ * @returns The grid, its optional chrome, and its optional legend.
+ */
+export function PeriodicTable(props) {
+    const { selected, onSelect, swatchOf = defaultSwatchOf, detailOf, nameOf = defaultNameOf, isIncluded, headers = false, onSelectRange, legend = false, markers = true, keyboard = true, onHover, } = props;
+    const gridRef = useRef(null);
+    const cameFromKeyRef = useRef(false);
+    const offset = headers ? 1 : 0;
+    useEffect(() => {
+        if (!cameFromKeyRef.current)
+            return;
+        cameFromKeyRef.current = false;
+        const cell = gridRef.current?.querySelector(`[data-symbol="${CSS.escape(selected ?? '')}"]`);
+        cell?.focus();
+        cell?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }, [selected]);
+    function handleKeyDown(event) {
+        if (!keyboard || onSelect === undefined)
+            return;
+        const next = elementByArrowKey(event.key, selected);
+        if (next === null)
+            return;
+        event.preventDefault();
+        cameFromKeyRef.current = true;
+        onSelect(next.symbol);
+    }
+    return (_jsxs("div", { style: rootStyle, children: [_jsxs("div", { ref: gridRef, role: "grid", "aria-label": "Periodic table", "data-testid": "periodic-table", style: headers ? gridWithHeadersStyle : gridStyle, onKeyDown: handleKeyDown, children: [headers ? _jsx(HeaderStrips, { onSelectRange: onSelectRange }) : null, markers ? _jsx(InnerTransitionMarkers, { offset: offset }) : null, placedElements().map(({ element, cell }) => (_jsx(ElementCell, { atomicNumber: element.atomicNumber, symbol: element.symbol, name: nameOf(element), detail: detailOf?.(element), swatch: swatchOf(element), isSelected: element.symbol === selected, isIncluded: isIncluded?.(element), column: cell.column + offset, row: cell.row + offset, onSelect: onSelect ?? noop, onHover: onHover }, element.symbol)))] }), legend ? _jsx(CategoryLegend, {}) : null] }));
+}
+function defaultSwatchOf(element) {
+    return categorySwatch(element.category);
+}
+function defaultNameOf(element) {
+    return element.name;
+}
+function noop() {
+    // A table with no `onSelect` is a figure; its cells stay buttons so the
+    // keyboard and a screen reader still reach every element.
+}
+const rootStyle = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+};
+const baseGridStyle = {
+    display: 'grid',
+    gap: 2,
+    width: '100%',
+    // The cells size their type against this box rather than against the page,
+    // so the same table reads at 320px beside a chart and at 900px on its own.
+    containerType: 'inline-size',
+};
+const gridStyle = {
+    ...baseGridStyle,
+    // The eighth row is the gap the inner-transition series are lifted out into.
+    gridTemplateColumns: `repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+    gridTemplateRows: 'repeat(7, minmax(0, 1fr)) 0.5rem repeat(2, minmax(0, 1fr))',
+    aspectRatio: `${String(COLUMN_COUNT)} / 9.7`,
+    minWidth: 280,
+};
+const gridWithHeadersStyle = {
+    ...baseGridStyle,
+    // A leading column and a leading row hold the period and group numbers.
+    gridTemplateColumns: `1.4rem repeat(${String(COLUMN_COUNT)}, minmax(0, 1fr))`,
+    gridTemplateRows: '1rem repeat(7, minmax(0, 1fr)) 0.5rem repeat(2, minmax(0, 1fr))',
+    aspectRatio: `${String(COLUMN_COUNT + 1.2)} / 10.6`,
+    minWidth: 280,
+};
+//# sourceMappingURL=PeriodicTable.js.map

package/lib/periodic/ui/PeriodicTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodicTable.js","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTable.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,cAAc,GACf,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAmB,CAAC;AAChD,OAAO,EACL,YAAY,EACZ,sBAAsB,GACvB,MAAM,0BAA2B,CAAC;AAuEnC;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,GAAG,eAAe,EAC1B,QAAQ,EACR,MAAM,GAAG,aAAa,EACtB,UAAU,EACV,OAAO,GAAG,KAAK,EACf,aAAa,EACb,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,IAAI,EACd,QAAQ,GAAG,IAAI,EACf,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC7C,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,cAAc,CAAC,OAAO;YAAE,OAAO;QACpC,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;QAC/B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,EAAE,aAAa,CACzC,iBAAiB,GAAG,CAAC,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,IAAI,CAChD,CAAC;QACF,IAAI,EAAE,KAAK,EAAE,CAAC;QACd,IAAI,EAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAChE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,aAAa,CAAC,KAAoC;QACzD,IAAI,CAAC,QAAQ,IAAI,QAAQ,KAAK,SAAS;YAAE,OAAO;QAChD,MAAM,IAAI,GAAG,iBAAiB,CAAC,KAAK,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;QACpD,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO;QAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;QAC9B,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACxB,CAAC;IAED,OAAO,CACL,eAAK,KAAK,EAAE,SAAS,aACnB,eACE,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,MAAM,gBACA,gBAAgB,iBACf,gBAAgB,EAC5B,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,SAAS,EACjD,SAAS,EAAE,aAAa,aAEvB,OAAO,CAAC,CAAC,CAAC,KAAC,YAAY,IAAC,aAAa,EAAE,aAAa,GAAI,CAAC,CAAC,CAAC,IAAI,EAC/D,OAAO,CAAC,CAAC,CAAC,KAAC,sBAAsB,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC,CAAC,IAAI,EAC3D,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAC3C,KAAC,WAAW,IAEV,YAAY,EAAE,OAAO,CAAC,YAAY,EAClC,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,EACrB,MAAM,EAAE,QAAQ,EAAE,CAAC,OAAO,CAAC,EAC3B,MAAM,EAAE,QAAQ,CAAC,OAAO,CAAC,EACzB,UAAU,EAAE,OAAO,CAAC,MAAM,KAAK,QAAQ,EACvC,UAAU,EAAE,UAAU,EAAE,CAAC,OAAO,CAAC,EACjC,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,MAAM,EAC5B,GAAG,EAAE,IAAI,CAAC,GAAG,GAAG,MAAM,EACtB,QAAQ,EAAE,QAAQ,IAAI,IAAI,EAC1B,OAAO,EAAE,OAAO,IAXX,OAAO,CAAC,MAAM,CAYnB,CACH,CAAC,IACE,EACL,MAAM,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,IAAI,IAC/B,CACP,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,OAAwB;IAC/C,OAAO,cAAc,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;AAC1C,CAAC;AAED,SAAS,aAAa,CAAC,OAAwB;IAC7C,OAAO,OAAO,CAAC,IAAI,CAAC;AACtB,CAAC;AAED,SAAS,IAAI;IACX,wEAAwE;IACxE,0DAA0D;AAC5D,CAAC;AAED,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,GAAG,EAAE,CAAC;CAC0B,CAAC;AAEnC,MAAM,aAAa,GAAG;IACpB,OAAO,EAAE,MAAM;IACf,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,MAAM;IACb,2EAA2E;IAC3E,2EAA2E;IAC3E,aAAa,EAAE,aAAa;CACI,CAAC;AAEnC,MAAM,SAAS,GAAG;IAChB,GAAG,aAAa;IAChB,6EAA6E;IAC7E,mBAAmB,EAAE,UAAU,MAAM,CAAC,YAAY,CAAC,mBAAmB;IACtE,gBAAgB,EACd,4DAA4D;IAC9D,WAAW,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,QAAQ;IAC5C,QAAQ,EAAE,GAAG;CACmB,CAAC;AAEnC,MAAM,oBAAoB,GAAG;IAC3B,GAAG,aAAa;IAChB,wEAAwE;IACxE,mBAAmB,EAAE,iBAAiB,MAAM,CAAC,YAAY,CAAC,mBAAmB;IAC7E,gBAAgB,EACd,iEAAiE;IACnE,WAAW,EAAE,GAAG,MAAM,CAAC,YAAY,GAAG,GAAG,CAAC,SAAS;IACnD,QAAQ,EAAE,GAAG;CACmB,CAAC"}

package/lib/periodic/ui/PeriodicTableChrome.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The furniture around the cells: the group and period strips, and the two
+ * markers the inner-transition series were lifted out of.
+ */
+import type { ReactElement } from 'react';
+import type { ElementRange } from '../core/layout.ts';
+/** What {@link HeaderStrips} needs. */
+export interface HeaderStripsProps {
+    /**
+     * Called with the run whose header was clicked. Without it the strips are
+     * labels rather than buttons.
+     * @default undefined
+     */
+    onSelectRange?: (range: ElementRange) => void;
+}
+/**
+ * The 1–18 strip along the top and the 1–7 strip down the left.
+ *
+ * They are buttons when the table takes a range: "plot period 3" is one click
+ * there and eight on the cells.
+ * @param props - See {@link HeaderStripsProps}.
+ * @returns The two strips, placed on the grid.
+ */
+export declare function HeaderStrips(props: HeaderStripsProps): ReactElement;
+/** What {@link InnerTransitionMarkers} needs. */
+export interface InnerTransitionMarkersProps {
+    /** 1 when the table draws its header strips, 0 otherwise. */
+    offset: number;
+}
+/**
+ * The two cells the lanthanoids and the actinoids were lifted out of.
+ * @param props - See {@link InnerTransitionMarkersProps}.
+ * @returns The markers, placed on the grid.
+ */
+export declare function InnerTransitionMarkers(props: InnerTransitionMarkersProps): ReactElement;
+//# sourceMappingURL=PeriodicTableChrome.d.ts.map

package/lib/periodic/ui/PeriodicTableChrome.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PeriodicTableChrome.d.ts","sourceRoot":"","sources":["../../../src/periodic/ui/PeriodicTableChrome.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAiB,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOtD,uCAAuC;AACvC,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAqDnE;AAED,iDAAiD;AACjD,MAAM,WAAW,2BAA2B;IAC1C,6DAA6D;IAC7D,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CACpC,KAAK,EAAE,2BAA2B,GACjC,YAAY,CAmBd"}