/* global React, AuroraMark */
// Aurora PRIMITIVES + design tokens — the shared building blocks used by the
// canonical screens (aurora-unified-screens.jsx) in BOTH the Unified router and
// the Combined canvas. No screens live here anymore; this is just the kit.
const { useState, useRef, useEffect } = React;
const C_BG = 'linear-gradient(180deg, #1a1f3a 0%, #0d0f1f 100%)';
const C_FIRE = 'linear-gradient(180deg, #1a1f3a 0%, #4a3147 42%, #c25d75 100%)';
// Warm morning — driven by a CSS var so the colorway can be tuned globally.
const C_MORN = 'var(--morn)';
const C_CORAL = '#ff7a59';
const C_INDIGO = '#6b7be0';
const C_GREEN = '#5fdba7';
const C_GOLD = '#f5c46b';
const C_TEXT = '#e8e6f0';
const C_DIM = 'rgba(232,230,240,0.55)';
const C_MUTED = 'rgba(232,230,240,0.3)';
const C_CARD = 'rgba(255,255,255,0.05)';
// Dark glass — for Plan & Memory (V5 layout)
const CGlass = ({ children, style }) => (
{children}
);
// day-summary helper (shared)
const DAY_LETTERS = ['M','T','W','T','F','S','S'];
const daySummary = (days = []) => {
const n = days.filter(Boolean).length;
if (n === 0) return 'Once';
if (n === 7) return 'Every day';
if (days[0]&&days[1]&&days[2]&&days[3]&&days[4]&&!days[5]&&!days[6]) return 'Weekdays';
if (!days[0]&&!days[1]&&!days[2]&&!days[3]&&!days[4]&&days[5]&&days[6]) return 'Weekends';
return days.map((d,i) => d ? DAY_LETTERS[i] : null).filter(Boolean).join(' ');
};
// ─── 24h alarm dial — DRAGGABLE. The selected alarm shows a bell grip you drag to
// set its time (snapped to 5 min); other enabled alarms show as faint dots on the
// 24h ring. Center shows the selected alarm's time + which days it repeats.
// Controlled: alarms = [{h,m,enabled,days}]; onChange(selectedIndex, {h,m}).
const CDial = ({ size = 206, alarms = [], selectedIndex = 0, onChange }) => {
const svgRef = useRef(null);
const [drag, setDrag] = useState(false);
const cx = size/2, cy = size/2;
const rOuter = size * 0.47, rInner = size * 0.35;
const rMid = (rOuter + rInner) / 2;
const band = rOuter - rInner;
const polar = (r, deg) => { const rad = deg*Math.PI/180; return [cx + r*Math.cos(rad), cy + r*Math.sin(rad)]; };
const toDeg = (t) => ((t.h + t.m/60) / 24) * 360 - 90;
const sel = alarms[selectedIndex] || { h: 6, m: 0, days: [] };
const [sx, sy] = polar(rMid, toDeg(sel));
const timeLabel = `${String(sel.h).padStart(2,'0')}:${String(sel.m).padStart(2,'0')}`;
useEffect(() => {
if (!drag) return;
const onMove = (e) => {
if (e.cancelable) e.preventDefault();
const pt = e.touches ? e.touches[0] : e;
const rect = svgRef.current.getBoundingClientRect();
const ccx = rect.left + rect.width/2, ccy = rect.top + rect.height/2;
const deg = Math.atan2(pt.clientY - ccy, pt.clientX - ccx) * 180/Math.PI;
let h = ((deg + 90)/360) * 24; h = (h % 24 + 24) % 24;
let mins = Math.round(h*60/5)*5 % 1440; // snap to 5 min
onChange && onChange(selectedIndex, { h: Math.floor(mins/60)%24, m: mins%60 });
};
const onUp = () => setDrag(false);
window.addEventListener('pointermove', onMove);
window.addEventListener('pointerup', onUp);
window.addEventListener('touchmove', onMove, { passive: false });
window.addEventListener('touchend', onUp);
return () => {
window.removeEventListener('pointermove', onMove);
window.removeEventListener('pointerup', onUp);
window.removeEventListener('touchmove', onMove);
window.removeEventListener('touchend', onUp);
};
}, [drag, onChange, selectedIndex]);
const hr = band * 0.78; // handle radius
const grab = (e) => { e.preventDefault(); e.stopPropagation(); setDrag(true); };
return (
);
};
// ─── Segmented control ───
function CSeg({ options, value, onChange }) {
return (
{options.map(o => {
const on = o === value;
return (
);
})}
);
}
// ─── Aurora orb (shared by both firing screens) ───
// speaking → beams: ripple rings + glow + a pulsing scale.
// settled → a single calm breathing loop. The only motion is that one transition.
function COrb({ size = 80, speaking, settledLabel = 'AURORA · LISTENING', settledDot = C_GREEN, label = true }) {
const ringSize = size * 1.03;
return (