magick-components 0.0.0-stage → 0.1.0

package/fonts/SOURCES.md

@@ -0,0 +1,35 @@
+# The hall fonts
+
+`GdHall`, the temple-hall diagram, sets its labels in Noto Serif Italic,
+its compass in Noto Serif Bold Italic and its Hebrew letters in Frank Ruhl
+Libre Bold, under family names of its own, from these three subsets. Its
+text is measured with exactly these files (`src/gd/hall/fontMetrics.json`),
+so another build of either font may set it differently.
+
+They are licensed under the SIL Open Font License 1.1, not MIT:
+[NotoSerif-OFL.txt](./NotoSerif-OFL.txt) (Copyright 2022 The Noto Project
+Authors) and [FrankRuhlLibre-OFL.txt](./FrankRuhlLibre-OFL.txt) (Copyright
+2015 The Frank Ruhl Libre Project Authors), the upstream notices; neither
+declares a Reserved Font Name. `FrankRuhlLibre-OFL.txt` ends with a few
+lines of a GitHub page footer; they are in the upstream file, which is kept
+byte for byte.
+
+`scripts/gd-hall-fonts/build.py` in the
+[magick.ly repository](https://github.com/gadicc/magickly) makes them:
+static instances of the variable fonts in google/fonts commit
+`8b0a1d0f5983c89bc2b93f1b5fb55f9e252744b5`, subset, with only the `kern`
+layout feature kept.
+
+| Source | SHA-256 |
+| --- | --- |
+| [`ofl/notoserif/NotoSerif-Italic[wdth,wght].ttf`](https://raw.githubusercontent.com/google/fonts/8b0a1d0f5983c89bc2b93f1b5fb55f9e252744b5/ofl/notoserif/NotoSerif-Italic%5Bwdth,wght%5D.ttf) | e87acbc6c0efd0d9a20d6a8cbbda2b266c14be3a3a6f5af8ec9d7b2460570ad1 |
+| [`ofl/frankruhllibre/FrankRuhlLibre[wght].ttf`](https://raw.githubusercontent.com/google/fonts/8b0a1d0f5983c89bc2b93f1b5fb55f9e252744b5/ofl/frankruhllibre/FrankRuhlLibre%5Bwght%5D.ttf) | f9bf26966681037aae894b031bd0dcf2c1bfdfa128dd0640cf276fe62a338a43 |
+
+| File | Instance and subset | Bytes | SHA-256 |
+| --- | --- | --- | --- |
+| NotoSerif-Italic-latin1.woff2 | weight 400; U+0020–007E, U+00A0–00FF, U+2013–2014, U+2018–2019, U+201C–201D, U+2026 | 11464 | 9f950c9e9439445d096145d53dcb951ec3baa9d71efbd206a87c70d876e538dd |
+| NotoSerif-BoldItalic-compass.woff2 | weight 700; the letters of "East West North South" | 2072 | f39a880b7b95a001802b1cb02f3ae8ffea9e656065a54f8d3bbd43b833d6ded0 |
+| FrankRuhlLibre-Bold-letters.woff2 | weight 700; U+05D0–05EA (the 22 letters and 5 final forms) | 3424 | a8d45534f1361f1375491d4fa24e24d486620a783dbf9741b4c36b7529932de2 |
+
+[gd-hall.css](./gd-hall.css) declares them with URLs relative to itself;
+`scripts/gdHallCss.mjs` writes it from `GD_HALL_FONT_FILES`.

package/fonts/gd-hall.css

@@ -0,0 +1,3 @@
+@font-face{font-family:"GdHall Noto Serif";font-style:italic;font-weight:400;font-display:swap;src:url("./NotoSerif-Italic-latin1.woff2") format("woff2");unicode-range:U+20-7E, U+A0-FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2026}
+@font-face{font-family:"GdHall Noto Serif";font-style:italic;font-weight:700;font-display:swap;src:url("./NotoSerif-BoldItalic-compass.woff2") format("woff2");unicode-range:U+20, U+45, U+4E, U+53, U+57, U+61, U+65, U+68, U+6F, U+72-75}
+@font-face{font-family:"GdHall Frank Ruhl Libre";font-style:normal;font-weight:700;font-display:swap;src:url("./FrankRuhlLibre-Bold-letters.woff2") format("woff2");unicode-range:U+5D0-5EA}

package/lib/astrology/Kamea.d.ts

@@ -0,0 +1,75 @@
+import { type KameaPlanetId } from "magick-data/astrology/kameas";
+import type { CSSProperties, ReactNode } from "react";
+/** The square's side, in the figure's units; the figure is centred on 0,0. */
+export declare const KAMEA_SIDE = 96;
+/**
+ * Where a square's cells lie in the figure: what a drawing laid over the
+ * numbers (a planet's seal, or a sigil traced from cell to cell) needs to
+ * line up with them.
+ */
+export interface KameaGeometry {
+    /** Cells along a side: Saturn 3 … the Moon 9. */
+    order: number;
+    /** A cell's side, in the figure's units. */
+    cell: number;
+    /** A cell's centre, by its row from the top and its column from the left. */
+    center(row: number, column: number): [x: number, y: number];
+}
+/** The geometry of a square of `order` cells a side, in `KameaFigure`. */
+export declare function kameaGeometry(order: number): KameaGeometry;
+export interface KameaFigureProps {
+    /**
+     * The planet, by magick-data's id; without one, or with a name that is
+     * not one of the seven, an empty frame.
+     */
+    planet?: KameaPlanetId;
+    /** The numbers' font stack. */
+    fontFamily?: string;
+    /** The square's ground. */
+    paper?: string;
+    /** The frame, the rules and the numbers. */
+    ink?: string;
+    /**
+     * Drawn over the numbers, in the figure's units (centred on 0,0,
+     * `KAMEA_SIDE` across; `kameaGeometry` places the cells): room for a
+     * planet's seal or sigils to come.
+     */
+    children?: ReactNode;
+}
+/**
+ * The square as SVG elements, `KAMEA_SIDE` across and centred on the
+ * origin, for a drawing that places it itself (as the temple hall does);
+ * `Kamea` is the same in an `<svg>` of its own.
+ */
+export declare function KameaFigure({ planet, fontFamily, paper, ink, children, }: KameaFigureProps): import("react").JSX.Element;
+export interface KameaProps extends KameaFigureProps {
+    planet: KameaPlanetId;
+    /**
+     * The drawing's width (CSS pixels for a number); the height's when only
+     * that is given, as it is square, and 240 when neither is.
+     */
+    width?: number | string;
+    /**
+     * The drawing's height (CSS pixels for a number); the width's when only
+     * that is given, and 240 when neither is.
+     */
+    height?: number | string;
+    /**
+     * The drawing's accessible name: the square's own ("Kamea of Saturn")
+     * when not given, this one when a string. `false` marks it decorative,
+     * hidden from assistive technology (`aria-hidden`).
+     */
+    label?: string | false;
+    /** The `<svg>`'s class. */
+    className?: string;
+    /** The `<svg>`'s style. */
+    style?: CSSProperties;
+}
+/**
+ * A planet's kamea in an `<svg>` of its own, square, 240 across unless
+ * `width` or `height` says otherwise, the frame inset a little from the
+ * edge. It is an image named by its planet ("Kamea of Saturn") unless
+ * `label` names it otherwise or is false.
+ */
+export declare function Kamea({ width, height, label, className, style, ...figure }: KameaProps): import("react").JSX.Element;
+export default Kamea;

package/lib/astrology/Kamea.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import kameas from "magick-data/astrology/kameas";
+import planets from "magick-data/astrology/planets";
+import { svgCoordinate } from "../svgCoordinate.js";
+/*
+ * A planet's kamea (magic square) drawn from its numbers, which magick-data
+ * computes (`magick-data/astrology/kameas`): a frame, the grid's rules and
+ * each number in its cell. It writes no ids, links or stylesheet, so any
+ * number of squares can share a page or a drawing. Plan 061 ("Follow-ups
+ * after stage F"): the temple hall's `kamea` art wraps `KameaFigure`.
+ */
+/** The square's side, in the figure's units; the figure is centred on 0,0. */
+export const KAMEA_SIDE = 96;
+const FRAME = 2;
+const RULE = 0.6;
+/** The numbers' size, as a share of a cell. */
+const NUMBER_SIZE = 0.48;
+/** The geometry of a square of `order` cells a side, in `KameaFigure`. */
+export function kameaGeometry(order) {
+    const half = KAMEA_SIDE / 2;
+    const cell = KAMEA_SIDE / order;
+    return {
+        order,
+        cell,
+        center: (row, column) => [
+            -half + (column + 0.5) * cell,
+            -half + (row + 0.5) * cell,
+        ],
+    };
+}
+/**
+ * The square as SVG elements, `KAMEA_SIDE` across and centred on the
+ * origin, for a drawing that places it itself (as the temple hall does);
+ * `Kamea` is the same in an `<svg>` of its own.
+ */
+export function KameaFigure({ planet, fontFamily = "serif", paper = "#ffffff", ink = "#000000", children, }) {
+    const half = KAMEA_SIDE / 2;
+    const frame = (_jsx("rect", { x: -half, y: -half, width: KAMEA_SIDE, height: KAMEA_SIDE, fill: paper, stroke: ink, strokeWidth: FRAME }));
+    // Only the seven: a name from untrusted input ("constructor") is none.
+    const square = planet !== undefined && Object.hasOwn(kameas, planet)
+        ? kameas[planet]
+        : undefined;
+    if (!square)
+        return (_jsxs(_Fragment, { children: [frame, children] }));
+    const { order, cell, center } = kameaGeometry(square.length);
+    const size = cell * NUMBER_SIZE;
+    const rules = Array.from({ length: order - 1 }, (_, i) => svgCoordinate(-half + (i + 1) * cell));
+    return (_jsxs(_Fragment, { children: [frame, _jsx("path", { d: rules
+                    .map((at) => `M${at},${-half}V${half}M${-half},${at}H${half}`)
+                    .join(""), stroke: ink, strokeWidth: RULE, fill: "none" }), _jsx("g", { fill: ink, fontFamily: fontFamily, fontStyle: "italic", fontSize: svgCoordinate(size), textAnchor: "middle", children: square.flatMap((row, i) => row.map((value, j) => {
+                    const [x, y] = center(i, j);
+                    return (_jsx("text", { x: svgCoordinate(x), 
+                        // The digits' middle on the cell's: a third of the size down.
+                        y: svgCoordinate(y + size * 0.36), children: value }, value));
+                })) }), children] }));
+}
+/** The square's own name: "Kamea of Saturn", "Kamea of Sol". */
+function kameaName(planet) {
+    return planet !== undefined && Object.hasOwn(kameas, planet)
+        ? `Kamea of ${planets[planet].name.en.en}`
+        : "Kamea";
+}
+/**
+ * A planet's kamea in an `<svg>` of its own, square, 240 across unless
+ * `width` or `height` says otherwise, the frame inset a little from the
+ * edge. It is an image named by its planet ("Kamea of Saturn") unless
+ * `label` names it otherwise or is false.
+ */
+export function Kamea({ width, height, label, className, style, ...figure }) {
+    const name = label === undefined ? kameaName(figure.planet) : label || undefined;
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "-50 -50 100 100", width: width ?? height ?? 240, height: height ?? width ?? 240, className: className, style: style, role: name ? "img" : undefined, "aria-label": name, "aria-hidden": name ? undefined : true, children: _jsx(KameaFigure, { ...figure }) }));
+}
+export default Kamea;

