magick-components 0.0.0-stage → 0.1.0

package/lib/gd/SevenBranchedCandlestick.d.ts

@@ -0,0 +1,54 @@
+import { type PlanetId } from "magick-data/astrology/planets";
+import React from "react";
+import { type DrawingSource, type DrawingVersionNote } from "../drawingVersions.ts";
+/**
+ * The versions of the candlestick: the figure of *The Equinox* I(2)
+ * (1909), Diagram 17 (`equinox1909`, the default), and the arrangement
+ * of recent editions of Regardie (`modern`), which this package drew
+ * alone until 14 November 2026. A new version is a new id; neither of
+ * these moves.
+ */
+export declare const CANDLESTICK_VERSIONS: readonly ["equinox1909", "modern"];
+/** A version of the candlestick. */
+export type CandlestickVersionId = (typeof CANDLESTICK_VERSIONS)[number];
+/** The version the candlestick is drawn in unless another is asked for. */
+export declare const DEFAULT_CANDLESTICK_VERSION: CandlestickVersionId;
+/** One version of the candlestick: its name, its note and its sources. */
+export type CandlestickVersionNote = DrawingVersionNote<CandlestickVersionId>;
+export type { DrawingSource };
+/** Each version's note, by its id. */
+export declare const CANDLESTICK_VERSION_NOTES: Readonly<Record<CandlestickVersionId, CandlestickVersionNote>>;
+/**
+ * Each version's seven lamps, clockwise from the top; the image's inputs
+ * name these rows.
+ */
+export declare const CANDLESTICK_PLANETS: Readonly<Record<CandlestickVersionId, readonly PlanetId[]>>;
+/** Props of the diagram. */
+export interface SevenBranchedCandlestickProps {
+    /**
+     * Which candlestick (`CANDLESTICK_VERSIONS`): the figure of *The
+     * Equinox* I(2) (1909), Diagram 17 (`equinox1909`), when not given or
+     * not a version, or the arrangement of recent editions (`modern`).
+     * `CANDLESTICK_VERSION_NOTES` says where each comes from.
+     */
+    version?: CandlestickVersionId;
+    /**
+     * Prefixes the text paths' ids, which are document-wide: two of these
+     * on one page need different prefixes. No hook makes one, so that the
+     * component also renders where React's hooks are not available.
+     */
+    idPrefix?: string;
+    /** The `<svg>`, for exporting the drawing. */
+    ref?: React.Ref<SVGSVGElement>;
+}
+/**
+ * The Golden Dawn's seven-branched candlestick, in a version (`version`):
+ * by default the figure of *The Equinox* I(2) (1909), seven lamps about a
+ * central one, each with its double letter, the planet's Hebrew name, the
+ * archangel of its Sephirah and one of the seven churches, joined by a
+ * heptagram in the Chaldean order; or the modern arrangement, a branch
+ * for each planet with its symbol, Hebrew name, planetary angel and
+ * letter, set about a heptagram.
+ */
+export declare function SevenBranchedCandlestick({ version, idPrefix, ref, }: SevenBranchedCandlestickProps): React.JSX.Element;
+export default SevenBranchedCandlestick;

