@zumer/orbit-kit 0.1.0

package/src/o-menu.js

@@ -0,0 +1,280 @@
+/**
+ * <o-menu> — radial / pie menu, single- or multi-level, two expansion modes.
+ *
+ * Each sector is an <o-arc> whose curved label rides the arc itself (Orbit
+ * renders textContent along the sector path, auto-centered — no angle math).
+ * Items may nest via `children`. Two ways to reveal a branch's children:
+ *
+ *   expand="drill"       (default) — the ring REPLACES itself with the
+ *                          sub-level; the center becomes a "back" button.
+ *   expand="concentric"  — the parent ring STAYS and the children fan out in an
+ *                          outer arc aligned to the chosen sector's wedge
+ *                          (the radial-editor look). Click an open branch to
+ *                          collapse it; the center resets to the top.
+ *
+ * Items may carry an `icon` (emoji or raw SVG string), placed dead-center on
+ * the sector via `--o-angle-composite` and kept upright with `spin-lock`.
+ *
+ * Events (bubbling):
+ *   - `select`   detail { value, label, item, path:[indices] }
+ *   - `navigate` detail { path:[indices], depth }
+ *
+ * `el.path` reads the open path; `el.back()` / `el.reset()` navigate.
+ */
+import { OrbitKitElement, define, injectStyleOnce } from './base.js';
+
+const MENU_CSS = `
+o-menu { --o-menu-hub: rgba(20,22,30,.92); }
+o-menu o-arc.o-menu-item { cursor: pointer; transition: filter .18s ease; }
+o-menu o-arc.o-menu-item:hover { filter: brightness(1.25); }
+o-menu o-arc.o-menu-item.is-active { filter: brightness(1.4) drop-shadow(0 0 6px currentColor); }
+o-menu .o-menu-icon { pointer-events: none; }
+o-menu .o-menu-icon .capsule { display: flex; align-items: center; justify-content: center; }
+o-menu .ok-menu-ring { animation: ok-menu-in .22s cubic-bezier(.2,.7,.3,1); transform-origin: center; }
+@keyframes ok-menu-in { from { opacity: .25; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
+o-menu .o-menu-hub {
+  border-radius: 50%;
+  background: var(--o-menu-hub);
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
+  padding: 16%;
+  font-weight: 800; text-align: center; line-height: 1.12;
+  display: flex; align-items: center; justify-content: center;
+  transition: color .18s ease, background .18s ease;
+}
+o-menu .o-menu-hub.is-back { cursor: pointer; }
+o-menu .o-menu-hub.is-back:hover { background: var(--o-menu-hub-hover, rgba(36,40,54,.96)); }
+/* Monochrome theme: slate sectors that tint to the accent on hover / active. */
+o-menu.o-menu--mono o-arc.o-menu-item { --o-fill: var(--ok-menu-slate, #2b333f); --o-stroke: var(--ok-menu-slate, #2b333f); transition: filter .18s, --o-fill .18s; }
+o-menu.o-menu--mono o-arc.o-menu-item:hover { --o-fill: var(--ok-menu-accent, #3da9fc); --o-stroke: var(--ok-menu-accent, #3da9fc); filter: none; }
+o-menu.o-menu--mono o-arc.o-menu-item.is-active { --o-fill: var(--ok-menu-accent, #3da9fc); --o-stroke: var(--ok-menu-accent, #3da9fc); filter: none; }
+`;
+
+// Refined, slightly desaturated palette (not the saturated rainbow).
+const PALETTE = ['#6b72c9', '#3ea58f', '#cf9a52', '#cf6b6b', '#5e9fd0', '#9b80c9', '#c77ba2', '#85ab5c'];
+
+export class OrbitMenu extends OrbitKitElement {
+  static get observedAttributes() {
+    return ['items', 'size', 'orbit', 'range', 'from', 'gap', 'fill', 'label', 'label-color', 'expand', 'theme', 'accent'];
+  }
+
+  /** Recursively normalize the items tree. */
+  _norm(items) {
+    return (items || []).map((it, i) => ({
+      label: it.label != null ? String(it.label) : `Item ${i + 1}`,
+      value: it.value !== undefined ? it.value : (it.label ?? i),
+      color: it.color || null,
+      icon: it.icon != null ? String(it.icon) : null,
+      children: it.children ? this._norm(it.children) : null
+    }));
+  }
+
+  readConfig() {
+    const range = this._num('range', 360);
+    return {
+      items: this._norm(this._json('items', []) || []),
+      range,
+      from: this.hasAttribute('from') ? this._num('from', 0)
+                                      : (range === 360 ? 0 : this._autoFrom(range)),
+      orbit: Math.round(this._num('orbit', 4)),
+      size: this._str('size', '280px'),
+      gap: this._num('gap', 6),
+      labelColor: this._str('label-color', '#f8fafc'),
+      theme: this._str('theme', 'mono') === 'color' ? 'color' : 'mono',
+      accent: this._str('accent', '#3da9fc'),
+      expand: this._str('expand', 'drill') === 'concentric' ? 'concentric' : 'drill',
+      label: this.hasAttribute('label') ? this.getAttribute('label') : 'MENU'
+    };
+  }
+
+  structuralSignature(cfg) {
+    return JSON.stringify(cfg);
+  }
+
+  build(cfg) {
+    injectStyleOnce('orbit-kit-menu', MENU_CSS);
+    this._cfg = cfg;
+    this.classList.toggle('o-menu--mono', cfg.theme === 'mono');
+    this.style.setProperty('--ok-menu-accent', cfg.accent);
+    if (!this._path) this._path = [];
+    if (cfg.expand === 'concentric') this._buildConcentric(cfg);
+    else this._buildDrill(cfg);
+    this._wireKeys();
+  }
+
+  /** Render one ring of sectors (+ centered icons) at a given orbit/wedge. */
+  _ring(items, from, range, orbit, level, openIndex, cfg) {
+    const N = items.length || 1;
+    const sliceW = range / N;
+    const arcs = items.map((it, i) => {
+      const color = it.color || PALETTE[i % PALETTE.length];
+      const isBranch = !!(it.children && it.children.length);
+      const text = it.icon ? '' : it.label + (isBranch ? ' ›' : '');
+      const cls = `o-menu-item${isBranch ? ' is-branch' : ''}${openIndex === i ? ' is-active' : ''}`;
+      // Mono theme paints fills via CSS (so :hover/:active can tint them);
+      // color theme sets the per-item color inline.
+      const style = cfg.theme === 'mono'
+        ? `--o-gap:${cfg.gap};--o-color:${cfg.labelColor};font-weight:700;`
+        : `--o-fill:${color};--o-stroke:${color};--o-gap:${cfg.gap};--o-color:${cfg.labelColor};font-weight:700;`;
+      // Flip labels whose sector sits in the lower half so text stays upright.
+      const phi = (((from + (i + 0.5) * sliceW) % 360) + 360) % 360;
+      const flip = phi > 90 && phi < 270 ? ' flip' : '';
+      return `<o-arc class="${cls}" data-level="${level}" data-index="${i}" shape="rounded"${flip} style="${style}">${text}</o-arc>`;
+    }).join('');
+    const arcRing = `<div class="orbit-${orbit} ok-menu-ring" style="--o-range:${range}deg;--o-from:${from}deg;">${arcs}</div>`;
+    // Icons live in their OWN orbit so they don't pollute the arcs' count-based
+    // distribution. Each is pinned to its sector center via an explicit
+    // composite that MATCHES the count-based arc center (no fit-range, which
+    // would shift the arcs and misalign the icons).
+    const icons = items.map((it, i) => it.icon
+      ? `<div class="satellite spin-lock o-menu-icon" style="--o-angle-composite:calc(${((i + 0.5) * sliceW - 90).toFixed(2)}deg);"><div class="capsule">${it.icon}</div></div>`
+      : '').join('');
+    const iconRing = icons
+      ? `<div class="orbit-${orbit}" style="--o-from:${from}deg;">${icons}</div>`
+      : '';
+    return arcRing + iconRing;
+  }
+
+  _buildConcentric(cfg) {
+    let rings = '', from = cfg.from, range = cfg.range, items = cfg.items, orbit = cfg.orbit;
+    for (let d = 0; ; d++) {
+      const openIndex = this._path[d];
+      rings += this._ring(items, from, range, orbit, d, openIndex ?? null, cfg);
+      if (openIndex == null) break;
+      const branch = items[openIndex];
+      if (!branch || !branch.children || !branch.children.length) { this._path = this._path.slice(0, d); break; }
+      const sliceW = range / (items.length || 1);
+      from = from + openIndex * sliceW;
+      range = sliceW;
+      items = branch.children;
+      orbit += 2;
+    }
+    const open = this._path.length > 0;
+    this.innerHTML = `
+      <div class="bigbang" style="width:${cfg.size};aspect-ratio:1;">
+        <div class="gravity-spot">
+          ${rings}
+          <div class="orbit-0"><div class="satellite at-center"><div class="capsule o-menu-hub${open ? ' is-back' : ''}">${cfg.label}</div></div></div>
+        </div>
+      </div>`;
+    this._hub = this.querySelector('.o-menu-hub');
+    this._arcs = [...this.querySelectorAll('.o-menu-item')];
+    this._bindArcs((lvl, i) => this._activateAt(lvl, i));
+    if (this._hub && open) this._hub.addEventListener('click', () => this.reset());
+  }
+
+  _buildDrill(cfg) {
+    const { level, trail } = this._resolveLevel(cfg.items);
+    this._level = level;
+    const atRoot = this._path.length === 0;
+    const hubText = atRoot ? cfg.label : `‹ ${trail[trail.length - 1].label}`;
+    const ring = this._ring(level, cfg.from, cfg.range, cfg.orbit, this._path.length, null, cfg);
+    this.innerHTML = `
+      <div class="bigbang" style="width:${cfg.size};aspect-ratio:1;">
+        <div class="gravity-spot">
+          ${ring}
+          <div class="orbit-0"><div class="satellite at-center"><div class="capsule o-menu-hub${atRoot ? '' : ' is-back'}">${hubText}</div></div></div>
+        </div>
+      </div>`;
+    this._hub = this.querySelector('.o-menu-hub');
+    this._arcs = [...this.querySelectorAll('.o-menu-item')];
+    this._bindArcs((lvl, i) => this._activateAt(this._path.length, i));
+    if (this._hub && !atRoot) this._hub.addEventListener('click', () => this.back());
+  }
+
+  _bindArcs(onActivate) {
+    this._arcs.forEach((arc) => {
+      const lvl = Number(arc.dataset.level), i = Number(arc.dataset.index);
+      arc.addEventListener('click', () => onActivate(lvl, i));
+      arc.addEventListener('pointerenter', () => this._setHub(this._itemsAtLevel(lvl)[i]?.label));
+      arc.addEventListener('pointerleave', () => this._setHub());
+    });
+  }
+
+  _wireKeys() {
+    this.tabIndex = 0;
+    if (this._keyBound) return;
+    this._keyBound = true;
+    this.addEventListener('keydown', (e) => {
+      if ((e.key === 'Escape' || e.key === 'Backspace') && this._path.length) {
+        e.preventDefault();
+        this._cfg.expand === 'concentric' ? (this._path = this._path.slice(0, -1), this.build(this._cfg)) : this.back();
+      }
+    });
+  }
+
+  /** Items array at a given depth, walking the open path. */
+  _itemsAtLevel(level) {
+    let items = this._cfg.items;
+    for (let d = 0; d < level; d++) {
+      const node = items[this._path[d]];
+      if (!node || !node.children) return items;
+      items = node.children;
+    }
+    return items;
+  }
+
+  /** Drill-mode: resolve items at the current path; reset if invalid. */
+  _resolveLevel(root) {
+    let level = root; const trail = [];
+    for (const idx of this._path) {
+      const node = level[idx];
+      if (!node || !node.children || !node.children.length) { this._path = []; return { level: root, trail: [] }; }
+      trail.push(node); level = node.children;
+    }
+    return { level, trail };
+  }
+
+  _setHub(text) {
+    if (!this._hub) return;
+    this._hub.textContent = text != null ? text
+      : (this._path.length && this._cfg.expand === 'drill'
+          ? `‹ ${this._itemsAtLevel(this._path.length - 1)[this._path[this._path.length - 1]]?.label ?? this._cfg.label}`
+          : (this._selectedLabel ?? this._cfg.label));
+  }
+
+  /** Activate sector `i` at depth `level`: drill/expand a branch, or select a leaf. */
+  _activateAt(level, i) {
+    const items = this._itemsAtLevel(level);
+    const it = items[i];
+    if (!it) return;
+    const isBranch = it.children && it.children.length;
+    if (isBranch) {
+      // Concentric toggles; drill always opens the next level.
+      if (this._cfg.expand === 'concentric' && this._path[level] === i) this._path = this._path.slice(0, level);
+      else this._path = [...this._path.slice(0, level), i];
+      this.build(this._cfg);
+      this.dispatchEvent(new CustomEvent('navigate', { detail: { path: [...this._path], depth: this._path.length }, bubbles: true }));
+    } else {
+      this._value = it.value;
+      this._selectedLabel = it.label;
+      this._path = this._path.slice(0, level);
+      this.build(this._cfg);
+      this.dispatchEvent(new CustomEvent('select', {
+        detail: { value: it.value, label: it.label, item: it, path: [...this._path, i] }, bubbles: true
+      }));
+    }
+  }
+
+  // --- public API ---
+  get path() { return [...(this._path || [])]; }
+  get value() { return this._value; }
+  back() {
+    if (!this._path || !this._path.length) return;
+    this._path = this._path.slice(0, -1);
+    this.build(this._cfg);
+    this.dispatchEvent(new CustomEvent('navigate', { detail: { path: [...this._path], depth: this._path.length }, bubbles: true }));
+  }
+  reset() {
+    if (!this._path.length) return;
+    this._path = [];
+    this.build(this._cfg);
+    this.dispatchEvent(new CustomEvent('navigate', { detail: { path: [], depth: 0 }, bubbles: true }));
+  }
+
+  // Back-compat with the former flat menu.
+  _activate(i) { this._activateAt(this._path.length, i); }
+  _select(i) { this._activateAt(this._path.length, i); }
+  get selectedIndex() { return this._value != null && this._path.length === 0 ? this._arcs.findIndex((a) => a.classList.contains('is-active')) : -1; }
+}
+
+define('o-menu', OrbitMenu);