package/lib/astrology/MercuryWidget.d.ts

@@ -0,0 +1,21 @@
+import { type ImgHTMLAttributes } from "react";
+export interface MercuryWidgetProps {
+    /** Space around the picture, as CSS `padding`. */
+    padding?: string;
+    /** The widget's background image, a URL, drawn to cover; none if omitted. */
+    background?: string;
+    /**
+     * Mercury's picture, drawn 85 px square and decorative: a URL, or `<img>`
+     * props for a responsive one (Next's `getImageProps()` gives them). None
+     * if omitted.
+     */
+    image?: string | ImgHTMLAttributes<HTMLImageElement>;
+}
+/**
+ * Mercury's next or current retrograde, worked out in the browser on today's
+ * date and shown in the reader's own date format, under a picture of the
+ * planet. Rendered on the server, it leaves a blank line where the dates
+ * go.
+ */
+export declare function MercuryWidget({ padding, background, image, }: MercuryWidgetProps): import("react").JSX.Element;
+export default MercuryWidget;

package/lib/astrology/MercuryWidget.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cssString } from "../cssString.js";
+const NARROW_CHARACTER = /[\p{sc=Latin}\p{sc=Cyrillic}\p{sc=Greek}\p{sc=Hebrew}\p{sc=Arabic}\p{sc=Common}\p{sc=Inherited}]/u;
+/**
+ * How many em a date label needs: 0.5 per character in the scripts above
+ * (digits and punctuation included) and 1 per other character. In Chromium
+ * no retrograde label in 79 locales was wider, though CJK and Indic labels
+ * come out smaller than they could be. Emoji or full-width characters would
+ * be wider, but the labels have none.
+ */
+function emWidth(text) {
+    let em = 0;
+    for (const char of text)
+        em += NARROW_CHARACTER.test(char) ? 0.5 : 1;
+    return em;
+}
+/**
+ * Mercury's next or current retrograde, worked out in the browser on today's
+ * date and shown in the reader's own date format, under a picture of the
+ * planet. Rendered on the server, it leaves a blank line where the dates
+ * go.
+ */
+export function MercuryWidget({ padding = "10px 0 2px 0", background, image, }) {
+    // The page is prerendered, and the dates depend on today's date, the
+    // viewer's zone and their date format, so they can't be in the HTML.
+    // undefined until the calculation answers, then the retrograde's dates
+    // as the viewer writes them, or null.
+    const [retrograde, setRetrograde] = useState();
+    useEffect(() => {
+        let current = true;
+        // The ephemeris is worth about 22kB gzipped, so it loads here rather
+        // than with the page.
+        const update = () => Promise.all([import("./mercuryRetrograde.js"), import("luxon")])
+            .then(([{ currentOrNextRetrograde }, { DateTime }]) => {
+            const d = (date) => DateTime.fromJSDate(date).toLocaleString({
+                month: "short",
+                day: "2-digit",
+            });
+            const found = currentOrNextRetrograde(new Date());
+            if (current)
+                setRetrograde(found ? { start: d(found.start), end: d(found.end) } : null);
+        })
+            .catch((error) => {
+            console.error(error);
+            if (current)
+                setRetrograde(null);
+        });
+        update();
+        // A tab left open for days would otherwise keep a finished retrograde.
+        const onVisible = () => {
+            if (document.visibilityState === "visible")
+                update();
+        };
+        document.addEventListener("visibilitychange", onVisible);
+        return () => {
+            current = false;
+            document.removeEventListener("visibilitychange", onVisible);
+        };
+    }, []);
+    let label = "\u00a0"; // keeps the label's line height
+    if (retrograde)
+        label = `Retro ${retrograde.start} – ${retrograde.end}`;
+    else if (retrograde === null)
+        label = "Retro dates unknown";
+    const fitCqi = Math.floor(1000 / emWidth(label)) / 10;
+    return (_jsxs("div", { style: {
+            textAlign: "center",
+            background: background ? `url(${cssString(background)})` : undefined,
+            backgroundSize: "cover",
+            height: "100%",
+            containerType: "inline-size",
+        }, children: [_jsx("div", { style: { padding }, children: image && (_jsx("img", { height: 85, width: 85, alt: "", ...(typeof image === "string" ? { src: image } : image) })) }), _jsx("div", { style: {
+                    color: "#cc5",
+                    fontSize: `min(1rem, ${fitCqi}cqi)`,
+                    whiteSpace: "nowrap",
+                }, children: label })] }));
+}
+export default MercuryWidget;

