npm - caelus-wheel - Versions diffs - 0.9.0 → 0.11.0 - Mend

caelus-wheel 0.9.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/src/astromap.d.ts +32 -0
package/dist/src/astromap.js +64 -0
package/dist/src/ephemerisgraph.d.ts +27 -0
package/dist/src/ephemerisgraph.js +64 -0
package/dist/src/index.d.ts +3 -0
package/dist/src/index.js +3 -0
package/dist/src/sphere.d.ts +39 -0
package/dist/src/sphere.js +89 -0
package/package.json +1 -1

package/dist/src/astromap.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+/**
+ * AstroMap: astrocartography angle lines on an equirectangular world map,
+ * SSR-safe SVG with no runtime dependencies. MC and IC are vertical meridians;
+ * ASC and DSC are the curved rising/setting tracks, split where they cross the
+ * date line. The basemap is a graticule only (no bundled geodata, to stay
+ * zero-dependency); pass your own coastline paths as children to layer a map
+ * under the lines.
+ *
+ * Feed it the output of the caelus engine's `astrocartography(...)`.
+ */
+import { type WheelTheme } from "./index.js";
+/** One body's four angle lines (matches the engine's AngleLines). */
+export interface MapLines {
+    mc: number;
+    ic: number;
+    asc: [number, number][];
+    dsc: [number, number][];
+}
+export type AngleKind = "mc" | "ic" | "asc" | "dsc";
+export interface AstroMapProps {
+    lines: Record<string, MapLines>;
+    width?: number;
+    height?: number;
+    /** Which angle lines to draw (default all four). */
+    show?: AngleKind[];
+    /** Per-body line colour; falls back to a default palette. */
+    colors?: Record<string, string>;
+    graticule?: boolean;
+    theme?: Partial<WheelTheme>;
+    children?: React.ReactNode;
+}
+export declare function AstroMap({ lines, width, height, show, colors, graticule, theme, children, }: AstroMapProps): import("react").JSX.Element;