package/lib/gd/SevenBranchedCandlestick.js

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { assemble } from "magick-data/assemble";
+import planetRows from "magick-data/astrology/planets";
+import hebrewLetterRows from "magick-data/hebrewLetters";
+import archangelRows from "magick-data/kabbalah/archangels";
+import sephirahRows from "magick-data/kabbalah/sephirot";
+import { archiveLeaf, } from "../drawingVersions.js";
+import { svgCoordinate } from "../svgCoordinate.js";
+/**
+ * The planets with their archangels and letters joined, and the sephirot
+ * whose archangels the 1909 figure gives: the four tables the lamps read,
+ * rather than the whole barrel.
+ */
+const data = assemble({
+    planet: planetRows,
+    archangel: archangelRows,
+    hebrewLetter: hebrewLetterRows,
+    sephirah: sephirahRows,
+});
+/**
+ * The versions of the candlestick: the figure of *The Equinox* I(2)
+ * (1909), Diagram 17 (`equinox1909`, the default), and the arrangement
+ * of recent editions of Regardie (`modern`), which this package drew
+ * alone until 14 November 2026. A new version is a new id; neither of
+ * these moves.
+ */
+export const CANDLESTICK_VERSIONS = ["equinox1909", "modern"];
+/** The version the candlestick is drawn in unless another is asked for. */
+export const DEFAULT_CANDLESTICK_VERSION = "equinox1909";
+/** A version by its id, or the default for anything that is none. */
+function versionOf(version) {
+    return CANDLESTICK_VERSIONS.includes(version ?? "")
+        ? version
+        : DEFAULT_CANDLESTICK_VERSION;
+}
+/** Each version's note, by its id. */
+export const CANDLESTICK_VERSION_NOTES = {
+    equinox1909: {
+        id: "equinox1909",
+        title: "Equinox 1909",
+        text: "This is the figure printed in The Equinox I(2) (1909), p. 265, " +
+            "Diagram 17, from the Zelator ritual as Crowley received it. Each " +
+            "lamp bears a double letter, the Hebrew name of its planet, the " +
+            "archangel of that planet's Sephirah and one of the seven churches " +
+            "of Asia, and the lines of the star pass through the planets from " +
+            "Saturn down to the Moon. Taking every second lamp round the circle " +
+            "gives the days of the week.",
+        sources: [
+            {
+                text: "The Equinox, vol. I no. 2 (London, 1909), Diagram 17, p. 265 " +
+                    "(archive.org leaf n266)",
+                url: archiveLeaf("crowley-equinox_202110", 266, "The Equinox Vol. 1, No. 2"),
+            },
+        ],
+    },
+    modern: {
+        id: "modern",
+        title: "Modern",
+        text: "This arrangement appears in recent editions of Regardie's The " +
+            "Golden Dawn; his text of 1938 (vol. 2, p. 62) describes the lamps " +
+            "but does not say which planet goes where. The planets stand in the " +
+            "order of the double letters on the Rose of 22 petals, with " +
+            "Agrippa's planetary angels in place of the archangels of the " +
+            "Sephiroth, and the triangles point inward. Unlike the 1909 figure, " +
+            "its star does not trace the days of the week, and it leaves out " +
+            "the churches and the central lamp.",
+        sources: [
+            {
+                text: "Israel Regardie, The Golden Dawn, vol. 2 (Aries Press, Chicago, " +
+                    "1938), p. 62 (archive.org leaf n56), for the lamps",
+                url: archiveLeaf("IsraelRegardie-TheGoldenDawn-Vol2-1938", 56),
+            },
+            {
+                text: "Israel Regardie, The Golden Dawn (Llewellyn, 2015 edition), " +
+                    "for the order, a fact only; nothing of it is copied",
+            },
+        ],
+    },
+};
+function degreesToPointOnCircle(degrees, radius, center = { x: 0, y: 0 }) {
+    const radians = (degrees * Math.PI) / 180;
+    // console.log(degrees, radians);
+    return {
+        x: radius * Math.cos(radians) + center.x,
+        y: radius * Math.sin(radians) + center.y,
+    };
+}
+/*
+const branches: PlanetId[] = [
+  "sol",
+  "mars",
+  "jupiter",
+  "saturn",
+  "luna",
+  "mercury",
+  "venus",
+];
+*/
+/**
+ * Each version's seven lamps, clockwise from the top; the image's inputs
+ * name these rows.
+ */
+export const CANDLESTICK_PLANETS = {
+    // Diagram 17: Saturn at the top, then Mars, Venus, the Moon, Jupiter,
+    // the Sun and Mercury, so that the star, from Saturn, runs Saturn,
+    // Jupiter, Mars, Sun, Venus, Mercury, Moon (the Chaldean order), and
+    // every second lamp backwards from the Sun gives the week.
+    equinox1909: ["saturn", "mars", "venus", "luna", "jupiter", "sol", "mercury"],
+    modern: ["venus", "mercury", "sol", "mars", "jupiter", "saturn", "luna"],
+};
+const branches = CANDLESTICK_PLANETS.modern;
+function Branch({ index, idPrefix }) {
+    const radius = 7.4; // TODO, work it out properly
+    const center = degreesToPointOnCircle((index * 360) / 7 - 90, 25 + radius);
+    const planetId = branches[index];
+    const planet = data.planet[planetId];
+    // console.log(planet);
+    const texts = [
+        planet.archangel?.name.he,
+        planet.hebrewLetter?.letter?.he,
+        planet.name.he?.he,
+    ];
+    // With extend radius so text is offset from the side of the triangle
+    const textPaths = [
+        [
+            degreesToPointOnCircle(90, radius + 1, center),
+            degreesToPointOnCircle(90 + 360 / 3, radius + 1, center),
+        ],
+        [
+            // Extend the radius even further so text path (which is on the
+            // bottom side of the text) still fits the top of the text below
+            // the triangle.
+            degreesToPointOnCircle(90 + (360 / 3) * 2, radius + 4.5, center),
+            degreesToPointOnCircle(90 + 360 / 3, radius + 4.5, center),
+        ],
+        [
+            degreesToPointOnCircle(90 + (360 / 3) * 2, radius + 1, center),
+            degreesToPointOnCircle(90, radius + 1, center),
+        ],
+    ];
+    const bottom = degreesToPointOnCircle(90, radius - 0.4, center);
+    const topLeft = degreesToPointOnCircle(90 + 360 / 3, radius - 0.4, center);
+    const topRight = degreesToPointOnCircle(90 + (360 / 3) * 2, radius - 0.4, center);
+    const rotation = (360 / 7) * index;
+    return (_jsxs("g", { transform: `rotate(${rotation} ${center.x} ${center.y})`, children: [_jsx("circle", { cx: center.x, cy: center.y, r: radius, fill: "none", stroke: "black", strokeWidth: "0.5" }), _jsx("path", { d: `M ${bottom.x} ${bottom.y} L ${topLeft.x} ${topLeft.y} L ${topRight.x} ${topRight.y} L ${bottom.x} ${bottom.y}`, fill: "none", stroke: "black", strokeWidth: "0.5" }), _jsx("text", { x: center.x, y: center.y, transform: `rotate(180 ${center.x} ${center.y})`, textAnchor: "middle", dominantBaseline: "middle", fontSize: "4", fontWeight: "bold", children: planet.symbol }), texts.map((text, i) => (_jsxs("g", { children: [_jsx("path", { id: `${idPrefix}-path-${index}-l${i}`, d: `M ${textPaths[i][0].x} ${textPaths[i][0].y} L ${textPaths[i][1].x} ${textPaths[i][1].y}`, fill: "none", stroke: "none" }), _jsx("text", { children: _jsx("textPath", { fontSize: "3", href: `#${idPrefix}-path-${index}-l${i}`, textAnchor: "middle", startOffset: "50%", children: texts[i] }) })] }, i)))] }));
+}
+/**
+ * The seven churches of Asia (Revelation 1:11) on Diagram 17's lamps, by
+ * planet, as the figure names them. magick-data has no table of them.
+ */
+const CHURCHES = {
+    saturn: "Ephesus",
+    mars: "Pergamos",
+    venus: "Thyatira",
+    luna: "Laodicea",
+    jupiter: "Philadelphia",
+    sol: "Smyrna",
+    mercury: "Sardis",
+};
+/** Hebrew without its points, as the figure writes every name. */
+const unpointed = (text) => text?.replace(/[\u0591-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7]/g, "");
+/** "x y", each rounded as the package writes coordinates. */
+const pair = (point) => `${svgCoordinate(point.x)} ${svgCoordinate(point.y)}`;
+// Diagram 17's proportions in the 100 × 100 viewBox, kept within the
+// modern drawing's outer circle (r 40), which the halls' disc fills.
+/** The lamps' centres lie on this circle. */
+const LAMP_RING = 29;
+/** Each lamp's radius. */
+const LAMP = 10.5;
+/** The circle through the triangle's corners, inside its lamp. */
+const TRIANGLE = LAMP - 0.8;
+/** The star's points touch the lamps, as in the figure. */
+const STAR = LAMP_RING - LAMP;
+/** The central lamp, inside the star's innermost lines. */
+const CENTRAL_LAMP = 3.4;
+/** How far out along its arm each planet's symbol stands. */
+const SYMBOL_AT = STAR * 0.55;
+/** A lamp's direction from the centre: clockwise from the top. */
+const lampAngle = (index) => (index * 360) / 7 - 90;
+/**
+ * One lamp of Diagram 17, drawn as if it stood at the top and turned to
+ * its place, as the figure turns each lamp: the triangle with its apex
+ * outward, the double letter inside it, the planet's Hebrew name along
+ * its left side and the archangel of the planet's Sephirah along its
+ * right, and the church's name under its base.
+ *
+ * Where the figure departs from Regardie's text of 1938 (vol. 2, p. 62),
+ * which puts the archangel on the triangle's right, the sphere's name on
+ * its left and the letter beneath the base, this follows the figure: the
+ * letter is inside, and the church's name beneath. The figure's Mars lamp
+ * has its two names the other way about, alone of the seven; it is drawn
+ * here as the other six and the text have them. The names are
+ * magick-data's, without points; where its spelling differs from the
+ * figure's (נגה for נוגה, חמאל for כמאל, הניאל for האניאל) it is kept.
+ */
+function Lamp1909({ index, idPrefix }) {
+    const planetId = CANDLESTICK_PLANETS.equinox1909[index];
+    const planet = data.planet[planetId];
+    const sephirah = Object.values(data.sephirah).find((row) => row.planetId === planetId);
+    const center = degreesToPointOnCircle(lampAngle(index), LAMP_RING);
+    // Corners and text lines, before the turn: up is away from the centre.
+    const corner = (degrees, radius = TRIANGLE) => degreesToPointOnCircle(degrees, radius, center);
+    const apex = corner(270);
+    const left = corner(150);
+    const right = corner(30);
+    const along = TRIANGLE + 1.6;
+    const sides = [
+        // The sphere's name, read up the left side; the archangel's, down
+        // the right; each outside its side.
+        [unpointed(planet.name.he?.he), corner(150, along), corner(270, along)],
+        [
+            unpointed(sephirah?.archangel?.name.he),
+            corner(270, along),
+            corner(30, along),
+        ],
+    ];
+    const x = svgCoordinate(center.x);
+    const y = svgCoordinate(center.y);
+    return (_jsxs("g", { transform: `rotate(${svgCoordinate((index * 360) / 7)} ${x} ${y})`, children: [_jsx("circle", { cx: x, cy: y, r: LAMP, fill: "none", stroke: "black", strokeWidth: "0.5" }), _jsx("path", { d: `M ${pair(apex)} L ${pair(left)} L ${pair(right)} Z`, fill: "none", stroke: "black", strokeWidth: "0.5" }), _jsx("text", { x: x, y: y, textAnchor: "middle", dominantBaseline: "middle", fontSize: "5", fontWeight: "bold", children: planet.hebrewLetter?.letter?.he }), sides.map(([text, from, to], side) => (_jsxs("g", { children: [_jsx("path", { id: `${idPrefix}-path-${index}-l${side}`, d: `M ${pair(from)} L ${pair(to)}`, fill: "none", stroke: "none" }), _jsx("text", { children: _jsx("textPath", { fontSize: "3", href: `#${idPrefix}-path-${index}-l${side}`, textAnchor: "middle", startOffset: "50%", children: text }) })] }, from.x))), _jsx("text", { x: x, y: svgCoordinate(center.y + TRIANGLE / 2 + 2.6), textAnchor: "middle", fontSize: "2.3", children: CHURCHES[planetId] })] }));
+}
+/**
+ * Diagram 17 of *The Equinox* I(2) (1909): seven lamps about a central
+ * one, joined by a heptagram whose lines run through the planets in the
+ * Chaldean order, each planet's symbol on its arm.
+ */
+function Equinox1909({ idPrefix, ref, }) {
+    // The star from Saturn, three lamps on each time: Saturn, Jupiter,
+    // Mars, the Sun, Venus, Mercury, the Moon, and back.
+    const star = [0, 4, 1, 5, 2, 6, 3]
+        .map((i) => pair(degreesToPointOnCircle(lampAngle(i), STAR)))
+        .join(" L ");
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "-50 -50 100 100", ref: ref, children: [_jsx("path", { d: `M ${star} Z`, fill: "none", stroke: "black", strokeWidth: ".5" }), _jsx("circle", { cx: "0", cy: "0", r: CENTRAL_LAMP, fill: "none", stroke: "black", strokeWidth: ".5" }), CANDLESTICK_PLANETS.equinox1909.map((planetId, i) => {
+                const at = degreesToPointOnCircle(lampAngle(i), SYMBOL_AT);
+                return (_jsx("text", { x: svgCoordinate(at.x), y: svgCoordinate(at.y), textAnchor: "middle", dominantBaseline: "middle", fontSize: "3.5", children: data.planet[planetId].symbol }, planetId));
+            }), CANDLESTICK_PLANETS.equinox1909.map((planetId, i) => (_jsx(Lamp1909, { index: i, idPrefix: idPrefix }, planetId)))] }));
+}
+/**
+ * The Golden Dawn's seven-branched candlestick, in a version (`version`):
+ * by default the figure of *The Equinox* I(2) (1909), seven lamps about a
+ * central one, each with its double letter, the planet's Hebrew name, the
+ * archangel of its Sephirah and one of the seven churches, joined by a
+ * heptagram in the Chaldean order; or the modern arrangement, a branch
+ * for each planet with its symbol, Hebrew name, planetary angel and
+ * letter, set about a heptagram.
+ */
+export function SevenBranchedCandlestick({ version, idPrefix = "candlestick", ref, }) {
+    return versionOf(version) === "modern" ? (_jsx(Modern, { idPrefix: idPrefix, ref: ref })) : (_jsx(Equinox1909, { idPrefix: idPrefix, ref: ref }));
+}
+/**
+ * The modern arrangement, as this package drew it before the versions:
+ * its markup is unchanged.
+ */
+function Modern({ idPrefix, ref, }) {
+    const indexes = [0, 1, 2, 3, 4, 5, 6];
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "-50 -50 100 100", ref: ref, children: [_jsx("circle", { cx: "0", cy: "0", r: "40", fill: "none", stroke: "black", strokeWidth: ".5" }), _jsx("circle", { cx: "0", cy: "0", r: "25", fill: "none", stroke: "black", strokeWidth: ".5" }), (function () {
+                // Start from bottom left corner, to top, etc.
+                const orderedIndexes = [4, 0, 3, 6, 2, 5, 1, 4];
+                const d = "M " +
+                    orderedIndexes
+                        .concat([0])
+                        .map((i) => {
+                        const p = degreesToPointOnCircle((i * 360) / indexes.length - 90, 25);
+                        return `${p.x} ${p.y}`;
+                    })
+                        .join(" L ");
+                return _jsx("path", { d: d, fill: "none", stroke: "black", strokeWidth: ".5" });
+            })(), indexes.map((i) => (_jsx(Branch, { index: i, idPrefix: idPrefix }, i)))] }));
+}
+export default SevenBranchedCandlestick;

