Track · nav

Nav track

Shared ecosystem top-bar web component. One source for every Insights by Omkar subdomain (studio.*, insightsbyomkar.com, netra.*, api.*, urja.*) — drop a <script> + a <iby-ecosystem-nav> tag and the bar renders identically everywhere.

Endpoints

Route	Purpose
`GET /api/v2/nav/ecosystem-nav.js`	Current — full identity + app-launcher.
`GET /api/v1/nav/ecosystem-nav.js`	v1 thin product bar, still served. v1 → v2 migration is a script-src swap.

Both public, no key required.

Minimal integration

<script src="https://urja.insightsbyomkar.com/api/v2/nav/ecosystem-nav.js"></script>

<iby-ecosystem-nav current="studio"></iby-ecosystem-nav>

current= takes a product slug — it pins the active-tile highlight inside the waffle launcher.

v2 attributes

Attribute	Purpose
`current`	Active product slug (`studio` / `chambers` / `netra` / `api` / `visual`).
`user-email`	Authed user's email; shows in the avatar menu.
`user-display-name`	Optional display label.
`user-avatar-initial`	One-char avatar fallback when there's no image.
`search`	Opt-in placeholder for the `⌘K` command palette.
`return-url`	Where the "Sign in" / "Sign out" actions redirect to.

Omit everything and the bar renders anonymously — product tiles + "Sign in" button on the right.

v2 events

The component emits these on itself (composed + bubbling):

ecosystem-nav:search — payload { query } when the user types.
ecosystem-nav:search-open — palette opened (e.g. via ⌘K).
ecosystem-nav:waffle-open / waffle-close — app-launcher state.
ecosystem-nav:signout — the signout action was picked.

document.querySelector("iby-ecosystem-nav").addEventListener(
  "ecosystem-nav:search",
  (e) => console.log("query", e.detail.query),
);

Product registry

The waffle tiles + tile order come from a single registry at lib/nav/products.ts in this repo. Five entries today: studio, chambers (Insights by Omkar), netra, api (Astrology API), visual (Urja). Adding a product is one more entry in that file → next Urja deploy ships it to every host.

Theming

The component reads CSS custom properties from its host:

Var	Default	Effect
`--ds-bg-canvas`	`#fff`	Bar background.
`--ds-text-strong`	`#0f172a`	Primary text.
`--ds-border-hairline`	subtle	Bottom border.
`--ds-accent-gold`	`#b8860b`	Focus / hover accent.

If the host already loads /api/v1/tokens?format=css, the bar picks those values automatically. Falls back to inline defaults otherwise. Respects prefers-reduced-motion and [data-theme="dark"] out of the box.

Migration v1 → v2

Swap the script src. Same tag, same current= attribute. New attributes above are opt-in. The internal product list + waffle visual shipped in v2; old hosts pinning /api/v1/ keep the thin bar until they're ready.