magick-components 0.0.0-stage → 0.1.0

package/lib/kabbalah/treeOfLifeFigure.d.ts

@@ -0,0 +1,59 @@
+import type { SVGProps } from "react";
+/**
+ * The Tree of Life's figure, shared by `TreeOfLife` and the drawings that
+ * show the Tree inside another drawing (a temple hall's boards, plan 061):
+ * its geometry, its paths' draw order and `TreeFigure`, the spheres and
+ * paths alone. This module reads only magick-data's sephirot (their
+ * colours), never the whole barrel `TreeOfLife` reads for its labels, so
+ * a drawing that only shows the figure stays small.
+ */
+/** Draw order, which paths are "on top" of which, for clarity. */
+export declare const ORDERED_PATHS: {
+    hebrew: string[];
+    hermetic: string[];
+};
+/** `x,y` for SVG path data, rounded so every engine writes the same digits. */
+export declare function point(x: number, y: number): string;
+/** A path between two spheres: a band `offset` either side of the line. */
+export declare function LineOutline({ x1, y1, x2, y2, offset, ...args }: {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    /** Half the band's width. */
+    offset?: number;
+} & Omit<SVGProps<SVGPathElement>, "d">): import("react").JSX.Element;
+/** The figure's measures, in its own units. */
+export declare const TREE_GEOMETRY: {
+    readonly constructRadius: 128.5;
+    readonly strokePadding: 2;
+    readonly sephirahRadius: 40;
+    readonly rowStart: number;
+    readonly canvasWidth: number;
+    readonly canvasHeight: number;
+    /** The pillars' x: severity, equilibrium, mercy. */
+    readonly pillars: readonly [number, 0, number];
+};
+/** Each sphere's centre, Kether to Malkuth, then Daat. */
+export declare const SEPHIRAH_CENTERS: readonly {
+    x: number;
+    y: number;
+}[];
+/**
+ * The quarters of a sphere of several colours (Malkuth), as path props:
+ * wedges from the centre, the first starting at 135°.
+ */
+export declare function sephirahWedges(x: number, y: number, colors: readonly string[], r?: number): {
+    fill: string;
+    d: string;
+}[];
+/**
+ * The Tree's spheres in the Queen scale and its Hermetic paths, nothing
+ * else: no text, links, ids or stylesheet. `flash` draws the Lightning
+ * Flash down the spheres, Kether to Malkuth. Sized like `TreeOfLife`.
+ */
+export declare function TreeFigure({ width, height, flash, }: {
+    width?: number;
+    height?: number;
+    flash?: boolean;
+}): import("react").JSX.Element;