package/lib/astrology/Moon.d.ts

@@ -0,0 +1,32 @@
+/** Props of `Moon`. */
+export interface MoonProps {
+    /**
+     * The day whose phase to draw, worked out by `lune`. `phase`, when
+     * given, wins. An invalid `Date` throws a `RangeError`.
+     */
+    date?: Date;
+    /**
+     * The phase to draw, from 0 to 1 as `lune` gives it: 0 and 1 are new,
+     * 0.5 full; anything else throws a `RangeError`. With neither this nor
+     * `date`, only the unlit disc is drawn.
+     */
+    phase?: number;
+    /** The SVG's width; from the height and the drawing's shape when not given. */
+    width?: string | number;
+    /** The SVG's height; from the width and the drawing's shape when not given. */
+    height?: string | number;
+    /**
+     * The hemisphere it is seen from, which turns the Moon as it looks from
+     * there: `north` by default.
+     */
+    hemisphere?: "north" | "south";
+}
+/**
+ * The Moon in a phase, lit in gold on its unlit disc with a soft glow,
+ * turned as it looks from either hemisphere: a phase you give, or a
+ * date's. It needs no browser, so it renders on the server; today's phase
+ * is a date the page knows. Its glow's id comes from `useId`, so several
+ * can share a page.
+ */
+export declare function Moon({ date, phase, width, height, hemisphere, }: MoonProps): import("react").JSX.Element;
+export default Moon;