package/src/o-meter.js

@@ -0,0 +1,109 @@
+/**
+ * <o-meter> — speedometer / tachometer gauge with ticks, colored zones and a needle.
+ *
+ * Collapses the Orbit recipe:
+ *
+ *   .bigbang > .gravity-spot
+ *     ├── .orbit-{outer}   (range/from, fit-range) > .vector × ticks
+ *     ├── .orbit-{mid}     (range/from)            > <o-arc> × zones
+ *     ├── .orbit-{inner}   (range/from)            > <o-arc shape="arrow"> (needle)
+ *     └── .orbit-0 > .satellite.at-center > .capsule   (value + unit)
+ *
+ * ...into one tag:
+ *
+ *   <o-meter value="125" min="0" max="240" unit="km/h" ticks="9"
+ *     zones='[{"from":0,"to":140,"color":"#22c55e"},
+ *             {"from":140,"to":200,"color":"#eab308"},
+ *             {"from":200,"to":240,"color":"#ef4444"}]'></o-meter>
+ *
+ * Zones are given in value units (min..max). The needle and tick layers are
+ * cheap to patch, so changing `value` only re-points the needle (no rebuild).
+ */
+import { OrbitKitElement, define } from './base.js';
+
+export class OrbitMeter extends OrbitKitElement {
+  static get observedAttributes() {
+    return ['value', 'min', 'max', 'range', 'from', 'size', 'ticks',
+            'zones', 'fill', 'unit', 'label', 'needle-color', 'glow'];
+  }
+
+  readConfig() {
+    const range = this._num('range', 270);
+    const min = this._num('min', 0);
+    const max = this._num('max', 100);
+    const span = (max - min) || 1;
+    const zones = (this._json('zones', []) || []).map((z) => ({
+      from: Number(z.from) || 0,
+      to: Number(z.to) || 0,
+      color: z.color || '#6366f1'
+    }));
+    return {
+      value: this._num('value', min),
+      min, max, span, range, zones,
+      from: this.hasAttribute('from') ? this._num('from', 0) : this._autoFrom(range),
+      size: this._str('size', '220px'),
+      ticks: Math.max(0, Math.round(this._num('ticks', 9))),
+      needleColor: this._str('needle-color', '#e5e7eb'),
+      unit: this._str('unit', ''),
+      glow: this.getAttribute('glow'),
+      label: this.hasAttribute('label') ? this.getAttribute('label') : null
+    };
+  }
+
+  structuralSignature(cfg) {
+    // Everything except `value` and `label` is structural; the needle and the
+    // center readout are patched in sync() so the arc isn't rebuilt per frame.
+    const { value, label, ...rest } = cfg;
+    return JSON.stringify(rest);
+  }
+
+  build(cfg) {
+    const ticks = Array.from({ length: cfg.ticks }, () => '<div class="vector"></div>').join('');
+
+    const zones = cfg.zones.map((z) => {
+      const pct = ((z.to - z.from) / cfg.span) * 100;
+      const style = `--o-fill:${z.color};--o-stroke:${z.color};--o-stroke-width:6;--o-gap:0;${this._glow(z.color)}`;
+      return `<o-arc value="${pct.toFixed(4)}" style="${style}"></o-arc>`;
+    }).join('');
+
+    const zoneLayer = zones
+      ? `<div class="orbit-5" style="--o-range:${cfg.range}deg;--o-from:${cfg.from}deg;">${zones}</div>`
+      : '';
+
+    const tickLayer = cfg.ticks
+      ? `<div class="orbit-6 fit-range" style="--o-range:${cfg.range}deg;--o-from:${cfg.from}deg;">${ticks}</div>`
+      : '';
+
+    this.innerHTML = `
+      <div class="bigbang" style="width:${cfg.size};aspect-ratio:1;">
+        <div class="gravity-spot">
+          ${tickLayer}
+          ${zoneLayer}
+          <div class="orbit-4" style="--o-range:${cfg.range}deg;--o-from:${cfg.from}deg;">
+            <o-arc class="o-meter-needle" value="0" shape="arrow" style="--o-fill:${cfg.needleColor};--o-stroke:${cfg.needleColor}"></o-arc>
+          </div>
+          <div class="orbit-0">
+            <div class="satellite at-center">
+              <div class="capsule ok-hub o-meter-readout"></div>
+            </div>
+          </div>
+        </div>
+      </div>`;
+
+    this._needle = this.querySelector('.o-meter-needle');
+    this._readout = this.querySelector('.o-meter-readout');
+  }
+
+  sync(cfg) {
+    const clamped = Math.min(cfg.max, Math.max(cfg.min, cfg.value));
+    const pct = ((clamped - cfg.min) / cfg.span) * 100;
+    if (this._needle) this._needle.setAttribute('value', pct.toFixed(2));
+    if (this._readout) {
+      this._readout.textContent = cfg.label !== null
+        ? cfg.label
+        : `${Math.round(clamped)}${cfg.unit}`;
+    }
+  }
+}
+
+define('o-meter', OrbitMeter);