package/lib/kabbalah/treeOfLifeFigure.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import sephirot from "magick-data/kabbalah/sephirot";
+import { svgCoordinate } from "../svgCoordinate.js";
+/**
+ * The Tree of Life's figure, shared by `TreeOfLife` and the drawings that
+ * show the Tree inside another drawing (a temple hall's boards, plan 061):
+ * its geometry, its paths' draw order and `TreeFigure`, the spheres and
+ * paths alone. This module reads only magick-data's sephirot (their
+ * colours), never the whole barrel `TreeOfLife` reads for its labels, so
+ * a drawing that only shows the figure stays small.
+ */
+/** Draw order, which paths are "on top" of which, for clarity. */
+// prettier-ignore
+export const ORDERED_PATHS = {
+    hebrew: [
+        "4_5",
+        "2_3",
+        "7_8", // alef, shin, mem
+        "1_2",
+        "1_3",
+        "1_6", // he, vav, dalet
+        "2_5",
+        "3_4", // zayin, qof <-- paths specific to hebrew tree
+        "2_4",
+        "2_6",
+        "3_5",
+        "3_6",
+        "4_6",
+        "4_7",
+        "5_6",
+        "5_8",
+        "6_7",
+        "6_8",
+        "6_9",
+        "7_9",
+        "8_9",
+        "9_10",
+    ],
+    hermetic: [
+        "4_5",
+        "2_3",
+        "7_8",
+        "1_2",
+        "1_3",
+        "1_6",
+        "2_4",
+        "2_6",
+        "3_5",
+        "3_6",
+        "4_6",
+        "4_7",
+        "5_6",
+        "5_8",
+        "6_7",
+        "6_8",
+        "6_9",
+        "7_9",
+        "8_9",
+        "9_10",
+        "7_10",
+        "8_10", // paths specific to hermetic tree
+    ],
+};
+/** `x,y` for SVG path data, rounded so every engine writes the same digits. */
+export function point(x, y) {
+    return `${svgCoordinate(x)},${svgCoordinate(y)}`;
+}
+/** A path between two spheres: a band `offset` either side of the line. */
+export function LineOutline({ x1, y1, x2, y2, offset = 5, ...args }) {
+    const theta = Math.PI / 2 - Math.atan((x2 - x1) / (y2 - y1));
+    const xd = Math.sin(theta) * offset;
+    const yd = Math.cos(theta) * offset;
+    return (_jsx("path", { ...args, d: `M ${point(x1 - xd, y1 + yd)} L ${point(x1 + xd, y1 - yd)} ` +
+            `L ${point(x2 + xd, y2 - yd)} L ${point(x2 - xd, y2 + yd)} z` }));
+}
+const constructRadius = 128.5;
+const intersectionOffset = (constructRadius / 2) * Math.sqrt(3);
+const strokePadding = 2;
+const sephirahRadius = 40;
+const rowStart = sephirahRadius + strokePadding;
+const rowGap = constructRadius / 2;
+/** The figure's measures, in its own units. */
+export const TREE_GEOMETRY = {
+    constructRadius,
+    strokePadding,
+    sephirahRadius,
+    rowStart,
+    canvasWidth: 2 * (constructRadius + sephirahRadius + strokePadding),
+    canvasHeight: 4 * constructRadius + 2 * (sephirahRadius + strokePadding),
+    /** The pillars' x: severity, equilibrium, mercy. */
+    pillars: [-intersectionOffset, 0, intersectionOffset],
+};
+const [severity, equilibrium, mercy] = TREE_GEOMETRY.pillars;
+/** Each sphere's centre, Kether to Malkuth, then Daat. */
+export const SEPHIRAH_CENTERS = [
+    [equilibrium, 0],
+    [mercy, 1],
+    [severity, 1],
+    [mercy, 3],
+    [severity, 3],
+    [equilibrium, 4],
+    [mercy, 5],
+    [severity, 5],
+    [equilibrium, 6],
+    [equilibrium, 8],
+    [equilibrium, 2],
+].map(([x, row]) => ({ x, y: rowStart + rowGap * row }));
+/**
+ * The quarters of a sphere of several colours (Malkuth), as path props:
+ * wedges from the centre, the first starting at 135°.
+ */
+export function sephirahWedges(x, y, colors, r = sephirahRadius) {
+    const rads = Math.PI / 180;
+    return colors.map((fill, i) => {
+        // Adapted from https://codepen.io/hari_shanx/pen/NRyPBz (2022), kept
+        // as credit. What it lent is the method: a wedge is a line from the
+        // centre to the arc's start, an arc to its end, and back, its ends
+        // found by the usual polar-to-Cartesian arithmetic. Those few lines
+        // of trigonometry have no expression of their own to protect, so no
+        // licence is needed (plan 080, "Before publishing"); public Pens are
+        // MIT besides (blog.codepen.io/documentation/licensing).
+        // 180 - 45; hard coded malkuth angles till we need something else
+        const from = (i * 360) / colors.length + 180 - 45;
+        const to = ((i + 1) * 360) / colors.length + 180 - 45;
+        return {
+            fill,
+            d: `M ${point(x, y)} L ${point(x + r * Math.cos(from * rads), y + r * Math.sin(from * rads))} ` +
+                `A ${r},${r} 0 0,1 ${point(x + r * Math.cos(to * rads), y + r * Math.sin(to * rads))} z`,
+        };
+    });
+}
+const rows = Object.values(sephirot);
+/**
+ * The Tree's spheres in the Queen scale and its Hermetic paths, nothing
+ * else: no text, links, ids or stylesheet. `flash` draws the Lightning
+ * Flash down the spheres, Kether to Malkuth. Sized like `TreeOfLife`.
+ */
+export function TreeFigure({ width, height, flash, }) {
+    const { canvasWidth, canvasHeight } = TREE_GEOMETRY;
+    const center = (index) => SEPHIRAH_CENTERS[index - 1];
+    return (_jsxs("svg", { width: width, height: height, viewBox: `${-canvasWidth / 2} 0 ${canvasWidth} ${canvasHeight}`, children: [_jsx("g", { stroke: "#000", strokeWidth: 3, fill: "#fff", style: { paintOrder: "stroke fill markers" }, children: [...ORDERED_PATHS.hermetic].reverse().map((id) => {
+                    const [a, b] = id.split("_").map(Number);
+                    return (_jsx(LineOutline, { x1: center(a).x, y1: center(a).y, x2: center(b).x, y2: center(b).y, offset: 8.5 }, id));
+                }) }), SEPHIRAH_CENTERS.slice(0, 10).map(({ x, y }, index) => {
+                const colors = rows[index].color.queenWeb.split(",");
+                return (_jsxs("g", { children: [_jsx("circle", { cx: x, cy: y, r: sephirahRadius, fill: colors.length > 1 ? undefined : colors[0], stroke: "#000", strokeWidth: 1.568 }), colors.length > 1 &&
+                            sephirahWedges(x, y, colors).map((wedge) => (_jsx("path", { d: wedge.d, fill: wedge.fill, stroke: "#000", strokeWidth: 1.568 }, wedge.fill)))] }, rows[index].id));
+            }), flash && (_jsx("polyline", { points: SEPHIRAH_CENTERS.slice(0, 10)
+                    .map(({ x, y }) => point(x, y))
+                    .join(" "), fill: "none", stroke: "#d92128", strokeWidth: 9, strokeLinejoin: "round", strokeLinecap: "round" }))] }));
+}