package/dist/src/astromap.js ADDED Viewed

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * AstroMap: astrocartography angle lines on an equirectangular world map,
+ * SSR-safe SVG with no runtime dependencies. MC and IC are vertical meridians;
+ * ASC and DSC are the curved rising/setting tracks, split where they cross the
+ * date line. The basemap is a graticule only (no bundled geodata, to stay
+ * zero-dependency); pass your own coastline paths as children to layer a map
+ * under the lines.
+ *
+ * Feed it the output of the caelus engine's `astrocartography(...)`.
+ */
+import { DARK_THEME } from "./index.js";
+const DEFAULT_COLORS = {
+    sun: "#e0b020", moon: "#c8c8d0", mercury: "#9a93c4", venus: "#4fb09a",
+    mars: "#c0564f", jupiter: "#c08a4f", saturn: "#8d8a99",
+    uranus: "#4f8fc0", neptune: "#5a6fc0", pluto: "#a05a8a", chiron: "#7a9a5a",
+};
+const PALETTE = ["#8a7fd4", "#c0564f", "#4f8fc0", "#4fb09a", "#c08a4f", "#a05a8a"];
+const ALL = ["mc", "ic", "asc", "dsc"];
+export function AstroMap({ lines, width = 720, height = 360, show = ALL, colors, graticule = true, theme, children, }) {
+    const th = { ...DARK_THEME, ...theme };
+    const px = (lon) => ((lon + 180) / 360) * width;
+    const py = (lat) => ((90 - lat) / 180) * height;
+    // ASC/DSC polyline, broken at the date-line wrap.
+    const track = (pts) => {
+        const segs = [];
+        let cur = [];
+        for (let i = 0; i < pts.length; i++) {
+            const [lon, lat] = pts[i];
+            if (i > 0 && Math.abs(lon - pts[i - 1][0]) > 180) {
+                if (cur.length > 1)
+                    segs.push("M" + cur.join(" L"));
+                cur = [];
+            }
+            cur.push(`${px(lon).toFixed(1)} ${py(lat).toFixed(1)}`);
+        }
+        if (cur.length > 1)
+            segs.push("M" + cur.join(" L"));
+        return segs;
+    };
+    const colorOf = (body, i) => colors?.[body] ?? DEFAULT_COLORS[body] ?? PALETTE[i % PALETTE.length];
+    // MC labels crowd into an unreadable run where meridians sit close in
+    // longitude. Pack them into staggered rows: each label drops to the first row
+    // whose previous label clears its x, so every "<body> MC" tag stays legible.
+    const mcLabels = show.includes("mc")
+        ? Object.keys(lines)
+            .map((body, i) => ({ body, x: px(lines[body].mc), col: colorOf(body, i) }))
+            .sort((a, b) => a.x - b.x)
+        : [];
+    const rowEnds = [];
+    const placedLabels = mcLabels.map((l) => {
+        const w = (l.body.length + 3) * 6.4; // chars * ~px, including " MC"
+        let row = 0;
+        while (row < rowEnds.length && rowEnds[row] > l.x - 4)
+            row++;
+        rowEnds[row] = l.x + w;
+        return { ...l, y: 11 + row * 12, w };
+    });
+    return (_jsxs("svg", { viewBox: `0 0 ${width} ${height}`, width: width, height: height, xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Astrocartography map", children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, fill: th.background }), children, graticule && (_jsxs("g", { stroke: th.ring, strokeWidth: 0.5, fill: "none", opacity: 0.5, children: [[-120, -60, 0, 60, 120].map((lon) => (_jsx("line", { x1: px(lon), y1: 0, x2: px(lon), y2: height }, `m${lon}`))), [-60, -30, 0, 30, 60].map((lat) => (_jsx("line", { x1: 0, y1: py(lat), x2: width, y2: py(lat), strokeWidth: lat === 0 ? 1 : 0.5, opacity: lat === 0 ? 0.9 : 0.5 }, `p${lat}`)))] })), Object.keys(lines).map((body, i) => {
+                const L = lines[body];
+                const col = colorOf(body, i);
+                return (_jsxs("g", { stroke: col, fill: col, strokeWidth: 1.5, children: [show.includes("mc") && (_jsx("line", { x1: px(L.mc), y1: 0, x2: px(L.mc), y2: height })), show.includes("ic") && (_jsx("line", { x1: px(L.ic), y1: 0, x2: px(L.ic), y2: height, strokeDasharray: "4 3", opacity: 0.8 })), show.includes("asc") && track(L.asc).map((d, k) => (_jsx("path", { d: d, fill: "none" }, `a${k}`))), show.includes("dsc") && track(L.dsc).map((d, k) => (_jsx("path", { d: d, fill: "none", strokeDasharray: "4 3", opacity: 0.8 }, `d${k}`)))] }, body));
+            }), _jsx("g", { fontFamily: th.fontFamily, fontSize: 11, children: placedLabels.map((l) => (_jsxs("g", { children: [_jsx("rect", { x: l.x, y: l.y - 9, width: l.w, height: 11, rx: 2, fill: th.background, opacity: 0.65 }), _jsxs("text", { x: l.x + 2, y: l.y, fill: l.col, stroke: "none", children: [l.body, " MC"] })] }, l.body))) })] }));
+}

package/dist/src/ephemerisgraph.d.ts ADDED Viewed