package/src/o-radar.js

@@ -0,0 +1,145 @@
+/**
+ * <o-radar> — radar / scope display.
+ *
+ * Built the idiomatic Orbit way: the range rings ARE orbits — each `.orbit-N`
+ * is a concentric circle, so we just style its border instead of stacking
+ * full-circle arcs. On top of that grid: radial cross-hair spokes (`.vector`),
+ * a rotating sweep wedge with a bright leading edge, and glowing blips placed
+ * on the orbit matching their distance and aimed with `--o-angle-composite`.
+ *
+ *   .bigbang > .gravity-spot
+ *     ├── .orbit-{2..outer}  (styled border)        — range rings
+ *     ├── .orbit-{outer} fit-range range-360 > .vector × spokes
+ *     ├── .orbit-{outer} (rotating) > <o-arc> wedge — the sweep
+ *     ├── .orbit-{level}  > .satellite (angled)     — one per blip
+ *     └── .orbit-0 > .satellite.at-center           — hub + label
+ *
+ *   <o-radar rings="4" color="#22d3ee" spokes="8"
+ *     targets='[{"angle":60,"dist":0.8},{"angle":200,"dist":0.45}]'></o-radar>
+ *
+ * `angle` is degrees clockwise from North (top); `dist` is 0–1 from center.
+ */
+import { OrbitKitElement, define, injectStyleOnce } from './base.js';
+
+const RADAR_CSS = `
+@keyframes o-radar-sweep { to { transform: rotate(360deg); } }
+@keyframes o-radar-ping {
+  0%   { transform: scale(.5); opacity: 1; }
+  70%  { opacity: .45; }
+  100% { transform: scale(1.7); opacity: 0; }
+}
+o-radar .o-radar-sweep { animation: o-radar-sweep var(--o-radar-speed, 4s) linear infinite; transform-origin: center; }
+o-radar .o-radar-blip { position: relative; border-radius: 50%; }
+o-radar .o-radar-blip::after {
+  content: ""; position: absolute; inset: -4px; border-radius: 50%;
+  border: 1px solid currentColor; animation: o-radar-ping 1.8s ease-out infinite;
+}
+`;
+
+export class OrbitRadar extends OrbitKitElement {
+  static get observedAttributes() {
+    return ['targets', 'rings', 'spokes', 'size', 'color', 'sweep', 'sweep-width', 'speed', 'label'];
+  }
+
+  readConfig() {
+    const targets = (this._json('targets', []) || []).map((t) => ({
+      angle: Number(t.angle) || 0,
+      dist: Math.min(1, Math.max(0, t.dist == null ? 0.5 : Number(t.dist))),
+      color: t.color || null
+    }));
+    return {
+      targets,
+      rings: Math.max(1, Math.round(this._num('rings', 4))),
+      spokes: Math.max(0, Math.round(this._num('spokes', 8))),
+      size: this._str('size', '240px'),
+      color: this._str('color', '#22d3ee'),
+      sweep: this._str('sweep', 'true') !== 'false',
+      sweepWidth: Math.min(300, Math.max(10, this._num('sweep-width', 110))),
+      speed: this._num('speed', 4),
+      label: this.hasAttribute('label') ? this.getAttribute('label') : null
+    };
+  }
+
+  structuralSignature(cfg) {
+    return JSON.stringify(cfg);
+  }
+
+  build(cfg) {
+    injectStyleOnce('orbit-kit-radar', RADAR_CSS);
+
+    const C = cfg.color;
+    // Two orbit steps per ring so the grid breathes; outer ring hosts sweep/spokes.
+    const outer = cfg.rings * 2;
+
+    // Range rings — native orbit borders, outermost a touch brighter.
+    const rings = Array.from({ length: cfg.rings }, (_, i) => {
+      const orbit = (i + 1) * 2;
+      const alpha = 0.1 + (i / cfg.rings) * 0.22;
+      return `<div class="orbit-${orbit}" style="border:1px solid ${this._rgba(C, alpha)};"></div>`;
+    }).join('');
+
+    // Cross-hair spokes — radial vectors, evenly distributed.
+    const spokes = cfg.spokes
+      ? `<div class="orbit-${outer} fit-range range-360 from-0">
+           ${Array.from({ length: cfg.spokes }, () =>
+             `<div class="vector" style="background:${this._rgba(C, 0.14)};height:1px;"></div>`).join('')}
+         </div>`
+      : '';
+
+    // Sweep — a real rotating beam: a conic-gradient disc painted on the outer
+    // orbit circle, fading from a transparent tail to a crisp bright leading
+    // edge over `sweepWidth` degrees. Smooth, not a blocky fan of arcs.
+    const w = cfg.sweepWidth;
+    const beam = `conic-gradient(from 0deg,`
+      + ` ${this._rgba(C, 0)} 0deg,`
+      + ` ${this._rgba(C, 0.05)} ${(w * 0.5).toFixed(1)}deg,`
+      + ` ${this._rgba(C, 0.30)} ${(w - 3).toFixed(1)}deg,`
+      + ` ${this._rgba(C, 0.85)} ${w}deg,`
+      + ` transparent ${w}deg, transparent 360deg)`;
+    const sweep = cfg.sweep
+      ? `<div class="orbit-${outer} o-radar-sweep" style="--o-radar-speed:${cfg.speed}s;background:${beam};"></div>`
+      : '';
+
+    // Blips — each on the orbit matching its distance, aimed by angle.
+    const blips = cfg.targets.map((t) => {
+      const color = t.color || C;
+      const level = Math.min(outer, Math.max(1, Math.round(t.dist * outer)));
+      return `<div class="orbit-${level}">
+                <div class="satellite" style="--o-angle-composite:calc(${t.angle}deg - 90deg);color:${color};">
+                  <div class="capsule o-radar-blip" style="width:9px;height:9px;background:${color};box-shadow:0 0 10px ${color};"></div>
+                </div>
+              </div>`;
+    }).join('');
+
+    const center = `
+      <div class="orbit-0">
+        <div class="satellite at-center">
+          <div class="capsule" style="display:flex;flex-direction:column;align-items:center;gap:4px;">
+            <span style="width:6px;height:6px;border-radius:50%;background:${C};box-shadow:0 0 8px ${C};"></span>
+            ${cfg.label !== null ? `<span style="font-weight:800;font-size:.7em;letter-spacing:.15em;color:${C};">${cfg.label}</span>` : ''}
+          </div>
+        </div>
+      </div>`;
+
+    this.innerHTML = `
+      <div class="bigbang" style="width:${cfg.size};aspect-ratio:1;">
+        <div class="gravity-spot">
+          ${rings}
+          ${spokes}
+          ${sweep}
+          ${blips}
+          ${center}
+        </div>
+      </div>`;
+  }
+
+  /** Convert #rrggbb (or pass-through) to rgba() at the given alpha. */
+  _rgba(color, alpha) {
+    const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+    if (!m) return color;
+    const [r, g, b] = [m[1], m[2], m[3]].map((h) => parseInt(h, 16));
+    return `rgba(${r},${g},${b},${alpha.toFixed(3)})`;
+  }
+}
+
+define('o-radar', OrbitRadar);