package/lib/astrology/Moon.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*!
+ * The unlit disc's path is adapted from phase_junk() in moon-phase.js:
+ * https://github.com/tingletech/moon-phase/blob/643015a83509ca6a662d1af6e1ac14661852cedb/moon-phase.js
+ * Copyright (c) 2012, Regents of the University of California.
+ * All rights reserved. Used under the BSD 3-Clause License, whose
+ * conditions and disclaimer are in this package's LICENSE.txt; this file
+ * is under that licence as well as MIT.
+ */
+import lune from "lune";
+import { useId } from "react";
+import { MOON_MEAN_INCLINATION, moonPath } from "./moonPath.js";
+/** The middle of the drawing's viewBox (`0 0 170 162`), which it turns about. */
+const CENTER = "85 81";
+/** Whether `date` is a `Date` holding a time, not an invalid one. */
+const validDate = (date) => date instanceof Date && Number.isFinite(date.getTime());
+/**
+ * The Moon in a phase, lit in gold on its unlit disc with a soft glow,
+ * turned as it looks from either hemisphere: a phase you give, or a
+ * date's. It needs no browser, so it renders on the server; today's phase
+ * is a date the page knows. Its glow's id comes from `useId`, so several
+ * can share a page.
+ */
+export function Moon({ date, phase, width, height, hemisphere = "north", }) {
+    // Its own glow filter, so that two moons on a page do not share an id.
+    const glow = `moon-glow-${useId().replace(/[^A-Za-z0-9_-]/g, "_")}`;
+    if (phase !== undefined && !(phase >= 0 && phase <= 1))
+        throw new RangeError(`Moon: phase ${phase} is not between 0 and 1`);
+    // lune never returns for an invalid date: its solution of Kepler's
+    // equation loops until it converges, and NaN never does.
+    if (phase === undefined && date !== undefined && !validDate(date))
+        throw new RangeError(`Moon: date is not a valid Date (${String(date)})`);
+    const drawn = phase ?? (date === undefined ? undefined : lune.phase(date).phase);
+    const inclination = hemisphere === "south"
+        ? 180 - MOON_MEAN_INCLINATION
+        : MOON_MEAN_INCLINATION;
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "0 0 170 162", width: width, height: height, children: [_jsx("defs", { children: _jsxs("filter", { id: glow, children: [_jsx("feGaussianBlur", { stdDeviation: "5", result: "coloredBlur" }), _jsxs("feMerge", { children: [_jsx("feMergeNode", { in: "coloredBlur" }), _jsx("feMergeNode", { in: "SourceGraphic" })] })] }) }), _jsxs("g", { transform: `rotate(${inclination} ${CENTER})`, children: [_jsx("path", { className: "back", d: "m85,5 a20,20 0 1,1 0,150 a20,20 0 1,1 0,-150", style: { fill: "white", filter: `url(#${glow})` } }), _jsx("path", { className: "back", d: "m85,5 a20,20 0 1,1 0,150 a20,20 0 1,1 0,-150", style: { fill: "black" } }), drawn === undefined ? null : (_jsx("path", { className: "moon", d: moonPath(drawn), style: { fill: "#ebc815" } }))] })] }));
+}
+export default Moon;

