magick-components 0.0.0-stage → 0.1.0

package/lib/gd/FylfotCross.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import elements from "magick-data/alchemy/elements";
+import planets from "magick-data/astrology/planets";
+import zodiac from "magick-data/astrology/zodiac";
+const colorFromElement = {
+    fire: "red",
+    water: "blue",
+    air: "yellow",
+    earth: "#333",
+};
+const flashingColorFromColor = {
+    red: "green",
+    blue: "yellow",
+    yellow: "purple",
+    "#333": "red",
+};
+function elementFromPos(row, col) {
+    if (row < 2)
+        return col < 3 ? "fire" : "water";
+    if (row === 2) {
+        if (col === 2)
+            return "sol";
+        return col < 2 ? "earth" : "water";
+    }
+    if (row > 2)
+        return col < 2 ? "earth" : "air";
+    return "invalid-position";
+}
+/**
+ * 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 const FYLFOT_CELLS = [
+    ["fire", "sagittarius", "leo", null, "water"],
+    [null, null, "aries", null, "pisces"],
+    ["taurus", "capricorn", "sol", "cancer", "scorpio"],
+    ["virgo", null, "libra", null, null],
+    ["earth", null, "aquarius", "gemini", "air"],
+];
+/** The tables the squares' symbols come from. */
+const TABLES = { planet: planets, element: elements, zodiac };
+/** The magick-data table a symbol of the cross is a row of. */
+export function fylfotSymbolTable(id) {
+    if (id === "sol")
+        return "planet";
+    if (["earth", "air", "water", "fire"].includes(id))
+        return "element";
+    return "zodiac";
+}
+/**
+ * The table's class, which scopes its stylesheet: a plain `<style>`, so the
+ * component needs no CSS tooling (it was Next's styled-jsx in the app).
+ */
+const CLASS = "magick-fylfot-cross";
+/** The custom property `ink` sets on the table, which the borders read. */
+const INK = "--magick-fylfot-cross-ink";
+const STYLE = `
+.${CLASS} {
+  margin: 20px auto;
+  border-collapse: collapse;
+}
+.${CLASS} td {
+  width: 1.5em;
+  font-size: 200%;
+  text-align: center;
+  vertical-align: middle;
+}
+.${CLASS} td:not(:empty) {
+  border: 1px solid var(${INK}, black);
+}
+`;
+/** The fylfot cross of the signs and elements, as a table of squares. */
+export function FylfotCross({ cells = FYLFOT_CELLS, onCellClick, showColors = true, ink, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: STYLE }), _jsx("table", { className: CLASS, style: ink === undefined ? undefined : { [INK]: ink }, children: _jsx("tbody", { children: cells.map((row, rowIndex) => (_jsx("tr", { children: row.map((id, colIndex) => {
+                            const expected = FYLFOT_CELLS[rowIndex]?.[colIndex] ?? null;
+                            const isCorrect = id === expected;
+                            const onClick = onCellClick && id !== null && id !== "cursor"
+                                ? () => onCellClick({
+                                    id,
+                                    row: rowIndex,
+                                    column: colIndex,
+                                    expected,
+                                })
+                                : undefined;
+                            let background = undefined;
+                            let color = undefined;
+                            const opacity = isCorrect ? 1 : 0.5;
+                            if (showColors && id !== "sol") {
+                                const element = elementFromPos(rowIndex, colIndex);
+                                background = colorFromElement[element];
+                                color = flashingColorFromColor[background];
+                            }
+                            const style = { background, color, opacity };
+                            if (id === null)
+                                return _jsx("td", {}, colIndex);
+                            if (id === "")
+                                return (_jsx("td", { onClick: onClick, style: {
+                                        ...style,
+                                        cursor: onCellClick ? "pointer" : undefined,
+                                    }, children: "\u00A0" }, colIndex));
+                            if (id === "cursor")
+                                return (_jsx("td", { style: {
+                                        ...style,
+                                        border: "2px solid " + (showColors ? color : "red"),
+                                    }, children: "\u00A0" }, colIndex));
+                            const item = TABLES[fylfotSymbolTable(id)][id];
+                            // console.log([id, type, item]);
+                            return (_jsx("td", { onClick: onClick, style: {
+                                    ...style,
+                                    cursor: onCellClick ? "pointer" : undefined,
+                                    // Inline, so no page font overrides it; a value with
+                                    // `!important` React drops on the client.
+                                    fontFamily: "monospace",
+                                }, children: 
+                                // U+FE0E is Unicode Variation Selector VS15,
+                                // i.e. prefer text character to emoji, so
+                                // we can style it ourselves.
+                                item.symbol + "\uFE0E" }, colIndex));
+                        }) }, rowIndex))) }) })] }));
+}
+export default FylfotCross;

package/lib/gd/GradeTree.d.ts

