magick-components 0.0.0-stage → 0.1.0

package/lib/gd/hall/GdHall.js

@@ -0,0 +1,147 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo, } from "react";
+import { svgCoordinate } from "../../svgCoordinate.js";
+import { DEFAULT_HALL_ART } from "./art/index.js";
+import { Placeholder } from "./art/placeholder.js";
+import { PALETTE } from "./art/shared.js";
+import { GD_HALL_FONT_STACKS, gdHallFontFaceCss } from "./fonts.js";
+import { FLOOR_SIZE, FLOOR_STROKE, resolveHall, WALL_GAP, WALL_STROKE, } from "./layout.js";
+/** SVG user units per checker square: text stays at a large font size. */
+const UNIT = 100;
+const u = (squares) => svgCoordinate(squares * UNIT);
+const EMPTY_HALL = { type: "gdHall" };
+const labelTextStyle = {
+    fontVariantLigatures: "none",
+    fontKerning: "normal",
+};
+function Lines({ label }) {
+    return (_jsx(_Fragment, { children: label.lines.map((line, index) => (_jsx("text", { x: u(line.x), y: u(line.y), fontSize: u(label.size), textAnchor: label.anchor, children: line.text }, index))) }));
+}
+function Chrome({ hall, checker, gradient, }) {
+    const { outer } = hall;
+    // With no dais band (dais=0) the East wall stands at the floor's edge.
+    const daisBand = outer.y0 < -WALL_GAP;
+    const doorBands = hall.doors.map((door) => {
+        // Cover the floor outline, the gap and the wall line on that side; on
+        // the East, behind a dais, only the wall line.
+        const pad = WALL_STROKE;
+        const across = door.side === "west"
+            ? [FLOOR_SIZE - pad, outer.y1 + pad]
+            : door.side === "east"
+                ? [outer.y0 - pad, daisBand ? outer.y0 + pad : pad]
+                : door.side === "north"
+                    ? [outer.x0 - pad, pad]
+                    : [FLOOR_SIZE - pad, outer.x1 + pad];
+        const vertical = door.side === "north" || door.side === "south";
+        return vertical
+            ? { x0: across[0], x1: across[1], y0: door.from, y1: door.to }
+            : { x0: door.from, x1: door.to, y0: across[0], y1: across[1] };
+    });
+    return (_jsxs("g", { children: [_jsx("rect", { x: u(outer.x0), y: u(outer.y0), width: u(outer.x1 - outer.x0), height: u(outer.y1 - outer.y0), fill: hall.wall === "gradient" ? `url(#${gradient})` : PALETTE.paper, stroke: PALETTE.ink, strokeWidth: u(WALL_STROKE) }), _jsx("rect", { x: 0, y: 0, width: u(FLOOR_SIZE), height: u(FLOOR_SIZE), fill: `url(#${checker})`, stroke: PALETTE.ink, strokeWidth: u(FLOOR_STROKE) }), doorBands.map((band, index) => (_jsx("rect", { x: u(band.x0), y: u(band.y0), width: u(band.x1 - band.x0), height: u(band.y1 - band.y0), fill: PALETTE.paper }, index)))] }));
+}
+/** Text drawn over an object's art, in the labels' face. */
+function Inner({ label }) {
+    return (_jsx("g", { fontFamily: GD_HALL_FONT_STACKS.serif, fontStyle: "italic", fill: PALETTE.ink, style: labelTextStyle, children: _jsx(Lines, { label: label }) }));
+}
+/**
+ * The hall's distinct drawings and which one each object uses. Objects
+ * whose art, box and variant agree share one drawing, placed with `<use>`,
+ * so a drawing's size counts once per hall however many nodes use it
+ * (plan 061, decision 12). Ids follow the objects' order, so they are the
+ * same on the server and the client.
+ */
+function artDefinitions(objects, art, id) {
+    const definitions = new Map();
+    const uses = new Map();
+    for (const object of objects) {
+        if (object.text)
+            continue;
+        const drawn = object.missing ? undefined : art.get(object.artKey);
+        const key = drawn
+            ? JSON.stringify([
+                "art",
+                object.artKey,
+                object.box.width,
+                object.box.height,
+                drawn.variant(object.node),
+            ])
+            : JSON.stringify(["placeholder", object.artKey]);
+        let definition = definitions.get(key);
+        if (!definition) {
+            definition = { id: `${id}-art${definitions.size}`, object, art: drawn };
+            definitions.set(key, definition);
+        }
+        uses.set(object, definition.id);
+    }
+    return { definitions: [...definitions.values()], uses };
+}
+/** A drawing in `<defs>`, centred on the origin in its art units. */
+function ArtDefinitionGroup({ definition }) {
+    const { id, object, art } = definition;
+    return (_jsx("g", { id: id, children: art ? (_jsx(art.Component, { node: object.node, box: object.box, defId: (name) => `${id}-${name}` })) : (_jsx(Placeholder, { name: object.artKey })) }));
+}
+/** An object: its drawing placed and scaled, and any text over it. */
+function HallObject({ object, use, }) {
+    if (object.text || use === undefined)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("use", { href: `#${use}`, transform: `translate(${u(object.cx)} ${u(object.cy)}) scale(${svgCoordinate(object.k * UNIT)})` }), object.inner && _jsx(Inner, { label: object.inner })] }));
+}
+/**
+ * The hall a node draws: itself when it is a `gdHall`, an empty hall for
+ * anything else.
+ */
+export function hallRoot(hall) {
+    return typeof hall === "object" && hall !== null && hall.type === "gdHall"
+        ? hall
+        : EMPTY_HALL;
+}
+/** A resolved viewBox in SVG units, as `GdHallSvg` writes it. */
+export function hallViewBox(resolved, image = false) {
+    const { viewBox } = resolved;
+    if (!image)
+        return [
+            u(viewBox.x0),
+            u(viewBox.y0),
+            u(viewBox.x1 - viewBox.x0),
+            u(viewBox.y1 - viewBox.y0),
+        ];
+    const x0 = Math.floor(u(viewBox.x0));
+    const y0 = Math.floor(u(viewBox.y0));
+    return [x0, y0, Math.ceil(u(viewBox.x1)) - x0, Math.ceil(u(viewBox.y1)) - y0];
+}
+/**
+ * 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 function GdHallSvg({ resolved, art, idPrefix: id, drawings, fontCss, image = false, className, style, width, height, ref, }) {
+    const { definitions, uses } = drawings ?? artDefinitions(resolved.objects, art, id);
+    const box = hallViewBox(resolved, image);
+    const titleId = `${id}-title`;
+    const checker = `${id}-checker`;
+    const gradient = `${id}-wall`;
+    return (_jsxs("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: box.join(" "), role: image ? undefined : "img", "aria-labelledby": image ? undefined : titleId, className: className, style: style, width: width, height: height, children: [!image && (_jsx("title", { id: titleId, children: resolved.captionText ?? "Temple hall" })), fontCss && _jsx("style", { children: fontCss }), _jsxs("defs", { children: [_jsxs("pattern", { id: checker, width: 2 * UNIT, height: 2 * UNIT, patternUnits: "userSpaceOnUse", children: [_jsx("rect", { width: 2 * UNIT, height: 2 * UNIT, fill: PALETTE.checkerLight }), _jsx("rect", { width: UNIT, height: UNIT, fill: PALETTE.checkerDark }), _jsx("rect", { x: UNIT, y: UNIT, width: UNIT, height: UNIT, fill: PALETTE.checkerDark })] }), resolved.wall === "gradient" && (_jsxs("linearGradient", { id: gradient, x1: 0, x2: 0, y1: 0, y2: 1, children: [_jsx("stop", { offset: 0.13, stopColor: PALETTE.paper }), _jsx("stop", { offset: 1, stopColor: PALETTE.ink })] })), definitions.map((definition) => (_jsx(ArtDefinitionGroup, { definition: definition }, definition.id)))] }), _jsx("rect", { x: box[0], y: box[1], width: box[2], height: box[3], fill: PALETTE.paper }), _jsx(Chrome, { hall: resolved, checker: checker, gradient: gradient }), resolved.objects.map((object) => (_jsx(HallObject, { object: object, use: uses.get(object) }, object.path.join(".")))), _jsxs("g", { fontFamily: GD_HALL_FONT_STACKS.serif, fontStyle: "italic", fill: PALETTE.ink, style: labelTextStyle, children: [resolved.objects
+                        .filter((object) => object.text || object.labels.length > 0)
+                        .map((object) => (_jsxs("g", { children: [object.text && _jsx(Lines, { label: object.text }), object.labels.map((label, index) => (_jsx(Lines, { label: label }, index)))] }, object.path.join(".")))), resolved.compass.map((label) => (_jsx("text", { x: u(label.x), y: u(label.y), fontSize: u(label.size), fontWeight: 700, textAnchor: "middle", transform: label.rotate === 0
+                            ? undefined
+                            : `rotate(${label.rotate} ${u(label.x)} ${u(label.y)})`, children: label.text }, label.text))), resolved.caption && _jsx(Lines, { label: resolved.caption })] })] }));
+}
+// Plan 061 in the magick.ly repository designs the hall and its renderer.
+/**
+ * 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 function GdHall({ hall, art = DEFAULT_HALL_ART, fontBaseUrl, className, style, width, height, ref, }) {
+    const id = useId().replace(/[^A-Za-z0-9_-]/g, "_");
+    const root = hallRoot(hall);
+    const resolved = useMemo(() => resolveHall(root, { art }), [root, art]);
+    const drawings = useMemo(() => artDefinitions(resolved.objects, art, id), [resolved, art, id]);
+    const fontCss = useMemo(() => fontBaseUrl === undefined ? undefined : gdHallFontFaceCss(fontBaseUrl), [fontBaseUrl]);
+    return (_jsx(GdHallSvg, { resolved: resolved, art: art, idPrefix: id, drawings: drawings, fontCss: fontCss, className: className, style: style, width: width, height: height, ref: ref }));
+}
+export default GdHall;

package/lib/gd/hall/art/altar.d.ts

@@ -0,0 +1,8 @@
+import type { HallArt } from "../types.ts";
+export declare const provenance: import("../types.ts").HallArtProvenance;
+/**
+ * The altar: a black 2 × 2-square top, or a white one (`kind="white"`,
+ * the Portal's small white altar, sized by `scale`), and a host for what
+ * lies on it.
+ */
+export declare const altarArt: HallArt;