package/lib/gd/TableOfShewbread.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+/** Props of the diagram. */
+export interface TableOfShewbreadProps {
+    /**
+     * Prefixes the text paths' ids, which are document-wide: two of these
+     * on one page need different prefixes. No hook makes one, so that the
+     * component also renders where React's hooks are not available.
+     */
+    idPrefix?: string;
+    /** The `<svg>`, for exporting the drawing. */
+    ref?: React.Ref<SVGSVGElement>;
+}
+/**
+ * The Golden Dawn's Table of Shewbread: the twelve signs of the zodiac on a
+ * circle, with the permutations of the Tetragrammaton and the tribes of
+ * Israel the signs are given.
+ */
+export declare function TableOfShewbread({ idPrefix, ref, }: TableOfShewbreadProps): React.JSX.Element;
+export default TableOfShewbread;

package/lib/gd/TableOfShewbread.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { assemble } from "magick-data/assemble";
+import zodiacRows from "magick-data/astrology/zodiac";
+import archangels from "magick-data/kabbalah/archangels";
+import tribeRows from "magick-data/kabbalah/tribesOfIsrael";
+/**
+ * Two tables, joined: the table draws each sign's tribe, and used to index
+ * the tribes with `tribesOfIsrael[zodiac.tribeOfIsraelId]` by hand, which is
+ * the join `tribeOfIsraelId` has declared in the graph since step 2. Scoped
+ * rather than the barrel on purpose — the barrel would put all 23 of its
+ * tables in this route's chunk, and this needs two, and the archangels'
+ * names.
+ */
+const { zodiac } = assemble({
+    zodiac: zodiacRows,
+    tribeOfIsrael: tribeRows,
+});
+const zodiacArray = Object.values(zodiac);
+function degreesToPointOnCircle(degrees, radius, center = { x: 0, y: 0 }) {
+    const radians = (degrees * Math.PI) / 180;
+    // console.log(degrees, radians);
+    return {
+        x: radius * Math.cos(radians) + center.x,
+        y: radius * Math.sin(radians) + center.y,
+    };
+}
+const yhvH = {
+    y: "י",
+    h: "ה",
+    v: "ו",
+    H: "הּ",
+};
+const transToHeb = (str) => str
+    .split("")
+    .map((c) => yhvH[c] || c)
+    .join("");
+function Branch({ zodiac, index, idPrefix, }) {
+    const numBranches = 12;
+    const radius = 8; // TODO, work it out properly
+    const center = degreesToPointOnCircle((-index * 360) / numBranches - 90, 23.7 + radius);
+    const texts = [
+        transToHeb(zodiac.tetragrammatonPermutation),
+        "הוזחטילנסעצק"[index],
+        zodiac.tribeOfIsrael?.name.he,
+        // planet.archangel?.name.he,
+        // planet.hebrewLetter?.letter?.he,
+        // planet.name.he.he,
+    ];
+    // With extend radius so text is offset from the side of the triangle
+    const textPaths = [
+        [
+            degreesToPointOnCircle(90, radius + 1, center),
+            degreesToPointOnCircle(90 + 360 / 3, radius + 1, center),
+        ],
+        [
+            // Extend the radius even further so text path (which is on the
+            // bottom side of the text) still fits the top of the text below
+            // the triangle.
+            degreesToPointOnCircle(90 + (360 / 3) * 2, radius + 4.5, center),
+            degreesToPointOnCircle(90 + 360 / 3, radius + 4.5, center),
+        ],
+        [
+            degreesToPointOnCircle(90 + (360 / 3) * 2, radius + 1, center),
+            degreesToPointOnCircle(90, radius + 1, center),
+        ],
+    ];
+    const bottom = degreesToPointOnCircle(90, radius - 0.4, center);
+    const topLeft = degreesToPointOnCircle(90 + 360 / 3, radius - 0.4, center);
+    const topRight = degreesToPointOnCircle(90 + (360 / 3) * 2, radius - 0.4, center);
+    const rotation = (360 / numBranches) * -index;
+    return (_jsxs("g", { transform: `rotate(${rotation} ${center.x} ${center.y})`, children: [_jsx("circle", { cx: center.x, cy: center.y, r: radius, fill: "none", stroke: "black", strokeWidth: "0.35" }), _jsx("path", { d: `M ${bottom.x} ${bottom.y} L ${topLeft.x} ${topLeft.y} L ${topRight.x} ${topRight.y} L ${bottom.x} ${bottom.y}`, fill: "none", stroke: "black", strokeWidth: "0.35" }), _jsx("text", { x: center.x, y: center.y, transform: `rotate(180 ${center.x} ${center.y})`, textAnchor: "middle", dominantBaseline: "middle", fontSize: "4", fontWeight: "bold", children: zodiac.symbol }), texts.map((text, i) => (_jsxs("g", { children: [_jsx("path", { id: `${idPrefix}-path-${index}-l${i}`, d: `M ${textPaths[i][0].x} ${textPaths[i][0].y} L ${textPaths[i][1].x} ${textPaths[i][1].y}`, fill: "none", stroke: "none" }), _jsx("text", { children: _jsx("textPath", { fontSize: "3", href: `#${idPrefix}-path-${index}-l${i}`, textAnchor: "middle", startOffset: "50%", children: texts[i] }) })] }, i)))] }, index));
+}
+/**
+ * The archangels of the quarters, each with the Kerub of its element: their
+ * names in Hebrew, as the figure's other labels are, from magick-data.
+ */
+const innerCircleData = [
+    { angelId: "raphael", kerub: "אדם", symbol: "👨" },
+    { angelId: "michael", kerub: "אריה", symbol: "🦁" },
+    { angelId: "gabriel", kerub: "נשר", symbol: "🦅" },
+    { angelId: "uriel", kerub: "שור", symbol: "🐂" },
+].map((circle) => ({
+    ...circle,
+    angelName: archangels[circle.angelId].name.he,
+}));
+const innerRadius = 23.5;
+const pentagramRadius = innerRadius * 0.45;
+const innerCircleRadius = (innerRadius - pentagramRadius) / 2;
+// We use this center point since Raphael's circle is not rotated when
+// looking at the table.  We then rely on transform-rotate to place the
+// remaining inner circles and present contents at correct angles.
+const raphaelCircleCenter = degreesToPointOnCircle(90, innerRadius - innerCircleRadius);
+const innerCircles = innerCircleData.map((data, index) => ({
+    ...data,
+    radius: innerCircleRadius,
+    center: degreesToPointOnCircle((270 + 90 * index) % 360, innerRadius - innerCircleRadius),
+}));
+function TextOnCircle({ text, pathKey = text, center, radius, position, offset = 0, idPrefix, }) {
+    const fontSize = 2.5;
+    const textPathId = `${idPrefix}-text-path-${pathKey}-${position}`;
+    radius -= offset;
+    return (_jsxs("g", { children: [_jsx("path", { id: textPathId, d: `M ${center.x - radius} ${center.y} A ${radius} ${radius} 0 1 ${position === "inner-top" ? 1 : 0} ${center.x + radius} ${center.y}`, fill: "none", stroke: "none" }), _jsx("text", { children: _jsx("textPath", { href: `#${textPathId}`, textAnchor: "middle", dominantBaseline: position === "inner-top" ? "text-before-edge" : "text-after-edge", startOffset: "50%", fontSize: fontSize, children: text }) })] }));
+}
+/**
+ * The Golden Dawn's Table of Shewbread: the twelve signs of the zodiac on a
+ * circle, with the permutations of the Tetragrammaton and the tribes of
+ * Israel the signs are given.
+ */
+export function TableOfShewbread({ idPrefix = "shewbread", ref, }) {
+    const innerTriangles = [0, 30, 60, 90].map((offset) => [
+        degreesToPointOnCircle(30 + offset, innerRadius),
+        degreesToPointOnCircle(150 + offset, innerRadius),
+        degreesToPointOnCircle(270 + offset, innerRadius),
+    ]);
+    // degrees = 360 / 5 = 72;
+    // offset = 270 (top point of cirlce) - 288 (degrees at index 4) = -18
+    const pentagramPoints = [3, 0, 2, 4, 1].map((index) => degreesToPointOnCircle(index * 72 - 18, pentagramRadius));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "-50 -50 100 100", ref: ref, children: [_jsx("circle", { cx: "0", cy: "0", r: "40", fill: "none", stroke: "black", strokeWidth: ".35" }), _jsx("circle", { cx: "0", cy: "0", r: innerRadius, fill: "none", stroke: "black", strokeWidth: ".35" }), _jsx("g", { children: innerTriangles.map((triangle, i) => (_jsx("path", { d: `M ${triangle[0].x} ${triangle[0].y} L ${triangle[1].x} ${triangle[1].y} L ${triangle[2].x} ${triangle[2].y} Z`, fill: "none", stroke: "black", strokeWidth: ".35" }, i))) }), _jsx("path", { d: `M ${pentagramPoints.map((p) => `${p.x} ${p.y}`).join(" L ")} Z`, fill: "none", stroke: "black", strokeWidth: ".35" }), zodiacArray.map((zodiac, i) => (_jsx(Branch, { zodiac: zodiac, index: i, idPrefix: idPrefix }, i))), _jsx("g", { children: innerCircles.map((circle, i) => (_jsxs("g", { transform: `rotate(${180 + 90 * i}, 0, 0)`, children: [_jsx("circle", { cx: raphaelCircleCenter.x, cy: raphaelCircleCenter.y, r: circle.radius, fill: "white", stroke: "black", strokeWidth: ".35" }), _jsx(TextOnCircle, { text: circle.angelName, pathKey: circle.angelId, center: raphaelCircleCenter, radius: circle.radius, position: "inner-top", idPrefix: idPrefix }), _jsx("text", { x: raphaelCircleCenter.x, y: raphaelCircleCenter.y, textAnchor: "middle", dominantBaseline: "central", fontSize: 5, children: circle.symbol }), _jsx(TextOnCircle, { text: circle.kerub, center: raphaelCircleCenter, radius: circle.radius, position: "inner-bottom", idPrefix: idPrefix })] }, i))) })] }));
+}
+export default TableOfShewbread;