package/src/o-rings.js

@@ -0,0 +1,93 @@
+/**
+ * <o-rings> — Apple-style concentric activity rings.
+ *
+ * Collapses the Orbit recipe:
+ *
+ *   .bigbang > .gravity-spot
+ *     ├── .orbit-{outer}   > <o-progress>   (ring 1, outermost)
+ *     ├── .orbit-{outer-1} > <o-progress>   (ring 2)
+ *     ├── ...
+ *     └── .orbit-0 > .satellite.at-center > .capsule   (optional center label)
+ *
+ * ...into one tag fed by a JSON array (outer ring first):
+ *
+ *   <o-rings data='[{"value":80,"color":"#fa114f"},
+ *                   {"value":55,"color":"#a3ff00"},
+ *                   {"value":92,"color":"#00fff0"}]'></o-rings>
+ *
+ * Each datum may set its own `max` (default 100), `color`, and `label`.
+ */
+import { OrbitKitElement, define } from './base.js';
+
+export class OrbitRings extends OrbitKitElement {
+  static get observedAttributes() {
+    return ['data', 'size', 'stroke-width', 'track', 'shape',
+            'range', 'from', 'step', 'label', 'unit', 'glow'];
+  }
+
+  readConfig() {
+    const range = this._num('range', 360);
+    const data = (this._json('data', []) || []).map((d) => ({
+      value: Number(d.value) || 0,
+      max: Number(d.max) || 100,
+      color: d.color || null,
+      label: d.label != null ? String(d.label) : null
+    }));
+    return {
+      data,
+      range,
+      from: this.hasAttribute('from') ? this._num('from', 0)
+                                      : (range === 360 ? 0 : this._autoFrom(range)),
+      size: this._str('size', '200px'),
+      strokeWidth: this._num('stroke-width', 12),
+      track: this.hasAttribute('track') ? this.getAttribute('track') : null,
+      shape: this._str('shape', 'rounded'),
+      step: Math.round(this._num('step', 1)),
+      unit: this._str('unit', ''),
+      glow: this.getAttribute('glow'),
+      label: this.hasAttribute('label') ? this.getAttribute('label') : null
+    };
+  }
+
+  structuralSignature(cfg) {
+    return JSON.stringify(cfg);
+  }
+
+  build(cfg) {
+    const palette = ['#fa114f', '#a3ff00', '#00fff0', '#ffd60a', '#ff9500'];
+    // Outermost ring gets the highest orbit number so rings nest inward.
+    const outer = 1 + cfg.data.length * cfg.step;
+    // Scale --o-force so the outer ring fits within `size` (orbit-N = N/12 *
+    // force) with a margin for the rounded caps + glow bloom, instead of the
+    // default 500px that overflows the box.
+    const sizeNum = parseFloat(cfg.size) || 200;
+    const force = (sizeNum * 12 / (outer + 1)).toFixed(1);
+
+    const rings = cfg.data.map((d, i) => {
+      const orbit = outer - i * cfg.step;
+      const color = d.color || palette[i % palette.length];
+      // iOS-style track: a dim, OPAQUE wash of the ring's own color, drawn as a
+      // separate solid o-arc (o-progress's back only strokes a hollow outline).
+      const track = cfg.track || `color-mix(in srgb, ${color} 14%, #0c0f14)`;
+      const ring = `--o-range:${cfg.range}deg;--o-from:${cfg.from}deg;`;
+      const fill = `--o-fill:${color};--o-stroke:${color};--o-stroke-width:${cfg.strokeWidth};${this._glow(color)}`;
+      return `
+        <div class="orbit-${orbit}" style="${ring}"><o-arc value="100" shape="${cfg.shape}" style="--o-fill:${track};--o-stroke:${track};--o-stroke-width:${cfg.strokeWidth}"></o-arc></div>
+        <div class="orbit-${orbit}" style="${ring}"><o-progress value="${d.value}" max="${d.max}" shape="${cfg.shape}" style="${fill}"></o-progress></div>`;
+    }).join('');
+
+    const center = cfg.label !== null
+      ? `<div class="orbit-0"><div class="satellite at-center"><div class="capsule ok-hub">${cfg.label}${cfg.unit}</div></div></div>`
+      : '';
+
+    this.innerHTML = `
+      <div class="bigbang" style="width:${cfg.size};aspect-ratio:1;">
+        <div class="gravity-spot" style="--o-force:${force}px;">
+          ${rings}
+          ${center}
+        </div>
+      </div>`;
+  }
+}
+
+define('o-rings', OrbitRings);