package/lib/gd/hall/art/altar.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { enumAttr } from "../attributes.js";
+import { ALTAR_KINDS } from "../vocabulary.js";
+import { original, PALETTE, variantOf } from "./shared.js";
+export const provenance = original("The altar seen from above: the black double cube as a black square, as " +
+    "in the drawings, or the small white altar as a white one.");
+const kindOf = (node) => enumAttr(node, "kind", ALTAR_KINDS) ?? "black";
+function Altar({ node }) {
+    return kindOf(node) === "white" ? (_jsx("rect", { x: -48, y: -48, width: 96, height: 96, fill: PALETTE.paper, stroke: PALETTE.ink, strokeWidth: 4 })) : (_jsx("rect", { x: -50, y: -50, width: 100, height: 100, fill: PALETTE.ink }));
+}
+/**
+ * The altar: a black 2 × 2-square top, or a white one (`kind="white"`,
+ * the Portal's small white altar, sized by `scale`), and a host for what
+ * lies on it.
+ */
+export const altarArt = {
+    Component: Altar,
+    box: { width: 100, height: 100 },
+    variant: (node) => variantOf(kindOf(node)),
+    provenance,
+};

package/lib/gd/hall/art/altarItems.d.ts

@@ -0,0 +1,20 @@
+import type { HallArt } from "../types.ts";
+/**
+ * The rose, the salt, the bread and the fan (plan 061, stage H): flat
+ * emblems in the hall's palette with the items' one outline, drawn into
+ * the boxes the old drawings' items had (decision 4).
+ */
+export declare const roseProvenance: import("../types.ts").HallArtProvenance;
+export declare const saltProvenance: import("../types.ts").HallArtProvenance;
+export declare const breadProvenance: import("../types.ts").HallArtProvenance;
+export declare const fanProvenance: import("../types.ts").HallArtProvenance;
+/** Every art module exports its provenance; these share a module. */
+export declare const provenance: import("../types.ts").HallArtProvenance[];
+/** The rose (`item(kind="rose")`), laid East–West, 100 × 36.35. */
+export declare const roseArt: HallArt;
+/** The salt (`item(kind="salt")`): a shaker, 42.41 × 100. */
+export declare const saltArt: HallArt;
+/** The bread (`item(kind="bread")`): a round loaf, 100 × 100. */
+export declare const breadArt: HallArt;
+/** The fan (`item(kind="fan")`), open, 100 × 62.79. */
+export declare const fanArt: HallArt;

