magick-components 0.0.0-stage → 0.1.0

package/lib/enochian/tabletSigils.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * The Watchtowers' sigils as `Tablet` draws them, and the versions'
+ * names. Internal to the package: `Tablet` is the entry; the tests read
+ * these to check the drawings.
+ */
+function EarthSigil() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-100 -100 200 200", children: [_jsx("circle", { cx: 0, cy: 0, r: 92, fill: "none", stroke: "black", strokeWidth: 15 }), _jsx("path", { d: "M -10 -10 v -45 " +
+                    "c 0 -10, -10 -10, -20 -10" +
+                    "v -8 h 60 v 8" +
+                    "c -10 0, -20 0, -20 10" +
+                    "v 45 h -20", fill: "#c3b030", stroke: "black" }), _jsx("path", { d: "M -10 -10 v -45 " +
+                    "c 0 -10, -10 -10, -20 -10" +
+                    "v -8 h 60 v 8" +
+                    "c -10 0, -20 0, -20 10" +
+                    "v 45 h -20", fill: "#626e30", stroke: "black", transform: "rotate(90)" }), _jsx("path", { d: "M -10 -10 v -45 " +
+                    "c 0 -10, -10 -10, -20 -10" +
+                    "v -8 h 60 v 8" +
+                    "c -10 0, -20 0, -20 10" +
+                    "v 45 h -20", fill: "black", stroke: "black", transform: "rotate(180)" }), _jsx("path", { d: "M -10 -10 v -45 " +
+                    "c 0 -10, -10 -10, -20 -10" +
+                    "v -8 h 60 v 8" +
+                    "c -10 0, -20 0, -20 10" +
+                    "v 45 h -20", fill: "#993621", stroke: "black", transform: "rotate(270)" })] }));
+}
+/**
+ * The Air sigil's Tau, on a grid of 100: a flat-topped crossbar whose
+ * underside arches up to the stem and whose ends taper down and out, a thin
+ * stem, and a foot flaring to a triangle. Drawn by hand after the Equinox's
+ * Plate X (see `EquinoxSigils`), symmetric about x = 51.
+ */
+const AIR_TAU = "M25 21.5H77L84 33.5C74 27 62.5 24.5 52.2 24.5V76" +
+    "C53 79.5 56 83 58.5 85.5H43.5C46 83 49 79.5 49.8 76" +
+    "V24.5C39.5 24.5 28 27 18 33.5Z";
+/**
+ * One of the four Yods over the Tau, drawn as a small flame, as it
+ * stands on the page (no rotation), about its centre: the point at the top
+ * flicks over to the right and drops into a shallow hollow, the right side
+ * swells out and runs down nearly straight to a second point at the
+ * bottom, as sharp as the top's, and the left side runs down from the top
+ * in a full, convex curve, widest a little above halfway, then turns into
+ * a shallow hollow above the bottom point, so the outline has a gentle S
+ * along its length. About 1.8 times as long as it is wide. Cubic segments
+ * placed by eye against an enlarged crop of the Equinox's Plate X (see
+ * `EquinoxSigils`) and checked against the width of its marks at a few
+ * heights, not traced, and not any font's yod. Regardie's own drawing
+ * (The Golden Dawn, vol. 4, 1940) gives the flames wavy strokes instead;
+ * both versions here keep the plate's form.
+ */
+const AIR_YOD = "M-1.3 -5.5C-0.8 -4.6 -0.8 -3.2 0.3 -2.4C1.6 -1.5 3.4 -0.8 3.6 1.4" +
+    "C3.8 2.8 3.6 4.4 2.8 5.5" +
+    "C1.9 4.9 0.6 4 -0.6 3.5C-1.9 2.9 -3.6 1.6 -3.7 -0.3" +
+    "C-3.75 -2.3 -2.9 -4.2 -1.3 -5.5Z";
+/**
+ * The Yods' centres along the grid's x, a little over the crossbar, about
+ * 0.185 of its width apart. Each Yod is about 0.17 of the crossbar's width
+ * long and leans about 34 degrees from vertical, top to the left (the
+ * plate's lean about 35), centred over the stem.
+ */
+const AIR_YOD_XS = [33.2, 45.4, 57.6, 69.8];
+/**
+ * Air: a Tau with four Yods above it, drawn as small flames, yellow on
+ * mauve within a yellow ring; `plain`, in black alone, as the Equinox's
+ * Plate X prints it. The Golden Dawn calls the marks Yods (Regardie, The
+ * Golden Dawn, vol. 4, 1940, p. 307), and Regardie says the sigils are
+ * taken from Dee's Sigillum Dei Aemeth (p. 308). The T at the top of the
+ * Sigillum's outer ring has a 4 written over it (Sloane MS 3188; The
+ * Equinox I(7), 1912, Plate II, archive.org `crowley-equinox_202110`,
+ * "The Equinox Vol. 1, No. 7", leaf n238), so the four Yods likely stand
+ * for that 4: that is our inference, which no source states. Book T calls
+ * flames Yods (the Ace of Wands, The Equinox I(8), 1912, p. 153, "The
+ * Equinox Vol. 1, No. 8", leaf n183), hence Yods drawn as flames. Our own
+ * drawing after Plate X, constructed in code.
+ */
+function AirSigil({ plain = false }) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-100 -100 200 200", children: _jsxs("g", { stroke: "#000", children: [!plain && _jsx("circle", { r: 98, fill: "#ff0", strokeWidth: 2.5 }), !plain && _jsx("circle", { r: 80, fill: "#774060", strokeWidth: 2 }), _jsxs("g", { fill: plain ? "#000" : "#ff0", strokeWidth: 0.6, strokeLinejoin: "round", transform: "scale(1.6) translate(-51 -45.5)", children: [_jsx("path", { d: AIR_TAU }), AIR_YOD_XS.map((x) => (_jsx("path", { d: AIR_YOD, transform: `translate(${x} 11)` }, x)))] })] }) }));
+}
+/** One arm of the Water sigil's cross potent, pointing up from the centre. */
+const POTENT_ARM = "M -4 -4 V -54 Q -4 -60 -16 -62 V -69 H 16 V -62 Q 4 -60 4 -54 V -4 Z";
+/** The figures in the cross's angles, as strokes around (0, 0). */
+const ANGLE_FIGURES = {
+    b: "M -7 -17 V 13 M -7 4 a 9 9 0 1 1 0 0.1",
+    "6": "M 8 -16 Q -9 -14 -9 5 M -9 5 a 9 9 0 1 0 0 -0.1",
+    "4": "M 4 15 V -16 L -11 6 H 10",
+};
+/**
+ * Water: a cross potent with b, 6, 4 and b in its angles, in blue on
+ * orange within a blue ring: Regardie, The Golden Dawn, vol. 4 (1940),
+ * p.307. Drawn here from that description. `plain`: in black alone, the
+ * figures 4 and b over b and 6, as the Equinox's Plate X prints it.
+ */
+function WaterSigil({ plain = false }) {
+    const blue = plain ? "#000" : "#2255cc";
+    const figures = plain
+        ? [
+            ["4", -33, -33],
+            ["b", 33, -33],
+            ["b", -33, 33],
+            ["6", 33, 33],
+        ]
+        : [
+            ["b", -33, -33],
+            ["6", 33, -33],
+            ["4", -33, 33],
+            ["b", 33, 33],
+        ];
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-100 -100 200 200", children: [!plain && _jsx("circle", { r: 92, fill: "#f80", stroke: blue, strokeWidth: 15 }), _jsx(CrossPotent, { fill: blue }), _jsx("g", { fill: "none", stroke: blue, strokeWidth: 5, strokeLinecap: "round", strokeLinejoin: "round", children: figures.map(([figure, x, y]) => (_jsx("path", { d: ANGLE_FIGURES[figure], transform: `translate(${x} ${y})` }, `${x},${y}`))) })] }));
+}
+/** A cross potent: four arms, each flared at its end. */
+function CrossPotent({ fill }) {
+    return (_jsx("g", { fill: fill, children: [0, 90, 180, 270].map((angle) => (_jsx("path", { d: POTENT_ARM, transform: `rotate(${angle})` }, angle))) }));
+}
+/** Earth as the Equinox's Plate X prints it: a cross potent, in black. */
+function PlainEarthSigil() {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-100 -100 200 200", children: _jsx(CrossPotent, { fill: "#000" }) }));
+}
+/** One of the Fire sigil's twelve rays, a flame rising from the centre. */
+const FLAME = "M 0 -36 c -8 -6 8 -12 0 -18 s 8 -12 0 -17";
+/** The twelve rays' angles, every 30°. */
+const FLAME_ANGLES = Array.from({ length: 12 }, (_, ray) => ray * 30);
+/**
+ * Fire: a circle with twelve rays, alternately mauve and yellow, about a
+ * red centre and ring, on green within a red ring: Regardie, The Golden
+ * Dawn, vol. 4 (1940), p.307. Drawn here from that description.
+ */
+function FireSigil() {
+    const red = "#e22";
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-100 -100 200 200", children: [_jsx("circle", { r: 92, fill: "#2b2", stroke: red, strokeWidth: 15 }), _jsx("circle", { r: 22, fill: "none", stroke: red, strokeWidth: 6 }), _jsx("circle", { r: 9, fill: red }), _jsx("g", { fill: "none", strokeWidth: 6, strokeLinecap: "round", children: FLAME_ANGLES.map((angle) => (_jsx("path", { d: FLAME, stroke: angle % 60 ? "#ff0" : "#a05090", transform: `rotate(${angle})` }, angle))) })] }));
+}
+/**
+ * Fire as the Equinox's Plate X prints it, in black: a small circle with
+ * twelve rays, straight and wavy by turns.
+ */
+function PlainFireSigil() {
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-100 -100 200 200", children: [_jsx("circle", { r: 22, fill: "none", stroke: "#000", strokeWidth: 6 }), _jsx("g", { fill: "none", stroke: "#000", strokeWidth: 6, strokeLinecap: "round", children: FLAME_ANGLES.map((angle) => (_jsx("path", { d: angle % 60 ? FLAME : "M 0 -30 V -76", transform: `rotate(${angle})` }, angle))) })] }));
+}
+/** Regardie's sigils, which the Golden Dawn's version and his print draw. */
+export const Sigils = {
+    earth: EarthSigil,
+    air: () => _jsx(AirSigil, {}),
+    water: () => _jsx(WaterSigil, {}),
+    fire: FireSigil,
+};
+/**
+ * The Equinox's sigils, from its Plate X, in black: *The Equinox* I(7)
+ * (1912), "Liber Chanokh", Plate X, one sigil in each corner (Air top
+ * left, Water top right, Earth bottom left, Fire bottom right); archive.org
+ * `crowley-equinox_202110`, the file "The Equinox Vol. 1, No. 7", leaf
+ * n256. These plain forms are our own drawings after that plate,
+ * constructed in code from lines, arcs and curves, with no font's outlines.
+ * Air's is a Tau with four Yods above it, drawn as small flames; we take
+ * the Yods to stand, likely, for the 4 over the T in Dee's Sigillum Dei
+ * Aemeth (Plate II, leaf n238), an inference no source states (see
+ * `AirSigil`).
+ * Of Regardie's coloured sigils (`Sigils`), only Air's form follows the
+ * plate: Water and Fire are drawn from Regardie's description of them (The
+ * Golden Dawn, vol. 4, 1940, p. 307), and Earth is a cross in four colours.
+ */
+export const EquinoxSigils = {
+    earth: PlainEarthSigil,
+    air: () => _jsx(AirSigil, { plain: true }),
+    water: () => _jsx(WaterSigil, { plain: true }),
+    fire: PlainFireSigil,
+};
+/** Each version as a drawing names it. */
+export const VERSION_NAMES = {
+    gd: "the Golden Dawn's version",
+    regardie: "Regardie's print",
+    equinox: "the Equinox's version",
+    dee: "Dee's table of 1584",
+    raphael: "Raphael's table of 1587",
+};

