@zumer/orbit-kit 0.1.0 → 2.1.0

package/src/color.js

@@ -0,0 +1,139 @@
+/**
+ * Color helpers for the kit: parsing, HSV/HSL/RGB conversions, contrast and
+ * plain-English names. Pure functions, safe in Node; named CSS colors are
+ * resolved through a canvas when there is a document.
+ */
+
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const round = (n, digits = 0) => Number(Number(n).toFixed(digits));
+const hex2 = (n) => Math.round(clamp(n, 0, 255)).toString(16).padStart(2, '0');
+
+/** { r, g, b } (0-255) → "#rrggbb". */
+export const rgbToHex = ({ r, g, b }) => `#${hex2(r)}${hex2(g)}${hex2(b)}`;
+
+/** h 0-360, s and v 0-1 → { r, g, b } 0-255. */
+export function hsvToRgb({ h, s, v }) {
+  const f = (n) => {
+    const k = (n + h / 60) % 6;
+    return (v - v * s * Math.max(0, Math.min(k, 4 - k, 1))) * 255;
+  };
+  return { r: f(5), g: f(3), b: f(1) };
+}
+
+/** { r, g, b } 0-255 → { h, s, v }, h 0-360 (0 for grays), s and v 0-1. */
+export function rgbToHsv({ r, g, b }) {
+  r /= 255; g /= 255; b /= 255;
+  const max = Math.max(r, g, b), d = max - Math.min(r, g, b);
+  let h = 0;
+  if (d) h = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+  return { h: (h * 60 + 360) % 360, s: max ? d / max : 0, v: max };
+}
+
+/** { h, s, v } → { h, s, l }, all but h 0-1. */
+export function hsvToHsl({ h, s, v }) {
+  const l = v * (1 - s / 2);
+  return { h, s: l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l), l };
+}
+
+/** { h, s, l } → { h, s, v }. */
+export function hslToHsv({ h, s, l }) {
+  const v = l + s * Math.min(l, 1 - l);
+  return { h, s: v ? 2 * (1 - l / v) : 0, v };
+}
+
+let probe;
+/** A named or any other CSS color, through the browser; null when there is none. */
+function browserColor(text) {
+  if (typeof document === 'undefined' || !document.createElement) return null;
+  try {
+    probe ??= document.createElement('canvas').getContext('2d');
+    if (!probe) return null;
+    probe.fillStyle = '#010203';
+    probe.fillStyle = text;
+    const out = probe.fillStyle;
+    if (out === '#010203' && !/^#?010203$/i.test(text.trim())) return null;
+    return out.startsWith('#') ? out : null;
+  } catch { return null; }
+}
+
+const num = (part, scale) => {
+  const text = String(part).trim();
+  if (text.endsWith('%')) return Number.parseFloat(text) / 100 * scale;
+  return Number.parseFloat(text);
+};
+
+/**
+ * A CSS color → { r, g, b } (0-255), or null. Reads #rgb, #rrggbb (alpha is
+ * ignored), rgb()/rgba(), hsl()/hsla() and, in a browser, any named color.
+ */
+export function parseColor(value) {
+  const text = String(value ?? '').trim().toLowerCase();
+  if (!text) return null;
+  let m = text.match(/^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/);
+  if (m) {
+    let hex = m[1];
+    if (hex.length <= 4) hex = hex.slice(0, 3).split('').map((c) => c + c).join('');
+    return { r: parseInt(hex.slice(0, 2), 16), g: parseInt(hex.slice(2, 4), 16), b: parseInt(hex.slice(4, 6), 16) };
+  }
+  m = text.match(/^(rgba?|hsla?)\(([^)]*)\)$/);
+  if (m) {
+    const parts = m[2].split(/[\s,/]+/).filter(Boolean);
+    if (parts.length < 3) return null;
+    if (m[1].startsWith('rgb')) {
+      const [r, g, b] = parts.slice(0, 3).map((p) => num(p, 255));
+      return [r, g, b].every(Number.isFinite) ? { r: clamp(r, 0, 255), g: clamp(g, 0, 255), b: clamp(b, 0, 255) } : null;
+    }
+    const h = Number.parseFloat(parts[0]), s = num(parts[1], 1), l = num(parts[2], 1);
+    const S = parts[1].endsWith('%') ? s : s / 100, L = parts[2].endsWith('%') ? l : l / 100;
+    if (![h, S, L].every(Number.isFinite)) return null;
+    return hsvToRgb(hslToHsv({ h: ((h % 360) + 360) % 360, s: clamp(S, 0, 1), l: clamp(L, 0, 1) }));
+  }
+  const resolved = browserColor(text);
+  return resolved ? parseColor(resolved) : null;
+}
+
+/** WCAG relative luminance, 0 (black) to 1 (white). */
+export function luminance({ r, g, b }) {
+  const lin = (c) => { c /= 255; return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4; };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+
+/** Dark or light text, whichever reads better on `color`. */
+export function contrastText(color, dark = '#0c0f13', light = '#ffffff') {
+  const rgb = typeof color === 'string' ? parseColor(color) : color;
+  if (!rgb) return light;
+  const L = luminance(rgb);
+  // Contrast against near-black (#0c0f13, L≈.005) versus white.
+  return (L + 0.05) / 0.055 >= 1.05 / (L + 0.05) ? dark : light;
+}
+
+const HUES = [
+  [15, 'red'], [40, 'orange'], [64, 'yellow'], [80, 'lime'], [150, 'green'], [178, 'teal'],
+  [200, 'cyan'], [242, 'blue'], [270, 'indigo'], [292, 'purple'], [325, 'magenta'], [345, 'pink'], [360, 'red']
+];
+
+/** A short plain-English name: "dark blue", "light gray", "orange", "brown". */
+export function colorName(color) {
+  const rgb = typeof color === 'string' ? parseColor(color) : color;
+  if (!rgb) return '';
+  const { h, s, l } = hsvToHsl(rgbToHsv(rgb));
+  if (l < 0.07) return 'black';
+  if (l > 0.96) return 'white';
+  if (s < 0.1 || (s < 0.2 && (l < 0.2 || l > 0.85))) return l < 0.3 ? 'dark gray' : l > 0.72 ? 'light gray' : 'gray';
+  let hue = HUES.find(([end]) => h < end)?.[1] || 'red';
+  if ((hue === 'orange' || hue === 'red' || hue === 'yellow') && l < 0.4 && h >= 8 && h < 50) hue = 'brown';
+  else if (hue === 'red' && l > 0.7) return 'pink';
+  if (hue === 'brown') return l < 0.18 ? 'dark brown' : 'brown';
+  const tone = l < 0.36 ? 'dark ' : l > 0.78 ? 'light ' : s < 0.35 ? 'muted ' : (s > 0.85 && l > 0.4 && l < 0.6 ? 'vivid ' : '');
+  return tone + hue;
+}
+
+/** "#1e90ff", "rgb(30, 144, 255)" or "hsl(210, 100%, 56%)". */
+export function formatColor(rgb, format = 'hex') {
+  if (format === 'rgb') return `rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`;
+  if (format === 'hsl') {
+    const { h, s, l } = hsvToHsl(rgbToHsv(rgb));
+    return `hsl(${round(h) % 360}, ${round(s * 100)}%, ${round(l * 100)}%)`;
+  }
+  return rgbToHex(rgb);
+}

package/src/o-clock.js

@@ -1,11 +1,11 @@
 /**
- * <o-clock> — analog clock / watch face. The kit's flagship.
+ * <o-clock>: an analog clock or watch face.
  *
- * The idiomatic Orbit clock: every part is a plain element on a nested orbit,
- * and the rotation math is the framework's job. Hands are `.vector`s at the
- * center orbit, pointed by `--o-angle-composite`; ticks are vectors
- * auto-distributed around a ring; numerals are satellites on an outer ring;
- * sub-dials are nested gravity-spots with their own hands.
+ * Every part is a plain Orbit element and the rotation math is Orbit's job.
+ * The dial is the universe (orbit-12 is its edge). Hands are `.vector`s on the
+ * center orbit, pointed by `--o-angle-composite`; ticks are vectors spread
+ * around orbit-11; numerals are satellites on orbit-9; sub-dials are
+ * satellites that hold a universe of their own, with their own hands.
  *
  * Variants:
  *   - case:    round | square | rounded | rectangle   (the body/bezel)
@@ -17,53 +17,57 @@
  *   - presets: classic | roman | minimal | chrono | smartwatch
  *
  *   <o-clock live seconds></o-clock>
- *   <o-clock preset="chrono" live brand="ORBIT"></o-clock>
+ *   <o-clock preset="chrono" live brand="Orbit"></o-clock>
  *   <o-clock case="rectangle" dial="oval" live smooth></o-clock>   <!-- tonneau -->
  *
  * Hands/readouts are patched in place every frame/second; the structure is
  * rebuilt only when the face itself changes.
  */
-import { OrbitKitElement, define, injectStyleOnce } from './base.js';
+import { OrbitKitElement, define, injectStyleOnce, universe, hub, escapeHTML as e } from './base.js';
 
 const CLOCK_CSS = `
+o-clock { --ok-font-size: 7.5cqmin; }
 o-clock .ok-clock-case {
   box-sizing: border-box; display: flex; align-items: center; justify-content: center;
 }
+o-clock .ok-clock-case > .bigbang { width: 100%; }
 o-clock .ok-clock-case--round     { border-radius: 50%; }
-o-clock .ok-clock-case--square    { border-radius: 9%; }
-o-clock .ok-clock-case--rounded   { border-radius: 26%; }
-o-clock .ok-clock-case--rectangle { border-radius: 24%; }
+o-clock .ok-clock-case--square    { border-radius: 9%; padding: 8%; }
+o-clock .ok-clock-case--rounded   { border-radius: 26%; padding: 8%; }
+o-clock .ok-clock-case--rectangle { border-radius: 24%; padding: 8%; }
+o-clock .ok-clock-case--rectangle > .bigbang { height: auto; align-self: stretch; aspect-ratio: auto; }
 o-clock .ok-clock-case--square,
 o-clock .ok-clock-case--rounded,
 o-clock .ok-clock-case--rectangle {
-  background: var(--ok-clock-case-bg, linear-gradient(160deg, #232a34, #11151b));
+  background: var(--ok-clock-case-bg, var(--ok-case, linear-gradient(160deg, #232a34, #11151b)));
   box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
 }
-o-clock .ok-clock-face { color: var(--ok-clock-numeral, #e6edf3); }
+o-clock .ok-clock-face { color: var(--ok-clock-numeral, var(--ok-text, #e6edf3)); }
 o-clock .ok-clock-dial {
-  background: var(--ok-clock-face, radial-gradient(circle at 50% 35%, #1b212b, #0c0f14));
-  box-shadow: inset 0 0 0 4px var(--ok-clock-bezel, #2a3340), inset 0 4px 18px rgba(0,0,0,.6);
+  background: var(--ok-clock-face, var(--ok-face, radial-gradient(circle at 50% 35%, #1b212b, #0c0f14)));
+  box-shadow: inset 0 0 0 4px var(--ok-clock-bezel, var(--ok-bezel, #2a3340)), inset 0 4px 18px rgba(0,0,0,.6);
 }
-o-clock .ok-clock-tick   { background: var(--ok-clock-tick, rgba(230,237,243,.35)); height: 2px; border-radius: 2px; }
-o-clock .ok-clock-tick-h { background: var(--ok-clock-tick-h, #e6edf3); height: 3px; border-radius: 2px; }
+o-clock .ok-clock-tick   { background: var(--ok-clock-tick, var(--ok-tick, rgba(230,237,243,.35))); height: max(1px, .6cqmin); border-radius: 2px; }
+o-clock .ok-clock-tick-h { background: var(--ok-clock-tick-h, var(--ok-hand, #e6edf3)); height: max(2px, 1cqmin); border-radius: 2px; }
 o-clock .ok-clock-num    { font-weight: 700; font-variant-numeric: tabular-nums; }
-o-clock .ok-clock-brand   { font-size: .62em; letter-spacing: .18em; font-weight: 800; text-transform: uppercase; color: var(--ok-clock-accent, #ef4565); }
-o-clock .ok-clock-digital { font-size: .7em; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; opacity: .85; }
-o-clock .ok-clock-date    { font-size: .62em; font-weight: 800; font-variant-numeric: tabular-nums; padding: .12em .4em; border-radius: 4px; background: rgba(255,255,255,.1); }
-o-clock .ok-clock-hour   { background: var(--ok-clock-hand, #e6edf3); height: 7px; border-radius: 4px; }
-o-clock .ok-clock-min    { background: var(--ok-clock-hand, #e6edf3); height: 5px; border-radius: 3px; }
-o-clock .ok-clock-sec    { background: var(--ok-clock-accent, #ef4565); height: 2px; border-radius: 2px; }
-o-clock .ok-clock-cap    { background: var(--ok-clock-accent, #ef4565); box-shadow: 0 0 0 3px var(--ok-clock-face-cap, #0c0f14); }
-o-clock .ok-clock-ringtime { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ok-clock-numeral, #e6edf3); text-align: center; }
+o-clock .ok-clock-brand   { font-size: .6em; font-weight: 800; white-space: nowrap; color: var(--ok-clock-accent, var(--ok-accent, #ef4565)); }
+o-clock .ok-clock-digital { font-size: .7em; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .85; }
+o-clock .ok-clock-date    { font-size: .62em; font-weight: 800; font-variant-numeric: tabular-nums; padding: .12em .4em; border-radius: 4px; background: color-mix(in srgb, currentColor 12%, transparent); }
+o-clock .ok-clock-hour   { background: var(--ok-clock-hand, var(--ok-hand, #e6edf3)); height: max(3px, 2.4cqmin); border-radius: 9px; }
+o-clock .ok-clock-min    { background: var(--ok-clock-hand, var(--ok-hand, #e6edf3)); height: max(2px, 1.7cqmin); border-radius: 9px; }
+o-clock .ok-clock-sec    { background: var(--ok-clock-accent, var(--ok-accent, #ef4565)); height: max(1px, .7cqmin); border-radius: 2px; }
+o-clock .ok-clock-cap    { background: var(--ok-clock-accent, var(--ok-accent, #ef4565)); box-shadow: 0 0 0 max(2px, .8cqmin) var(--ok-clock-face-cap, var(--ok-surface, #0c0f14)); }
+o-clock .ok-clock-ringtime { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ok-clock-numeral, var(--ok-text, #e6edf3)); text-align: center; --ok-hub-size: 1.1em; }
 /* sub-dials */
 o-clock .ok-subdial-ring { border: 1px solid var(--ok-clock-tick, rgba(230,237,243,.3)); box-shadow: inset 0 0 8px rgba(0,0,0,.4); }
 o-clock .ok-sub-tick     { background: var(--ok-clock-tick, rgba(230,237,243,.3)); height: 1px; }
-o-clock .ok-subdial-hand { background: var(--ok-clock-accent, #ef4565); height: 2px; border-radius: 2px; }
-o-clock .ok-subdial-cap  { background: var(--ok-clock-tick-h, #e6edf3); }
-o-clock .ok-subdial-label{ font-size: .4em; opacity: .55; letter-spacing: .1em; text-transform: uppercase; }
+o-clock .ok-subdial-hand { background: var(--ok-clock-accent, var(--ok-accent, #ef4565)); height: max(1px, .6cqmin); border-radius: 2px; }
+o-clock .ok-subdial-cap  { background: var(--ok-clock-tick-h, var(--ok-hand, #e6edf3)); }
+o-clock .ok-subdial-label{ font-size: .4em; opacity: .6; }
 o-clock.ok-glow .ok-clock-hour,
-o-clock.ok-glow .ok-clock-min  { filter: drop-shadow(0 0 4px var(--ok-clock-hand, #e6edf3)); }
-o-clock.ok-glow .ok-clock-sec  { filter: drop-shadow(0 0 5px var(--ok-clock-accent, #ef4565)); }
+o-clock.ok-glow .ok-clock-min  { filter: drop-shadow(0 0 var(--ok-clock-glow, 4px) var(--ok-clock-hand, var(--ok-hand, #e6edf3))); }
+o-clock.ok-glow .ok-clock-sec  { filter: drop-shadow(0 0 var(--ok-clock-glow, 5px) var(--ok-clock-accent, var(--ok-accent, #ef4565))); }
+o-clock .ok-ring-track, o-clock .ok-ring-value { --o-stroke: var(--o-fill); }
 `;
 
 const ROMAN = ['XII', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X', 'XI'];
@@ -74,7 +78,7 @@ const PRESETS = {
   classic:    { case: 'round',   numerals: 'arabic' },
   roman:      { case: 'round',   numerals: 'roman' },
   minimal:    { case: 'round',   numerals: 'none' },
-  chrono:     { case: 'round',   numerals: 'arabic', subdials: true, brand: 'ORBIT' },
+  chrono:     { case: 'round',   numerals: 'arabic', subdials: true, brand: 'Orbit' },
   smartwatch: { case: 'rounded', numerals: 'arabic', seconds: true, smooth: true,
                 digital: true, date: true, accent: '#3da9fc' }
 };
@@ -84,7 +88,8 @@ export class OrbitClock extends OrbitKitElement {
   static get observedAttributes() {
     return ['time', 'live', 'smooth', 'seconds', 'numerals', 'size', 'preset',
             'case', 'dial', 'digital', 'date', 'brand', 'subdials',
-            'face', 'bezel', 'case-bg', 'hand-color', 'accent', 'tick-color', 'glow'];
+            'face', 'bezel', 'case-bg', 'hand-color', 'accent', 'tick-color', 'glow',
+            'hour-color', 'minute-color', 'second-color'];
   }
 
   /** Resolve a string attribute against the active preset, then a hard default. */
@@ -107,7 +112,7 @@ export class OrbitClock extends OrbitKitElement {
     const smooth = this._flag('smooth');
     return {
       time: this._str('time', null),
-      live: this.hasAttribute('live'),
+      live: this._flag('live'),
       smooth,
       seconds: this._flag('seconds') || smooth,
       numerals: this._opt('numerals', 'arabic'),
@@ -118,76 +123,58 @@ export class OrbitClock extends OrbitKitElement {
       date: this._flag('date'),
       subdials: this._flag('subdials'),
       brand: this._opt('brand', null),
-      size: this._str('size', '300px'),
-      glow: this.hasAttribute('glow'),
-      theme: ['face', 'bezel', 'case-bg', 'hand-color', 'accent', 'tick-color']
+      size: this._size('size', '300px'),
+      glow: this.getAttribute('glow'),
+      theme: ['face', 'bezel', 'case-bg', 'hand-color', 'accent', 'tick-color', 'hour-color', 'minute-color', 'second-color']
         .map((a) => this.getAttribute(a)).join('|')
     };
   }
 
   structuralSignature(cfg) {
     // Hands + digital/date/sub-dial readouts are patched live; only the face rebuilds.
-    const { time, ...rest } = cfg;
+    const { time, live, smooth, ...rest } = cfg;
     return JSON.stringify(rest);
   }
 
   build(cfg) {
     injectStyleOnce('orbit-kit-clock', CLOCK_CSS);
-    this.classList.toggle('ok-glow', cfg.glow);
-    this._ringTime = null; // reset face mode each build
+    this.classList.toggle('ok-glow', cfg.glow != null);
+    this._ringTime = this._ringH = this._ringM = this._ringS = null; // reset face mode each build
 
     // Convenience attributes mirror the CSS custom properties.
     const map = {
       face: '--ok-clock-face', bezel: '--ok-clock-bezel', 'case-bg': '--ok-clock-case-bg',
       'hand-color': '--ok-clock-hand', accent: '--ok-clock-accent', 'tick-color': '--ok-clock-tick'
     };
-    for (const [attr, prop] of Object.entries(map)) {
-      const v = this.getAttribute(attr);
-      if (v != null) this.style.setProperty(prop, v);
-    }
-    if (this.getAttribute('accent') == null) {
-      const p = PRESETS[this.getAttribute('preset')];
-      if (p && p.accent) this.style.setProperty('--ok-clock-accent', p.accent);
-    }
+    const overrides = Object.fromEntries(Object.entries(map).map(([attr, prop]) => [prop, this.getAttribute(attr)]));
+    overrides['--ok-clock-accent'] = this.getAttribute('accent') ?? PRESETS[this.getAttribute('preset')]?.accent ?? null;
+    overrides['--ok-clock-glow'] = cfg.glow == null ? null : `${Math.max(0, this._num('glow', 5))}px`;
+    this._applyTheme(overrides);
 
     if (cfg.ringsFace) { this._buildRingsFace(cfg); return; }
 
-    // Orbit sizes track --o-force (orbit-N diameter = N/12 * force), NOT the
-    // box. The dial is orbit-11, so scale force to make it equal the requested
-    // size. The case wraps the dial with extra frame for non-round shapes.
-    const dialPx = parseFloat(cfg.size) || 300;
-    const force = (dialPx * 12 / 11).toFixed(1);
-    const frame = cfg.caseShape === 'round' ? 0 : Math.round(dialPx * 0.08);
-    const caseW = dialPx + frame * 2;
-    const caseH = caseW + (cfg.caseShape === 'rectangle' ? Math.round(dialPx * 0.26) : 0);
-    const baseFont = (dialPx * 0.075).toFixed(1);
-
-    // Oval dial: stretch the orbits to match the CASE orientation so a tall
-    // (rectangle) case gives a tall dial (true tonneau), not a sideways oval.
-    let ellipse = '';
-    if (cfg.oval) {
-      if (caseH > caseW) ellipse = `--o-ellipse-x:1;--o-ellipse-y:${(caseW / caseH).toFixed(3)};`;
-      else if (caseW > caseH) ellipse = `--o-ellipse-x:${(caseH / caseW).toFixed(3)};--o-ellipse-y:1;`;
-      else ellipse = '--o-ellipse-x:1;--o-ellipse-y:.82;'; // square box → gentle vertical oval
-    }
+    // The case is a box around the dial; the dial is the universe. A
+    // rectangle case gives a tall universe whose shorter side is its width.
+    const caseH = cfg.caseShape === 'rectangle' ? 126 : 100;
+    const ellipse = cfg.oval ? `--o-ellipse-x:1;--o-ellipse-y:${cfg.caseShape === 'rectangle' ? (100 / caseH).toFixed(3) : '.82'};` : '';
 
     // --- ticks: 60 minute, 12 hour (overdraw every 5th) ---
     const minuteTicks = Array.from({ length: 60 }, () =>
-      '<div class="vector inner-orbit shrink-55 ok-clock-tick"></div>').join('');
+      '<div class="vector inner-orbit ok-clock-tick"></div>').join('');
     const hourTicks = Array.from({ length: 12 }, () =>
-      '<div class="vector inner-orbit shrink-15 ok-clock-tick-h"></div>').join('');
+      '<div class="vector inner-orbit ok-clock-tick-h"></div>').join('');
 
     // --- numerals ---
     const labels = cfg.numerals === 'roman' ? ROMAN
                  : cfg.numerals === 'none' ? null : ARABIC;
     const numerals = labels
-      ? `<div class="orbit-8">${labels.map((n) =>
+      ? `<div class="orbit-${cfg.numerals === 'roman' ? 8 : 9}">${labels.map((n) =>
           `<div class="satellite"><div class="capsule ok-clock-num">${n}</div></div>`).join('')}</div>`
       : '';
 
     // --- complications (suppressed when sub-dials own the lower face) ---
     const brand = cfg.brand
-      ? `<div class="orbit-4"><div class="satellite angle-0"><div class="capsule ok-clock-brand">${cfg.brand}</div></div></div>`
+      ? `<div class="orbit-4"><div class="satellite angle-0"><div class="capsule ok-clock-brand">${e(cfg.brand)}</div></div></div>`
       : '';
     const digital = (cfg.digital && !cfg.subdials)
       ? `<div class="orbit-4"><div class="satellite angle-180"><div class="capsule ok-clock-digital"></div></div></div>`
@@ -197,32 +184,31 @@ export class OrbitClock extends OrbitKitElement {
       : '';
 
     // --- sub-dials: chronograph tri-compax at 3/6/9 ---
-    const subForce = (dialPx * 0.96).toFixed(1);
     const subdials = cfg.subdials
-      ? this._subdial('sec', 'angle-270', subForce, 'S')   // 9 o'clock — small seconds
-      + this._subdial('h24', 'angle-90', subForce, '24')   // 3 o'clock — 24-hour
-      + this._subdial('date', 'angle-180', subForce, '31') // 6 o'clock — date
+      ? this._subdial('sec', 'angle-270', 'S')   // 9 o'clock: small seconds
+      + this._subdial('h24', 'angle-90', '24')   // 3 o'clock: 24-hour
+      + this._subdial('date', 'angle-180', '31') // 6 o'clock: date
       : '';
 
-    // --- hands ---
+    // --- hands (length in lanes; outer-orbit starts them at the center) ---
     const secondHand = cfg.seconds
-      ? '<div class="vector outer-orbit grow-4x ok-clock-hand ok-clock-sec"></div>'
+      ? '<div class="vector outer-orbit ok-clock-hand ok-clock-sec" style="--o-size-ratio:10"></div>'
       : '';
 
     this.innerHTML = `
-      <div class="ok-clock-case ok-clock-case--${cfg.caseShape}" style="width:${caseW}px;height:${caseH}px;font-size:${baseFont}px;">
-        <div class="bigbang" style="width:100%;height:100%;">
-          <div class="gravity-spot ok-clock-face" style="--o-force:${force}px;${ellipse}">
-            <div class="orbit-11 ok-clock-dial"></div>
-            <div class="orbit-10">${minuteTicks}</div>
-            <div class="orbit-10">${hourTicks}</div>
+      <div class="ok-clock-case ok-clock-case--${cfg.caseShape}${cfg.caseShape === 'round' ? '' : ' ok-surface'}" style="width:${e(cfg.size)};aspect-ratio:100 / ${caseH}">
+        <div class="bigbang">
+          <div class="gravity-spot ok-clock-face"${ellipse ? ` style="${ellipse}"` : ''}>
+            <div class="orbit-12 ok-clock-dial ok-surface"></div>
+            <div class="orbit-11" style="--o-size-ratio:.45">${minuteTicks}</div>
+            <div class="orbit-11" style="--o-size-ratio:.9">${hourTicks}</div>
             ${numerals}
             ${brand}${digital}${date}${subdials}
             <div class="orbit-0">
-              <div class="vector outer-orbit grow-2x ok-clock-hand ok-clock-hour"></div>
-              <div class="vector outer-orbit grow-3x ok-clock-hand ok-clock-min"></div>
+              <div class="vector outer-orbit ok-clock-hand ok-clock-hour" style="--o-size-ratio:5.4"></div>
+              <div class="vector outer-orbit ok-clock-hand ok-clock-min" style="--o-size-ratio:8.2"></div>
               ${secondHand}
-              <div class="satellite at-center shrink-80 ok-clock-cap"></div>
+              <div class="satellite at-center ok-clock-cap" style="--o-size-ratio:.9"></div>
             </div>
           </div>
         </div>
@@ -239,22 +225,22 @@ export class OrbitClock extends OrbitKitElement {
   }
 
   /**
-   * One chronograph sub-dial: a nested gravity-spot (its own --o-force keeps it
-   * small) with a tick ring, a labeled counter and a single live hand.
+   * One chronograph sub-dial: a satellite that is a universe of its own, with
+   * a tick ring, a labeled counter and a single live hand.
    */
-  _subdial(kind, angleClass, subForce, label) {
+  _subdial(kind, angleClass, label) {
     const ticks = Array.from({ length: 12 }, () =>
-      '<div class="vector inner-orbit shrink-60 ok-sub-tick"></div>').join('');
+      '<div class="vector inner-orbit ok-sub-tick"></div>').join('');
     return `
-      <div class="orbit-5">
+      <div class="orbit-5" style="--o-size-ratio:5.8">
         <div class="satellite ${angleClass}">
-          <div class="gravity-spot" style="--o-force:${subForce}px;">
-            <div class="orbit-3 ok-subdial-ring"></div>
-            <div class="orbit-3">${ticks}</div>
-            <div class="orbit-1"><div class="satellite angle-180"><div class="capsule ok-subdial-label">${label}</div></div></div>
+          <div class="gravity-spot">
+            <div class="orbit-12 ok-subdial-ring"></div>
+            <div class="orbit-12" style="--o-size-ratio:1.6">${ticks}</div>
+            <div class="orbit-5"><div class="satellite angle-180"><div class="capsule ok-subdial-label">${label}</div></div></div>
             <div class="orbit-0">
-              <div class="vector outer-orbit grow-1x ok-subdial-hand ok-sub-${kind}"></div>
-              <div class="satellite at-center shrink-90 ok-subdial-cap"></div>
+              <div class="vector outer-orbit ok-subdial-hand ok-sub-${kind}" style="--o-size-ratio:8.5"></div>
+              <div class="satellite at-center ok-subdial-cap" style="--o-size-ratio:1.4"></div>
             </div>
           </div>
         </div>
@@ -268,35 +254,22 @@ export class OrbitClock extends OrbitKitElement {
     this._subSec = this._sub24 = this._subDate = this._digital = this._dateEl = null;
 
     const defs = [
-      { key: 'H', color: this.getAttribute('hour-color') || '#ff453a' },
-      { key: 'M', color: this.getAttribute('minute-color') || '#32d74b' }
+      { key: 'H', color: this._color('hour-color', '#ff453a') },
+      { key: 'M', color: this._color('minute-color', '#32d74b') }
     ];
-    if (cfg.seconds) defs.push({ key: 'S', color: this.getAttribute('second-color') || this.getAttribute('accent') || '#0a84ff' });
-
-    const outer = 1 + defs.length;
-    const sizeNum = parseFloat(cfg.size) || 300;
-    const force = (sizeNum * 12 / (outer + 1)).toFixed(1);
-    const sw = Math.max(6, Math.round(sizeNum * 0.05));
+    if (cfg.seconds) defs.push({ key: 'S', color: this._color('second-color', this._color('accent', '#0a84ff')) });
 
+    const thickness = 2.6;
     const rings = defs.map((r, i) => {
-      const orbit = outer - i;
-      const track = `color-mix(in srgb, ${r.color} 14%, #0c0f14)`;
-      const glow = cfg.glow ? `filter:drop-shadow(0 0 5px ${r.color});` : '';
-      const fill = `--o-fill:${r.color};--o-stroke:${r.color};--o-stroke-width:${sw};${glow}`;
-      // Solid track o-arc behind + o-progress value (o-progress back is hollow).
-      return `<div class="orbit-${orbit}"><o-arc value="100" shape="rounded" style="--o-fill:${track};--o-stroke:${track};--o-stroke-width:${sw}"></o-arc></div>`
-        + `<div class="orbit-${orbit}"><o-progress class="ok-ring-${r.key}" value="0" max="100" shape="rounded" style="${fill}"></o-progress></div>`;
+      const ring = `class="orbit-${12 - i * 3}" style="--o-size-ratio:${thickness};--o-gap:0"`;
+      const track = `color-mix(in srgb, ${r.color} 18%, transparent)`;
+      const glow = cfg.glow != null ? `filter:drop-shadow(0 0 ${Math.max(0, this._num('glow', 5))}px ${r.color});` : '';
+      // Solid track arc behind the progress value.
+      return `<div ${ring}><o-arc class="inner-orbit ok-ring-track" value="100" shape="rounded" style="--o-fill:${track}"></o-arc></div>`
+        + `<div ${ring}><o-progress class="inner-orbit ok-ring-value ok-ring-${r.key}" value="0" max="100" shape="rounded" style="${e(`--o-fill:${r.color};${glow}`)}"></o-progress></div>`;
     }).join('');
-
-    this.innerHTML = `
-      <div class="bigbang" style="width:${cfg.size};aspect-ratio:1;">
-        <div class="gravity-spot" style="--o-force:${force}px;">
-          ${rings}
-          <div class="orbit-0"><div class="satellite at-center">
-            <div class="capsule ok-clock-ringtime" style="font-size:${(sizeNum * 0.13).toFixed(1)}px;"></div>
-          </div></div>
-        </div>
-      </div>`;
+    const hole = 12 - (defs.length - 1) * 3 - thickness;
+    this.innerHTML = universe(cfg.size, `${rings}${hub(2 * hole - .5, '', 'ok-hub ok-clock-ringtime')}`);
 
     this._ringH = this.querySelector('.ok-ring-H');
     this._ringM = this.querySelector('.ok-ring-M');
@@ -317,15 +290,17 @@ export class OrbitClock extends OrbitKitElement {
   /** Point all hands and update digital/date readouts for a given Date. */
   _paint(date, smooth) {
     const h = date.getHours(), m = date.getMinutes();
+    this._describe(`${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`);
+    const text = (el, value) => { if (el && el.textContent !== value) el.textContent = value; };
     const s = smooth ? date.getSeconds() + date.getMilliseconds() / 1000 : date.getSeconds();
 
     // Rings face (iOS-style): fill concentric progress rings by time.
     if (this._ringTime) {
-      const setV = (el, frac) => el && el.setAttribute('value', (frac * 100).toFixed(2));
+      const setV = (el, frac) => { const v = (frac * 100).toFixed(2); if (el && el.getAttribute('value') !== v) el.setAttribute('value', v); };
       setV(this._ringH, ((h % 12) + m / 60) / 12);
       setV(this._ringM, (m + s / 60) / 60);
       setV(this._ringS, (s % 60) / 60);
-      this._ringTime.textContent = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+      text(this._ringTime, `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);
       return;
     }
 
@@ -340,18 +315,20 @@ export class OrbitClock extends OrbitKitElement {
     set(this._subDate, ((date.getDate() - 1) / 31) * 360 - 90);
     // Digital / date readouts.
     if (this._digital) {
-      this._digital.textContent = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+      text(this._digital, `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`);
     }
-    if (this._dateEl) this._dateEl.textContent = String(date.getDate());
+    text(this._dateEl, String(date.getDate()));
   }
 
   /** Resolve the configured time: explicit `time="HH:MM[:SS]"` or now. */
   _resolveDate(cfg) {
-    if (cfg.time) {
-      const [hh, mm, ss] = cfg.time.split(':').map((n) => parseInt(n, 10));
-      const d = new Date();
-      d.setHours(hh || 0, mm || 0, ss || 0, 0);
-      return d;
+    if (!cfg.live && /^\d{1,2}:\d{2}(?::\d{2})?$/.test(cfg.time || '')) {
+      const [hh, mm, ss = 0] = cfg.time.split(':').map(Number);
+      if (hh < 24 && mm < 60 && ss < 60) {
+        const d = new Date();
+        d.setHours(hh, mm, ss, 0);
+        return d;
+      }
     }
     return new Date();
   }