package/lib/gd/hall/art/altarItems.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { mirrored, pathPoint, polar } from "./geometry.js";
+import { HIGHLIGHT, ITEM_DETAIL, ITEM_OUTLINE, original, PALETTE, sameForEveryNode, } from "./shared.js";
+/**
+ * The rose, the salt, the bread and the fan (plan 061, stage H): flat
+ * emblems in the hall's palette with the items' one outline, drawn into
+ * the boxes the old drawings' items had (decision 4).
+ */
+export const roseProvenance = original("A heraldic rose laid down: five petals over five, the barbs between " +
+    "them and the seed, on a stem with two leaves and two thorns, drawn " +
+    "from circles and curves.");
+export const saltProvenance = original("A salt shaker drawn from geometry: a pierced silver cap on a glass of " +
+    "salt marked with salt's alchemical sign.");
+export const breadProvenance = original("A round loaf drawn from curves, its crust scored three times.");
+export const fanProvenance = original("A folding fan in Air's yellow, drawn from geometry: twelve ribs about " +
+    "a rivet, the leaf scalloped between them.");
+/** Every art module exports its provenance; these share a module. */
+export const provenance = [
+    roseProvenance,
+    saltProvenance,
+    breadProvenance,
+    fanProvenance,
+];
+const p = pathPoint;
+const PETALS = [0, 1, 2, 3, 4];
+/** The rose's head: centred on the stem's East end, radius 15.5. */
+const HEAD = [-31.5, 0];
+const K = 15.5 / 18;
+/** The petals, outer then inner, as [x, y, r]. */
+const ROSE_PETALS = [
+    ...PETALS.map((i) => [...polar(9 * K, -90 + i * 72, HEAD), 8.6 * K]),
+    ...PETALS.map((i) => [...polar(4.6 * K, -54 + i * 72, HEAD), 5.6 * K]),
+].map((values) => values.map((value) => Math.round(value * 100) / 100));
+/** The barbs between the outer petals, as one path. */
+const ROSE_BARBS = PETALS.map((i) => {
+    const angle = -54 + i * 72;
+    const tip = polar(19.5 * K, angle, HEAD);
+    return `M${p(polar(12 * K, angle - 14, HEAD))}L${p(tip)}L${p(polar(12 * K, angle + 14, HEAD))}Z`;
+}).join("");
+/** A leaf, two quadratic curves from `base` out along `angle`. */
+function leaf(base, angle, length) {
+    const middle = polar(length * 0.45, angle, base);
+    const side = (turn) => p(polar(length * 0.36, angle + turn, middle));
+    const tip = p(polar(length, angle, base));
+    return `M${p(base)}Q${side(-90)} ${tip}Q${side(90)} ${p(base)}Z`;
+}
+const ROSE_STEM = "M-16,1C0,5 20,-4 46,2";
+const ROSE_LEAVES = leaf([6, 2.6], 60, 13) + leaf([24, -0.3], -55, 13);
+const ROSE_THORNS = "M9.5,2.3L12,6.8L14.5,2.3ZM29.5,-0.2L32,-4.7L34.5,-0.2Z";
+/** The rose (`item(kind="rose")`), laid East–West, 100 × 36.35. */
+export const roseArt = {
+    Component: () => (_jsxs("g", { ...ITEM_OUTLINE, strokeWidth: ITEM_DETAIL, children: [_jsx("path", { d: ROSE_STEM, fill: "none", strokeWidth: 7 }), _jsx("path", { d: ROSE_STEM, fill: "none", stroke: PALETTE.green, strokeWidth: 3.4 }), _jsx("path", { d: ROSE_THORNS, fill: PALETTE.green, strokeWidth: 1.2 }), _jsx("path", { d: ROSE_LEAVES, fill: PALETTE.green }), _jsx("path", { d: ROSE_BARBS, fill: PALETTE.green, strokeWidth: 1.6 }), ROSE_PETALS.map(([cx, cy, r]) => (_jsx("circle", { cx: cx, cy: cy, r: r, fill: PALETTE.rose }, `${cx},${cy}`))), _jsx("circle", { cx: HEAD[0], cy: HEAD[1], r: 3.1, fill: PALETTE.gold, strokeWidth: 1.6 })] })),
+    box: { width: 100, height: 36.35 },
+    variant: sameForEveryNode,
+    provenance: roseProvenance,
+};
+const SALT_GLASS = mirrored([0, -27], [
+    { to: [15, -27] },
+    { c1: [19, -16], c2: [19, 30], to: [17, 44] },
+    { q: [17, 48], to: [13, 48] },
+    { to: [0, 48] },
+]);
+const SALT_CAP = mirrored([0, -48], [
+    { c1: [10, -48], c2: [16, -42], to: [16, -34] },
+    { to: [16, -27] },
+    { to: [0, -27] },
+]);
+const SALT_HOLES = "M-6,-40h0M0,-42h0M6,-40h0";
+/** The salt (`item(kind="salt")`): a shaker, 42.41 × 100. */
+export const saltArt = {
+    Component: () => (_jsxs("g", { ...ITEM_OUTLINE, children: [_jsx("path", { d: SALT_GLASS, fill: PALETTE.paper }), _jsx("path", { d: SALT_CAP, fill: PALETTE.silver }), _jsx("path", { d: SALT_HOLES, strokeWidth: 3.4 }), _jsx("path", { d: "M-16,-30.5H16", strokeWidth: ITEM_DETAIL }), _jsx("circle", { cy: 12, r: 8, fill: "none", strokeWidth: ITEM_DETAIL }), _jsx("path", { d: "M-8,12H8", strokeWidth: ITEM_DETAIL }), _jsx("path", { d: "M-11,-38C-9,-42.5 -6,-44.5 -2,-45", ...HIGHLIGHT })] })),
+    box: { width: 42.41, height: 100 },
+    variant: sameForEveryNode,
+    provenance: saltProvenance,
+};
+const LOAF = "M-44,26C-50,-10 -28,-38 0,-38C28,-38 50,-10 44,26C32,40 -32,40 -44,26Z";
+/** Three slashes across the crust, each a lens the bake opened. */
+const SLASHES = [-22, 0, 22]
+    .map((x) => `M${x - 11},10Q${x - 1},-12 ${x + 11},-16Q${x + 1},-1 ${x - 11},10Z`)
+    .join("");
+/** The bread (`item(kind="bread")`): a round loaf, 100 × 100. */
+export const breadArt = {
+    Component: () => (_jsxs("g", { ...ITEM_OUTLINE, children: [_jsx("path", { d: LOAF, fill: PALETTE.bread }), _jsx("path", { d: SLASHES, fill: PALETTE.crumb, strokeWidth: ITEM_DETAIL })] })),
+    box: { width: 100, height: 100 },
+    variant: sameForEveryNode,
+    provenance: breadProvenance,
+};
+const PIVOT = [0, 24.5];
+const OUTER = 51;
+const INNER = 16;
+const FIRST = -150;
+const LAST = -30;
+const RIBS = 12;
+const ANGLES = Array.from({ length: RIBS + 1 }, (_, i) => FIRST + ((LAST - FIRST) * i) / RIBS);
+const at = (r, angle) => p(polar(r, angle, PIVOT));
+/** The leaf: out along the first rib, scalloped between the ribs, back. */
+const FAN_LEAF = `M${at(INNER, FIRST)}L${at(OUTER, FIRST)}${ANGLES.slice(1)
+    .map((angle) => `Q${at(OUTER + 5.5, angle - (LAST - FIRST) / RIBS / 2)} ${at(OUTER, angle)}`)
+    .join("")}L${at(INNER, LAST)}A${INNER} ${INNER} 0 0 0 ${at(INNER, FIRST)}Z`;
+const FAN_RIBS = ANGLES.slice(1, -1)
+    .map((angle) => `M${at(INNER, angle)}L${at(OUTER - 1, angle)}`)
+    .join("");
+const FAN_STICKS = ANGLES.map((angle) => `M${p(PIVOT)}L${at(INNER, angle)}`).join("");
+const FAN_GUARDS = [FIRST, LAST]
+    .map((angle) => `M${p(PIVOT)}L${at(OUTER + 2, angle)}`)
+    .join("");
+/** The fan (`item(kind="fan")`), open, 100 × 62.79. */
+export const fanArt = {
+    Component: () => (_jsxs("g", { ...ITEM_OUTLINE, children: [_jsx("path", { d: FAN_STICKS, strokeWidth: ITEM_DETAIL }), _jsx("path", { d: FAN_LEAF, fill: PALETTE.air }), _jsx("path", { d: FAN_RIBS, strokeWidth: 1.6 }), _jsx("path", { d: FAN_GUARDS, strokeWidth: 5.5 }), _jsx("path", { d: FAN_GUARDS, stroke: PALETTE.bronze, strokeWidth: 2.4 }), _jsx("circle", { cx: PIVOT[0], cy: PIVOT[1], r: 4, fill: PALETTE.bronze, strokeWidth: ITEM_DETAIL })] })),
+    box: { width: 100, height: 62.79 },
+    variant: sameForEveryNode,
+    provenance: fanProvenance,
+};