package/lib/astrology/MoonWidget.d.ts

@@ -0,0 +1,20 @@
+/** Props of the Moon widget. */
+export interface MoonWidgetProps {
+    /** Space around the drawing, inside the background, as CSS `padding`. */
+    padding?: string;
+    /**
+     * The viewer's latitude in degrees, south negative: south of the
+     * equator, the moon is drawn turned as it is seen from there.
+     */
+    latitude?: number;
+    /** The widget's background image, a URL, drawn to cover; none if omitted. */
+    background?: string;
+}
+/**
+ * Today's moon in a tile, with its phase's name: `Moon` drawn as it looks
+ * from the viewer's hemisphere, as from the north unless `latitude` puts
+ * the viewer south of the equator. The phase is worked out in the
+ * browser, so the server's HTML draws the unlit disc.
+ */
+export declare function MoonWidget({ padding, latitude, background, }: MoonWidgetProps): import("react").JSX.Element;
+export default MoonWidget;

package/lib/astrology/MoonWidget.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import lune from "lune";
+import { cssString } from "../cssString.js";
+import useHydrated from "../hooks/useHydrated.js";
+import { Moon } from "./Moon.js";
+function moonPhaseName(phase) {
+    if (phase === 0.5)
+        return "full-moon";
+    if (phase > 0.5) {
+        if (phase === 0.75)
+            return "last-quarter";
+        if (phase > 0.75)
+            return "waning-crescent";
+        return "waning-gibbous";
+    }
+    else {
+        if (phase === 0)
+            return "new-moon";
+        if (phase === 0.25)
+            return "first-quarter";
+        if (phase > 0.25)
+            return "waxing-gibbous";
+        return "waxing-crescent";
+    }
+}
+const namesLocal = {
+    en: {
+        "new-moon": "New Moon",
+        "waxing-crescent": "Waxing Crescent",
+        "first-quarter": "First Quarter",
+        "waxing-gibbous": "Waxing Gibbous",
+        "full-moon": "Full Moon",
+        "waning-gibbous": "Waning Gibbous",
+        "last-quarter": "Last Quarter",
+        "waning-crescent": "Waning Crescent",
+    },
+};
+// magick.ly passes the reader's place as `latitude` (plan 072).
+/**
+ * Today's moon in a tile, with its phase's name: `Moon` drawn as it looks
+ * from the viewer's hemisphere, as from the north unless `latitude` puts
+ * the viewer south of the equator. The phase is worked out in the
+ * browser, so the server's HTML draws the unlit disc.
+ */
+export function MoonWidget({ padding = "10px 0 2px 0", latitude, background, }) {
+    // Pages with this widget are prerendered at build time, so the server can't
+    // know today's phase. Hydrate with the unlit disc, then draw the phase.
+    const hydrated = useHydrated();
+    const phaseValue = hydrated ? lune.phase(new Date()).phase : undefined;
+    const phaseNameLocal = phaseValue === undefined
+        ? "\u00a0" // keeps the label's line height
+        : namesLocal.en[moonPhaseName(phaseValue)];
+    // Northern (and the equator) unless the place is known to be south.
+    const northernHemisphere = latitude === undefined || latitude >= 0;
+    return (_jsxs("div", { style: {
+            textAlign: "center",
+            background: background ? `url(${cssString(background)})` : undefined,
+            backgroundSize: "cover",
+            height: "100%",
+        }, children: [_jsx("div", { style: { padding: padding }, children: _jsx(Moon, { phase: phaseValue, height: "85", hemisphere: northernHemisphere ? "north" : "south" }) }), _jsx("div", { style: { color: "#cc5" }, children: phaseNameLocal })] }));
+}
+export default MoonWidget;