package/lib/enochian/tabletSvg.d.ts

@@ -0,0 +1,85 @@
+import React, { type CSSProperties } from "react";
+/** A tablet's page, as its `<svg>`'s viewBox: x, y, width, height. */
+export type TabletViewBox = readonly [number, number, number, number];
+/** A Watchtower's page: its sigil above its grid. */
+export declare const WATCHTOWER_VIEWBOX: TabletViewBox;
+/** The Tablet of Union's page: its grid of five by four with a margin. */
+export declare const UNION_VIEWBOX: TabletViewBox;
+/** The page a tablet draws on, by its key. */
+export declare function tabletViewBox(id: string): TabletViewBox;
+/** A square of a tablet's grid, by row and column from 0. */
+export interface TabletSquare {
+    row: number;
+    column: number;
+}
+/**
+ * Squares to outline over a Watchtower's grid, one of them selected, and
+ * what a click on one does. The outlines are drawing only; a page that
+ * offers them gives keyboard and screen-reader users the same choice in a
+ * list.
+ */
+export interface TabletHighlights {
+    squares: readonly TabletSquare[];
+    selected?: TabletSquare;
+    onSelect?: (square: TabletSquare) => void;
+}
+/**
+ * The name a tablet is announced by: "Enochian Watchtower of Fire", "Tablet
+ * of Union", or "Enochian tablet" for a key the data does not have; in a
+ * version other than the default, with the version's name ("Enochian
+ * Watchtower of Fire, Dee's table of 1584").
+ */
+export declare function tabletName(id: string, version?: string): string;
+/** Props of `Tablet`. */
+export interface TabletProps {
+    /**
+     * The tablet, by its key in magick-data: `earth`, `air`, `water`, `fire`
+     * or `union`.
+     */
+    tablet: string;
+    /**
+     * One of the data's `TABLET_VERSIONS`; the Golden Dawn's (`gd`) when
+     * absent or unknown.
+     */
+    version?: string;
+    /** Mirror the letters the version reverses (default true). */
+    mirrorReversed?: boolean;
+    /**
+     * Draw each square's second letters small in its corner (default
+     * false). Watchtowers only: no source gives the Tablet of Union a
+     * second letter, so its grid has none to draw.
+     */
+    showSecondLetters?: boolean;
+    /** Squares of a Watchtower's grid to outline, and choose by pointer. */
+    highlights?: TabletHighlights;
+    /**
+     * The drawing's accessible name: the tablet's own (`tabletName`) when
+     * not given, this one when a string. `false` marks it decorative,
+     * hidden from assistive technology (`aria-hidden`).
+     */
+    label?: string | false;
+    /** Page font style for the grid letters; omitted renders the Latin transliteration. */
+    enochianStyle?: CSSProperties;
+    /**
+     * Draws a CSS border around the page (default false). Leave it off
+     * where the SVG is exported or turned into an image, which CSS boxes do
+     * not reach.
+     */
+    frame?: boolean;
+    /** The SVG's width; from the height and the page's shape when not given. */
+    width?: string | number;
+    /** The SVG's height; from the width and the page's shape when not given. */
+    height?: string | number;
+    /** The `<svg>`, for exporting the drawing. */
+    ref?: React.Ref<SVGSVGElement>;
+}
+/**
+ * `Tablet`'s drawing, its root's accessibility attributes the caller's:
+ * none for the hall's art, which draws a tablet inside an image that
+ * names itself, so that the hall's markup is as it was.
+ */
+export declare function TabletSvg({ tablet: tabletId, version, mirrorReversed, showSecondLetters, enochianStyle, frame, width, height, highlights, ref, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, }: Omit<TabletProps, "label"> & {
+    role?: "img";
+    "aria-label"?: string;
+    "aria-hidden"?: true;
+}): React.JSX.Element;

