@roxyapi/ui 0.3.0 → 0.4.0

package/dist/styles/tokens.css

@@ -90,15 +90,12 @@
 	--roxy-motion-duration: 200ms;
 	--roxy-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
 
-	/* Heat scale: 7-step gradient used by ashtakavarga bindu cells.
-	 * Low bindus (1) are cool green; high bindus (7+) are hot red. */
-	--roxy-heat-1: #f0fdf4;
-	--roxy-heat-2: #d1fae5;
-	--roxy-heat-3: #a7f3d0;
-	--roxy-heat-4: #fde68a;
-	--roxy-heat-5: #fdba74;
-	--roxy-heat-6: #fb923c;
-	--roxy-heat-7: #ef4444;
+	/* Heat scale: a single base hue. Consumers mix it with `transparent` at
+	 * increasing percentages to paint cooler-to-hotter tiers. The mix-with-
+	 * transparent approach lets the page bg show through and keeps text
+	 * colour stable (always --roxy-fg), so the cells read in both themes
+	 * without per-tier text colours. */
+	--roxy-heat: var(--roxy-danger, #ef4444);
 }
 
 /* Dark theme via system preference */
@@ -134,13 +131,7 @@
 			0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
 		--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);
 
-		--roxy-heat-1: #052e16;
-		--roxy-heat-2: #14532d;
-		--roxy-heat-3: #166534;
-		--roxy-heat-4: #92400e;
-		--roxy-heat-5: #b45309;
-		--roxy-heat-6: #c2410c;
-		--roxy-heat-7: #b91c1c;
+		--roxy-heat: var(--roxy-danger, #ef4444);
 	}
 }
 
@@ -205,13 +196,7 @@
 		0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -2px rgba(0, 0, 0, 0.5);
 	--roxy-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.7);
 
-	--roxy-heat-1: #052e16;
-	--roxy-heat-2: #14532d;
-	--roxy-heat-3: #166534;
-	--roxy-heat-4: #92400e;
-	--roxy-heat-5: #b45309;
-	--roxy-heat-6: #c2410c;
-	--roxy-heat-7: #b91c1c;
+	--roxy-heat: var(--roxy-danger, #ef4444);
 }
 
 /* Reduced motion override */