package/lib/astrology/PlanetarySpirit.d.ts

@@ -0,0 +1,103 @@
+import type { CSSProperties } from "react";
+/**
+ * The geomantic sigils of the seven planetary spirits, whom geomancy calls
+ * the Rulers of the figures: Zazel (Saturn), Hismael (Jupiter), Bartzabel
+ * (Mars), Sorath (the Sun), Kedemel (Venus), Taphthartharath (Mercury) and
+ * Chasmodai (the Moon). They are not the spirits' seals that Agrippa prints
+ * with the planets' tables (*De occulta philosophia*, 1533, II.22), which
+ * are other figures.
+ *
+ * Drawn after the earliest printing found of them, John Heydon,
+ * *Theomagia, or The Temple of Wisdome*, vol. 1 (London, 1663/4), book I,
+ * chapter 5, the table of the figures' Rulers and Genii; the Getty Research
+ * Institute's copy on archive.org, `theomagiaortempl00heyd`: p. 13 (leaf
+ * n124) and p. 15 (n126). Book I, chapter 13, p. 46 (n157) prints them
+ * again, with Mercury's, the Sun's and Venus' in other forms; the Golden
+ * Dawn's later forms descend from those of pp. 13 and 15. Each sigil
+ * below names the figure it follows.
+ *
+ * Our own drawing, not a tracing: each is a few hand-placed strokes of one
+ * width on a grid of 100 laid over the printed figure, with round ends. The
+ * viewBox is the stroke's extent, plus a unit. Copyright Gadi Cohen, MIT
+ * like the rest of the package.
+ */
+declare const SIGILS: {
+    /** Mars: a tail ending in a spiral; Heydon, p. 13 (n124), first row. */
+    readonly bartzabel: {
+        readonly viewBox: "16 33 67 39";
+        readonly d: string;
+    };
+    /** Venus: a heart whose lobes curl in; p. 13 (n124), fourth row. */
+    readonly kedemel: {
+        readonly viewBox: "24 25 54 55";
+        readonly d: string;
+    };
+    /** Mercury: a bar and an upright over a cross; p. 13 (n124), second row. */
+    readonly taphthartharath: {
+        readonly viewBox: "17 19 68 61";
+        readonly d: "M23 24V38M23 31H62V75M22 45V59M22 52H80M80 42V56M57 75H68";
+    };
+    /** The Moon: like a 5; p. 13 (n124), third row. */
+    readonly chasmodai: {
+        readonly viewBox: "23 20 56 63";
+        readonly d: "M74 25L32 40C42 43 52 50 56 58C58 66 54 74 45 77C38 79 32 78 28 76";
+    };
+    /**
+     * The Sun: an upright with a foot, crossed by a bar that curls back on
+     * the left and runs into a long stroke on the right; p. 13 (n124), fifth
+     * row, and p. 15 (n126).
+     */
+    readonly sorath: {
+        readonly viewBox: "23 17 68 65";
+        readonly d: string;
+    };
+    /** Jupiter: two strokes meeting in a point; p. 15 (n126), first row. */
+    readonly hismael: {
+        readonly viewBox: "19 20 63 56";
+        readonly d: "M24 35C38 48 54 60 77 71M49 25L70 69";
+    };
+    /**
+     * Saturn: a half-moon with a dot, its straight side up to the right;
+     * p. 15 (n126), fourth row. The dot is a stroke one unit long, which
+     * its round ends make a dot, so the sigil is one stroke in one colour (a
+     * tiny stroked circle would do, but some renderers leave its centre
+     * open).
+     */
+    readonly zazel: {
+        readonly viewBox: "25 17 56 59";
+        readonly d: string;
+    };
+};
+/** A planetary spirit with a sigil: `bartzabel`, `kedemel`, … */
+export type PlanetarySpiritId = keyof typeof SIGILS;
+/** Every spirit with a sigil. */
+export declare const PLANETARY_SPIRIT_IDS: PlanetarySpiritId[];
+/** Whether `id` names a spirit this module draws. */
+export declare const isPlanetarySpiritId: (id: string) => id is PlanetarySpiritId;
+/** Props of `PlanetarySpirit`. */
+export interface PlanetarySpiritProps {
+    /**
+     * The spirit (its figures' Ruler), by its `PlanetarySpiritId`, in lower
+     * case; none, or an id with no sigil, draws nothing.
+     */
+    spirit?: string;
+    /** The box's class. */
+    className?: string;
+    /** The box's style, over its own `display: flex` and centring. */
+    style?: CSSProperties;
+    /**
+     * The sigil's stroke, a CSS colour such as a theme's custom property
+     * (`var(--my-ink, black)`); black by default. It is set as the path's
+     * style, over its `stroke="#000"` attribute.
+     * @default "#000"
+     */
+    ink?: string;
+    /** Hides the sigil from assistive technology when the text names it. */
+    "aria-hidden"?: boolean;
+}
+/**
+ * A planetary spirit's geomantic sigil, centred in a flex box as tall as its
+ * container allows.
+ */
+export declare function PlanetarySpirit({ spirit, className, style, ink, "aria-hidden": ariaHidden, }: PlanetarySpiritProps): import("react").JSX.Element | null;
+export default PlanetarySpirit;