@@ -0,0 +1,27 @@
+/**
+ * EphemerisGraph: a graphic ephemeris -- one value per body over time as line
+ * graphs, SSR-safe SVG with no runtime dependencies. Longitude wraps 360 -> 0,
+ * so the lines are split at the wrap; declination and speed draw straight.
+ * Feed it the output of the caelus engine's `ephemeris(...)`.
+ */
+import { type WheelTheme } from "./index.js";
+export interface SeriesPoint {
+    jd: number;
+    value: number;
+}
+export interface EphemerisGraphProps {
+    series: Record<string, SeriesPoint[]>;
+    width?: number;
+    height?: number;
+    /** Value-axis bounds. Defaults to [0, wrap] when wrap is set, else the data
+     *  range with a little padding. */
+    yMin?: number;
+    yMax?: number;
+    /** Split a line when the value jumps more than wrap/2 (use 360 for longitude). */
+    wrap?: number;
+    /** Value-axis gridline spacing. */
+    gridStep?: number;
+    colors?: Record<string, string>;
+    theme?: Partial<WheelTheme>;
+}
+export declare function EphemerisGraph({ series, width, height, yMin, yMax, wrap, gridStep, colors, theme, }: EphemerisGraphProps): import("react").JSX.Element;

package/dist/src/ephemerisgraph.js ADDED Viewed

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * EphemerisGraph: a graphic ephemeris -- one value per body over time as line
+ * graphs, SSR-safe SVG with no runtime dependencies. Longitude wraps 360 -> 0,
+ * so the lines are split at the wrap; declination and speed draw straight.
+ * Feed it the output of the caelus engine's `ephemeris(...)`.
+ */
+import { DARK_THEME } from "./index.js";
+const DEFAULT_COLORS = {
+    sun: "#e0b020", moon: "#c8c8d0", mercury: "#9a93c4", venus: "#4fb09a",
+    mars: "#c0564f", jupiter: "#c08a4f", saturn: "#8d8a99",
+    uranus: "#4f8fc0", neptune: "#5a6fc0", pluto: "#a05a8a", chiron: "#7a9a5a",
+};
+const PALETTE = ["#8a7fd4", "#c0564f", "#4f8fc0", "#4fb09a", "#c08a4f", "#a05a8a"];
+export function EphemerisGraph({ series, width = 720, height = 360, yMin, yMax, wrap, gridStep, colors, theme, }) {
+    const th = { ...DARK_THEME, ...theme };
+    const bodies = Object.keys(series).filter((b) => series[b]?.length);
+    const all = bodies.flatMap((b) => series[b]);
+    const jds = all.map((p) => p.jd);
+    const j0 = Math.min(...jds), j1 = Math.max(...jds);
+    let lo = yMin, hi = yMax;
+    if (lo === undefined || hi === undefined) {
+        if (wrap !== undefined) {
+            lo = 0;
+            hi = wrap;
+        }
+        else {
+            const vs = all.map((p) => p.value);
+            const min = Math.min(...vs), max = Math.max(...vs), pad = (max - min) * 0.05 || 1;
+            lo = min - pad;
+            hi = max + pad;
+        }
+    }
+    const span = hi - lo || 1;
+    const m = { l: 44, r: 96, t: 12, b: 24 };
+    const pw = width - m.l - m.r, ph = height - m.t - m.b;
+    const px = (jd) => m.l + ((jd - j0) / (j1 - j0 || 1)) * pw;
+    const py = (v) => m.t + (1 - (v - lo) / span) * ph;
+    const step = gridStep ?? (wrap ? wrap / 6 : span / 6);
+    const gridVals = [];
+    for (let v = Math.ceil(lo / step) * step; v <= hi + 1e-9; v += step)
+        gridVals.push(v);
+    const colorOf = (b, i) => colors?.[b] ?? DEFAULT_COLORS[b] ?? PALETTE[i % PALETTE.length];
+    // A body's polyline, split where the value wraps.
+    const line = (pts) => {
+        const segs = [];
+        let cur = [];
+        for (let i = 0; i < pts.length; i++) {
+            if (wrap !== undefined && i > 0 && Math.abs(pts[i].value - pts[i - 1].value) > wrap / 2) {
+                if (cur.length > 1)
+                    segs.push("M" + cur.join(" L"));
+                cur = [];
+            }
+            cur.push(`${px(pts[i].jd).toFixed(1)} ${py(pts[i].value).toFixed(1)}`);
+        }
+        if (cur.length > 1)
+            segs.push("M" + cur.join(" L"));
+        return segs;
+    };
+    return (_jsxs("svg", { viewBox: `0 0 ${width} ${height}`, width: width, height: height, xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Graphic ephemeris", children: [_jsx("rect", { x: 0, y: 0, width: width, height: height, fill: th.background }), _jsx("g", { fontFamily: th.fontFamily, fontSize: 10, fill: th.labelText, children: gridVals.map((v) => (_jsxs("g", { children: [_jsx("line", { x1: m.l, y1: py(v), x2: m.l + pw, y2: py(v), stroke: th.ring, strokeWidth: 0.5, opacity: 0.5 }), _jsx("text", { x: m.l - 4, y: py(v), textAnchor: "end", dominantBaseline: "central", children: Math.round(v) })] }, v))) }), _jsx("rect", { x: m.l, y: m.t, width: pw, height: ph, fill: "none", stroke: th.ring, strokeWidth: 1 }), bodies.map((b, i) => {
+                const col = colorOf(b, i);
+                return (_jsxs("g", { stroke: col, fill: col, strokeWidth: 1.5, children: [line(series[b]).map((d, k) => _jsx("path", { d: d, fill: "none" }, k)), _jsx("line", { x1: m.l + pw + 8, y1: m.t + 12 + i * 16, x2: m.l + pw + 22, y2: m.t + 12 + i * 16 }), _jsx("text", { x: m.l + pw + 26, y: m.t + 12 + i * 16, fontSize: 11, stroke: "none", fontFamily: th.fontFamily, dominantBaseline: "central", children: b })] }, b));
+            })] }));
+}