package/lib/gd/hall/GdHall.d.ts

@@ -0,0 +1,94 @@
+import { type CSSProperties, type Ref } from "react";
+import { type HallResolvedObject, type ResolvedHall } from "./layout.ts";
+import type { HallArt, HallArtRegistry, HallNode } from "./types.ts";
+/** Props of `GdHall`. */
+export interface GdHallProps {
+    /** The compiled `gdHall` node; anything else draws an empty hall. */
+    hall: HallNode;
+    /**
+     * The art for each kind of object; the package's own when not given. A
+     * registry of your own can add kinds or draw them differently.
+     */
+    art?: HallArtRegistry;
+    /**
+     * Where the hall's WOFF2 subsets are served (such as `/fonts`). When set,
+     * the SVG carries its own `@font-face` rules; otherwise the page must.
+     */
+    fontBaseUrl?: string;
+    /** The `<svg>`'s class. */
+    className?: string;
+    /** The `<svg>`'s style. */
+    style?: CSSProperties;
+    /** The SVG's width; from the height and the hall's shape when not given. */
+    width?: number | string;
+    /** The SVG's height; from the width and the hall's shape when not given. */
+    height?: number | string;
+    /** The drawn `<svg>`, for exporting it. */
+    ref?: Ref<SVGSVGElement>;
+}
+/**
+ * One drawing in the hall's `<defs>`: the first object drawn with it, and
+ * its art (none for the placeholder).
+ */
+export interface HallArtDefinition {
+    id: string;
+    object: HallResolvedObject;
+    art?: HallArt;
+}
+/** The drawings of a hall, as `GdHall` memoises them. */
+export interface HallDrawings {
+    definitions: readonly HallArtDefinition[];
+    uses: ReadonlyMap<HallResolvedObject, string>;
+}
+/**
+ * The hall a node draws: itself when it is a `gdHall`, an empty hall for
+ * anything else.
+ */
+export declare function hallRoot(hall: HallNode): HallNode;
+/** Props of `GdHallSvg`: a resolved hall, drawn without hooks. */
+export interface GdHallSvgProps {
+    /** The hall as `resolveHall` resolved it with `art`. */
+    resolved: ResolvedHall;
+    /** The art `resolved` was resolved with. */
+    art: HallArtRegistry;
+    /**
+     * Prefixes the pattern, gradient and drawing ids, which must be unique
+     * in the document: `useId`'s in `GdHall`, a fixed name in an image.
+     */
+    idPrefix: string;
+    /** The drawings, when the caller memoises them; computed otherwise. */
+    drawings?: HallDrawings;
+    /** `@font-face` rules carried inside the SVG, if any. */
+    fontCss?: string;
+    /**
+     * Draw for a server-side image renderer: the viewBox rounded
+     * outward to whole units, which resvg writes back unchanged, and no
+     * `<title>`, `role` or `aria-labelledby`, since outlining drops the
+     * title an accessible name would point at.
+     */
+    image?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    width?: number | string;
+    height?: number | string;
+    ref?: Ref<SVGSVGElement>;
+}
+/** A resolved viewBox in SVG units, as `GdHallSvg` writes it. */
+export declare function hallViewBox(resolved: ResolvedHall, image?: boolean): [number, number, number, number];
+/**
+ * The drawing of a resolved hall, without hooks, so a server-side renderer
+ * with no hook dispatcher can render it. `GdHall` draws through it.
+ */
+export declare function GdHallSvg({ resolved, art, idPrefix: id, drawings, fontCss, image, className, style, width, height, ref, }: GdHallSvgProps): import("react").JSX.Element;
+/**
+ * A Golden Dawn temple hall as inline SVG, drawn from a `gdHall` node such
+ * as a preset's (`magick-components/gd/hall/presets`). It renders on the
+ * server as well as in the browser: its layout is computed from the node,
+ * its labels' widths from the metrics of the fonts the package ships, and
+ * its gradient and pattern ids from `useId`, so several halls can share a
+ * page. The node is treated as untrusted: its strings only reach text
+ * nodes, unknown tags draw as dashed placeholders, and nothing is loaded
+ * by URL except the fonts `fontBaseUrl` points at.
+ */
+export declare function GdHall({ hall, art, fontBaseUrl, className, style, width, height, ref, }: GdHallProps): import("react").JSX.Element;
+export default GdHall;