@zumer/orbit-kit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Juan Martin Muda — Zumerlab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,395 @@
+# @zumer/orbit-kit
+
+High-level, declarative web components built on top of the
+[Orbit](https://github.com/zumerlab/orbit) CSS framework.
+
+Orbit gives you **primitives** — a CSS engine for radial layout. It's powerful,
+but composing a single widget means nesting five levels
+(`.bigbang > .gravity-spot > .orbit-N > .satellite > .capsule`) and getting the
+rules exactly right. That depth is the main barrier to entry, for humans *and*
+for LLMs.
+
+**orbit-kit** wraps the common radial patterns into one-line custom elements —
+gauges, charts, activity rings, knobs, pie menus, cockpit instruments, analog
+clocks, compasses and radars:
+
+```html
+<!-- Before: raw primitives -->
+<div class="bigbang" style="width:200px;aspect-ratio:1">
+  <div class="gravity-spot">
+    <div class="orbit-4" style="--o-range:270deg;--o-from:225deg">
+      <o-progress value="72" shape="rounded"
+        style="--o-fill:#6366f1;--o-stroke-width:8"></o-progress>
+    </div>
+    <div class="orbit-0">
+      <div class="satellite at-center"><div class="capsule">72%</div></div>
+    </div>
+  </div>
+</div>
+
+<!-- After: orbit-kit -->
+<o-gauge value="72" unit="%"></o-gauge>
+```
+
+---
+
+## Install
+
+```bash
+npm install @zumer/orbit @zumer/orbit-kit
+```
+
+```js
+import '@zumer/orbit/style'   // Orbit CSS engine
+import '@zumer/orbit'         // Orbit core web components (<o-arc>, <o-progress>)
+import '@zumer/orbit-kit'     // registers every kit component
+```
+
+Or straight from a CDN — no build step:
+
+```html
+<link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
+<script src="https://unpkg.com/@zumer/orbit@latest/dist/orbit.js"></script>
+<script type="module" src="https://unpkg.com/@zumer/orbit-kit@latest/src/orbit-kit.js"></script>
+```
+
+`@zumer/orbit` is a **peer dependency** — the kit assumes the Orbit core (CSS +
+`<o-arc>` / `<o-progress>`) is present on the page.
+
+Every component is a standard custom element, so it works in plain HTML and in
+any framework (React, Vue, Svelte, Angular). Import the whole kit, or just the
+components you use:
+
+```js
+import '@zumer/orbit-kit/src/o-gauge.js'
+import '@zumer/orbit-kit/src/o-clock.js'
+```
+
+---
+
+## Components
+
+| Tag | What it is |
+|-----|------------|
+| [`<o-gauge>`](#o-gauge) | Single-value radial gauge |
+| [`<o-donut>`](#o-donut) | Data-driven donut / pie chart |
+| [`<o-rings>`](#o-rings) | Apple-style concentric activity rings |
+| [`<o-knob>`](#o-knob) | Interactive rotary control (drag / wheel / keys) |
+| [`<o-menu>`](#o-menu) | Radial / pie menu — single- & multi-level |
+| [`<o-instrument>`](#o-instrument) | Cockpit / dashboard gauges (tach, speedo, fuel, airspeed…) |
+| [`<o-clock>`](#o-clock) | Analog clock / watch face — the flagship |
+| [`<o-compass>`](#o-compass) | Heading indicator |
+| [`<o-radar>`](#o-radar) | Radar / scope display |
+
+Common conventions across the kit:
+
+- **`size`** sets the widget's pixel width (square aspect). Components scale
+  Orbit's `--o-force` internally so they actually fill that box.
+- **`glow`** is an opt-in neon drop-shadow tinted with the indicator color
+  (`glow` or `glow="12"` for the blur radius).
+- **`data` / `items` / `zones` / `targets`** take a JSON array in the attribute.
+- Set attributes to update live (`el.setAttribute('value', 88)`); interactive
+  components also expose JS properties and events.
+
+---
+
+### `<o-gauge>`
+
+A single value on an arc, with a center readout.
+
+```html
+<o-gauge value="72" unit="%"></o-gauge>
+<o-gauge value="125" max="240" label="125 km/h" range="360" glow></o-gauge>
+```
+
+| Attribute | Default | Description |
+|---|---|---|
+| `value` | `0` | Current value. |
+| `max` | `100` | Value that fills the whole arc. |
+| `range` | `270` | Arc span in degrees (`360` = full ring, `180` = semicircle). |
+| `from` | auto | Start angle; defaults so the gap sits at the bottom. |
+| `size` | `200px` | Widget width. |
+| `label` | — | Center text; overrides the auto `value`+`unit`. |
+| `unit` | `""` | Suffix on the value (`%`, `km/h`). |
+| `fill` | `#6366f1` | Progress color. |
+| `track` | `#262d38` | Background ring color. |
+| `stroke-width` | `8` | Ring thickness. |
+| `shape` | `rounded` | Arc cap shape (`rounded`, `none`). |
+| `glow` | off | Neon glow on the progress arc. |
+
+---
+
+### `<o-donut>`
+
+A donut / pie chart from a JSON data array. Values are normalized to their sum,
+or to an explicit `total` for a partial ring.
+
+```html
+<o-donut label="$2.4k"
+  data='[{"value":52,"color":"#f97316","label":"Rent"},
+         {"value":28,"color":"#eab308"},
+         {"value":20,"color":"#22c55e"}]'></o-donut>
+```
+
+| Attribute | Default | Description |
+|---|---|---|
+| `data` | `[]` | `[{ value, color?, label? }]`. Colors fall back to a palette. |
+| `total` | sum | Denominator; set it for a partial ring (e.g. `total="100"`). |
+| `range` / `from` | `360` / `0` | Arc span and start angle. |
+| `stroke-width` | `14` | Ring thickness. |
+| `gap` | `2` | Spacing between segments. |
+| `shape` | `none` | Segment caps (`none`, or `rounded` to opt in). |
+| `track` | faint | Background ring color. |
+| `label` / `unit` | — | Center text. |
+| `glow` | off | Neon glow per segment. |
+
+---
+
+### `<o-rings>`
+
+Apple-style concentric activity rings (outer ring first). Each ring gets a dim,
+solid track in its own color.
+
+```html
+<o-rings data='[{"value":80,"color":"#fa114f"},
+                {"value":55,"color":"#a3ff00"},
+                {"value":92,"color":"#00fff0"}]'></o-rings>
+```
+
+| Attribute | Default | Description |
+|---|---|---|
+| `data` | `[]` | `[{ value, max?, color?, label? }]`. |
+| `range` / `from` | `360` | Arc span and start angle. |
+| `stroke-width` | `12` | Ring thickness. |
+| `step` | `1` | Orbit gap between rings. |
+| `track` | auto | Track color (defaults to a dim wash of each ring's color). |
+| `shape` | `rounded` | Cap shape. |
+| `label` / `unit` | — | Center text. |
+| `glow` | off | Neon glow per ring. |
+
+---
+
+### `<o-knob>`
+
+An interactive rotary control that behaves like a form input.
+
+```html
+<o-knob value="65" unit="%" fill="#3da9fc"></o-knob>
+```
+
+```js
+knob.addEventListener('input',  e => console.log(e.detail.value)); // while dragging
+knob.addEventListener('change', e => console.log(e.detail.value)); // on release
+knob.value = 40;                                                   // read / write
+```
+
+Drag vertically, scroll the wheel, or use arrow keys / Page Up·Down / Home·End
+when focused. `role="slider"` + ARIA values are set for you.
+
+| Attribute | Default | Description |
+|---|---|---|
+| `value` | `min` | Current value. |
+| `min` / `max` | `0` / `100` | Range. |
+| `step` | `1` | Increment for keys / wheel and snapping. |
+| `range` / `from` | `270` / auto | Arc span and start angle. |
+| `size` | `160px` | Widget width. |
+| `fill` | `#a1a1aa` | Value color. |
+| `track` | `#27272a` | Track color. |
+| `stroke-width` | `14` | Ring thickness. |
+| `unit` / `label` | — | Center readout. |
+| `disabled` | off | Non-interactive + dimmed. |
+| `glow` | off | Neon glow on the value arc. |
+
+---
+
+### `<o-menu>`
+
+A radial / pie menu. Items may nest via `children` for multi-level menus, with
+two ways to reveal a branch.
+
+```html
+<o-menu label="EDIT" expand="concentric"
+  items='[
+    {"label":"Size","icon":"🔠","children":[
+      {"label":"Bigger","value":"size.up"},
+      {"label":"Smaller","value":"size.down"}]},
+    {"label":"Format","icon":"✏️","children":[
+      {"label":"Bold","value":"fmt.bold"},
+      {"label":"Italic","value":"fmt.italic"}]},
+    {"label":"Color","icon":"🎨","value":"color"}]'></o-menu>
+```
+
+```js
+menu.addEventListener('select',   e => e.detail); // { value, label, item, path }
+menu.addEventListener('navigate', e => e.detail); // { path, depth }
+menu.back(); menu.reset(); menu.path;             // navigation API
+```
+
+| Attribute | Default | Description |
+|---|---|---|
+| `items` | `[]` | `[{ label, value?, color?, icon?, children? }]` (recursive). |
+| `expand` | `drill` | `drill` (ring replaces itself, center = back) or `concentric` (parent stays, children fan out — the editor look). |
+| `theme` | `mono` | `mono` (slate sectors tinted by `accent` on hover/active) or `color` (refined per-item palette). |
+| `accent` | `#3da9fc` | Accent for the `mono` theme. |
+| `range` / `from` | `360` | Arc span and start angle (`270` for a quick action wheel). |
+| `size` | `280px` | Widget width. |
+| `gap` | `6` | Spacing between sectors. |
+| `label` | `MENU` | Center / breadcrumb text. |
+
+Keyboard: arrows move focus, Enter activates, Esc / Backspace goes back.
+
+---
+
+### `<o-instrument>`
+
+Cockpit / dashboard gauges with major + minor ticks, color zones, a redline, a
+numeric scale, a needle and a digital readout. Driven by **presets**, or
+configured by hand.
+
+```html
+<o-instrument preset="tachometer" value="6.2"></o-instrument>
+<o-instrument preset="airspeed" value="120"></o-instrument>
+<o-instrument min="0" max="100" value="40" unit="%" label="LOAD"
+  zones='[{"from":85,"to":100,"color":"#ef4444"}]'></o-instrument>
+```
+
+**Presets:** `tachometer`, `speedometer`, `fuel`, `temp`, `boost`, `voltmeter`,
+`airspeed`, `altimeter`, `cpu`, `gpu`, `vu`. Any attribute below overrides the
+preset.
+
+| Attribute | Default | Description |
+|---|---|---|
+| `value` | `min` | Current reading. |
+| `min` / `max` | `0` / `100` | Scale range. |
+| `range` / `from` | `270` / auto | Arc span and start angle. |
+| `ticks` | `7` | Major tick / label count. |
+| `minor` | `5` | Minor ticks between each pair of majors. |
+| `zones` | `[]` | `[{ from, to, color }]` color bands (in value units). |
+| `redline` | — | Sugar: a red zone from this value to `max`. |
+| `tick-labels` | numeric | Custom scale labels, e.g. `'["E","½","F"]'`. |
+| `unit` / `label` | — | Readout unit and caption. |
+| `digital` | on | Show the numeric readout. |
+| `case` | auto | `round`, `square`, `rounded`, or `bare` (auto for ≤180° arcs). |
+| `accent` / `needle-color` / `tick-color` / `face` / `bezel` | — | Theming. |
+| `size` | `240px` | Widget width. |
+| `glow` | off | Neon glow on the needle / zones. |
+
+> `<o-meter>` (a basic speedometer) still ships for back-compat but is
+> superseded by `<o-instrument preset="speedometer">`.
+
+---
+
+### `<o-clock>`
+
+The flagship: an analog clock / watch face. Live or static, with case shapes,
+an oval (tonneau) dial, numerals, smartwatch complications, chronograph
+sub-dials, and an iOS activity-rings face.
+
+```html
+<o-clock live seconds></o-clock>                          <!-- ticking wall clock -->
+<o-clock time="10:08:42" numerals="roman" case="square"></o-clock>
+<o-clock preset="smartwatch" live brand="ORBIT"></o-clock>
+<o-clock preset="chrono" live></o-clock>                   <!-- tri-compax sub-dials -->
+<o-clock case="rectangle" dial="oval" live smooth></o-clock>   <!-- tonneau -->
+<o-clock dial="rings" live seconds></o-clock>              <!-- iOS activity-ring clock -->
+```
+
+**Presets:** `classic`, `roman`, `minimal`, `chrono`, `smartwatch`.
+
+| Attribute | Default | Description |
+|---|---|---|
+| `time` | now | Static `HH:MM[:SS]`. Omit for the current time. |
+| `live` | off | Tick with the real clock. |
+| `smooth` | off | Sweeping (not ticking) second hand; implies `seconds`. |
+| `seconds` | off | Show a second hand. |
+| `numerals` | `arabic` | `arabic`, `roman`, or `none`. |
+| `case` | `round` | `round`, `square`, `rounded`, `rectangle`. |
+| `dial` | `round` | `round`, `oval` (tonneau, matches the case), or `rings` (iOS face). |
+| `digital` / `date` / `brand` | off / off / — | Complications. |
+| `subdials` | off | Chronograph sub-dials (small-seconds / 24h / date). |
+| `accent` / `hand-color` / `tick-color` / `face` / `bezel` / `case-bg` | — | Theming (also via CSS vars, e.g. `--ok-clock-accent`). |
+| `size` | `300px` | Widget width. |
+| `glow` | off | Neon glow on the hands. |
+
+---
+
+### `<o-compass>`
+
+A heading indicator: a fixed dial with a top lubber index; the card (ticks +
+cardinals) rotates so the current `heading` sits under the index.
+
+```html
+<o-compass heading="045"></o-compass>
+<o-compass heading="120" labels="N,NE,E,SE,S,SW,W,NW"></o-compass>
+```
+
+| Attribute | Default | Description |
+|---|---|---|
+| `heading` | `0` | Heading in degrees (clockwise from North). |
+| `labels` | `N,E,S,W` | Cardinal labels (comma-separated). |
+| `fill` | `#ef4444` | Accent (north tick + lubber). |
+| `unit` | `°` | Readout suffix. |
+| `size` | `220px` | Widget width. |
+
+---
+
+### `<o-radar>`
+
+A radar / scope: concentric range rings, cross-hair spokes, a rotating
+conic-gradient sweep, and glowing blips.
+
+```html
+<o-radar rings="4" spokes="12" label="SCAN"
+  targets='[{"angle":60,"dist":0.8},
+            {"angle":200,"dist":0.45},
+            {"angle":310,"dist":0.65,"color":"#ef4565"}]'></o-radar>
+```
+
+| Attribute | Default | Description |
+|---|---|---|
+| `targets` | `[]` | `[{ angle, dist, color? }]` — `angle` °CW from top, `dist` 0–1. |
+| `rings` | `4` | Concentric range rings. |
+| `spokes` | `8` | Radial cross-hair lines. |
+| `sweep` | on | The rotating beam (`sweep="false"` to hide). |
+| `sweep-width` | `110` | Beam span in degrees. |
+| `speed` | `4` | Seconds per revolution. |
+| `color` | `#22d3ee` | Scope color. |
+| `label` | — | Center label. |
+| `size` | `240px` | Widget width. |
+
+---
+
+## How it works
+
+orbit-kit components render their structure into the **light DOM** (not shadow
+DOM) on purpose. Orbit positions elements through global CSS (`cos()` / `sin()`
+/ `:has()`) and inherited `--o-*` custom properties, so a layout-composing
+component must live in the light DOM for the engine and the cascade to reach it.
+The generated markup is exactly the documented Orbit structure — "view source"
+stays honest. Inspect any component in devtools to see the rings, satellites and
+arcs it expands into.
+
+Everything is theme-able through plain CSS custom properties; the convenience
+attributes above just map onto them.
+
+## Examples
+
+Live showcase of every component: **[zumerlab.com/orbit-kit](https://zumerlab.com/orbit-kit)**
+(source in [`docs/index.html`](docs/index.html)).
+
+To run it locally, serve the repo over HTTP so the ES modules load:
+
+```bash
+npx serve .
+# then open /docs/index.html
+```
+
+## Browser support
+
+Modern evergreen browsers. Orbit relies on `:has()` and CSS trigonometric
+functions (`cos`, `sin`); the radar/clock visuals use `conic-gradient` and
+`color-mix`. Orbit shows an upgrade notice on unsupported browsers.
+
+## License
+
+[MIT](LICENSE) — Juan Martin Muda · [Zumerlab](https://github.com/zumerlab)

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@zumer/orbit-kit",
+  "version": "0.1.0",
+  "description": "High-level, declarative web components on top of the Orbit CSS framework — gauges, charts, activity rings, knobs, pie menus, cockpit instruments, analog clocks, compasses and radars, each in one tag.",
+  "type": "module",
+  "main": "src/orbit-kit.js",
+  "module": "src/orbit-kit.js",
+  "exports": {
+    ".": "./src/orbit-kit.js",
+    "./*": "./src/*"
+  },
+  "files": [
+    "src"
+  ],
+  "sideEffects": [
+    "./src/*.js"
+  ],
+  "scripts": {
+    "test": "node test/smoke.mjs",
+    "shots": "node test/shoot.mjs",
+    "shots:menus": "node test/shoot-menus.mjs"
+  },
+  "peerDependencies": {
+    "@zumer/orbit": "^1.4.9"
+  },
+  "devDependencies": {
+    "playwright": "^1.55.1"
+  },
+  "keywords": [
+    "orbit",
+    "web-components",
+    "custom-elements",
+    "radial",
+    "gauge",
+    "donut-chart",
+    "activity-rings",
+    "knob",
+    "pie-menu",
+    "clock",
+    "compass",
+    "radar",
+    "dashboard",
+    "circular",
+    "ui",
+    "zumerlab"
+  ],
+  "homepage": "https://zumerlab.com/orbit-kit",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zumerlab/orbit-kit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zumerlab/orbit-kit/issues"
+  },
+  "author": "Juan Martin Muda - Zumerlab",
+  "license": "MIT"
+}

package/src/base.js

@@ -0,0 +1,133 @@
+/**
+ * OrbitKitElement — shared base for orbit-kit high-level components.
+ *
+ * Every kit component collapses a multi-level Orbit recipe
+ * (.bigbang > .gravity-spot > .orbit-N > o-arc|o-progress|.satellite)
+ * into a single declarative tag. They all share the same lifecycle:
+ *
+ *   readConfig()            -> parse attributes into a plain config object
+ *   structuralSignature(c)  -> string; when it changes the subtree is rebuilt
+ *   build(cfg)              -> render the Orbit structure into the light DOM
+ *   sync(cfg)               -> patch cheap/animated values without a rebuild
+ *
+ * LIGHT DOM on purpose: Orbit positions elements through global CSS
+ * (cos()/sin()/:has()) and inherited --o-* custom properties, so the kit must
+ * render into the light DOM for orbit.css to apply and the inner <o-arc> /
+ * <o-progress> to participate in the cascade. Requires @zumer/orbit (CSS + JS)
+ * loaded on the page; orbit-kit declares it as a peer dependency.
+ */
+export class OrbitKitElement extends HTMLElement {
+  connectedCallback() {
+    this._render();
+    this.onConnected?.();
+  }
+
+  attributeChangedCallback() {
+    if (this.isConnected) this._render();
+  }
+
+  disconnectedCallback() {
+    this.onDisconnected?.();
+  }
+
+  /** Parse a numeric attribute with a fallback. */
+  _num(name, fallback) {
+    const raw = this.getAttribute(name);
+    if (raw === null || raw === '') return fallback;
+    const n = parseFloat(raw);
+    return Number.isFinite(n) ? n : fallback;
+  }
+
+  /** Read a string attribute with a fallback. */
+  _str(name, fallback) {
+    const raw = this.getAttribute(name);
+    return raw === null ? fallback : raw;
+  }
+
+  /** Parse a JSON attribute (array/object) with a fallback; never throws. */
+  _json(name, fallback) {
+    const raw = this.getAttribute(name);
+    if (raw === null || raw.trim() === '') return fallback;
+    try {
+      return JSON.parse(raw);
+    } catch (err) {
+      console.warn(`<${this.localName}> invalid JSON in "${name}":`, err.message);
+      return fallback;
+    }
+  }
+
+  /**
+   * Default `from` angle that centers an arc's gap at the bottom (6 o'clock),
+   * matching the classic 3/4 gauge: range 270 -> from 225.
+   */
+  _autoFrom(range) {
+    return ((360 - range / 2) % 360 + 360) % 360;
+  }
+
+  /**
+   * Opt-in neon glow. When the `glow` attribute is present, returns a
+   * `filter: drop-shadow(...)` fragment tinted with the indicator color so the
+   * fill reads as emissive. `glow="12"` overrides the blur radius (px).
+   */
+  _glow(color, fallbackPx = 6) {
+    if (!this.hasAttribute('glow')) return '';
+    const px = this._num('glow', fallbackPx) || fallbackPx;
+    return `filter:drop-shadow(0 0 ${px}px ${color});`;
+  }
+
+  _render() {
+    const cfg = this.readConfig();
+    const sig = this.structuralSignature ? this.structuralSignature(cfg) : null;
+    if (!this._built || sig === null || sig !== this._sig) {
+      this.build(cfg);
+      this._sig = sig;
+      this._built = true;
+    }
+    this.sync?.(cfg);
+  }
+}
+
+/** Register a custom element once (safe against double-registration). */
+export function define(tag, cls) {
+  if (typeof customElements !== 'undefined' && !customElements.get(tag)) {
+    customElements.define(tag, cls);
+  }
+}
+
+/** Inject a stylesheet once, keyed by id (used by animated components). */
+export function injectStyleOnce(id, css) {
+  if (typeof document === 'undefined' || document.getElementById(id)) return;
+  const style = document.createElement('style');
+  style.id = id;
+  style.textContent = css;
+  document.head.appendChild(style);
+}
+
+/**
+ * Kit baseline overrides, injected once for the whole kit.
+ *
+ * Orbit's default theme draws `border: 1px solid currentcolor` on every
+ * `.satellite` (see orbit _themes.scss). For composed widgets that's an
+ * unwanted ring around the center label / cardinals / radar blips. We strip it
+ * — but ONLY inside kit components, so hand-written Orbit markup keeps the
+ * default. `:where()` keeps specificity at (0,1,0) and the rule lands after
+ * orbit.css in document order, so the user can still re-add a border.
+ */
+const KIT_BASE_CSS = `
+:where(o-gauge,o-donut,o-rings,o-meter,o-knob,o-menu,o-compass,o-radar,o-clock,o-instrument) .satellite {
+  border: none;
+  background: transparent;
+}
+/* Shared center hub: a soft radial halo behind the label. Uses a gradient
+   (not a hard circle) so wide readouts like "125 km/h" never get clipped.
+   Theme it with --ok-hub-bg / --ok-hub-color. */
+:where(o-gauge,o-donut,o-rings,o-meter,o-knob,o-compass) .ok-hub {
+  font-weight: 800;
+  text-align: center;
+  line-height: 1.15;
+  padding: .5em .7em;
+  color: var(--ok-hub-color, inherit);
+  background: radial-gradient(closest-side, var(--ok-hub-bg, rgba(8, 12, 18, .82)), transparent 100%);
+}`;
+
+injectStyleOnce('orbit-kit-base', KIT_BASE_CSS);