package/src/orbit-kit.js

@@ -0,0 +1,33 @@
+/**
+ * @zumer/orbit-kit — high-level components on top of the Orbit primitives.
+ *
+ * Importing this entry registers every kit component. The Orbit core
+ * (CSS engine + base web components like <o-progress> / <o-arc>) must be
+ * present on the page — it's declared as a peer dependency:
+ *
+ *   import '@zumer/orbit/style'   // styles (or load orbit.css separately)
+ *   import '@zumer/orbit'         // registers <o-progress> / <o-arc>
+ *   import '@zumer/orbit-kit'     // registers <o-gauge>, <o-donut>, ...
+ */
+
+import './o-gauge.js';
+import './o-donut.js';
+import './o-rings.js';
+import './o-meter.js';
+import './o-knob.js';
+import './o-menu.js';
+import './o-compass.js';
+import './o-radar.js';
+import './o-clock.js';
+import './o-instrument.js';
+
+export { OrbitGauge } from './o-gauge.js';
+export { OrbitDonut } from './o-donut.js';
+export { OrbitRings } from './o-rings.js';
+export { OrbitMeter } from './o-meter.js';
+export { OrbitKnob } from './o-knob.js';
+export { OrbitMenu } from './o-menu.js';
+export { OrbitCompass } from './o-compass.js';
+export { OrbitRadar } from './o-radar.js';
+export { OrbitClock } from './o-clock.js';
+export { OrbitInstrument } from './o-instrument.js';