SUTRA Widget CDN

Библиотека переиспользуемых виджетов для ведических калькуляторов

v1/ Production

Widget	File	Ver	Type	Description
RashiChart	rashi-chart.js	4.0.0	Dumb	SVG North/South Indian chart, clickable houses
PlanetTable	planet-table.js	1.0.0	Dumb	9 Grahas table: sign, house, degree, nakshatra, dignity
ShadbalaBars	shadbala-bars.js	2.0.0	Dumb	Planetary strength bars (6 parameters per planet)
DashaTimeline	dasha-timeline.js	1.0.0	Dumb	120-year Vimshottari Dasha SVG timeline
PanchangBar	panchang-bar.js	2.0.0	Smart	Live Vedic calendar header (tithi, nakshatra, yoga, rahu kaal)
SutraForm	sutra-form.js	1.0.0	Smart	Birth data form + city autocomplete + API call
SutraFooter	sutra-footer.js	1.0.0	Dumb	Footer with disclaimer, copyright, links
SutraTelemetry	sutra-telemetry.js	1.0.0	System	Error tracking beacon

v2/ Coming Soon

Widget	Description	ETA
VedicChartAnimated	Animated N/S chart — planets move with CSS transitions	Ready
TimeMachine	Date/time slider — planets fly to new positions	v2.0
NakshatraWheel	27-sector circular wheel with info panel	v2.0
NavagrahaGrid	3x3 yantra of 9 grahas	v2.0
MoonPhase	Moon phase visualization + nakshatra	v2.0
PanchangFull	Complete panchang table (5 elements)	v2.0

Usage

<!-- Load from CDN -->
<script src="https://widgets.sutra.center/v1/rashi-chart.js"></script>

<!-- CSS Variable Contract (required) -->
<style>
:root {
  --text: #F0E8D8;
  --text-d: #6E5E4A;
  --text-m: #B8A890;
  --border: rgba(201,169,110,0.18);
  --surface: #1E1912;
  --brass: #C9A96E;
}
</style>

<!-- Container -->
<div id="rashi-chart"></div>

<!-- Initialize -->
<script>
RashiChart.render('rashi-chart', {
  ascendant: 7,
  planets: [
    {name:'Sun', sign:3, degree:29.4, retro:false},
    // ...
  ],
  style: 'north'
});
</script>

v2 Animated Chart

<script src="https://widgets.sutra.center/v2/vedichart-animated.js"></script>

<div id="chart"></div>

<script>
// Initial render
VedicChartAnimated.render('chart', {
  ascendant: 7,
  planets: [...],
  style: 'north',
  showDegrees: true,
  showToggle: true
});

// Animate to new positions (TimeMachine)
VedicChartAnimated.update('chart', newPlanets);
</script>

Architecture

SUTRA Architecture v1.0 — 8 Principles

• CSS Variable Contract — widgets read --text, --brass, --surface etc. with hardcoded fallbacks
• Error Boundaries — every widget wrapped in try/catch, errors sent to SutraTelemetry
• Event Bus — sutra:calculated, sutra:loading, sutra:error custom events on document
• SemVer — every widget exports WidgetName.VERSION
• Dumb vs Smart — Dumb widgets take data, Smart widgets fetch from API
• Zero Dependencies — vanilla JS only, no frameworks, no bundlers
• Container Pattern — render into any div by ID, never touch global DOM
• Graceful Degradation — missing CSS vars get fallback values, missing API shows skeleton

Event Bus

// Listen for calculation results
document.addEventListener('sutra:calculated', function(e) {
  var data = e.detail;
  RashiChart.render('chart', data);
  PlanetTable.render('table', data);
  ShadbalaBars.render('shadbala', data);
});

// Dispatch from SutraForm on successful API response
document.dispatchEvent(new CustomEvent('sutra:calculated', {
  detail: { ascendant, planets, dashas, ... }
}));