package/dist/src/index.d.ts CHANGED Viewed

@@ -66,3 +66,6 @@ export interface ChartWheelProps {
  */
 export declare function spreadAngles(lons: number[], minSep: number): number[];
 export declare function ChartWheel({ chart, size, showAspects, aspectTypes, bodies, theme, glyphs, }: ChartWheelProps): ReactElement;
+export * from "./sphere.js";
+export * from "./astromap.js";
+export * from "./ephemerisgraph.js";

package/dist/src/index.js CHANGED Viewed

@@ -190,3 +190,6 @@ export function ChartWheel({ chart, size = 520, showAspects = true, aspectTypes
     });
     return (_jsx("svg", { width: size, height: size, viewBox: `${-pad} ${-pad} ${size + 2 * pad} ${size + 2 * pad}`, role: "img", "aria-label": "astrological chart wheel", style: { background: T.background, display: "block" }, children: el }));
 }
+export * from "./sphere.js";
+export * from "./astromap.js";
+export * from "./ephemerisgraph.js";

package/dist/src/sphere.d.ts ADDED Viewed

@@ -0,0 +1,39 @@
+/**
+ * ChartSphere: the chart as a tilted celestial sphere instead of a flat wheel,
+ * SSR-safe SVG with no runtime dependencies. Planets sit at their true ecliptic
+ * latitude (a flat wheel collapses that to zero), so you see the Moon ride above
+ * the ecliptic and Pluto swing well off it. The ecliptic and equator are drawn
+ * as great-circle rings, solid on the near hemisphere and faded on the far one;
+ * a short stem drops each planet to the ecliptic plane to show its latitude.
+ *
+ * Inspired by Astrolog's chart spheres. The 3D aspect angle that pairs with this
+ * view is `angularSeparation3d` in the caelus engine.
+ */
+import { type WheelTheme } from "./index.js";
+export interface SpherePosition {
+    lon: number;
+    lat: number;
+    retrograde?: boolean;
+}
+export interface SphereChart {
+    /** Bodies with ecliptic longitude AND latitude (the caelus chart's bodies
+     *  satisfy this as-is). */
+    bodies: Record<string, SpherePosition>;
+}
+export interface ChartSphereProps {
+    chart: SphereChart;
+    /** Square size in px. */
+    size?: number;
+    /** Degrees the ecliptic pole tilts away from the viewer (0 = pole-on wheel,
+     *  90 = edge-on). */
+    tilt?: number;
+    /** Degrees the sphere is spun about its pole (which longitude faces front). */
+    turn?: number;
+    /** Obliquity for the equator ring, degrees. */
+    obliquity?: number;
+    showEquator?: boolean;
+    bodies?: string[];
+    theme?: Partial<WheelTheme>;
+    glyphs?: Record<string, string>;
+}
+export declare function ChartSphere({ chart, size, tilt, turn, obliquity, showEquator, bodies, theme, glyphs, }: ChartSphereProps): import("react").JSX.Element;