package/lib/svgCoordinate.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Decimal places kept in SVG output, as in SVGO's default. On the 100-unit
+ * canvas that is about 0.02 px of error even at the 4096 px raster limit.
+ */
+export declare const SVG_COORDINATE_DECIMALS = 3;
+/**
+ * A number as written to SVG. Node and the browser can disagree in the last
+ * bit of `Math.sin`/`Math.cos` (30.310889132455348 against …344), and React
+ * reports any such attribute difference as a hydration mismatch; rounding
+ * gives both the same digits.
+ */
+export declare function svgCoordinate(value: number): number;

package/lib/svgCoordinate.js

@@ -0,0 +1,16 @@
+/**
+ * Decimal places kept in SVG output, as in SVGO's default. On the 100-unit
+ * canvas that is about 0.02 px of error even at the 4096 px raster limit.
+ */
+export const SVG_COORDINATE_DECIMALS = 3;
+const SVG_COORDINATE_SCALE = 10 ** SVG_COORDINATE_DECIMALS;
+/**
+ * A number as written to SVG. Node and the browser can disagree in the last
+ * bit of `Math.sin`/`Math.cos` (30.310889132455348 against …344), and React
+ * reports any such attribute difference as a hydration mismatch; rounding
+ * gives both the same digits.
+ */
+export function svgCoordinate(value) {
+    // `+ 0` turns the -0 that tiny negative values round to into 0.
+    return Math.round(value * SVG_COORDINATE_SCALE) / SVG_COORDINATE_SCALE + 0;
+}

package/package.json