@@ -0,0 +1,10 @@
+import { type TreeOfLifeProps } from "../kabbalah/TreeOfLife.tsx";
+/**
+ * The Tree of Life as the map of the Golden Dawn's grades: each sphere
+ * labelled with its grade's number and name, with the grade's element,
+ * order and planet below. Like the Tree, it links nothing unless given
+ * `sephirahHref` or `pathHref` (a sphere's row names its grade as
+ * `gdGradeId`). Any of `TreeOfLife`'s props override these.
+ */
+export declare function GradeTree({ ...props }: TreeOfLifeProps): import("react").JSX.Element;
+export default GradeTree;

package/lib/gd/GradeTree.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TreeOfLife } from "../kabbalah/TreeOfLife.js";
+/*
+ * The Tree with each sephirah numbered and named by its grade.
+ *
+ * A Server Component, as every page that draws it is (/gd through Tiles,
+ * /gd/grades and each grade's page). Nothing here needs the client, and
+ * marked "use client" it carried the barrel the Tree reads into those
+ * routes' client chunks (plan 036, decision 10).
+ */
+/**
+ * The Tree of Life as the map of the Golden Dawn's grades: each sphere
+ * labelled with its grade's number and name, with the grade's element,
+ * order and planet below. Like the Tree, it links nothing unless given
+ * `sephirahHref` or `pathHref` (a sphere's row names its grade as
+ * `gdGradeId`). Any of `TreeOfLife`'s props override these.
+ */
+export function GradeTree({ ...props }) {
+    return (_jsx(TreeOfLife, { field: "gdGrade.id", topText: "gdGrade.name", bottomText: "gdGrade.element.symbol,gdGrade.orderId,gdGrade.planet.symbol", ...props }));
+}
+export default GradeTree;

package/lib/gd/Lamen.d.ts

@@ -0,0 +1,31 @@
+import type * as React from "react";
+/** The officers whose lamen `Lamen` draws; any other draws the same plain one. */
+export declare const LAMEN_OFFICERS: ReadonlySet<string>;
+/**
+ * A Golden Dawn officer's lamen: the collar's ring, the disc and the
+ * officer's glyph, in a −50…50 box. It defines no ids, so any number can
+ * share a page.
+ */
+export declare function Lamen({ officer, grade, width, height, ringStyle, discStyle, }: {
+    /**
+     * The officer, in camel case (`hierophant`, `pastHierophant`,
+     * `chiefAdept`; `LAMEN_OFFICERS` lists them). Any other draws a plain
+     * lamen, and an empty one the Hierophant's.
+     */
+    officer: string;
+    /**
+     * The grade whose lamen to draw, for an officer who wears another in it:
+     * `portal` for the Portal's Hiereus and Hegemon. Otherwise the Outer
+     * Order's lamen.
+     */
+    grade?: string;
+    /** The SVG's width; from the height when not given, as it is square. */
+    width?: number | string;
+    /** The SVG's height; from the width when not given, as it is square. */
+    height?: number | string;
+    /** Style for the collar's ring, the outer circle. */
+    ringStyle?: React.CSSProperties;
+    /** Style for the disc, the inner circle. */
+    discStyle?: React.CSSProperties;
+}): React.JSX.Element;
+export default Lamen;

package/lib/gd/Lamen.js