package/lib/gd/hall/art/banner.d.ts

@@ -0,0 +1,23 @@
+import type { HallArt } from "../types.ts";
+export declare const provenance: {
+    origin: "original" | "thirdParty";
+    author: string;
+    license: string;
+    source?: string;
+    notes?: string;
+};
+/** The pennant's half-width and its top, shoulder and point. */
+export declare const PENNANT: {
+    half: number;
+    top: number;
+    shoulder: number;
+    point: number;
+};
+/** The pennant outline: a rectangle ending in a point. */
+export declare function pennantPath(top: number, shoulder: number, point: number): string;
+/** The rod across the top with a knob at each end. */
+export declare function Rod({ y }: {
+    y: number;
+}): import("react").JSX.Element;
+/** The Banners of the East and of the West, 100 × 125 units. */
+export declare const bannerArt: HallArt;

package/lib/gd/hall/art/banner.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { enumAttr } from "../attributes.js";
+import { points } from "./geometry.js";
+import { original, PALETTE, variantOf } from "./shared.js";
+export const provenance = {
+    ...original("Gadi Cohen's own banner design, drawn as primitive geometry: a " +
+        "pennant on a rod with knobs, cord and tassels; the East bears the " +
+        "yellow cross with the interlaced red and blue triangles and the white " +
+        "Tau, the West the white triangle with the red cross."),
+};
+/** The pennant's half-width and its top, shoulder and point. */
+export const PENNANT = { half: 38, top: -37, shoulder: 27, point: 49 };
+/** The pennant outline: a rectangle ending in a point. */
+export function pennantPath(top, shoulder, point) {
+    const { half } = PENNANT;
+    return `M${-half},${top}H${half}V${shoulder}L0,${point}L${-half},${shoulder}Z`;
+}
+/** The rod across the top with a knob at each end. */
+export function Rod({ y }) {
+    return (_jsxs(_Fragment, { children: [_jsx("rect", { x: -43, y: y - 2, width: 86, height: 4, fill: PALETTE.knob, stroke: PALETTE.ink, strokeWidth: 0.6 }), [-44, 44].map((x) => (_jsx("circle", { cx: x, cy: y, r: 4.5, fill: PALETTE.knob, stroke: PALETTE.ink, strokeWidth: 0.6 }, x)))] }));
+}
+function EastEmblem() {
+    return (_jsxs(_Fragment, { children: [_jsx("path", { d: "M-7.5,-24H7.5V-9H23V5.5H7.5V35H-7.5V5.5H-23V-9H-7.5Z", fill: PALETTE.gold }), _jsx("polygon", { points: points([
+                    [-23, -9],
+                    [23, -9],
+                    [0, 28],
+                ]), fill: "none", stroke: PALETTE.water, strokeWidth: 3.5 }), _jsx("polygon", { points: points([
+                    [0, -21],
+                    [23, 16],
+                    [-23, 16],
+                ]), fill: "none", stroke: PALETTE.fire, strokeWidth: 3.5 }), _jsx("path", { d: "M-7,-3H7V1.5H2.5V10H-2.5V1.5H-7Z", fill: PALETTE.tau })] }));
+}
+function WestEmblem() {
+    return (_jsxs(_Fragment, { children: [_jsx("polygon", { points: points([
+                    [0, -23],
+                    [25.6, 20.7],
+                    [-25.6, 20.7],
+                ]), fill: "none", stroke: PALETTE.tau, strokeWidth: 4.3 }), _jsx("path", { d: "M-2.3,-2.4H2.3V2H7V7H2.3V15.5H-2.3V7H-7V2H-2.3Z", fill: PALETTE.glow, stroke: PALETTE.knob, strokeWidth: 0.6 })] }));
+}
+const isEast = (node) => enumAttr(node, "kind", ["east", "west"]) !== "west";
+function Banner({ node, defId }) {
+    const east = isEast(node);
+    const { half, top, shoulder, point } = PENNANT;
+    const fill = defId("fill");
+    const tassels = [
+        [-half, top, top + 15],
+        [half, top, top + 15],
+        [-half, shoulder, shoulder + 13],
+        [half, shoulder, shoulder + 13],
+        [0, point, point + 13],
+    ];
+    return (_jsxs(_Fragment, { children: [east && (_jsx("defs", { children: _jsxs("linearGradient", { id: fill, x1: -half, x2: half, y1: 0, y2: 0, gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: 0, stopColor: PALETTE.bannerLightFrom }), _jsx("stop", { offset: 1, stopColor: PALETTE.bannerLightTo })] }) })), _jsx("polyline", { points: points([
+                    [-half, top],
+                    [0, -61],
+                    [half, top],
+                ]), fill: "none", stroke: east ? PALETTE.tassel : PALETTE.bannerDark, strokeWidth: 2.5, strokeLinejoin: "round" }), _jsx(Rod, { y: top }), _jsx("path", { d: pennantPath(top, shoulder, point), fill: east ? `url(#${fill})` : PALETTE.bannerDark, stroke: PALETTE.ink, strokeWidth: 1.5 }), tassels.map(([x, from, to]) => (_jsx("line", { x1: x, x2: x, y1: from, y2: to, stroke: PALETTE.tassel, strokeWidth: 3.4, strokeLinecap: "round" }, `${x},${from}`))), east ? _jsx(EastEmblem, {}) : _jsx(WestEmblem, {})] }));
+}
+/** The Banners of the East and of the West, 100 × 125 units. */
+export const bannerArt = {
+    Component: Banner,
+    box: { width: 100, height: 125 },
+    variant: (node) => variantOf(isEast(node)),
+    provenance,
+};