@@ -1,6 +1,165 @@
 {
   "name": "magick-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "React components that draw magickal figures from magick-data: the Tree of Life, the Golden Dawn's temple halls, lamens and symbols, the rose-cross sigil, the Enochian tablets, the kameas, the planetary spirits' geomantic sigils and the Moon",
+  "keywords": [
+    "magick",
+    "react",
+    "svg",
+    "tree of life",
+    "kabbalah",
+    "golden dawn",
+    "rose cross",
+    "sigil",
+    "enochian",
+    "kamea",
+    "astrology",
+    "occult",
+    "esoteric"
+  ],
+  "license": "(MIT AND OFL-1.1 AND BSD-3-Clause)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gadicc/magickly.git",
+    "directory": "packages/magick-components"
+  },
+  "homepage": "https://github.com/gadicc/magickly/tree/main/packages/magick-components#readme",
+  "bugs": "https://github.com/gadicc/magickly/issues",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "files": [
+    "lib",
+    "fonts",
+    "README.md",
+    "LICENSE.txt"
+  ],
+  "exports": {
+    "./astrology/Kamea": {
+      "types": "./lib/astrology/Kamea.d.ts",
+      "default": "./lib/astrology/Kamea.js"
+    },
+    "./astrology/mercuryRetrograde": {
+      "types": "./lib/astrology/mercuryRetrograde.d.ts",
+      "default": "./lib/astrology/mercuryRetrograde.js"
+    },
+    "./astrology/MercuryWidget": {
+      "types": "./lib/astrology/MercuryWidget.d.ts",
+      "default": "./lib/astrology/MercuryWidget.js"
+    },
+    "./astrology/Moon": {
+      "types": "./lib/astrology/Moon.d.ts",
+      "default": "./lib/astrology/Moon.js"
+    },
+    "./astrology/MoonWidget": {
+      "types": "./lib/astrology/MoonWidget.d.ts",
+      "default": "./lib/astrology/MoonWidget.js"
+    },
+    "./astrology/PlanetarySpirit": {
+      "types": "./lib/astrology/PlanetarySpirit.d.ts",
+      "default": "./lib/astrology/PlanetarySpirit.js"
+    },
+    "./chakras/Chakras": {
+      "types": "./lib/chakras/Chakras.d.ts",
+      "default": "./lib/chakras/Chakras.js"
+    },
+    "./enochian/Tablet": {
+      "types": "./lib/enochian/Tablet.d.ts",
+      "default": "./lib/enochian/Tablet.js"
+    },
+    "./gd/FylfotCross": {
+      "types": "./lib/gd/FylfotCross.d.ts",
+      "default": "./lib/gd/FylfotCross.js"
+    },
+    "./gd/GradeTree": {
+      "types": "./lib/gd/GradeTree.d.ts",
+      "default": "./lib/gd/GradeTree.js"
+    },
+    "./gd/hall": {
+      "types": "./lib/gd/hall/index.d.ts",
+      "default": "./lib/gd/hall/index.js"
+    },
+    "./gd/hall/editor": {
+      "types": "./lib/gd/hall/editor.d.ts",
+      "default": "./lib/gd/hall/editor.js"
+    },
+    "./gd/hall/presets": {
+      "types": "./lib/gd/hall/presets/index.d.ts",
+      "default": "./lib/gd/hall/presets/index.js"
+    },
+    "./gd/Lamen": {
+      "types": "./lib/gd/Lamen.d.ts",
+      "default": "./lib/gd/Lamen.js"
+    },
+    "./gd/lamenGrades": {
+      "types": "./lib/gd/lamenGrades.d.ts",
+      "default": "./lib/gd/lamenGrades.js"
+    },
+    "./gd/RoseSigil": {
+      "types": "./lib/gd/RoseSigil.d.ts",
+      "default": "./lib/gd/RoseSigil.js"
+    },
+    "./gd/roseSigilGeometry": {
+      "types": "./lib/gd/roseSigilGeometry.d.ts",
+      "default": "./lib/gd/roseSigilGeometry.js"
+    },
+    "./gd/RoseSigilImage": {
+      "types": "./lib/gd/RoseSigilImage.d.ts",
+      "default": "./lib/gd/RoseSigilImage.js"
+    },
+    "./gd/roseSigilOptimizer": {
+      "types": "./lib/gd/roseSigilOptimizer.d.ts",
+      "default": "./lib/gd/roseSigilOptimizer.js"
+    },
+    "./gd/SevenBranchedCandlestick": {
+      "types": "./lib/gd/SevenBranchedCandlestick.d.ts",
+      "default": "./lib/gd/SevenBranchedCandlestick.js"
+    },
+    "./gd/TableOfShewbread": {
+      "types": "./lib/gd/TableOfShewbread.d.ts",
+      "default": "./lib/gd/TableOfShewbread.js"
+    },
+    "./kabbalah/fieldPath": {
+      "types": "./lib/kabbalah/fieldPath.d.ts",
+      "default": "./lib/kabbalah/fieldPath.js"
+    },
+    "./kabbalah/TreeOfLife": {
+      "types": "./lib/kabbalah/TreeOfLife.d.ts",
+      "default": "./lib/kabbalah/TreeOfLife.js"
+    },
+    "./fonts/*": "./fonts/*"
+  },
+  "peerDependencies": {
+    "@types/react": "^19",
+    "react": "^19"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "astronomy-engine": "^2.1.19",
+    "dot-prop": "^10.2.0",
+    "lune": "^0.4.0",
+    "luxon": "^3.7.2",
+    "magick-data": "^0.2.1",
+    "nlopt-js": "^0.1.1"
+  },
+  "devDependencies": {
+    "@types/luxon": "^3.7.6",
+    "@types/node": "24.19.2",
+    "@types/react": "^19.3.0",
+    "typescript": "^6.0.3"
+  },
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json",
+    "build": "rm -rf lib && tsc -p tsconfig.build.json",
+    "fonts:css": "node scripts/gdHallCss.mjs",
+    "smoke": "node scripts/smoke.mjs"
+  }
 }