@@ -0,0 +1,317 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flipped } from "./hall/art/geometry.js";
+import { CupOnOctagram, PortalHegemon, PortalHiereus, RoseCross, TriangleInPentagram, } from "./lamenGlyphs.js";
+/**
+ * Lamens bearing the Calvary cross, by officer. The Hierophant is not a
+ * Temple Chief but has the Imperator's cross. Looked up in a `Map`, so an
+ * officer name such as "constructor" is simply not found.
+ *
+ * The ring shows the officer's collar, by Gadi's own convention, so the
+ * roles stay distinguishable even as 20 px ritual role icons: Imperator
+ * red, Praemonstrator blue, Cancellarius yellow on a purple disc,
+ * Hierophant red and white stripes, Past Hierophant white, every lamen
+ * the same size. The sources differ: Regardie (*The Golden Dawn*) hangs
+ * the Hierophant's lamen from a white collar, the Imperator's scarlet,
+ * the Praemonstrator's blue and the Cancellarius' purple, and gives the
+ * Past Hierophant only "a Jewel of that Lamen"; the Ciceros paint the
+ * ring in the cross's colour and draw the Past Hierophant's lamen
+ * smaller; red and white stripes are the Hierophant's nemyss in Zalewski
+ * and in the Ciceros.
+ *
+ * Sources, by title, edition and page (plan 061, decision 9):
+ * - Israel Regardie, *The Golden Dawn*, vol. 3 (Aries Press, 1939), Z.1:
+ *   pp. 82–84, the Chiefs' lamens and collars and "a Jewel of that Lamen"
+ *   for a Past Hierophant; pp. 88–90, the Hierophant's lamen on a white
+ *   collar.
+ * - Pat Zalewski, *Secret Teachings of the Golden Dawn, Book 1: The
+ *   Neophyte Ritual 0=0* (Llewellyn, 1991): p. 76, the Hierophant's
+ *   scarlet-and-white-striped nemyss; p. 78 (Fig. 26), the lamen drawn
+ *   with an outer ring; p. 87, Whare Ra's white-field variant.
+ * - Chic and Sandra Tabatha Cicero, *Secrets of a Golden Dawn Temple*
+ *   (Thoth, 2004): pp. 80–81, the collars and the Past Hierophant's
+ *   smaller lamen; pp. 96–97, the ring in the charge colour.
+ */
+const CROSS_LAMENS = new Map([
+    ["imperator", { ring: "red", disc: "green" }],
+    ["praemonstrator", { ring: "#48f", disc: "orange" }],
+    ["cancellarius", { ring: "yellow", disc: "#b5b" }],
+    ["hierophant", { ring: "stripes", disc: "green", cross: "red" }],
+    ["pastHierophant", { ring: "white", disc: "green", cross: "red" }],
+]);
+/**
+ * The adepts' lamens, from the Portal's rubric (Regardie, *The Golden
+ * Dawn*, vol. 2, Aries Press, 1938, p. 156; archive.org
+ * `IsraelRegardie-TheGoldenDawn-Vol2-1938`, leaf n149): the Chief Adept's
+ * Rose-Cross on a yellow collar, the Second Adept's red triangle in a
+ * green pentagram on a white one, the Third Adept's blue cup on an orange
+ * octagram on a blue one. The ring shows the collar, as for the Chiefs;
+ * the Third Adept's blue is the Praemonstrator's. These are the Portal's
+ * lamens only: in a 5=6 hall, under the same role names, the Adepts wear
+ * the Rose-Cross, the Second's and Third's by inference
+ * (`lamenGrades.ts`).
+ */
+const GLYPH_LAMENS = new Map([
+    ["chiefAdept", { ring: "yellow", Glyph: RoseCross }],
+    ["secondAdept", { ring: "white", Glyph: TriangleInPentagram }],
+    ["thirdAdept", { ring: "#48f", Glyph: CupOnOctagram }],
+]);
+/**
+ * The lamens an officer wears in a particular grade instead of the Outer
+ * Order's, by `grade:officer` (`lamenGrades.ts`), from the Portal's
+ * rubric (Regardie 1938, vol. 2, p.156, leaf n149). The Hiereus wears a
+ * white hexagram on the four colours of Malkuth. His ring is red: the
+ * p.156 list gives him two collars and no cloak ("Black Collar", then
+ * "Red Shoes and Collar"), and we read "Black Collar" as a misprint for
+ * "Black Cloak", which keeps the Outer Order's scarlet collar (Z.1,
+ * vol. 3, pp.92–93, leaves n84–85). Should Gadi choose black instead,
+ * the ring becomes a dark grey (about `#333`) with the usual outline.
+ * The Hegemon wears a red and blue hexagram on a white ground, on a
+ * yellow collar.
+ */
+const GRADE_LAMENS = new Map([
+    ["portal:hiereus", { ring: "red", Glyph: PortalHiereus }],
+    ["portal:hegemon", { ring: "yellow", disc: "white", Glyph: PortalHegemon }],
+]);
+/**
+ * The Hegemon's Calvary cross is black on a white disc: "the black
+ * Calvary Cross" on a black collar (Regardie, *The Golden Dawn*, vol. 3,
+ * Aries Press, 1939, Z.1, p. 95; archive.org
+ * `IsraelRegardie-TheGoldenDawn-Vol3-1939`, leaf n87), and Mathers'
+ * manuscript sheet of the lamens has a black cross on white with a black
+ * border. The other floor officers' glyphs are white on black. His ring
+ * stays white, as every floor officer's, rather than his black collar's,
+ * which would vanish into the outline: the rings are our convention.
+ */
+const HEGEMON_DISC = "white";
+const HEGEMON_CROSS = "#000";
+/** The officers whose lamen `Lamen` draws; any other draws the same plain one. */
+export const LAMEN_OFFICERS = new Set([
+    ...CROSS_LAMENS.keys(),
+    ...GLYPH_LAMENS.keys(),
+    "hegemon",
+    "hiereus",
+    "stolistes",
+    "dadouchos",
+    "keryx",
+    "sentinel",
+]);
+/** The ring's outer radius, inside the −50…50 viewBox; the disc's is 42. */
+const RING_RADIUS = 49;
+/** Height of each of the Hierophant's ring stripes, in lamen units. */
+const STRIPE = 8;
+/**
+ * The part of the ring's disc between heights `a` and `b`, as a path: the
+ * two arcs of the circle and the chords joining them.
+ */
+function discSlab(a, b, r = RING_RADIUS) {
+    const top = Math.max(a, -r);
+    const bottom = Math.min(b, r);
+    const half = (y) => +Math.sqrt(r * r - y * y).toFixed(3);
+    const [xt, xb] = [half(top), half(bottom)];
+    return `M${xt} ${top}A${r} ${r} 0 0 1 ${xb} ${bottom}H${-xb}A${r} ${r} 0 0 1 ${-xt} ${top}Z`;
+}
+/**
+ * The white stripes of the Hierophant's ring, drawn over its red fill: a
+ * red stripe is centred on the horizontal diameter, so the ring is
+ * symmetric top to bottom (red, then white, every 8 units outward). Plain
+ * geometry under the disc rather than a `<pattern>`, so the lamen defines
+ * no ids and any number of them can share a page, inside a hall's `<defs>`
+ * or in renderers without hooks.
+ */
+const RING_STRIPES = [1, 3, 5]
+    .flatMap((n) => [
+    discSlab((n - 0.5) * STRIPE, (n + 0.5) * STRIPE),
+    discSlab(-(n + 0.5) * STRIPE, -(n - 0.5) * STRIPE),
+])
+    .join("");
+const TipharethCalvaryCross = ({ style, scale = 7.5, }) => (_jsx("path", { d: "M -1.1 -4.8 v.708a3.045 3.045 0 0 0-1.842 1.806h-.64v2.02h.601a3.045 3.045 0 0 0 1.881 1.91v3.134h2.02v-3.14a3.045 3.045 0 0 0 1.867-1.904h.615v-2.02h-.653a3.045 3.045 0 0 0-1.829-1.8v-.714zm2.02 1.256a2.534 2.534 0 0 1 1.285 1.258h-1.285zm-2.02 0v1.258h-1.292a2.534 2.534 0 0 1 1.292-1.257zm-1.334 3.278h1.334v1.361a2.534 2.534 0 0 1-1.334-1.36zm3.354 0h1.329a2.534 2.534 0 0 1-1.329 1.362z", style: {
+        fill: "red",
+        stroke: "black",
+        strokeWidth: 1 / scale - 0.05,
+        ...style,
+    }, transform: "scale(" + scale + ")" }));
+/**
+ * The caduceus of the Keryx's lamen, drawn from geometry in lamen units
+ * (plan 061, stage H, part 2, follow-ups: Gadi chose wings V1 with two
+ * turns of the serpents on 26 October 2026). A pointed staff topped by a
+ * ringed ball, two wings, and two serpents wound round the staff as a
+ * double helix seen a little from above, their heads turned outward
+ * below the wings.
+ *
+ * Each serpent winds `x = A(u)·sin θ` from the tail (u = 0) to the neck
+ * (u = 1), with a small tilt `TILT · dy/dθ · cos θ` added to y that
+ * rounds the loops. The reach `A` falls towards the tail, the turning
+ * rate rises there (the coils tighten), and the body thins arc by arc.
+ * The serpent is cut into half-turn arcs where it turns at a side: the
+ * arcs behind (cos θ < 0) are drawn under the staff, those in front over
+ * it on a band of the disc's black, so the depth settles every crossing.
+ * Each arc is a few Hermite cubics through eighth-turn knots, rounded to
+ * one decimal: no ids, no gradients.
+ */
+const TURNS = 2;
+/** The body's width at the neck, and the share of it left at the tail. */
+const BODY = 5;
+const THIN = 0.6;
+/** The black edge either side of a front arc and of the staff. */
+const EDGE = 1.25;
+/** The widest swing, at the neck, and the share of it left at the tail. */
+const REACH = 12;
+const TAPER = 0.4;
+/** How much faster the coils turn at the tail than at the neck (+90%). */
+const TIGHTEN = 0.9;
+const TAIL = 35;
+const NECK = -10;
+const TILT = 0.3;
+/** Knots per serpent: one every eighth of a turn. */
+const KNOTS = TURNS * 8;
+const r1 = (value) => Math.round(value * 10) / 10 + 0;
+const xy = ([x, y]) => `${r1(x)},${r1(y)}`;
+/**
+ * How far along the serpent (u, tail 0 to neck 1) it has made `share` of
+ * its turns, the turning rate falling linearly from 1 + TIGHTEN at the
+ * tail to 1 at the neck.
+ */
+const along = (share) => (1 +
+    TIGHTEN -
+    Math.sqrt((1 + TIGHTEN) ** 2 - 2 * TIGHTEN * share * (1 + TIGHTEN / 2))) /
+    TIGHTEN;
+/** The angle at `share` of the turns: π/2 at the neck (and the tail). */
+const angle = (side, share) => Math.PI / 2 + 2 * Math.PI * TURNS * (share - 1) + (side < 0 ? Math.PI : 0);
+/** A serpent's centre line at `share` of its turns. */
+function coil(side, share) {
+    const u = along(share);
+    const theta = angle(side, share);
+    // dy/dθ: how far the coil falls per radian here.
+    const pitch = ((NECK - TAIL) * (1 + TIGHTEN / 2)) /
+        ((1 + TIGHTEN - TIGHTEN * u) * 2 * Math.PI * TURNS);
+    return [
+        REACH * (TAPER + (1 - TAPER) * u) * Math.sin(theta),
+        TAIL + (NECK - TAIL) * u + TILT * pitch * Math.cos(theta),
+    ];
+}
+/** The centre line from share `a` to `b` in `pieces` Hermite cubics. */
+function coilPath(side, a, b, pieces) {
+    const tangent = (share) => {
+        const h = 1e-4;
+        const [p, q] = [coil(side, share - h), coil(side, share + h)];
+        return [(q[0] - p[0]) / (2 * h), (q[1] - p[1]) / (2 * h)];
+    };
+    let d = `M${xy(coil(side, a))}`;
+    for (let i = 0; i < pieces; i++) {
+        const [s0, s1] = [
+            a + ((b - a) * i) / pieces,
+            a + ((b - a) * (i + 1)) / pieces,
+        ];
+        const k = (s1 - s0) / 3;
+        const [p0, p1, t0, t1] = [
+            coil(side, s0),
+            coil(side, s1),
+            tangent(s0),
+            tangent(s1),
+        ];
+        d += `C${xy([p0[0] + t0[0] * k, p0[1] + t0[1] * k])} ${xy([p1[0] - t1[0] * k, p1[1] - t1[1] * k])} ${xy(p1)}`;
+    }
+    return d;
+}
+const BEHIND = [];
+const IN_FRONT = [];
+/** Each head: its centre, and the angle it leans out. */
+const HEADS = [];
+for (const side of [1, -1]) {
+    // Half-turn arcs, from one side turn to the next: the tail is at a side
+    // too, as TURNS is whole.
+    for (let i = 0; i < KNOTS; i += 4) {
+        const [a, b] = [i / KNOTS, (i + 4) / KNOTS];
+        const width = r1(BODY * (THIN + (1 - THIN) * along((a + b) / 2)));
+        const d = coilPath(side, a, b, 4);
+        if (Math.cos(angle(side, (a + b) / 2)) < 0)
+            BEHIND.push({ d, width });
+        else {
+            // The black band only over the arc's middle, where it crosses the
+            // staff and the other serpent, clear of the turns at the sides.
+            const trim = (b - a) * 0.17;
+            IN_FRONT.push({
+                d: coilPath(side, a + trim, b - trim, 3),
+                width: width + 2 * EDGE,
+                band: true,
+            }, { d, width });
+        }
+    }
+    // The neck rises and leans outward to the head.
+    const [x, y] = coil(side, 1);
+    const [hx, hy] = [x + side * 2.6, y - 3];
+    IN_FRONT.push({
+        d: `M${xy([x, y])}Q${xy([x + side * 0.3, y - 2.2])} ${xy([hx, hy])}`,
+        width: BODY,
+    });
+    HEADS.push({ cx: r1(hx + side * 1.2), cy: r1(hy - 1), lean: -side * 35 });
+}
+/** The staff, pointed at the foot, its top hidden by the ball. */
+const STAFF = "M-1.7,-26H1.7V36L0,38.4L-1.7,36Z";
+/**
+ * One wing (the right), in lamen units; flipped for the left. Design V1
+ * ("Arch"): the top edge leaves the ball's side, dips under it (the notch
+ * the ball's ring closes), rises to a crest beside the ball and falls to
+ * a far, low tip; the underside is flat, cut into four round feathers.
+ */
+const WING = "M0,-24.5Q3.8,-20.4 6,-21C9.5,-22.5 9,-30.6 14,-31Q25.8,-25.2 35.5,-16.5C35.5,-14.4 30.9,-13.8 29.3,-16.6C29.3,-13.6 24.1,-13 22.5,-16.2C22.5,-13.2 16.7,-12.6 15.1,-15.8C15.1,-12.8 8.6,-12.2 7,-15.4Q2.4,-14.9 0,-19Z";
+const WINGS = WING + flipped(WING);
+/** The Keryx's caduceus, white on the black disc, in lamen units. */
+function Caduceus() {
+    const strokes = (list) => list.map(({ d, width, band }) => band ? (_jsx("path", { d: d, stroke: "black", strokeWidth: width, strokeLinecap: "butt" }, `b${d}`)) : (_jsx("path", { d: d, strokeWidth: width }, d)));
+    return (_jsxs("g", { fill: "white", children: [_jsxs("g", { fill: "none", stroke: "white", strokeLinecap: "round", children: [strokes(BEHIND), _jsx("path", { d: STAFF, fill: "white", stroke: "black", strokeWidth: 2 * EDGE, paintOrder: "stroke" }), strokes(IN_FRONT)] }), _jsx("path", { d: WINGS }), _jsx("g", { stroke: "black", strokeWidth: 1.2, children: HEADS.map(({ cx, cy, lean }) => (_jsx("ellipse", { cx: cx, cy: cy, rx: r1(BODY * 0.9), ry: r1(BODY * 0.6), transform: `rotate(${lean} ${cx} ${cy})` }, lean))) }), _jsx("circle", { cy: -27, r: 4.8, stroke: "black", strokeWidth: 1.6 })] }));
+}
+/**
+ * The Sentinel's Eye of Horus (the wedjat), drawn from a few strokes after
+ * its ancient form (plan 061, stage H): the brow, the eye with its pupil,
+ * the line from the outer corner, the drop and the spiral. White on the
+ * black disc.
+ */
+function EyeOfHorus() {
+    return (_jsxs("g", { transform: "translate(-2 2)", fill: "white", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M-30,-19C-16,-28 12,-29 33,-22L33,-16C12,-23 -16,-22 -30,-14Z", stroke: "none" }), _jsx("path", { d: "M-30,-3C-18,-15 10,-16 26,-5C12,3 -16,5 -30,-3Z", fill: "none", strokeWidth: 4.2 }), _jsx("path", { d: "M26,-5H38", strokeWidth: 4.6 }), _jsx("circle", { cx: -3, cy: -6.5, r: 7.2, stroke: "none" }), _jsx("path", { d: "M-11,1.5L-14,1.5L-13,28L-11.6,30Z", stroke: "none" }), _jsx("path", { d: "M2,2C5,15 13,22 22,22C30,22 32,13 26,11C21.5,9.5 19,14 22.5,16", fill: "none", strokeWidth: 4 })] }));
+}
+// Every lamen is drawn for magick.ly: the Keryx's caduceus and the
+// Sentinel's Eye of Horus from geometry since stage H of plan 061 (they
+// were an SVG Repo icon and a game-icons.net path before), the adepts'
+// since its second part.
+/**
+ * A Golden Dawn officer's lamen: the collar's ring, the disc and the
+ * officer's glyph, in a −50…50 box. It defines no ids, so any number can
+ * share a page.
+ */
+export function Lamen({ officer, grade, width, height, ringStyle, discStyle, }) {
+    if (!officer)
+        officer = "hierophant";
+    const gradeLamen = grade === undefined ? undefined : GRADE_LAMENS.get(`${grade}:${officer}`);
+    // A grade's own lamen replaces the officer's white-on-black glyph.
+    const glyph = gradeLamen ? "" : officer;
+    const crossLamen = CROSS_LAMENS.get(officer);
+    const glyphLamen = gradeLamen ?? GLYPH_LAMENS.get(officer);
+    const _ringStyle = {
+        color: "#000",
+        overflow: "visible",
+        fill: crossLamen?.ring === "stripes"
+            ? "red"
+            : (crossLamen?.ring ?? glyphLamen?.ring ?? "white"),
+        stroke: "#000",
+        strokeWidth: 1,
+        strokeDasharray: "none",
+        paintOrder: "stroke fill markers",
+        stopColor: "#000",
+        ...ringStyle,
+    };
+    const _discStyle = {
+        color: "#000",
+        overflow: "visible",
+        fill: crossLamen?.disc ??
+            glyphLamen?.disc ??
+            (glyph === "hegemon" ? HEGEMON_DISC : "#000"),
+        stroke: "#000",
+        strokeWidth: 1,
+        paintOrder: "stroke fill markers",
+        stopColor: "#000",
+        ...discStyle,
+    };
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", xmlSpace: "preserve", width: width, height: height, viewBox: "-50 -50 100 100", children: [_jsx("circle", { cx: 0, cy: 0, r: RING_RADIUS, style: _ringStyle }), crossLamen?.ring === "stripes" && _jsx("path", { d: RING_STRIPES, fill: "white" }), _jsx("circle", { cx: 0, cy: 0, r: 42, style: _discStyle }), crossLamen && (_jsx(TipharethCalvaryCross, { style: { fill: crossLamen.cross ?? crossLamen.ring } })), glyph === "hegemon" && (_jsx("path", { d: "M 0 0 h2.482v2.02h-2.482v5.043h-2.02v-5.043h-2.482v-2.02h2.481v-2.515h2.02z", style: { fill: HEGEMON_CROSS }, transform: "scale(7.2) translate(1,-2.2)" })), glyph === "hiereus" && (_jsx("path", { d: "m114.746 96.37-4.93 8.54h9.86zm0 2.13 3.087 5.346h-6.174z", style: { fill: "white" }, transform: "scale(6) translate(-114.7,-101.5)" })), glyph === "stolistes" && (_jsx("path", { d: "M79.292 93.798H69.273l5.002-6.66zm-2.397-8.903a2.62 2.62 0 0 1-2.62 2.62 2.62 2.62 0 0 1-2.622-2.62 2.62 2.62 0 0 1 2.621-2.62 2.62 2.62 0 0 1 2.621 2.62zm-9.152-10.753H80.81c-.448 4.994-3.182 7.714-6.523 8.346-3.279-.596-6.12-3.083-6.544-8.346z", style: { fill: "white" }, transform: "scale(3.3) translate(-74.2,-83.5)" })), glyph === "dadouchos" && (_jsx("path", { d: "M30.12 92.248V88.65h3.598v3.598zm0-3.587v-3.597h3.598v3.597zm0-3.587v-3.597h3.598v3.597zm3.587 0v-3.597h3.597v3.597zm3.587 0v-3.597h3.597v3.597zm10.767 7.174h-3.597V88.65h3.597zm-3.587 0h-3.597V88.65h3.597zm-3.587 0H37.29V88.65h3.597zm0-3.587H37.29v-3.597h3.597zm0-3.587H37.29v-3.597h3.597zM48.061 74.3v3.597h-3.597v-3.597zm0 3.587v3.597h-3.597v-3.597zm0 3.587v3.597h-3.597v-3.597zm-3.587 0v3.597h-3.597v-3.597zm-3.587 0v3.597H37.29v-3.597Zm-10.766-7.182h3.597v3.597H30.12Zm3.586 0h3.598v3.597h-3.598zm3.587 0h3.597v3.597h-3.597zm0 3.587h3.597v3.597h-3.597zm0 3.587h3.597v3.597h-3.597z", style: { fill: "white" }, transform: "scale(2.9) translate(-39,-83.5)" })), glyph === "keryx" && _jsx(Caduceus, {}), glyph === "sentinel" && _jsx(EyeOfHorus, {}), glyphLamen && _jsx(glyphLamen.Glyph, {})] }));
+}
+export default Lamen;

package/lib/gd/RoseSigil.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import { type RoseVersionId } from "./roseSigilGeometry.ts";
+export interface RoseSigilProps {
+    /**
+     * The text to draw. Final forms are drawn as their base letters, and
+     * anything not one of the 22 letters (spaces, points, Latin) is left out.
+     */
+    text: string;
+    /** Draws the rose's three rings of letters behind the sigil. */
+    showRose?: boolean;
+    /**
+     * Which rose the sigil is traced on (`ROSE_VERSIONS`): the Golden
+     * Dawn's (`gd`) when not given or not a version, or Regardie's of 1939
+     * (`regardie1939`), which exchanges Kaph and Tau. `ROSE_VERSION_NOTES`
+     * says where each comes from.
+     */
+    version?: RoseVersionId;
+    /** Draws the connecting path on, once the layout is optimised. */
+    animate?: boolean;
+    /** The `<svg>`, for exporting the drawing. */
+    ref?: React.Ref<SVGSVGElement>;
+}
+/**
+ * The rose-cross sigil of a Hebrew text, drawn through the letters' places
+ * on the rose. It renders the letter centres first, on the server too, then
+ * spreads repeated and aligned letters with the optimiser once in the
+ * browser, and draws the path on. A client component: the server-safe
+ * drawing is `RoseSigilImage`.
+ */
+export declare function RoseSigil({ text, showRose, version, animate, ref, }: RoseSigilProps): React.JSX.Element;
+export default RoseSigil;

package/lib/gd/RoseSigil.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { RoseSigilImage } from "./RoseSigilImage.js";
+import { sigilPoints, } from "./roseSigilGeometry.js";
+import { optimizeSigilPoints } from "./roseSigilOptimizer.js";
+/**
+ * The rose-cross sigil of a Hebrew text, drawn through the letters' places
+ * on the rose. It renders the letter centres first, on the server too, then
+ * spreads repeated and aligned letters with the optimiser once in the
+ * browser, and draws the path on. A client component: the server-safe
+ * drawing is `RoseSigilImage`.
+ */
+export function RoseSigil({ text, showRose = true, version, animate = true, ref, }) {
+    const pathRef = React.useRef(null);
+    // useId yields ":r1:"-style ids; CSS identifiers need the colons removed.
+    const animation = `rose-sigil-draw-${React.useId().replace(/[^\w-]/g, "")}`;
+    const points = React.useMemo(() => sigilPoints(text, version), [text, version]);
+    const [optimized, setOptimized] = React.useState(null);
+    React.useEffect(() => {
+        if (!points.length)
+            return;
+        let cancelled = false;
+        optimizeSigilPoints(points).then((result) => {
+            if (!cancelled)
+                setOptimized(result);
+        }, 
+        // Without the optimiser (its WASM failed to load) the sigil keeps
+        // the letter centres it was first drawn with.
+        (error) => console.error(error));
+        return () => {
+            cancelled = true;
+        };
+    }, [points]);
+    React.useEffect(() => {
+        if (pathRef.current && optimized) {
+            const length = pathRef.current.getTotalLength();
+            pathRef.current.style.strokeDasharray = animate ? length.toString() : "";
+            pathRef.current.style.strokeDashoffset = animate ? length.toString() : "";
+            pathRef.current.classList.remove(animation);
+            // @ts-expect-error: trick to trigger reflow
+            void pathRef.current.offsetWidth;
+            if (animate)
+                pathRef.current.classList.add(animation);
+        }
+    }, [animate, animation, optimized]);
+    return (_jsx(RoseSigilImage, { text: text, showRose: showRose, version: version, debug: false, points: optimized || points, animation: animate ? animation : undefined, ref: ref, pathRef: pathRef }));
+}
+export default RoseSigil;

package/lib/gd/RoseSigilImage.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import { type RoseVersionId, type SigilPoint } from "./roseSigilInternals.ts";
+export interface RoseSigilImageProps {
+    /**
+     * The text to draw. Final forms are drawn as their base letters, and
+     * anything not one of the 22 letters (spaces, points, Latin) is left out.
+     */
+    text: string;
+    /** Draws the rose's three rings of letters behind the sigil (default true). */
+    showRose?: boolean;
+    /**
+     * Which rose (`ROSE_VERSIONS`): the Golden Dawn's (`gd`) when not given
+     * or not a version, or Regardie's of 1939 (`regardie1939`), which
+     * exchanges Kaph and Tau. Give the `points` of the same version.
+     */
+    version?: RoseVersionId;
+    /** Draws each letter's circle and the unoptimised path too (default false). */
+    debug?: boolean;
+    /** Letter centres to draw through; the optimised layout when available. */
+    points: SigilPoint[];
+    /**
+     * Draw-on animation class for the connecting path, unique per instance
+     * because a `<style>` inside inline SVG is document-wide; server renders
+     * never animate.
+     */
+    animation?: string;
+    /** The `<svg>`, for exporting the drawing. */
+    ref?: React.Ref<SVGSVGElement>;
+    /** The connecting path, which `RoseSigil` animates. */
+    pathRef?: React.Ref<SVGPathElement>;
+}
+/**
+ * The sigil's artwork with no hooks, so that a server-side renderer can
+ * draw it with React's server build; `RoseSigil` adds the optimiser and
+ * the animation around it.
+ */
+export declare function RoseSigilImage({ text, showRose, version, debug, points, animation, ref, pathRef, }: RoseSigilImageProps): React.JSX.Element;
+export default RoseSigilImage;

package/lib/gd/RoseSigilImage.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { svgCoordinate } from "../svgCoordinate.js";
+import { letterPoint, pathFromPoints, roseLetters, roseRings, sigilPoints, } from "./roseSigilInternals.js";
+const roseStrokeColor = "rgba(0,0,0,.4)";
+/**
+ * The sigil's artwork with no hooks, so that a server-side renderer can
+ * draw it with React's server build; `RoseSigil` adds the optimiser and
+ * the animation around it.
+ */
+export function RoseSigilImage({ text, showRose = true, version, debug = false, points, animation, ref, pathRef, }) {
+    const sigilTokens = roseLetters(text);
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", viewBox: "-50 -50 100 100", ref: ref, children: [animation && (_jsx("style", { children: `.${animation} { animation: ${animation} ${sigilTokens.length / 4}s linear 0s forwards 1; }
+@keyframes ${animation} { to { stroke-dashoffset: 0; } }` })), showRose && (_jsxs(_Fragment, { children: [" ", _jsx("circle", { cx: 0, cy: 0, r: 10, stroke: roseStrokeColor, strokeWidth: 0.5, fill: "none" }), roseRings(version).map((row, i) => (_jsxs(React.Fragment, { children: [_jsx("circle", { cx: 0, cy: 0, r: 10 * (i + 2), stroke: roseStrokeColor, strokeWidth: 0.5, fill: "none" }), row.map((letter) => {
+                                // Labels sit on the letter centres the path is drawn through.
+                                const center = letterPoint(letter, version);
+                                const x = svgCoordinate(center.x);
+                                const y = svgCoordinate(center.y);
+                                return (_jsxs(React.Fragment, { children: [debug && (_jsx("circle", { cx: x, cy: y, r: 5, stroke: roseStrokeColor, strokeWidth: 0.5, strokeDasharray: 0.2, fill: "none" })), _jsx("text", { x: x, y: y, fill: roseStrokeColor, textAnchor: "middle", fontSize: 10, dominantBaseline: "middle", children: letter })] }, letter));
+                            })] }, row.join(""))))] })), debug && (_jsx("path", { 
+                // Letter centres before optimisation
+                stroke: "#aa0", fill: "none", d: pathFromPoints({
+                    points: sigilPoints(text, version),
+                    sigilTokens,
+                }) })), _jsx("path", { 
+                // Connecting path
+                stroke: "red", fill: "none", ref: pathRef, d: pathFromPoints({ points, sigilTokens }) })] }));
+}
+export default RoseSigilImage;