package/lib/gd/hall/art/board.d.ts

@@ -0,0 +1,9 @@
+import type { HallArt } from "../types.ts";
+export declare const provenance: import("../types.ts").HallArtProvenance;
+/**
+ * A board on a stand (`board(kind="flamingSword")`), a host for markers.
+ * A plain board is `w` × `h` squares (2 × 3 unless they say otherwise); a
+ * board with a diagram is 2 × 3 at `scale=1`, sized by `scale`, so each
+ * diagram is drawn once per hall however many boards show it.
+ */
+export declare const boardArt: HallArt;

package/lib/gd/hall/art/board.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { TreeFigure } from "../../../kabbalah/treeOfLifeFigure.js";
+import { svgCoordinate } from "../../../svgCoordinate.js";
+import { enumAttr } from "../attributes.js";
+import { GD_HALL_FONT_STACKS } from "../fonts.js";
+import { LINE_HEIGHT, wrapText } from "../labels.js";
+import { BOARD_KINDS, BOARD_NAMES } from "../vocabulary.js";
+import { Platform, sized } from "./platform.js";
+import { original, PALETTE, variantOf } from "./shared.js";
+export const provenance = original("A board on a stand: a white rectangle sized in squares. The Flaming " +
+    "Sword and the Minutum Mundum draw the Tree of Life's figure (the " +
+    "package's own TreeOfLife geometry, Gadi Cohen); the Garden of Eden " +
+    "and the Fall are labelled with their names until they are drawn.");
+/** A board with a diagram: 2 × 3 squares, the Tree's proportions. */
+const DIAGRAM = { width: 2, height: 3 };
+/** The margin inside the board, in squares. */
+const MARGIN = 0.12;
+/** The title's size and the units it is set in (squares × 100). */
+const TITLE_SIZE = 30;
+const kindOf = (node) => enumAttr(node, "kind", BOARD_KINDS);
+const plainBox = sized(2, 3);
+function Board({ node, box }) {
+    const kind = kindOf(node);
+    const inner = {
+        width: box.width - 2 * MARGIN,
+        height: box.height - 2 * MARGIN,
+    };
+    if (kind === "flamingSword" || kind === "minutumMundum")
+        return (_jsxs(_Fragment, { children: [_jsx(Platform, { box: box }), _jsx("g", { transform: `translate(${-inner.width / 2} ${-inner.height / 2})`, children: _jsx(TreeFigure, { width: inner.width, height: inner.height, flash: kind === "flamingSword" }) })] }));
+    const title = kind ? BOARD_NAMES.get(kind) : undefined;
+    // Text at a large size inside a scaled group (decision 6).
+    const lines = title ? wrapText(title, inner.width * 100, TITLE_SIZE) : [];
+    const advance = TITLE_SIZE * LINE_HEIGHT;
+    const first = TITLE_SIZE * 0.36 - ((lines.length - 1) * advance) / 2;
+    return (_jsxs(_Fragment, { children: [_jsx(Platform, { box: box }), lines.length > 0 && (_jsx("g", { transform: "scale(0.01)", fill: PALETTE.ink, fontFamily: GD_HALL_FONT_STACKS.serif, fontStyle: "italic", fontSize: TITLE_SIZE, textAnchor: "middle", style: { fontVariantLigatures: "none", fontKerning: "normal" }, children: lines.map((line, index) => (_jsx("text", { y: svgCoordinate(first + index * advance), children: line.text }, index))) }))] }));
+}
+/**
+ * A board on a stand (`board(kind="flamingSword")`), a host for markers.
+ * A plain board is `w` × `h` squares (2 × 3 unless they say otherwise); a
+ * board with a diagram is 2 × 3 at `scale=1`, sized by `scale`, so each
+ * diagram is drawn once per hall however many boards show it.
+ */
+export const boardArt = {
+    Component: Board,
+    box: (node) => (kindOf(node) ? DIAGRAM : plainBox(node)),
+    fit: "squares",
+    variant: (node) => variantOf(kindOf(node)),
+    provenance,
+};