package/lib/enochian/tabletSvg.js

@@ -0,0 +1,278 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The Enochian tablets' drawing, a private module: the entry,
+ * `enochian/Tablet`, names it and re-exports what is public, and the
+ * hall's art draws it unnamed.
+ */
+import enochianTablets, { DEFAULT_TABLET_VERSION, TABLET_VERSIONS, tabletVersion, } from "magick-data/enochian/tablets";
+import React from "react";
+import { EquinoxSigils, Sigils, VERSION_NAMES } from "./tabletSigils.js";
+/** A Watchtower's page: its sigil above its grid. */
+export const WATCHTOWER_VIEWBOX = [-105, 0, 210, 297];
+/** The Tablet of Union's page: its grid of five by four with a margin. */
+export const UNION_VIEWBOX = [0, 0, 124, 104];
+/** The page a tablet draws on, by its key. */
+export function tabletViewBox(id) {
+    return tabletOf(id)?.kind === "union" ? UNION_VIEWBOX : WATCHTOWER_VIEWBOX;
+}
+/** The tablet with this key, or nothing for a key the data does not have. */
+function tabletOf(id) {
+    return Object.hasOwn(enochianTablets, id)
+        ? enochianTablets[id]
+        : undefined;
+}
+function isCrossFromPosition(x, y) {
+    if (x === 2 || x === 5 || x === 6 || x === 9)
+        return true;
+    if (y === 1 || y === 6 || y === 8)
+        return true;
+    return false;
+}
+function elementFromPosition(x, y) {
+    if (x < 5) {
+        if (y < 6)
+            return "air";
+        if (y > 6)
+            return "earth";
+    }
+    else if (x > 6) {
+        if (y < 6)
+            return "water";
+        if (y > 6)
+            return "fire";
+    }
+    return "";
+}
+/** Each angle's colour, by element; the cross between them has none. */
+const elementColors = {
+    air: "yellow",
+    water: "#59f",
+    fire: "#f55",
+    earth: "black",
+};
+const tabletColors = {
+    earth: {
+        color: {
+            default: "black",
+            earth: "white",
+        },
+        background: "black",
+        borderCross: "white",
+    },
+    air: {
+        color: {
+            default: "black",
+            air: "brown",
+        },
+        background: "#fff100",
+    },
+    // Painted in blue, the Water angle lettered in orange, and in red, the
+    // Fire angle in green: Regardie, The Golden Dawn, vol. 4 (1940), p.275.
+    water: {
+        color: {
+            water: "#f80",
+        },
+        background: "#59f",
+    },
+    fire: {
+        color: {
+            fire: "#2b2",
+        },
+        background: "#f33",
+    },
+};
+/**
+ * Which sigils each version draws: Regardie's for the Golden Dawn's and
+ * his own, the Equinox's for its own, and none for Dee's and Raphael's
+ * tables, which carry none (the Golden Dawn takes its sigils from Dee's
+ * Sigillum Dei Aemeth).
+ */
+const VERSION_SIGILS = {
+    gd: Sigils,
+    regardie: Sigils,
+    equinox: EquinoxSigils,
+    dee: undefined,
+    raphael: undefined,
+};
+/**
+ * Where a version without sigils (Dee's and Raphael's tables) would draw
+ * one: a short note saying why there is none, in the sigil's place, so
+ * the page keeps its shape. Drawn in the transliteration's font always.
+ */
+const NO_SIGIL_LINES = [
+    "No sigil: Dee's tables carry none.",
+    "The Watchtower sigils are the Golden Dawn's, from",
+    "the Sigillum Dei Aemeth (Regardie, vol. 4, p.307).",
+];
+function NoSigil() {
+    return (_jsx("g", { "data-sigil-note": "", children: NO_SIGIL_LINES.map((line, index) => (_jsx("text", { x: 0, y: 18 + index * 9, style: { fontSize: 6.5, textAnchor: "middle", fill: "#555" }, children: line }, line))) }));
+}
+/** A version by its id, or the default for an id that is none. */
+function versionOf(version) {
+    return TABLET_VERSIONS.includes(version ?? "")
+        ? version
+        : DEFAULT_TABLET_VERSION;
+}
+/** The squares whose letters the version reverses, as "row,column". */
+function reversedSquares(tablet, options) {
+    return new Set(options.reversed
+        ? tablet.marks
+            .filter((mark) => mark.reversed)
+            .map(({ row, column }) => `${row},${column}`)
+        : []);
+}
+/** Each square's second letters, as "row,column", when they are drawn. */
+function altLetters(tablet, options) {
+    return new Map(options.alt
+        ? tablet.marks
+            .filter((mark) => mark.alt?.length)
+            .map(({ row, column, alt }) => [
+            `${row},${column}`,
+            (alt ?? []).join(""),
+        ])
+        : []);
+}
+/**
+ * A square's second letters, small in its top right corner, in the
+ * transliteration's font or the page's Enochian one.
+ */
+function AltLetters({ letters, right, top, fill, enochianStyle, }) {
+    return (_jsx("text", { x: right - 1.5, y: top + 6, "data-alt": "", style: {
+            fontSize: 6,
+            textAnchor: "end",
+            fill,
+            ...enochianStyle,
+            // Left to right, so that the corner holds them in either font.
+            direction: "ltr",
+            unicodeBidi: "normal",
+        }, children: letters }));
+}
+/** A reversed letter's mirror about the vertical through `cx`. */
+const mirrorAt = (cx) => `translate(${2 * cx} 0) scale(-1 1)`;
+function Grid({ id, tablet, options, enochianStyle, highlights, }) {
+    const enochianFont = enochianStyle !== undefined;
+    const reversed = reversedSquares(tablet, options);
+    const alt = altLetters(tablet, options);
+    const size = 20;
+    const border = 2;
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${size * 12 + border * 2} ${size * 13 + border * 2}`, children: [tablet.grid.map((row, y) => row.map((letter, x) => {
+                const element = elementFromPosition(x, y);
+                const isCross = isCrossFromPosition(x, y);
+                const fill = tabletColors[id]?.background || elementColors[element];
+                const color = tabletColors[id]?.color?.[element] || elementColors[element];
+                return (_jsxs(React.Fragment, { children: [_jsx("rect", { x: x * size + border, y: y * size + border, width: size, height: size, style: {
+                                strokeWidth: 1.2,
+                                stroke: isCross
+                                    ? tabletColors[id]?.border || "black"
+                                    : tabletColors[id]?.borderCross || "black",
+                                fill: isCross ? "white" : fill,
+                            } }, `r-${y}-${x}`), letter !== null && (_jsx("text", { x: x * size + size / 2 + border, y: y * size + size / 2 + 6 + border, transform: reversed.has(`${y},${x}`)
+                                ? mirrorAt(x * size + size / 2 + border)
+                                : undefined, style: {
+                                fontWeight: enochianFont ? "bold" : undefined,
+                                fontSize: size - 2 - (enochianFont ? 4 : 0),
+                                textAnchor: "middle",
+                                fill: isCross ? "black" : color || undefined,
+                                ...enochianStyle,
+                            }, children: letter }, `t-${y}-${x}`)), alt.has(`${y},${x}`) && (_jsx(AltLetters, { letters: alt.get(`${y},${x}`) ?? "", right: (x + 1) * size + border, top: y * size + border, fill: isCross ? "black" : color || undefined, enochianStyle: enochianStyle }))] }, "grid-" + x + "," + y));
+            })), highlights?.squares.map(({ row, column }) => {
+                const chosen = highlights.selected?.row === row &&
+                    highlights.selected?.column === column;
+                return (_jsx("rect", { "data-square": `${row},${column}`, x: column * size + border + 1, y: row * size + border + 1, width: size - 2, height: size - 2, style: {
+                        fill: "transparent",
+                        stroke: chosen ? "#c0f" : "#e0f",
+                        strokeWidth: chosen ? 3 : 1.6,
+                        strokeDasharray: chosen ? undefined : "3 2",
+                    }, onClick: highlights.onSelect
+                        ? () => highlights.onSelect?.({ row, column })
+                        : undefined }, `h-${row}-${column}`));
+            }), _jsx("rect", { x: 0, y: 0, width: size * 12 + border * 2, height: size * 13 + border * 2, style: {
+                    strokeWidth: border + 2,
+                    stroke: "black",
+                    fill: "none",
+                } })] }));
+}
+/**
+ * The Tablet of Union's lines in their elements' colours on white, EXARP
+ * for Air, HCOMA for Water, NANTA for Earth and BITOM for Fire: Regardie,
+ * The Golden Dawn, vol. 4 (1940), p.275.
+ */
+const UNION_LINE_COLORS = ["#d4a000", "#2255cc", "black", "#e22"];
+/** The Tablet of Union, its squares at a Watchtower's size, on its page. */
+function UnionGrid({ tablet, options, enochianStyle, }) {
+    const enochianFont = enochianStyle !== undefined;
+    const reversed = reversedSquares(tablet, options);
+    const size = 20;
+    const [, , pageWidth, pageHeight] = UNION_VIEWBOX;
+    const columns = tablet.grid[0]?.length ?? 0;
+    const left = (pageWidth - size * columns) / 2;
+    const top = (pageHeight - size * tablet.grid.length) / 2;
+    return (_jsxs(_Fragment, { children: [tablet.grid
+                .flatMap((row, y) => row.map((letter, x) => ({ letter, x, y })))
+                .map(({ letter, x, y }) => {
+                const cx = left + x * size + size / 2;
+                return (_jsxs(React.Fragment, { children: [_jsx("rect", { x: left + x * size, y: top + y * size, width: size, height: size, style: { strokeWidth: 1.2, stroke: "black", fill: "white" } }), _jsx("text", { x: cx, y: top + y * size + size / 2 + 6, transform: reversed.has(`${y},${x}`) ? mirrorAt(cx) : undefined, style: {
+                                fontWeight: enochianFont ? "bold" : undefined,
+                                fontSize: size - 2 - (enochianFont ? 4 : 0),
+                                textAnchor: "middle",
+                                fill: UNION_LINE_COLORS[y] ?? "black",
+                                ...enochianStyle,
+                            }, children: letter })] }, `grid-${x},${y}`));
+            }), _jsx("rect", { x: left, y: top, width: size * columns, height: size * tablet.grid.length, style: { strokeWidth: 4, stroke: "black", fill: "none" } })] }));
+}
+/** Each Watchtower's element, as its accessible name says it. */
+const ELEMENT_NAMES = {
+    earth: "Earth",
+    air: "Air",
+    water: "Water",
+    fire: "Fire",
+};
+/**
+ * The name a tablet is announced by: "Enochian Watchtower of Fire", "Tablet
+ * of Union", or "Enochian tablet" for a key the data does not have; in a
+ * version other than the default, with the version's name ("Enochian
+ * Watchtower of Fire, Dee's table of 1584").
+ */
+export function tabletName(id, version) {
+    const tablet = tabletOf(id);
+    const name = tablet?.kind === "union"
+        ? "Tablet of Union"
+        : tablet && Object.hasOwn(ELEMENT_NAMES, id)
+            ? `Enochian Watchtower of ${ELEMENT_NAMES[id]}`
+            : "Enochian tablet";
+    const chosen = versionOf(version);
+    return tablet && chosen !== DEFAULT_TABLET_VERSION
+        ? `${name}, ${VERSION_NAMES[chosen]}`
+        : name;
+}
+/**
+ * The page of a tablet a version does not have (Dee's and Raphael's have
+ * no Tablet of Union): its outline and a line saying so.
+ */
+function Missing({ name, version, viewBox, }) {
+    const [x, y, width, height] = viewBox;
+    const lines = [`No ${name}`, `in ${VERSION_NAMES[version]}`];
+    return (_jsxs("g", { "data-missing": "", children: [_jsx("rect", { x: x + 2, y: y + 2, width: width - 4, height: height - 4, style: {
+                    fill: "white",
+                    stroke: "#888",
+                    strokeWidth: 1,
+                    strokeDasharray: "4 3",
+                } }), lines.map((line, index) => (_jsx("text", { x: x + width / 2, y: y + height / 2 + (index - 0.5) * 10 + 3, style: { fontSize: 7, textAnchor: "middle", fill: "#444" }, children: line }, line)))] }));
+}
+/**
+ * `Tablet`'s drawing, its root's accessibility attributes the caller's:
+ * none for the hall's art, which draws a tablet inside an image that
+ * names itself, so that the hall's markup is as it was.
+ */
+export function TabletSvg({ tablet: tabletId, version, mirrorReversed = true, showSecondLetters = false, enochianStyle, frame = false, width, height, highlights, ref, role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, }) {
+    const id = tabletId;
+    const chosen = versionOf(version);
+    const data = tabletOf(id);
+    const tablet = tabletVersion(data, chosen);
+    const sigils = VERSION_SIGILS[chosen];
+    const Sigil = sigils && Object.hasOwn(sigils, id)
+        ? sigils[id]
+        : undefined;
+    const options = { reversed: mirrorReversed, alt: showSecondLetters };
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: tabletViewBox(id).join(" "), width: width, height: height, style: frame ? { border: "1px solid black" } : undefined, role: role, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ref: ref, children: data && !tablet ? (_jsx(Missing, { name: tabletName(id), version: chosen, viewBox: tabletViewBox(id) })) : tablet?.kind === "union" ? (_jsx(UnionGrid, { tablet: tablet, options: options, enochianStyle: enochianStyle })) : (tablet && (_jsxs(_Fragment, { children: [Sigil ? (_jsx("g", { transform: "translate(-31.5,-5) scale(0.3)", children: _jsx(Sigil, {}) })) : (_jsx(NoSigil, {})), _jsx("g", { transform: "translate(-94.5,48) scale(0.9)", children: _jsx(Grid, { id: id, tablet: tablet, options: options, enochianStyle: enochianStyle, highlights: highlights }) })] }))) }));
+}

package/lib/gd/FylfotCross.d.ts

@@ -0,0 +1,60 @@
+/**
+ * The finished cross, row by row: each square's symbol by its id in
+ * magick-data, and `null` where the cross has no square.
+ */
+export declare const FYLFOT_CELLS: readonly [readonly ["fire", "sagittarius", "leo", null, "water"], readonly [null, null, "aries", null, "pisces"], readonly ["taurus", "capricorn", "sol", "cancer", "scorpio"], readonly ["virgo", null, "libra", null, null], readonly ["earth", null, "aquarius", "gemini", "air"]];
+/** A symbol of the cross, by its id in magick-data: `aries`, `fire`, `sol`. */
+export type FylfotSymbolId = Exclude<(typeof FYLFOT_CELLS)[number][number], null>;
+/**
+ * A square that shows no symbol, for a cross being filled in: `""` is an
+ * empty square, which takes clicks, and `"cursor"` the square being
+ * filled now, outlined.
+ */
+export type FylfotBlank = "" | "cursor";
+/**
+ * What a square shows: a symbol, a blank, or `null` where there is no
+ * square.
+ */
+export type FylfotCell = FylfotSymbolId | FylfotBlank | null;
+/** A square a click landed on, as `onCellClick` is given it. */
+export interface FylfotCellClick {
+    /**
+     * What the square showed: a symbol, or `""` for an empty square. The
+     * cursor's square and the places with no square take no clicks.
+     */
+    id: FylfotSymbolId | "";
+    /** Its row and column, from 0 at the top left. */
+    row: number;
+    column: number;
+    /**
+     * The symbol the finished cross has there, or `null` where it has no
+     * square, as `cells` may put one where the finished cross has none.
+     */
+    expected: FylfotSymbolId | null;
+}
+/** The magick-data table a symbol of the cross is a row of. */
+export declare function fylfotSymbolTable(id: FylfotSymbolId): "planet" | "element" | "zodiac";
+/** Props of the fylfot cross. */
+export interface FylfotCrossProps {
+    /**
+     * What each square shows, row by row; the finished cross,
+     * `FYLFOT_CELLS`, by default.
+     */
+    cells?: readonly (readonly FylfotCell[])[];
+    /**
+     * Called when a symbol or an empty square is clicked, with what it
+     * showed, where it is and what belongs there. Without it the squares
+     * take no clicks, so the cross renders as a Server Component.
+     */
+    onCellClick?: (click: FylfotCellClick) => void;
+    /** Colours each arm by its element (default true). */
+    showColors?: boolean;
+    /**
+     * The squares' borders, a CSS colour such as a theme's custom property;
+     * black by default.
+     */
+    ink?: string;
+}
+/** The fylfot cross of the signs and elements, as a table of squares. */
+export declare function FylfotCross({ cells, onCellClick, showColors, ink, }: FylfotCrossProps): import("react").JSX.Element;
+export default FylfotCross;