package/dist/src/sphere.js ADDED Viewed

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ChartSphere: the chart as a tilted celestial sphere instead of a flat wheel,
+ * SSR-safe SVG with no runtime dependencies. Planets sit at their true ecliptic
+ * latitude (a flat wheel collapses that to zero), so you see the Moon ride above
+ * the ecliptic and Pluto swing well off it. The ecliptic and equator are drawn
+ * as great-circle rings, solid on the near hemisphere and faded on the far one;
+ * a short stem drops each planet to the ecliptic plane to show its latitude.
+ *
+ * Inspired by Astrolog's chart spheres. The 3D aspect angle that pairs with this
+ * view is `angularSeparation3d` in the caelus engine.
+ */
+import { GLYPHS, DARK_THEME } from "./index.js";
+const D2R = Math.PI / 180;
+const DEFAULT_OBLIQUITY = 23.4368; // mean obliquity, deg; for the equator ring
+const SIGN_GLYPHS = ["♈", "♉", "♊", "♋", "♌", "♍",
+    "♎", "♏", "♐", "♑", "♒", "♓"];
+const eclVec = (lonDeg, latDeg) => {
+    const l = lonDeg * D2R, b = latDeg * D2R, cb = Math.cos(b);
+    return [cb * Math.cos(l), cb * Math.sin(l), Math.sin(b)];
+};
+const rotX = (v, deg) => {
+    const c = Math.cos(deg * D2R), s = Math.sin(deg * D2R);
+    return [v[0], v[1] * c - v[2] * s, v[1] * s + v[2] * c];
+};
+const rotZ = (v, deg) => {
+    const c = Math.cos(deg * D2R), s = Math.sin(deg * D2R);
+    return [v[0] * c - v[1] * s, v[0] * s + v[1] * c, v[2]];
+};
+function project(world, ctx) {
+    const v = rotX(rotZ(world, ctx.turn), ctx.tilt);
+    return { x: ctx.c + v[0] * ctx.R, y: ctx.c - v[1] * ctx.R, front: v[2] >= 0, depth: v[2] };
+}
+/** A great circle sampled and split into near (front) and far (back) polyline
+ *  paths, so the near arc can be drawn solid over the far one. */
+function ringPaths(points, ctx) {
+    const segs = { front: [], back: [] };
+    let run = [];
+    let runFront = true;
+    const flush = () => {
+        if (run.length < 2) {
+            run = [];
+            return;
+        }
+        const d = "M" + run.map((p) => `${p.x.toFixed(2)} ${p.y.toFixed(2)}`).join(" L");
+        segs[runFront ? "front" : "back"].push(d);
+        run = [];
+    };
+    for (let i = 0; i <= points.length; i++) {
+        const p = project(points[i % points.length], ctx);
+        if (run.length && p.front !== runFront) {
+            flush();
+        }
+        if (!run.length)
+            runFront = p.front;
+        run.push(p);
+    }
+    flush();
+    return { front: segs.front.join(" "), back: segs.back.join(" ") };
+}
+function circleSamples(make, n = 120) {
+    const out = [];
+    for (let i = 0; i < n; i++)
+        out.push(make((i / n) * 360));
+    return out;
+}
+export function ChartSphere({ chart, size = 520, tilt = 64, turn = -90, obliquity = DEFAULT_OBLIQUITY, showEquator = true, bodies, theme, glyphs, }) {
+    const th = { ...DARK_THEME, ...theme };
+    const gl = { ...GLYPHS, ...glyphs };
+    const c = size / 2;
+    const R = size * 0.42;
+    const ctx = { turn, tilt, R, c };
+    const ecliptic = ringPaths(circleSamples((d) => eclVec(d, 0)), ctx);
+    const equator = ringPaths(circleSamples((d) => rotX(eclVec(d, 0), obliquity)), ctx);
+    const names = (bodies ?? Object.keys(chart.bodies)).filter((b) => chart.bodies[b]);
+    const drawn = names.map((name) => {
+        const { lon, lat, retrograde } = chart.bodies[name];
+        const p = project(eclVec(lon, lat), ctx);
+        const base = project(eclVec(lon, 0), ctx); // foot on the ecliptic plane
+        return { name, p, base, retrograde };
+    }).sort((a, b) => a.p.depth - b.p.depth); // far first (painter's order)
+    return (_jsxs("svg", { viewBox: `0 0 ${size} ${size}`, width: size, height: size, xmlns: "http://www.w3.org/2000/svg", role: "img", "aria-label": "Astrological chart sphere", children: [_jsx("circle", { cx: c, cy: c, r: R, fill: th.background, stroke: th.ring, strokeWidth: 1 }), showEquator && (_jsxs("g", { fill: "none", stroke: th.axis, strokeWidth: 1, children: [_jsx("path", { d: equator.back, opacity: 0.25, strokeDasharray: "3 3" }), _jsx("path", { d: equator.front, opacity: 0.7 })] })), _jsxs("g", { fill: "none", stroke: th.signText, strokeWidth: 1.25, children: [_jsx("path", { d: ecliptic.back, opacity: 0.3, strokeDasharray: "3 3" }), _jsx("path", { d: ecliptic.front, opacity: 0.9 })] }), _jsx("g", { fontFamily: th.fontFamily, fontSize: size * 0.03, fill: th.signText, textAnchor: "middle", dominantBaseline: "central", children: SIGN_GLYPHS.map((g, i) => {
+                    const m = project(eclVec(i * 30, 0), ctx);
+                    return (_jsx("text", { x: m.x, y: m.y, opacity: m.front ? 0.85 : 0.3, children: g }, i));
+                }) }), _jsx("g", { fontFamily: th.fontFamily, children: drawn.map(({ name, p, base, retrograde }) => {
+                    const op = p.front ? 1 : 0.4;
+                    return (_jsxs("g", { opacity: op, children: [_jsx("line", { x1: base.x, y1: base.y, x2: p.x, y2: p.y, stroke: th.labelText, strokeWidth: 1, opacity: 0.6 }), _jsx("circle", { cx: base.x, cy: base.y, r: 1.5, fill: th.labelText }), _jsx("text", { x: p.x, y: p.y, fontSize: size * 0.045, fill: th.planetText, textAnchor: "middle", dominantBaseline: "central", children: gl[name] ?? name.slice(0, 2) }), retrograde && (_jsx("text", { x: p.x + size * 0.03, y: p.y - size * 0.03, fontSize: size * 0.022, fill: th.labelText, textAnchor: "middle", children: "R" }))] }, name));
+                }) })] }));
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "caelus-wheel",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "React SVG chart wheel for caelus: zodiac, houses, planets with collision avoidance, aspect lines. SSR-safe, zero runtime dependencies.",
   "type": "module",
   "main": "dist/src/index.js",