@roxyapi/ui 0.0.1 → 0.1.1

package/src/utils/base-styles.ts

@@ -0,0 +1,89 @@
+import { css } from 'lit';
+
+/**
+ * Shared host styles every component pulls in. Sets default font, color,
+ * container query support, and the entry fade-in.
+ */
+export const baseStyles = css`
+	:host {
+		display: block;
+		container-type: inline-size;
+		font-family: var(
+			--roxy-font-sans,
+			system-ui,
+			-apple-system,
+			BlinkMacSystemFont,
+			'Segoe UI',
+			Roboto,
+			sans-serif
+		);
+		color: var(--roxy-fg, #0a0a0a);
+		background: transparent;
+		font-size: var(--roxy-text-base, 1rem);
+		line-height: var(--roxy-leading-normal, 1.5);
+		animation: roxy-fade-in var(--roxy-motion-duration, 200ms)
+			var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1)) both;
+	}
+
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	@keyframes roxy-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(2px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:host {
+			animation: none;
+		}
+	}
+
+	.roxy-skeleton {
+		background: linear-gradient(
+			90deg,
+			var(--roxy-border, #e4e4e7) 0%,
+			color-mix(in srgb, var(--roxy-border, #e4e4e7) 60%, transparent) 50%,
+			var(--roxy-border, #e4e4e7) 100%
+		);
+		background-size: 200% 100%;
+		animation: roxy-shimmer 1.4s ease-in-out infinite;
+		border-radius: var(--roxy-radius-md, 8px);
+	}
+
+	@keyframes roxy-shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.roxy-skeleton {
+			animation: none;
+		}
+	}
+
+	.roxy-empty {
+		padding: var(--roxy-space-lg, 1.5rem);
+		color: var(--roxy-muted, #71717a);
+		text-align: center;
+		font-size: var(--roxy-text-sm, 0.875rem);
+	}
+
+	:host(:focus-within) .roxy-card {
+		outline: 2px solid var(--roxy-ring, rgba(245, 158, 11, 0.4));
+		outline-offset: 2px;
+	}
+`;

package/src/utils/debounce.ts

@@ -0,0 +1,13 @@
+/**
+ * Lightweight debounce for input handlers. Used by location search.
+ */
+export function debounce<F extends (...args: never[]) => unknown>(
+	fn: F,
+	wait: number,
+): F {
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	return ((...args: Parameters<F>) => {
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => fn(...args), wait);
+	}) as F;
+}

package/src/utils/degree.ts

@@ -0,0 +1,64 @@
+/**
+ * Math helpers for converting raw ecliptic longitude decimals into the
+ * sign / degree / minute / second triplet used across chart components.
+ */
+
+import { SIGNS_ORDER } from '../tokens/index.js';
+
+export interface SignPosition {
+	sign: string;
+	signIndex: number;
+	degree: number;
+	minute: number;
+	second: number;
+}
+
+/**
+ * Wrap longitude into [0, 360) so negative or out-of-range values still
+ * resolve to a real sign. Robust to wonky upstream data.
+ */
+export function normalizeLongitude(lon: number): number {
+	const wrapped = lon % 360;
+	return wrapped < 0 ? wrapped + 360 : wrapped;
+}
+
+/**
+ * Convert decimal ecliptic longitude (0-360) into sign/degree/minute/second.
+ * Used by every chart wheel and aspect table.
+ */
+export function longitudeToSignPosition(longitude: number): SignPosition {
+	const lon = normalizeLongitude(longitude);
+	const signIndex = Math.floor(lon / 30) % 12;
+	const within = lon % 30;
+	const degree = Math.floor(within);
+	const minuteFloat = (within - degree) * 60;
+	const minute = Math.floor(minuteFloat);
+	const second = Math.round((minuteFloat - minute) * 60);
+	return {
+		sign: SIGNS_ORDER[signIndex] ?? 'Aries',
+		signIndex,
+		degree,
+		minute,
+		second,
+	};
+}
+
+/** Compact display string like "12° Leo 34'". Used in chart labels. */
+export function formatSignPosition(longitude: number): string {
+	const { sign, degree, minute } = longitudeToSignPosition(longitude);
+	return `${degree}° ${sign} ${String(minute).padStart(2, '0')}'`;
+}
+
+/** Polar to cartesian for SVG wheel positioning. Angle in degrees, 0 at 3 o'clock. */
+export function polarToCartesian(
+	cx: number,
+	cy: number,
+	radius: number,
+	angleDeg: number,
+): { x: number; y: number } {
+	const angleRad = (angleDeg * Math.PI) / 180;
+	return {
+		x: cx + radius * Math.cos(angleRad),
+		y: cy + radius * Math.sin(angleRad),
+	};
+}

package/src/utils/motion.ts

@@ -0,0 +1,18 @@
+/**
+ * Motion guard. All component animations honor:
+ *   1. --roxy-motion-duration CSS variable (set to 0ms to disable)
+ *   2. prefers-reduced-motion: reduce media query (forces 0ms regardless)
+ *
+ * Components apply transitions and entry animations using the duration var
+ * directly. The reduced-motion override is enforced at the tokens.css layer.
+ */
+
+export function prefersReducedMotion(): boolean {
+	if (typeof window === 'undefined' || !window.matchMedia) return false;
+	return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+/** CSS snippet that components paste into their styles to read the motion duration. */
+export const MOTION_DURATION = 'var(--roxy-motion-duration, 200ms)';
+export const MOTION_EASING =
+	'var(--roxy-motion-easing, cubic-bezier(0.4, 0, 0.2, 1))';