package/lib/astrology/PlanetarySpirit.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The geomantic sigils of the seven planetary spirits, whom geomancy calls
+ * the Rulers of the figures: Zazel (Saturn), Hismael (Jupiter), Bartzabel
+ * (Mars), Sorath (the Sun), Kedemel (Venus), Taphthartharath (Mercury) and
+ * Chasmodai (the Moon). They are not the spirits' seals that Agrippa prints
+ * with the planets' tables (*De occulta philosophia*, 1533, II.22), which
+ * are other figures.
+ *
+ * Drawn after the earliest printing found of them, John Heydon,
+ * *Theomagia, or The Temple of Wisdome*, vol. 1 (London, 1663/4), book I,
+ * chapter 5, the table of the figures' Rulers and Genii; the Getty Research
+ * Institute's copy on archive.org, `theomagiaortempl00heyd`: p. 13 (leaf
+ * n124) and p. 15 (n126). Book I, chapter 13, p. 46 (n157) prints them
+ * again, with Mercury's, the Sun's and Venus' in other forms; the Golden
+ * Dawn's later forms descend from those of pp. 13 and 15. Each sigil
+ * below names the figure it follows.
+ *
+ * Our own drawing, not a tracing: each is a few hand-placed strokes of one
+ * width on a grid of 100 laid over the printed figure, with round ends. The
+ * viewBox is the stroke's extent, plus a unit. Copyright Gadi Cohen, MIT
+ * like the rest of the package.
+ */
+const SIGILS = {
+    /** Mars: a tail ending in a spiral; Heydon, p. 13 (n124), first row. */
+    bartzabel: {
+        viewBox: "16 33 67 39",
+        d: "M27 64C22 64 20 60 21 55C22 50 28 49 34 50C42 51 46 56 51 61" +
+            "C55 65 60 67 66 67C74 67 79 60 78 51C77 43 71 38 65 38" +
+            "C60 38 57 43 58 48C59 53 63 55 66 54",
+    },
+    /** Venus: a heart whose lobes curl in; p. 13 (n124), fourth row. */
+    kedemel: {
+        viewBox: "24 25 54 55",
+        d: "M55 44C51 39 53 31 58 30C64 29 67 35 69 43C70 52 72 64 73 75" +
+            "C62 72 47 66 38 58C31 52 29 45 29 39C29 33 33 30 38 30" +
+            "C43 31 46 36 48 43",
+    },
+    /** Mercury: a bar and an upright over a cross; p. 13 (n124), second row. */
+    taphthartharath: {
+        viewBox: "17 19 68 61",
+        d: "M23 24V38M23 31H62V75M22 45V59M22 52H80M80 42V56M57 75H68",
+    },
+    /** The Moon: like a 5; p. 13 (n124), third row. */
+    chasmodai: {
+        viewBox: "23 20 56 63",
+        d: "M74 25L32 40C42 43 52 50 56 58C58 66 54 74 45 77C38 79 32 78 28 76",
+    },
+    /**
+     * The Sun: an upright with a foot, crossed by a bar that curls back on
+     * the left and runs into a long stroke on the right; p. 13 (n124), fifth
+     * row, and p. 15 (n126).
+     */
+    sorath: {
+        viewBox: "23 17 68 65",
+        d: "M57 22H65M59 22L61 68H53" +
+            "M43 55C38 60 29 57 28 49C27 42 35 39 42 41C50 43 55 46 62 46" +
+            "C70 46 77 44 81 38M84 26C82 38 85 50 86 62C87 72 83 77 76 77",
+    },
+    /** Jupiter: two strokes meeting in a point; p. 15 (n126), first row. */
+    hismael: {
+        viewBox: "19 20 63 56",
+        d: "M24 35C38 48 54 60 77 71M49 25L70 69",
+    },
+    /**
+     * Saturn: a half-moon with a dot, its straight side up to the right;
+     * p. 15 (n126), fourth row. The dot is a stroke one unit long, which
+     * its round ends make a dot, so the sigil is one stroke in one colour (a
+     * tiny stroked circle would do, but some renderers leave its centre
+     * open).
+     */
+    zazel: {
+        viewBox: "25 17 56 59",
+        d: "M41 22C32 31 28 46 30 58C32 67 40 71 50 71C60 71 70 69 76 64Z" +
+            "M43.5 51H44.5",
+    },
+};
+/** The sigils' stroke, in units of the grid of 100 they are drawn on. */
+const STROKE_WIDTH = 7;
+/** Every spirit with a sigil. */
+export const PLANETARY_SPIRIT_IDS = Object.keys(SIGILS);
+/** Whether `id` names a spirit this module draws. */
+export const isPlanetarySpiritId = (id) => Object.hasOwn(SIGILS, id);
+function Sigil({ spirit, ink, ...props }) {
+    const { viewBox, d } = SIGILS[spirit];
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: viewBox, ...props, children: _jsx("path", { d: d, fill: "none", stroke: "#000", style: ink === undefined ? undefined : { stroke: ink }, strokeWidth: STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+/**
+ * A planetary spirit's geomantic sigil, centred in a flex box as tall as its
+ * container allows.
+ */
+export function PlanetarySpirit({ spirit, className, style, ink, "aria-hidden": ariaHidden, }) {
+    if (spirit === undefined || !isPlanetarySpiritId(spirit))
+        return null;
+    return (_jsx("div", { "aria-hidden": ariaHidden, className: className, style: {
+            display: "flex",
+            alignContent: "center",
+            justifyContent: "center",
+            ...style,
+        }, children: _jsx(Sigil, { spirit: spirit, ink: ink, height: "100%" }) }));
+}
+export default PlanetarySpirit;