package/lib/gd/hall/art/cards.d.ts

@@ -0,0 +1,11 @@
+import type { HallArt, HallAttrSpec } from "../types.ts";
+export declare const provenance: import("../types.ts").HallArtProvenance;
+/** `kind`: which card. */
+export declare const CARD_KIND_SPEC: HallAttrSpec;
+/**
+ * An emblem card (`card(kind="pan")`), 58 × 100 like a tarot key: Pan,
+ * the Devil, Death or Typhon (Gadi's option (d), 24 October 2026). A
+ * card without a kind is blank. Its title cannot be read at a hall's
+ * size, so a hall labels it.
+ */
+export declare const cardArt: HallArt;

package/lib/gd/hall/art/cards.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { enumAttr } from "../attributes.js";
+import { CARD_KINDS, CARD_TITLES } from "../vocabulary.js";
+import { flipped, points, polar, smoothPath } from "./geometry.js";
+import { ITEM_DETAIL, ITEM_OUTLINE, original, PALETTE, variantOf, } from "./shared.js";
+import { CARD_BOX, CardFrame, CardNumeral, CardTitle, romanNumeral, } from "./tarotKey.js";
+export const provenance = original("Emblem cards drawn from geometry in the flat-emblem style, in the " +
+    "tarot key's frame: Pan's pipes and crook, the Devil on his cube, " +
+    "Death's skull and scythe, Typhon rising from the waves into the " +
+    "storm. After the Portal rubric's descriptions (Regardie, The Golden " +
+    "Dawn, vol. 2, 1938, pp. 178–184); nothing traced.");
+/** `kind`: which card. */
+export const CARD_KIND_SPEC = {
+    kind: "enum",
+    values: CARD_KINDS,
+};
+const kindOf = (node) => enumAttr(node, "kind", CARD_KINDS);
+/** The keys among the cards, by their trumps' numbers. */
+const KEYS = new Map([
+    ["death", 13],
+    ["devil", 15],
+]);
+/** A stroke drawn as a band with the items' outline: black under, colour over. */
+function Band({ d, width, stroke, }) {
+    return (_jsxs("g", { fill: "none", children: [_jsx("path", { d: d, stroke: PALETTE.ink, strokeWidth: width + 7.2 }), _jsx("path", { d: d, stroke: stroke, strokeWidth: width })] }));
+}
+/**
+ * Pan: the rubric's seven-reeded pipe, its reeds level at the top and
+ * each shorter than the last, bound with a red band, and the pastoral
+ * staff, a crook, beside it.
+ */
+const tenth = (value) => Math.round(value * 10) / 10 + 0;
+const REEDS = Array.from({ length: 7 }, (_, i) => tenth(-42 + i * 8.6));
+const REED_PATH = REEDS.map((x, i) => {
+    const bottom = tenth(29.7 - i * 6.4);
+    return `M${tenth(x - 4.3)},-32V${bottom}A4.3,4.3 0 0 0 ${tenth(x + 4.3)},${bottom}V-32Z`;
+}).join("");
+function Pan() {
+    return (_jsxs("g", { ...ITEM_OUTLINE, children: [_jsx(Band, { d: "M30,46L30,-30C30,-44 12,-44 12,-33C12,-29 14,-27 17,-27", width: 5, stroke: PALETTE.bronze }), _jsx("path", { d: REED_PATH, fill: PALETTE.bread }), _jsx("g", { fill: PALETTE.ink, stroke: "none", children: REEDS.map((x) => (_jsx("ellipse", { cx: x, cy: -32, rx: 2.6, ry: 1.4 }, x))) }), _jsx("path", { d: "M-46.3,-16H13.9V-8L-46.3,-6Z", fill: PALETTE.fire })] }));
+}
+/** A line of waves at height `y`, across the box. */
+const waves = (y, a) => {
+    let d = `M-48,${y}`;
+    for (let x = -48; x < 48; x += 16)
+        d += `Q${x + 4},${y - a} ${x + 8},${y}T${x + 16},${y}`;
+    return `${d}V48H-48Z`;
+};
+const TYPHON_BODY = smoothPath([
+    [-30, 34],
+    [-14, 30],
+    [6, 24],
+    [16, 14],
+    [8, 4],
+    [-12, -2],
+    [-20, -12],
+    [-10, -22],
+    [6, -28],
+], 1);
+/** The storm cloud's billows: x, y and radius. */
+const CLOUD = [
+    [-22, -34, 13],
+    [-4, -40, 15],
+    [16, -36, 13],
+    [30, -30, 10],
+    [-34, -28, 9],
+    [6, -27, 12],
+    [-16, -26, 10],
+];
+/**
+ * Typhon, "the Destroyer": a red serpent rising in coils from the waves
+ * (Earth and Ocean) into a storm cloud, his head lost in it, a yellow
+ * bolt below.
+ */
+function Typhon() {
+    return (_jsxs("g", { ...ITEM_OUTLINE, children: [_jsx("path", { d: waves(32, 5), fill: PALETTE.water }), _jsx(Band, { d: TYPHON_BODY, width: 11, stroke: PALETTE.fire }), _jsx("path", { d: waves(40, 4), fill: PALETTE.water }), _jsx("g", { fill: PALETTE.storm, children: CLOUD.map(([x, y, r]) => (_jsx("circle", { cx: x, cy: y, r: r }, `${x},${y}`))) }), _jsx("g", { fill: PALETTE.storm, stroke: "none", children: CLOUD.map(([x, y, r]) => (_jsx("circle", { cx: x, cy: y, r: r - 1.8 }, `${x},${y}`))) }), _jsx("path", { d: "M2,-24L-6,-10L2,-12L-4,2", fill: "none", stroke: PALETTE.air, strokeWidth: 3.4 })] }));
+}
+/** Death: a skull, and the scythe he reaps with. */
+function Death() {
+    return (_jsxs("g", { ...ITEM_OUTLINE, children: [_jsx(Band, { d: "M26,46L12,-38", width: 5, stroke: PALETTE.bronze }), _jsx("path", { d: "M13,-40C-4,-48 -30,-44 -46,-24C-28,-36 -6,-36 15,-30Z", fill: PALETTE.silver }), _jsx("path", { d: "M-30,6A20,20 0 1 1 6,6C6,12 2,14 0,16V24H-24V16C-26,14 -30,12 -30,6Z", fill: PALETTE.paper }), _jsxs("g", { fill: PALETTE.ink, stroke: "none", children: [_jsx("ellipse", { cx: -20, cy: 4, rx: 5.6, ry: 6.4 }), _jsx("ellipse", { cx: -4, cy: 4, rx: 5.6, ry: 6.4 }), _jsx("path", { d: "M-12,10L-15,17H-9Z" })] }), _jsx("path", { d: "M-18,24V19M-12,24V19M-6,24V19", fill: "none", strokeWidth: ITEM_DETAIL })] }));
+}
+/** A bat's wing, the right one: finger points along the top, scalloped. */
+const BAT_WING = "M8,-6C18,-20 34,-26 48,-22L44,-10C40,0 42,8 46,16C38,10 32,10 28,16" +
+    "C24,8 18,8 14,14C14,6 12,0 8,-2Z";
+const BAT_WINGS = BAT_WING + flipped(BAT_WING);
+/** The reversed pentagram over his head: a point down. */
+const REVERSED_PENTAGRAM = `M${points(Array.from({ length: 5 }, (_, i) => polar(8, 90 + i * 144, [0, -36]))).replaceAll(" ", "L")}Z`;
+/**
+ * The Devil: bat wings, a red horned head under a reversed pentagram,
+ * standing on the cubical altar (the key as the rubric describes it).
+ */
+function Devil() {
+    return (_jsxs("g", { ...ITEM_OUTLINE, children: [_jsx("path", { d: BAT_WINGS, fill: PALETTE.bannerDark }), _jsx("path", { d: "M-18,22H18V44H-18Z", fill: PALETTE.bannerDark }), _jsx("path", { d: "M-18,22L-12,16H24L18,22M24,16V38L18,44", fill: PALETTE.storm }), _jsx("path", { d: "M-7,-14C-18,-17 -23,-26 -20,-35C-17,-27 -11,-23 -3,-19Z", fill: PALETTE.goldDeep }), _jsx("path", { d: "M7,-14C18,-17 23,-26 20,-35C17,-27 11,-23 3,-19Z", fill: PALETTE.goldDeep }), _jsx("path", { d: "M-12,-16C-6,-20 6,-20 12,-16C13,-6 8,4 4,10L0,18L-4,10C-8,4 -13,-6 -12,-16Z", fill: PALETTE.fire }), _jsx("path", { d: "M-9,-8L-3,-6M9,-8L3,-6", stroke: PALETTE.paper, strokeWidth: 3.2 }), _jsx("path", { d: REVERSED_PENTAGRAM, fill: "none", stroke: PALETTE.ink, strokeWidth: 5.6 }), _jsx("path", { d: REVERSED_PENTAGRAM, fill: "none", stroke: PALETTE.paper, strokeWidth: 2.2 })] }));
+}
+const EMBLEMS = new Map([
+    ["pan", Pan],
+    ["devil", Devil],
+    ["death", Death],
+    ["typhon", Typhon],
+]);
+/**
+ * An emblem card: the tarot key's frame with the emblem in it, the
+ * title below and, on a key, its numeral above. The emblem is drawn in a
+ * 100-unit box at 0.44, so its outline matches the frame's.
+ */
+function Card({ node }) {
+    const kind = kindOf(node);
+    const Emblem = kind && EMBLEMS.get(kind);
+    const key = kind && KEYS.get(kind);
+    return (_jsxs(_Fragment, { children: [_jsx(CardFrame, {}), kind && Emblem && (_jsxs(_Fragment, { children: [_jsx("g", { transform: `translate(0 ${key ? 2 : -3}) scale(0.44)`, children: _jsx(Emblem, {}) }), _jsxs("g", { fill: PALETTE.ink, textAnchor: "middle", children: [key && _jsx(CardNumeral, { numeral: romanNumeral(key) }), _jsx(CardTitle, { title: CARD_TITLES.get(kind) })] })] }))] }));
+}
+/**
+ * An emblem card (`card(kind="pan")`), 58 × 100 like a tarot key: Pan,
+ * the Devil, Death or Typhon (Gadi's option (d), 24 October 2026). A
+ * card without a kind is blank. Its title cannot be read at a hall's
+ * size, so a hall labels it.
+ */
+export const cardArt = {
+    Component: Card,
+    box: CARD_BOX,
+    attributes: new Map([["kind", CARD_KIND_SPEC]]),
+    // One of four cards, or a blank one.
+    variant: (node) => variantOf(kindOf(node)),
+    provenance,
+};

package/lib/gd/hall/art/furnishings.d.ts

@@ -0,0 +1,12 @@
+import type { HallArt } from "../types.ts";
+export declare const gongProvenance: import("../types.ts").HallArtProvenance;
+export declare const brazierProvenance: import("../types.ts").HallArtProvenance;
+export declare const candleProvenance: import("../types.ts").HallArtProvenance;
+/** Every art module exports its provenance; these three share a module. */
+export declare const provenance: import("../types.ts").HallArtProvenance[];
+/** A gong (`item(kind="gong")`), the Portal's, 100 × 100. */
+export declare const gongArt: HallArt;
+/** A brazier (`item(kind="brazier")`): a bowl of fire on legs, 100 × 100. */
+export declare const brazierArt: HallArt;
+/** A candle (`item(kind="candle")`) on its stick, 40 × 100. */
+export declare const candleArt: HallArt;