package/dist/utils/base-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-styles.d.ts","sourceRoot":"","sources":["../../src/utils/base-styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,UAAU,yBAkFtB,CAAC"}
+{"version":3,"file":"base-styles.d.ts","sourceRoot":"","sources":["../../src/utils/base-styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,UAAU,yBAgGtB,CAAC"}

package/dist/utils/kundli-render.d.ts

@@ -1,19 +1,9 @@
 import type { TemplateResult } from 'lit';
-import { nothing } from 'lit';
-export declare const KUNDLI_SIZE = 300;
-export declare const KUNDLI_CENTER = 150;
 /**
- * Maps a lowercase rashi key (e.g. "aries") back to its canonical sign name
- * (e.g. "Aries"). Used by every kundli consumer to bridge spec lowercase
- * rashi keys to the title-cased SIGNS_ORDER tokens.
- */
-export declare const RASHI_TO_SIGN: Record<string, string>;
-/**
- * A planet placed in a kundli house. This is a render-only view model, not an
- * API type: it carries just enough per-graha detail to draw a compact label
- * (abbreviation plus degree-within-sign plus retrograde mark) and a rich SVG
- * `<title>` tooltip (full position, nakshatra, pada, avastha). Both the D1
- * birth chart and the Dx divisional charts feed it from their `meta` map.
+ * A graha placed inside a kundli cell. Render-only view model fed from a
+ * `meta` map on the API response. Carries enough detail to draw a compact
+ * in-cell label (abbreviation, whole degree, retrograde mark) and a rich SVG
+ * `<title>` tooltip (exact position, nakshatra, pada, avastha).
  */
 export interface PlacedGraha {
     graha: string;
@@ -26,102 +16,35 @@ export interface PlacedGraha {
     isRetrograde?: boolean;
     awastha?: string;
 }
-export interface HouseDef {
-    /** 1-based cell number. For the sign-fixed styles (south, east) this is the rashi index, Aries = 1. */
-    number: number;
-    /** Sign name (TitleCase, e.g. "Aries"). */
-    sign: string;
-    /** Planets occupying this house, with full detail for label + tooltip. */
-    planets: PlacedGraha[];
-    /** Whether this house is the ascendant (Lagna). */
-    isLagna: boolean;
-}
-/**
- * South Indian fixed-house square grid: house centers for planet text labels.
- * House 1 is fixed top-center; positions are in the 300x300 viewBox.
- */
-export declare const SOUTH_HOUSE_CENTERS: Record<number, {
-    x: number;
-    y: number;
-}>;
-/**
- * South Indian sign abbreviation positions (slightly outward from center).
- */
-export declare const SOUTH_SIGN_POSITIONS: Record<number, {
-    x: number;
-    y: number;
-}>;
 /**
- * North Indian style: 12 triangular house positions.
- * Lagna (house 1) is the top diamond, numbered clockwise.
- * Centers represent the visual midpoint of each triangular cell.
- */
-export declare const NORTH_HOUSE_CENTERS: Record<number, {
-    x: number;
-    y: number;
-}>;
-/**
- * East Indian style: a fixed-sign square (like South Indian) cut by both
- * diagonals and an inner diamond joining the side midpoints, giving 12 cells.
- * The four inner-diamond quadrilaterals hold the cardinal-position signs
- * (cell 1, 4, 7, 10) and the eight corner half-triangles fill between them,
- * laid out clockwise from the top so cell `n` holds the n-th rashi (Aries = 1).
- * Centers are the visual midpoints of those cells in the 300x300 viewBox,
- * derived from the frame geometry (square 10..290, diagonals, side-midpoint
- * diamond).
+ * Unified view model used by every kundli style. Caller passes a graha-keyed
+ * `meta` map (from `/vedic-astrology/birth-chart`, `/divisional-chart`, or
+ * `/navamsa`) through {@link toKundliViewModel} to produce this shape.
  *
- * @remarks The cell geometry is exact; the rashi-to-cell order follows the
- * common clockwise-from-top convention and is slated for a regional
- * reference-image confirmation pass (see docs/todo.md "East Indian polish").
- */
-export declare const EAST_HOUSE_CENTERS: Record<number, {
-    x: number;
-    y: number;
-}>;
-/**
- * East Indian sign abbreviation positions, nudged toward the outer edge of
- * every cell so the abbreviation and the planet stack do not collide.
- */
-export declare const EAST_SIGN_POSITIONS: Record<number, {
-    x: number;
-    y: number;
-}>;
-/**
- * Render a single south-Indian house group: lagna highlight, sign
- * abbreviation, planet labels with degree and tooltip.
- */
-export declare function renderSouthHouseGroup(h: HouseDef): TemplateResult | typeof nothing;
-/**
- * Render a north-Indian-style kundli wheel frame (grid lines only).
- * Returns the SVG structural lines; call `renderNorthHouseGroup` for content.
- */
-export declare function renderNorthFrame(): TemplateResult;
-/**
- * Render a north-Indian house group (sign abbr + house number + planets).
- */
-export declare function renderNorthHouseGroup(h: HouseDef): TemplateResult | typeof nothing;
-/**
- * Render the south-Indian square frame (border diamond + inner square + radial lines).
- */
-export declare function renderSouthFrame(): TemplateResult;
-/**
- * Render the east-Indian square frame: outer square, both diagonals, and the
- * inner diamond joining the four side midpoints. Twelve triangular cells.
+ * `placements` is keyed by lowercase rashi name (`"aries"`, `"taurus"`, ...)
+ * so the sign-fixed styles can index directly. The Lagna entry is not
+ * counted as a planet; it only flags the ascendant cell.
  */
-export declare function renderEastFrame(): TemplateResult;
+export interface KundliViewModel {
+    lagnaSign: string;
+    placements: Record<string, PlacedGraha[]>;
+    divisionLabel?: string;
+}
 /**
- * Render an east-Indian house group. East Indian charts are sign-fixed like
- * the south style, so this mirrors `renderSouthHouseGroup` with the east cell
- * centers and a smaller line height to fit the triangular cells.
+ * Kundli regional styles. Sign-fixed (south, east) and house-fixed (north).
+ * Exposed so consumers can type their own `chart-style` attribute reflection.
  */
-export declare function renderEastHouseGroup(h: HouseDef): TemplateResult | typeof nothing;
+export type ChartStyle = 'south' | 'north' | 'east';
 /**
- * Bucket a graha-keyed `meta` map (from a D1 or Dx chart response) into the 12
- * sign-indexed houses. Shared by the kundli and divisional chart components so
- * both render the same rich per-graha detail. The Lagna entry is consumed only
- * to flag the ascendant cell, not rendered as a planet.
+ * Bucket a graha-keyed `meta` map (D1 birth chart or D2..D60 divisional
+ * chart) into the unified {@link KundliViewModel} the renderer consumes. The
+ * Lagna entry is recognised by `graha === 'Lagna'` (or key `"Lagna"`) and
+ * sets `lagnaSign`; it is not bucketed as a placed planet.
+ *
+ * @param meta - Graha-keyed map; missing rashi entries are skipped.
+ * @param divisionLabel - Optional title written inside the chart centre.
  */
-export declare function buildHousesFromMeta(meta: Record<string, {
+export declare function toKundliViewModel(meta: Record<string, {
     graha?: string;
     rashi?: string;
     longitude?: number;
@@ -132,5 +55,21 @@ export declare function buildHousesFromMeta(meta: Record<string, {
     };
     isRetrograde?: boolean;
     awastha?: string;
-}>): HouseDef[];
+}>, divisionLabel?: string): KundliViewModel;
+/**
+ * Render the kundli body for the requested style. Returns the SVG inner
+ * content; the caller wraps it in an `<svg>` element with the canonical
+ * viewBox `0 0 400 400` and applies its own theming CSS.
+ */
+export declare function renderKundliSvg(vm: KundliViewModel, style: ChartStyle): TemplateResult;
+/**
+ * Render a WAI-ARIA-compliant tablist that lets the end user switch between
+ * South / North / East kundli styles at runtime. The hosting component owns
+ * the `chartStyle` state; this helper renders the buttons and wires the
+ * arrow-key navigation plus click handler.
+ *
+ * @param active - The currently selected style.
+ * @param setStyle - Callback the host component uses to update its state.
+ */
+export declare function renderKundliStyleTablist(active: ChartStyle, setStyle: (next: ChartStyle) => void): TemplateResult;
 //# sourceMappingURL=kundli-render.d.ts.map

package/dist/utils/kundli-render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"kundli-render.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-render.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"kundli-render.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AA+B1C;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAsGpD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAChC,IAAI,EAAE,MAAM,CACX,MAAM,EACN;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5D,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CACD,EACD,aAAa,CAAC,EAAE,MAAM,GACpB,eAAe,CAoBjB;AAmdD;;;;GAIG;AACH,wBAAgB,eAAe,CAC9B,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,UAAU,GACf,cAAc,CAShB;AAED;;;;;;;;GAQG;AACH,wBAAgB,wBAAwB,CACvC,MAAM,EAAE,UAAU,EAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,GAClC,cAAc,CAkChB"}

package/dist/utils/kundli-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Shared CSS for every kundli renderer (`<roxy-vedic-kundli>`,
+ * `<roxy-divisional-chart>`, and any future `<roxy-navamsa-chart>`). Centralises
+ * the SVG layout (responsive viewBox + aspect ratio), the line/text classes,
+ * and the Lagna highlight so the three components stay visually identical.
+ *
+ * @remarks Font sizes are written in viewBox user units (the chart is 400×400
+ * inside a 1:1 aspect-ratio container), so they scale linearly from a 320px
+ * phone surface to a wall projector without raster loss. The Lagna palette
+ * tracks `--roxy-accent` so host themes flow through unchanged.
+ */
+export declare const kundliStyles: import("lit").CSSResult;
+//# sourceMappingURL=kundli-styles.d.ts.map

package/dist/utils/kundli-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kundli-styles.d.ts","sourceRoot":"","sources":["../../src/utils/kundli-styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,yBA8GxB,CAAC"}

package/dist/version.d.ts

@@ -1,2 +1,2 @@
-export declare const ROXY_UI_VERSION = "0.3.0";
+export declare const ROXY_UI_VERSION = "0.4.0";
 //# sourceMappingURL=version.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roxyapi/ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Web components for the RoxyAPI catalog. Drop-in charts, tables, cards, forms for astrology, tarot, numerology, biorhythm, I Ching, crystals, dreams, angel numbers, and more. One key, beautiful in 30 minutes.",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/ashtakavarga-grid.ts

@@ -129,27 +129,68 @@ export class RoxyAshtakavargaGrid extends LitElement {
 				border-bottom: none;
 			}
 
-			/* Heat cells */
+			/* Heat cells. Single base hue (var --roxy-heat) mixed with
+			 * transparent at increasing percentages produces seven readable
+			 * tiers in both light and dark themes. Text colour stays
+			 * var(--roxy-fg) so it inverts with the host theme without
+			 * per-tier overrides. */
 			.heat-cell {
 				border-radius: var(--roxy-radius-sm, 4px);
 				font-weight: var(--roxy-weight-bold, 600);
 				min-width: 2rem;
 				font-variant-numeric: tabular-nums;
+				color: var(--roxy-fg, currentColor);
 			}
 
-			.heat-1 { background: var(--roxy-heat-1, #f0fdf4); color: var(--roxy-fg, #0a0a0a); }
-			.heat-2 { background: var(--roxy-heat-2, #d1fae5); color: var(--roxy-fg, #0a0a0a); }
-			.heat-3 { background: var(--roxy-heat-3, #a7f3d0); color: var(--roxy-fg, #0a0a0a); }
-			.heat-4 { background: var(--roxy-heat-4, #fde68a); color: var(--roxy-fg, #0a0a0a); }
-			.heat-5 { background: var(--roxy-heat-5, #fdba74); color: var(--roxy-fg, #0a0a0a); }
-			.heat-6 { background: var(--roxy-heat-6, #fb923c); color: var(--roxy-fg, #0a0a0a); }
-			.heat-7 { background: var(--roxy-heat-7, #ef4444); color: var(--roxy-fg, #0a0a0a); }
+			.heat-1 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 6%, transparent); }
+			.heat-2 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 14%, transparent); }
+			.heat-3 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 26%, transparent); }
+			.heat-4 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 40%, transparent); }
+			.heat-5 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 55%, transparent); }
+			.heat-6 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 72%, transparent); }
+			.heat-7 { background: color-mix(in srgb, var(--roxy-heat, #ef4444) 90%, transparent); }
 
 			/* Bhinna grid: planet header column narrower */
 			.bhinna-table th:first-child,
 			.bhinna-table td:first-child {
 				min-width: 5rem;
 			}
+
+			/* Tight cells below 480px so the 14-column bhinna grid stops
+			 * overflowing the viewport. The wrapper keeps overflow-x:auto as
+			 * a fallback for very long content. */
+			@container (max-width: 480px) {
+				.bhinna-table th,
+				.bhinna-table td {
+					padding: 0.3rem 0.35rem;
+					font-size: var(--roxy-text-xs, 0.75rem);
+				}
+				.bhinna-table th:first-child,
+				.bhinna-table td:first-child {
+					min-width: 3.5rem;
+				}
+				.heat-cell {
+					min-width: 1.5rem;
+				}
+			}
+			/* Visual cue that the bhinna table is scrollable below the breakpoint:
+			 * a soft gradient at the right edge so users see there is more to scroll. */
+			.overflow-scroll {
+				mask-image: linear-gradient(
+					to right,
+					transparent 0,
+					black 0.5rem,
+					black calc(100% - 1rem),
+					transparent 100%
+				);
+				-webkit-mask-image: linear-gradient(
+					to right,
+					transparent 0,
+					black 0.5rem,
+					black calc(100% - 1rem),
+					transparent 100%
+				);
+			}
 		`,
 	];
 
@@ -237,7 +278,11 @@ export class RoxyAshtakavargaGrid extends LitElement {
 		});
 	}
 
-	private heatClass(count: number): string {
+	/**
+	 * Bhinna bindus per planet per sign run 0..8 (sum of 0/1 contributions
+	 * from each of the 8 reference points). Bucket directly by raw count.
+	 */
+	private bhinnaHeat(count: number): string {
 		if (count <= 1) return 'heat-1';
 		if (count <= 2) return 'heat-2';
 		if (count <= 3) return 'heat-3';
@@ -247,6 +292,23 @@ export class RoxyAshtakavargaGrid extends LitElement {
 		return 'heat-7';
 	}
 
+	/**
+	 * Sarva bindus per sign are the column total across all 7 planets, range
+	 * roughly 0..56 with typical values 20..40. Bucketed per classical
+	 * interpretation: 25 below par, 25..30 average, 30..40 strong, 40+ very
+	 * strong. Bucket spans intentionally widen at the extremes so a single
+	 * outlier sign reads as exceptional.
+	 */
+	private sarvaHeat(count: number): string {
+		if (count <= 18) return 'heat-1';
+		if (count <= 23) return 'heat-2';
+		if (count <= 28) return 'heat-3';
+		if (count <= 32) return 'heat-4';
+		if (count <= 37) return 'heat-5';
+		if (count <= 42) return 'heat-6';
+		return 'heat-7';
+	}
+
 	private renderSarva(signs: AshtakavargaResponse['signs']) {
 		const sav = this.data!.sarvashtakavarga;
 		if (!sav) return html`<p class="roxy-empty">No sarvashtakavarga data</p>`;
@@ -262,7 +324,7 @@ export class RoxyAshtakavargaGrid extends LitElement {
 				<tbody>
 					${signs.map((sign, i) => {
 						const count = sav.bindus[i] ?? 0;
-						const hc = this.heatClass(count);
+						const hc = this.sarvaHeat(count);
 						return html`<tr>
 							<td>
 								<div class="planet-cell">
@@ -306,7 +368,7 @@ export class RoxyAshtakavargaGrid extends LitElement {
 						(row) => html`<tr>
 						<td>${row.planet}</td>
 						${row.bindus.map((count) => {
-							const hc = this.heatClass(count);
+							const hc = this.bhinnaHeat(count);
 							return html`<td class="${`heat-cell ${hc}`}">${count}</td>`;
 						})}
 						<td>${row.total}</td>

package/src/components/choghadiya-grid.ts

@@ -92,6 +92,21 @@ export class RoxyChoghadiyaGrid extends LitElement {
 				background: transparent;
 				color: var(--roxy-fg, #0a0a0a);
 			}
+			.cho-tile.now {
+				outline: 2px solid var(--roxy-accent, #f59e0b);
+				outline-offset: 1px;
+				box-shadow: 0 0 0 4px
+					color-mix(in srgb, var(--roxy-accent, #f59e0b) 18%, transparent);
+			}
+			.now-badge {
+				display: inline-block;
+				margin-left: 0.4em;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-accent-fg, #b45309);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
 			.tile-name {
 				font-size: var(--roxy-text-base, 1rem);
 				font-weight: var(--roxy-weight-bold, 600);
@@ -120,6 +135,19 @@ export class RoxyChoghadiyaGrid extends LitElement {
 	@property({ attribute: false })
 	data: GetChoghadiyaResponse | null = null;
 
+	/**
+	 * True when the current wall-clock time falls inside this period. Both
+	 * `start` and `end` are ISO 8601 with timezone, so the comparison is
+	 * timezone-aware via the host's `Date` parsing.
+	 */
+	private isCurrent(period: ChoghadiyaPeriod): boolean {
+		const now = Date.now();
+		const start = Date.parse(period.start);
+		const end = Date.parse(period.end);
+		if (Number.isNaN(start) || Number.isNaN(end)) return false;
+		return now >= start && now < end;
+	}
+
 	private renderTile(period: ChoghadiyaPeriod) {
 		const effectClass =
 			period.effect === 'Good'
@@ -127,10 +155,17 @@ export class RoxyChoghadiyaGrid extends LitElement {
 				: period.effect === 'Bad'
 					? 'bad'
 					: 'neutral';
+		const current = this.isCurrent(period);
 		const lordGlyph = PLANET_GLYPH[capitalize(period.lord)] ?? '';
 		const timeRange = `${fmtTime(period.start)} - ${fmtTime(period.end)}`;
-		return html`<div class="cho-tile ${effectClass}" role="listitem">
-			<span class="tile-name">${period.name}</span>
+		return html`<div
+			class="cho-tile ${effectClass}${current ? ' now' : ''}"
+			role="listitem"
+			aria-current=${current ? 'time' : 'false'}
+		>
+			<span class="tile-name">
+				${period.name}${current ? html`<span class="now-badge">Now</span>` : nothing}
+			</span>
 			<span class="tile-time" aria-label="Time range">${timeRange}</span>
 			<span class="tile-lord">
 				${lordGlyph ? html`<span aria-hidden="true">${lordGlyph}</span>` : nothing}

package/src/components/dasha-timeline.ts

@@ -68,6 +68,13 @@ export class RoxyDashaTimeline extends LitElement {
 				color: var(--roxy-fg, #0a0a0a);
 			}
 
+			.balance {
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+				border-left: 2px solid var(--roxy-border, #e4e4e7);
+				padding-left: var(--roxy-space-sm, 0.5rem);
+				margin: 0;
+			}
 			.timeline {
 				display: grid;
 				gap: var(--roxy-space-xs, 0.25rem);
@@ -79,26 +86,69 @@ export class RoxyDashaTimeline extends LitElement {
 				align-items: center;
 				font-size: var(--roxy-text-sm, 0.875rem);
 			}
+			.bar.now strong {
+				color: var(--roxy-accent-fg, #b45309);
+			}
+			.now-badge {
+				display: inline-block;
+				margin-left: 0.4em;
+				font-size: var(--roxy-text-xs, 0.75rem);
+				font-weight: var(--roxy-weight-bold, 600);
+				color: var(--roxy-accent-fg, #b45309);
+				text-transform: uppercase;
+				letter-spacing: 0.06em;
+			}
 			.bar-track {
+				position: relative;
 				height: 14px;
 				background: var(--roxy-border, #e4e4e7);
 				border-radius: var(--roxy-radius-full, 9999px);
 				overflow: hidden;
 			}
-			.bar-track > span {
+			.bar-fill {
 				display: block;
 				height: 100%;
 				background: var(--roxy-accent, #f59e0b);
+				opacity: 0.45;
 				transition:
 					width var(--roxy-motion-duration, 200ms)
 					var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1));
 			}
+			.bar-now .bar-fill {
+				opacity: 1;
+			}
+			.bar-progress {
+				position: absolute;
+				top: -2px;
+				bottom: -2px;
+				width: 2px;
+				background: var(--roxy-accent-fg, #b45309);
+				border-radius: 2px;
+				box-shadow: 0 0 0 2px
+					color-mix(in srgb, var(--roxy-accent, #f59e0b) 35%, transparent);
+			}
 			.dates {
 				color: var(--roxy-muted, #71717a);
 				font-size: var(--roxy-text-xs, 0.75rem);
 				font-variant-numeric: tabular-nums;
 				text-align: right;
 			}
+			details.interp {
+				border: 1px solid var(--roxy-border, #e4e4e7);
+				border-radius: var(--roxy-radius-md, 8px);
+				padding: var(--roxy-space-sm, 0.5rem) var(--roxy-space-md, 1rem);
+				background: var(--roxy-bg, #fff);
+			}
+			details.interp summary {
+				cursor: pointer;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				font-weight: var(--roxy-weight-bold, 600);
+			}
+			details.interp p {
+				margin: var(--roxy-space-sm, 0.5rem) 0 0;
+				font-size: var(--roxy-text-sm, 0.875rem);
+				color: var(--roxy-muted, #71717a);
+			}
 		`,
 	];
 
@@ -139,6 +189,7 @@ export class RoxyDashaTimeline extends LitElement {
 				}
 			</header>
 
+			${this.renderBirthBalance(d)}
 			${this.period === 'current' ? this.renderCurrent(d) : nothing}
 			${
 				periods.length > 0
@@ -147,9 +198,37 @@ export class RoxyDashaTimeline extends LitElement {
 					</div>`
 					: nothing
 			}
+			${this.renderActiveInterpretation(periods)}
 		</div>`;
 	}
 
+	private renderBirthBalance(d: DashaData) {
+		if (!('birthDashaBalance' in d) || !d.birthDashaBalance) return nothing;
+		const b = d.birthDashaBalance;
+		const lord = 'nakshatraLord' in d && d.nakshatraLord ? d.nakshatraLord : '';
+		const yrs = b.years ?? 0;
+		const mo = b.months ?? 0;
+		const da = b.days ?? 0;
+		const parts: string[] = [];
+		if (yrs) parts.push(`${yrs}y`);
+		if (mo) parts.push(`${mo}m`);
+		if (da) parts.push(`${da}d`);
+		const remaining = parts.length ? parts.join(' ') : '0d';
+		return html`<p class="balance">
+			Birth dasha balance: ${remaining} of
+			${lord ? html`<strong>${lord}</strong>` : 'the opening mahadasha'} remained at birth.
+		</p>`;
+	}
+
+	private renderActiveInterpretation(periods: DashaPeriod[]) {
+		const active = periods.find((p) => this.isCurrent(p));
+		if (!active?.interpretation) return nothing;
+		return html`<details class="interp">
+			<summary>${active.planet} mahadasha interpretation</summary>
+			<p>${active.interpretation}</p>
+		</details>`;
+	}
+
 	private renderCurrent(d: DashaData) {
 		if (!('mahadasha' in d)) return nothing;
 		return html`<div class="current">
@@ -201,12 +280,64 @@ export class RoxyDashaTimeline extends LitElement {
 		return [];
 	}
 
+	/** True when the current wall-clock time falls between the period's start and end. */
+	private isCurrent(p: DashaPeriod): boolean {
+		if (!p.startDate || !p.endDate) return false;
+		const now = Date.now();
+		const start = Date.parse(p.startDate);
+		const end = Date.parse(p.endDate);
+		if (Number.isNaN(start) || Number.isNaN(end)) return false;
+		return now >= start && now < end;
+	}
+
+	/**
+	 * Fractional progress (0..1) through a period at the current time. Used to
+	 * draw a vertical "now" marker inside the active bar. Returns -1 outside the
+	 * period so the caller can skip the marker.
+	 */
+	private progressIn(p: DashaPeriod): number {
+		if (!p.startDate || !p.endDate) return -1;
+		const start = Date.parse(p.startDate);
+		const end = Date.parse(p.endDate);
+		const now = Date.now();
+		if (
+			Number.isNaN(start) ||
+			Number.isNaN(end) ||
+			now < start ||
+			now >= end ||
+			end <= start
+		) {
+			return -1;
+		}
+		return (now - start) / (end - start);
+	}
+
 	private renderBar(p: DashaPeriod, max: number) {
 		const years = p.durationYears;
 		const width = max > 0 ? (years / max) * 100 : 0;
-		return html`<div class="bar" role="listitem">
-			<span>${p.planet}</span>
-			<span class="bar-track"><span style="width: ${width}%"></span></span>
+		const current = this.isCurrent(p);
+		const progress = current ? this.progressIn(p) : -1;
+		const trackClass = current ? 'bar-track bar-now' : 'bar-track';
+		return html`<div
+			class=${current ? 'bar now' : 'bar'}
+			role="listitem"
+			aria-current=${current ? 'time' : 'false'}
+		>
+			<span>
+				<strong>${p.planet}</strong>${current ? html`<span class="now-badge">Now</span>` : nothing}
+			</span>
+			<span class=${trackClass}>
+				<span class="bar-fill" style="width: ${width}%"></span>
+				${
+					progress >= 0
+						? html`<span
+							class="bar-progress"
+							style="left: ${progress * width}%"
+							aria-hidden="true"
+						></span>`
+						: nothing
+				}
+			</span>
 			<span class="dates">
 				${p.startDate ? formatYear(p.startDate) : ''}
 				${p.endDate ? html`- ${formatYear(p.endDate)}` : ''}